diff --git a/docs/app/@theme/components/hero/hero.component.ts b/docs/app/@theme/components/hero/hero.component.ts index bc7ca7743e..a49456e069 100644 --- a/docs/app/@theme/components/hero/hero.component.ts +++ b/docs/app/@theme/components/hero/hero.component.ts @@ -22,7 +22,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
- 3 + 4

Visual themes diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss index 932ba41e07..1a1765d3a3 100644 --- a/docs/app/blocks/components/live-example-block/live-example-block.component.scss +++ b/docs/app/blocks/components/live-example-block/live-example-block.component.scss @@ -8,8 +8,10 @@ $action-fg: nb-theme(color-fg-heading-light); $block-bg-default: #f7f8fa; $block-bg-cosmic: #292766; - $block-bg-corporate: #f7f8fa; $block-fg-cosmic: #e8e9fa; + $block-bg-corporate: #f7f8fa; + $block-bg-dark: #232a39; + $block-fg-dark: #f7f8fa; display: flex; flex-direction: column; @@ -102,8 +104,13 @@ .title { color: white; } - .action-item { - color: $block-fg-cosmic; + } + + &.theme-dark { + background-color: $block-bg-dark; + + .title { + color: white; } } diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/app/blocks/components/live-example-block/live-example-block.component.ts index ec47a707bb..18783fc880 100644 --- a/docs/app/blocks/components/live-example-block/live-example-block.component.ts +++ b/docs/app/blocks/components/live-example-block/live-example-block.component.ts @@ -45,11 +45,17 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe return this.currentTheme === 'corporate'; } + @HostBinding('class.theme-dark') + private get isDark() { + return this.currentTheme === 'dark'; + } + iframeHeight = 0; alive: boolean = true; themes: {label: string; value: string}[] = [ { label: 'Default', value: 'default' }, + { label: 'Dark', value: 'dark' }, { label: 'Cosmic', value: 'cosmic' }, { label: 'Corporate', value: 'corporate' }, ]; diff --git a/docs/articles/auth-install.md b/docs/articles/auth-install.md index f3159bfcd2..66bd85d583 100644 --- a/docs/articles/auth-install.md +++ b/docs/articles/auth-install.md @@ -141,7 +141,7 @@ Last but not least - install the component styles into your styles.scss ([more d ``` -`@import '~@nebular/auth/styles/all'` means import auth styles for all themes (default, cosmic, corporate). If you have only one or portion of themes enabled, then you need to import auth styles only for enabled themes. For example, when only default and corporate themes enabled, auth imports should look like this: +`@import '~@nebular/auth/styles/all'` means import auth styles for all themes (default, dark, corporate, cosmic). If you have only one or portion of themes enabled, then you need to import auth styles only for enabled themes. For example, when only default and corporate themes enabled, auth imports should look like this: ```scss @import '~@nebular/auth/styles/themes/default'; @import '~@nebular/auth/styles/themes/corporate'; diff --git a/docs/articles/bootstrap-integration.md b/docs/articles/bootstrap-integration.md index c7d104cb22..d9dec61dda 100644 --- a/docs/articles/bootstrap-integration.md +++ b/docs/articles/bootstrap-integration.md @@ -29,9 +29,10 @@ Then if you just want to use predefined themes you have to import prebuilt style ```json "styles": [ - "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css", + "node_modules/@nebular/bootstrap/styles/prebuilt/dark.css", "node_modules/@nebular/bootstrap/styles/prebuilt/default.css", "node_modules/@nebular/bootstrap/styles/prebuilt/corporate.css", + "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css" ] ``` diff --git a/docs/articles/concept-theme-system.md b/docs/articles/concept-theme-system.md index 9cc7a5c219..c3c9e5715e 100644 --- a/docs/articles/concept-theme-system.md +++ b/docs/articles/concept-theme-system.md @@ -93,10 +93,11 @@ Depending on the currently enabled theme and the way `card-bg` inherited in your Currently, there are 3 built-in themes: - `default` - clean white theme -- `cosmic` - dark theme +- `dark` - dark theme +- `cosmic` - alternative dark violet theme - `corporate` - firm business theme -Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `default` theme. +Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `dark` theme.
## Magic of multiple themes with hot-reload diff --git a/docs/articles/theme-change.md b/docs/articles/theme-change.md index 7ce0bc723c..7633f7e44a 100644 --- a/docs/articles/theme-change.md +++ b/docs/articles/theme-change.md @@ -1,6 +1,6 @@ # Change Current Theme -Nebular Theme System provides 3 color schemes out of the box - `default`, `corporate` and `cosmic`. It is both possible to change the theme statically and dynamically during the runtime. +Nebular Theme System provides 4 color schemes out of the box - `default`, `dark`, `corporate` and `cosmic`. It is both possible to change the theme statically and dynamically during the runtime. ## Switch from Cosmic to Default diff --git a/src/app/layout-theme-toggle/layout-theme-toggle.component.ts b/src/app/layout-theme-toggle/layout-theme-toggle.component.ts index d26d54efcb..9c7c278d3e 100644 --- a/src/app/layout-theme-toggle/layout-theme-toggle.component.ts +++ b/src/app/layout-theme-toggle/layout-theme-toggle.component.ts @@ -6,8 +6,9 @@ import { NbThemeService } from '@nebular/theme'; styleUrls: ['./layout-theme-toggle.component.scss'], template: ` `, diff --git a/src/framework/auth/components/login/login.component.html b/src/framework/auth/components/login/login.component.html index 3b2fe08a38..d890c9c2fe 100644 --- a/src/framework/auth/components/login/login.component.html +++ b/src/framework/auth/components/login/login.component.html @@ -27,6 +27,7 @@

Login

id="input-email" pattern=".+@.+\..+" placeholder="Email address" + fieldSize="giant" autofocus [status]="email.dirty ? (email.invalid ? 'danger' : 'success') : ''" [required]="getConfigValue('forms.validation.email.required')" @@ -51,6 +52,7 @@

Login

type="password" id="input-password" placeholder="Password" + fieldSize="giant" [status]="password.dirty ? (password.invalid ? 'danger' : 'success') : ''" [required]="getConfigValue('forms.validation.password.required')" [minlength]="getConfigValue('forms.validation.password.minLength')" @@ -77,6 +79,7 @@

Login

