ui-style-kit-css 1.0.2 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +79 -12
  2. package/README.md +23 -1
  3. package/dist/ui-style-kit.css +342 -0
  4. package/dist/ui-style-kit.min.css +1 -1
  5. package/package.json +5 -3
  6. package/styles/interactive-surface-bridge.css +341 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ui-style-kit-css",
3
- "version": "1.0.2",
4
- "description": "A CSS-only UI style and color theme kit with 11 visual systems, 10 shared color schemes, light/dark/contrast modes, and accessibility-focused native HTML coverage.",
3
+ "version": "1.2.1",
4
+ "description": "A CSS-only UI style and color theme kit with 11 visual systems, 10 shared color schemes, light/dark/contrast modes, and accessibility-focused native HTML coverage. Designed for easy integration into any web project, it provides a comprehensive set of styles and themes to create visually stunning and accessible user interfaces without the need for JavaScript.",
5
5
  "style": "dist/ui-style-kit.css",
6
6
  "main": "dist/ui-style-kit.css",
7
7
  "unpkg": "dist/ui-style-kit.min.css",
@@ -80,7 +80,9 @@
80
80
  "./styles/y2k": "./styles/y2k.css",
81
81
  "./y2k": "./styles/y2k.css",
82
82
  "./styles/retro-glass": "./styles/retro-glass.css",
83
- "./retro-glass": "./styles/retro-glass.css"
83
+ "./retro-glass": "./styles/retro-glass.css",
84
+ "./styles/interactive-surface-bridge": "./styles/interactive-surface-bridge.css",
85
+ "./interactive-surface-bridge": "./styles/interactive-surface-bridge.css"
84
86
  },
