37 lines
1.1 KiB
SCSS
37 lines
1.1 KiB
SCSS
@import './custom-query';
|
|
|
|
// TODO: Setup only the CSS props we actually need here
|
|
// potentially see if our compiler can automatically remove
|
|
// unused CSS props
|
|
:root {
|
|
--white: #{$white};
|
|
--decor-border-100: #{$decor-border-100};
|
|
--decor-radius-200: #{$decor-radius-200};
|
|
--gray-500: #{$gray-500};
|
|
--decor-elevation-600: #{$decor-elevation-600};
|
|
|
|
/* base brand colors */
|
|
--brand-050: #{$magenta-050};
|
|
// --brand-100: #{$magenta-100};
|
|
// --brand-200: #{$magenta-200};
|
|
// --brand-300: #{$magenta-300};
|
|
// --brand-400: #{$magenta-400};
|
|
// --brand-500: #{$magenta-500};
|
|
--brand-600: #{$magenta-600};
|
|
// --brand-700: #{$magenta-700};
|
|
--brand-800: #{$magenta-800};
|
|
// --brand-900: #{$magenta-900};
|
|
|
|
/* themeable ui colors */
|
|
--typo-action-500: #{$blue-500};
|
|
--decor-error-500: #{$red-500};
|
|
--typo-contrast-999: #{$black};
|
|
|
|
/* themeable brand colors */
|
|
--typo-brand-050: var(--brand-050);
|
|
--typo-brand-600: var(--brand-600);
|
|
--decor-brand-600: var(--brand-600);
|
|
--swatch-brand-600: var(--brand-600);
|
|
--swatch-brand-800: var(--brand-800);
|
|
}
|