ui-style-kit-css 1.2.2 → 2.0.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 (27) hide show
  1. package/CHANGELOG.md +28 -1
  2. package/CONTRIBUTING.md +6 -5
  3. package/README.md +133 -17
  4. package/STYLE-MAP.md +24 -0
  5. package/demo/index.html +1076 -73
  6. package/dist/ui-style-kit.css +2932 -8339
  7. package/dist/ui-style-kit.min.css +1 -1
  8. package/dist/ui-style-kit.with-bridge.css +5861 -0
  9. package/dist/ui-style-kit.with-bridge.min.css +1 -0
  10. package/docs/PUBLISHING.md +3 -3
  11. package/docs/STYLE-GUIDE.md +3 -1
  12. package/docs/TOKENS.md +215 -10
  13. package/package.json +15 -3
  14. package/styles/bauhaus.css +142 -702
  15. package/styles/bento.css +142 -701
  16. package/styles/brutalism.css +137 -702
  17. package/styles/cyberpunk.css +128 -699
  18. package/styles/interactive-surface-bridge.css +147 -311
  19. package/styles/maximalist.css +143 -702
  20. package/styles/minimal-saas.css +138 -701
  21. package/styles/native-elements.css +374 -0
  22. package/styles/neumorphism.css +144 -702
  23. package/styles/retro-glass.css +131 -702
  24. package/styles/retrofuturism.css +144 -702
  25. package/styles/tactile.css +142 -701
  26. package/styles/theme-colors.css +787 -0
  27. package/styles/y2k.css +122 -696
package/styles/interactive-surface-bridge.css CHANGED
@@ -1,341 +1,177 @@
1
1
  /* =========================================================
2
2
  UI Style Kit CSS x Interactive Surface CSS Bridge
3
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.
4
+ This optional bridge maps shared UI Style Kit semantic roles to
5
+ interactive-surface-css tokens and supplies visible state layers.
6
+ The flow follows scheme tokens -> mode roles -> bridge tokens ->
7
+ surface behavior, avoiding per-theme and per-preset token maps.
7
8
  ========================================================= */
8
9
 
9
10
  :where([data-ui][data-theme][data-mode]) .interactive-surface {
10
11
  --interactive-surface-border-width: 1px;
12
+ --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
13
+ --interactive-surface-fg: rgb(var(--usk-text-rgb));
14
+ --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
15
+ --interactive-surface-focus-ring-color: rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255)));
16
+ --interactive-surface-radius: .85rem;
17
+ --interactive-surface-state-layer-color: currentColor;
18
+ --interactive-surface-state-layer-opacity: 0;
19
+ --interactive-surface-state-layer-opacity-hover: .08;
20
+ --interactive-surface-state-layer-opacity-active: .14;
21
+ --interactive-surface-state-layer-opacity-focus: .18;
22
+ --interactive-surface-light-icon-color: rgb(var(--usk-warning-rgb, var(--usk-accent-rgb, 255 190 72)));
23
+ --interactive-surface-dark-icon-color: rgb(var(--usk-text-rgb, 18 18 18));
24
+ --interactive-surface-accessibility-icon-color: var(--interactive-surface-focus-ring-color);
25
+ --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
26
+ --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
27
+ --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
28
+ --interactive-surface-variant-primary-bg: rgb(var(--usk-primary-rgb));
29
+ --interactive-surface-variant-primary-fg: rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255)));
30
+ --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
31
+ --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
32
+ --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
33
+ --interactive-surface-variant-secondary-border-color: rgb(var(--usk-secondary-rgb, 96 112 128));
34
+ --interactive-surface-variant-accent-bg: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
35
+ --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
36
+ --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
37
+ --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
38
+ --interactive-surface-variant-subtle-fg: rgb(var(--usk-text-rgb, 18 18 18));
39
+ --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
40
+ --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
41
+ --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));
42
+ --interactive-surface-variant-warning-border-color: rgb(var(--usk-warning-rgb, 255 190 72));
43
+ --interactive-surface-variant-danger-bg: rgb(var(--usk-danger-rgb, 210 72 72));
44
+ --interactive-surface-variant-danger-fg: rgb(var(--usk-danger-text-rgb, 255 255 255));
45
+ --interactive-surface-variant-danger-border-color: rgb(var(--usk-danger-rgb, 210 72 72));
46
+ --interactive-surface-level-1-bg: var(--interactive-surface-variant-subtle-bg);
47
+ --interactive-surface-level-1-border-color: var(--interactive-surface-variant-subtle-border-color);
48
+ --interactive-surface-level-1-shadow: 0 1px 2px rgb(var(--usk-bg-rgb, 0 0 0) / .18);
49
+ --interactive-surface-level-2-bg: var(--interactive-surface-bg);
50
+ --interactive-surface-level-2-border-color: var(--interactive-surface-border-color);
51
+ --interactive-surface-level-2-shadow: 0 8px 20px rgb(var(--usk-bg-rgb, 0 0 0) / .22);
52
+ --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
53
+ --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
54
+ --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
55
+ --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
56
+ --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
57
+ --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
58
+
59
+ position: relative;
60
+ isolation: isolate;
61
+ background-color: var(--interactive-surface-level-bg, var(--interactive-surface-bg));
62
+ color: var(--interactive-surface-fg);
63
+ border-width: var(--interactive-surface-border-width);
64
+ border-style: solid;
65
+ border-color: var(--interactive-surface-level-border-color, var(--interactive-surface-border-color));
66
+ border-radius: var(--interactive-surface-radius);
67
+ box-shadow: var(--interactive-surface-level-shadow, none);
68
+ transition:
69
+ background-color 160ms ease,
70
+ border-color 160ms ease,
71
+ box-shadow 160ms ease,
72
+ color 160ms ease,
73
+ transform 160ms ease;
74
+ }
75
+
76
+ :where([data-ui][data-theme][data-mode]) .interactive-surface::before {
77
+ position: absolute;
78
+ inset: 0;
79
+ border-radius: inherit;
80
+ background: var(--interactive-surface-state-layer-color);
81
+ opacity: var(--interactive-surface-state-layer-opacity);
82
+ pointer-events: none;
83
+ transition: opacity 160ms ease;
84
+ content: "";
85
+ }
86
+
87
+ :where([data-ui][data-theme][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):hover {
88
+ --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-hover);
89
+
90
+ transform: translateY(-1px);
11
91
  }
