Focus indicator style

1 files changed, 33 insertions, 52 deletions

diff --git a/src/_config.scss b/src/_config.scss
index fd338a9..da97476 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -117,34 +117,6 @@ $theme-light: (
         --green:  oklch(56% 0.16 150.48) --colors --muted,
         --yellow: oklch(56% 0.16 84.08)  --colors --muted,
     ),
-
-    --semantic: (
-        --accent:          --blue,
-        --accent-static:   --blue-static,
-        --positive:        --green,
-        --positive-static: --green-static,
-        --negative:        --red,
-        --negative-static: --red-static,
-        --warning:         --yellow,
-        --warning-static:  --yellow-static,
-
-        --focus:           --yellow,
-        --focus-static:    --yellow-static,
-
-        --bg-l2:           --base --50,
-        --bg-l1:           --base --100,
-        --bg-base:         --base --200,
- 
-        --border-mute:     --base --200,
-        --border:          --base --300,
-        --border-strong:   --base --400,
- 
-        --text-disabled:   --base --500,
-        --text-mute-more:  --base --600,
-        --text-mute:       --base --700,
-        --text:            --base --800,
-        --heading:         --base --900,
-    ),
 ) !default;
 
 $theme-dark: (
@@ -195,33 +167,42 @@ $theme-dark: (
         --green:  oklch(56% 0.16 150.48) --colors --muted,
         --yellow: oklch(56% 0.16 84.08)  --colors --muted,
     ),
+) !default;
+
+$semantic-colors: (
+    --accent:          --blue,
+    --accent-static:   --blue-static,
+    --positive:        --green,
+    --positive-static: --green-static,
+    --negative:        --red,
+    --negative-static: --red-static,
+    --warning:         --yellow,
+    --warning-static:  --yellow-static,
+
+    --focus-raw:       --accent,
+    --focus-static:    --accent-static,
+
+    --bg-l2:           --base --50,
+    --bg-l1:           --base --100,
+    --bg-base:         --base --200,
 
-    --semantic: (
-        --accent:          --blue,
-        --accent-static:   --blue-static,
-        --positive:        --green,
-        --positive-static: --green-static,
-        --negative:        --red,
-        --negative-static: --red-static,
-        --warning:         --yellow,
-        --warning-static:  --yellow-static,
+    --border-mute:     --base --200,
+    --border:          --base --300,
+    --border-strong:   --base --400,
 
-        --focus:           --yellow,
-        --focus-static:    --yellow-static,
+    --text-disabled:   --base --500,
+    --text-mute-more:  --base --600,
+    --text-mute:       --base --700,
+    --text:            --base --800,
+    --heading:         --base --900,
 
-        --bg-base:         --base --50,
-        --bg-l1:           --base --75,
-        --bg-l2:           --base --100,
- 
-        --border-mute:     --base --200,
-        --border:          --base --300,
-        --border-strong:   --base --400,
- 
-        --text-disabled:   --base --500,
-        --text-mute-more:  --base --600,
-        --text-mute:       --base --700,
-        --text:            --base --800,
-        --heading:         --base --900,
+    --focus: (
+        --outline:       --focus-raw --400,
+        --border-mute:   --focus-raw --900,
+        --border:        --focus-raw --1000,
+        --border-text:   --focus-raw --1000-text,
+        --border-strong: --focus-raw --1100,
+        --text:          --focus-raw --1100,
     ),
 ) !default;