feat(radio): improved theming

core-ds · Nov 19, 2020 · 3dcb532 · 3dcb532
1 parent cb1d196
commit 3dcb532
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/packages/radio/src/Component.stories.mdx b/packages/radio/src/Component.stories.mdx
@@ -6,7 +6,11 @@ import { Radio } from './Component';
 import { name, version } from '../package.json';
 
 
-<Meta title='Компоненты' component={Radio} />
+<Meta
+    title='Компоненты'
+    component={Radio}
+    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+/>
 
 
 <!-- Canvas -->

diff --git a/packages/radio/src/index.module.css b/packages/radio/src/index.module.css
@@ -3,27 +3,30 @@
 :root {
     --radio-hint-color: var(--color-light-text-secondary);
     --radio-label-color: var(--color-light-text-primary);
+
+    /* unchecked */
     --radio-bg-color: var(--color-light-bg-secondary);
     --radio-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-hover-bg-color: var(--color-light-graphic-tertiary);
+    --radio-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-active-bg-color: var(--color-light-graphic-tertiary);
+    --radio-active-border-color: var(--color-light-border-key);
 
     /* checked */
     --radio-checked-bg-color: var(--color-red-brand-85-flat); /* TODO */
     --radio-checked-border-color: var(--color-red-dark); /* TODO */
+    --radio-checked-hover-bg-color: var(--color-light-bg-accent);
+    --radio-checked-hover-border-color: var(--color-red-dark); /* TODO */
+    --radio-checked-active-bg-color: var(--color-light-bg-accent);
+    --radio-checked-active-border-color: var(--color-light-border-key);
 
     /* disabled */
-    --radio-disabled-bg-color: var(--color-light-graphic-neutral);
+    --radio-disabled-bg-color: var(--color-light-bg-neutral);
+    --radio-disabled-border-color: var(--color-light-border-primary);
 
     /* disabled and checked */
-    --radio-checked-disabled-bg-color: var(--color-red-brand-30-flat);
-
-    /* hover */
-    --radio-hover-bg-color: var(--color-light-graphic-tertiary);
-    --radio-hover-border-color: var(--color-light-graphic-secondary);
-    --radio-checked-hover-bg-color: var(--color-light-graphic-accent);
-
-    /* active */
-    --radio-active-bg-color: var(--color-light-graphic-accent);
-    --radio-active-border-color: var(--color-light-graphic-primary);
+    --radio-checked-disabled-bg-color: var(--color-red-brand-30-flat); /* TODO */
+    --radio-checked-disabled-border-color: var(--color-red-brand-30-flat); /* TODO */
 }
 
 .container {
@@ -32,28 +35,28 @@
     cursor: pointer;
 
     &:not(.checked):not(.disabled) {
-        &:active .circle {
-            background: var(--radio-hover-bg-color);
-            border: 1px solid var(--radio-active-border-color);
-        }
-
         & .circle {
-            background: var(--radio-bg-color);
+            background-color: var(--radio-bg-color);
             border: 1px solid var(--radio-border-color);
         }
 
         &:hover:not(:active) .circle {
-            background: var(--radio-hover-bg-color);
-            border: 1px solid var(--radio-hover-border-color);
+            background-color: var(--radio-hover-bg-color);
+            border-color: var(--radio-hover-border-color);
+        }
+
+        &:active .circle {
+            background-color: var(--radio-active-bg-color);
+            border-color: var(--radio-active-border-color);
         }
     }
 
     &.disabled {
         cursor: default;
 
         & .circle {
-            background: var(--radio-disabled-bg-color);
-            border: none;
+            background-color: var(--radio-disabled-bg-color);
+            border: 1px solid var(--radio-disabled-border-color);
         }
     }
 
@@ -63,18 +66,19 @@
     }
 
     &.checked {
-        &:active .circle {
-            border: 1px solid var(--radio-active-border-color);
-            background: var(--radio-active-bg-color);
-        }
-
         & .circle {
-            border: 1px solid var(--radio-checked-border-color);
             background-color: var(--radio-checked-bg-color);
+            border: 1px solid var(--radio-checked-border-color);
         }
 
         &:hover .circle {
             background-color: var(--radio-checked-hover-bg-color);
+            border-color: var(--radio-checked-hover-border-color);
+        }
+
+        &:active .circle {
+            background-color: var(--radio-checked-active-bg-color);
+            border-color: var(--radio-checked-active-border-color);
         }
     }
 
@@ -84,7 +88,7 @@
 
     &.disabled.checked .circle {
         background-color: var(--radio-checked-disabled-bg-color);
-        border: none;
+        border-color: var(--radio-checked-disabled-border-color);
     }
 
     & input {
@@ -125,6 +129,7 @@
     display: flex;
     flex-direction: column;
 }
+
 .label {
     @mixin system_16-24_regular;
     color: var(--radio-label-color);