3 files changed, 90 insertions, 108 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: (
+    --semantic: map.merge($semantic-colors-common, (
-        --outline:       --focus-raw --400,
+        --bg-base: --base --50,
-        --border-mute:   --focus-raw --900,
+        --bg-l1:   --base --75,
-        --border:        --focus-raw --1000,
+        --bg-l2:   --base --100,
-        --border-text:   --focus-raw --1000-text,
+    )),
-        --border-strong: --focus-raw --1100,
-        --text:          --focus-raw --1100,
-    ),
 ) !default;
 $themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index f657057..a38fb8c 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -227,7 +227,7 @@
        ), $tree);
    }
-    @each $color, $ref in config.$semantic-colors {
+    @each $color, $ref in map.get($theme, --semantic) {
        $res: ();
        @if meta.type-of($ref) == 'map' {
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6f0288d..6286f4e 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -22,7 +22,7 @@
            --border: fn.global-color(--border-strong),
    
            --hover: (
-                --bg:     fn.global-color(--base --50),
+                --bg:     fn.global-color(--border-mute),
                --label:  fn.global-color(--heading),
                --border: fn.global-color(--text-mute-more),
            ),
@@ -31,20 +31,31 @@
                --label:  fn.global-color(--heading),
                --border: fn.global-color(--text-mute-more),
            ),
+            --disabled: (
+                --bg:     fn.global-color(--bg-l1),
+                --label:  fn.global-color(--border-strong),
+                --border: fn.global-color(--border-mute),
+            ),
            --selected: (
-                --bg:     fn.global-color(--border-mute),
+                --bg:     fn.global-color(--text-mute),
-                --label:  fn.global-color(--text),
+                --label:  fn.global-color(--base --50),
-                --border: fn.global-color(--text-disabled),
+                --border: fn.global-color(--text-mute),
                --hover: (
-                    --label:  fn.global-color(--heading),
+                    --bg:     fn.global-color(--text),
-                    --border: fn.global-color(--text-mute-more),
+                    --label:  fn.global-color(--base --50),
+                    --border: fn.global-color(--text),
+                ),
+                --active: (
+                    --bg:     fn.global-color(--heading),
+                    --label:  fn.global-color(--base --50),
+                    --border: fn.global-color(--heading),
+                ),
+                --disabled: (
+                    --bg:     fn.global-color(--border-mute),
+                    --label:  fn.global-color(--border-strong),
+                    --border: fn.global-color(--border-mute),
                ),
-            ),
-            --disabled: (
-                --bg:     fn.global-color(--bg-base),
-                --label:  fn.global-color(--text-disabled),
-                --border: fn.global-color(--border-mute),
            ),
            --key-focus: (
                --border:  fn.global-color(--focus --border),
@@ -61,15 +72,6 @@
                    --bg:    fn.global-color(--border),
                    --label: fn.global-color(--heading),
                ),
-                --selected: (
-                    --bg:    fn.global-color(--border-mute),
-                    --label: fn.global-color(--text),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--border),
-                        --label: fn.global-color(--heading),
-                    ),
-                ),
                --disabled: (
                    --label: fn.global-color(--text-disabled),
                ),
@@ -132,31 +134,6 @@
            }
        }
    
-        @include iro.bem-is('selected') {
-            &:link,
-            &:visited,
-            &:enabled {
-                border-color:     fn.color(--selected --border);
-                background-color: fn.color(--selected --bg);
-                color:            fn.color(--selected --label);
-        
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    border-color:     fn.color(--selected --hover --border);
-                    background-color: fn.color(--selected --bg);
-                    color:            fn.color(--selected --hover --label);
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        background-color: fn.color(--selected --bg);
-                        color:            fn.color(--selected --hover --label);
-                    }
-                }
-            }
-        }
-    
        @include iro.bem-modifier('quiet') {
            border-color:     transparent;
            background-color: transparent;
@@ -185,35 +162,32 @@
                    box-shadow:       none;
                    color:            fn.color(--quiet --active --label);
                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        background-color: fn.color(--quiet --hover --bg);
-                        color:            fn.color(--quiet --hover --label);
-                    }
-                }
            }