`, diff --git a/src/framework/theme/components/input/_input-sizes.scss b/src/framework/theme/components/input/_input-sizes.scss index 5cd4c31870..3f474ce6ec 100644 --- a/src/framework/theme/components/input/_input-sizes.scss +++ b/src/framework/theme/components/input/_input-sizes.scss @@ -15,6 +15,7 @@ &::placeholder { font-size: nb-theme(input-#{$size}-placeholder-text-font-size); font-weight: nb-theme(input-#{$size}-placeholder-text-font-weight); + // TODO: this seems to be unused line-height: nb-theme(input-#{$size}-placeholder-text-line-height); } } diff --git a/src/framework/theme/components/list/_list.component.theme.scss b/src/framework/theme/components/list/_list.component.theme.scss index a11f908489..5495c544ad 100644 --- a/src/framework/theme/components/list/_list.component.theme.scss +++ b/src/framework/theme/components/list/_list.component.theme.scss @@ -1,10 +1,17 @@ @mixin nb-list-theme() { nb-list-item { - border-bottom: 1px solid nb-theme(list-item-border-color); + border-bottom: + nb-theme(list-item-divider-width) + nb-theme(list-item-divider-style) + nb-theme(list-item-divider-color); + padding: nb-theme(list-item-padding); &:first-child { - border-top: 1px solid nb-theme(list-item-border-color); + border-top: + nb-theme(list-item-divider-width) + nb-theme(list-item-divider-style) + nb-theme(list-item-divider-color); } } } diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss index 045dab4f20..3e59388c2b 100644 --- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss +++ b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss @@ -17,7 +17,10 @@ box-shadow: nb-theme(route-tabset-shadow); .route-tabset { - border-bottom: nb-theme(route-tabset-divider-width) solid nb-theme(route-tabset-divider-color); + border-bottom: + nb-theme(route-tabset-divider-width) + nb-theme(route-tabset-divider-style) + nb-theme(route-tabset-divider-color); } .tab-link { diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss index 1330e7e918..dab3eb7e60 100644 --- a/src/framework/theme/components/select/_select-filled.scss +++ b/src/framework/theme/components/select/_select-filled.scss @@ -14,7 +14,6 @@ border-color: nb-theme(select-filled-focus-border-color); } &:hover { - background-color: nb-theme(select-filled-hover-background-color); border-color: nb-theme(select-filled-hover-border-color); } &[disabled] { diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss index 290ac19a0e..125c89c091 100644 --- a/src/framework/theme/components/select/_select-hero.scss +++ b/src/framework/theme/components/select/_select-hero.scss @@ -1,8 +1,6 @@ @mixin select-hero { nb-select.appearance-hero .select-button { - $left-color: nb-theme(select-hero-left-background-color); - $right-color: nb-theme(select-hero-right-background-color); - background-image: linear-gradient(to right, $left-color, $right-color); + background-color: nb-theme(select-hero-background-color); border-color: nb-theme(select-hero-border-color); border-style: nb-theme(select-hero-border-style); border-width: nb-theme(select-hero-border-width); @@ -13,20 +11,15 @@ } &:focus { - $left-color: nb-theme(select-hero-focus-left-background-color); - $right-color: nb-theme(select-hero-focus-right-background-color); - background-image: linear-gradient(to right, $left-color, $right-color); + border-color: nb-theme(select-hero-focus-border-color); } &:hover { - $left-color: nb-theme(select-hero-hover-left-background-color); - $right-color: nb-theme(select-hero-hover-right-background-color); - background-image: linear-gradient(to right, $left-color, $right-color); + border-color: nb-theme(select-hero-hover-border-color); } &[disabled] { color: nb-theme(select-hero-disabled-text-color); - $left-color: nb-theme(select-hero-disabled-left-background-color); - $right-color: nb-theme(select-hero-disabled-right-background-color); - background-image: linear-gradient(to right, $left-color, $right-color); + background-color: nb-theme(select-hero-disabled-background-color); + background-image: none; } } @@ -68,9 +61,8 @@ } &[disabled] { color: nb-theme(select-hero-#{$status}-disabled-text-color); - $left-color: nb-theme(select-hero-#{$status}-disabled-left-background-color); - $right-color: nb-theme(select-hero-#{$status}-disabled-right-background-color); - background-image: linear-gradient(to right, $left-color, $right-color); + background-color: nb-theme(select-hero-#{$status}-disabled-background-color); + background-image: none; } } } diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss index ce8ce79950..4d870a2699 100644 --- a/src/framework/theme/components/tabset/_tabset.component.theme.scss +++ b/src/framework/theme/components/tabset/_tabset.component.theme.scss @@ -17,7 +17,7 @@ box-shadow: nb-theme(tabset-shadow); .tabset { - border-bottom: nb-theme(tabset-divider-width) solid nb-theme(tabset-divider-color); + border-bottom: nb-theme(tabset-divider-width) nb-theme(tabset-divider-style) nb-theme(tabset-divider-color); } .tab-link { diff --git a/src/framework/theme/styles/_themes.scss b/src/framework/theme/styles/_themes.scss index b0475fe714..86c9908acb 100644 --- a/src/framework/theme/styles/_themes.scss +++ b/src/framework/theme/styles/_themes.scss @@ -1,3 +1,4 @@ @import 'themes/default'; +@import 'themes/dark'; @import 'themes/cosmic'; @import 'themes/corporate'; diff --git a/src/framework/theme/styles/prebuilt/dark.scss b/src/framework/theme/styles/prebuilt/dark.scss new file mode 100644 index 0000000000..ae1a3c52b1 --- /dev/null +++ b/src/framework/theme/styles/prebuilt/dark.scss @@ -0,0 +1,7 @@ +@import '../all'; + +$nb-enabled-themes: (dark); + +@include nb-install() { + @include nb-theme-global(); +}; diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index cfba21e10d..2c35dadd3a 100644 --- a/src/framework/theme/styles/themes/_cosmic.scss +++ b/src/framework/theme/styles/themes/_cosmic.scss @@ -6,7 +6,7 @@ @import '../core/functions'; @import '../core/mixins'; -@import 'default'; +@import 'dark'; $theme: ( @@ -20,46 +20,6 @@ $theme: ( color-primary-800: #240f7a, color-primary-900: #180957, - color-success-100: #edfff3, - color-success-200: #b3ffd6, - color-success-300: #8cfac7, - color-success-400: #51f0b0, - color-success-500: #00e096, - color-success-600: #00b383, - color-success-700: #008f72, - color-success-800: #007566, - color-success-900: #00524c, - - color-info-100: #f2f8ff, - color-info-200: #c7e2ff, - color-info-300: #94cbff, - color-info-400: #42aaff, - color-info-500: #0095ff, - color-info-600: #006fd6, - color-info-700: #0057c2, - color-info-800: #0041a8, - color-info-900: #002885, - - color-warning-100: #fffdf2, - color-warning-200: #fff1c2, - color-warning-300: #ffe59e, - color-warning-400: #ffc94d, - color-warning-500: #ffaa00, - color-warning-600: #db8b00, - color-warning-700: #b86e00, - color-warning-800: #945400, - color-warning-900: #703c00, - - color-danger-100: #fff2f2, - color-danger-200: #ffd6d9, - color-danger-300: #ffa8b4, - color-danger-400: #ff708d, - color-danger-500: #ff3d71, - color-danger-600: #db2c66, - color-danger-700: #b81d5b, - color-danger-800: #94124e, - color-danger-900: #700940, - color-basic-100: #e8e9fa, color-basic-200: #e8e9fa, color-basic-300: #d3d4f0, @@ -70,15 +30,7 @@ $theme: ( color-basic-800: #171b47, color-basic-900: #171b47, color-basic-1000: #1d2057, - - color-alternate: color-basic-100, - - color-primary-disabled: color-primary-700, - color-success-disabled: color-success-700, - color-info-disabled: color-info-700, - color-warning-disabled: color-warning-700, - color-danger-disabled: color-danger-700, - color-basic-disabled: color-basic-700, + color-basic-1100: #171a3b, background-primary-color-1: color-basic-500, background-primary-color-2: color-basic-600, @@ -96,9 +48,7 @@ $theme: ( text-disabled-color: color-basic-400, text-hint-color: color-basic-300, - shadow: 0 0.5rem 1rem 0 rgba(23, 27, 71, 0.24), - outline-color: color-basic-600, ); -$nb-themes: nb-register-theme($theme, cosmic, default); +$nb-themes: nb-register-theme($theme, cosmic, dark); diff --git a/src/framework/theme/styles/themes/_dark.scss b/src/framework/theme/styles/themes/_dark.scss new file mode 100644 index 0000000000..b5c35aa08e --- /dev/null +++ b/src/framework/theme/styles/themes/_dark.scss @@ -0,0 +1,46 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../core/functions'; +@import '../core/mixins'; +@import 'default'; + +$theme: ( + background-default-color-1: color-basic-800, + background-default-color-2: color-basic-900, + background-default-color-3: color-basic-1000, + background-default-color-4: color-basic-1100, + + border-default-color-1: color-basic-800, + border-default-color-2: color-basic-900, + border-default-color-3: color-basic-1000, + border-default-color-4: color-basic-1100, + border-default-color-5: color-basic-1100, + + background-alternative-color-1: color-basic-100, + background-alternative-color-2: color-basic-200, + background-alternative-color-3: color-basic-300, + background-alternative-color-4: color-basic-400, + + border-alternative-color-1: color-basic-100, + border-alternative-color-2: color-basic-200, + border-alternative-color-3: color-basic-300, + border-alternative-color-4: color-basic-400, + border-alternative-color-5: color-basic-500, + + text-color: color-basic-100, + text-alternate-color: color-basic-900, + text-control-color: color-basic-100, + text-disabled-color: color-basic-700, + text-hint-color: color-basic-500, + + shadow: 0 0.5rem 1rem 0 #1a1f33, + outline-color: color-basic-700, + divider-color: border-default-color-2, +); + +// register the theme +$nb-themes: nb-register-theme($theme, dark, default); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 160af686bf..8630806b3b 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -70,15 +70,15 @@ $theme: ( color-primary-800: #192f9e, color-primary-900: #14236e, - color-success-100: #edfff3, - color-success-200: #b3ffd6, + color-success-100: #f0fff5, + color-success-200: #ccfce3, color-success-300: #8cfac7, - color-success-400: #51f0b0, - color-success-500: #00e096, - color-success-600: #00b383, - color-success-700: #008f72, - color-success-800: #007566, - color-success-900: #00524c, + color-success-400: #2ce69b, + color-success-500: #00d68f, + color-success-600: #00b887, + color-success-700: #00997a, + color-success-800: #007d6c, + color-success-900: #004a42, color-info-100: #f2f8ff, color-info-200: #c7e2ff, @@ -112,87 +112,118 @@ $theme: ( color-basic-100: white, color-basic-200: #f7f8fa, - color-basic-300: #edf0f5, + color-basic-300: #edf0f4, color-basic-400: #dde1eb, color-basic-500: #c8cedb, - color-basic-600: #a6aebd, - color-basic-700: #8992a3, - color-basic-800: #6a7385, - color-basic-900: #4b5466, - color-basic-1000: #0d2540, + color-basic-600: #a7b0c1, + color-basic-700: #657084, + color-basic-800: #2e384f, + color-basic-900: #232a40, + color-basic-1000: #1a1f33, + color-basic-1100: #131729, color-alternate: color-basic-100, color-primary-focus: color-primary-700, color-primary-hover: color-primary-400, + color-primary-default: color-primary-500, color-primary-active: color-primary-600, color-primary-disabled: color-primary-300, color-success-focus: color-success-700, color-success-hover: color-success-400, + color-success-default: color-success-500, color-success-active: color-success-600, color-success-disabled: color-success-200, color-info-focus: color-info-700, color-info-hover: color-info-400, + color-info-default: color-info-500, color-info-active: color-info-600, color-info-disabled: color-info-300, color-warning-focus: color-warning-700, color-warning-hover: color-warning-400, + color-warning-default: color-warning-500, color-warning-active: color-warning-600, color-warning-disabled: color-warning-300, color-danger-focus: color-danger-700, color-danger-hover: color-danger-400, + color-danger-default: color-danger-500, color-danger-active: color-danger-600, color-danger-disabled: color-danger-300, color-basic-focus: color-basic-700, color-basic-hover: color-basic-400, + color-basic-default: color-basic-500, color-basic-active: color-basic-600, - - background-primary-color-1: color-basic-100, - background-primary-color-2: color-basic-200, - background-primary-color-3: color-basic-300, - background-primary-color-4: color-basic-400, - - border-primary-color-1: color-basic-100, - border-primary-color-2: color-basic-200, - border-primary-color-3: color-basic-300, - border-primary-color-4: color-basic-400, - border-primary-color-5: color-basic-500, + color-basic-disabled: color-basic-300, + + background-default-color-1: color-basic-100, + background-default-color-2: color-basic-200, + background-default-color-3: color-basic-300, + background-default-color-4: color-basic-400, + + border-default-color-1: color-basic-100, + border-default-color-2: color-basic-200, + border-default-color-3: color-basic-300, + border-default-color-4: color-basic-400, + border-default-color-5: color-basic-500, + + background-alternative-color-1: color-basic-800, + background-alternative-color-2: color-basic-900, + background-alternative-color-3: color-basic-1000, + background-alternative-color-4: color-basic-1100, + + border-alternative-color-1: color-basic-800, + border-alternative-color-2: color-basic-900, + border-alternative-color-3: color-basic-1000, + border-alternative-color-4: color-basic-1100, + border-alternative-color-5: color-basic-1100, + + background-primary-color-1: color-primary-500, + background-primary-color-2: color-primary-600, + background-primary-color-3: color-primary-700, + background-primary-color-4: color-primary-800, + + border-primary-color-1: color-basic-500, + border-primary-color-2: color-basic-600, + border-primary-color-3: color-basic-700, + border-primary-color-4: color-basic-800, + border-primary-color-5: color-basic-900, text-color: color-basic-1000, text-alternate-color: color-basic-100, + text-control-color: color-basic-100, text-disabled-color: color-basic-500, - text-hint-color: color-basic-600, + text-hint-color: color-basic-700, - text-primary-color: color-primary-500, + text-primary-color: color-primary-default, text-primary-focus-color: color-primary-focus, text-primary-hover-color: color-primary-hover, text-primary-active-color: color-primary-active, text-primary-disabled-color: color-primary-400, - text-success-color: color-success-500, + text-success-color: color-success-default, text-success-focus-color: color-success-focus, text-success-hover-color: color-success-hover, text-success-active-color: color-success-active, text-success-disabled-color: color-success-400, - text-info-color: color-info-500, + text-info-color: color-info-default, text-info-focus-color: color-info-focus, text-info-hover-color: color-info-hover, text-info-active-color: color-info-active, text-info-disabled-color: color-info-400, - text-warning-color: color-warning-500, + text-warning-color: color-warning-default, text-warning-focus-color: color-warning-focus, text-warning-hover-color: color-warning-hover, text-warning-active-color: color-warning-active, text-warning-disabled-color: color-warning-400, - text-danger-color: color-danger-500, + text-danger-color: color-danger-default, text-danger-focus-color: color-danger-focus, text-danger-hover-color: color-danger-hover, text-danger-active-color: color-danger-active, @@ -202,34 +233,34 @@ $theme: ( font-family-secondary: unquote('Raleway, sans-serif'), text-heading-1-font-family: font-family-secondary, - text-heading-1-font-size: 4.5rem, + text-heading-1-font-size: 2.25rem, text-heading-1-font-weight: 800, - text-heading-1-line-height: 5rem, + text-heading-1-line-height: 3rem, text-heading-2-font-family: font-family-secondary, - text-heading-2-font-size: 3.75rem, + text-heading-2-font-size: 2rem, text-heading-2-font-weight: 800, - text-heading-2-line-height: 4.5rem, + text-heading-2-line-height: 2.5rem, text-heading-3-font-family: font-family-secondary, - text-heading-3-font-size: 3rem, + text-heading-3-font-size: 1.875rem, text-heading-3-font-weight: 800, - text-heading-3-line-height: 3.5rem, + text-heading-3-line-height: 2.5rem, text-heading-4-font-family: font-family-secondary, - text-heading-4-font-size: 2rem, + text-heading-4-font-size: 1.625rem, text-heading-4-font-weight: 800, - text-heading-4-line-height: 2.5rem, + text-heading-4-line-height: 2rem, text-heading-5-font-family: font-family-secondary, - text-heading-5-font-size: 1.5rem, + text-heading-5-font-size: 1.375rem, text-heading-5-font-weight: 800, text-heading-5-line-height: 2rem, text-heading-6-font-family: font-family-secondary, - text-heading-6-font-size: 1.25rem, + text-heading-6-font-size: 1.125rem, text-heading-6-font-weight: 800, - text-heading-6-line-height: 1.75rem, + text-heading-6-line-height: 1.5rem, text-subtitle-font-family: font-family-primary, text-subtitle-font-size: 0.9375rem, @@ -252,10 +283,15 @@ $theme: ( text-paragraph-2-line-height: 1rem, text-caption-font-family: font-family-primary, - text-caption-font-size: 0.6875rem, + text-caption-font-size: 0.75rem, text-caption-font-weight: 400, text-caption-line-height: 1rem, + text-caption-2-font-family: font-family-primary, + text-caption-2-font-size: 0.75rem, + text-caption-2-font-weight: 600, + text-caption-2-line-height: 1rem, + text-button-font-family: font-family-primary, text-button-font-weight: 800, text-button-tiny-font-size: 0.625rem, @@ -271,11 +307,13 @@ $theme: ( /* Strict tokens */ + border-radius: 0.25rem, + outline-width: 0.375rem, - outline-color: color-basic-300, + outline-color: color-basic-400, - scrollbar-color: background-primary-color-3, - scrollbar-background-color: background-primary-color-2, + scrollbar-color: background-default-color-4, + scrollbar-background-color: background-default-color-2, scrollbar-width: 0.3125rem, shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1), @@ -283,9 +321,13 @@ $theme: ( link-text-color: text-primary-color, link-text-hover-color: text-primary-hover-color, + divider-color: border-default-color-3, + divider-style: solid, + divider-width: 1px, + /* Components mappings */ - card-background-color: background-primary-color-1, + card-background-color: background-default-color-1, card-text-color: text-color, card-text-font-family: text-paragraph-font-family, card-text-font-size: text-paragraph-font-size, @@ -294,12 +336,12 @@ $theme: ( card-border-width: 0, card-border-style: solid, card-border-color: transparent, - card-border-radius: 0.75rem, + card-border-radius: border-radius, card-padding: 1rem 1.25rem, card-shadow: shadow, - card-divider-color: border-primary-color-3, - card-divider-style: solid, - card-divider-width: 1px, + card-divider-color: divider-color, + card-divider-style: divider-style, + card-divider-width: divider-width, card-header-text-color: text-color, card-header-text-font-family: text-subtitle-font-family, @@ -307,18 +349,15 @@ $theme: ( card-header-text-font-weight: text-subtitle-font-weight, card-header-text-line-height: text-subtitle-line-height, - card-header-disabled-background-color: background-primary-color-3, - card-header-disabled-text-color: text-disabled-color, - - card-header-primary-background-color: color-primary-500, - card-header-primary-text-color: text-alternate-color, - card-header-info-background-color: color-info-500, - card-header-info-text-color: text-alternate-color, - card-header-success-background-color: color-success-500, + card-header-primary-background-color: color-primary-default, + card-header-primary-text-color: text-control-color, + card-header-info-background-color: color-info-default, + card-header-info-text-color: text-control-color, + card-header-success-background-color: color-success-default, card-header-success-text-color: text-color, - card-header-warning-background-color: color-warning-500, + card-header-warning-background-color: color-warning-default, card-header-warning-text-color: text-color, - card-header-danger-background-color: color-danger-500, + card-header-danger-background-color: color-danger-default, card-header-danger-text-color: text-color, card-height-tiny: 6rem, @@ -332,7 +371,7 @@ $theme: ( card-scrollbar-background-color: scrollbar-background-color, card-scrollbar-width: scrollbar-width, - header-background-color: background-primary-color-1, + header-background-color: background-default-color-1, header-text-color: text-color, header-text-font-family: text-paragraph-font-family, header-text-font-size: text-paragraph-font-size, @@ -342,7 +381,7 @@ $theme: ( header-padding: 1.25rem, header-shadow: shadow, - footer-background-color: background-primary-color-1, + footer-background-color: background-default-color-1, footer-text-color: text-color, footer-text-font-family: text-paragraph-font-family, footer-text-font-size: text-paragraph-font-size, @@ -351,12 +390,12 @@ $theme: ( footer-text-highlight-color: color-primary-hover, footer-height: 4.725rem, footer-padding: 1.25rem, - footer-divider-color: border-primary-color-3, - footer-divider-style: solid, - footer-divider-width: 0.0625rem, + footer-divider-color: divider-color, + footer-divider-style: divider-style, + footer-divider-width: divider-width, footer-shadow: shadow, - layout-background-color: background-primary-color-2, + layout-background-color: background-default-color-3, layout-text-color: text-color, layout-text-font-family: text-paragraph-font-family, layout-text-font-size: text-paragraph-font-size, @@ -366,7 +405,7 @@ $theme: ( layout-content-width: 900px, layout-window-mode-min-width: 300px, layout-window-mode-max-width: 1920px, - layout-window-mode-background-color: background-primary-color-3, + layout-window-mode-background-color: background-default-color-3, layout-window-mode-padding-top: 4.75rem, layout-window-shadow: shadow, layout-padding: 2.25rem 2.25rem 0.75rem, @@ -376,7 +415,7 @@ $theme: ( layout-scrollbar-color: scrollbar-color, layout-scrollbar-width: scrollbar-width, - sidebar-background-color: background-primary-color-1, + sidebar-background-color: background-default-color-1, sidebar-text-color: text-color, sidebar-text-font-family: text-paragraph-font-family, sidebar-text-font-size: text-paragraph-font-size, @@ -389,7 +428,7 @@ $theme: ( sidebar-header-height: 3.5rem, sidebar-footer-height: 3.5rem, sidebar-shadow: shadow, - sidebar-menu-item-highlight-color: color-primary-500, + sidebar-menu-item-highlight-color: color-primary-default, sidebar-scrollbar-background-color: scrollbar-background-color, sidebar-scrollbar-color: scrollbar-color, sidebar-scrollbar-width: scrollbar-width, @@ -419,9 +458,9 @@ $theme: ( menu-item-icon-margin: 0 0.25rem 0 0, menu-item-icon-width: 1.5rem, - menu-item-divider-color: border-primary-color-3, - menu-item-divider-style: solid, - menu-item-divider-width: 0.0625rem, + menu-item-divider-color: divider-color, + menu-item-divider-style: divider-style, + menu-item-divider-width: divider-width, menu-submenu-background-color: menu-background-color, menu-submenu-text-color: text-color, @@ -440,7 +479,7 @@ $theme: ( menu-submenu-item-icon-hover-color: menu-item-icon-hover-color, menu-submenu-item-active-background-color: menu-background-color, - menu-submenu-item-active-border-color: color-primary-500, + menu-submenu-item-active-border-color: color-primary-default, menu-submenu-item-active-text-color: menu-item-active-text-color, menu-submenu-item-icon-active-color: menu-item-icon-active-color, @@ -476,8 +515,9 @@ $theme: ( tabset-tab-disabled-text-color: text-disabled-color, tabset-tab-disabled-underline-color: transparent, - tabset-divider-color: border-primary-color-3, - tabset-divider-width: 1px, + tabset-divider-color: divider-color, + tabset-divider-style: divider-style, + tabset-divider-width: divider-width, tabset-content-background-color: transparent, tabset-content-padding: 1rem 2rem, @@ -523,8 +563,9 @@ $theme: ( route-tabset-tab-disabled-text-color: text-disabled-color, route-tabset-tab-disabled-underline-color: transparent, - route-tabset-divider-color: border-primary-color-3, - route-tabset-divider-width: 1px, + route-tabset-divider-color: divider-color, + route-tabset-divider-style: divider-style, + route-tabset-divider-width: divider-width, route-tabset-scrollbar-color: scrollbar-color, route-tabset-scrollbar-background-color: scrollbar-background-color, @@ -532,8 +573,8 @@ $theme: ( route-tabset-tab-text-hide-breakpoint: 36rem, user-picture-box-background-color: transparent, - user-picture-box-border-color: border-primary-color-3, - user-picture-box-border-width: 0.125rem, + user-picture-box-border-color: border-default-color-3, + user-picture-box-border-width: 1px, user-initials-text-color: text-color, user-initials-text-font-family: text-paragraph-font-family, user-initials-text-font-weight: text-paragraph-font-weight, @@ -598,27 +639,27 @@ $theme: ( popover-text-font-size: text-paragraph-font-size, popover-text-font-weight: text-paragraph-font-weight, popover-text-line-height: text-paragraph-line-height, - popover-background-color: background-primary-color-1, - popover-border-width: 0.125rem, + popover-background-color: background-default-color-1, + popover-border-width: 1px, popover-border-color: transparent, - popover-border-radius: 0.5rem, + popover-border-radius: border-radius, popover-shadow: shadow, popover-arrow-size: 0.6875rem, popover-padding: 0.75rem 1rem, - context-menu-background-color: background-primary-color-1, + context-menu-background-color: background-default-color-1, context-menu-border-color: transparent, context-menu-border-style: solid, context-menu-border-width: 0, - context-menu-border-radius: 0.75rem, + context-menu-border-radius: border-radius, context-menu-min-width: 10rem, context-menu-max-width: 15rem, context-menu-shadow: shadow, actions-background-color: transparent, - actions-divider-color: border-primary-color-3, - actions-divider-style: solid, - actions-divider-width: 0.0625rem, + actions-divider-color: divider-color, + actions-divider-style: divider-style, + actions-divider-width: divider-width, actions-icon-color: text-hint-color, actions-text-color: text-color, actions-text-font-family: text-button-font-family, @@ -649,11 +690,11 @@ $theme: ( actions-giant-padding: 0 1.25rem, actions-giant-text-font-size: text-button-giant-font-size, - search-background-color: background-primary-color-1, - search-divider-color: border-primary-color-3, - search-divider-style: solid, - search-divider-width: 0.25rem, - search-extra-background-color: color-primary-500, + search-background-color: background-default-color-1, + search-divider-color: divider-color, + search-divider-style: divider-style, + search-divider-width: divider-width, + search-extra-background-color: color-primary-default, search-text-color: text-color, search-text-font-family: text-heading-1-font-family, search-text-font-size: text-heading-1-font-size, @@ -691,14 +732,14 @@ $theme: ( smart-table-paging-border-color: separator, smart-table-paging-border-width: 1px, smart-table-paging-fg-active: #ffffff, - smart-table-paging-bg-active: color-success-500, + smart-table-paging-bg-active: color-success-default, smart-table-paging-hover: rgba(0, 0, 0, 0.05), - toastr-background-color: background-primary-color-1, - toastr-border-color: border-primary-color-3, + toastr-background-color: background-default-color-1, + toastr-border-color: border-default-color-3, toastr-border-style: solid, - toastr-border-width: 0.125rem, - toastr-border-radius: 0.75rem, + toastr-border-width: 1px, + toastr-border-radius: border-radius, toastr-padding: 1rem, toastr-shadow: shadow, @@ -712,46 +753,46 @@ $theme: ( toastr-title-text-font-weight: text-subtitle-font-weight, toastr-title-text-line-height: text-subtitle-line-height, - toastr-destroyable-hover-background-color: background-primary-color-1, - toastr-destroyable-hover-border-color: border-primary-color-3, + toastr-destroyable-hover-background-color: background-default-color-1, + toastr-destroyable-hover-border-color: border-default-color-3, - toastr-primary-background-color: color-primary-500, - toastr-primary-border-color: color-primary-500, - toastr-primary-text-color: text-alternate-color, - toastr-icon-primary-background-color: background-primary-color-1, - toastr-icon-primary-color: color-primary-500, + toastr-primary-background-color: color-primary-default, + toastr-primary-border-color: color-primary-default, + toastr-primary-text-color: text-control-color, + toastr-icon-primary-background-color: background-default-color-1, + toastr-icon-primary-color: color-primary-default, toastr-destroyable-hover-primary-background-color: color-primary-hover, toastr-destroyable-hover-primary-border-color: color-primary-hover, - toastr-success-background-color: color-success-500, - toastr-success-border-color: color-success-500, - toastr-success-text-color: text-alternate-color, - toastr-icon-success-background-color: background-primary-color-1, - toastr-icon-success-color: color-success-500, + toastr-success-background-color: color-success-default, + toastr-success-border-color: color-success-default, + toastr-success-text-color: text-control-color, + toastr-icon-success-background-color: background-default-color-1, + toastr-icon-success-color: color-success-default, toastr-destroyable-hover-success-background-color: color-success-hover, toastr-destroyable-hover-success-border-color: color-success-hover, - toastr-info-background-color: color-info-500, - toastr-info-border-color: color-info-500, - toastr-info-text-color: text-alternate-color, - toastr-icon-info-background-color: background-primary-color-1, - toastr-icon-info-color: color-info-500, + toastr-info-background-color: color-info-default, + toastr-info-border-color: color-info-default, + toastr-info-text-color: text-control-color, + toastr-icon-info-background-color: background-default-color-1, + toastr-icon-info-color: color-info-default, toastr-destroyable-hover-info-background-color: color-info-hover, toastr-destroyable-hover-info-border-color: color-info-hover, - toastr-warning-background-color: color-warning-500, - toastr-warning-border-color: color-warning-500, - toastr-warning-text-color: text-alternate-color, - toastr-icon-warning-background-color: background-primary-color-1, - toastr-icon-warning-color: color-warning-500, + toastr-warning-background-color: color-warning-default, + toastr-warning-border-color: color-warning-default, + toastr-warning-text-color: text-control-color, + toastr-icon-warning-background-color: background-default-color-1, + toastr-icon-warning-color: color-warning-default, toastr-destroyable-hover-warning-background-color: color-warning-hover, toastr-destroyable-hover-warning-border-color: color-warning-hover, - toastr-danger-background-color: color-danger-500, - toastr-danger-border-color: color-danger-500, - toastr-danger-text-color: text-alternate-color, - toastr-icon-danger-background-color: background-primary-color-1, - toastr-icon-danger-color: color-danger-500, + toastr-danger-background-color: color-danger-default, + toastr-danger-border-color: color-danger-default, + toastr-danger-text-color: text-control-color, + toastr-icon-danger-background-color: background-default-color-1, + toastr-icon-danger-color: color-danger-default, toastr-destroyable-hover-danger-background-color: color-danger-hover, toastr-destroyable-hover-danger-border-color: color-danger-hover, @@ -773,7 +814,7 @@ $theme: ( button-giant-text-font-size: text-button-giant-font-size, button-giant-text-line-height: text-button-giant-line-height, - button-rectangle-border-radius: 0.25rem, + button-rectangle-border-radius: border-radius, button-semi-round-border-radius: 0.75rem, button-round-border-radius: 1.5rem, @@ -787,68 +828,69 @@ $theme: ( button-filled-large-padding: 0.75rem 1.125rem, button-filled-giant-padding: 0.875rem 1.375rem, - button-filled-primary-background-color: color-primary-500, - button-filled-primary-border-color: color-primary-500, - button-filled-primary-text-color: text-alternate-color, + button-filled-primary-background-color: color-primary-default, + button-filled-primary-border-color: color-primary-default, + button-filled-primary-text-color: text-control-color, button-filled-primary-focus-border-color: color-primary-focus, button-filled-primary-hover-background-color: color-primary-hover, button-filled-primary-hover-border-color: color-primary-hover, button-filled-primary-active-background-color: color-primary-active, button-filled-primary-active-border-color: color-primary-active, - button-filled-primary-disabled-background-color: color-primary-disabled, - button-filled-primary-disabled-border-color: color-primary-disabled, - button-filled-primary-disabled-text-color: text-primary-disabled-color, + button-filled-primary-disabled-background-color: background-default-color-3, + button-filled-primary-disabled-border-color: border-default-color-3, + button-filled-primary-disabled-text-color: text-disabled-color, - button-filled-success-background-color: color-success-500, - button-filled-success-border-color: color-success-500, - button-filled-success-text-color: text-alternate-color, + button-filled-success-background-color: color-success-default, + button-filled-success-border-color: color-success-default, + button-filled-success-text-color: text-control-color, button-filled-success-focus-border-color: color-success-focus, button-filled-success-hover-background-color: color-success-hover, button-filled-success-hover-border-color: color-success-hover, button-filled-success-active-background-color: color-success-active, button-filled-success-active-border-color: color-success-active, - button-filled-success-disabled-background-color: color-success-disabled, - button-filled-success-disabled-border-color: color-success-disabled, - button-filled-success-disabled-text-color: text-success-disabled-color, + button-filled-success-disabled-background-color: background-default-color-3, + button-filled-success-disabled-border-color: border-default-color-3, + button-filled-success-disabled-text-color: text-disabled-color, - button-filled-info-background-color: color-info-500, - button-filled-info-border-color: color-info-500, - button-filled-info-text-color: text-alternate-color, + button-filled-info-background-color: color-info-default, + button-filled-info-border-color: color-info-default, + button-filled-info-text-color: text-control-color, button-filled-info-focus-border-color: color-info-focus, button-filled-info-hover-background-color: color-info-hover, button-filled-info-hover-border-color: color-info-hover, button-filled-info-active-background-color: color-info-active, button-filled-info-active-border-color: color-info-active, - button-filled-info-disabled-background-color: color-info-disabled, - button-filled-info-disabled-border-color: color-info-disabled, - button-filled-info-disabled-text-color: text-info-disabled-color, + button-filled-info-disabled-background-color: background-default-color-3, + button-filled-info-disabled-border-color: border-default-color-3, + button-filled-info-disabled-text-color: text-disabled-color, - button-filled-warning-background-color: color-warning-500, - button-filled-warning-border-color: color-warning-500, - button-filled-warning-text-color: text-alternate-color, + button-filled-warning-background-color: color-warning-default, + button-filled-warning-border-color: color-warning-default, + button-filled-warning-text-color: text-control-color, button-filled-warning-focus-border-color: color-warning-focus, button-filled-warning-hover-background-color: color-warning-hover, button-filled-warning-hover-border-color: color-warning-hover, button-filled-warning-active-background-color: color-warning-active, button-filled-warning-active-border-color: color-warning-active, - button-filled-warning-disabled-background-color: color-warning-disabled, - button-filled-warning-disabled-border-color: color-warning-disabled, - button-filled-warning-disabled-text-color: text-warning-disabled-color, + button-filled-warning-disabled-background-color: background-default-color-3, + button-filled-warning-disabled-border-color: border-default-color-3, + button-filled-warning-disabled-text-color: text-disabled-color, - button-filled-danger-background-color: color-danger-500, - button-filled-danger-border-color: color-danger-500, - button-filled-danger-text-color: text-alternate-color, + button-filled-danger-background-color: color-danger-default, + button-filled-danger-border-color: color-danger-default, + button-filled-danger-text-color: text-control-color, button-filled-danger-focus-border-color: color-danger-focus, button-filled-danger-hover-background-color: color-danger-hover, button-filled-danger-hover-border-color: color-danger-hover, button-filled-danger-active-background-color: color-danger-active, button-filled-danger-active-border-color: color-danger-active, - button-filled-danger-disabled-background-color: color-danger-disabled, - button-filled-danger-disabled-border-color: color-danger-disabled, - button-filled-danger-disabled-text-color: text-danger-disabled-color, + button-filled-danger-disabled-background-color: background-default-color-3, + button-filled-danger-disabled-border-color: border-default-color-3, + button-filled-danger-disabled-text-color: text-disabled-color, button-outline-border-style: solid, button-outline-border-width: 0.125rem, + button-outline-background-color: background-default-color-2, button-outline-text-transform: uppercase, button-outline-tiny-padding: 0.25rem 0.625rem, @@ -857,7 +899,7 @@ $theme: ( button-outline-large-padding: 0.75rem 1.125rem, button-outline-giant-padding: 0.875rem 1.375rem, - button-outline-primary-border-color: color-primary-500, + button-outline-primary-border-color: color-primary-default, button-outline-primary-text-color: text-primary-color, button-outline-primary-focus-border-color: color-primary-focus, button-outline-primary-focus-text-color: text-primary-focus-color, @@ -865,10 +907,10 @@ $theme: ( button-outline-primary-hover-text-color: text-primary-hover-color, button-outline-primary-active-border-color: color-primary-active, button-outline-primary-active-text-color: text-primary-active-color, - button-outline-primary-disabled-border-color: color-primary-disabled, - button-outline-primary-disabled-text-color: text-primary-disabled-color, + button-outline-primary-disabled-border-color: border-default-color-3, + button-outline-primary-disabled-text-color: text-disabled-color, - button-outline-success-border-color: color-success-500, + button-outline-success-border-color: color-success-default, button-outline-success-text-color: text-success-color, button-outline-success-focus-border-color: color-success-focus, button-outline-success-focus-text-color: text-success-focus-color, @@ -876,10 +918,10 @@ $theme: ( button-outline-success-hover-text-color: text-success-hover-color, button-outline-success-active-border-color: color-success-active, button-outline-success-active-text-color: text-success-active-color, - button-outline-success-disabled-border-color: color-success-disabled, - button-outline-success-disabled-text-color: text-success-disabled-color, + button-outline-success-disabled-border-color: border-default-color-3, + button-outline-success-disabled-text-color: text-disabled-color, - button-outline-info-border-color: color-info-500, + button-outline-info-border-color: color-info-default, button-outline-info-text-color: text-info-color, button-outline-info-focus-border-color: color-info-focus, button-outline-info-focus-text-color: text-info-focus-color, @@ -887,10 +929,10 @@ $theme: ( button-outline-info-hover-text-color: text-info-hover-color, button-outline-info-active-border-color: color-info-active, button-outline-info-active-text-color: text-info-active-color, - button-outline-info-disabled-border-color: color-info-disabled, - button-outline-info-disabled-text-color: text-info-disabled-color, + button-outline-info-disabled-border-color: border-default-color-3, + button-outline-info-disabled-text-color: text-disabled-color, - button-outline-warning-border-color: color-warning-500, + button-outline-warning-border-color: color-warning-default, button-outline-warning-text-color: text-warning-color, button-outline-warning-focus-border-color: color-warning-focus, button-outline-warning-focus-text-color: text-warning-focus-color, @@ -898,10 +940,10 @@ $theme: ( button-outline-warning-hover-text-color: text-warning-hover-color, button-outline-warning-active-border-color: color-warning-active, button-outline-warning-active-text-color: text-warning-active-color, - button-outline-warning-disabled-border-color: color-warning-disabled, - button-outline-warning-disabled-text-color: text-warning-disabled-color, + button-outline-warning-disabled-border-color: border-default-color-3, + button-outline-warning-disabled-text-color: text-disabled-color, - button-outline-danger-border-color: color-danger-500, + button-outline-danger-border-color: color-danger-default, button-outline-danger-text-color: text-danger-color, button-outline-danger-focus-border-color: color-danger-focus, button-outline-danger-focus-text-color: text-danger-focus-color, @@ -909,8 +951,8 @@ $theme: ( button-outline-danger-hover-text-color: text-danger-hover-color, button-outline-danger-active-border-color: color-danger-active, button-outline-danger-active-text-color: text-danger-active-color, - button-outline-danger-disabled-border-color: color-danger-disabled, - button-outline-danger-disabled-text-color: text-danger-disabled-color, + button-outline-danger-disabled-border-color: border-default-color-3, + button-outline-danger-disabled-text-color: text-disabled-color, button-ghost-background-color: transparent, button-ghost-border-color: transparent, @@ -972,125 +1014,120 @@ $theme: ( button-hero-outline-color: outline-color, button-hero-outline-width: outline-width, - button-hero-primary-text-color: text-alternate-color, + button-hero-primary-text-color: text-control-color, button-hero-primary-bevel-color: color-primary-600, button-hero-primary-glow-color: color-primary-700, button-hero-primary-left-background-color: color-primary-400, - button-hero-primary-right-background-color: color-primary-500, + button-hero-primary-right-background-color: color-primary-default, button-hero-primary-focus-left-background-color: color-primary-700, button-hero-primary-focus-right-background-color: color-primary-800, button-hero-primary-hover-left-background-color: color-primary-300, button-hero-primary-hover-right-background-color: color-primary-400, - button-hero-primary-active-left-background-color: color-primary-500, + button-hero-primary-active-left-background-color: color-primary-default, button-hero-primary-active-right-background-color: color-primary-600, - button-hero-primary-disabled-left-background-color: color-primary-100, - button-hero-primary-disabled-right-background-color: color-primary-200, - button-hero-primary-disabled-text-color: text-primary-disabled-color, + button-hero-primary-disabled-background-color: background-default-color-3, + button-hero-primary-disabled-text-color: text-disabled-color, - button-hero-success-text-color: text-alternate-color, + button-hero-success-text-color: text-control-color, button-hero-success-bevel-color: color-success-600, button-hero-success-glow-color: color-success-700, button-hero-success-left-background-color: color-success-400, - button-hero-success-right-background-color: color-success-500, + button-hero-success-right-background-color: color-success-default, button-hero-success-focus-left-background-color: color-success-700, button-hero-success-focus-right-background-color: color-success-800, button-hero-success-hover-left-background-color: color-success-300, button-hero-success-hover-right-background-color: color-success-400, - button-hero-success-active-left-background-color: color-success-500, + button-hero-success-active-left-background-color: color-success-default, button-hero-success-active-right-background-color: color-success-600, - button-hero-success-disabled-left-background-color: color-success-100, - button-hero-success-disabled-right-background-color: color-success-200, - button-hero-success-disabled-text-color: text-success-disabled-color, + button-hero-success-disabled-background-color: background-default-color-3, + button-hero-success-disabled-text-color: text-disabled-color, - button-hero-info-text-color: text-alternate-color, + button-hero-info-text-color: text-control-color, button-hero-info-bevel-color: color-info-600, button-hero-info-glow-color: color-info-700, button-hero-info-left-background-color: color-info-400, - button-hero-info-right-background-color: color-info-500, + button-hero-info-right-background-color: color-info-default, button-hero-info-focus-left-background-color: color-info-700, button-hero-info-focus-right-background-color: color-info-800, button-hero-info-hover-left-background-color: color-info-300, button-hero-info-hover-right-background-color: color-info-400, - button-hero-info-active-left-background-color: color-info-500, + button-hero-info-active-left-background-color: color-info-default, button-hero-info-active-right-background-color: color-info-600, - button-hero-info-disabled-left-background-color: color-info-100, - button-hero-info-disabled-right-background-color: color-info-200, - button-hero-info-disabled-text-color: text-info-disabled-color, + button-hero-info-disabled-background-color: background-default-color-3, + button-hero-info-disabled-text-color: text-disabled-color, - button-hero-warning-text-color: text-alternate-color, + button-hero-warning-text-color: text-control-color, button-hero-warning-bevel-color: color-warning-600, button-hero-warning-glow-color: color-warning-700, button-hero-warning-left-background-color: color-warning-400, - button-hero-warning-right-background-color: color-warning-500, + button-hero-warning-right-background-color: color-warning-default, button-hero-warning-focus-left-background-color: color-warning-700, button-hero-warning-focus-right-background-color: color-warning-800, button-hero-warning-hover-left-background-color: color-warning-300, button-hero-warning-hover-right-background-color: color-warning-400, - button-hero-warning-active-left-background-color: color-warning-500, + button-hero-warning-active-left-background-color: color-warning-default, button-hero-warning-active-right-background-color: color-warning-600, - button-hero-warning-disabled-left-background-color: color-warning-100, - button-hero-warning-disabled-right-background-color: color-warning-200, - button-hero-warning-disabled-text-color: text-warning-disabled-color, + button-hero-warning-disabled-background-color: background-default-color-3, + button-hero-warning-disabled-text-color: text-disabled-color, - button-hero-danger-text-color: text-alternate-color, + button-hero-danger-text-color: text-control-color, button-hero-danger-bevel-color: color-danger-600, button-hero-danger-glow-color: color-danger-700, button-hero-danger-left-background-color: color-danger-400, - button-hero-danger-right-background-color: color-danger-500, + button-hero-danger-right-background-color: color-danger-default, button-hero-danger-focus-left-background-color: color-danger-700, button-hero-danger-focus-right-background-color: color-danger-800, button-hero-danger-hover-left-background-color: color-danger-300, button-hero-danger-hover-right-background-color: color-danger-400, - button-hero-danger-active-left-background-color: color-danger-500, + button-hero-danger-active-left-background-color: color-danger-default, button-hero-danger-active-right-background-color: color-danger-600, - button-hero-danger-disabled-left-background-color: color-danger-100, - button-hero-danger-disabled-right-background-color: color-danger-200, - button-hero-danger-disabled-text-color: text-danger-disabled-color, + button-hero-danger-disabled-background-color: background-default-color-3, + button-hero-danger-disabled-text-color: text-disabled-color, - input-background-color: background-primary-color-2, + input-background-color: background-default-color-2, input-border-style: solid, - input-border-width: 0.125rem, + input-border-width: 1px, input-placeholder-text-color: text-hint-color, input-placeholder-text-font-family: text-paragraph-font-family, input-text-color: text-color, input-text-font-family: text-subtitle-font-family, - input-border-color: border-primary-color-3, + input-border-color: border-default-color-3, input-focus-border-color: color-primary-focus, input-hover-border-color: color-primary-hover, - input-disabled-border-color: border-primary-color-2, - input-disabled-background-color: background-primary-color-1, + input-disabled-border-color: border-default-color-3, + input-disabled-background-color: background-default-color-2, input-disabled-text-color: text-disabled-color, input-disabled-placeholder-text-color: text-disabled-color, - input-primary-border-color: color-primary-500, + input-primary-border-color: color-primary-default, input-primary-focus-border-color: color-primary-focus, input-primary-hover-border-color: color-primary-hover, - input-success-border-color: color-success-500, + input-success-border-color: color-success-default, input-success-focus-border-color: color-success-focus, input-success-hover-border-color: color-success-hover, - input-info-border-color: color-info-500, + input-info-border-color: color-info-default, input-info-focus-border-color: color-info-focus, input-info-hover-border-color: color-info-hover, - input-warning-border-color: color-warning-500, + input-warning-border-color: color-warning-default, input-warning-focus-border-color: color-warning-focus, input-warning-hover-border-color: color-warning-hover, - input-danger-border-color: color-danger-500, + input-danger-border-color: color-danger-default, input-danger-focus-border-color: color-danger-focus, input-danger-hover-border-color: color-danger-hover, - input-rectangle-border-radius: 0.5rem, + input-rectangle-border-radius: border-radius, input-semi-round-border-radius: 0.75rem, input-round-border-radius: 1.5rem, - input-tiny-text-font-size: text-subtitle-2-font-size, - input-tiny-text-font-weight: text-subtitle-2-font-weight, - input-tiny-text-line-height: text-subtitle-2-line-height, + input-tiny-text-font-size: text-caption-2-font-size, + input-tiny-text-font-weight: text-caption-2-font-weight, + input-tiny-text-line-height: text-caption-2-line-height, input-tiny-placeholder-text-font-size: text-paragraph-font-size, input-tiny-placeholder-text-font-weight: text-paragraph-font-weight, input-tiny-placeholder-text-line-height: text-paragraph-line-height, @@ -1102,7 +1139,7 @@ $theme: ( input-small-placeholder-text-font-size: text-paragraph-font-size, input-small-placeholder-text-font-weight: text-paragraph-font-weight, input-small-placeholder-text-line-height: text-paragraph-line-height, - input-small-padding: 0.375rem 1.125rem, + input-small-padding: 0.1875rem 1.125rem, input-medium-text-font-size: text-subtitle-font-size, input-medium-text-font-weight: text-subtitle-font-weight, @@ -1110,7 +1147,7 @@ $theme: ( input-medium-placeholder-text-font-size: text-paragraph-font-size, input-medium-placeholder-text-font-weight: text-paragraph-font-weight, input-medium-placeholder-text-line-height: text-paragraph-line-height, - input-medium-padding: 0.625rem 1rem, + input-medium-padding: 0.4375rem 1.125rem, input-large-text-font-size: text-subtitle-font-size, input-large-text-font-weight: text-subtitle-font-weight, @@ -1118,7 +1155,7 @@ $theme: ( input-large-placeholder-text-font-size: text-paragraph-font-size, input-large-placeholder-text-font-weight: text-paragraph-font-weight, input-large-placeholder-text-line-height: text-paragraph-line-height, - input-large-padding: 1.125rem, + input-large-padding: 0.6875rem 1.125rem, input-giant-text-font-size: text-heading-6-font-size, input-giant-text-font-weight: text-heading-6-font-weight, @@ -1126,7 +1163,7 @@ $theme: ( input-giant-placeholder-text-font-size: text-paragraph-font-size, input-giant-placeholder-text-font-weight: text-paragraph-font-weight, input-giant-placeholder-text-line-height: text-paragraph-line-height, - input-giant-padding: 1.5rem 1.125rem, + input-giant-padding: 0.9375rem 1.125rem, checkbox-height: 1.125rem, checkbox-width: 1.125rem, @@ -1141,18 +1178,18 @@ $theme: ( checkbox-text-font-weight: text-subtitle-2-font-weight, checkbox-text-line-height: text-subtitle-2-line-height, - checkbox-disabled-background-color: background-primary-color-3, - checkbox-disabled-border-color: border-primary-color-4, + checkbox-disabled-background-color: background-default-color-3, + checkbox-disabled-border-color: border-default-color-4, checkbox-disabled-checkmark-color: color-alternate, checkbox-disabled-text-color: text-disabled-color, checkbox-primary-background-color: color-primary-200, - checkbox-primary-border-color: color-primary-500, - checkbox-primary-checked-background-color: color-primary-500, - checkbox-primary-checked-border-color: color-primary-500, + checkbox-primary-border-color: color-primary-default, + checkbox-primary-checked-background-color: color-primary-default, + checkbox-primary-checked-border-color: color-primary-default, checkbox-primary-checked-checkmark-color: color-alternate, - checkbox-primary-indeterminate-background-color: color-primary-500, - checkbox-primary-indeterminate-border-color: color-primary-500, + checkbox-primary-indeterminate-background-color: color-primary-default, + checkbox-primary-indeterminate-border-color: color-primary-default, checkbox-primary-indeterminate-checkmark-color: color-alternate, checkbox-primary-focus-border-color: color-primary-700, checkbox-primary-hover-background-color: color-primary-400, @@ -1161,12 +1198,12 @@ $theme: ( checkbox-primary-active-border-color: color-primary-600, checkbox-success-background-color: color-success-200, - checkbox-success-border-color: color-success-500, - checkbox-success-checked-background-color: color-success-500, - checkbox-success-checked-border-color: color-success-500, + checkbox-success-border-color: color-success-default, + checkbox-success-checked-background-color: color-success-default, + checkbox-success-checked-border-color: color-success-default, checkbox-success-checked-checkmark-color: color-alternate, - checkbox-success-indeterminate-background-color: color-success-500, - checkbox-success-indeterminate-border-color: color-success-500, + checkbox-success-indeterminate-background-color: color-success-default, + checkbox-success-indeterminate-border-color: color-success-default, checkbox-success-indeterminate-checkmark-color: color-alternate, checkbox-success-focus-border-color: color-success-700, checkbox-success-hover-background-color: color-success-400, @@ -1175,12 +1212,12 @@ $theme: ( checkbox-success-active-border-color: color-success-600, checkbox-warning-background-color: color-warning-200, - checkbox-warning-border-color: color-warning-500, - checkbox-warning-checked-background-color: color-warning-500, - checkbox-warning-checked-border-color: color-warning-500, + checkbox-warning-border-color: color-warning-default, + checkbox-warning-checked-background-color: color-warning-default, + checkbox-warning-checked-border-color: color-warning-default, checkbox-warning-checked-checkmark-color: color-alternate, - checkbox-warning-indeterminate-background-color: color-warning-500, - checkbox-warning-indeterminate-border-color: color-warning-500, + checkbox-warning-indeterminate-background-color: color-warning-default, + checkbox-warning-indeterminate-border-color: color-warning-default, checkbox-warning-indeterminate-checkmark-color: color-alternate, checkbox-warning-focus-border-color: color-warning-700, checkbox-warning-hover-background-color: color-warning-400, @@ -1189,12 +1226,12 @@ $theme: ( checkbox-warning-active-border-color: color-warning-600, checkbox-danger-background-color: color-danger-200, - checkbox-danger-border-color: color-danger-500, - checkbox-danger-checked-background-color: color-danger-500, - checkbox-danger-checked-border-color: color-danger-500, + checkbox-danger-border-color: color-danger-default, + checkbox-danger-checked-background-color: color-danger-default, + checkbox-danger-checked-border-color: color-danger-default, checkbox-danger-checked-checkmark-color: color-alternate, - checkbox-danger-indeterminate-background-color: color-danger-500, - checkbox-danger-indeterminate-border-color: color-danger-500, + checkbox-danger-indeterminate-background-color: color-danger-default, + checkbox-danger-indeterminate-border-color: color-danger-default, checkbox-danger-indeterminate-checkmark-color: color-alternate, checkbox-danger-focus-border-color: color-danger-700, checkbox-danger-hover-background-color: color-danger-400, @@ -1203,12 +1240,12 @@ $theme: ( checkbox-danger-active-border-color: color-danger-600, checkbox-info-background-color: color-info-200, - checkbox-info-border-color: color-info-500, - checkbox-info-checked-background-color: color-info-500, - checkbox-info-checked-border-color: color-info-500, + checkbox-info-border-color: color-info-default, + checkbox-info-checked-background-color: color-info-default, + checkbox-info-checked-border-color: color-info-default, checkbox-info-checked-checkmark-color: color-alternate, - checkbox-info-indeterminate-background-color: color-info-500, - checkbox-info-indeterminate-border-color: color-info-500, + checkbox-info-indeterminate-background-color: color-info-default, + checkbox-info-indeterminate-border-color: color-info-default, checkbox-info-indeterminate-checkmark-color: color-alternate, checkbox-info-focus-border-color: color-info-700, checkbox-info-hover-background-color: color-info-400, @@ -1233,26 +1270,26 @@ $theme: ( modal-body-font-size: font-size, modal-separator: separator, - badge-border-radius: 0.75rem, + badge-border-radius: 0.5rem, badge-text-font-family: text-button-font-family, badge-text-font-size: text-button-tiny-font-size, badge-text-font-weight: text-button-font-weight, badge-text-line-height: text-button-tiny-line-height, badge-padding: 0.25rem 0.4rem, - badge-primary-background-color: color-primary-500, - badge-primary-text-color: text-alternate-color, - badge-success-background-color: color-success-500, - badge-success-text-color: text-alternate-color, - badge-info-background-color: color-info-500, - badge-info-text-color: text-alternate-color, - badge-warning-background-color: color-warning-500, - badge-warning-text-color: text-alternate-color, - badge-danger-background-color: color-danger-500, - badge-danger-text-color: text-alternate-color, + badge-primary-background-color: color-primary-default, + badge-primary-text-color: text-control-color, + badge-success-background-color: color-success-default, + badge-success-text-color: text-control-color, + badge-info-background-color: color-info-default, + badge-info-text-color: text-control-color, + badge-warning-background-color: color-warning-default, + badge-warning-text-color: text-control-color, + badge-danger-background-color: color-danger-default, + badge-danger-text-color: text-control-color, progress-bar-animation-duration: 400ms, - progress-bar-border-radius: radius, + progress-bar-border-radius: border-radius, progress-bar-text-font-family: text-subtitle-font-family, progress-bar-tiny-height: 1rem, @@ -1276,35 +1313,35 @@ $theme: ( progress-bar-giant-text-font-weight: text-subtitle-font-weight, progress-bar-giant-text-line-height: text-subtitle-line-height, - progress-bar-primary-background-color: background-primary-color-3, - progress-bar-primary-filled-background-color: color-primary-500, - progress-bar-primary-text-color: text-alternate-color, - progress-bar-success-background-color: background-primary-color-3, - progress-bar-success-filled-background-color: color-success-500, - progress-bar-success-text-color: text-alternate-color, - progress-bar-info-background-color: background-primary-color-3, - progress-bar-info-filled-background-color: color-info-500, - progress-bar-info-text-color: text-alternate-color, - progress-bar-warning-background-color: background-primary-color-3, - progress-bar-warning-filled-background-color: color-warning-500, - progress-bar-warning-text-color: text-alternate-color, - progress-bar-danger-background-color: background-primary-color-3, - progress-bar-danger-filled-background-color: color-danger-500, - progress-bar-danger-text-color: text-alternate-color, - - alert-background-color: background-primary-color-2, - alert-border-radius: 0.5rem, + progress-bar-primary-background-color: background-default-color-3, + progress-bar-primary-filled-background-color: color-primary-default, + progress-bar-primary-text-color: text-control-color, + progress-bar-success-background-color: background-default-color-3, + progress-bar-success-filled-background-color: color-success-default, + progress-bar-success-text-color: text-control-color, + progress-bar-info-background-color: background-default-color-3, + progress-bar-info-filled-background-color: color-info-default, + progress-bar-info-text-color: text-control-color, + progress-bar-warning-background-color: background-default-color-3, + progress-bar-warning-filled-background-color: color-warning-default, + progress-bar-warning-text-color: text-control-color, + progress-bar-danger-background-color: background-default-color-3, + progress-bar-danger-filled-background-color: color-danger-default, + progress-bar-danger-text-color: text-control-color, + + alert-background-color: background-default-color-2, + alert-border-radius: border-radius, alert-bottom-margin: 1.5rem, alert-padding: 1rem 1.125rem, alert-scrollbar-color: scrollbar-color, alert-scrollbar-background-color: scrollbar-background-color, alert-scrollbar-width: scrollbar-width, - alert-shadow: shadow, + alert-shadow: none, alert-text-color: text-color, alert-text-font-family: text-paragraph-font-family, - alert-text-font-size: text-paragraph-font-size, - alert-text-font-weight: text-paragraph-font-weight, - alert-text-line-height: text-paragraph-line-height, + alert-text-font-size: text-subtitle-font-size, + alert-text-font-weight: text-subtitle-font-weight, + alert-text-line-height: text-subtitle-line-height, alert-closable-start-padding: 3rem, @@ -1315,33 +1352,33 @@ $theme: ( alert-large-height: 8.25rem, alert-giant-height: 9.5rem, - alert-primary-background-color: color-primary-500, - alert-primary-text-color: text-alternate-color, - alert-success-background-color: color-success-500, - alert-success-text-color: text-alternate-color, - alert-info-background-color: color-info-500, - alert-info-text-color: text-alternate-color, - alert-warning-background-color: color-warning-500, - alert-warning-text-color: text-alternate-color, - alert-danger-background-color: color-danger-500, - alert-danger-text-color: text-alternate-color, - - alert-accent-primary-color: color-primary-500, - alert-accent-info-color: color-info-500, - alert-accent-success-color: color-success-500, - alert-accent-warning-color: color-warning-500, - alert-accent-danger-color: color-danger-500, + alert-primary-background-color: color-primary-default, + alert-primary-text-color: text-control-color, + alert-success-background-color: color-success-default, + alert-success-text-color: text-control-color, + alert-info-background-color: color-info-default, + alert-info-text-color: text-control-color, + alert-warning-background-color: color-warning-default, + alert-warning-text-color: text-control-color, + alert-danger-background-color: color-danger-default, + alert-danger-text-color: text-control-color, + + alert-accent-primary-color: color-primary-default, + alert-accent-info-color: color-info-default, + alert-accent-success-color: color-success-default, + alert-accent-warning-color: color-warning-default, + alert-accent-danger-color: color-danger-default, alert-outline-width: 3px, - alert-outline-primary-color: color-primary-500, - alert-outline-info-color: color-info-500, - alert-outline-success-color: color-success-500, - alert-outline-warning-color: color-warning-500, - alert-outline-danger-color: color-danger-500, + alert-outline-primary-color: color-primary-default, + alert-outline-info-color: color-info-default, + alert-outline-success-color: color-success-default, + alert-outline-warning-color: color-warning-default, + alert-outline-danger-color: color-danger-default, - chat-background-color: background-primary-color-1, + chat-background-color: background-default-color-1, chat-border: none, - chat-border-radius: radius, + chat-border-radius: border-radius, chat-shadow: shadow, chat-padding: 1rem 1.25rem, chart-scrollbar-color: scrollbar-color, @@ -1366,34 +1403,34 @@ $theme: ( chat-large-height: 36rem, chat-giant-height: 43.5rem, - chat-primary-background-color: color-primary-500, - chat-primary-text-color: text-alternate-color, - chat-success-background-color: color-success-500, - chat-success-text-color: text-alternate-color, - chat-info-background-color: color-info-500, - chat-info-text-color: text-alternate-color, - chat-warning-background-color: color-warning-500, - chat-warning-text-color: text-alternate-color, - chat-danger-background-color: color-danger-500, - chat-danger-text-color: text-alternate-color, - - chat-divider-color: border-primary-color-3, - chat-divider-style: solid, - chat-divider-width: 0.0625rem, - - chat-message-background: linear-gradient(to right, #4ca6ff, #59bfff), - chat-message-text-color: text-alternate-color, - chat-message-reply-background-color: background-primary-color-4, + chat-primary-background-color: color-primary-default, + chat-primary-text-color: text-control-color, + chat-success-background-color: color-success-default, + chat-success-text-color: text-control-color, + chat-info-background-color: color-info-default, + chat-info-text-color: text-control-color, + chat-warning-background-color: color-warning-default, + chat-warning-text-color: text-control-color, + chat-danger-background-color: color-danger-default, + chat-danger-text-color: text-control-color, + + chat-divider-color: divider-color, + chat-divider-style: divider-style, + chat-divider-width: divider-width, + + chat-message-background: color-primary-default, + chat-message-text-color: text-control-color, + chat-message-reply-background-color: background-default-color-2, chat-message-reply-text-color: text-color, chat-message-avatar-background-color: color-basic-500, chat-message-sender-text-color: text-hint-color, - chat-message-quote-background-color: background-primary-color-4, + chat-message-quote-background-color: background-default-color-2, chat-message-quote-text-color: text-hint-color, chat-message-file-text-color: text-hint-color, chat-message-file-background-color: transparent, spinner-background-color: rgba(237, 240, 245, 0.5), // color-basic-200 with 0.5 opacity - spinner-circle-filled-color: background-primary-color-1, + spinner-circle-filled-color: background-default-color-1, spinner-circle-empty-color: transparent, spinner-text-color: text-color, spinner-text-font-family: text-paragraph-font-family, @@ -1401,15 +1438,15 @@ $theme: ( spinner-text-font-weight: text-paragraph-font-weight, spinner-text-line-height: text-paragraph-line-height, - spinner-primary-circle-filled-color: color-primary-500, + spinner-primary-circle-filled-color: color-primary-default, spinner-primary-circle-empty-color: transparent, - spinner-info-circle-filled-color: color-info-500, + spinner-info-circle-filled-color: color-info-default, spinner-info-circle-empty-color: transparent, - spinner-success-circle-filled-color: color-success-500, + spinner-success-circle-filled-color: color-success-default, spinner-success-circle-empty-color: transparent, - spinner-warning-circle-filled-color: color-warning-500, + spinner-warning-circle-filled-color: color-warning-default, spinner-warning-circle-empty-color: transparent, - spinner-danger-circle-filled-color: color-danger-500, + spinner-danger-circle-filled-color: color-danger-default, spinner-danger-circle-empty-color: transparent, spinner-height-tiny: 1.5rem, @@ -1426,24 +1463,24 @@ $theme: ( stepper-step-active-text-color: text-primary-active-color, stepper-step-completed-text-color: text-primary-color, - stepper-step-index-border-color: border-primary-color-4, + stepper-step-index-border-color: border-default-color-4, stepper-step-index-border-style: solid, - stepper-step-index-border-width: 0.125rem, + stepper-step-index-border-width: 1px, stepper-step-index-border-radius: 50%, stepper-step-index-width: 2rem, stepper-step-index-active-border-color: color-primary-active, - stepper-step-index-completed-background-color: color-primary-500, - stepper-step-index-completed-border-color: color-primary-500, - stepper-step-index-completed-text-color: text-alternate-color, + stepper-step-index-completed-background-color: color-primary-default, + stepper-step-index-completed-border-color: color-primary-default, + stepper-step-index-completed-text-color: text-control-color, - stepper-connector-background-color: background-primary-color-4, - stepper-connector-completed-background-color: color-primary-500, + stepper-connector-background-color: background-default-color-3, + stepper-connector-completed-background-color: color-primary-default, stepper-horizontal-connector-margin: 1rem, stepper-vertical-connector-margin: 1rem, stepper-step-content-padding: padding, - accordion-border-radius: 0.75rem, + accordion-border-radius: border-radius, accordion-padding: padding, accordion-shadow: shadow, accordion-header-text-color: text-color, @@ -1452,22 +1489,24 @@ $theme: ( accordion-header-text-font-weight: text-subtitle-font-weight, accordion-header-text-line-height: text-subtitle-line-height, accordion-header-disabled-text-color: text-disabled-color, - accordion-header-border-color: border-primary-color-3, + accordion-header-border-color: border-default-color-3, accordion-header-border-style: solid, accordion-header-border-width: 1px, - accordion-item-background-color: background-primary-color-1, + accordion-item-background-color: background-default-color-1, accordion-item-text-color: text-color, accordion-item-text-font-family: text-paragraph-font-weight, accordion-item-text-font-size: text-paragraph-font-family, accordion-item-text-font-weight: text-paragraph-font-size, accordion-item-text-line-height: text-paragraph-line-height, - list-item-border-color: border-primary-color-3, + list-item-divider-color: divider-color, + list-item-divider-style: divider-style, + list-item-divider-width: divider-width, list-item-padding: 1rem, calendar-width: 21.875rem, calendar-body-height: 25.625rem, - calendar-border-radius: radius, + calendar-border-radius: border-radius, calendar-text-color: text-color, calendar-text-font-family: text-paragraph-font-family, calendar-text-font-size: text-paragraph-font-size, @@ -1487,15 +1526,15 @@ $theme: ( calendar-cell-inactive-text-color: text-disabled-color, calendar-cell-in-range-background-color: color-primary-200, - calendar-cell-disabled-background-color: background-primary-color-3, + calendar-cell-disabled-background-color: background-default-color-3, calendar-cell-disabled-text-color: text-disabled-color, - calendar-cell-selected-background-color: color-primary-500, - calendar-cell-selected-text-color: text-alternate-color, + calendar-cell-selected-background-color: color-primary-default, + calendar-cell-selected-text-color: text-control-color, calendar-cell-selected-text-font-size: text-subtitle-font-size, calendar-cell-selected-text-font-weight: text-subtitle-font-weight, calendar-cell-selected-text-line-height: text-subtitle-line-height, calendar-cell-hover-background-color: color-primary-hover, - calendar-cell-hover-text-color: text-alternate-color, + calendar-cell-hover-text-color: text-control-color, calendar-cell-hover-text-font-size: text-subtitle-font-size, calendar-cell-hover-text-font-weight: text-subtitle-font-weight, calendar-cell-hover-text-line-height: text-subtitle-line-height, @@ -1504,7 +1543,7 @@ $theme: ( calendar-cell-active-text-font-size: text-subtitle-font-size, calendar-cell-active-text-font-weight: text-subtitle-font-weight, calendar-cell-active-text-line-height: text-subtitle-line-height, - calendar-cell-today-background-color: background-primary-color-3, + calendar-cell-today-background-color: background-default-color-3, calendar-cell-today-text-color: text-color, calendar-cell-today-text-font-size: text-subtitle-font-size, calendar-cell-today-text-font-weight: text-subtitle-font-weight, @@ -1536,29 +1575,29 @@ $theme: ( overlay-backdrop-background-color: rgba(0, 0, 0, 0.288), - tooltip-background-color: color-basic-1000, + tooltip-background-color: background-alternative-color-3, tooltip-border-color: transparent, tooltip-border-style: dashed, tooltip-border-width: 0, - tooltip-border-radius: 0.5rem, + tooltip-border-radius: border-radius, tooltip-padding: 0.6rem 1rem 0.5rem, tooltip-text-color: text-alternate-color, - tooltip-text-font-family: text-caption-font-family, - tooltip-text-font-size: text-caption-font-size, - tooltip-text-font-weight: text-caption-font-weight, - tooltip-text-line-height: text-caption-line-height, + tooltip-text-font-family: text-caption-2-font-family, + tooltip-text-font-size: text-caption-2-font-size, + tooltip-text-font-weight: text-caption-2-font-weight, + tooltip-text-line-height: text-caption-2-line-height, tooltip-max-width: 16rem, - tooltip-primary-background-color: color-primary-500, - tooltip-primary-text-color: text-alternate-color, - tooltip-info-background-color: color-info-500, - tooltip-info-text-color: text-alternate-color, - tooltip-success-background-color: color-success-500, - tooltip-success-text-color: text-alternate-color, - tooltip-warning-background-color: color-warning-500, - tooltip-warning-text-color: text-alternate-color, - tooltip-danger-background-color: color-danger-500, - tooltip-danger-text-color: text-alternate-color, + tooltip-primary-background-color: color-primary-default, + tooltip-primary-text-color: text-control-color, + tooltip-info-background-color: color-info-default, + tooltip-info-text-color: text-control-color, + tooltip-success-background-color: color-success-default, + tooltip-success-text-color: text-control-color, + tooltip-warning-background-color: color-warning-default, + tooltip-warning-text-color: text-control-color, + tooltip-danger-background-color: color-danger-default, + tooltip-danger-text-color: text-control-color, tooltip-shadow: shadow, select-cursor: pointer, @@ -1573,72 +1612,72 @@ $theme: ( select-text-font-weight: text-subtitle-font-weight, select-placeholder-text-font-weight: text-paragraph-font-weight, - select-option-background-color: background-primary-color-1, + select-option-background-color: background-default-color-1, select-option-text-color: text-color, - select-option-selected-background-color: background-primary-color-1, + select-option-selected-background-color: background-default-color-1, select-option-selected-text-color: text-primary-color, - select-option-focus-background-color: background-primary-color-1, + select-option-focus-background-color: background-default-color-1, select-option-focus-text-color: text-primary-focus-color, - select-option-hover-background-color: background-primary-color-1, + select-option-hover-background-color: background-default-color-1, select-option-hover-text-color: text-primary-hover-color, - select-option-disabled-background-color: background-primary-color-1, + select-option-disabled-background-color: background-default-color-1, select-option-disabled-text-color: text-disabled-color, - select-tiny-text-font-size: text-button-tiny-font-size, - select-tiny-text-line-height: text-button-tiny-line-height, - select-small-text-font-size: text-button-small-font-size, - select-small-text-line-height: text-button-small-line-height, + select-tiny-text-font-size: text-caption-2-font-size, + select-tiny-text-line-height: text-caption-2-line-height, + select-small-text-font-size: text-subtitle-2-font-size, + select-small-text-line-height: text-subtitle-2-line-height, select-medium-text-font-size: text-subtitle-2-font-size, select-medium-text-line-height: text-subtitle-2-line-height, - select-large-text-font-size: text-button-large-font-size, - select-large-text-line-height: text-button-large-line-height, - select-giant-text-font-size: text-button-giant-font-size, - select-giant-text-line-height: text-button-giant-line-height, + select-large-text-font-size: text-subtitle-font-size, + select-large-text-line-height: text-subtitle-line-height, + select-giant-text-font-size: text-heading-6-font-size, + select-giant-text-line-height: text-heading-6-line-height, - select-rectangle-border-radius: 0.25rem, + select-rectangle-border-radius: border-radius, select-semi-round-border-radius: 0.75rem, select-round-border-radius: 1.5rem, - select-outline-background-color: background-primary-color-2, - select-outline-border-color: border-primary-color-2, + select-outline-background-color: background-default-color-2, + select-outline-border-color: border-default-color-3, select-outline-border-style: solid, - select-outline-border-width: 0.125rem, + select-outline-border-width: 1px, select-outline-text-color: text-color, select-outline-placeholder-text-color: text-hint-color, select-outline-focus-border-color: color-primary-focus, select-outline-hover-border-color: color-primary-hover, - select-outline-disabled-background-color: background-primary-color-1, - select-outline-disabled-border-color: border-primary-color-2, + select-outline-disabled-background-color: background-default-color-2, + select-outline-disabled-border-color: border-default-color-2, select-outline-disabled-text-color: text-disabled-color, - select-outline-tiny-padding: 0.25rem 0.625rem, - select-outline-small-padding: 0.375rem 0.875rem, - select-outline-medium-padding: 0.625rem 1.125rem, - select-outline-large-padding: 0.75rem 1.125rem, - select-outline-giant-padding: 0.875rem 1.375rem, + select-outline-tiny-padding: 0.1875rem 1.125rem, + select-outline-small-padding: 0.1875rem 1.125rem, + select-outline-medium-padding: 0.4375rem 1.125rem, + select-outline-large-padding: 0.6875rem 1.125rem, + select-outline-giant-padding: 0.9375rem 1.125rem, - select-outline-primary-border-color: color-primary-500, + select-outline-primary-border-color: color-primary-default, select-outline-primary-focus-border-color: color-primary-focus, select-outline-primary-hover-border-color: color-primary-hover, select-outline-primary-disabled-border-color: color-primary-disabled, - select-outline-success-border-color: color-success-500, + select-outline-success-border-color: color-success-default, select-outline-success-focus-border-color: color-success-focus, select-outline-success-hover-border-color: color-success-hover, select-outline-success-disabled-border-color: color-success-disabled, - select-outline-info-border-color: color-info-500, + select-outline-info-border-color: color-info-default, select-outline-info-focus-border-color: color-info-focus, select-outline-info-hover-border-color: color-info-hover, select-outline-info-disabled-border-color: color-info-disabled, - select-outline-warning-border-color: color-warning-500, + select-outline-warning-border-color: color-warning-default, select-outline-warning-focus-border-color: color-warning-focus, select-outline-warning-hover-border-color: color-warning-hover, select-outline-warning-disabled-border-color: color-warning-disabled, - select-outline-danger-border-color: color-danger-500, + select-outline-danger-border-color: color-danger-default, select-outline-danger-focus-border-color: color-danger-focus, select-outline-danger-hover-border-color: color-danger-hover, select-outline-danger-disabled-border-color: color-danger-disabled, @@ -1655,88 +1694,87 @@ $theme: ( select-group-option-outline-large-start-padding: 2.25rem, select-group-option-outline-giant-start-padding: 2.75rem, - select-filled-background-color: background-primary-color-2, - select-filled-border-color: background-primary-color-2, + select-filled-background-color: background-default-color-2, + select-filled-border-color: border-default-color-3, select-filled-border-style: solid, - select-filled-border-width: 0.125rem, + select-filled-border-width: 1px, select-filled-text-color: text-color, select-filled-placeholder-text-color: text-color, - select-filled-focus-border-color: color-basic-focus, - select-filled-hover-background-color: color-basic-hover, - select-filled-hover-border-color: color-basic-hover, - select-filled-disabled-background-color: background-primary-color-1, - select-filled-disabled-border-color: border-primary-color-2, + select-filled-focus-border-color: color-primary-focus, + select-filled-hover-border-color: color-primary-hover, + select-filled-disabled-background-color: background-default-color-2, + select-filled-disabled-border-color: border-default-color-2, select-filled-disabled-text-color: text-disabled-color, - select-filled-tiny-padding: 0.25rem 0.625rem, - select-filled-small-padding: 0.375rem 0.875rem, - select-filled-medium-padding: 0.625rem 1.125rem, - select-filled-large-padding: 0.75rem 1.125rem, - select-filled-giant-padding: 0.875rem 1.375rem, + select-filled-tiny-padding: 0.1875rem 1.125rem, + select-filled-small-padding: 0.1875rem 1.125rem, + select-filled-medium-padding: 0.4375rem 1.125rem, + select-filled-large-padding: 0.6875rem 1.125rem, + select-filled-giant-padding: 0.9375rem 1.125rem, - select-filled-primary-background-color: color-primary-500, - select-filled-primary-border-color: color-primary-500, - select-filled-primary-text-color: text-alternate-color, - select-filled-primary-placeholder-text-color: text-alternate-color, + select-filled-primary-background-color: color-primary-default, + select-filled-primary-border-color: color-primary-default, + select-filled-primary-text-color: text-control-color, + select-filled-primary-placeholder-text-color: text-control-color, select-filled-primary-focus-background-color: color-primary-focus, select-filled-primary-focus-border-color: color-primary-focus, select-filled-primary-hover-background-color: color-primary-hover, select-filled-primary-hover-border-color: color-primary-hover, - select-filled-primary-disabled-background-color: color-primary-disabled, + select-filled-primary-disabled-background-color: background-default-color-2, select-filled-primary-disabled-border-color: color-primary-disabled, select-filled-primary-disabled-text-color: text-primary-disabled-color, - select-filled-success-background-color: color-success-500, - select-filled-success-border-color: color-success-500, - select-filled-success-text-color: text-alternate-color, - select-filled-success-placeholder-text-color: text-alternate-color, + select-filled-success-background-color: color-success-default, + select-filled-success-border-color: color-success-default, + select-filled-success-text-color: text-control-color, + select-filled-success-placeholder-text-color: text-control-color, select-filled-success-focus-background-color: color-success-focus, select-filled-success-focus-border-color: color-success-focus, select-filled-success-hover-background-color: color-success-hover, select-filled-success-hover-border-color: color-success-hover, - select-filled-success-disabled-background-color: color-success-disabled, + select-filled-success-disabled-background-color: background-default-color-2, select-filled-success-disabled-border-color: color-success-disabled, select-filled-success-disabled-text-color: text-success-disabled-color, - select-filled-info-background-color: color-info-500, - select-filled-info-border-color: color-info-500, - select-filled-info-text-color: text-alternate-color, - select-filled-info-placeholder-text-color: text-alternate-color, + select-filled-info-background-color: color-info-default, + select-filled-info-border-color: color-info-default, + select-filled-info-text-color: text-control-color, + select-filled-info-placeholder-text-color: text-control-color, select-filled-info-focus-background-color: color-info-focus, select-filled-info-focus-border-color: color-info-focus, select-filled-info-hover-background-color: color-info-hover, select-filled-info-hover-border-color: color-info-hover, - select-filled-info-disabled-background-color: color-info-disabled, + select-filled-info-disabled-background-color: background-default-color-2, select-filled-info-disabled-border-color: color-info-disabled, select-filled-info-disabled-text-color: text-info-disabled-color, - select-filled-warning-background-color: color-warning-500, - select-filled-warning-border-color: color-warning-500, - select-filled-warning-text-color: text-alternate-color, - select-filled-warning-placeholder-text-color: text-alternate-color, + select-filled-warning-background-color: color-warning-default, + select-filled-warning-border-color: color-warning-default, + select-filled-warning-text-color: text-control-color, + select-filled-warning-placeholder-text-color: text-control-color, select-filled-warning-focus-background-color: color-warning-focus, select-filled-warning-focus-border-color: color-warning-focus, select-filled-warning-hover-background-color: color-warning-hover, select-filled-warning-hover-border-color: color-warning-hover, - select-filled-warning-disabled-background-color: color-warning-disabled, + select-filled-warning-disabled-background-color: background-default-color-2, select-filled-warning-disabled-border-color: color-warning-disabled, select-filled-warning-disabled-text-color: text-warning-disabled-color, - select-filled-danger-background-color: color-danger-500, - select-filled-danger-border-color: color-danger-500, - select-filled-danger-text-color: text-alternate-color, - select-filled-danger-placeholder-text-color: text-alternate-color, + select-filled-danger-background-color: color-danger-default, + select-filled-danger-border-color: color-danger-default, + select-filled-danger-text-color: text-control-color, + select-filled-danger-placeholder-text-color: text-control-color, select-filled-danger-focus-background-color: color-danger-focus, select-filled-danger-focus-border-color: color-danger-focus, select-filled-danger-hover-background-color: color-danger-hover, select-filled-danger-hover-border-color: color-danger-hover, - select-filled-danger-disabled-background-color: color-danger-disabled, + select-filled-danger-disabled-background-color: background-default-color-2, select-filled-danger-disabled-border-color: color-danger-disabled, select-filled-danger-disabled-text-color: text-danger-disabled-color, @@ -1751,91 +1789,82 @@ $theme: ( select-option-filled-giant-padding: select-filled-giant-padding, select-group-option-filled-giant-padding-start: 2.75rem, - select-hero-left-background-color: color-basic-400, - select-hero-right-background-color: color-basic-500, - select-hero-border-color: transparent, + select-hero-background-color: background-default-color-2, + select-hero-border-color: border-default-color-3, select-hero-border-style: solid, select-hero-border-width: 0, select-hero-text-color: text-color, select-hero-placeholder-text-color: text-color, - select-hero-focus-left-background-color: color-basic-700, - select-hero-focus-right-background-color: color-basic-800, - select-hero-hover-left-background-color: color-basic-300, - select-hero-hover-right-background-color: color-basic-400, - select-hero-disabled-left-background-color: background-primary-color-3, - select-hero-disabled-right-background-color: background-primary-color-3, + select-hero-focus-border-color: color-primary-focus, + select-hero-hover-border-color: color-primary-hover, + select-hero-disabled-background-color: background-default-color-2, select-hero-disabled-text-color: text-disabled-color, - select-hero-tiny-padding: 0.375rem 0.625rem, - select-hero-small-padding: 0.5rem 0.875rem, - select-hero-medium-padding: 0.75rem 1.125rem, - select-hero-large-padding: 0.875rem 1.125rem, - select-hero-giant-padding: 1rem 1.375rem, + select-hero-tiny-padding: 0.1875rem 1.125rem, + select-hero-small-padding: 0.1875rem 1.125rem, + select-hero-medium-padding: 0.4375rem 1.125rem, + select-hero-large-padding: 0.6875rem 1.125rem, + select-hero-giant-padding: 0.9375rem 1.125rem, select-hero-primary-left-background-color: color-primary-400, - select-hero-primary-right-background-color: color-primary-500, - select-hero-primary-text-color: text-alternate-color, - select-hero-primary-placeholder-text-color: text-alternate-color, + select-hero-primary-right-background-color: color-primary-default, + select-hero-primary-text-color: text-control-color, + select-hero-primary-placeholder-text-color: text-control-color, select-hero-primary-focus-left-background-color: color-primary-700, select-hero-primary-focus-right-background-color: color-primary-800, select-hero-primary-hover-left-background-color: color-primary-300, select-hero-primary-hover-right-background-color: color-primary-400, - select-hero-primary-disabled-left-background-color: color-primary-100, - select-hero-primary-disabled-right-background-color: color-primary-200, + select-hero-primary-disabled-background-color: background-default-color-2, select-hero-primary-disabled-text-color: text-primary-disabled-color, select-hero-success-left-background-color: color-success-400, - select-hero-success-right-background-color: color-success-500, - select-hero-success-text-color: text-alternate-color, - select-hero-success-placeholder-text-color: text-alternate-color, + select-hero-success-right-background-color: color-success-default, + select-hero-success-text-color: text-control-color, + select-hero-success-placeholder-text-color: text-control-color, select-hero-success-focus-left-background-color: color-success-700, select-hero-success-focus-right-background-color: color-success-800, select-hero-success-hover-left-background-color: color-success-300, select-hero-success-hover-right-background-color: color-success-400, - select-hero-success-disabled-left-background-color: color-success-100, - select-hero-success-disabled-right-background-color: color-success-200, + select-hero-success-disabled-background-color: background-default-color-2, select-hero-success-disabled-text-color: text-success-disabled-color, select-hero-info-left-background-color: color-info-400, - select-hero-info-right-background-color: color-info-500, - select-hero-info-text-color: text-alternate-color, - select-hero-info-placeholder-text-color: text-alternate-color, + select-hero-info-right-background-color: color-info-default, + select-hero-info-text-color: text-control-color, + select-hero-info-placeholder-text-color: text-control-color, select-hero-info-focus-left-background-color: color-info-700, select-hero-info-focus-right-background-color: color-info-800, select-hero-info-hover-left-background-color: color-info-300, select-hero-info-hover-right-background-color: color-info-400, - select-hero-info-disabled-left-background-color: color-info-100, - select-hero-info-disabled-right-background-color: color-info-200, + select-hero-info-disabled-background-color: background-default-color-2, select-hero-info-disabled-text-color: text-info-disabled-color, select-hero-warning-left-background-color: color-warning-400, - select-hero-warning-right-background-color: color-warning-500, - select-hero-warning-text-color: text-alternate-color, - select-hero-warning-placeholder-text-color: text-alternate-color, + select-hero-warning-right-background-color: color-warning-default, + select-hero-warning-text-color: text-control-color, + select-hero-warning-placeholder-text-color: text-control-color, select-hero-warning-focus-left-background-color: color-warning-700, select-hero-warning-focus-right-background-color: color-warning-800, select-hero-warning-hover-left-background-color: color-warning-300, select-hero-warning-hover-right-background-color: color-warning-400, - select-hero-warning-disabled-left-background-color: color-warning-100, - select-hero-warning-disabled-right-background-color: color-warning-200, + select-hero-warning-disabled-background-color: background-default-color-2, select-hero-warning-disabled-text-color: text-warning-disabled-color, select-hero-danger-left-background-color: color-danger-400, - select-hero-danger-right-background-color: color-danger-500, - select-hero-danger-text-color: text-alternate-color, - select-hero-danger-placeholder-text-color: text-alternate-color, + select-hero-danger-right-background-color: color-danger-default, + select-hero-danger-text-color: text-control-color, + select-hero-danger-placeholder-text-color: text-control-color, select-hero-danger-focus-left-background-color: color-danger-700, select-hero-danger-focus-right-background-color: color-danger-800, select-hero-danger-hover-left-background-color: color-danger-300, select-hero-danger-hover-right-background-color: color-danger-400, - select-hero-danger-disabled-left-background-color: color-danger-100, - select-hero-danger-disabled-right-background-color: color-danger-200, + select-hero-danger-disabled-background-color: background-default-color-2, select-hero-danger-disabled-text-color: text-danger-disabled-color, select-option-hero-tiny-padding: select-hero-tiny-padding, @@ -1850,11 +1879,11 @@ $theme: ( select-group-option-hero-giant-padding-start: 2.75rem, datepicker-text-color: text-color, - datepicker-background-color: background-primary-color-1, - datepicker-border-color: background-primary-color-1, + datepicker-background-color: background-default-color-1, + datepicker-border-color: background-default-color-1, datepicker-border-style: solid, datepicker-border-width: 0, - datepicker-border-radius: 0.75rem, + datepicker-border-radius: border-radius, datepicker-shadow: shadow, datepicker-arrow-size: 0.6875rem, @@ -1862,7 +1891,7 @@ $theme: ( radio-height: 1.125rem, radio-background-color: transparent, radio-border-style: solid, - radio-border-width: 0.0625rem, + radio-border-width: 1px, radio-text-color: text-color, radio-text-font-family: text-subtitle-font-family, radio-text-font-size: text-subtitle-font-size, @@ -1871,12 +1900,12 @@ $theme: ( radio-outline-color: outline-color, radio-outline-width: outline-width, - radio-disabled-border-color: border-primary-color-4, + radio-disabled-border-color: border-default-color-4, radio-disabled-text-color: text-disabled-color, - radio-disabled-inner-circle-color: border-primary-color-4, + radio-disabled-inner-circle-color: background-default-color-4, - radio-primary-border-color: color-primary-500, - radio-primary-inner-circle-color: color-primary-500, + radio-primary-border-color: color-primary-default, + radio-primary-inner-circle-color: color-primary-default, radio-primary-focus-border-color: color-primary-focus, radio-primary-focus-inner-circle-color: color-primary-focus, radio-primary-hover-border-color: color-primary-hover, @@ -1884,8 +1913,8 @@ $theme: ( radio-primary-active-border-color: color-primary-active, radio-primary-active-inner-circle-color: color-primary-active, - radio-success-border-color: color-success-500, - radio-success-inner-circle-color: color-success-500, + radio-success-border-color: color-success-default, + radio-success-inner-circle-color: color-success-default, radio-success-focus-border-color: color-success-focus, radio-success-focus-inner-circle-color: color-success-focus, radio-success-hover-border-color: color-success-hover, @@ -1893,8 +1922,8 @@ $theme: ( radio-success-active-border-color: color-success-active, radio-success-active-inner-circle-color: color-success-active, - radio-warning-border-color: color-warning-500, - radio-warning-inner-circle-color: color-warning-500, + radio-warning-border-color: color-warning-default, + radio-warning-inner-circle-color: color-warning-default, radio-warning-focus-border-color: color-warning-focus, radio-warning-focus-inner-circle-color: color-warning-focus, radio-warning-hover-border-color: color-warning-hover, @@ -1902,8 +1931,8 @@ $theme: ( radio-warning-active-border-color: color-warning-active, radio-warning-active-inner-circle-color: color-warning-active, - radio-danger-border-color: color-danger-500, - radio-danger-inner-circle-color: color-danger-500, + radio-danger-border-color: color-danger-default, + radio-danger-inner-circle-color: color-danger-default, radio-danger-focus-border-color: color-danger-focus, radio-danger-focus-inner-circle-color: color-danger-focus, radio-danger-hover-border-color: color-danger-hover, @@ -1911,8 +1940,8 @@ $theme: ( radio-danger-active-border-color: color-danger-active, radio-danger-active-inner-circle-color: color-danger-active, - radio-info-border-color: color-info-500, - radio-info-inner-circle-color: color-info-500, + radio-info-border-color: color-info-default, + radio-info-inner-circle-color: color-info-default, radio-info-focus-border-color: color-info-focus, radio-info-focus-inner-circle-color: color-info-focus, radio-info-hover-border-color: color-info-hover, @@ -1920,29 +1949,29 @@ $theme: ( radio-info-active-border-color: color-info-active, radio-info-active-inner-circle-color: color-info-active, - tree-grid-cell-border-width: 0.0625rem, + tree-grid-cell-border-width: 1px, tree-grid-cell-border-style: solid, - tree-grid-cell-border-color: border-primary-color-2, + tree-grid-cell-border-color: border-default-color-2, tree-grid-row-min-height: 2rem, tree-grid-cell-padding: 0.875rem 1.25rem, - tree-grid-header-background-color: background-primary-color-1, + tree-grid-header-background-color: background-default-color-1, tree-grid-header-text-color: text-color, tree-grid-header-text-font-family: text-subtitle-font-family, tree-grid-header-text-font-size: text-subtitle-font-size, tree-grid-header-text-font-weight: text-subtitle-font-weight, tree-grid-header-text-line-height: text-subtitle-line-height, - tree-grid-footer-background-color: background-primary-color-1, + tree-grid-footer-background-color: background-default-color-1, tree-grid-footer-text-color: text-color, tree-grid-footer-text-font-family: tree-grid-header-text-font-family, tree-grid-footer-text-font-size: tree-grid-header-text-font-size, tree-grid-footer-text-font-weight: tree-grid-header-text-font-weight, tree-grid-footer-text-line-height: tree-grid-header-text-line-height, - tree-grid-row-background-color: background-primary-color-1, - tree-grid-row-even-background-color: background-primary-color-1, - tree-grid-row-hover-background-color: background-primary-color-1, + tree-grid-row-background-color: background-default-color-1, + tree-grid-row-even-background-color: background-default-color-1, + tree-grid-row-hover-background-color: background-default-color-1, tree-grid-row-text-color: text-color, tree-grid-row-text-font-family: text-paragraph-font-family, tree-grid-row-text-font-size: text-paragraph-font-size, @@ -1957,11 +1986,11 @@ $theme: ( icon-line-height: 1, icon-width: 1em, icon-height: 1em, - icon-primary-color: color-primary-500, - icon-info-color: color-info-500, - icon-success-color: color-success-500, - icon-warning-color: color-warning-500, - icon-danger-color: color-danger-500, + icon-primary-color: color-primary-default, + icon-info-color: color-info-default, + icon-success-color: color-success-default, + icon-warning-color: color-warning-default, + icon-danger-color: color-danger-default, ); $nb-themes: nb-register-theme($theme, default); diff --git a/src/playground/with-layout/chat/chat-showcase.component.html b/src/playground/with-layout/chat/chat-showcase.component.html index d2a1a99163..ff4ec851b1 100644 --- a/src/playground/with-layout/chat/chat-showcase.component.html +++ b/src/playground/with-layout/chat/chat-showcase.component.html @@ -1,4 +1,4 @@ - +