Change Switch Stylesheet to Use OKLCH

src/app/components/switch/switch.scss

@@ -2,8 +2,9 @@
 @use "sass:list";
 @use "styles/library" as library;
 
-$slider_on_bg: #FF6E37;
-$slider_off_bg: #999999;
+$switch_inset_border_color: oklch(0 0 0 / 20%);
+$switch_on_bg: oklch(0.7086 0.1896 39.86); // #FF6E37
+$switch_off_bg: oklch(0.683 0 0); // #999999
 
 $switch_dimension: (57px, 30px);
 $switch_slider_dimension: (24px, 24px);
@@ -17,11 +18,11 @@ $switch_animation_duration: 0.3s;
   display: inline-block;
   width: list.nth($switch_dimension, 1); height: list.nth($switch_dimension, 2);
   border-radius: $switch_border_radius;
-  background-color: $slider_off_bg;
+  background-color: $switch_off_bg;
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 0 0 1px $switch_inset_border_color inset;
   outline: none;
 
   --switch-duration: #{$switch_animation_duration};
@@ -38,14 +39,13 @@ $switch_animation_duration: 0.3s;
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px white, 0 0 0 4px $slider_on_bg;
+    box-shadow: 0 0 0 1px $switch_inset_border_color inset, 0 0 0 2px white, 0 0 0 4px $switch_on_bg;
   }
 
   &.active {
-    background-color: $slider_on_bg;
+    background-color: $switch_on_bg;
 
     .switch-knob {
-
       transform: translate(
           list.nth($switch_dimension, 1) - list.nth($switch_slider_dimension, 1) - list.nth($switch_padding, 1) * 2,
           list.nth($switch_dimension, 2) - list.nth($switch_slider_dimension, 2) - list.nth($switch_padding, 2) * 2