d1cbc3f032
* ui: Adds a tab selection animation to our app tabs 1. Replace all mentions of `magenta` with a themeable CSS property. 2. Add an easy way to inline style DOM nodes 3. Use CSS properties to add tab animation * Fix up rendering test * Avoid DOM noodling as much as possible
32 lines
956 B
SCSS
32 lines
956 B
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 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);
|
|
}
|