From 88895f43bb946acc07b3516a68aeab2777511249 Mon Sep 17 00:00:00 2001
From: Adam Laki <info@adamlaki.com>
Date: Tue, 20 Aug 2024 15:28:45 +0200
Subject: [PATCH] Add separate colors for switch (from check)

---
 preview/assets/scss/config/_config.scss | 10 +++++++++-
 scss/config/_color.scss                 |  3 +++
 scss/form/_check.scss                   |  2 +-
 scss/form/_switch.scss                  | 18 +++++++++---------
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/preview/assets/scss/config/_config.scss b/preview/assets/scss/config/_config.scss
index 0d3d1cc..c445faf 100644
--- 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
index 4ac6343..7ff2df7 100644
--- 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
index 6026d47..96fc265 100644
--- 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
index 4bc8633..355e65b 100644
--- 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 {