+        }
    
-            @include iro.bem-is('selected') {
+        @include iro.bem-is('selected') {
-                background-color: fn.color(--quiet --selected --bg);
+            border-color:     fn.color(--selected --disabled --border);
-                color:            fn.color(--quiet --disabled --label);
+            background-color: fn.color(--selected --disabled --bg);
+            color:            fn.color(--selected --disabled --label);
-                &:link,
-                &:visited,
-                &:enabled {
-                    border-color:     transparent;
-                    background-color: fn.color(--quiet --selected --bg);
-                    box-shadow:       none;
-                    color:            fn.color(--quiet --selected --label);
-                    &:hover,
+            &:link,
-                    &:active,
+            &:visited,
-                    &:focus-visible {
+            &:enabled {
-                        border-color:     transparent;
+                border-color:     fn.color(--selected --border);
-                        background-color: fn.color(--quiet --selected --hover --bg);
+                background-color: fn.color(--selected --bg);
-                        box-shadow:       none;
+                color:            fn.color(--selected --label);
-                        color:            fn.color(--quiet --selected --hover --label);
+        
-                    }
+                &:hover,
+                &:focus-visible {
+                    border-color:     fn.color(--selected --hover --border);
+                    background-color: fn.color(--selected --hover --bg);
+                    color:            fn.color(--selected --hover --label);
+                }
+        
+                &:active {
+                    border-color:     fn.color(--selected --active --border);
+                    background-color: fn.color(--selected --active --bg);
+                    color:            fn.color(--selected --active --label);
                }
            }
        }

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: (
69	),	69	),
70	) !default;	70	) !default;
71		71
		72	$semantic-colors-common: (
		73	--accent: --blue,
		74	--accent-static: --blue-static,
		75	--positive: --green,
		76	--positive-static: --green-static,
		77	--negative: --red,
		78	--negative-static: --red-static,
		79	--warning: --yellow,
		80	--warning-static: --yellow-static,
		81
		82	--focus-raw: --accent,
		83	--focus-static: --accent-static,
		84
		85	--border-mute: --base --200,
		86	--border: --base --300,
		87	--border-strong: --base --400,
		88
		89	--text-disabled: --base --500,
		90	--text-mute-more: --base --600,
		91	--text-mute: --base --700,
		92	--text: --base --800,
		93	--heading: --base --900,
		94
		95	--focus: (
		96	--outline: --focus-raw --400,
		97	--border-mute: --focus-raw --900,
		98	--border: --focus-raw --1000,
		99	--border-text: --focus-raw --1000-text,
		100	--border-strong: --focus-raw --1100,
		101	--text: --focus-raw --1100,
		102	),
		103	) !default;
		104
