Add separate colors for switch (from check)

conedevelopment · Aug 20, 2024 · 88895f4 · 88895f4
1 parent a7b5332
commit 88895f4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/preview/assets/scss/config/_config.scss b/preview/assets/scss/config/_config.scss
@@ -23,6 +23,14 @@ $spacer: 1.25rem;
       'tertiary-foreground': hsl(0deg 0% 100%),
       'tertiary-shadow-focus': color.adjust($color-tertiary, $alpha: -0.75),
     ),
+    form: (
+      'check-background': red,
+      'check-focus-ring': olive,
+      'check-foreground': aqua,
+      'switch-background': pink,
+      'switch-focus-ring': blue,
+      'switch-foreground': yellow,
+    ),
   ),
   $dark-colors: dark.$colors,
   $form-select: (
@@ -48,7 +56,7 @@ $spacer: 1.25rem;
     'icon-size': 1.25rem,
   ),
   $form-fieldset: (
-    'layout-gap': 5rem,
+    'layout-gap': 1rem,
     'legend-font-family': serif,
   ),
   $form-label: (

diff --git a/scss/config/_color.scss b/scss/config/_color.scss
@@ -67,6 +67,9 @@ $colors: map.deep-merge(
       'range-track-background': $color-gray-light,
       'ring-focus': color.adjust($color-primary, $alpha: -0.75),
       'select-foreground': $color-black,
+      'switch-background': $color-primary,
+      'switch-focus-ring': $color-primary,
+      'switch-foreground': $color-white,
       'text': $color-gray,
       'valid': $color-success,
       'valid-focus-ring': color.adjust($color-success, $alpha: -0.75),

diff --git a/scss/form/_check.scss b/scss/form/_check.scss
@@ -74,7 +74,7 @@
       &:focus-visible {
         @include focus-ring(
           $type: config('focus-ring-type', $form-check, false),
-          $border-color: color('border-focus', 'form'),
+          $border-color: color('check-background', 'form'),
           $ring-color: color('check-focus-ring', 'form'),
           $box-shadow-type: config('focus-ring-box-shadow-type', $form-check, false),
           $ring-size: config('focus-ring-size', $form-check, false),

diff --git a/scss/form/_switch.scss b/scss/form/_switch.scss
@@ -73,20 +73,20 @@
 
       &:focus-visible {
         @include focus-ring(
-          $type: config('focus-ring-type', $form-check),
-          $border-color: color('border-focus', 'form'),
-          $ring-color: color('check-focus-ring', 'form'),
-          $box-shadow-type: config('focus-ring-box-shadow-type', $form-check),
-          $ring-size: config('focus-ring-size', $form-check),
-          $ring-offset: config('focus-ring-offset', $form-check)
+          $type: config('focus-ring-type', $form-check, false),
+          $border-color: color('switch-background', 'form'),
+          $ring-color: color('switch-focus-ring', 'form'),
+          $box-shadow-type: config('focus-ring-box-shadow-type', $form-check, false),
+          $ring-size: config('focus-ring-size', $form-check, false),
+          $ring-offset: config('focus-ring-offset', $form-check, false)
         );
       }
 
       &:checked {
-        @include field-icon(config('switch', $form-icon, false), color('check-foreground', 'form', 'true'));
-        background-color: color('check-background', 'form');
+        @include field-icon(config('switch', $form-icon, false), color('switch-foreground', 'form', 'true'));
+        background-color: color('switch-background', 'form');
         background-position: right center;
-        border-color: color('check-background', 'form');
+        border-color: color('switch-background', 'form');
       }
 
       &:disabled {