feat(checkbox, radio): css variables remapping (#899)

dialpad · Jun 19, 2023 · f710b50 · f710b50
1 parent ba29dfe
commit f710b50
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/lib/build/less/components/radio-checkbox.less b/lib/build/less/components/radio-checkbox.less
@@ -24,11 +24,12 @@
 .d-radio {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --check-radio-color: var(--dt-color-purple-400);
-    --check-radio-color-border: var(--dt-color-black-400);
-    --check-radio-color-border-disabled: hsla(var(--dt-color-black-900-hsl) / 0.09);
-    --check-radio-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
-    --check-radio-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
+    --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
+    --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
+    --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
+    --check-radio-color-background: var(--dt-inputs-color-background-default);
+    --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
+    --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
     --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
 
     //  [1] Check to see if we can use custom styles, if so reset the defaults
@@ -56,14 +57,12 @@
 
         &:focus,
         &:checked:focus {
-          --check-radio-color-border: var(--check-radio-color);
-
           outline: 0;
           box-shadow: var(--dt-shadow-focus);
         }
 
         &:checked {
-            --check-radio-color-border: var(--check-radio-color);
+            --check-radio-color-border: var(--check-radio-color-border-checked);
         }
     }
 
@@ -132,7 +131,7 @@
     display: inline-flex;
     flex: 1 auto;
     flex-direction: column;
-    color: var(--dt-color-black-800);
+    color: var(--dt-color-foreground-primary);
     font-weight: var(--dt-font-weight-normal);
     font-size: var(--dt-font-size-200);
     line-height: var(--dt-font-line-height-400);
@@ -155,7 +154,7 @@
         }
 
         &:checked {
-            --check-radio-color-background: var(--check-radio-color);
+            --check-radio-color-background: var(--check-radio-color-background-checked);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
 
@@ -176,8 +175,8 @@
 
         &--indeterminate,
         &:indeterminate {
-            --check-radio-color-background: var(--check-radio-color);
-            --check-radio-color-border: var(--check-radio-color);
+            --check-radio-color-background: var(--check-radio-color-background-checked);
+            --check-radio-color-border: var(--check-radio-color-border-checked);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
 
@@ -228,19 +227,19 @@
         }
 
         &:checked {
-            --check-radio-color-background: var(--check-radio-color);
+            --check-radio-color-background: var(--check-radio-color-background-checked);
 
             box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
 
             // Disabled
             &[disabled] {
-                --check-radio-color-background: var(--dt-color-black-400);
+                --check-radio-color-background: var(--check-radio-color-background-disabled);
             }
         }
 
         &--disabled:checked {
             --check-radio-color-border: var(--check-radio-color-border-disabled);
-            --check-radio-color-background: var(--dt-color-black-400);
+            --check-radio-color-background: var(--check-radio-color-background-disabled);
         }
     }
 }