From 91b49878a1892b9bd7bc78425a0b4c2f439807c9 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 15:19:46 +0300 Subject: [PATCH 01/14] feat(theme): add transparent colors --- .../theme/styles/themes/_default.scss | 53 ++++++++++++++++++- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 5ac9e7f813..3220c75763 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.40), + 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.40), + 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.40), + 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.40), + 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.40), + color-danger-transparent-600: rgba(255, 61, 113, 0.48), + /* Basic colors - for backgrounds and borders and texts */ color-basic-100: #ffffff, @@ -77,10 +112,24 @@ $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.40), + 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.40), + 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, From 96986e7458e1690d240afc499063a83d35ffe0f5 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:01:14 +0300 Subject: [PATCH 02/14] docs(radio): wrap groups into card --- .../radio/radio-statuses-group.component.scss | 5 ----- .../radio/radio-statuses.component.ts | 22 +++++++++++-------- 2 files changed, 13 insertions(+), 14 deletions(-) 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']; } From 7ccb5dab4ca68405e6b14fdf668b538721db96aa Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:13:24 +0300 Subject: [PATCH 03/14] feat: add transparent colors to cosmic theme --- src/framework/theme/styles/themes/_cosmic.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index 66f78c3d98..8e0a27e5c0 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.40), + 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.40), + color-basic-transparent-600: rgba(180, 180, 219, 0.48), ); $nb-themes: nb-register-theme($theme, cosmic, dark); From 6f68c38e7ec6e8f0a3cb3b6eb116e0d4756f3f23 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:13:50 +0300 Subject: [PATCH 04/14] refactor: change focus color --- src/framework/theme/styles/themes/_default.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 3220c75763..060e71342e 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -132,37 +132,37 @@ $theme: ( /* 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, From 535a6b18048cca10892a6684b50293b42be2868d Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:14:17 +0300 Subject: [PATCH 05/14] refactor: use transparent color for disabled text --- src/framework/theme/styles/themes/_dark.scss | 2 +- src/framework/theme/styles/themes/_default.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 060e71342e..4a29b1c221 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -208,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, From de22b0ffc861cdcf75f67404387b9f0382ca5d88 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:14:28 +0300 Subject: [PATCH 06/14] refactor: use transparent color for outline --- src/framework/theme/styles/themes/_default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 4a29b1c221..90ee0cda63 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -329,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, From fec588b4de0939b5e0a23f358f01bff0d7f51fca Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:16:34 +0300 Subject: [PATCH 07/14] refactor(button): use transparent colors --- .../components/button/_button-filled.scss | 1 + .../components/button/_button-ghost.scss | 10 +- .../components/button/_button-outline.scss | 4 + .../theme/styles/themes/_mapping.scss | 153 +++++++++++++----- 4 files changed, 123 insertions(+), 45 deletions(-) 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/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss index dff793f7b8..b6ca8d0685 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, From 1a7f7b32de87ea1dbd2ede2d0b01b30f3a208e98 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:17:49 +0300 Subject: [PATCH 08/14] refactor(checkbox): use transparent colors --- .../checkbox/_checkbox.component.theme.scss | 64 +++++++-- .../theme/styles/themes/_mapping.scss | 124 ++++++++++++------ 2 files changed, 138 insertions(+), 50 deletions(-) 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/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss index b6ca8d0685..027c3ed77b 100644 --- a/src/framework/theme/styles/themes/_mapping.scss +++ b/src/framework/theme/styles/themes/_mapping.scss @@ -945,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, @@ -958,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, @@ -971,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, @@ -985,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, @@ -999,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, @@ -1013,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, From f6e0db88a6b7a45ccfbbb4a2e15268a3e1024d90 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:19:07 +0300 Subject: [PATCH 09/14] refactor(radio): use transparent colors --- .../radio/_radio.component.theme.scss | 52 ++++++++++++++----- .../theme/styles/themes/_mapping.scss | 51 ++++++++++++------ 2 files changed, 74 insertions(+), 29 deletions(-) diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss index bd973e7065..95434e9cfd 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,36 @@ 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); + border-color: nb-theme(radio-disabled-checked-border-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/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss index 027c3ed77b..827ddc04f4 100644 --- a/src/framework/theme/styles/themes/_mapping.scss +++ b/src/framework/theme/styles/themes/_mapping.scss @@ -1763,8 +1763,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, @@ -1775,53 +1775,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, From 86adfdbbd361b366ada0cbbc014075c85f078f98 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:19:18 +0300 Subject: [PATCH 10/14] refactor(toggle): use transparent colors --- .../toggle/_toggle.component.theme.scss | 67 ++++++++-- .../theme/styles/themes/_mapping.scss | 120 ++++++++++++------ 2 files changed, 135 insertions(+), 52 deletions(-) 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/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss index 827ddc04f4..b7c285ab85 100644 --- a/src/framework/theme/styles/themes/_mapping.scss +++ b/src/framework/theme/styles/themes/_mapping.scss @@ -1894,8 +1894,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, @@ -1908,65 +1908,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, ); From a82d7b162177d717d201f999d0c68c71cf2c332f Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:32:13 +0300 Subject: [PATCH 11/14] docs(theme): mention transparent colors --- docs/articles/design-system/theme.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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: From 0fe4e63df310e16f82ad89e551d834571871d88a Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:39:15 +0300 Subject: [PATCH 12/14] fix(radio): remove reference to non-existent variable --- src/framework/theme/components/radio/_radio.component.theme.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss index 95434e9cfd..706d6abe85 100644 --- a/src/framework/theme/components/radio/_radio.component.theme.scss +++ b/src/framework/theme/components/radio/_radio.component.theme.scss @@ -69,7 +69,6 @@ &:checked { & + .outer-circle { background-color: nb-theme(radio-disabled-checked-background-color); - border-color: nb-theme(radio-disabled-checked-border-color); } ~ .inner-circle { background-color: nb-theme(radio-disabled-checked-inner-circle-color); From 567e70ec69e006870133082ffa4312d7a0a1152d Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 3 Oct 2019 17:42:55 +0300 Subject: [PATCH 13/14] style: remove trailing zero from opacity values --- src/framework/theme/styles/themes/_cosmic.scss | 4 ++-- src/framework/theme/styles/themes/_default.scss | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss index 8e0a27e5c0..4882aaf9e7 100644 --- a/src/framework/theme/styles/themes/_cosmic.scss +++ b/src/framework/theme/styles/themes/_cosmic.scss @@ -24,7 +24,7 @@ $theme: ( 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.40), + color-primary-transparent-500: rgba(161, 110, 255, 0.4), color-primary-transparent-600: rgba(161, 110, 255, 0.48), color-basic-100: #ffffff, @@ -43,7 +43,7 @@ $theme: ( 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.40), + color-basic-transparent-500: rgba(180, 180, 219, 0.4), color-basic-transparent-600: rgba(180, 180, 219, 0.48), ); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 90ee0cda63..f3695ffa1e 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -31,7 +31,7 @@ $theme: ( 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-500: rgba(51, 102, 255, 0.4), color-primary-transparent-600: rgba(51, 102, 255, 0.48), color-success-100: #f0fff5, @@ -48,7 +48,7 @@ $theme: ( 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.40), + color-success-transparent-500: rgba(0, 214, 143, 0.4), color-success-transparent-600: rgba(0, 214, 143, 0.48), color-info-100: #f2f8ff, @@ -65,7 +65,7 @@ $theme: ( 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.40), + color-info-transparent-500: rgba(0, 149, 255, 0.4), color-info-transparent-600: rgba(0, 149, 255, 0.48), color-warning-100: #fffdf2, @@ -82,7 +82,7 @@ $theme: ( 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.40), + color-warning-transparent-500: rgba(255, 170, 0, 0.4), color-warning-transparent-600: rgba(255, 170, 0, 0.48), color-danger-100: #fff2f2, @@ -99,7 +99,7 @@ $theme: ( 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.40), + 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 */ @@ -120,14 +120,14 @@ $theme: ( 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.40), + 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.40), + 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 */ From b396365be7322622f47033d14d4806fefce53182 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 15:38:00 +0300 Subject: [PATCH 14/14] test: check for updated color --- e2e/layout-theme.e2e-spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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');