From 5ef0af7b56e857cf64f318d87573843039c30d0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= Date: Thu, 12 Mar 2026 09:17:55 +0900 Subject: [PATCH] Change Switch Stylesheet to Use OKLCH --- src/app/components/switch/switch.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/components/switch/switch.scss b/src/app/components/switch/switch.scss index 9f3e78f..9e5c680 100644 --- a/src/app/components/switch/switch.scss +++ b/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