72	$theme-light: (	105	$theme-light: (
73	--contrasts: (	106	--contrasts: (
74	--grays: (	107	--grays: (
@@ -117,6 +150,12 @@ $theme-light: (
117	--green: oklch(56% 0.16 150.48) --colors --muted,	150	--green: oklch(56% 0.16 150.48) --colors --muted,
118	--yellow: oklch(56% 0.16 84.08) --colors --muted,	151	--yellow: oklch(56% 0.16 84.08) --colors --muted,
119	),	152	),
		153
		154	--semantic: map.merge($semantic-colors-common, (
		155	--bg-l2: --base --50,
		156	--bg-l1: --base --100,
		157	--bg-base: --base --200,
		158	)),
120	) !default;	159	) !default;
121		160
122	$theme-dark: (	161	$theme-dark: (
@@ -167,43 +206,12 @@ $theme-dark: (
167	--green: oklch(56% 0.16 150.48) --colors --muted,	206	--green: oklch(56% 0.16 150.48) --colors --muted,
168	--yellow: oklch(56% 0.16 84.08) --colors --muted,	207	--yellow: oklch(56% 0.16 84.08) --colors --muted,
169	),	208	),
170	) !default;
171
172	$semantic-colors: (
173	--accent: --blue,
174	--accent-static: --blue-static,
175	--positive: --green,
176	--positive-static: --green-static,
177	--negative: --red,
178	--negative-static: --red-static,
179	--warning: --yellow,
180	--warning-static: --yellow-static,
181
182	--focus-raw: --accent,
183	--focus-static: --accent-static,
184
185	--bg-l2: --base --50,
186	--bg-l1: --base --100,
187	--bg-base: --base --200,
188
189	--border-mute: --base --200,
190	--border: --base --300,
191	--border-strong: --base --400,
192
193	--text-disabled: --base --500,
194	--text-mute-more: --base --600,
195	--text-mute: --base --700,
196	--text: --base --800,
197	--heading: --base --900,
198		209
199	--focus: (	210	--semantic: map.merge($semantic-colors-common, (
200	--outline: --focus-raw --400,	211	--bg-base: --base --50,
201	--border-mute: --focus-raw --900,	212	--bg-l1: --base --75,
202	--border: --focus-raw --1000,	213	--bg-l2: --base --100,
203	--border-text: --focus-raw --1000-text,	214	)),
204	--border-strong: --focus-raw --1100,
205	--text: --focus-raw --1100,
206	),
207	) !default;	215	) !default;
208		216
209	$themes: (	217	$themes: (


diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index f657057..a38fb8c 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss
@@ -227,7 +227,7 @@
227	), $tree);	227	), $tree);
228	}	228	}
229		229
230	@each $color, $ref in config.$semantic-colors {	230	@each $color, $ref in map.get($theme, --semantic) {
231	$res: ();	231	$res: ();
232		232
233	@if meta.type-of($ref) == 'map' {	233	@if meta.type-of($ref) == 'map' {


diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 6f0288d..6286f4e 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss
@@ -22,7 +22,7 @@
22	--border: fn.global-color(--border-strong),	22	--border: fn.global-color(--border-strong),
23		23
24	--hover: (	24	--hover: (
25	--bg: fn.global-color(--base --50),	25	--bg: fn.global-color(--border-mute),
26	--label: fn.global-color(--heading),	26	--label: fn.global-color(--heading),
27	--border: fn.global-color(--text-mute-more),	27	--border: fn.global-color(--text-mute-more),
28	),	28	),
@@ -31,20 +31,31 @@
31	--label: fn.global-color(--heading),	31	--label: fn.global-color(--heading),
32	--border: fn.global-color(--text-mute-more),	32	--border: fn.global-color(--text-mute-more),
33	),	33	),
		34	--disabled: (
		35	--bg: fn.global-color(--bg-l1),
		36	--label: fn.global-color(--border-strong),
		37	--border: fn.global-color(--border-mute),
		38	),
34	--selected: (	39	--selected: (
35	--bg: fn.global-color(--border-mute),	40	--bg: fn.global-color(--text-mute),
36	--label: fn.global-color(--text),	41	--label: fn.global-color(--base --50),
37	--border: fn.global-color(--text-disabled),	42	--border: fn.global-color(--text-mute),
38		43
39	--hover: (	44	--hover: (
40	--label: fn.global-color(--heading),	45	--bg: fn.global-color(--text),
41	--border: fn.global-color(--text-mute-more),	46	--label: fn.global-color(--base --50),
		47	--border: fn.global-color(--text),
		48	),
		49	--active: (
		50	--bg: fn.global-color(--heading),
		51	--label: fn.global-color(--base --50),
		52	--border: fn.global-color(--heading),
		53	),
		54	--disabled: (
		55	--bg: fn.global-color(--border-mute),
		56	--label: fn.global-color(--border-strong),
		57	--border: fn.global-color(--border-mute),
42	),	58	),
43	),
44	--disabled: (
45	--bg: fn.global-color(--bg-base),
46	--label: fn.global-color(--text-disabled),
47	--border: fn.global-color(--border-mute),
48	),	59	),
49	--key-focus: (	60	--key-focus: (
50	--border: fn.global-color(--focus --border),	61	--border: fn.global-color(--focus --border),
@@ -61,15 +72,6 @@
61	--bg: fn.global-color(--border),	72	--bg: fn.global-color(--border),
62	--label: fn.global-color(--heading),	73	--label: fn.global-color(--heading),
63	),	74	),
64	--selected: (
65	--bg: fn.global-color(--border-mute),
66	--label: fn.global-color(--text),
67
68	--hover: (
69	--bg: fn.global-color(--border),
70	--label: fn.global-color(--heading),
71	),
72	),
73	--disabled: (	75	--disabled: (
74	--label: fn.global-color(--text-disabled),	76	--label: fn.global-color(--text-disabled),
75	),	77	),
@@ -132,31 +134,6 @@
132	}	134	}
133	}	135	}
134		136
135	@include iro.bem-is('selected') {
136	&:link,
137	&:visited,
138	&:enabled {
139	border-color: fn.color(--selected --border);
140	background-color: fn.color(--selected --bg);
141	color: fn.color(--selected --label);
142
143	&:hover,
144	&:active,
145	&:focus-visible {
146	border-color: fn.color(--selected --hover --border);
147	background-color: fn.color(--selected --bg);
148	color: fn.color(--selected --hover --label);
149	}
150
151	@include iro.bem-at-theme('keyboard') {
152	&:focus {
153	background-color: fn.color(--selected --bg);
154	color: fn.color(--selected --hover --label);
155	}
156	}
157	}
158	}
159
160	@include iro.bem-modifier('quiet') {	137	@include iro.bem-modifier('quiet') {
161	border-color: transparent;	138	border-color: transparent;
162	background-color: transparent;	139	background-color: transparent;
@@ -185,35 +162,32 @@
185	box-shadow: none;	162	box-shadow: none;
186	color: fn.color(--quiet --active --label);	163	color: fn.color(--quiet --active --label);
187	}	164	}
188
189	@include iro.bem-at-theme('keyboard') {
190	&:focus {
191	background-color: fn.color(--quiet --hover --bg);
192	color: fn.color(--quiet --hover --label);
193	}
194	}
195	}	165	}
		166	}
