refactor(mapping): unify state color mapping (#2075)

akveo · Dec 19, 2019 · 028883a · 028883a
1 parent d67dd6b
commit 028883a
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 111 deletions.
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -131,6 +131,7 @@
       &:indeterminate + .custom-checkbox,
       &:checked + .custom-checkbox {
         background-color: nb-theme(checkbox-#{$status}-disabled-checked-background-color);
+        border-color: nb-theme(checkbox-#{$status}-disabled-checked-border-color);
       }
     }
   }

diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss
@@ -38,10 +38,17 @@
       }
 
       &.status-#{$status} .native-input:enabled:focus + .outer-circle {
+        background-color: nb-theme(radio-#{$status}-focus-background-color);
         border-color: nb-theme(radio-#{$status}-focus-border-color);
       }
-      &.status-#{$status} .native-input:enabled:checked:focus ~ .inner-circle {
-        background-color: nb-theme(radio-#{$status}-focus-inner-circle-color);
+      &.status-#{$status} .native-input:enabled:checked:focus {
+        & + .outer-circle {
+          background-color: nb-theme(radio-#{$status}-focus-checked-background-color);
+          border-color: nb-theme(radio-#{$status}-focus-checked-border-color);
+        }
+        & ~ .inner-circle {
+          background-color: nb-theme(radio-#{$status}-focus-inner-circle-color);
+        }
       }
 
       &.status-#{$status} label:hover .native-input:enabled + .outer-circle {
@@ -51,17 +58,25 @@
       &.status-#{$status} label:hover .native-input:checked:enabled {
         + .outer-circle {
           background-color: nb-theme(radio-#{$status}-hover-checked-background-color);
+          border-color: nb-theme(radio-#{$status}-hover-checked-border-color);
         }
         ~ .inner-circle {
           background-color: nb-theme(radio-#{$status}-hover-inner-circle-color);
         }
       }
 
       &.status-#{$status} label .native-input:enabled:active + .outer-circle {
+        background-color: nb-theme(radio-#{$status}-active-background-color);
         border-color: nb-theme(radio-#{$status}-active-border-color);
       }
-      &.status-#{$status} label .native-input:enabled:checked:active ~ .inner-circle {
-        background-color: nb-theme(radio-#{$status}-active-inner-circle-color);
+      &.status-#{$status} label .native-input:enabled:checked:active {
+        & + .outer-circle {
+          background-color: nb-theme(radio-#{$status}-active-checked-background-color);
+          border-color: nb-theme(radio-#{$status}-active-checked-border-color);
+        }
+        & ~ .inner-circle {
+          background-color: nb-theme(radio-#{$status}-active-inner-circle-color);
+        }
       }
 
       &.status-#{$status} .text {

diff --git a/src/framework/theme/styles/themes/_dark.scss b/src/framework/theme/styles/themes/_dark.scss
@@ -33,9 +33,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-transparent-600,
-  text-hint-color: color-basic-600,
 
   shadow: 0 0.5rem 1rem 0 #1a1f33,
   outline-color: color-basic-700,