Merge pull request #94 from reaviz/Add-more-radio-css-variables

reaviz · Jan 4, 2024 · b4a04f3 · b4a04f3
2 parents 415c17a + a59c12c
commit b4a04f3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/docs/components/form/Radio.mdx b/docs/components/form/Radio.mdx
@@ -26,8 +26,11 @@ This component uses the following design tokens:
 
 - `radio-label-color`
 - `radio-stroke`
-- `radio-indicator-active`
 - `radio-stroke-active`
+- `radio-stroke-size`
+- `radio-background`
+- `radio-indicator-size`
+- `radio-indicator-active`
 
 Learn more about design tokens in the [design tokens documentation](?path=/story/docs-design-tokens-getting-started--page).
 

diff --git a/docs/theme/ThemeExample.mdx b/docs/theme/ThemeExample.mdx
@@ -350,8 +350,10 @@ export const darkTheme: Theme = {
     radio: {
       'radio-label-color': darkColors.white,
       'radio-stroke': darkColors.slate['100'],
-      'radio-indicator-active': darkColors.blue['100'],
-      'radio-stroke-active': darkColors.blue['100']
+      'radio-stroke-active': darkColors.blue['100'],
+      'radio-stroke-size': '1px',
+      'radio-background': 'transparent',
+      'radio-indicator-active': darkColors.blue['100']
     },
     stack: {
       'stack-gap': spacings.md,

diff --git a/src/form/Radio/Radio.module.css b/src/form/Radio/Radio.module.css
@@ -16,7 +16,8 @@
 }
 
 .radio {
-  border: 1px solid var(--radio-stroke);
+  border: var(--radio-stroke-size) solid var(--radio-stroke);
+  background-color: var(--radio-background);
   border-radius: 100%;
   will-change: border-color;
   display: inline-flex;
@@ -43,8 +44,8 @@
     height: 14px;
 
     .indicator {
-      width: 6px;
-      height: 6px;
+      width: var(--radio-indicator-size, 6px);
+      height: var(--radio-indicator-size, 6px);
     }
   }
 
@@ -53,8 +54,8 @@
     height: 16px;
 
     .indicator {
-      width: 8px;
-      height: 8px;
+      width: var(--radio-indicator-size, 8px);
+      height: var(--radio-indicator-size, 8px);
     }
   }
 
@@ -63,8 +64,8 @@
     height: 20px;
 
     .indicator {
-      width: 10px;
-      height: 10px;
+      width: var(--radio-indicator-size, 10px);
+      height: var(--radio-indicator-size, 10px);
     }
   }
 

diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
@@ -318,8 +318,10 @@ export const darkTheme: Theme = {
     radio: {
       'radio-label-color': darkColors.white,
       'radio-stroke': darkColors.slate['100'],
-      'radio-indicator-active': darkColors.blue['100'],
-      'radio-stroke-active': darkColors.blue['100']
+      'radio-stroke-active': darkColors.blue['100'],
+      'radio-stroke-size': '1px',
+      'radio-background': 'transparent',
+      'radio-indicator-active': darkColors.blue['100']
     },
     select: {
       'select-input-border-radius': spacings.sm,