From ee07fbc1661616610e3918aa13d50e7cd84bcf53 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Fri, 26 Apr 2019 20:11:43 +0200
Subject: [PATCH] feat(theme): cosmic update (#1420)
---
.../components/button/_button-filled.scss | 1 +
.../theme/components/button/_button-hero.scss | 1 +
.../components/select/_select-filled.scss | 1 +
.../components/select/_select-outline.scss | 3 +
.../select/_select.component.theme.scss | 1 +
.../toastr/_toast.component.theme.scss | 10 +-
.../_tree-grid-sort.component.theme.scss | 2 +-
.../tree-grid/_tree-grid.component.theme.scss | 10 +-
.../styles/global/typography/_typography.scss | 2 +-
.../theme/styles/themes/_cosmic.scss | 295 ++----
.../theme/styles/themes/_default.scss | 907 +++++++++---------
.../checkbox/checkbox-disabled.component.html | 10 +-
.../checkbox/checkbox-showcase.component.html | 6 +-
.../checkbox/checkbox-status.component.html | 15 +-
.../with-layout/checkbox/checkbox.module.ts | 4 +-
.../with-layout/input/input-component.scss | 4 +
.../input/input-showcase.component.ts | 1 +
.../list/simple-list-showcase.component.scss | 1 +
.../select/select-hero.component.html | 15 +
.../playground-base.component.ts | 2 +-
.../bootstrap/bootstrap-test.component.ts | 2 +-
21 files changed, 617 insertions(+), 676 deletions(-)
diff --git a/src/framework/theme/components/button/_button-filled.scss b/src/framework/theme/components/button/_button-filled.scss
index 9abd89a175..051b9ae30e 100644
--- a/src/framework/theme/components/button/_button-filled.scss
+++ b/src/framework/theme/components/button/_button-filled.scss
@@ -39,6 +39,7 @@
&[disabled] {
background-color: nb-theme(button-filled-#{$status}-disabled-background-color);
border-color: nb-theme(button-filled-#{$status}-disabled-border-color);
+ color: nb-theme(button-filled-#{$status}-disabled-text-color);
}
}
}
diff --git a/src/framework/theme/components/button/_button-hero.scss b/src/framework/theme/components/button/_button-hero.scss
index 217ead90f8..3299c97c08 100644
--- a/src/framework/theme/components/button/_button-hero.scss
+++ b/src/framework/theme/components/button/_button-hero.scss
@@ -52,6 +52,7 @@
$left-disabled-color: nb-theme(button-hero-#{$status}-disabled-left-background-color);
$right-disabled-color: nb-theme(button-hero-#{$status}-disabled-right-background-color);
background-image: linear-gradient(to right, $left-disabled-color, $right-disabled-color);
+ color: nb-theme(button-hero-#{$status}-disabled-text-color);
}
&.button-pulse {
diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss
index bc98da8b4b..1330e7e918 100644
--- a/src/framework/theme/components/select/_select-filled.scss
+++ b/src/framework/theme/components/select/_select-filled.scss
@@ -60,6 +60,7 @@
&[disabled] {
background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
+ color: nb-theme(select-filled-#{$status}-disabled-text-color);
}
}
}
diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
index 38bed4065c..fd6b6d0418 100644
--- a/src/framework/theme/components/select/_select-outline.scss
+++ b/src/framework/theme/components/select/_select-outline.scss
@@ -35,6 +35,9 @@
&:hover {
border-color: nb-theme(select-outline-#{$status}-hover-border-color);
}
+ &[disabled] {
+ border-color: nb-theme(select-outline-#{$status}-disabled-border-color);
+ }
}
}
diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss
index c0e84adf25..58ea4d0b9a 100644
--- a/src/framework/theme/components/select/_select.component.theme.scss
+++ b/src/framework/theme/components/select/_select.component.theme.scss
@@ -28,6 +28,7 @@
}
.options-list-container {
+ box-shadow: nb-theme(select-options-list-shadow);
overflow: hidden;
& > .options-list {
diff --git a/src/framework/theme/components/toastr/_toast.component.theme.scss b/src/framework/theme/components/toastr/_toast.component.theme.scss
index f52c6631ac..37eca95891 100644
--- a/src/framework/theme/components/toastr/_toast.component.theme.scss
+++ b/src/framework/theme/components/toastr/_toast.component.theme.scss
@@ -6,7 +6,7 @@
@mixin nb-toast-theme() {
nb-toast {
- background-color: nb-theme(toastr-background);
+ background-color: nb-theme(toastr-background-color);
border-color: nb-theme(toastr-border-color);
border-style: nb-theme(toastr-border-style);
border-width: nb-theme(toastr-border-width);
@@ -17,7 +17,7 @@
color: nb-theme(toastr-text-color);
&.destroy-by-click:hover {
- background: nb-theme(toastr-destroyable-hover-background);
+ background: nb-theme(toastr-destroyable-hover-background-color);
border-color: nb-theme(toastr-destroyable-hover-border-color);
}
@@ -53,17 +53,17 @@
@each $status in nb-get-statuses() {
nb-toast.status-#{$status} {
- background: nb-theme(toastr-#{$status}-background);
+ background: nb-theme(toastr-#{$status}-background-color);
border-color: nb-theme(toastr-#{$status}-border-color);
color: nb-theme(toastr-#{$status}-text-color);
&.destroy-by-click:hover {
- background: nb-theme(toastr-destroyable-hover-#{$status}-background);
+ background: nb-theme(toastr-destroyable-hover-#{$status}-background-color);
border-color: nb-theme(toastr-destroyable-hover-#{$status}-border-color);
}
.icon-container {
- background: nb-theme(toastr-icon-#{$status}-background);
+ background: nb-theme(toastr-icon-#{$status}-background-color);
color: nb-theme(toastr-icon-#{$status}-color);
}
}
diff --git a/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss b/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss
index d5d5cd2589..662b146a4a 100644
--- a/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss
+++ b/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss
@@ -6,7 +6,7 @@
@mixin nb-tree-grid-sort-header-theme() {
.nb-tree-grid-header-change-sort-button {
- background: nb-theme(tree-grid-sort-header-button-background);
+ background: nb-theme(tree-grid-sort-header-button-background-color);
border: nb-theme(tree-grid-sort-header-button-border);
padding: nb-theme(tree-grid-sort-header-button-padding);
color: inherit;
diff --git a/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss b/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
index 845076b469..eaa367998b 100644
--- a/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
+++ b/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
@@ -20,7 +20,7 @@
}
.nb-tree-grid-header-row {
- background: nb-theme(tree-grid-header-background);
+ background: nb-theme(tree-grid-header-background-color);
color: nb-theme(tree-grid-header-text-color);
font-family: nb-theme(tree-grid-header-text-font-family);
font-size: nb-theme(tree-grid-header-text-font-size);
@@ -29,7 +29,7 @@
}
.nb-tree-grid-footer-row {
- background: nb-theme(tree-grid-footer-background);
+ background: nb-theme(tree-grid-footer-background-color);
color: nb-theme(tree-grid-footer-text-color);
font-family: nb-theme(tree-grid-footer-text-font-family);
font-size: nb-theme(tree-grid-footer-text-font-size);
@@ -38,17 +38,17 @@
}
.nb-tree-grid-row {
- background: nb-theme(tree-grid-row-background);
+ background: nb-theme(tree-grid-row-background-color);
color: nb-theme(tree-grid-row-text-color);
font-family: nb-theme(tree-grid-row-text-font-family);
font-size: nb-theme(tree-grid-row-text-font-size);
font-weight: nb-theme(tree-grid-row-text-font-weight);
line-height: nb-theme(tree-grid-row-text-line-height);
&:hover {
- background: nb-theme(tree-grid-row-hover-background);
+ background: nb-theme(tree-grid-row-hover-background-color);
}
&:nth-child(2n):not(:hover) {
- background-color: nb-theme(tree-grid-row-even-background);
+ background-color: nb-theme(tree-grid-row-even-background-color);
}
}
diff --git a/src/framework/theme/styles/global/typography/_typography.scss b/src/framework/theme/styles/global/typography/_typography.scss
index fa8f0c679c..9c2a2b2f2e 100644
--- a/src/framework/theme/styles/global/typography/_typography.scss
+++ b/src/framework/theme/styles/global/typography/_typography.scss
@@ -1,7 +1,7 @@
@mixin nb-typography {
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
- color: nb-theme(text-dark-color);
+ color: nb-theme(text-color);
}
@each $size in (1, 2, 3, 4, 5, 6) {
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
index 972be3a9c0..54f8d3904c 100644
--- a/src/framework/theme/styles/themes/_cosmic.scss
+++ b/src/framework/theme/styles/themes/_cosmic.scss
@@ -8,212 +8,97 @@
@import '../core/mixins';
@import 'default';
-// default the base theme
$theme: (
- radius: 0.5rem,
-
- color-bg: #3d3780,
- color-bg-active: #494299,
- color-fg: #a1a1e5,
- color-fg-heading: #ffffff,
- color-fg-text: #d1d1ff,
- color-fg-highlight: #00f9a6,
-
- color-white: #ffffff,
-
- color-primary: #7659ff,
- color-success: #00d977,
- color-info: #0088ff,
- color-warning: #ffa100,
- color-danger: #ff386a,
-
- color-primary-200: #b970ff,
- color-primary-300: #8970ff,
- color-primary-400: #ad59ff,
- color-primary-600: #7e4ddb,
- color-primary-700: #654ddb,
- color-success-200: #24dec8,
- color-success-300: #24de8a,
- color-success-400: #00d9bf,
- color-success-600: #00bb85,
- color-success-700: #00bb66,
- color-info-200: #24bdff,
- color-info-300: #2499ff,
- color-info-400: #00b3ff,
- color-info-600: #0087db,
- color-info-700: #0075db,
- color-warning-200: #ffd324,
- color-warning-300: #ffae24,
- color-warning-400: #ffcc00,
- color-warning-600: #db9d00,
- color-warning-700: #db8a00,
- color-danger-200: #ff54b8,
- color-danger-300: #ff547f,
- color-danger-400: #ff38ac,
- color-danger-600: #db3078,
- color-danger-700: #db305b,
-
- link-color: #00f9a6,
- link-color-hover: #14ffbe,
-
- separator: #342e73,
- shadow: 0 8px 20px 0 rgba(40, 37, 89, 0.6),
-
- card-header-font-weight: font-weight-bolder,
-
- layout-bg: #2f296b,
-
- scrollbar-fg: #554db3,
- scrollbar-bg: #332e73,
-
- radial-gradient: radial-gradient(circle at 50% 50%, #423f8c, #302c6e),
- linear-gradient: linear-gradient(to right, #171749, #413789),
-
- sidebar-fg: color-secondary,
- sidebar-bg: color-bg,
-
- header-fg: color-white,
- header-bg: color-bg,
-
- footer-fg: color-fg,
- footer-bg: color-bg,
-
- actions-fg: color-fg,
- actions-bg: color-bg,
-
- user-fg: color-bg,
- user-bg: color-fg,
- user-fg-highlight: color-fg-highlight,
-
- popover-border: color-primary,
- popover-shadow: shadow,
-
- context-menu-active-bg: color-primary,
- context-menu-border: color-primary,
-
- footer-height: header-height,
-
- sidebar-width: 16.25rem,
- sidebar-width-compact: 3.45rem,
-
- menu-fg: color-fg,
- menu-bg: color-bg,
- menu-active-fg: color-white,
- menu-group-fg: color-white,
- menu-font-weight: font-weight-normal,
- menu-active-font-weight: font-weight-bolder,
- menu-submenu-bg: layout-bg,
- menu-submenu-fg: color-fg,
- menu-submenu-active-fg: color-fg-heading,
- menu-submenu-active-bg: rgba(0, 255, 170, 0.25),
- menu-submenu-active-border-color: color-fg-highlight,
- menu-submenu-active-shadow: 0 2px 12px 0 rgba(0, 255, 170, 0.25),
- menu-item-padding: 0.25rem 0.75rem,
- menu-item-separator: transparent,
-
- btn-hero-shadow: 0 4px 10px 0 rgba(33, 7, 77, 0.5),
- btn-hero-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
- btn-hero-bevel-size: 0 3px 0 0,
- btn-hero-glow-size: 0 2px 8px 0,
- btn-hero-primary-glow-size: btn-hero-glow-size,
- btn-hero-success-glow-size: btn-hero-glow-size,
- btn-hero-warning-glow-size: btn-hero-glow-size,
- btn-hero-info-glow-size: btn-hero-glow-size,
- btn-hero-danger-glow-size: btn-hero-glow-size,
- btn-hero-secondary-glow-size: btn-hero-glow-size,
- btn-secondary-border: color-primary,
- btn-outline-fg: color-fg-heading,
- btn-outline-hover-fg: color-fg-heading,
- btn-outline-focus-fg: color-fg-heading,
- btn-group-bg: #373273,
- btn-group-separator: #312c66,
-
- form-control-bg: #37317a,
- form-control-focus-bg: separator,
- form-control-border-color: separator,
- form-control-selected-border-color: color-primary,
-
- checkbox-height: 1.25rem,
- checkbox-width: 1.25rem,
- checkbox-border-width: 2px,
- checkbox-text-color: color-white,
- checkbox-disabled-background-color: transparent,
- checkbox-primary-background-color: transparent,
- checkbox-primary-checked-background-color: transparent,
- checkbox-primary-indeterminate-background-color: transparent,
- checkbox-primary-focus-background-color: transparent,
- checkbox-primary-hover-background-color: transparent,
- checkbox-primary-active-background-color: transparent,
- checkbox-success-background-color: transparent,
- checkbox-success-checked-background-color: transparent,
- checkbox-success-indeterminate-background-color: transparent,
- checkbox-success-focus-background-color: transparent,
- checkbox-success-hover-background-color: transparent,
- checkbox-success-active-background-color: transparent,
- checkbox-warning-background-color: transparent,
- checkbox-warning-checked-background-color: transparent,
- checkbox-warning-indeterminate-background-color: transparent,
- checkbox-warning-focus-background-color: transparent,
- checkbox-warning-hover-background-color: transparent,
- checkbox-warning-active-background-color: transparent,
- checkbox-danger-background-color: transparent,
- checkbox-danger-checked-background-color: transparent,
- checkbox-danger-indeterminate-background-color: transparent,
- checkbox-danger-focus-background-color: transparent,
- checkbox-danger-hover-background-color: transparent,
- checkbox-danger-active-background-color: transparent,
- checkbox-info-background-color: transparent,
- checkbox-info-checked-background-color: transparent,
- checkbox-info-indeterminate-background-color: transparent,
- checkbox-info-focus-background-color: transparent,
- checkbox-info-hover-background-color: transparent,
- checkbox-info-active-background-color: transparent,
-
- search-bg: linear-gradient(to right, #171749, #413789),
-
- smart-table-header-font-weight: font-weight-normal,
- smart-table-header-bg: color-bg-active,
- smart-table-bg-even: #3a347a,
- smart-table-bg-active: color-bg-active,
-
- smart-table-paging-border-color: color-primary,
- smart-table-paging-border-width: 2px,
- smart-table-paging-fg-active: color-fg-heading,
- smart-table-paging-bg-active: color-primary,
- smart-table-paging-hover: rgba(0, 0, 0, 0.2),
-
- badge-fg-text: color-white,
- badge-primary-bg-color: color-primary,
- badge-success-bg-color: color-success,
- badge-info-bg-color: color-info,
- badge-warning-bg-color: color-warning,
- badge-danger-bg-color: color-danger,
-
- spinner-bg: rgba(61, 55, 128, 0.9),
- stepper-accent-color: color-success,
-
- tabs-selected-second-color: color-success,
- tabs-selected-degrees: 20deg,
-
- calendar-active-item-bg: color-primary,
- calendar-selected-item-bg: color-primary,
- calendar-range-bg-in-range: #4e4095,
- calendar-today-item-bg: #352f6e,
-
- select-option-disabled-bg: #312e75,
-
- toastr-color-fg: color-white,
- toastr-padding: 1.25rem,
- toastr-default-background: #bcc3cc,
-
- tooltip-fg: color-bg,
- tooltip-status-fg: color-white,
-
- datepicker-border: color-primary,
- datepicker-shadow: shadow,
-
- radio-checked-border-color: color-primary,
- radio-checked-checkmark: color-primary,
+
+ color-primary-100: #f1edff,
+ color-primary-200: #e3dbff,
+ color-primary-300: #c6b8ff,
+ color-primary-400: #9378ff,
+ color-primary-500: #714dff,
+ color-primary-600: #5837db,
+ color-primary-700: #4427b8,
+ 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,
+ color-basic-400: #a0a3db,
+ color-basic-500: #37337a,
+ color-basic-600: #292766,
+ color-basic-700: #1d2252,
+ 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,
+
+ background-primary-color-1: color-basic-500,
+ background-primary-color-2: color-basic-600,
+ background-primary-color-3: color-basic-700,
+ background-primary-color-4: color-basic-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-200,
+ text-alternate-color: color-basic-100,
+ 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,
);
// register the theme
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index a8974418fb..da3684b67e 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -51,8 +51,6 @@ $theme: (
social-color-dribble: #f26798,
social-color-behance: #0093fa,
- shadow: 0 2px 12px 0 #dfe3eb,
-
scrollbar-fg: scrollbar-color,
scrollbar-bg: scrollbar-background-color,
scrollbar-thumb-radius: 2.5px,
@@ -62,83 +60,73 @@ $theme: (
/* Eva theme variables */
- color-white: #ffffff,
- color-black: #0d1c2e,
-
- color-primary: #3366ff,
color-primary-100: #f2f6ff,
color-primary-200: #d9e4ff,
color-primary-300: #a6c1ff,
color-primary-400: #598bff,
+ color-primary-500: #3366ff,
color-primary-600: #284de0,
color-primary-700: #2541cc,
color-primary-800: #192f9e,
color-primary-900: #14236e,
- color-secondary: #884dff,
- color-secondary-100: #f7f2ff,
- color-secondary-200: #e0d1ff,
- color-secondary-300: #c5a8ff,
- color-secondary-400: #a375ff,
- color-secondary-600: #6a39db,
- color-secondary-700: #4f28b8,
- color-secondary-800: #371b94,
- color-secondary-900: #26117a,
-
- color-success: #00e096,
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: #0095ff,
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: #ffaa00,
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: #ff3d71,
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: #a6aebd,
- color-basic-100: #f7f8fa,
- color-basic-200: #edf0f5,
- color-basic-300: #dde1eb,
- color-basic-400: #c8cedb,
- color-basic-600: #8992a3,
- color-basic-700: #6a7385,
- color-basic-800: #4b5466,
- color-basic-900: #2c3547,
+ color-basic-100: white,
+ color-basic-200: #f7f8fa,
+ color-basic-300: #edf0f5,
+ 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-alternate: color-basic-100,
color-primary-focus: color-primary-700,
color-primary-hover: color-primary-400,
color-primary-active: color-primary-600,
- color-primary-disabled: color-primary-200,
+ color-primary-disabled: color-primary-300,
color-success-focus: color-success-700,
color-success-hover: color-success-400,
@@ -148,57 +136,67 @@ $theme: (
color-info-focus: color-info-700,
color-info-hover: color-info-400,
color-info-active: color-info-600,
- color-info-disabled: color-info-200,
+ color-info-disabled: color-info-300,
color-warning-focus: color-warning-700,
color-warning-hover: color-warning-400,
color-warning-active: color-warning-600,
- color-warning-disabled: color-warning-200,
+ color-warning-disabled: color-warning-300,
color-danger-focus: color-danger-700,
color-danger-hover: color-danger-400,
color-danger-active: color-danger-600,
- color-danger-disabled: color-danger-200,
+ color-danger-disabled: color-danger-300,
color-basic-focus: color-basic-700,
color-basic-hover: color-basic-400,
color-basic-active: color-basic-600,
- color-basic-disabled: color-basic-200,
- text-dark-color: color-black,
- text-disabled-color: color-basic-400,
+ 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,
+
+ text-color: color-basic-1000,
+ text-alternate-color: color-basic-100,
+ text-disabled-color: color-basic-500,
text-hint-color: color-basic-600,
- text-light-color: color-white,
- text-primary-color: color-primary,
+ text-primary-color: color-primary-500,
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-disabled,
+ text-primary-disabled-color: color-primary-400,
- text-success-color: color-success,
+ text-success-color: color-success-500,
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-disabled,
+ text-success-disabled-color: color-success-400,
- text-info-color: color-info,
+ text-info-color: color-info-500,
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-disabled,
+ text-info-disabled-color: color-info-400,
- text-warning-color: color-warning,
+ text-warning-color: color-warning-500,
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-disabled,
+ text-warning-disabled-color: color-warning-400,
- text-danger-color: color-danger,
+ text-danger-color: color-danger-500,
text-danger-focus-color: color-danger-focus,
text-danger-hover-color: color-danger-hover,
text-danger-active-color: color-danger-active,
- text-danger-disabled-color: color-danger-disabled,
+ text-danger-disabled-color: color-danger-400,
font-family-primary: unquote('Open Sans, sans-serif'),
font-family-secondary: unquote('Raleway, sans-serif'),
@@ -273,22 +271,22 @@ $theme: (
/* Strict tokens */
- divider-color: color-basic-200,
-
outline-width: 0.375rem,
outline-color: color-basic-300,
- scrollbar-color: color-basic-300,
- scrollbar-background-color: color-basic-100,
+ scrollbar-color: background-primary-color-3,
+ scrollbar-background-color: background-primary-color-2,
scrollbar-width: 0.3125rem,
- link-text-color: color-primary,
- link-text-hover-color: color-primary-hover,
+ shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1),
+
+ link-text-color: text-primary-color,
+ link-text-hover-color: text-primary-hover-color,
/* Components mappings */
- card-background-color: color-white,
- card-text-color: text-dark-color,
+ card-background-color: background-primary-color-1,
+ card-text-color: text-color,
card-text-font-family: text-paragraph-font-family,
card-text-font-size: text-paragraph-font-size,
card-text-font-weight: text-paragraph-font-weight,
@@ -298,44 +296,44 @@ $theme: (
card-border-color: transparent,
card-border-radius: 0.75rem,
card-padding: 1rem 1.25rem,
- card-divider-color: divider-color,
+ card-shadow: shadow,
+ card-divider-color: border-primary-color-3,
card-divider-style: solid,
card-divider-width: 1px,
- card-header-text-color: text-dark-color,
+ card-header-text-color: text-color,
card-header-text-font-family: text-subtitle-font-family,
card-header-text-font-size: text-subtitle-font-size,
card-header-text-font-weight: text-subtitle-font-weight,
card-header-text-line-height: text-subtitle-line-height,
- card-header-disabled-background-color: color-basic-disabled,
+ card-header-disabled-background-color: background-primary-color-3,
card-header-disabled-text-color: text-disabled-color,
- card-header-primary-background-color: color-primary,
- card-header-primary-text-color: text-light-color,
- card-header-info-background-color: color-info,
- card-header-info-text-color: text-light-color,
- card-header-success-background-color: color-success,
- card-header-success-text-color: text-dark-color,
- card-header-warning-background-color: color-warning,
- card-header-warning-text-color: text-dark-color,
- card-header-danger-background-color: color-danger,
- card-header-danger-text-color: text-dark-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-success-text-color: text-color,
+ card-header-warning-background-color: color-warning-500,
+ card-header-warning-text-color: text-color,
+ card-header-danger-background-color: color-danger-500,
+ card-header-danger-text-color: text-color,
card-height-tiny: 6rem,
card-height-small: 21rem,
card-height-medium: 28.5rem,
card-height-large: 36rem,
card-height-giant: 43.5rem,
- card-shadow: none,
card-margin-bottom: 1.5rem,
card-scrollbar-color: scrollbar-color,
card-scrollbar-background-color: scrollbar-background-color,
card-scrollbar-width: scrollbar-width,
- header-background-color: color-basic-100,
- header-text-color: text-dark-color,
+ header-background-color: background-primary-color-1,
+ header-text-color: text-color,
header-text-font-family: text-paragraph-font-family,
header-text-font-size: text-paragraph-font-size,
header-text-font-weight: text-paragraph-font-weight,
@@ -344,8 +342,8 @@ $theme: (
header-padding: 1.25rem,
header-shadow: shadow,
- footer-background-color: color-basic-100,
- footer-text-color: text-dark-color,
+ footer-background-color: background-primary-color-1,
+ footer-text-color: text-color,
footer-text-font-family: text-paragraph-font-family,
footer-text-font-size: text-paragraph-font-size,
footer-text-font-weight: text-paragraph-font-weight,
@@ -353,11 +351,11 @@ $theme: (
footer-text-highlight-color: color-primary-hover,
footer-height: 4.725rem,
footer-padding: 1.25rem,
- footer-divider-color: divider-color,
+ footer-divider-color: border-primary-color-3,
footer-shadow: shadow,
- layout-background-color: color-basic-100,
- layout-text-color: text-dark-color,
+ layout-background-color: background-primary-color-2,
+ layout-text-color: text-color,
layout-text-font-family: text-paragraph-font-family,
layout-text-font-size: text-paragraph-font-size,
layout-text-font-weight: text-paragraph-font-weight,
@@ -366,7 +364,7 @@ $theme: (
layout-content-width: 900px,
layout-window-mode-min-width: 300px,
layout-window-mode-max-width: 1920px,
- layout-window-mode-background-color: layout-bg,
+ layout-window-mode-background-color: background-primary-color-3,
layout-window-mode-padding-top: 4.75rem,
layout-window-shadow: shadow,
layout-padding: 2.25rem 2.25rem 0.75rem,
@@ -376,8 +374,8 @@ $theme: (
layout-scrollbar-color: scrollbar-color,
layout-scrollbar-width: scrollbar-width,
- sidebar-background-color: color-basic-100,
- sidebar-text-color: text-dark-color,
+ sidebar-background-color: background-primary-color-1,
+ sidebar-text-color: text-color,
sidebar-text-font-family: text-paragraph-font-family,
sidebar-text-font-size: text-paragraph-font-size,
sidebar-text-font-weight: text-paragraph-font-weight,
@@ -389,13 +387,13 @@ $theme: (
sidebar-header-height: 3.5rem,
sidebar-footer-height: 3.5rem,
sidebar-shadow: shadow,
- sidebar-menu-item-highlight-color: color-primary,
+ sidebar-menu-item-highlight-color: color-primary-500,
sidebar-scrollbar-background-color: scrollbar-background-color,
sidebar-scrollbar-color: scrollbar-color,
sidebar-scrollbar-width: scrollbar-width,
menu-background-color: transparent,
- menu-text-color: text-dark-color,
+ menu-text-color: text-color,
menu-text-font-family: text-subtitle-2-font-family,
menu-text-font-size: text-subtitle-2-font-size,
menu-text-font-weight: text-subtitle-2-font-weight,
@@ -419,12 +417,12 @@ $theme: (
menu-item-icon-margin: 0 0.25rem 0 0,
menu-item-icon-width: 1.5rem,
- menu-item-divider-color: divider-color,
+ menu-item-divider-color: border-primary-color-3,
menu-item-divider-style: solid,
menu-item-divider-width: 0.0625rem,
menu-submenu-background-color: menu-background-color,
- menu-submenu-text-color: text-light-color,
+ menu-submenu-text-color: text-alternate-color,
menu-submenu-margin: 0,
menu-submenu-padding: 0 1.25rem,
@@ -440,7 +438,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,
+ menu-submenu-item-active-border-color: color-primary-500,
menu-submenu-item-active-text-color: menu-item-active-text-color,
menu-submenu-item-icon-active-color: menu-item-icon-active-color,
@@ -451,7 +449,7 @@ $theme: (
tabset-background-color: transparent,
tabset-border-radius: 0,
- tabset-shadow: none,
+ tabset-shadow: shadow,
tabset-tab-background-color: transparent,
tabset-tab-padding: 1rem 2rem,
@@ -476,12 +474,12 @@ $theme: (
tabset-tab-disabled-text-color: text-disabled-color,
tabset-tab-disabled-underline-color: transparent,
- tabset-divider-color: divider-color,
+ tabset-divider-color: border-primary-color-3,
tabset-divider-width: 1px,
tabset-content-background-color: transparent,
tabset-content-padding: 1rem 2rem,
- tabset-content-text-color: text-dark-color,
+ tabset-content-text-color: text-color,
tabset-content-text-font-family: text-paragraph-font-family,
tabset-content-text-font-size: text-paragraph-font-size,
tabset-content-text-font-weight: text-paragraph-font-weight,
@@ -494,7 +492,7 @@ $theme: (
route-tabset-background-color: transparent,
route-tabset-border-radius: 0,
- route-tabset-shadow: none,
+ route-tabset-shadow: shadow,
route-tabset-tab-background-color: transparent,
route-tabset-tab-padding: 1rem 2rem,
@@ -523,7 +521,7 @@ $theme: (
route-tabset-tab-disabled-text-color: text-disabled-color,
route-tabset-tab-disabled-underline-color: transparent,
- route-tabset-divider-color: divider-color,
+ route-tabset-divider-color: border-primary-color-3,
route-tabset-divider-width: 1px,
route-tabset-scrollbar-color: scrollbar-color,
@@ -532,15 +530,15 @@ $theme: (
route-tabset-tab-text-hide-breakpoint: 36rem,
user-picture-box-background-color: transparent,
- user-picture-box-border-color: color-basic,
+ user-picture-box-border-color: border-primary-color-3,
user-picture-box-border-width: 0.125rem,
- user-initials-text-color: text-dark-color,
+ user-initials-text-color: text-color,
user-initials-text-font-family: text-paragraph-font-family,
user-initials-text-font-weight: text-paragraph-font-weight,
- user-name-text-color: text-dark-color,
+ user-name-text-color: text-color,
user-name-text-font-family: text-paragraph-font-family,
user-name-text-font-weight: text-paragraph-font-weight,
- user-title-text-color: text-dark-color,
+ user-title-text-color: text-color,
user-title-text-font-family: text-paragraph-2-font-family,
user-title-text-font-weight: text-paragraph-2-font-weight,
@@ -593,34 +591,34 @@ $theme: (
user-giant-title-text-font-size: text-paragraph-font-size,
user-giant-title-text-line-height: text-paragraph-line-height,
- popover-text-color: text-color-dark,
+ popover-text-color: text-color,
popover-text-font-family: text-paragraph-font-family,
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: color-white,
+ popover-background-color: background-primary-color-1,
popover-border-width: 0.125rem,
popover-border-color: transparent,
popover-border-radius: 0.5rem,
- popover-shadow: none,
+ popover-shadow: shadow,
popover-arrow-size: 0.6875rem,
popover-padding: 0.75rem 1rem,
- context-menu-background-color: color-white,
+ context-menu-background-color: background-primary-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-min-width: 10rem,
context-menu-max-width: 15rem,
- context-menu-shadow: none,
+ context-menu-shadow: shadow,
actions-background-color: transparent,
- actions-divider-color: divider-color,
+ actions-divider-color: border-primary-color-3,
actions-divider-style: solid,
actions-divider-width: 0.0625rem,
actions-icon-color: text-hint-color,
- actions-text-color: text-dark-color,
+ actions-text-color: text-color,
actions-text-font-family: text-button-font-family,
actions-text-font-weight: text-button-font-weight,
actions-text-line-height: text-button-line-height,
@@ -649,12 +647,12 @@ $theme: (
actions-giant-padding: 0 1.25rem,
actions-giant-text-font-size: text-button-giant-font-size,
- search-background-color: color-basic-100,
+ search-background-color: background-primary-color-1,
search-divider-color: divider-color,
search-divider-style: solid,
search-divider-width: 0.25rem,
- search-extra-background-color: color-primary,
- search-text-color: text-dark-color,
+ search-extra-background-color: color-primary-500,
+ search-text-color: text-color,
search-text-font-family: text-heading-1-font-family,
search-text-font-size: text-heading-1-font-size,
search-text-font-weight: text-heading-1-font-weight,
@@ -691,18 +689,18 @@ $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,
+ smart-table-paging-bg-active: color-success-500,
smart-table-paging-hover: rgba(0, 0, 0, 0.05),
- toastr-background: color-white,
- toastr-border-color: color-basic,
+ toastr-background-color: background-primary-color-1,
+ toastr-border-color: border-primary-color-3,
toastr-border-style: solid,
toastr-border-width: 0.125rem,
toastr-border-radius: 0.75rem,
toastr-padding: 1rem,
- toastr-shadow: none,
+ toastr-shadow: shadow,
- toastr-text-color: text-dark-color,
+ toastr-text-color: text-color,
toastr-text-font-family: text-paragraph-font-family,
toastr-text-font-size: text-paragraph-font-size,
toastr-text-font-weight: text-paragraph-font-weight,
@@ -712,47 +710,47 @@ $theme: (
toastr-title-text-font-weight: text-subtitle-font-weight,
toastr-title-text-line-height: text-subtitle-line-height,
- toastr-destroyable-hover-background: color-white,
- toastr-destroyable-hover-border-color: color-basic-hover,
+ toastr-destroyable-hover-background-color: background-primary-color-1,
+ toastr-destroyable-hover-border-color: border-primary-color-3,
- toastr-primary-background: color-primary,
- toastr-primary-border-color: color-primary,
- toastr-primary-text-color: color-white,
- toastr-icon-primary-background: color-white,
- toastr-icon-primary-color: color-primary,
- toastr-destroyable-hover-primary-background: color-primary-hover,
+ 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-destroyable-hover-primary-background-color: color-primary-hover,
toastr-destroyable-hover-primary-border-color: color-primary-hover,
- toastr-success-background: color-success,
- toastr-success-border-color: color-success,
- toastr-success-text-color: color-white,
- toastr-icon-success-background: color-white,
- toastr-icon-success-color: color-success,
- toastr-destroyable-hover-success-background: color-success-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-destroyable-hover-success-background-color: color-success-hover,
toastr-destroyable-hover-success-border-color: color-success-hover,
- toastr-info-background: color-info,
- toastr-info-border-color: color-info,
- toastr-info-text-color: color-white,
- toastr-icon-info-background: color-white,
- toastr-icon-info-color: color-info,
- toastr-destroyable-hover-info-background: color-info-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-destroyable-hover-info-background-color: color-info-hover,
toastr-destroyable-hover-info-border-color: color-info-hover,
- toastr-warning-background: color-warning,
- toastr-warning-border-color: color-warning,
- toastr-warning-text-color: color-white,
- toastr-icon-warning-background: color-white,
- toastr-icon-warning-color: color-warning,
- toastr-destroyable-hover-warning-background: color-warning-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-destroyable-hover-warning-background-color: color-warning-hover,
toastr-destroyable-hover-warning-border-color: color-warning-hover,
- toastr-danger-background: color-danger,
- toastr-danger-border-color: color-danger,
- toastr-danger-text-color: color-white,
- toastr-icon-danger-background: color-white,
- toastr-icon-danger-color: color-danger,
- toastr-destroyable-hover-danger-background: color-danger-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-destroyable-hover-danger-background-color: color-danger-hover,
toastr-destroyable-hover-danger-border-color: color-danger-hover,
button-cursor: pointer,
@@ -787,9 +785,9 @@ $theme: (
button-filled-large-padding: 0.75rem 1.125rem,
button-filled-giant-padding: 0.875rem 1.375rem,
- button-filled-primary-background-color: color-primary,
- button-filled-primary-border-color: color-primary,
- button-filled-primary-text-color: text-light-color,
+ 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-focus-border-color: color-primary-focus,
button-filled-primary-hover-background-color: color-primary-hover,
button-filled-primary-hover-border-color: color-primary-hover,
@@ -797,10 +795,11 @@ $theme: (
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-success-background-color: color-success,
- button-filled-success-border-color: color-success,
- button-filled-success-text-color: text-light-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-focus-border-color: color-success-focus,
button-filled-success-hover-background-color: color-success-hover,
button-filled-success-hover-border-color: color-success-hover,
@@ -808,10 +807,11 @@ $theme: (
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-info-background-color: color-info,
- button-filled-info-border-color: color-info,
- button-filled-info-text-color: text-light-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-focus-border-color: color-info-focus,
button-filled-info-hover-background-color: color-info-hover,
button-filled-info-hover-border-color: color-info-hover,
@@ -819,10 +819,11 @@ $theme: (
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-warning-background-color: color-warning,
- button-filled-warning-border-color: color-warning,
- button-filled-warning-text-color: text-light-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-focus-border-color: color-warning-focus,
button-filled-warning-hover-background-color: color-warning-hover,
button-filled-warning-hover-border-color: color-warning-hover,
@@ -830,10 +831,11 @@ $theme: (
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-danger-background-color: color-danger,
- button-filled-danger-border-color: color-danger,
- button-filled-danger-text-color: text-light-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-focus-border-color: color-danger-focus,
button-filled-danger-hover-background-color: color-danger-hover,
button-filled-danger-hover-border-color: color-danger-hover,
@@ -841,6 +843,7 @@ $theme: (
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-outline-border-style: solid,
button-outline-border-width: 0.125rem,
@@ -852,7 +855,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,
+ button-outline-primary-border-color: color-primary-500,
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,
@@ -863,7 +866,7 @@ $theme: (
button-outline-primary-disabled-border-color: color-primary-disabled,
button-outline-primary-disabled-text-color: text-primary-disabled-color,
- button-outline-success-border-color: color-success,
+ button-outline-success-border-color: color-success-500,
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,
@@ -874,7 +877,7 @@ $theme: (
button-outline-success-disabled-border-color: color-success-disabled,
button-outline-success-disabled-text-color: text-success-disabled-color,
- button-outline-info-border-color: color-info,
+ button-outline-info-border-color: color-info-500,
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,
@@ -885,7 +888,7 @@ $theme: (
button-outline-info-disabled-border-color: color-info-disabled,
button-outline-info-disabled-text-color: text-info-disabled-color,
- button-outline-warning-border-color: color-warning,
+ button-outline-warning-border-color: color-warning-500,
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,
@@ -896,7 +899,7 @@ $theme: (
button-outline-warning-disabled-border-color: color-warning-disabled,
button-outline-warning-disabled-text-color: text-warning-disabled-color,
- button-outline-danger-border-color: color-danger,
+ button-outline-danger-border-color: color-danger-500,
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,
@@ -961,116 +964,121 @@ $theme: (
button-hero-giant-padding: 1rem 1.5rem,
button-hero-shadow: 0 0 transparent,
- button-hero-text-shadow: none,
+ button-hero-text-shadow: shadow,
button-hero-bevel-size: 0 0 0 0,
button-hero-glow-size: 0 0 0 0,
button-hero-outline-color: outline-color,
button-hero-outline-width: outline-width,
- button-hero-primary-text-color: text-light-color,
+ button-hero-primary-text-color: text-alternate-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,
+ button-hero-primary-right-background-color: color-primary-500,
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,
+ button-hero-primary-active-left-background-color: color-primary-500,
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-success-text-color: text-light-color,
+ button-hero-success-text-color: text-alternate-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,
+ button-hero-success-right-background-color: color-success-500,
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,
+ button-hero-success-active-left-background-color: color-success-500,
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-info-text-color: text-light-color,
+ button-hero-info-text-color: text-alternate-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,
+ button-hero-info-right-background-color: color-info-500,
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,
+ button-hero-info-active-left-background-color: color-info-500,
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-warning-text-color: text-light-color,
+ button-hero-warning-text-color: text-alternate-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,
+ button-hero-warning-right-background-color: color-warning-500,
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,
+ button-hero-warning-active-left-background-color: color-warning-500,
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-danger-text-color: text-light-color,
+ button-hero-danger-text-color: text-alternate-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,
+ button-hero-danger-right-background-color: color-danger-500,
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,
+ button-hero-danger-active-left-background-color: color-danger-500,
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,
- input-background-color: color-basic-100,
+ input-background-color: background-primary-color-2,
input-border-style: solid,
input-border-width: 0.125rem,
input-placeholder-text-color: text-hint-color,
input-placeholder-text-font-family: text-paragraph-font-family,
- input-text-color: text-dark-color,
+ input-text-color: text-color,
input-text-font-family: text-subtitle-font-family,
- input-border-color: color-basic-100,
+ input-border-color: border-primary-color-3,
input-focus-border-color: color-primary-focus,
input-hover-border-color: color-primary-hover,
- input-disabled-border-color: color-basic-200,
- input-disabled-background-color: color-basic-200,
+ input-disabled-border-color: border-primary-color-2,
+ input-disabled-background-color: background-primary-color-1,
input-disabled-text-color: text-disabled-color,
input-disabled-placeholder-text-color: text-disabled-color,
- input-primary-border-color: color-primary,
+ input-primary-border-color: color-primary-500,
input-primary-focus-border-color: color-primary-focus,
input-primary-hover-border-color: color-primary-hover,
- input-success-border-color: color-success,
+ input-success-border-color: color-success-500,
input-success-focus-border-color: color-success-focus,
input-success-hover-border-color: color-success-hover,
- input-info-border-color: color-info,
+ input-info-border-color: color-info-500,
input-info-focus-border-color: color-info-focus,
input-info-hover-border-color: color-info-hover,
- input-warning-border-color: color-warning,
+ input-warning-border-color: color-warning-500,
input-warning-focus-border-color: color-warning-focus,
input-warning-hover-border-color: color-warning-hover,
- input-danger-border-color: color-danger,
+ input-danger-border-color: color-danger-500,
input-danger-focus-border-color: color-danger-focus,
input-danger-hover-border-color: color-danger-hover,
@@ -1125,25 +1133,25 @@ $theme: (
checkbox-border-radius: 3px,
checkbox-outline-width: outline-width,
checkbox-outline-color: outline-color,
- checkbox-text-color: text-dark-color,
+ checkbox-text-color: text-color,
checkbox-text-font-family: text-subtitle-2-font-family,
checkbox-text-font-size: text-subtitle-2-font-size,
checkbox-text-font-weight: text-subtitle-2-font-weight,
checkbox-text-line-height: text-subtitle-2-line-height,
- checkbox-disabled-background-color: color-basic-400,
- checkbox-disabled-border-color: color-basic-400,
- checkbox-disabled-checkmark-color: color-white,
+ checkbox-disabled-background-color: background-primary-color-3,
+ checkbox-disabled-border-color: border-primary-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,
- checkbox-primary-checked-background-color: color-primary,
- checkbox-primary-checked-border-color: color-primary,
- checkbox-primary-checked-checkmark-color: color-white,
- checkbox-primary-indeterminate-background-color: color-primary,
- checkbox-primary-indeterminate-border-color: color-primary,
- checkbox-primary-indeterminate-checkmark-color: color-white,
+ 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-checked-checkmark-color: color-alternate,
+ checkbox-primary-indeterminate-background-color: color-primary-500,
+ checkbox-primary-indeterminate-border-color: color-primary-500,
+ checkbox-primary-indeterminate-checkmark-color: color-alternate,
checkbox-primary-focus-border-color: color-primary-700,
checkbox-primary-hover-background-color: color-primary-400,
checkbox-primary-hover-border-color: color-primary-400,
@@ -1151,13 +1159,13 @@ $theme: (
checkbox-primary-active-border-color: color-primary-600,
checkbox-success-background-color: color-success-200,
- checkbox-success-border-color: color-success,
- checkbox-success-checked-background-color: color-success,
- checkbox-success-checked-border-color: color-success,
- checkbox-success-checked-checkmark-color: color-white,
- checkbox-success-indeterminate-background-color: color-success,
- checkbox-success-indeterminate-border-color: color-success,
- checkbox-success-indeterminate-checkmark-color: color-white,
+ 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-checked-checkmark-color: color-alternate,
+ checkbox-success-indeterminate-background-color: color-success-500,
+ checkbox-success-indeterminate-border-color: color-success-500,
+ checkbox-success-indeterminate-checkmark-color: color-alternate,
checkbox-success-focus-border-color: color-success-700,
checkbox-success-hover-background-color: color-success-400,
checkbox-success-hover-border-color: color-success-400,
@@ -1165,13 +1173,13 @@ $theme: (
checkbox-success-active-border-color: color-success-600,
checkbox-warning-background-color: color-warning-200,
- checkbox-warning-border-color: color-warning,
- checkbox-warning-checked-background-color: color-warning,
- checkbox-warning-checked-border-color: color-warning,
- checkbox-warning-checked-checkmark-color: color-white,
- checkbox-warning-indeterminate-background-color: color-warning,
- checkbox-warning-indeterminate-border-color: color-warning,
- checkbox-warning-indeterminate-checkmark-color: color-white,
+ 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-checked-checkmark-color: color-alternate,
+ checkbox-warning-indeterminate-background-color: color-warning-500,
+ checkbox-warning-indeterminate-border-color: color-warning-500,
+ checkbox-warning-indeterminate-checkmark-color: color-alternate,
checkbox-warning-focus-border-color: color-warning-700,
checkbox-warning-hover-background-color: color-warning-400,
checkbox-warning-hover-border-color: color-warning-400,
@@ -1179,13 +1187,13 @@ $theme: (
checkbox-warning-active-border-color: color-warning-600,
checkbox-danger-background-color: color-danger-200,
- checkbox-danger-border-color: color-danger,
- checkbox-danger-checked-background-color: color-danger,
- checkbox-danger-checked-border-color: color-danger,
- checkbox-danger-checked-checkmark-color: color-white,
- checkbox-danger-indeterminate-background-color: color-danger,
- checkbox-danger-indeterminate-border-color: color-danger,
- checkbox-danger-indeterminate-checkmark-color: color-white,
+ 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-checked-checkmark-color: color-alternate,
+ checkbox-danger-indeterminate-background-color: color-danger-500,
+ checkbox-danger-indeterminate-border-color: color-danger-500,
+ checkbox-danger-indeterminate-checkmark-color: color-alternate,
checkbox-danger-focus-border-color: color-danger-700,
checkbox-danger-hover-background-color: color-danger-400,
checkbox-danger-hover-border-color: color-danger-400,
@@ -1193,13 +1201,13 @@ $theme: (
checkbox-danger-active-border-color: color-danger-600,
checkbox-info-background-color: color-info-200,
- checkbox-info-border-color: color-info,
- checkbox-info-checked-background-color: color-info,
- checkbox-info-checked-border-color: color-info,
- checkbox-info-checked-checkmark-color: color-white,
- checkbox-info-indeterminate-background-color: color-info,
- checkbox-info-indeterminate-border-color: color-info,
- checkbox-info-indeterminate-checkmark-color: color-white,
+ 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-checked-checkmark-color: color-alternate,
+ checkbox-info-indeterminate-background-color: color-info-500,
+ checkbox-info-indeterminate-border-color: color-info-500,
+ checkbox-info-indeterminate-checkmark-color: color-alternate,
checkbox-info-focus-border-color: color-info-700,
checkbox-info-hover-background-color: color-info-400,
checkbox-info-hover-border-color: color-info-400,
@@ -1230,16 +1238,16 @@ $theme: (
badge-text-line-height: text-button-tiny-line-height,
badge-padding: 0.25rem 0.4rem,
- badge-primary-background-color: color-primary,
- badge-primary-text-color: text-light-color,
- badge-success-background-color: color-success,
- badge-success-text-color: text-light-color,
- badge-info-background-color: color-info,
- badge-info-text-color: text-light-color,
- badge-warning-background-color: color-warning,
- badge-warning-text-color: text-light-color,
- badge-danger-background-color: color-danger,
- badge-danger-text-color: text-light-color,
+ 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,
progress-bar-animation-duration: 400ms,
progress-bar-border-radius: radius,
@@ -1266,31 +1274,31 @@ $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: color-basic-200,
- progress-bar-primary-filled-background-color: color-primary,
- progress-bar-primary-text-color: text-light-color,
- progress-bar-success-background-color: color-basic-200,
- progress-bar-success-filled-background-color: color-success,
- progress-bar-success-text-color: text-light-color,
- progress-bar-info-background-color: color-basic-200,
- progress-bar-info-filled-background-color: color-info,
- progress-bar-info-text-color: text-light-color,
- progress-bar-warning-background-color: color-basic-200,
- progress-bar-warning-filled-background-color: color-warning,
- progress-bar-warning-text-color: text-light-color,
- progress-bar-danger-background-color: color-basic-200,
- progress-bar-danger-filled-background-color: color-danger,
- progress-bar-danger-text-color: text-light-color,
-
- alert-background-color: color-basic-100,
+ 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,
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: none,
- alert-text-color: text-dark-color,
+ alert-shadow: shadow,
+ 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,
@@ -1305,45 +1313,45 @@ $theme: (
alert-large-height: 8.25rem,
alert-giant-height: 9.5rem,
- alert-primary-background-color: color-primary,
- alert-primary-text-color: text-light-color,
- alert-success-background-color: color-success,
- alert-success-text-color: text-light-color,
- alert-info-background-color: color-info,
- alert-info-text-color: text-light-color,
- alert-warning-background-color: color-warning,
- alert-warning-text-color: text-light-color,
- alert-danger-background-color: color-danger,
- alert-danger-text-color: text-light-color,
-
- alert-accent-primary-color: color-primary,
- alert-accent-info-color: color-info,
- alert-accent-success-color: color-success,
- alert-accent-warning-color: color-warning,
- alert-accent-danger-color: color-danger,
-
- alert-outline-primary-color: color-primary,
- alert-outline-info-color: color-info,
- alert-outline-success-color: color-success,
- alert-outline-warning-color: color-warning,
- alert-outline-danger-color: color-danger,
-
- chat-background-color: color-white,
+ 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-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,
+
+ chat-background-color: background-primary-color-1,
chat-border: none,
chat-border-radius: radius,
- chat-shadow: none,
+ chat-shadow: shadow,
chat-padding: 1rem 1.25rem,
chart-scrollbar-color: scrollbar-color,
chart-scrollbar-background-color: scrollbar-background-color,
chart-scrollbar-width: scrollbar-width,
- chat-text-color: text-dark-color,
+ chat-text-color: text-color,
chat-text-font-family: text-paragraph-font-family,
chat-text-font-size: text-paragraph-font-size,
chat-text-font-weight: text-paragraph-font-weight,
chat-text-line-height: text-paragraph-line-height,
- chat-header-text-color: text-dark-color,
+ chat-header-text-color: text-color,
chat-header-text-font-family: text-subtitle-font-family,
chat-header-text-font-size: text-subtitle-font-size,
chat-header-text-font-weight: text-subtitle-font-weight,
@@ -1355,53 +1363,51 @@ $theme: (
chat-large-height: 36rem,
chat-giant-height: 43.5rem,
- chat-primary-background-color: color-primary,
- chat-primary-text-color: text-light-color,
- chat-success-background-color: color-success,
- chat-success-text-color: text-light-color,
- chat-info-background-color: color-info,
- chat-info-text-color: text-light-color,
- chat-warning-background-color: color-warning,
- chat-warning-text-color: text-light-color,
- chat-danger-background-color: color-danger,
- chat-danger-text-color: text-light-color,
-
- chat-divider-color: divider-color,
+ 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: color-white,
- chat-message-reply-background-color: color-bg-active,
- chat-message-reply-text-color: color-fg-text,
- chat-message-avatar-background-color: color-basic,
+ chat-message-text-color: text-alternate-color,
+ chat-message-reply-background-color: background-primary-color-4,
+ 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: color-bg-active,
- chat-message-quote-text-color: color-fg,
- chat-message-file-text-color: color-fg,
+ chat-message-quote-background-color: background-primary-color-4,
+ 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: color-white,
+ spinner-circle-filled-color: background-primary-color-1,
spinner-circle-empty-color: transparent,
- spinner-text-color: text-dark-color,
+ spinner-text-color: text-color,
spinner-text-font-family: text-paragraph-font-family,
spinner-text-font-size: text-paragraph-font-size,
spinner-text-font-weight: text-paragraph-font-weight,
spinner-text-line-height: text-paragraph-line-height,
- spinner-primary-circle-filled-color: color-primary,
+ spinner-primary-circle-filled-color: color-primary-500,
spinner-primary-circle-empty-color: transparent,
- spinner-info-circle-filled-color: color-info,
+ spinner-info-circle-filled-color: color-info-500,
spinner-info-circle-empty-color: transparent,
- spinner-success-circle-filled-color: color-success,
+ spinner-success-circle-filled-color: color-success-500,
spinner-success-circle-empty-color: transparent,
- spinner-warning-circle-filled-color: color-warning,
+ spinner-warning-circle-filled-color: color-warning-500,
spinner-warning-circle-empty-color: transparent,
- spinner-danger-circle-filled-color: color-danger,
+ spinner-danger-circle-filled-color: color-danger-500,
spinner-danger-circle-empty-color: transparent,
- spinner-white-circle-filled-color: color-white,
- spinner-white-circle-empty-color: transparent,
spinner-height-tiny: 1.5rem,
spinner-height-small: 1.75rem,
@@ -1415,20 +1421,20 @@ $theme: (
stepper-step-text-font-weight: text-paragraph-font-weight,
stepper-step-text-line-height: text-paragraph-line-height,
stepper-step-active-text-color: text-primary-active-color,
- stepper-step-completed-text-color: color-primary,
+ stepper-step-completed-text-color: text-primary-color,
- stepper-step-index-border-color: color-basic-600,
+ stepper-step-index-border-color: border-primary-color-3,
stepper-step-index-border-style: solid,
stepper-step-index-border-width: 0.125rem,
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,
- stepper-step-index-completed-border-color: color-primary,
- stepper-step-index-completed-text-color: text-light-color,
+ 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-connector-background-color: color-basic-600,
- stepper-connector-completed-background-color: color-primary,
+ stepper-connector-background-color: background-primary-color-4,
+ stepper-connector-completed-background-color: color-primary-500,
stepper-horizontal-connector-margin: 1rem,
stepper-vertical-connector-margin: 1rem,
@@ -1436,36 +1442,36 @@ $theme: (
accordion-border-radius: 0.75rem,
accordion-padding: padding,
- accordion-shadow: none,
- accordion-header-text-color: text-dark-color,
+ accordion-shadow: shadow,
+ accordion-header-text-color: text-color,
accordion-header-text-font-family: text-subtitle-font-family,
accordion-header-text-font-size: text-subtitle-font-size,
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: divider-color,
+ accordion-header-border-color: border-primary-color-3,
accordion-header-border-style: solid,
accordion-header-border-width: 1px,
- accordion-item-background-color: color-white,
- accordion-item-text-color: text-dark-color,
+ accordion-item-background-color: background-primary-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: divider-color,
+ list-item-border-color: border-primary-color-3,
list-item-padding: 1rem,
calendar-width: 21.875rem,
calendar-body-height: 25.625rem,
calendar-border-radius: radius,
- calendar-text-color: text-dark-color,
+ calendar-text-color: text-color,
calendar-text-font-family: text-paragraph-font-family,
calendar-text-font-size: text-paragraph-font-size,
calendar-text-font-weight: text-paragraph-font-weight,
calendar-text-line-height: text-paragraph-line-height,
- calendar-header-text-color: text-dark-color,
+ calendar-header-text-color: text-color,
calendar-header-text-font-family: text-heading-6-font-family,
calendar-header-title-text-font-size: text-heading-6-font-size,
calendar-header-title-text-font-weight: text-heading-6-font-weight,
@@ -1478,25 +1484,25 @@ $theme: (
calendar-cell-inactive-text-color: text-disabled-color,
calendar-cell-in-range-background-color: color-primary-200,
- calendar-cell-disabled-background-color: color-basic-disabled,
+ calendar-cell-disabled-background-color: background-primary-color-3,
calendar-cell-disabled-text-color: text-disabled-color,
- calendar-cell-selected-background-color: color-primary,
- calendar-cell-selected-text-color: text-light-color,
+ calendar-cell-selected-background-color: color-primary-500,
+ calendar-cell-selected-text-color: text-alternate-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-light-color,
+ calendar-cell-hover-text-color: text-alternate-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,
calendar-cell-active-background-color: color-primary-active,
- calendar-cell-active-text-color: color-primary-active,
+ calendar-cell-active-text-color: text-primary-active-color,
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: color-basic,
- calendar-cell-today-text-color: text-dark-color,
+ calendar-cell-today-background-color: background-primary-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,
calendar-cell-today-text-line-height: text-subtitle-line-height,
@@ -1510,7 +1516,7 @@ $theme: (
calendar-weekday-width: calendar-day-cell-width,
calendar-weekday-height: 1.75rem,
- calendar-weekday-text-color: color-basic,
+ calendar-weekday-text-color: text-hint-color,
calendar-weekday-text-font-size: text-paragraph-2-font-size,
calendar-weekday-text-font-weight: text-paragraph-2-font-weight,
calendar-weekday-text-line-height: text-paragraph-2-line-height,
@@ -1527,35 +1533,36 @@ $theme: (
overlay-backdrop-background-color: rgba(0, 0, 0, 0.288),
- tooltip-background-color: color-black,
+ tooltip-background-color: color-basic-1000,
tooltip-border-color: transparent,
tooltip-border-style: dashed,
tooltip-border-width: 0,
tooltip-border-radius: 0.5rem,
tooltip-padding: 0.6rem 1rem 0.5rem,
- tooltip-text-color: color-white,
+ 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-max-width: 16rem,
- tooltip-primary-background-color: color-primary,
- tooltip-primary-text-color: text-light-color,
- tooltip-info-background-color: color-info,
- tooltip-info-text-color: text-light-color,
- tooltip-success-background-color: color-success,
- tooltip-success-text-color: text-light-color,
- tooltip-warning-background-color: color-warning,
- tooltip-warning-text-color: text-light-color,
- tooltip-danger-background-color: color-danger,
- tooltip-danger-text-color: text-light-color,
- tooltip-shadow: none,
+ 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-shadow: shadow,
select-cursor: pointer,
select-disabled-cursor: default,
select-min-width: 13rem,
select-options-list-max-height: 20rem,
+ select-options-list-shadow: shadow,
select-outline-width: outline-width,
select-outline-color: outline-color,
@@ -1563,15 +1570,15 @@ $theme: (
select-text-font-weight: text-subtitle-font-weight,
select-placeholder-text-font-weight: text-paragraph-font-weight,
- select-option-background-color: color-white,
- select-option-text-color: text-dark-color,
- select-option-selected-background-color: color-white,
+ select-option-background-color: background-primary-color-1,
+ select-option-text-color: text-color,
+ select-option-selected-background-color: background-primary-color-1,
select-option-selected-text-color: text-primary-color,
- select-option-focus-background-color: color-white,
+ select-option-focus-background-color: background-primary-color-1,
select-option-focus-text-color: text-primary-focus-color,
- select-option-hover-background-color: color-white,
+ select-option-hover-background-color: background-primary-color-1,
select-option-hover-text-color: text-primary-hover-color,
- select-option-disabled-background-color: color-white,
+ select-option-disabled-background-color: background-primary-color-1,
select-option-disabled-text-color: text-disabled-color,
select-tiny-text-font-size: text-button-tiny-font-size,
@@ -1589,17 +1596,17 @@ $theme: (
select-semi-round-border-radius: 0.75rem,
select-round-border-radius: 1.5rem,
- select-outline-background-color: color-basic-100,
- select-outline-border-color: color-basic-100,
+ select-outline-background-color: background-primary-color-2,
+ select-outline-border-color: border-primary-color-2,
select-outline-border-style: solid,
select-outline-border-width: 0.125rem,
- select-outline-text-color: text-dark-color,
- select-outline-placeholder-text-color: color-basic-600,
+ 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-border-color: color-basic-disabled,
- select-outline-disabled-background-color: color-basic-disabled,
+ select-outline-disabled-background-color: background-primary-color-1,
+ select-outline-disabled-border-color: border-primary-color-2,
select-outline-disabled-text-color: text-disabled-color,
select-outline-tiny-padding: 0.25rem 0.625rem,
@@ -1608,25 +1615,30 @@ $theme: (
select-outline-large-padding: 0.75rem 1.125rem,
select-outline-giant-padding: 0.875rem 1.375rem,
- select-outline-primary-border-color: color-primary,
+ select-outline-primary-border-color: color-primary-500,
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,
+ select-outline-success-border-color: color-success-500,
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,
+ select-outline-info-border-color: color-info-500,
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,
+ select-outline-warning-border-color: color-warning-500,
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,
+ select-outline-danger-border-color: color-danger-500,
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,
select-option-outline-tiny-padding: select-outline-tiny-padding,
select-option-outline-small-padding: select-outline-small-padding,
@@ -1640,18 +1652,18 @@ $theme: (
select-group-option-outline-large-start-padding: 2.25rem,
select-group-option-outline-giant-start-padding: 2.75rem,
- select-filled-background-color: color-basic-100,
- select-filled-border-color: color-basic-100,
+ select-filled-background-color: background-primary-color-2,
+ select-filled-border-color: background-primary-color-2,
select-filled-border-style: solid,
select-filled-border-width: 0.125rem,
- select-filled-text-color: text-dark-color,
- select-filled-placeholder-text-color: text-dark-color,
+ 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: color-basic-disabled,
- select-filled-disabled-border-color: color-basic-disabled,
+ select-filled-disabled-background-color: background-primary-color-1,
+ select-filled-disabled-border-color: border-primary-color-2,
select-filled-disabled-text-color: text-disabled-color,
select-filled-tiny-padding: 0.25rem 0.625rem,
@@ -1660,10 +1672,10 @@ $theme: (
select-filled-large-padding: 0.75rem 1.125rem,
select-filled-giant-padding: 0.875rem 1.375rem,
- select-filled-primary-background-color: color-primary,
- select-filled-primary-border-color: color-primary,
- select-filled-primary-text-color: text-light-color,
- select-filled-primary-placeholder-text-color: text-light-color,
+ 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-focus-background-color: color-primary-focus,
select-filled-primary-focus-border-color: color-primary-focus,
@@ -1671,11 +1683,12 @@ $theme: (
select-filled-primary-hover-border-color: color-primary-hover,
select-filled-primary-disabled-background-color: color-primary-disabled,
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,
- select-filled-success-border-color: color-success,
- select-filled-success-text-color: text-light-color,
- select-filled-success-placeholder-text-color: text-light-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-focus-background-color: color-success-focus,
select-filled-success-focus-border-color: color-success-focus,
@@ -1683,11 +1696,12 @@ $theme: (
select-filled-success-hover-border-color: color-success-hover,
select-filled-success-disabled-background-color: color-success-disabled,
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,
- select-filled-info-border-color: color-info,
- select-filled-info-text-color: text-light-color,
- select-filled-info-placeholder-text-color: text-light-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-focus-background-color: color-info-focus,
select-filled-info-focus-border-color: color-info-focus,
@@ -1695,11 +1709,12 @@ $theme: (
select-filled-info-hover-border-color: color-info-hover,
select-filled-info-disabled-background-color: color-info-disabled,
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,
- select-filled-warning-border-color: color-warning,
- select-filled-warning-text-color: text-light-color,
- select-filled-warning-placeholder-text-color: text-light-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-focus-background-color: color-warning-focus,
select-filled-warning-focus-border-color: color-warning-focus,
@@ -1707,11 +1722,12 @@ $theme: (
select-filled-warning-hover-border-color: color-warning-hover,
select-filled-warning-disabled-background-color: color-warning-disabled,
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,
- select-filled-danger-border-color: color-danger,
- select-filled-danger-text-color: text-light-color,
- select-filled-danger-placeholder-text-color: text-light-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-focus-background-color: color-danger-focus,
select-filled-danger-focus-border-color: color-danger-focus,
@@ -1719,6 +1735,7 @@ $theme: (
select-filled-danger-hover-border-color: color-danger-hover,
select-filled-danger-disabled-background-color: color-danger-disabled,
select-filled-danger-disabled-border-color: color-danger-disabled,
+ select-filled-danger-disabled-text-color: text-danger-disabled-color,
select-option-filled-tiny-padding: select-filled-tiny-padding,
select-group-option-filled-tiny-padding-start: 1.125rem,
@@ -1732,19 +1749,19 @@ $theme: (
select-group-option-filled-giant-padding-start: 2.75rem,
select-hero-left-background-color: color-basic-400,
- select-hero-right-background-color: color-basic,
+ select-hero-right-background-color: color-basic-500,
select-hero-border-color: transparent,
select-hero-border-style: solid,
select-hero-border-width: 0,
- select-hero-text-color: text-dark-color,
- select-hero-placeholder-text-color: text-dark-color,
+ 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: color-basic-100,
- select-hero-disabled-right-background-color: color-basic-200,
+ select-hero-disabled-left-background-color: background-primary-color-3,
+ select-hero-disabled-right-background-color: background-primary-color-3,
select-hero-disabled-text-color: text-disabled-color,
select-hero-tiny-padding: 0.375rem 0.625rem,
@@ -1754,9 +1771,9 @@ $theme: (
select-hero-giant-padding: 1rem 1.375rem,
select-hero-primary-left-background-color: color-primary-400,
- select-hero-primary-right-background-color: color-primary,
- select-hero-primary-text-color: text-light-color,
- select-hero-primary-placeholder-text-color: text-light-color,
+ 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-focus-left-background-color: color-primary-700,
select-hero-primary-focus-right-background-color: color-primary-800,
@@ -1764,12 +1781,12 @@ $theme: (
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-text-color: text-disabled-color,
+ 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,
- select-hero-success-text-color: text-light-color,
- select-hero-success-placeholder-text-color: text-light-color,
+ 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-focus-left-background-color: color-success-700,
select-hero-success-focus-right-background-color: color-success-800,
@@ -1777,12 +1794,12 @@ $theme: (
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-text-color: text-disabled-color,
+ 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,
- select-hero-info-text-color: text-light-color,
- select-hero-info-placeholder-text-color: text-light-color,
+ 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-focus-left-background-color: color-info-700,
select-hero-info-focus-right-background-color: color-info-800,
@@ -1790,12 +1807,12 @@ $theme: (
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-text-color: text-disabled-color,
+ 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,
- select-hero-warning-text-color: text-light-color,
- select-hero-warning-placeholder-text-color: text-light-color,
+ 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-focus-left-background-color: color-warning-700,
select-hero-warning-focus-right-background-color: color-warning-800,
@@ -1803,12 +1820,12 @@ $theme: (
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-text-color: text-disabled-color,
+ 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,
- select-hero-danger-text-color: text-light-color,
- select-hero-danger-placeholder-text-color: text-light-color,
+ 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-focus-left-background-color: color-danger-700,
select-hero-danger-focus-right-background-color: color-danger-800,
@@ -1816,7 +1833,7 @@ $theme: (
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-text-color: text-disabled-color,
+ select-hero-danger-disabled-text-color: text-danger-disabled-color,
select-option-hero-tiny-padding: select-hero-tiny-padding,
select-group-option-hero-tiny-padding-start: 1.125rem,
@@ -1829,11 +1846,11 @@ $theme: (
select-option-hero-giant-padding: select-hero-giant-padding,
select-group-option-hero-giant-padding-start: 2.75rem,
- datepicker-text-color: text-dark-color,
- datepicker-background-color: color-white,
- datepicker-border-color: color-primary,
+ datepicker-text-color: text-color,
+ datepicker-background-color: background-primary-color-1,
+ datepicker-border-color: color-primary-500,
datepicker-border-radius: 0.75rem,
- datepicker-shadow: none,
+ datepicker-shadow: shadow,
datepicker-arrow-size: 0.6875rem,
radio-width: 1.125rem,
@@ -1841,7 +1858,7 @@ $theme: (
radio-background-color: transparent,
radio-border-style: solid,
radio-border-width: 0.0625rem,
- radio-text-color: text-dark-color,
+ radio-text-color: text-color,
radio-text-font-family: text-subtitle-font-family,
radio-text-font-size: text-subtitle-font-size,
radio-text-font-weight: text-subtitle-font-weight,
@@ -1849,12 +1866,12 @@ $theme: (
radio-outline-color: outline-color,
radio-outline-width: outline-width,
- radio-disabled-border-color: color-basic,
+ radio-disabled-border-color: border-primary-color-4,
radio-disabled-text-color: text-disabled-color,
- radio-disabled-inner-circle-color: color-basic,
+ radio-disabled-inner-circle-color: border-primary-color-4,
- radio-primary-border-color: color-primary,
- radio-primary-inner-circle-color: color-primary,
+ radio-primary-border-color: color-primary-500,
+ radio-primary-inner-circle-color: color-primary-500,
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,
@@ -1862,8 +1879,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,
- radio-success-inner-circle-color: color-success,
+ radio-success-border-color: color-success-500,
+ radio-success-inner-circle-color: color-success-500,
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,
@@ -1871,8 +1888,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,
- radio-warning-inner-circle-color: color-warning,
+ radio-warning-border-color: color-warning-500,
+ radio-warning-inner-circle-color: color-warning-500,
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,
@@ -1880,8 +1897,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,
- radio-danger-inner-circle-color: color-danger,
+ radio-danger-border-color: color-danger-500,
+ radio-danger-inner-circle-color: color-danger-500,
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,
@@ -1889,8 +1906,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,
- radio-info-inner-circle-color: color-info,
+ radio-info-border-color: color-info-500,
+ radio-info-inner-circle-color: color-info-500,
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,
@@ -1900,34 +1917,34 @@ $theme: (
tree-grid-cell-border-width: 0.0625rem,
tree-grid-cell-border-style: solid,
- tree-grid-cell-border-color: divider-color,
+ tree-grid-cell-border-color: border-primary-color-2,
tree-grid-row-min-height: 2rem,
tree-grid-cell-padding: 0.875rem 1.25rem,
- tree-grid-header-background: color-white,
- tree-grid-header-text-color: text-dark-color,
+ tree-grid-header-background-color: background-primary-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: tree-grid-header-background,
- tree-grid-footer-text-color: text-dark-color,
+ tree-grid-footer-background-color: background-primary-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-white,
- tree-grid-row-even-background: color-white,
- tree-grid-row-hover-background: color-white,
- tree-grid-row-text-color: text-dark-color,
+ 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-text-color: text-color,
tree-grid-row-text-font-family: text-paragraph-font-family,
tree-grid-row-text-font-size: text-paragraph-font-size,
tree-grid-row-text-font-weight: text-paragraph-font-weight,
tree-grid-row-text-line-height: text-paragraph-line-height,
- tree-grid-sort-header-button-background: transparent,
+ tree-grid-sort-header-button-background-color: transparent,
tree-grid-sort-header-button-border: none,
tree-grid-sort-header-button-padding: 0,
@@ -1935,11 +1952,11 @@ $theme: (
icon-line-height: 1,
icon-width: 1em,
icon-height: 1em,
- icon-primary-color: color-primary,
- icon-info-color: color-info,
- icon-success-color: color-success,
- icon-warning-color: color-warning,
- icon-danger-color: color-danger,
+ 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,
);
// register the theme
diff --git a/src/playground/with-layout/checkbox/checkbox-disabled.component.html b/src/playground/with-layout/checkbox/checkbox-disabled.component.html
index bdcf9999f6..9226539920 100644
--- a/src/playground/with-layout/checkbox/checkbox-disabled.component.html
+++ b/src/playground/with-layout/checkbox/checkbox-disabled.component.html
@@ -1,3 +1,7 @@
-Disabled
-Indeterminate disabled
-Checked disabled
+
+
+ Disabled
+ Indeterminate disabled
+ Checked disabled
+
+
diff --git a/src/playground/with-layout/checkbox/checkbox-showcase.component.html b/src/playground/with-layout/checkbox/checkbox-showcase.component.html
index 3836eea2ea..5b59897ade 100644
--- a/src/playground/with-layout/checkbox/checkbox-showcase.component.html
+++ b/src/playground/with-layout/checkbox/checkbox-showcase.component.html
@@ -1 +1,5 @@
-Toggle me
+
+
+ Toggle me
+
+
diff --git a/src/playground/with-layout/checkbox/checkbox-status.component.html b/src/playground/with-layout/checkbox/checkbox-status.component.html
index 6e607f4322..92284a23e0 100644
--- a/src/playground/with-layout/checkbox/checkbox-status.component.html
+++ b/src/playground/with-layout/checkbox/checkbox-status.component.html
@@ -1,6 +1,9 @@
-Primary
-Success
-Danger
-Warning
-Info
-
+
+
+ Primary
+ Success
+ Danger
+ Warning
+ Info
+
+
diff --git a/src/playground/with-layout/checkbox/checkbox.module.ts b/src/playground/with-layout/checkbox/checkbox.module.ts
index 9076f7684a..5844256f4c 100644
--- a/src/playground/with-layout/checkbox/checkbox.module.ts
+++ b/src/playground/with-layout/checkbox/checkbox.module.ts
@@ -6,7 +6,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { NbCheckboxModule } from '@nebular/theme';
+import { NbCardModule, NbCheckboxModule } from '@nebular/theme';
import { CheckboxRoutingModule } from './checkbox-routing.module';
import { CheckboxDisabledComponent } from './checkbox-disabled.component';
import { CheckboxShowcaseComponent } from './checkbox-showcase.component';
@@ -22,6 +22,6 @@ import { CheckboxIndeterminateComponent } from './checkbox-indeterminate.compone
CheckboxTestComponent,
CheckboxIndeterminateComponent,
],
- imports: [ CommonModule, NbCheckboxModule, CheckboxRoutingModule ],
+ imports: [ CommonModule, NbCardModule, NbCheckboxModule, CheckboxRoutingModule ],
})
export class CheckboxModule {}
diff --git a/src/playground/with-layout/input/input-component.scss b/src/playground/with-layout/input/input-component.scss
index a5fb0c1813..5abc66f783 100644
--- a/src/playground/with-layout/input/input-component.scss
+++ b/src/playground/with-layout/input/input-component.scss
@@ -1,3 +1,7 @@
[nbInput] {
margin-bottom: 1rem;
+
+ &:not(:last-child):not(.input-full-width) {
+ margin-right: 1rem;
+ }
}
diff --git a/src/playground/with-layout/input/input-showcase.component.ts b/src/playground/with-layout/input/input-showcase.component.ts
index bfe3cf6d48..13dc238697 100644
--- a/src/playground/with-layout/input/input-showcase.component.ts
+++ b/src/playground/with-layout/input/input-showcase.component.ts
@@ -11,6 +11,7 @@ import { Component } from '@angular/core';
+
`,
diff --git a/src/playground/with-layout/list/simple-list-showcase.component.scss b/src/playground/with-layout/list/simple-list-showcase.component.scss
index c897e948a5..72f44cff94 100644
--- a/src/playground/with-layout/list/simple-list-showcase.component.scss
+++ b/src/playground/with-layout/list/simple-list-showcase.component.scss
@@ -1,4 +1,5 @@
nb-card {
+ min-width: 10rem;
max-width: 20rem;
margin: 0 auto;
}
diff --git a/src/playground/with-layout/select/select-hero.component.html b/src/playground/with-layout/select/select-hero.component.html
index 834b90fa19..81c6351503 100644
--- a/src/playground/with-layout/select/select-hero.component.html
+++ b/src/playground/with-layout/select/select-hero.component.html
@@ -1,5 +1,20 @@
+
+
+ Option 1
+ Option 2
+ Option 3
+ Option 4
+
+
+
+ Option 1
+ Option 2
+ Option 3
+ Option 4
+
+
Option 1
Option 2
diff --git a/src/playground/without-layout/playground-base.component.ts b/src/playground/without-layout/playground-base.component.ts
index 94dac7ca41..39c8d3b533 100644
--- a/src/playground/without-layout/playground-base.component.ts
+++ b/src/playground/without-layout/playground-base.component.ts
@@ -6,7 +6,7 @@
import { Component, OnInit } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
-import 'style-loader!../styles/styles.scss';
+// import 'style-loader!../styles/styles.scss';
@Component({
diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.ts b/src/playground/without-styles/bootstrap/bootstrap-test.component.ts
index 96fc669918..74b02b610e 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.ts
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.ts
@@ -7,7 +7,7 @@
import { Component, OnInit } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
-import 'style-loader!./styles.scss';
+// import 'style-loader!./styles.scss';
@Component({
selector: 'nb-bootstrap-test',