196		167
197	@include iro.bem-is('selected') {	168	@include iro.bem-is('selected') {
198	background-color: fn.color(--quiet --selected --bg);	169	border-color: fn.color(--selected --disabled --border);
199	color: fn.color(--quiet --disabled --label);	170	background-color: fn.color(--selected --disabled --bg);
200		171	color: fn.color(--selected --disabled --label);
201	&:link,
202	&:visited,
203	&:enabled {
204	border-color: transparent;
205	background-color: fn.color(--quiet --selected --bg);
206	box-shadow: none;
207	color: fn.color(--quiet --selected --label);
208		172
209	&:hover,	173	&:link,
210	&:active,	174	&:visited,
211	&:focus-visible {	175	&:enabled {
212	border-color: transparent;	176	border-color: fn.color(--selected --border);
213	background-color: fn.color(--quiet --selected --hover --bg);	177	background-color: fn.color(--selected --bg);
214	box-shadow: none;	178	color: fn.color(--selected --label);
215	color: fn.color(--quiet --selected --hover --label);	179
216	}	180	&:hover,
		181	&:focus-visible {
		182	border-color: fn.color(--selected --hover --border);
		183	background-color: fn.color(--selected --hover --bg);
		184	color: fn.color(--selected --hover --label);
		185	}
		186
		187	&:active {
		188	border-color: fn.color(--selected --active --border);
		189	background-color: fn.color(--selected --active --bg);
		190	color: fn.color(--selected --active --label);
217	}	191	}
218	}	192	}
219	}	193	}