Action button styling

1 files changed, 44 insertions, 36 deletions

diff --git a/src/_config.scss b/src/_config.scss
index da97476..56a74e1 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -69,6 +69,39 @@ $static-colors: (
     ),
 ) !default;
 
+$semantic-colors-common: (
+    --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,
+
+    --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;
+
 $theme-light: (
     --contrasts: (
         --grays: (
@@ -117,6 +150,12 @@ $theme-light: (
         --green:  oklch(56% 0.16 150.48) --colors --muted,
         --yellow: oklch(56% 0.16 84.08)  --colors --muted,
     ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-l2:   --base --50,
+        --bg-l1:   --base --100,
+        --bg-base: --base --200,
+    )),
 ) !default;
 
 $theme-dark: (
@@ -167,43 +206,12 @@ $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,
-
-    --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,
-    ),
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-base: --base --50,
+        --bg-l1:   --base --75,
+        --bg-l2:   --base --100,
+    )),
 ) !default;
 
 $themes: (