12
92
 
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);
93
+ :where([data-ui][data-theme][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):active,
94
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-pressed="true"],
95
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-current="page"],
96
+ :where([data-ui][data-theme][data-mode]) .interactive-surface.is-active {
97
+ --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-active);
98
+
99
+ transform: translateY(0);
100
+ }
101
+
102
+ :where([data-ui][data-theme][data-mode]) .interactive-surface:focus-visible {
103
+ --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-focus);
104
+
105
+ outline: 2px solid var(--interactive-surface-focus-ring-color);
106
+ outline-offset: 3px;
41
107
  }
42
108
 
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);
109
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[disabled],
110
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-disabled="true"] {
111
+ opacity: .56;
112
+ cursor: not-allowed;
71
113
  }
72
114
 
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);
115
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
116
+ --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
117
+ --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
118
+ --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
101
119
  }
102
120
 
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);
121
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
122
+ --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
123
+ --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
124
+ --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
131
125
  }
132
126
 
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);
127
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
128
+ --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
129
+ --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
130
+ --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
161
131
  }
162
132
 
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);
133
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
134
+ --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
135
+ --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
136
+ --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
191
137
  }
192
138
 
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);
139
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
140
+ --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
141
+ --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
142
+ --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
221
143
  }
222
144
 
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);
145
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
146
+ --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
147
+ --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
148
+ --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
251
149
  }
252
150
 
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);
151
+ /* Surface levels define the three visual depths consumed by the demo and bridge hooks. */
152
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
153
+ --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
154
+ --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
155
+ --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
156
+ --interactive-surface-state-layer-opacity-hover: .08;
157
+ --interactive-surface-state-layer-opacity-active: .14;
158
+ --interactive-surface-state-layer-opacity-focus: .18;
281
159
  }
282
160
 
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);
161
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
162
+ --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
163
+ --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
164
+ --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
165
+ --interactive-surface-state-layer-opacity-hover: .11;
166
+ --interactive-surface-state-layer-opacity-active: .18;
167
+ --interactive-surface-state-layer-opacity-focus: .22;
311
168
  }
312
169
 
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);
170
+ :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
171
+ --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
172
+ --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
173
+ --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);
174
+ --interactive-surface-state-layer-opacity-hover: .14;
175
+ --interactive-surface-state-layer-opacity-active: .24;
176
+ --interactive-surface-state-layer-opacity-focus: .28;
341
177
  }