85
87
  "repository": {
86
88
  "type": "git",
package/styles/interactive-surface-bridge.css ADDED
@@ -0,0 +1,341 @@
1
+ /* =========================================================
2
+ UI Style Kit CSS x Interactive Surface CSS Bridge
3
+
4
+ This optional bridge maps UI Style Kit semantic tokens to
5
+ interactive-surface-css tokens so both libraries can be
6
+ used together without per-theme overrides.
7
+ ========================================================= */
8
+
9
+ :where([data-ui][data-theme][data-mode]) .interactive-surface {
10
+ --interactive-surface-border-width: 1px;
11
+ }
12
+
13
+ :where([data-ui="minimal-saas"][data-theme][data-mode]) .interactive-surface {
14
+ --interactive-surface-bg: var(--saas-surface-strong, var(--saas-surface, var(--saas-bg)));
15
+ --interactive-surface-fg: var(--saas-text);
16
+ --interactive-surface-border-color: var(--saas-border);
17
+ --interactive-surface-focus-ring-color: var(--saas-focus, var(--saas-accent, var(--saas-primary)));
18
+ --interactive-surface-radius: var(--saas-radius-md, 0.75rem);
19
+ --interactive-surface-state-layer-color: var(--saas-text);
20
+ --interactive-surface-light-icon-color: var(--saas-warning, var(--saas-accent));
21
+ --interactive-surface-dark-icon-color: var(--saas-text);
22
+ --interactive-surface-accessibility-icon-color: var(--saas-focus, var(--saas-accent));
23
+ --interactive-surface-light-icon-color-dark: var(--saas-warning, var(--saas-accent));
24
+ --interactive-surface-dark-icon-color-dark: var(--saas-text);
25
+ --interactive-surface-accessibility-icon-color-dark: var(--saas-focus, var(--saas-accent));
26
+ --interactive-surface-variant-primary-bg: var(--saas-primary);
27
+ --interactive-surface-variant-primary-fg: var(--saas-primary-text, var(--saas-bg));
28
+ --interactive-surface-variant-primary-border-color: var(--saas-primary);
29
+ --interactive-surface-variant-secondary-bg: var(--saas-secondary);
30
+ --interactive-surface-variant-secondary-fg: var(--saas-secondary-text, var(--saas-bg));
31
+ --interactive-surface-variant-secondary-border-color: var(--saas-secondary);
32
+ --interactive-surface-variant-accent-bg: var(--saas-accent);
33
+ --interactive-surface-variant-accent-border-color: var(--saas-accent);
34
+ --interactive-surface-variant-subtle-bg: var(--saas-surface-soft, var(--saas-surface));
35
+ --interactive-surface-variant-subtle-fg: var(--saas-text);
36
+ --interactive-surface-variant-subtle-border-color: var(--saas-border);
37
+ --interactive-surface-variant-warning-bg: var(--saas-warning);
38
+ --interactive-surface-variant-warning-border-color: var(--saas-warning);
39
+ --interactive-surface-variant-danger-bg: var(--saas-danger);
40
+ --interactive-surface-variant-danger-border-color: var(--saas-danger);
41
+ }
42
+
43
+ :where([data-ui="bento"][data-theme][data-mode]) .interactive-surface {
44
+ --interactive-surface-bg: var(--bento-surface-strong, var(--bento-surface, var(--bento-bg)));
45
+ --interactive-surface-fg: var(--bento-text);
46
+ --interactive-surface-border-color: var(--bento-border);
47
+ --interactive-surface-focus-ring-color: var(--bento-focus, var(--bento-accent, var(--bento-primary)));
48
+ --interactive-surface-radius: var(--bento-radius-md, 0.75rem);
49
+ --interactive-surface-state-layer-color: var(--bento-text);
50
+ --interactive-surface-light-icon-color: var(--bento-warning, var(--bento-accent));
51
+ --interactive-surface-dark-icon-color: var(--bento-text);
52
+ --interactive-surface-accessibility-icon-color: var(--bento-focus, var(--bento-accent));
53
+ --interactive-surface-light-icon-color-dark: var(--bento-warning, var(--bento-accent));
54
+ --interactive-surface-dark-icon-color-dark: var(--bento-text);
55
+ --interactive-surface-accessibility-icon-color-dark: var(--bento-focus, var(--bento-accent));
56
+ --interactive-surface-variant-primary-bg: var(--bento-primary);
57
+ --interactive-surface-variant-primary-fg: var(--bento-primary-text, var(--bento-bg));
58
+ --interactive-surface-variant-primary-border-color: var(--bento-primary);
59
+ --interactive-surface-variant-secondary-bg: var(--bento-secondary);
60
+ --interactive-surface-variant-secondary-fg: var(--bento-secondary-text, var(--bento-bg));
61
+ --interactive-surface-variant-secondary-border-color: var(--bento-secondary);
62
+ --interactive-surface-variant-accent-bg: var(--bento-accent);
63
+ --interactive-surface-variant-accent-border-color: var(--bento-accent);
64
+ --interactive-surface-variant-subtle-bg: var(--bento-surface-soft, var(--bento-surface));
65
+ --interactive-surface-variant-subtle-fg: var(--bento-text);
66
+ --interactive-surface-variant-subtle-border-color: var(--bento-border);
67
+ --interactive-surface-variant-warning-bg: var(--bento-warning);
68
+ --interactive-surface-variant-warning-border-color: var(--bento-warning);
69
+ --interactive-surface-variant-danger-bg: var(--bento-danger);
70
+ --interactive-surface-variant-danger-border-color: var(--bento-danger);
71
+ }
72
+
73
+ :where([data-ui="maximalist"][data-theme][data-mode]) .interactive-surface {
74
+ --interactive-surface-bg: var(--max-surface-strong, var(--max-surface, var(--max-bg)));
75
+ --interactive-surface-fg: var(--max-text);
76
+ --interactive-surface-border-color: var(--max-border);
77
+ --interactive-surface-focus-ring-color: var(--max-focus, var(--max-accent, var(--max-primary)));
78
+ --interactive-surface-radius: var(--max-radius-md, 0.75rem);
79
+ --interactive-surface-state-layer-color: var(--max-text);
80
+ --interactive-surface-light-icon-color: var(--max-warning, var(--max-accent));
81
+ --interactive-surface-dark-icon-color: var(--max-text);
82
+ --interactive-surface-accessibility-icon-color: var(--max-focus, var(--max-accent));
83
+ --interactive-surface-light-icon-color-dark: var(--max-warning, var(--max-accent));
84
+ --interactive-surface-dark-icon-color-dark: var(--max-text);
85
+ --interactive-surface-accessibility-icon-color-dark: var(--max-focus, var(--max-accent));
86
+ --interactive-surface-variant-primary-bg: var(--max-primary);
87
+ --interactive-surface-variant-primary-fg: var(--max-primary-text, var(--max-bg));
88
+ --interactive-surface-variant-primary-border-color: var(--max-primary);
89
+ --interactive-surface-variant-secondary-bg: var(--max-secondary);
90
+ --interactive-surface-variant-secondary-fg: var(--max-secondary-text, var(--max-bg));
91
+ --interactive-surface-variant-secondary-border-color: var(--max-secondary);
92
+ --interactive-surface-variant-accent-bg: var(--max-accent);
93
+ --interactive-surface-variant-accent-border-color: var(--max-accent);
94
+ --interactive-surface-variant-subtle-bg: var(--max-surface-soft, var(--max-surface));
95
+ --interactive-surface-variant-subtle-fg: var(--max-text);
96
+ --interactive-surface-variant-subtle-border-color: var(--max-border);
97
+ --interactive-surface-variant-warning-bg: var(--max-warning);
98
+ --interactive-surface-variant-warning-border-color: var(--max-warning);
99
+ --interactive-surface-variant-danger-bg: var(--max-danger);
100
+ --interactive-surface-variant-danger-border-color: var(--max-danger);
101
+ }
102
+
103
+ :where([data-ui="bauhaus"][data-theme][data-mode]) .interactive-surface {
104
+ --interactive-surface-bg: var(--bau-surface-strong, var(--bau-surface, var(--bau-bg)));
105
+ --interactive-surface-fg: var(--bau-text);
106
+ --interactive-surface-border-color: var(--bau-border);
107
+ --interactive-surface-focus-ring-color: var(--bau-focus, var(--bau-accent, var(--bau-primary)));
108
+ --interactive-surface-radius: var(--bau-radius-md, 0.75rem);
109
+ --interactive-surface-state-layer-color: var(--bau-text);
110
+ --interactive-surface-light-icon-color: var(--bau-warning, var(--bau-accent));
111
+ --interactive-surface-dark-icon-color: var(--bau-text);
112
+ --interactive-surface-accessibility-icon-color: var(--bau-focus, var(--bau-accent));
113
+ --interactive-surface-light-icon-color-dark: var(--bau-warning, var(--bau-accent));
114
+ --interactive-surface-dark-icon-color-dark: var(--bau-text);
115
+ --interactive-surface-accessibility-icon-color-dark: var(--bau-focus, var(--bau-accent));
116
+ --interactive-surface-variant-primary-bg: var(--bau-primary);
117
+ --interactive-surface-variant-primary-fg: var(--bau-primary-text, var(--bau-bg));
118
+ --interactive-surface-variant-primary-border-color: var(--bau-primary);
119
+ --interactive-surface-variant-secondary-bg: var(--bau-secondary);
120
+ --interactive-surface-variant-secondary-fg: var(--bau-secondary-text, var(--bau-bg));
121
+ --interactive-surface-variant-secondary-border-color: var(--bau-secondary);
122
+ --interactive-surface-variant-accent-bg: var(--bau-accent);
123
+ --interactive-surface-variant-accent-border-color: var(--bau-accent);
124
+ --interactive-surface-variant-subtle-bg: var(--bau-surface-soft, var(--bau-surface));
125
+ --interactive-surface-variant-subtle-fg: var(--bau-text);
126
+ --interactive-surface-variant-subtle-border-color: var(--bau-border);
127
+ --interactive-surface-variant-warning-bg: var(--bau-warning);
128
+ --interactive-surface-variant-warning-border-color: var(--bau-warning);
129
+ --interactive-surface-variant-danger-bg: var(--bau-danger);
130
+ --interactive-surface-variant-danger-border-color: var(--bau-danger);
131
+ }
132
+
133
+ :where([data-ui="tactile"][data-theme][data-mode]) .interactive-surface {
134
+ --interactive-surface-bg: var(--tactile-surface-strong, var(--tactile-surface, var(--tactile-bg)));
135
+ --interactive-surface-fg: var(--tactile-text);
136
+ --interactive-surface-border-color: var(--tactile-border);
137
+ --interactive-surface-focus-ring-color: var(--tactile-focus, var(--tactile-accent, var(--tactile-primary)));
138
+ --interactive-surface-radius: var(--tactile-radius-md, 0.75rem);
139
+ --interactive-surface-state-layer-color: var(--tactile-text);
140
+ --interactive-surface-light-icon-color: var(--tactile-warning, var(--tactile-accent));
141
+ --interactive-surface-dark-icon-color: var(--tactile-text);
142
+ --interactive-surface-accessibility-icon-color: var(--tactile-focus, var(--tactile-accent));
143
+ --interactive-surface-light-icon-color-dark: var(--tactile-warning, var(--tactile-accent));
144
+ --interactive-surface-dark-icon-color-dark: var(--tactile-text);
145
+ --interactive-surface-accessibility-icon-color-dark: var(--tactile-focus, var(--tactile-accent));
146
+ --interactive-surface-variant-primary-bg: var(--tactile-primary);
147
+ --interactive-surface-variant-primary-fg: var(--tactile-primary-text, var(--tactile-bg));
148
+ --interactive-surface-variant-primary-border-color: var(--tactile-primary);
149
+ --interactive-surface-variant-secondary-bg: var(--tactile-secondary);
150
+ --interactive-surface-variant-secondary-fg: var(--tactile-secondary-text, var(--tactile-bg));
151
+ --interactive-surface-variant-secondary-border-color: var(--tactile-secondary);
152
+ --interactive-surface-variant-accent-bg: var(--tactile-accent);
153
+ --interactive-surface-variant-accent-border-color: var(--tactile-accent);
154
+ --interactive-surface-variant-subtle-bg: var(--tactile-surface-soft, var(--tactile-surface));
155
+ --interactive-surface-variant-subtle-fg: var(--tactile-text);
156
+ --interactive-surface-variant-subtle-border-color: var(--tactile-border);
157
+ --interactive-surface-variant-warning-bg: var(--tactile-warning);
158
+ --interactive-surface-variant-warning-border-color: var(--tactile-warning);
159
+ --interactive-surface-variant-danger-bg: var(--tactile-danger);
160
+ --interactive-surface-variant-danger-border-color: var(--tactile-danger);
161
+ }
162
+
163
+ :where([data-ui="neumorphism"][data-theme][data-mode]) .interactive-surface {
164
+ --interactive-surface-bg: var(--neo-surface-strong, var(--neo-surface, var(--neo-bg)));
165
+ --interactive-surface-fg: var(--neo-text);
166
+ --interactive-surface-border-color: var(--neo-border);
167
+ --interactive-surface-focus-ring-color: var(--neo-focus, var(--neo-accent, var(--neo-primary)));
168
+ --interactive-surface-radius: var(--neo-radius-md, 0.75rem);
169
+ --interactive-surface-state-layer-color: var(--neo-text);
170
+ --interactive-surface-light-icon-color: var(--neo-warning, var(--neo-accent));
171
+ --interactive-surface-dark-icon-color: var(--neo-text);
172
+ --interactive-surface-accessibility-icon-color: var(--neo-focus, var(--neo-accent));
173
+ --interactive-surface-light-icon-color-dark: var(--neo-warning, var(--neo-accent));
174
+ --interactive-surface-dark-icon-color-dark: var(--neo-text);
175
+ --interactive-surface-accessibility-icon-color-dark: var(--neo-focus, var(--neo-accent));
176
+ --interactive-surface-variant-primary-bg: var(--neo-primary);
177
+ --interactive-surface-variant-primary-fg: var(--neo-primary-text, var(--neo-bg));
178
+ --interactive-surface-variant-primary-border-color: var(--neo-primary);
179
+ --interactive-surface-variant-secondary-bg: var(--neo-secondary);
180
+ --interactive-surface-variant-secondary-fg: var(--neo-secondary-text, var(--neo-bg));
181
+ --interactive-surface-variant-secondary-border-color: var(--neo-secondary);
182
+ --interactive-surface-variant-accent-bg: var(--neo-accent);
183
+ --interactive-surface-variant-accent-border-color: var(--neo-accent);
184
+ --interactive-surface-variant-subtle-bg: var(--neo-surface-soft, var(--neo-surface));
185
+ --interactive-surface-variant-subtle-fg: var(--neo-text);
186
+ --interactive-surface-variant-subtle-border-color: var(--neo-border);
187
+ --interactive-surface-variant-warning-bg: var(--neo-warning);
188
+ --interactive-surface-variant-warning-border-color: var(--neo-warning);
189
+ --interactive-surface-variant-danger-bg: var(--neo-danger);
190
+ --interactive-surface-variant-danger-border-color: var(--neo-danger);
191
+ }
192
+
193
+ :where([data-ui="retrofuturism"][data-theme][data-mode]) .interactive-surface {
194
+ --interactive-surface-bg: var(--retro-surface-strong, var(--retro-surface, var(--retro-bg)));
195
+ --interactive-surface-fg: var(--retro-text);
196
+ --interactive-surface-border-color: var(--retro-border);
197
+ --interactive-surface-focus-ring-color: var(--retro-focus, var(--retro-accent, var(--retro-primary)));
198
+ --interactive-surface-radius: var(--retro-radius-md, 0.75rem);
199
+ --interactive-surface-state-layer-color: var(--retro-text);
200
+ --interactive-surface-light-icon-color: var(--retro-warning, var(--retro-accent));
201
+ --interactive-surface-dark-icon-color: var(--retro-text);
202
+ --interactive-surface-accessibility-icon-color: var(--retro-focus, var(--retro-accent));
203
+ --interactive-surface-light-icon-color-dark: var(--retro-warning, var(--retro-accent));
204
+ --interactive-surface-dark-icon-color-dark: var(--retro-text);
205
+ --interactive-surface-accessibility-icon-color-dark: var(--retro-focus, var(--retro-accent));
206
+ --interactive-surface-variant-primary-bg: var(--retro-primary);
207
+ --interactive-surface-variant-primary-fg: var(--retro-primary-text, var(--retro-bg));
208
+ --interactive-surface-variant-primary-border-color: var(--retro-primary);
209
+ --interactive-surface-variant-secondary-bg: var(--retro-secondary);
210
+ --interactive-surface-variant-secondary-fg: var(--retro-secondary-text, var(--retro-bg));
211
+ --interactive-surface-variant-secondary-border-color: var(--retro-secondary);
212
+ --interactive-surface-variant-accent-bg: var(--retro-accent);
213
+ --interactive-surface-variant-accent-border-color: var(--retro-accent);
214
+ --interactive-surface-variant-subtle-bg: var(--retro-surface-soft, var(--retro-surface));
215
+ --interactive-surface-variant-subtle-fg: var(--retro-text);
216
+ --interactive-surface-variant-subtle-border-color: var(--retro-border);
217
+ --interactive-surface-variant-warning-bg: var(--retro-warning);
218
+ --interactive-surface-variant-warning-border-color: var(--retro-warning);
219
+ --interactive-surface-variant-danger-bg: var(--retro-danger);
220
+ --interactive-surface-variant-danger-border-color: var(--retro-danger);
221
+ }
222
+
223
+ :where([data-ui="brutalism"][data-theme][data-mode]) .interactive-surface {
224
+ --interactive-surface-bg: var(--brutal-surface-strong, var(--brutal-surface, var(--brutal-bg)));
225
+ --interactive-surface-fg: var(--brutal-text);
226
+ --interactive-surface-border-color: var(--brutal-border);
227
+ --interactive-surface-focus-ring-color: var(--brutal-focus, var(--brutal-accent, var(--brutal-primary)));
228
+ --interactive-surface-radius: var(--brutal-radius-md, 0.75rem);
229
+ --interactive-surface-state-layer-color: var(--brutal-text);
230
+ --interactive-surface-light-icon-color: var(--brutal-warning, var(--brutal-accent));
231
+ --interactive-surface-dark-icon-color: var(--brutal-text);
232
+ --interactive-surface-accessibility-icon-color: var(--brutal-focus, var(--brutal-accent));
233
+ --interactive-surface-light-icon-color-dark: var(--brutal-warning, var(--brutal-accent));
234
+ --interactive-surface-dark-icon-color-dark: var(--brutal-text);
235
+ --interactive-surface-accessibility-icon-color-dark: var(--brutal-focus, var(--brutal-accent));
236
+ --interactive-surface-variant-primary-bg: var(--brutal-primary);
237
+ --interactive-surface-variant-primary-fg: var(--brutal-primary-text, var(--brutal-bg));
238
+ --interactive-surface-variant-primary-border-color: var(--brutal-primary);
239
+ --interactive-surface-variant-secondary-bg: var(--brutal-secondary);
240
+ --interactive-surface-variant-secondary-fg: var(--brutal-secondary-text, var(--brutal-bg));
241
+ --interactive-surface-variant-secondary-border-color: var(--brutal-secondary);
242
+ --interactive-surface-variant-accent-bg: var(--brutal-accent);
243
+ --interactive-surface-variant-accent-border-color: var(--brutal-accent);
244
+ --interactive-surface-variant-subtle-bg: var(--brutal-surface-soft, var(--brutal-surface));
245
+ --interactive-surface-variant-subtle-fg: var(--brutal-text);
246
+ --interactive-surface-variant-subtle-border-color: var(--brutal-border);
247
+ --interactive-surface-variant-warning-bg: var(--brutal-warning);
248
+ --interactive-surface-variant-warning-border-color: var(--brutal-warning);
249
+ --interactive-surface-variant-danger-bg: var(--brutal-danger);
250
+ --interactive-surface-variant-danger-border-color: var(--brutal-danger);
251
+ }
252
+
253
+ :where([data-ui="cyberpunk"][data-theme][data-mode]) .interactive-surface {
254
+ --interactive-surface-bg: var(--cyber-surface-strong, var(--cyber-surface, var(--cyber-bg)));
255
+ --interactive-surface-fg: var(--cyber-text);
256
+ --interactive-surface-border-color: var(--cyber-border);
257
+ --interactive-surface-focus-ring-color: var(--cyber-focus, var(--cyber-accent, var(--cyber-primary)));
258
+ --interactive-surface-radius: var(--cyber-radius-md, 0.75rem);
259
+ --interactive-surface-state-layer-color: var(--cyber-text);
260
+ --interactive-surface-light-icon-color: var(--cyber-warning, var(--cyber-accent));
261
+ --interactive-surface-dark-icon-color: var(--cyber-text);
262
+ --interactive-surface-accessibility-icon-color: var(--cyber-focus, var(--cyber-accent));
263
+ --interactive-surface-light-icon-color-dark: var(--cyber-warning, var(--cyber-accent));
264
+ --interactive-surface-dark-icon-color-dark: var(--cyber-text);
265
+ --interactive-surface-accessibility-icon-color-dark: var(--cyber-focus, var(--cyber-accent));
266
+ --interactive-surface-variant-primary-bg: var(--cyber-primary);
267
+ --interactive-surface-variant-primary-fg: var(--cyber-primary-text, var(--cyber-bg));
268
+ --interactive-surface-variant-primary-border-color: var(--cyber-primary);
269
+ --interactive-surface-variant-secondary-bg: var(--cyber-secondary);
270
+ --interactive-surface-variant-secondary-fg: var(--cyber-secondary-text, var(--cyber-bg));
271
+ --interactive-surface-variant-secondary-border-color: var(--cyber-secondary);
272
+ --interactive-surface-variant-accent-bg: var(--cyber-accent);
273
+ --interactive-surface-variant-accent-border-color: var(--cyber-accent);
274
+ --interactive-surface-variant-subtle-bg: var(--cyber-surface-soft, var(--cyber-surface));
275
+ --interactive-surface-variant-subtle-fg: var(--cyber-text);
276
+ --interactive-surface-variant-subtle-border-color: var(--cyber-border);
277
+ --interactive-surface-variant-warning-bg: var(--cyber-warning);
278
+ --interactive-surface-variant-warning-border-color: var(--cyber-warning);
279
+ --interactive-surface-variant-danger-bg: var(--cyber-danger);
280
+ --interactive-surface-variant-danger-border-color: var(--cyber-danger);
281
+ }
282
+
283
+ :where([data-ui="y2k"][data-theme][data-mode]) .interactive-surface {
284
+ --interactive-surface-bg: var(--y2k-surface-strong, var(--y2k-surface, var(--y2k-bg)));
285
+ --interactive-surface-fg: var(--y2k-text);
286
+ --interactive-surface-border-color: var(--y2k-border);
287
+ --interactive-surface-focus-ring-color: var(--y2k-focus, var(--y2k-accent, var(--y2k-primary)));
288
+ --interactive-surface-radius: var(--y2k-radius-md, 0.75rem);
289
+ --interactive-surface-state-layer-color: var(--y2k-text);
290
+ --interactive-surface-light-icon-color: var(--y2k-warning, var(--y2k-accent));
291
+ --interactive-surface-dark-icon-color: var(--y2k-text);
292
+ --interactive-surface-accessibility-icon-color: var(--y2k-focus, var(--y2k-accent));
293
+ --interactive-surface-light-icon-color-dark: var(--y2k-warning, var(--y2k-accent));
294
+ --interactive-surface-dark-icon-color-dark: var(--y2k-text);
295
+ --interactive-surface-accessibility-icon-color-dark: var(--y2k-focus, var(--y2k-accent));
296
+ --interactive-surface-variant-primary-bg: var(--y2k-primary);
297
+ --interactive-surface-variant-primary-fg: var(--y2k-primary-text, var(--y2k-bg));
298
+ --interactive-surface-variant-primary-border-color: var(--y2k-primary);
299
+ --interactive-surface-variant-secondary-bg: var(--y2k-secondary);
300
+ --interactive-surface-variant-secondary-fg: var(--y2k-secondary-text, var(--y2k-bg));
301
+ --interactive-surface-variant-secondary-border-color: var(--y2k-secondary);
302
+ --interactive-surface-variant-accent-bg: var(--y2k-accent);
303
+ --interactive-surface-variant-accent-border-color: var(--y2k-accent);
304
+ --interactive-surface-variant-subtle-bg: var(--y2k-surface-soft, var(--y2k-surface));
305
+ --interactive-surface-variant-subtle-fg: var(--y2k-text);
306
+ --interactive-surface-variant-subtle-border-color: var(--y2k-border);
307
+ --interactive-surface-variant-warning-bg: var(--y2k-warning);
308
+ --interactive-surface-variant-warning-border-color: var(--y2k-warning);
309
+ --interactive-surface-variant-danger-bg: var(--y2k-danger);
310
+ --interactive-surface-variant-danger-border-color: var(--y2k-danger);
311
+ }
312
+
313
+ :where([data-ui="retro-glass"][data-theme][data-mode]) .interactive-surface {
314
+ --interactive-surface-bg: var(--rg-surface-strong, var(--rg-surface, var(--rg-bg)));
315
+ --interactive-surface-fg: var(--rg-text);
316
+ --interactive-surface-border-color: var(--rg-border);
317
+ --interactive-surface-focus-ring-color: var(--rg-focus, var(--rg-accent, var(--rg-primary)));
318
+ --interactive-surface-radius: var(--rg-radius-md, 0.75rem);
319
+ --interactive-surface-state-layer-color: var(--rg-text);
320
+ --interactive-surface-light-icon-color: var(--rg-warning, var(--rg-accent));
321
+ --interactive-surface-dark-icon-color: var(--rg-text);
322
+ --interactive-surface-accessibility-icon-color: var(--rg-focus, var(--rg-accent));
323
+ --interactive-surface-light-icon-color-dark: var(--rg-warning, var(--rg-accent));
324
+ --interactive-surface-dark-icon-color-dark: var(--rg-text);
325
+ --interactive-surface-accessibility-icon-color-dark: var(--rg-focus, var(--rg-accent));
326
+ --interactive-surface-variant-primary-bg: var(--rg-primary);
327
+ --interactive-surface-variant-primary-fg: var(--rg-primary-text, var(--rg-bg));
328
+ --interactive-surface-variant-primary-border-color: var(--rg-primary);
329
+ --interactive-surface-variant-secondary-bg: var(--rg-secondary);
330
+ --interactive-surface-variant-secondary-fg: var(--rg-secondary-text, var(--rg-bg));
331
+ --interactive-surface-variant-secondary-border-color: var(--rg-secondary);
332
+ --interactive-surface-variant-accent-bg: var(--rg-accent);
333
+ --interactive-surface-variant-accent-border-color: var(--rg-accent);
334
+ --interactive-surface-variant-subtle-bg: var(--rg-surface-soft, var(--rg-surface));
335
+ --interactive-surface-variant-subtle-fg: var(--rg-text);
336
+ --interactive-surface-variant-subtle-border-color: var(--rg-border);
337
+ --interactive-surface-variant-warning-bg: var(--rg-warning);
338
+ --interactive-surface-variant-warning-border-color: var(--rg-warning);
339
+ --interactive-surface-variant-danger-bg: var(--rg-danger);
340
+ --interactive-surface-variant-danger-border-color: var(--rg-danger);
341
+ }