diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss index 2a50a2a..dc70705 100644 --- a/src/app/components/dropdown/dropdown.scss +++ b/src/app/components/dropdown/dropdown.scss @@ -40,7 +40,7 @@ $default_animation_duration: 0.2s; max-width: 100%; &:has(.dropdown-input.focus-mode:focus-visible) { - outline: 2px solid list.nth(library.$brand_palette, 5); + outline: 2px solid var(--selection-outline-color); outline-offset: 2px; } } @@ -195,7 +195,7 @@ $default_animation_duration: 0.2s; light-dark($hover_bg, $hover_dark_bg) calc(var(--hover-state) * 100%) ), - light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11)) + light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 12)) calc(var(--selected-state) * 100%) ); @@ -209,7 +209,7 @@ $default_animation_duration: 0.2s; &.selected { --selected-state: 1; - color: list.nth(library.$brand_palette, 5); + color: light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 6)); font-weight: 600; } } diff --git a/src/app/components/switch/switch.scss b/src/app/components/switch/switch.scss index e1f6a0f..526cd1d 100644 --- a/src/app/components/switch/switch.scss +++ b/src/app/components/switch/switch.scss @@ -30,14 +30,14 @@ $default_animation_duration: 0.2s; background-color: color-mix( in oklch, light-dark($off_bg, $off_dark_bg), - light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 8)) + light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 6)) calc(var(--animation-state) * 100%) ); box-shadow: 0 0 0 1px color-mix( in oklch, light-dark($border_color, $border_dark_color), - light-dark($border_color, list.nth(library.$brand_palette, 10)) + light-dark($border_color, list.nth(library.$brand_palette, 9)) calc(var(--animation-state) * 100%) ) inset; diff --git a/src/styles.scss b/src/styles.scss index eb54a0f..0abf5cd 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -118,7 +118,11 @@ section.feature-block { margin: 0 auto; } +* { + --selection-outline-color: light-dark(#{list.nth(library.$brand_palette, 5)}, #{list.nth(library.$brand_palette, 6)}); +} + *:focus-visible { - outline: 2px solid list.nth(library.$brand_palette, 5); + outline: 2px solid var(--selection-outline-color); outline-offset: 2px; } diff --git a/src/styles/_library.scss b/src/styles/_library.scss index 06e4420..e27c451 100644 --- a/src/styles/_library.scss +++ b/src/styles/_library.scss @@ -12,5 +12,21 @@ $brand_palette: [ oklch(0.4509 0.1688 29.86), // #9E190E oklch(0.3897 0.1391 29.75), // #7F180F oklch(0.2547 0.0913 29.02), // #450805 + oklch(0.1752 0.0717 29.02), // #280000 ]; +/* +$brand_palette: [ + oklch(0.9999 0.2237 35.33), + oklch(0.9090 0.2237 35.33), + oklch(0.8181 0.2237 35.33), + oklch(0.7272 0.2237 35.33), + oklch(0.6363 0.2237 35.33), + oklch(0.5454 0.2237 35.33), + oklch(0.4545 0.2237 35.33), + oklch(0.3636 0.2237 35.33), + oklch(0.2727 0.2237 35.33), + oklch(0.1818 0.2237 35.33), + oklch(0.0909 0.2237 35.33), +]; +*/