mirror of
https://github.com/status-im/consul.git
synced 2025-01-14 15:54:40 +00:00
e3f9a0f8ee
* ui: Loader amends/improvements 1. Create a JS compatible template only 'glimmer' component so we can use it with or without glimmer. 2. Add a set of `rose` colors. 3. Animate the brand loader to keep it centered when the side navigation appears. 4. Tweak the color of Consul::Loader to use a 'rose' color. 5. Move everything loader related to the `app/components/` folder and add docs.
38 lines
1.1 KiB
SCSS
38 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: #{$rose-100};
|
|
// --brand-200: #{$magenta-200};
|
|
// --brand-300: #{$magenta-300};
|
|
// --brand-400: #{$magenta-400};
|
|
// --brand-500: #{$magenta-500};
|
|
/* temporary rose-like color until its replaced by a numbered one */
|
|
--brand-600: #e03875;
|
|
// --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);
|
|
}
|