fix: use correct vars

core-ds · Aug 14, 2020 · 171c45d · 171c45d
1 parent aba4c8a
commit 171c45d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/docs/2.theming.stories.css b/docs/2.theming.stories.css
@@ -13,40 +13,43 @@
 }
 
 @define-mixin theme-dark {
-    --switch-label-color: var(--color-dark-text-primary);
+    --checkbox-label-color: var(--color-dark-text-primary);
     --checkbox-bg-color: var(--color-dark-bg-secondary);
     --checkbox-border-color: var(--color-dark-border-secondary-inverted);
     --checkbox-hover-bg-color: var(--color-dark-border-secondary-inverted);
     --checkbox-hover-border-color: var(--color-dark-border-tertiary-inverted);
     --checkbox-active-border-color: var(--color-dark-border-key);
+    --radio-label-color: var(--color-dark-text-primary);
     --radio-bg-color: var(--color-dark-bg-secondary);
-    --checkbox-border-color: var(--color-dark-border-secondary-inverted);
-    --checkbox-hover-bg-color: var(--color-dark-border-secondary-inverted);
-    --checkbox-hover-border-color: var(--color-dark-border-tertiary-inverted);
-    --checkbox-active-border-color: var(--color-dark-border-key);
+    --radio-border-color: var(--color-dark-border-secondary-inverted);
+    --radio-hover-bg-color: var(--color-dark-border-secondary-inverted);
+    --radio-hover-border-color: var(--color-dark-border-tertiary-inverted);
+    --radio-active-border-color: var(--color-dark-border-key);
 }
 
 @define-mixin theme-light {
-    --switch-label-color: var(--color-light-text-primary);
+    --checkbox-label-color: var(--color-light-text-primary);
     --checkbox-bg-color: var(--color-light-bg-secondary);
     --checkbox-border-color: var(--color-light-border-secondary-inverted);
     --checkbox-hover-bg-color: var(--color-light-border-secondary-inverted);
     --checkbox-hover-border-color: var(--color-light-border-tertiary-inverted);
     --checkbox-active-border-color: var(--color-light-border-key);
+    --radio-label-color: var(--color-light-text-primary);
     --radio-bg-color: var(--color-light-bg-secondary);
-    --checkbox-border-color: var(--color-light-border-secondary-inverted);
-    --checkbox-hover-bg-color: var(--color-light-border-secondary-inverted);
-    --checkbox-hover-border-color: var(--color-light-border-tertiary-inverted);
-    --checkbox-active-border-color: var(--color-light-border-key);
+    --radio-border-color: var(--color-light-border-secondary-inverted);
+    --radio-hover-bg-color: var(--color-light-border-secondary-inverted);
+    --radio-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-active-border-color: var(--color-light-border-key);
 }
 
 @define-mixin theme-red-eye {
-    --switch-label-color: var(--color-dark-text-accent);
+    --checkbox-label-color: var(--color-dark-text-accent);
     --checkbox-bg-color: transparent;
     --checkbox-border-color: var(--color-dark-border-accent);
     --checkbox-hover-bg-color: var(--color-dark-bg-negative-muted);
     --checkbox-hover-border-color: var(--color-dark-border-accent);
     --checkbox-active-border-color: var(--color-dark-border-key);
+    --radio-label-color: var(--color-dark-text-accent);
     --radio-bg-color: transparent;
     --radio-border-color: var(--color-dark-border-accent);
     --radio-hover-bg-color: var(--color-dark-bg-negative-muted);

diff --git a/packages/checkbox/src/index.module.css b/packages/checkbox/src/index.module.css
@@ -1,6 +1,8 @@
 @import '../../themes/src/default.css';
 
 :root {
+    --checkbox-hint-color: var(--color-dark-indigo);
+    --checkbox-label-color: var(--color-dark-indigo-60-flat);
     --checkbox-bg-color: var(--color-dark-indigo-05-flat);
     --checkbox-border-color: var(--color-dark-indigo-60-flat);
 
@@ -108,7 +110,7 @@
 .label {
     @mixin system_16-24_regular;
     display: block;
-    color: var(--switch-label-color);
+    color: var(--checkbox-label-color);
 }
 
 .label:not(:only-child) {
@@ -118,7 +120,7 @@
 .hint {
     @mixin system_14-18_regular;
     display: block;
-    color: var(--switch-hint-color);
+    color: var(--checkbox-hint-color);
 }
 
 .indeterminateIcon {

diff --git a/packages/radio/src/index.module.css b/packages/radio/src/index.module.css
@@ -1,6 +1,8 @@
 @import '../../themes/src/default.css';
 
 :root {
+    --radio-hint-color: var(--color-dark-indigo);
+    --radio-label-color: var(--color-dark-indigo-60-flat);
     --radio-bg-color: var(--color-dark-indigo-05-flat);
     --radio-border-color: var(--color-dark-indigo-60-flat);
 
@@ -30,9 +32,10 @@
 
     &:not(.checked):not(.disabled) {
         &:active .circle {
-            background: var(--color-dark-indigo-30-flat);
+            background: var(--radio-hover-bg-color);
             border: 1px solid var(--radio-active-border-color);
         }
+
         & .circle {
             background: var(--radio-bg-color);
             border: 1px solid var(--radio-border-color);
@@ -118,11 +121,11 @@
 }
 .label {
     @mixin system_16-24_regular;
-    color: var(--switch-label-color);
+    color: var(--radio-label-color);
 }
 
 .hint {
     @mixin system_14-18_regular;
     margin-top: var(--gap-2xs);
-    color: var(--switch-hint-color);
+    color: var(--radio-hint-color);
 }