diff --git a/docs/articles/design-system/theme.md b/docs/articles/design-system/theme.md
index 30dce50412..0726b2cd94 100644
--- a/docs/articles/design-system/theme.md
+++ b/docs/articles/design-system/theme.md
@@ -53,7 +53,7 @@ Each theme is divided into the following semantic groups:
## Colors
-All available color within the theme. 5 semantic colors (`primary`, `success`, `info`, `warning`, `danger`) and `basic` color (backgrounds and texts).
+All available color within the theme. 5 semantic colors (`primary`, `success`, `info`, `warning`, `danger`), 6 transparency levels for every default semantic color (8%, 16%, 24%, 32%, 40%, 48%) and `basic` color (backgrounds and texts).
Each color has a pallet of 9 shades, except for `basic`, which has 11 shades. These colors mostly used by `status` variants of the components.
Primary color shades:
@@ -67,6 +67,13 @@ color-primary-600: #284de0,
color-primary-700: #2541cc,
color-primary-800: #192f9e,
color-primary-900: #14236e,
+
+color-primary-transparent-100: rgba(51, 102, 255, 0.08),
+color-primary-transparent-200: rgba(51, 102, 255, 0.16),
+color-primary-transparent-300: rgba(51, 102, 255, 0.24),
+color-primary-transparent-400: rgba(51, 102, 255, 0.32),
+color-primary-transparent-500: rgba(51, 102, 255, 0.40),
+color-primary-transparent-600: rgba(51, 102, 255, 0.48),
```
You can also tune colors used for element states:
diff --git a/e2e/layout-theme.e2e-spec.ts b/e2e/layout-theme.e2e-spec.ts
index 4b94f03391..a44d4425ff 100644
--- a/e2e/layout-theme.e2e-spec.ts
+++ b/e2e/layout-theme.e2e-spec.ts
@@ -57,7 +57,7 @@ describe('nb-layout theme', () => {
expect(value).toEqual(themeDefault);
});
cardHeader.getCssValue('color').then(value => {
- expect(value).toEqual('rgba(26, 33, 56, 1)');
+ expect(value).toEqual('rgba(25, 32, 56, 1)');
});
cardHeader.getCssValue('text-decoration').then(value => {
expect(value).toMatch('none');
diff --git a/src/framework/theme/components/button/_button-filled.scss b/src/framework/theme/components/button/_button-filled.scss
index 051b9ae30e..c4db38d42e 100644
--- a/src/framework/theme/components/button/_button-filled.scss
+++ b/src/framework/theme/components/button/_button-filled.scss
@@ -23,6 +23,7 @@
color: nb-theme(button-filled-#{$status}-text-color);
&:focus {
+ background-color: nb-theme(button-filled-#{$status}-focus-background-color);
border-color: nb-theme(button-filled-#{$status}-focus-border-color);
}
diff --git a/src/framework/theme/components/button/_button-ghost.scss b/src/framework/theme/components/button/_button-ghost.scss
index 4b5d60b3ee..e8b970d228 100644
--- a/src/framework/theme/components/button/_button-ghost.scss
+++ b/src/framework/theme/components/button/_button-ghost.scss
@@ -23,18 +23,26 @@
color: nb-theme(button-ghost-#{$status}-text-color);
&:focus {
+ background-color: nb-theme(button-ghost-#{$status}-focus-background-color);
+ border-color: nb-theme(button-ghost-#{$status}-focus-border-color);
color: nb-theme(button-ghost-#{$status}-focus-text-color);
}
&:hover {
- color: nb-theme(button-ghost-#{$status}-hover-color);
+ background-color: nb-theme(button-ghost-#{$status}-hover-background-color);
+ border-color: nb-theme(button-ghost-#{$status}-hover-border-color);
+ color: nb-theme(button-ghost-#{$status}-hover-text-color);
}
&:active {
+ background-color: nb-theme(button-ghost-#{$status}-active-background-color);
+ border-color: nb-theme(button-ghost-#{$status}-active-border-color);
color: nb-theme(button-ghost-#{$status}-active-text-color);
}
&[disabled] {
+ background-color: nb-theme(button-ghost-#{$status}-disabled-background-color);
+ border-color: nb-theme(button-ghost-#{$status}-disabled-border-color);
color: nb-theme(button-ghost-#{$status}-disabled-text-color);
}
}
diff --git a/src/framework/theme/components/button/_button-outline.scss b/src/framework/theme/components/button/_button-outline.scss
index ed7bf8c593..7eec61f6fa 100644
--- a/src/framework/theme/components/button/_button-outline.scss
+++ b/src/framework/theme/components/button/_button-outline.scss
@@ -23,21 +23,25 @@
color: nb-theme(button-outline-#{$status}-text-color);
&:focus {
+ background-color: nb-theme(button-outline-#{$status}-focus-background-color);
border-color: nb-theme(button-outline-#{$status}-focus-border-color);
color: nb-theme(button-outline-#{$status}-focus-text-color);
}
&:hover {
+ background-color: nb-theme(button-outline-#{$status}-hover-background-color);
border-color: nb-theme(button-outline-#{$status}-hover-border-color);
color: nb-theme(button-outline-#{$status}-hover-text-color);
}
&:active {
+ background-color: nb-theme(button-outline-#{$status}-active-background-color);
border-color: nb-theme(button-outline-#{$status}-active-border-color);
color: nb-theme(button-outline-#{$status}-active-text-color);
}
&[disabled] {
+ background-color: nb-theme(button-outline-#{$status}-disabled-background-color);
border-color: nb-theme(button-outline-#{$status}-disabled-border-color);
color: nb-theme(button-outline-#{$status}-disabled-text-color);
}
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
index 259d958847..697e3a4498 100644
--- a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
+++ b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -35,18 +35,37 @@
}
}
- .native-input:focus + .custom-checkbox {
- border-color: nb-theme(checkbox-primary-focus-border-color);
+ .native-input:enabled:focus + .custom-checkbox {
+ background-color: nb-theme(checkbox-focus-background-color);
+ border-color: nb-theme(checkbox-focus-border-color);
+
+ &.indeterminate,
+ &.checked {
+ background-color: nb-theme(checkbox-primary-focus-checked-background-color);
+ border-color: nb-theme(checkbox-primary-focus-checked-border-color);
+ }
}
.custom-checkbox:hover {
- background-color: nb-theme(checkbox-primary-hover-background-color);
- border-color: nb-theme(checkbox-primary-hover-border-color);
+ background-color: nb-theme(checkbox-hover-background-color);
+ border-color: nb-theme(checkbox-hover-border-color);
+
+ &.indeterminate,
+ &.checked {
+ background-color: nb-theme(checkbox-primary-hover-checked-background-color);
+ border-color: nb-theme(checkbox-primary-hover-checked-border-color);
+ }
}
- .native-input:active + .custom-checkbox {
- background-color: nb-theme(checkbox-primary-active-background-color);
- border-color: nb-theme(checkbox-primary-active-border-color);
+ .native-input:enabled:active + .custom-checkbox {
+ background-color: nb-theme(checkbox-active-background-color);
+ border-color: nb-theme(checkbox-active-border-color);
+
+ &.indeterminate,
+ &.checked {
+ background-color: nb-theme(checkbox-primary-active-checked-background-color);
+ border-color: nb-theme(checkbox-primary-active-checked-border-color);
+ }
}
.native-input:focus + .custom-checkbox {
@@ -65,6 +84,10 @@
& ~ .text {
color: nb-theme(checkbox-disabled-text-color);
}
+ &:indeterminate + .custom-checkbox,
+ &:checked + .custom-checkbox {
+ background-color: nb-theme(checkbox-disabled-checked-background-color);
+ }
}
nb-icon {
@@ -114,18 +137,37 @@
}
}
- .native-input:focus + .custom-checkbox {
+ .native-input:enabled:focus + .custom-checkbox {
+ background-color: nb-theme(checkbox-#{$status}-focus-background-color);
border-color: nb-theme(checkbox-#{$status}-focus-border-color);
+
+ &.indeterminate,
+ &.checked {
+ background-color: nb-theme(checkbox-#{$status}-focus-checked-background-color);
+ border-color: nb-theme(checkbox-#{$status}-focus-checked-border-color);
+ }
}
.custom-checkbox:hover {
background-color: nb-theme(checkbox-#{$status}-hover-background-color);
border-color: nb-theme(checkbox-#{$status}-hover-border-color);
+
+ &.indeterminate,
+ &.checked {
+ background-color: nb-theme(checkbox-#{$status}-hover-checked-background-color);
+ border-color: nb-theme(checkbox-#{$status}-hover-checked-border-color);
+ }
}
- .native-input:active + .custom-checkbox {
+ .native-input:enabled:active + .custom-checkbox {
background-color: nb-theme(checkbox-#{$status}-active-background-color);
border-color: nb-theme(checkbox-#{$status}-active-border-color);
+
+ &.indeterminate,
+ &.checked {
+ background-color: nb-theme(checkbox-#{$status}-active-checked-background-color);
+ border-color: nb-theme(checkbox-#{$status}-active-checked-border-color);
+ }
}
.native-input:disabled {
@@ -140,6 +182,10 @@
& ~ .text {
color: nb-theme(checkbox-disabled-text-color);
}
+ &:indeterminate + .custom-checkbox,
+ &:checked + .custom-checkbox {
+ background-color: nb-theme(checkbox-disabled-checked-background-color);
+ }
}
}
}
diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss
index bd973e7065..706d6abe85 100644
--- a/src/framework/theme/components/radio/_radio.component.theme.scss
+++ b/src/framework/theme/components/radio/_radio.component.theme.scss
@@ -20,8 +20,10 @@
}
.native-input:enabled:checked + .outer-circle {
+ background-color: nb-theme(radio-primary-checked-background-color);
border-color: nb-theme(radio-primary-border-color);
}
+
.native-input:enabled:checked ~ .inner-circle {
background-color: nb-theme(radio-primary-inner-circle-color);;
}
@@ -30,15 +32,22 @@
border-color: nb-theme(radio-primary-focus-border-color);
box-shadow: 0 0 0 nb-theme(radio-outline-width) nb-theme(radio-outline-color);
}
+
.native-input:enabled:checked:focus ~ .inner-circle {
background-color: nb-theme(radio-primary-focus-inner-circle-color);
}
- label:hover .native-input:enabled + .outer-circle {
- border-color: nb-theme(radio-primary-hover-border-color);
- }
- label:hover .native-input:checked:enabled ~ .inner-circle {
- background-color: nb-theme(radio-primary-hover-inner-circle-color);
+ label:hover .native-input:enabled {
+ & + .outer-circle {
+ background-color: nb-theme(radio-primary-hover-background-color);
+ border-color: nb-theme(radio-primary-hover-border-color);
+ }
+ &:checked + .outer-circle {
+ background-color: nb-theme(radio-primary-hover-checked-background-color);
+ }
+ &:checked ~ .inner-circle {
+ background-color: nb-theme(radio-primary-hover-inner-circle-color);
+ }
}
label .native-input:enabled:active + .outer-circle {
@@ -48,21 +57,35 @@
background-color: nb-theme(radio-primary-active-inner-circle-color);
}
- .native-input:disabled + .outer-circle {
- background-color: nb-theme(radio-disabled-background-color);
- border-color: nb-theme(radio-disabled-border-color);
- }
- .native-input:disabled:checked ~ .inner-circle {
- background-color: nb-theme(radio-disabled-inner-circle-color);
- }
- .native-input:disabled ~ .text {
- color: nb-theme(radio-disabled-text-color);
+ .native-input:disabled {
+ & + .outer-circle {
+ background-color: nb-theme(radio-disabled-background-color);
+ border-color: nb-theme(radio-disabled-border-color);
+ }
+ & ~ .text {
+ color: nb-theme(radio-disabled-text-color);
+ }
+
+ &:checked {
+ & + .outer-circle {
+ background-color: nb-theme(radio-disabled-checked-background-color);
+ }
+ ~ .inner-circle {
+ background-color: nb-theme(radio-disabled-checked-inner-circle-color);
+ }
+ }
}
@each $status in nb-get-statuses() {
&.status-#{$status} .native-input:enabled + .outer-circle {
+ background-color: nb-theme(radio-#{$status}-background-color);
border-color: nb-theme(radio-#{$status}-border-color);
}
+
+ &.status-#{$status} .native-input:enabled:checked + .outer-circle {
+ background-color: nb-theme(radio-#{$status}-checked-background-color);
+ }
+
&.status-#{$status} .native-input:enabled:checked ~ .inner-circle {
background-color: nb-theme(radio-#{$status}-inner-circle-color);;
}
diff --git a/src/framework/theme/components/toggle/_toggle.component.theme.scss b/src/framework/theme/components/toggle/_toggle.component.theme.scss
index 705e6965ca..4da6a1e5ba 100644
--- a/src/framework/theme/components/toggle/_toggle.component.theme.scss
+++ b/src/framework/theme/components/toggle/_toggle.component.theme.scss
@@ -20,21 +20,37 @@
border-color: nb-theme(toggle-primary-checked-border-color);
}
- .native-input {
+ .native-input:enabled {
&:focus + .toggle {
- border-color: nb-theme(toggle-primary-focus-border-color);
+ background-color: nb-theme(toggle-focus-background-color);
+ border-color: nb-theme(toggle-focus-border-color);
box-shadow: 0 0 0 nb-theme(toggle-outline-width) nb-theme(toggle-outline-color);
+
+ &.checked {
+ background-color: nb-theme(toggle-primary-focus-checked-background-color);
+ border-color: nb-theme(toggle-primary-focus-checked-border-color);
+ }
}
&:active + .toggle {
- background-color: nb-theme(toggle-primary-active-background-color);
- border-color: nb-theme(toggle-primary-active-border-color);
+ background-color: nb-theme(toggle-active-background-color);
+ border-color: nb-theme(toggle-active-border-color);
+
+ &.checked {
+ background-color: nb-theme(toggle-primary-active-background-color);
+ border-color: nb-theme(toggle-primary-active-border-color);
+ }
}
}
- .toggle:hover {
- background-color: nb-theme(toggle-primary-hover-background-color);
- border-color: nb-theme(toggle-primary-hover-border-color);
+ .native-input:enabled + .toggle:hover {
+ background-color: nb-theme(toggle-hover-background-color);
+ border-color: nb-theme(toggle-hover-border-color);
+
+ &.checked {
+ background-color: nb-theme(toggle-primary-hover-checked-background-color);
+ border-color: nb-theme(toggle-primary-hover-checked-border-color);
+ }
}
.native-input:disabled {
@@ -43,8 +59,12 @@
border-color: nb-theme(toggle-disabled-border-color);
cursor: nb-theme(toggle-disabled-cursor);
- nb-icon {
- color: nb-theme(toggle-disabled-switcher-checkmark-color);
+ .toggle-switcher {
+ background-color: nb-theme(toggle-disabled-switcher-background-color);
+
+ nb-icon {
+ color: nb-theme(toggle-disabled-checked-switcher-checkmark-color);
+ }
}
}
@@ -90,20 +110,36 @@
border-color: nb-theme(toggle-#{$status}-checked-border-color);
}
- .native-input {
+ .native-input:enabled {
&:focus + .toggle {
+ background-color: nb-theme(toggle-#{$status}-focus-background-color);
border-color: nb-theme(toggle-#{$status}-focus-border-color);
+
+ &.checked {
+ background-color: nb-theme(toggle-#{$status}-focus-checked-background-color);
+ border-color: nb-theme(toggle-#{$status}-focus-checked-border-color);
+ }
}
&:active + .toggle {
background-color: nb-theme(toggle-#{$status}-active-background-color);
border-color: nb-theme(toggle-#{$status}-active-border-color);
+
+ &.checked {
+ background-color: nb-theme(toggle-#{$status}-active-background-color);
+ border-color: nb-theme(toggle-#{$status}-active-border-color);
+ }
}
}
- .toggle:hover {
+ .native-input:enabled + .toggle:hover {
background-color: nb-theme(toggle-#{$status}-hover-background-color);
border-color: nb-theme(toggle-#{$status}-hover-border-color);
+
+ &.checked {
+ background-color: nb-theme(toggle-#{$status}-hover-checked-background-color);
+ border-color: nb-theme(toggle-#{$status}-hover-checked-border-color);
+ }
}
.toggle-switcher {
@@ -116,9 +152,14 @@
& + .toggle {
background-color: nb-theme(toggle-disabled-background-color);
border-color: nb-theme(toggle-disabled-border-color);
+ cursor: nb-theme(toggle-disabled-cursor);
+
+ .toggle-switcher {
+ background-color: nb-theme(toggle-disabled-switcher-background-color);
- nb-icon {
- color: nb-theme(toggle-disabled-switcher-checkmark-color);
+ nb-icon {
+ color: nb-theme(toggle-disabled-checked-switcher-checkmark-color);
+ }
}
}
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
index 66f78c3d98..4882aaf9e7 100644
--- a/src/framework/theme/styles/themes/_cosmic.scss
+++ b/src/framework/theme/styles/themes/_cosmic.scss
@@ -20,6 +20,13 @@ $theme: (
color-primary-800: #3e2494,
color-primary-900: #29157a,
+ color-primary-transparent-100: rgba(161, 110, 255, 0.08),
+ color-primary-transparent-200: rgba(161, 110, 255, 0.16),
+ color-primary-transparent-300: rgba(161, 110, 255, 0.24),
+ color-primary-transparent-400: rgba(161, 110, 255, 0.32),
+ color-primary-transparent-500: rgba(161, 110, 255, 0.4),
+ color-primary-transparent-600: rgba(161, 110, 255, 0.48),
+
color-basic-100: #ffffff,
color-basic-200: #f7f7fc,
color-basic-300: #f0f0fa,
@@ -31,6 +38,13 @@ $theme: (
color-basic-900: #252547,
color-basic-1000: #1b1b38,
color-basic-1100: #13132b,
+
+ color-basic-transparent-100: rgba(180, 180, 219, 0.08),
+ color-basic-transparent-200: rgba(180, 180, 219, 0.16),
+ color-basic-transparent-300: rgba(180, 180, 219, 0.24),
+ color-basic-transparent-400: rgba(180, 180, 219, 0.32),
+ color-basic-transparent-500: rgba(180, 180, 219, 0.4),
+ color-basic-transparent-600: rgba(180, 180, 219, 0.48),
);
$nb-themes: nb-register-theme($theme, cosmic, dark);
diff --git a/src/framework/theme/styles/themes/_dark.scss b/src/framework/theme/styles/themes/_dark.scss
index 6d441b7c2f..7fae3d7647 100644
--- a/src/framework/theme/styles/themes/_dark.scss
+++ b/src/framework/theme/styles/themes/_dark.scss
@@ -34,7 +34,7 @@ $theme: (
text-basic-color: color-basic-100,
text-alternate-color: color-basic-900,
text-control-color: color-basic-100,
- text-disabled-color: color-basic-700,
+ text-disabled-color: color-basic-transparent-600,
text-hint-color: color-basic-600,
shadow: 0 0.5rem 1rem 0 #1a1f33,
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 5ac9e7f813..f3695ffa1e 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -27,6 +27,13 @@ $theme: (
color-primary-800: #102694,
color-primary-900: #091c7a,
+ color-primary-transparent-100: rgba(51, 102, 255, 0.08),
+ color-primary-transparent-200: rgba(51, 102, 255, 0.16),
+ color-primary-transparent-300: rgba(51, 102, 255, 0.24),
+ color-primary-transparent-400: rgba(51, 102, 255, 0.32),
+ color-primary-transparent-500: rgba(51, 102, 255, 0.4),
+ color-primary-transparent-600: rgba(51, 102, 255, 0.48),
+
color-success-100: #f0fff5,
color-success-200: #ccfce3,
color-success-300: #8cfac7,
@@ -35,7 +42,14 @@ $theme: (
color-success-600: #00b887,
color-success-700: #00997a,
color-success-800: #007d6c,
- color-success-900: #004a42,
+ color-success-900: #004a45,
+
+ color-success-transparent-100: rgba(0, 214, 143, 0.08),
+ color-success-transparent-200: rgba(0, 214, 143, 0.16),
+ color-success-transparent-300: rgba(0, 214, 143, 0.24),
+ color-success-transparent-400: rgba(0, 214, 143, 0.32),
+ color-success-transparent-500: rgba(0, 214, 143, 0.4),
+ color-success-transparent-600: rgba(0, 214, 143, 0.48),
color-info-100: #f2f8ff,
color-info-200: #c7e2ff,
@@ -47,6 +61,13 @@ $theme: (
color-info-800: #0041a8,
color-info-900: #002885,
+ color-info-transparent-100: rgba(0, 149, 255, 0.08),
+ color-info-transparent-200: rgba(0, 149, 255, 0.16),
+ color-info-transparent-300: rgba(0, 149, 255, 0.24),
+ color-info-transparent-400: rgba(0, 149, 255, 0.32),
+ color-info-transparent-500: rgba(0, 149, 255, 0.4),
+ color-info-transparent-600: rgba(0, 149, 255, 0.48),
+
color-warning-100: #fffdf2,
color-warning-200: #fff1c2,
color-warning-300: #ffe59e,
@@ -57,6 +78,13 @@ $theme: (
color-warning-800: #945400,
color-warning-900: #703c00,
+ color-warning-transparent-100: rgba(255, 170, 0, 0.08),
+ color-warning-transparent-200: rgba(255, 170, 0, 0.16),
+ color-warning-transparent-300: rgba(255, 170, 0, 0.24),
+ color-warning-transparent-400: rgba(255, 170, 0, 0.32),
+ color-warning-transparent-500: rgba(255, 170, 0, 0.4),
+ color-warning-transparent-600: rgba(255, 170, 0, 0.48),
+
color-danger-100: #fff2f2,
color-danger-200: #ffd6d9,
color-danger-300: #ffa8b4,
@@ -67,6 +95,13 @@ $theme: (
color-danger-800: #94124e,
color-danger-900: #700940,
+ color-danger-transparent-100: rgba(255, 61, 113, 0.08),
+ color-danger-transparent-200: rgba(255, 61, 113, 0.16),
+ color-danger-transparent-300: rgba(255, 61, 113, 0.24),
+ color-danger-transparent-400: rgba(255, 61, 113, 0.32),
+ color-danger-transparent-500: rgba(255, 61, 113, 0.4),
+ color-danger-transparent-600: rgba(255, 61, 113, 0.48),
+
/* Basic colors - for backgrounds and borders and texts */
color-basic-100: #ffffff,
@@ -77,43 +112,57 @@ $theme: (
color-basic-600: #8f9bb3,
color-basic-700: #2e3a59,
color-basic-800: #222b45,
- color-basic-900: #1a2138,
+ color-basic-900: #192038,
color-basic-1000: #151a30,
color-basic-1100: #101426,
+ color-basic-transparent-100: rgba(143, 155, 179, 0.08),
+ color-basic-transparent-200: rgba(143, 155, 179, 0.16),
+ color-basic-transparent-300: rgba(143, 155, 179, 0.24),
+ color-basic-transparent-400: rgba(143, 155, 179, 0.32),
+ color-basic-transparent-500: rgba(143, 155, 179, 0.4),
+ color-basic-transparent-600: rgba(143, 155, 179, 0.48),
+
+ color-basic-control-transparent-100: rgba(0, 0, 0, 0.08),
+ color-basic-control-transparent-200: rgba(0, 0, 0, 0.16),
+ color-basic-control-transparent-300: rgba(0, 0, 0, 0.24),
+ color-basic-control-transparent-400: rgba(0, 0, 0, 0.32),
+ color-basic-control-transparent-500: rgba(0, 0, 0, 0.4),
+ color-basic-control-transparent-600: rgba(0, 0, 0, 0.48),
+
/* Status colors states - focus, hover, default, active, disabled */
- color-primary-focus: color-primary-700,
+ color-primary-focus: color-primary-600,
color-primary-hover: color-primary-400,
color-primary-default: color-primary-500,
color-primary-active: color-primary-600,
color-primary-disabled: color-primary-300,
- color-success-focus: color-success-700,
+ color-success-focus: color-success-600,
color-success-hover: color-success-400,
color-success-default: color-success-500,
color-success-active: color-success-600,
color-success-disabled: color-success-200,
- color-info-focus: color-info-700,
+ color-info-focus: color-info-600,
color-info-hover: color-info-400,
color-info-default: color-info-500,
color-info-active: color-info-600,
color-info-disabled: color-info-300,
- color-warning-focus: color-warning-700,
+ color-warning-focus: color-warning-600,
color-warning-hover: color-warning-400,
color-warning-default: color-warning-500,
color-warning-active: color-warning-600,
color-warning-disabled: color-warning-300,
- color-danger-focus: color-danger-700,
+ color-danger-focus: color-danger-600,
color-danger-hover: color-danger-400,
color-danger-default: color-danger-500,
color-danger-active: color-danger-600,
color-danger-disabled: color-danger-300,
- color-basic-focus: color-basic-700,
+ color-basic-focus: color-basic-600,
color-basic-hover: color-basic-400,
color-basic-default: color-basic-500,
color-basic-active: color-basic-600,
@@ -159,7 +208,7 @@ $theme: (
text-basic-color: color-basic-900,
text-alternate-color: color-basic-100,
text-control-color: color-basic-100,
- text-disabled-color: color-basic-500,
+ text-disabled-color: color-basic-transparent-600,
text-hint-color: color-basic-600,
text-primary-color: color-primary-default,
@@ -280,7 +329,7 @@ $theme: (
border-radius: 0.25rem,
outline-width: 0.375rem,
- outline-color: color-basic-400,
+ outline-color: color-basic-transparent-200,
scrollbar-color: background-basic-color-4,
scrollbar-background-color: background-basic-color-2,
diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
index 66227c8ed0..0b4b05aa69 100644
--- a/src/framework/theme/styles/themes/_mapping.scss
+++ b/src/framework/theme/styles/themes/_mapping.scss
@@ -525,181 +525,246 @@ $eva-mapping: (
button-round-border-radius: 1.5rem,
button-filled-border-style: solid,
- button-filled-border-width: 0.125rem,
+ button-filled-border-width: 0.0625rem,
button-filled-text-transform: uppercase,
- button-filled-tiny-padding: 0.25rem 0.625rem,
- button-filled-small-padding: 0.375rem 0.875rem,
- button-filled-medium-padding: 0.625rem 1.125rem,
- button-filled-large-padding: 0.75rem 1.125rem,
- button-filled-giant-padding: 0.875rem 1.375rem,
+ button-filled-tiny-padding: 0.3125rem 0.625rem,
+ button-filled-small-padding: 0.4375rem 0.875rem,
+ button-filled-medium-padding: 0.6875rem 1.125rem,
+ button-filled-large-padding: 0.8125rem 1.125rem,
+ button-filled-giant-padding: 0.9375rem 1.375rem,
button-filled-primary-background-color: color-primary-default,
button-filled-primary-border-color: color-primary-default,
button-filled-primary-text-color: text-control-color,
- button-filled-primary-focus-border-color: color-primary-focus,
+ button-filled-primary-focus-background-color: color-primary-focus,
+ button-filled-primary-focus-border-color: color-primary-700,
button-filled-primary-hover-background-color: color-primary-hover,
button-filled-primary-hover-border-color: color-primary-hover,
button-filled-primary-active-background-color: color-primary-active,
button-filled-primary-active-border-color: color-primary-active,
- button-filled-primary-disabled-background-color: background-basic-color-3,
- button-filled-primary-disabled-border-color: border-basic-color-3,
+ button-filled-primary-disabled-background-color: color-basic-transparent-300,
+ button-filled-primary-disabled-border-color: transparent,
button-filled-primary-disabled-text-color: text-disabled-color,
button-filled-success-background-color: color-success-default,
button-filled-success-border-color: color-success-default,
button-filled-success-text-color: text-control-color,
- button-filled-success-focus-border-color: color-success-focus,
+ button-filled-success-focus-background-color: color-success-focus,
+ button-filled-success-focus-border-color: color-success-700,
button-filled-success-hover-background-color: color-success-hover,
button-filled-success-hover-border-color: color-success-hover,
button-filled-success-active-background-color: color-success-active,
button-filled-success-active-border-color: color-success-active,
- button-filled-success-disabled-background-color: background-basic-color-3,
- button-filled-success-disabled-border-color: border-basic-color-3,
+ button-filled-success-disabled-background-color: color-basic-transparent-300,
+ button-filled-success-disabled-border-color: transparent,
button-filled-success-disabled-text-color: text-disabled-color,
button-filled-info-background-color: color-info-default,
button-filled-info-border-color: color-info-default,
button-filled-info-text-color: text-control-color,
- button-filled-info-focus-border-color: color-info-focus,
+ button-filled-info-focus-background-color: color-info-focus,
+ button-filled-info-focus-border-color: color-info-700,
button-filled-info-hover-background-color: color-info-hover,
button-filled-info-hover-border-color: color-info-hover,
button-filled-info-active-background-color: color-info-active,
button-filled-info-active-border-color: color-info-active,
- button-filled-info-disabled-background-color: background-basic-color-3,
- button-filled-info-disabled-border-color: border-basic-color-3,
+ button-filled-info-disabled-background-color: color-basic-transparent-300,
+ button-filled-info-disabled-border-color: transparent,
button-filled-info-disabled-text-color: text-disabled-color,
button-filled-warning-background-color: color-warning-default,
button-filled-warning-border-color: color-warning-default,
button-filled-warning-text-color: text-control-color,
- button-filled-warning-focus-border-color: color-warning-focus,
+ button-filled-warning-focus-background-color: color-warning-focus,
+ button-filled-warning-focus-border-color: color-warning-700,
button-filled-warning-hover-background-color: color-warning-hover,
button-filled-warning-hover-border-color: color-warning-hover,
button-filled-warning-active-background-color: color-warning-active,
button-filled-warning-active-border-color: color-warning-active,
- button-filled-warning-disabled-background-color: background-basic-color-3,
- button-filled-warning-disabled-border-color: border-basic-color-3,
+ button-filled-warning-disabled-background-color: color-basic-transparent-300,
+ button-filled-warning-disabled-border-color: transparent,
button-filled-warning-disabled-text-color: text-disabled-color,
button-filled-danger-background-color: color-danger-default,
button-filled-danger-border-color: color-danger-default,
button-filled-danger-text-color: text-control-color,
- button-filled-danger-focus-border-color: color-danger-focus,
+ button-filled-danger-focus-background-color: color-danger-focus,
+ button-filled-danger-focus-border-color: color-danger-700,
button-filled-danger-hover-background-color: color-danger-hover,
button-filled-danger-hover-border-color: color-danger-hover,
button-filled-danger-active-background-color: color-danger-active,
button-filled-danger-active-border-color: color-danger-active,
- button-filled-danger-disabled-background-color: background-basic-color-3,
- button-filled-danger-disabled-border-color: border-basic-color-3,
+ button-filled-danger-disabled-background-color: color-basic-transparent-300,
+ button-filled-danger-disabled-border-color: transparent,
button-filled-danger-disabled-text-color: text-disabled-color,
button-outline-border-style: solid,
- button-outline-border-width: 0.125rem,
- button-outline-background-color: background-basic-color-2,
+ button-outline-border-width: 0.0625rem,
+ button-outline-background-color: transparent,
button-outline-text-transform: uppercase,
- button-outline-tiny-padding: 0.25rem 0.625rem,
- button-outline-small-padding: 0.375rem 0.875rem,
- button-outline-medium-padding: 0.625rem 1.125rem,
- button-outline-large-padding: 0.75rem 1.125rem,
- button-outline-giant-padding: 0.875rem 1.375rem,
+ button-outline-tiny-padding: 0.3125rem 0.625rem,
+ button-outline-small-padding: 0.4375rem 0.875rem,
+ button-outline-medium-padding: 0.6875rem 1.125rem,
+ button-outline-large-padding: 0.8125rem 1.125rem,
+ button-outline-giant-padding: 0.9375rem 1.375rem,
button-outline-primary-border-color: color-primary-default,
button-outline-primary-text-color: text-primary-color,
+ button-outline-primary-focus-background-color: color-primary-transparent-200,
button-outline-primary-focus-border-color: color-primary-focus,
button-outline-primary-focus-text-color: text-primary-focus-color,
+ button-outline-primary-hover-background-color: color-primary-transparent-100,
button-outline-primary-hover-border-color: color-primary-hover,
button-outline-primary-hover-text-color: text-primary-hover-color,
+ button-outline-primary-active-background-color: color-primary-transparent-200,
button-outline-primary-active-border-color: color-primary-active,
button-outline-primary-active-text-color: text-primary-active-color,
- button-outline-primary-disabled-border-color: border-basic-color-3,
+ button-outline-primary-disabled-background-color: color-basic-transparent-200,
+ button-outline-primary-disabled-border-color: color-basic-transparent-100,
button-outline-primary-disabled-text-color: text-disabled-color,
button-outline-success-border-color: color-success-default,
button-outline-success-text-color: text-success-color,
+ button-outline-success-focus-background-color: color-success-transparent-200,
button-outline-success-focus-border-color: color-success-focus,
button-outline-success-focus-text-color: text-success-focus-color,
+ button-outline-success-hover-background-color: color-success-transparent-100,
button-outline-success-hover-border-color: color-success-hover,
button-outline-success-hover-text-color: text-success-hover-color,
+ button-outline-success-active-background-color: color-success-transparent-200,
button-outline-success-active-border-color: color-success-active,
button-outline-success-active-text-color: text-success-active-color,
- button-outline-success-disabled-border-color: border-basic-color-3,
+ button-outline-success-disabled-background-color: color-basic-transparent-200,
+ button-outline-success-disabled-border-color: color-basic-transparent-100,
button-outline-success-disabled-text-color: text-disabled-color,
button-outline-info-border-color: color-info-default,
button-outline-info-text-color: text-info-color,
+ button-outline-info-focus-background-color: color-info-transparent-200,
button-outline-info-focus-border-color: color-info-focus,
button-outline-info-focus-text-color: text-info-focus-color,
+ button-outline-info-hover-background-color: color-info-transparent-100,
button-outline-info-hover-border-color: color-info-hover,
button-outline-info-hover-text-color: text-info-hover-color,
+ button-outline-info-active-background-color: color-info-transparent-200,
button-outline-info-active-border-color: color-info-active,
button-outline-info-active-text-color: text-info-active-color,
- button-outline-info-disabled-border-color: border-basic-color-3,
+ button-outline-info-disabled-background-color: color-basic-transparent-200,
+ button-outline-info-disabled-border-color: color-basic-transparent-100,
button-outline-info-disabled-text-color: text-disabled-color,
button-outline-warning-border-color: color-warning-default,
button-outline-warning-text-color: text-warning-color,
+ button-outline-warning-focus-background-color: color-warning-transparent-200,
button-outline-warning-focus-border-color: color-warning-focus,
button-outline-warning-focus-text-color: text-warning-focus-color,
+ button-outline-warning-hover-background-color: color-warning-transparent-100,
button-outline-warning-hover-border-color: color-warning-hover,
button-outline-warning-hover-text-color: text-warning-hover-color,
+ button-outline-warning-active-background-color: color-warning-transparent-200,
button-outline-warning-active-border-color: color-warning-active,
button-outline-warning-active-text-color: text-warning-active-color,
- button-outline-warning-disabled-border-color: border-basic-color-3,
+ button-outline-warning-disabled-background-color: color-basic-transparent-200,
+ button-outline-warning-disabled-border-color: color-basic-transparent-100,
button-outline-warning-disabled-text-color: text-disabled-color,
button-outline-danger-border-color: color-danger-default,
button-outline-danger-text-color: text-danger-color,
+ button-outline-danger-focus-background-color: color-danger-transparent-200,
button-outline-danger-focus-border-color: color-danger-focus,
button-outline-danger-focus-text-color: text-danger-focus-color,
+ button-outline-danger-hover-background-color: color-danger-transparent-100,
button-outline-danger-hover-border-color: color-danger-hover,
button-outline-danger-hover-text-color: text-danger-hover-color,
+ button-outline-danger-active-background-color: color-danger-transparent-200,
button-outline-danger-active-border-color: color-danger-active,
button-outline-danger-active-text-color: text-danger-active-color,
- button-outline-danger-disabled-border-color: border-basic-color-3,
+ button-outline-danger-disabled-background-color: color-basic-transparent-200,
+ button-outline-danger-disabled-border-color: color-basic-transparent-100,
button-outline-danger-disabled-text-color: text-disabled-color,
button-ghost-background-color: transparent,
button-ghost-border-color: transparent,
button-ghost-border-style: solid,
- button-ghost-border-width: 0,
+ button-ghost-border-width: 0.0625rem,
button-ghost-text-transform: uppercase,
- button-ghost-tiny-padding: 0.375rem 0.75rem,
- button-ghost-small-padding: 0.5rem 1rem,
- button-ghost-medium-padding: 0.75rem 1.25rem,
- button-ghost-large-padding: 0.875rem 1.25rem,
- button-ghost-giant-padding: 1rem 1.5rem,
+ button-ghost-tiny-padding: 0.3125rem 0.625rem,
+ button-ghost-small-padding: 0.4375rem 0.875rem,
+ button-ghost-medium-padding: 0.6875rem 1.125rem,
+ button-ghost-large-padding: 0.8125rem 1.125rem,
+ button-ghost-giant-padding: 0.9375rem 1.375rem,
button-ghost-primary-text-color: text-primary-color,
+ button-ghost-primary-focus-background-color: border-basic-color-4,
+ button-ghost-primary-focus-border-color: border-basic-color-4,
button-ghost-primary-focus-text-color: text-primary-focus-color,
- button-ghost-primary-hover-color: text-primary-hover-color,
+ button-ghost-primary-hover-background-color: border-basic-color-2,
+ button-ghost-primary-hover-border-color: border-basic-color-2,
+ button-ghost-primary-hover-text-color: text-primary-hover-color,
+ button-ghost-primary-active-background-color: border-basic-color-3,
+ button-ghost-primary-active-border-color: border-basic-color-3,
button-ghost-primary-active-text-color: text-primary-active-color,
+ button-ghost-primary-disabled-background-color: color-basic-transparent-100,
+ button-ghost-primary-disabled-border-color: transparent,
button-ghost-primary-disabled-text-color: text-disabled-color,
button-ghost-success-text-color: text-success-color,
+ button-ghost-success-focus-background-color: border-basic-color-4,
+ button-ghost-success-focus-border-color: border-basic-color-4,
button-ghost-success-focus-text-color: text-success-focus-color,
- button-ghost-success-hover-color: text-success-hover-color,
+ button-ghost-success-hover-background-color: border-basic-color-2,
+ button-ghost-success-hover-border-color: border-basic-color-2,
+ button-ghost-success-hover-text-color: text-success-hover-color,
+ button-ghost-success-active-background-color: border-basic-color-3,
+ button-ghost-success-active-border-color: border-basic-color-3,
button-ghost-success-active-text-color: text-success-active-color,
+ button-ghost-success-disabled-background-color: color-basic-transparent-100,
+ button-ghost-success-disabled-border-color: transparent,
button-ghost-success-disabled-text-color: text-disabled-color,
button-ghost-info-text-color: text-info-color,
+ button-ghost-info-focus-background-color: border-basic-color-4,
+ button-ghost-info-focus-border-color: border-basic-color-4,
button-ghost-info-focus-text-color: text-info-focus-color,
- button-ghost-info-hover-color: text-info-hover-color,
+ button-ghost-info-hover-background-color: border-basic-color-2,
+ button-ghost-info-hover-border-color: border-basic-color-2,
+ button-ghost-info-hover-text-color: text-info-hover-color,
+ button-ghost-info-active-background-color: border-basic-color-3,
+ button-ghost-info-active-border-color: border-basic-color-3,
button-ghost-info-active-text-color: text-info-active-color,
+ button-ghost-info-disabled-background-color: color-basic-transparent-100,
+ button-ghost-info-disabled-border-color: transparent,
button-ghost-info-disabled-text-color: text-disabled-color,
button-ghost-warning-text-color: text-warning-color,
+ button-ghost-warning-focus-background-color: border-basic-color-4,
+ button-ghost-warning-focus-border-color: border-basic-color-4,
button-ghost-warning-focus-text-color: text-warning-focus-color,
- button-ghost-warning-hover-color: text-warning-hover-color,
+ button-ghost-warning-hover-background-color: border-basic-color-2,
+ button-ghost-warning-hover-border-color: border-basic-color-2,
+ button-ghost-warning-hover-text-color: text-warning-hover-color,
+ button-ghost-warning-active-background-color: border-basic-color-3,
+ button-ghost-warning-active-border-color: border-basic-color-3,
button-ghost-warning-active-text-color: text-warning-active-color,
+ button-ghost-warning-disabled-background-color: color-basic-transparent-100,
+ button-ghost-warning-disabled-border-color: transparent,
button-ghost-warning-disabled-text-color: text-disabled-color,
button-ghost-danger-text-color: text-danger-color,
+ button-ghost-danger-focus-background-color: border-basic-color-4,
+ button-ghost-danger-focus-border-color: border-basic-color-4,
button-ghost-danger-focus-text-color: text-danger-focus-color,
- button-ghost-danger-hover-color: text-danger-hover-color,
+ button-ghost-danger-hover-background-color: border-basic-color-2,
+ button-ghost-danger-hover-border-color: border-basic-color-2,
+ button-ghost-danger-hover-text-color: text-danger-hover-color,
+ button-ghost-danger-active-background-color: border-basic-color-3,
+ button-ghost-danger-active-border-color: border-basic-color-3,
button-ghost-danger-active-text-color: text-danger-active-color,
+ button-ghost-danger-disabled-background-color: color-basic-transparent-100,
+ button-ghost-danger-disabled-border-color: transparent,
button-ghost-danger-disabled-text-color: text-disabled-color,
button-hero-border-color: transparent,
@@ -880,8 +945,8 @@ $eva-mapping: (
checkbox-height: 1.125rem,
checkbox-width: 1.125rem,
- checkbox-background-color: background-basic-color-3,
- checkbox-border-color: border-basic-color-4,
+ checkbox-background-color: color-basic-transparent-200,
+ checkbox-border-color: border-basic-color-5,
checkbox-border-style: solid,
checkbox-border-width: 1px,
checkbox-border-radius: 3px,
@@ -893,12 +958,19 @@ $eva-mapping: (
checkbox-text-font-weight: text-subtitle-2-font-weight,
checkbox-text-line-height: text-subtitle-2-line-height,
- checkbox-disabled-background-color: background-basic-color-2,
- checkbox-disabled-border-color: border-basic-color-3,
+ checkbox-focus-background-color: color-basic-transparent-500,
+ checkbox-focus-border-color: color-basic-focus,
+ checkbox-hover-background-color: color-primary-transparent-200,
+ checkbox-hover-border-color: color-primary-default,
+ checkbox-active-background-color: color-basic-transparent-500,
+ checkbox-active-border-color: color-basic-focus,
+ checkbox-disabled-background-color: color-basic-transparent-100,
+ checkbox-disabled-border-color: color-basic-transparent-300,
checkbox-disabled-checkmark-color: background-basic-color-1,
checkbox-disabled-text-color: text-disabled-color,
+ checkbox-disabled-checked-background-color: color-basic-transparent-600,
- checkbox-primary-background-color: background-basic-color-2,
+ checkbox-primary-background-color: color-primary-transparent-200,
checkbox-primary-border-color: color-primary-default,
checkbox-primary-checked-background-color: color-primary-default,
checkbox-primary-checked-border-color: color-primary-default,
@@ -906,13 +978,20 @@ $eva-mapping: (
checkbox-primary-indeterminate-background-color: color-primary-default,
checkbox-primary-indeterminate-border-color: color-primary-default,
checkbox-primary-indeterminate-checkmark-color: text-control-color,
+ checkbox-primary-focus-background-color: color-primary-transparent-500,
checkbox-primary-focus-border-color: color-primary-700,
- checkbox-primary-hover-background-color: color-primary-400,
- checkbox-primary-hover-border-color: color-primary-400,
- checkbox-primary-active-background-color: color-primary-600,
- checkbox-primary-active-border-color: color-primary-600,
-
- checkbox-success-background-color: background-basic-color-2,
+ checkbox-primary-focus-checked-background-color: color-primary-default,
+ checkbox-primary-focus-checked-border-color: color-primary-700,
+ checkbox-primary-hover-background-color: color-primary-transparent-200,
+ checkbox-primary-hover-border-color: color-primary-default,
+ checkbox-primary-hover-checked-background-color: color-primary-hover,
+ checkbox-primary-hover-checked-border-color: color-primary-hover,
+ checkbox-primary-active-background-color: color-primary-transparent-500,
+ checkbox-primary-active-border-color: checkbox-primary-700,
+ checkbox-primary-active-checked-background-color: color-primary-default,
+ checkbox-primary-active-checked-border-color: color-primary-700,
+
+ checkbox-success-background-color: color-success-transparent-200,
checkbox-success-border-color: color-success-default,
checkbox-success-checked-background-color: color-success-default,
checkbox-success-checked-border-color: color-success-default,
@@ -920,13 +999,41 @@ $eva-mapping: (
checkbox-success-indeterminate-background-color: color-success-default,
checkbox-success-indeterminate-border-color: color-success-default,
checkbox-success-indeterminate-checkmark-color: text-control-color,
+ checkbox-success-focus-background-color: color-success-transparent-500,
checkbox-success-focus-border-color: color-success-700,
- checkbox-success-hover-background-color: color-success-400,
- checkbox-success-hover-border-color: color-success-400,
- checkbox-success-active-background-color: color-success-600,
- checkbox-success-active-border-color: color-success-600,
-
- checkbox-warning-background-color: background-basic-color-2,
+ checkbox-success-focus-checked-background-color: color-success-default,
+ checkbox-success-focus-checked-border-color: color-success-700,
+ checkbox-success-hover-background-color: color-success-transparent-200,
+ checkbox-success-hover-border-color: color-success-default,
+ checkbox-success-hover-checked-background-color: color-success-hover,
+ checkbox-success-hover-checked-border-color: color-success-hover,
+ checkbox-success-active-background-color: color-success-transparent-500,
+ checkbox-success-active-border-color: checkbox-success-700,
+ checkbox-success-active-checked-background-color: color-success-default,
+ checkbox-success-active-checked-border-color: color-success-700,
+
+ checkbox-info-background-color: color-info-transparent-200,
+ checkbox-info-border-color: color-info-default,
+ checkbox-info-checked-background-color: color-info-default,
+ checkbox-info-checked-border-color: color-info-default,
+ checkbox-info-checked-checkmark-color: text-control-color,
+ checkbox-info-indeterminate-background-color: color-info-default,
+ checkbox-info-indeterminate-border-color: color-info-default,
+ checkbox-info-indeterminate-checkmark-color: text-control-color,
+ checkbox-info-focus-background-color: color-info-transparent-500,
+ checkbox-info-focus-border-color: color-info-700,
+ checkbox-info-focus-checked-background-color: color-info-default,
+ checkbox-info-focus-checked-border-color: color-info-700,
+ checkbox-info-hover-background-color: color-info-transparent-200,
+ checkbox-info-hover-border-color: color-info-default,
+ checkbox-info-hover-checked-background-color: color-info-hover,
+ checkbox-info-hover-checked-border-color: color-info-hover,
+ checkbox-info-active-background-color: color-info-transparent-500,
+ checkbox-info-active-border-color: checkbox-info-700,
+ checkbox-info-active-checked-background-color: color-info-default,
+ checkbox-info-active-checked-border-color: color-info-700,
+
+ checkbox-warning-background-color: color-warning-transparent-200,
checkbox-warning-border-color: color-warning-default,
checkbox-warning-checked-background-color: color-warning-default,
checkbox-warning-checked-border-color: color-warning-default,
@@ -934,13 +1041,20 @@ $eva-mapping: (
checkbox-warning-indeterminate-background-color: color-warning-default,
checkbox-warning-indeterminate-border-color: color-warning-default,
checkbox-warning-indeterminate-checkmark-color: text-control-color,
+ checkbox-warning-focus-background-color: color-warning-transparent-500,
checkbox-warning-focus-border-color: color-warning-700,
- checkbox-warning-hover-background-color: color-warning-400,
- checkbox-warning-hover-border-color: color-warning-400,
- checkbox-warning-active-background-color: color-warning-600,
- checkbox-warning-active-border-color: color-warning-600,
-
- checkbox-danger-background-color: background-basic-color-2,
+ checkbox-warning-focus-checked-background-color: color-warning-default,
+ checkbox-warning-focus-checked-border-color: color-warning-700,
+ checkbox-warning-hover-background-color: color-warning-transparent-200,
+ checkbox-warning-hover-border-color: color-warning-default,
+ checkbox-warning-hover-checked-background-color: color-warning-hover,
+ checkbox-warning-hover-checked-border-color: color-warning-hover,
+ checkbox-warning-active-background-color: color-warning-transparent-500,
+ checkbox-warning-active-border-color: checkbox-warning-700,
+ checkbox-warning-active-checked-background-color: color-warning-default,
+ checkbox-warning-active-checked-border-color: color-warning-700,
+
+ checkbox-danger-background-color: color-danger-transparent-200,
checkbox-danger-border-color: color-danger-default,
checkbox-danger-checked-background-color: color-danger-default,
checkbox-danger-checked-border-color: color-danger-default,
@@ -948,25 +1062,18 @@ $eva-mapping: (
checkbox-danger-indeterminate-background-color: color-danger-default,
checkbox-danger-indeterminate-border-color: color-danger-default,
checkbox-danger-indeterminate-checkmark-color: text-control-color,
+ checkbox-danger-focus-background-color: color-danger-transparent-500,
checkbox-danger-focus-border-color: color-danger-700,
- checkbox-danger-hover-background-color: color-danger-400,
- checkbox-danger-hover-border-color: color-danger-400,
- checkbox-danger-active-background-color: color-danger-600,
- checkbox-danger-active-border-color: color-danger-600,
-
- checkbox-info-background-color: background-basic-color-2,
- checkbox-info-border-color: color-info-default,
- checkbox-info-checked-background-color: color-info-default,
- checkbox-info-checked-border-color: color-info-default,
- checkbox-info-checked-checkmark-color: text-control-color,
- checkbox-info-indeterminate-background-color: color-info-default,
- checkbox-info-indeterminate-border-color: color-info-default,
- checkbox-info-indeterminate-checkmark-color: text-control-color,
- checkbox-info-focus-border-color: color-info-700,
- checkbox-info-hover-background-color: color-info-400,
- checkbox-info-hover-border-color: color-info-400,
- checkbox-info-active-background-color: color-info-600,
- checkbox-info-active-border-color: color-info-600,
+ checkbox-danger-focus-checked-background-color: color-danger-default,
+ checkbox-danger-focus-checked-border-color: color-danger-700,
+ checkbox-danger-hover-background-color: color-danger-transparent-200,
+ checkbox-danger-hover-border-color: color-danger-default,
+ checkbox-danger-hover-checked-background-color: color-danger-hover,
+ checkbox-danger-hover-checked-border-color: color-danger-hover,
+ checkbox-danger-active-background-color: color-danger-transparent-500,
+ checkbox-danger-active-border-color: checkbox-danger-700,
+ checkbox-danger-active-checked-background-color: color-danger-default,
+ checkbox-danger-active-checked-border-color: color-danger-700,
badge-border-radius: border-radius,
badge-text-font-family: text-button-font-family,
@@ -1670,8 +1777,8 @@ $eva-mapping: (
radio-width: 1.125rem,
radio-height: 1.125rem,
- radio-background-color: background-basic-color-3,
- radio-border-color: border-basic-color-4,
+ radio-background-color: color-basic-transparent-200,
+ radio-border-color: color-basic-500,
radio-border-style: solid,
radio-border-width: 1px,
radio-text-color: text-basic-color,
@@ -1682,53 +1789,74 @@ $eva-mapping: (
radio-outline-color: outline-color,
radio-outline-width: outline-width,
- radio-disabled-background-color: background-basic-color-2,
- radio-disabled-border-color: border-basic-color-3,
+ radio-disabled-background-color: color-basic-transparent-100,
+ radio-disabled-border-color: color-basic-transparent-300,
radio-disabled-text-color: text-disabled-color,
- radio-disabled-inner-circle-color: background-basic-color-4,
+ radio-disabled-checked-background-color: transparent,
+ radio-disabled-checked-inner-circle-color: color-basic-transparent-600,
radio-primary-border-color: color-primary-default,
+ radio-primary-background-color: color-primary-transparent-200,
+ radio-primary-checked-background-color: transparent,
radio-primary-inner-circle-color: color-primary-default,
- radio-primary-focus-border-color: color-primary-focus,
- radio-primary-focus-inner-circle-color: color-primary-focus,
+ radio-primary-focus-border-color: color-primary-700,
+ radio-primary-focus-inner-circle-color: color-primary-default,
+ radio-primary-hover-background-color: color-primary-transparent-200,
radio-primary-hover-border-color: color-primary-hover,
radio-primary-hover-inner-circle-color: color-primary-hover,
+ radio-primary-hover-checked-background-color: transparent,
radio-primary-active-border-color: color-primary-active,
radio-primary-active-inner-circle-color: color-primary-active,
radio-success-border-color: color-success-default,
+ radio-success-background-color: color-success-transparent-200,
+ radio-success-checked-background-color: transparent,
radio-success-inner-circle-color: color-success-default,
- radio-success-focus-border-color: color-success-focus,
- radio-success-focus-inner-circle-color: color-success-focus,
+ radio-success-focus-border-color: color-success-700,
+ radio-success-focus-inner-circle-color: color-success-default,
+ radio-success-hover-background-color: color-success-transparent-200,
radio-success-hover-border-color: color-success-hover,
radio-success-hover-inner-circle-color: color-success-hover,
+ radio-success-hover-checked-background-color: transparent,
radio-success-active-border-color: color-success-active,
radio-success-active-inner-circle-color: color-success-active,
radio-warning-border-color: color-warning-default,
+ radio-warning-background-color: color-warning-transparent-200,
+ radio-warning-checked-background-color: transparent,
radio-warning-inner-circle-color: color-warning-default,
- radio-warning-focus-border-color: color-warning-focus,
- radio-warning-focus-inner-circle-color: color-warning-focus,
+ radio-warning-focus-border-color: color-warning-700,
+ radio-warning-focus-inner-circle-color: color-warning-default,
+ radio-warning-hover-background-color: color-warning-transparent-200,
radio-warning-hover-border-color: color-warning-hover,
radio-warning-hover-inner-circle-color: color-warning-hover,
+ radio-warning-hover-checked-background-color: transparent,
radio-warning-active-border-color: color-warning-active,
radio-warning-active-inner-circle-color: color-warning-active,
radio-danger-border-color: color-danger-default,
+ radio-danger-background-color: color-danger-transparent-200,
+ radio-danger-checked-background-color: transparent,
radio-danger-inner-circle-color: color-danger-default,
- radio-danger-focus-border-color: color-danger-focus,
- radio-danger-focus-inner-circle-color: color-danger-focus,
+ radio-danger-focus-border-color: color-danger-700,
+ radio-danger-focus-inner-circle-color: color-danger-default,
+ radio-danger-hover-background-color: color-danger-transparent-200,
radio-danger-hover-border-color: color-danger-hover,
radio-danger-hover-inner-circle-color: color-danger-hover,
+ radio-danger-hover-checked-background-color: transparent,
radio-danger-active-border-color: color-danger-active,
radio-danger-active-inner-circle-color: color-danger-active,
radio-info-border-color: color-info-default,
+ radio-info-background-color: color-info-transparent-200,
+ radio-info-checked-background-color: transparent,
radio-info-inner-circle-color: color-info-default,
- radio-info-focus-border-color: color-info-focus,
- radio-info-focus-inner-circle-color: color-info-focus,
+ radio-info-focus-border-color: color-info-700,
+ radio-info-focus-inner-circle-color: color-info-default,
+ radio-info-hover-background-color: color-info-transparent-200,
radio-info-hover-border-color: color-info-hover,
radio-info-hover-inner-circle-color: color-info-hover,
+ radio-info-hover-checked-background-color: transparent,
radio-info-active-border-color: color-info-active,
radio-info-active-inner-circle-color: color-info-active,
@@ -1780,8 +1908,8 @@ $eva-mapping: (
toggle-width: 3.125rem,
toggle-border-width: 1px,
toggle-border-radius: 100px,
- toggle-border-color: border-basic-color-4,
- toggle-background-color: background-basic-color-3,
+ toggle-border-color: color-basic-500,
+ toggle-background-color: color-basic-transparent-200,
toggle-outline-width: outline-width,
toggle-outline-color: outline-color,
toggle-switcher-size: 1.75rem,
@@ -1794,65 +1922,107 @@ $eva-mapping: (
toggle-text-line-height: text-subtitle-2-line-height,
toggle-cursor: pointer,
- toggle-disabled-background-color: background-basic-color-2,
- toggle-disabled-border-color: border-basic-color-3,
- toggle-disabled-switcher-checkmark-color: border-basic-color-3,
+ toggle-focus-background-color: color-basic-transparent-400,
+ toggle-focus-border-color: color-basic-focus,
+ toggle-hover-background-color: color-primary-transparent-200,
+ toggle-hover-border-color: color-primary-default,
+ toggle-active-background-color: color-basic-transparent-400,
+ toggle-active-border-color: color-basic-focus,
+ toggle-disabled-background-color: color-basic-transparent-200,
+ toggle-disabled-border-color: color-basic-transparent-400,
+ toggle-disabled-switcher-background-color: color-basic-transparent-600,
+ toggle-disabled-checked-switcher-checkmark-color: color-basic-100,
toggle-disabled-text-color: text-disabled-color,
toggle-disabled-cursor: default,
- toggle-primary-background-color: background-basic-color-2,
+ toggle-primary-background-color: color-primary-transparent-200,
toggle-primary-border-color: color-primary-default,
toggle-primary-checked-background-color: color-primary-default,
toggle-primary-checked-border-color: color-primary-default,
toggle-primary-checked-switcher-checkmark-color: color-primary-default,
- toggle-primary-focus-border-color: color-primary-700,
- toggle-primary-hover-background-color: color-primary-400,
- toggle-primary-hover-border-color: color-primary-400,
- toggle-primary-active-background-color: color-primary-600,
- toggle-primary-active-border-color: color-primary-600,
-
- toggle-success-background-color: background-basic-color-2,
+ toggle-primary-focus-background-color: color-primary-transparent-400,
+ toggle-primary-focus-border-color: color-primary-focus,
+ toggle-primary-focus-checked-background-color: color-primary-focus,
+ toggle-primary-focus-checked-border-color: color-primary-700,
+ toggle-primary-hover-background-color: color-primary-transparent-200,
+ toggle-primary-hover-border-color: color-primary-hover,
+ toggle-primary-hover-checked-background-color: color-primary-hover,
+ toggle-primary-hover-checked-border-color: color-primary-hover,
+ toggle-primary-active-background-color: color-primary-transparent-400,
+ toggle-primary-active-border-color: color-primary-focus,
+ toggle-primary-active-checked-background-color: color-primary-focus,
+ toggle-primary-active-checked-border-color: color-primary-700,
+
+ toggle-success-background-color: color-success-transparent-200,
toggle-success-border-color: color-success-default,
toggle-success-checked-background-color: color-success-default,
toggle-success-checked-border-color: color-success-default,
toggle-success-checked-switcher-checkmark-color: color-success-default,
- toggle-success-focus-border-color: color-success-700,
- toggle-success-hover-background-color: color-success-400,
- toggle-success-hover-border-color: color-success-400,
- toggle-success-active-background-color: color-success-600,
- toggle-success-active-border-color: color-success-600,
-
- toggle-info-background-color: background-basic-color-2,
+ toggle-success-focus-background-color: color-success-transparent-400,
+ toggle-success-focus-border-color: color-success-focus,
+ toggle-success-focus-checked-background-color: color-success-focus,
+ toggle-success-focus-checked-border-color: color-success-700,
+ toggle-success-hover-background-color: color-success-transparent-200,
+ toggle-success-hover-border-color: color-success-hover,
+ toggle-success-hover-checked-background-color: color-success-hover,
+ toggle-success-hover-checked-border-color: color-success-hover,
+ toggle-success-active-background-color: color-success-transparent-400,
+ toggle-success-active-border-color: color-success-focus,
+ toggle-success-active-checked-background-color: color-success-focus,
+ toggle-success-active-checked-border-color: color-success-700,
+
+ toggle-info-background-color: color-info-transparent-200,
toggle-info-border-color: color-info-default,
toggle-info-checked-background-color: color-info-default,
toggle-info-checked-border-color: color-info-default,
toggle-info-checked-switcher-checkmark-color: color-info-default,
- toggle-info-focus-border-color: color-info-700,
- toggle-info-hover-background-color: color-info-400,
- toggle-info-hover-border-color: color-info-400,
- toggle-info-active-background-color: color-info-600,
- toggle-info-active-border-color: color-info-600,
-
- toggle-warning-background-color: background-basic-color-2,
+ toggle-info-focus-background-color: color-info-transparent-400,
+ toggle-info-focus-border-color: color-info-focus,
+ toggle-info-focus-checked-background-color: color-info-focus,
+ toggle-info-focus-checked-border-color: color-info-700,
+ toggle-info-hover-background-color: color-info-transparent-200,
+ toggle-info-hover-border-color: color-info-hover,
+ toggle-info-hover-checked-background-color: color-info-hover,
+ toggle-info-hover-checked-border-color: color-info-hover,
+ toggle-info-active-background-color: color-info-transparent-400,
+ toggle-info-active-border-color: color-info-focus,
+ toggle-info-active-checked-background-color: color-info-focus,
+ toggle-info-active-checked-border-color: color-info-700,
+
+ toggle-warning-background-color: color-warning-transparent-200,
toggle-warning-border-color: color-warning-default,
toggle-warning-checked-background-color: color-warning-default,
toggle-warning-checked-border-color: color-warning-default,
toggle-warning-checked-switcher-checkmark-color: color-warning-default,
- toggle-warning-focus-border-color: color-warning-700,
- toggle-warning-hover-background-color: color-warning-400,
- toggle-warning-hover-border-color: color-warning-400,
- toggle-warning-active-background-color: color-warning-600,
- toggle-warning-active-border-color: color-warning-600,
-
- toggle-danger-background-color: background-basic-color-2,
+ toggle-warning-focus-background-color: color-warning-transparent-400,
+ toggle-warning-focus-border-color: color-warning-focus,
+ toggle-warning-focus-checked-background-color: color-warning-focus,
+ toggle-warning-focus-checked-border-color: color-warning-700,
+ toggle-warning-hover-background-color: color-warning-transparent-200,
+ toggle-warning-hover-border-color: color-warning-hover,
+ toggle-warning-hover-checked-background-color: color-warning-hover,
+ toggle-warning-hover-checked-border-color: color-warning-hover,
+ toggle-warning-active-background-color: color-warning-transparent-400,
+ toggle-warning-active-border-color: color-warning-focus,
+ toggle-warning-active-checked-background-color: color-warning-focus,
+ toggle-warning-active-checked-border-color: color-warning-700,
+
+ toggle-danger-background-color: color-danger-transparent-200,
toggle-danger-border-color: color-danger-default,
toggle-danger-checked-background-color: color-danger-default,
toggle-danger-checked-border-color: color-danger-default,
toggle-danger-checked-switcher-checkmark-color: color-danger-default,
- toggle-danger-focus-border-color: color-danger-700,
- toggle-danger-hover-background-color: color-danger-400,
- toggle-danger-hover-border-color: color-danger-400,
- toggle-danger-active-background-color: color-danger-600,
- toggle-danger-active-border-color: color-danger-600,
+ toggle-danger-focus-background-color: color-danger-transparent-400,
+ toggle-danger-focus-border-color: color-danger-focus,
+ toggle-danger-focus-checked-background-color: color-danger-focus,
+ toggle-danger-focus-checked-border-color: color-danger-700,
+ toggle-danger-hover-background-color: color-danger-transparent-200,
+ toggle-danger-hover-border-color: color-danger-hover,
+ toggle-danger-hover-checked-background-color: color-danger-hover,
+ toggle-danger-hover-checked-border-color: color-danger-hover,
+ toggle-danger-active-background-color: color-danger-transparent-400,
+ toggle-danger-active-border-color: color-danger-focus,
+ toggle-danger-active-checked-background-color: color-danger-focus,
+ toggle-danger-active-checked-border-color: color-danger-700,
);
diff --git a/src/playground/with-layout/radio/radio-statuses-group.component.scss b/src/playground/with-layout/radio/radio-statuses-group.component.scss
index 60622baa42..f10e5038fe 100644
--- a/src/playground/with-layout/radio/radio-statuses-group.component.scss
+++ b/src/playground/with-layout/radio/radio-statuses-group.component.scss
@@ -1,8 +1,3 @@
-:host {
- display: flex;
- flex-wrap: wrap;
-}
-
nb-radio-group {
padding: 1rem;
}
diff --git a/src/playground/with-layout/radio/radio-statuses.component.ts b/src/playground/with-layout/radio/radio-statuses.component.ts
index fbdfe2697c..daa87d4f07 100644
--- a/src/playground/with-layout/radio/radio-statuses.component.ts
+++ b/src/playground/with-layout/radio/radio-statuses.component.ts
@@ -2,14 +2,18 @@ import { Component } from '@angular/core';
@Component({
template: `
-
-
- {{ option.label }}
-
-
+
+
+
+
+ {{ option.label }}
+
+
+
+
`,
styleUrls: ['./radio-statuses-group.component.scss'],
})
@@ -21,5 +25,5 @@ export class RadioStatusesComponent {
{ value: 'This is value 4', label: 'Option 4', disabled: true },
];
- statuses = ['primary', 'success', 'warning', 'danger', 'info'];
+ statuses = ['', 'primary', 'success', 'warning', 'danger', 'info'];
}