@codenhub/styles 0.1.1 → 0.3.0

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 (42) hide show
  1. package/README.md +2 -1
  2. package/dist/aesthetics/chunky-tile.css +1 -1
  3. package/dist/aesthetics/index.css +1 -1
  4. package/dist/components.css +1 -1
  5. package/dist/index.css +1 -1
  6. package/dist/native.css +1 -1
  7. package/dist/palette.css +1 -0
  8. package/dist/theme.css +1 -1
  9. package/dist/tw/aesthetics/chunky-tile.css +16 -0
  10. package/dist/tw/box.css +24 -2
  11. package/dist/tw/components/button.css +22 -33
  12. package/dist/tw/components/feedback.css +87 -48
  13. package/dist/tw/components/form.css +139 -45
  14. package/dist/tw/components/index.css +1 -1
  15. package/dist/tw/components/loader.css +2 -16
  16. package/dist/tw/components/surface.css +93 -0
  17. package/dist/tw/components/tooltip.css +102 -91
  18. package/dist/tw/elevation.css +43 -7
  19. package/dist/tw/index.css +7 -4
  20. package/dist/tw/intent.css +16 -12
  21. package/dist/tw/palette.css +451 -0
  22. package/dist/tw/reset.css +21 -0
  23. package/dist/tw/theme.css +54 -8
  24. package/dist/tw/utilities/content.css +90 -16
  25. package/dist/tw/utilities/index.css +1 -1
  26. package/dist/tw/utilities/layout.css +33 -0
  27. package/docs/accessibility.md +34 -23
  28. package/docs/changelog/0.2.0.md +41 -0
  29. package/docs/changelog/0.3.0.md +15 -0
  30. package/docs/changelog/index.md +2 -0
  31. package/docs/concepts.md +1 -0
  32. package/docs/setup.md +42 -22
  33. package/docs/usage/aesthetics.md +4 -3
  34. package/docs/usage/buttons.md +17 -13
  35. package/docs/usage/composing.md +28 -21
  36. package/docs/usage/content-and-layout.md +10 -3
  37. package/docs/usage/customizing.md +27 -0
  38. package/docs/usage/feedback.md +18 -10
  39. package/docs/usage/forms.md +36 -26
  40. package/docs/usage/tooltips.md +48 -22
  41. package/llms-full.txt +318 -143
  42. package/package.json +9 -2
@@ -0,0 +1,451 @@
1
+ /* Generated by `pnpm generate` from `src/index.css`, through
2
+ `scripts/generate-palette.mjs`. Do not hand-edit -- see
3
+ `docs/internal/generated-palette.md` for what this is and why it exists. */
4
+
5
+ :root {
6
+ --palette-neutral-solid-bg: oklab(0.145 0 0 / 0.2);
7
+ --palette-neutral-solid-fg: oklab(0.205 0 0);
8
+ --palette-neutral-solid-edge: oklab(0.145 0 0 / 0.2);
9
+ --palette-neutral-solid-bg-hover: oklab(0.371 0 0 / 0.34);
10
+ --palette-neutral-solid-edge-hover: oklab(0.371 0 0 / 0.34);
11
+ --palette-neutral-soft-fg: oklab(0.205 0 0);
12
+ --palette-neutral-soft-bg: oklab(0.145 0 0 / 0.12);
13
+ --palette-neutral-soft-edge: oklab(0.698936 0 0 / 0.8944);
14
+ --palette-neutral-soft-bg-hover: oklab(0.371 0 0 / 0.26);
15
+ --palette-neutral-soft-edge-hover: oklab(0.371 0 0 / 0.9112);
16
+ --palette-neutral-soft-page-bg: oklab(0.8842 0 0);
17
+ --palette-neutral-soft-page-edge: oklab(0.729144 0 0);
18
+ --palette-neutral-soft-page-bg-hover: oklab(0.82536 0 0);
19
+ --palette-neutral-soft-page-edge-hover: oklab(0.425523 0 0);
20
+ --palette-neutral-soft-subtle-bg: oklab(0.82876 0 0);
21
+ --palette-neutral-soft-subtle-edge: oklab(0.722491 0 0);
22
+ --palette-neutral-soft-subtle-bg-hover: oklab(0.77874 0 0);
23
+ --palette-neutral-soft-subtle-edge-hover: oklab(0.419929 0 0);
24
+ --palette-neutral-ghost-fg: oklab(0.205 0 0);
25
+ --palette-neutral-ghost-bg: oklab(0 0 0 / 0);
26
+ --palette-neutral-ghost-edge: oklab(0.708 0 0);
27
+ --palette-neutral-ghost-bg-hover: oklab(0.371 0 0 / 0.14);
28
+ --palette-neutral-ghost-edge-hover: oklab(0.371 0 0);
29
+ --palette-neutral-ghost-page-bg: oklab(0.985 0 0);
30
+ --palette-neutral-ghost-page-edge: oklab(0.708 0 0);
31
+ --palette-neutral-ghost-page-bg-hover: oklab(0.89904 0 0);
32
+ --palette-neutral-ghost-page-edge-hover: oklab(0.371 0 0);
33
+ --palette-neutral-ghost-subtle-bg: oklab(0.922 0 0);
34
+ --palette-neutral-ghost-subtle-edge: oklab(0.708 0 0);
35
+ --palette-neutral-ghost-subtle-bg-hover: oklab(0.84486 0 0);
36
+ --palette-neutral-ghost-subtle-edge-hover: oklab(0.371 0 0);
37
+ --palette-primary-solid-bg: oklab(0.145 0 0);
38
+ --palette-primary-solid-fg: oklab(0.985 0 0);
39
+ --palette-primary-solid-edge: oklab(0.145 0 0);
40
+ --palette-primary-solid-bg-hover: oklab(0.371 0 0);
41
+ --palette-primary-solid-edge-hover: oklab(0.371 0 0);
42
+ --palette-primary-soft-fg: oklab(0.205 0 0);
43
+ --palette-primary-soft-bg: oklab(0.145 0 0 / 0.12);
44
+ --palette-primary-soft-edge: oklab(0.145 0 0 / 0.8944);
45
+ --palette-primary-soft-bg-hover: oklab(0.371 0 0 / 0.26);
46
+ --palette-primary-soft-edge-hover: oklab(0.371 0 0 / 0.9112);
47
+ --palette-primary-soft-page-bg: oklab(0.8842 0 0);
48
+ --palette-primary-soft-page-edge: oklab(0.233704 0 0);
49
+ --palette-primary-soft-page-bg-hover: oklab(0.82536 0 0);
50
+ --palette-primary-soft-page-edge-hover: oklab(0.425523 0 0);
51
+ --palette-primary-soft-subtle-bg: oklab(0.82876 0 0);
52
+ --palette-primary-soft-subtle-edge: oklab(0.227051 0 0);
53
+ --palette-primary-soft-subtle-bg-hover: oklab(0.77874 0 0);
54
+ --palette-primary-soft-subtle-edge-hover: oklab(0.419929 0 0);
55
+ --palette-primary-ghost-fg: oklab(0.205 0 0);
56
+ --palette-primary-ghost-bg: oklab(0 0 0 / 0);
57
+ --palette-primary-ghost-edge: oklab(0.145 0 0);
58
+ --palette-primary-ghost-bg-hover: oklab(0.371 0 0 / 0.14);
59
+ --palette-primary-ghost-edge-hover: oklab(0.371 0 0);
60
+ --palette-primary-ghost-page-bg: oklab(0.985 0 0);
61
+ --palette-primary-ghost-page-edge: oklab(0.145 0 0);
62
+ --palette-primary-ghost-page-bg-hover: oklab(0.89904 0 0);
63
+ --palette-primary-ghost-page-edge-hover: oklab(0.371 0 0);
64
+ --palette-primary-ghost-subtle-bg: oklab(0.922 0 0);
65
+ --palette-primary-ghost-subtle-edge: oklab(0.145 0 0);
66
+ --palette-primary-ghost-subtle-bg-hover: oklab(0.84486 0 0);
67
+ --palette-primary-ghost-subtle-edge-hover: oklab(0.371 0 0);
68
+ --palette-secondary-solid-bg: oklab(0.439 0 0);
69
+ --palette-secondary-solid-fg: oklab(0.985 0 0);
70
+ --palette-secondary-solid-edge: oklab(0.439 0 0);
71
+ --palette-secondary-solid-bg-hover: oklab(0.371 0 0);
72
+ --palette-secondary-solid-edge-hover: oklab(0.371 0 0);
73
+ --palette-secondary-soft-fg: oklab(0.269 0 0);
74
+ --palette-secondary-soft-bg: oklab(0.439 0 0 / 0.12);
75
+ --palette-secondary-soft-edge: oklab(0.439 0 0 / 0.8944);
76
+ --palette-secondary-soft-bg-hover: oklab(0.371 0 0 / 0.26);
77
+ --palette-secondary-soft-edge-hover: oklab(0.371 0 0 / 0.9112);
78
+ --palette-secondary-soft-page-bg: oklab(0.91948 0 0);
79
+ --palette-secondary-soft-page-edge: oklab(0.496658 0 0);
80
+ --palette-secondary-soft-page-bg-hover: oklab(0.82536 0 0);
81
+ --palette-secondary-soft-page-edge-hover: oklab(0.425523 0 0);
82
+ --palette-secondary-soft-subtle-bg: oklab(0.90628 0 0);
83
+ --palette-secondary-soft-subtle-edge: oklab(0.495074 0 0);
84
+ --palette-secondary-soft-subtle-bg-hover: oklab(0.81426 0 0);
85
+ --palette-secondary-soft-subtle-edge-hover: oklab(0.424191 0 0);
86
+ --palette-secondary-ghost-fg: oklab(0.269 0 0);
87
+ --palette-secondary-ghost-bg: oklab(0 0 0 / 0);
88
+ --palette-secondary-ghost-edge: oklab(0.439 0 0);
89
+ --palette-secondary-ghost-bg-hover: oklab(0.371 0 0 / 0.14);
90
+ --palette-secondary-ghost-edge-hover: oklab(0.371 0 0);
91
+ --palette-secondary-ghost-page-bg: oklab(0.985 0 0);
92
+ --palette-secondary-ghost-page-edge: oklab(0.439 0 0);
93
+ --palette-secondary-ghost-page-bg-hover: oklab(0.89904 0 0);
94
+ --palette-secondary-ghost-page-edge-hover: oklab(0.371 0 0);
95
+ --palette-secondary-ghost-subtle-bg: oklab(0.97 0 0);
96
+ --palette-secondary-ghost-subtle-edge: oklab(0.439 0 0);
97
+ --palette-secondary-ghost-subtle-bg-hover: oklab(0.88614 0 0);
98
+ --palette-secondary-ghost-subtle-edge-hover: oklab(0.371 0 0);
99
+ --palette-success-solid-bg: oklab(0.508 -0.114299 0.0293215);
100
+ --palette-success-solid-fg: oklab(0.985 0 0);
101
+ --palette-success-solid-edge: oklab(0.508 -0.114299 0.0293215);
102
+ --palette-success-solid-bg-hover: oklab(0.497872 -0.101989 0.029308);
103
+ --palette-success-solid-edge-hover: oklab(0.497872 -0.101989 0.029308);
104
+ --palette-success-soft-fg: oklab(0.432 -0.0925326 0.0215109);
105
+ --palette-success-soft-bg: oklab(0.508 -0.114299 0.0293215 / 0.12);
106
+ --palette-success-soft-edge: oklab(0.508 -0.114299 0.0293215 / 0.8944);
107
+ --palette-success-soft-bg-hover: oklab(0.497872 -0.101989 0.029308 / 0.26);
108
+ --palette-success-soft-edge-hover: oklab(0.497872 -0.101989 0.029308 / 0.9112);
109
+ --palette-success-soft-page-bg: oklab(0.92776 -0.0137159 0.00351857);
110
+ --palette-success-soft-page-edge: oklab(0.558371 -0.102229 0.0262251);
111
+ --palette-success-soft-page-bg-hover: oklab(0.858347 -0.0265171 0.00762008);
112
+ --palette-success-soft-page-edge-hover: oklab(0.541129 -0.0929323 0.0267054);
113
+ --palette-success-soft-subtle-bg: oklab(0.89696 -0.0574883 0.0168585);
114
+ --palette-success-soft-subtle-edge: oklab(0.554675 -0.107482 0.0278259);
115
+ --palette-success-soft-subtle-bg-hover: oklab(0.832447 -0.0633257 0.0188378);
116
+ --palette-success-soft-subtle-edge-hover: oklab(0.538021 -0.0973493 0.0280516);
117
+ --palette-success-ghost-fg: oklab(0.432 -0.0925326 0.0215109);
118
+ --palette-success-ghost-bg: oklab(0 0 0 / 0);
119
+ --palette-success-ghost-edge: oklab(0.508 -0.114299 0.0293215);
120
+ --palette-success-ghost-bg-hover: oklab(0.497872 -0.101989 0.029308 / 0.14);
121
+ --palette-success-ghost-edge-hover: oklab(0.497872 -0.101989 0.029308);
122
+ --palette-success-ghost-page-bg: oklab(0.985 0 0);
123
+ --palette-success-ghost-page-edge: oklab(0.508 -0.114299 0.0293215);
124
+ --palette-success-ghost-page-bg-hover: oklab(0.916802 -0.0142784 0.00410312);
125
+ --palette-success-ghost-page-edge-hover: oklab(0.497872 -0.101989 0.029308);
126
+ --palette-success-ghost-subtle-bg: oklab(0.95 -0.0497414 0.0151591);
127
+ --palette-success-ghost-subtle-edge: oklab(0.508 -0.114299 0.0293215);
128
+ --palette-success-ghost-subtle-bg-hover: oklab(0.886702 -0.057056 0.0171399);
129
+ --palette-success-ghost-subtle-edge-hover: oklab(0.497872 -0.101989 0.029308);
130
+ --palette-warning-solid-bg: oklab(0.666 0.0940116 0.152325);
131
+ --palette-warning-solid-fg: oklab(0.145 0 0);
132
+ --palette-warning-solid-edge: oklab(0.666 0.0940116 0.152325);
133
+ --palette-warning-solid-bg-hover: oklab(0.633155 0.100794 0.128308);
134
+ --palette-warning-solid-edge-hover: oklab(0.633155 0.100794 0.128308);
135
+ --palette-warning-soft-fg: oklab(0.473 0.0948219 0.0988828);
136
+ --palette-warning-soft-bg: oklab(0.666 0.0940116 0.152325 / 0.12);
137
+ --palette-warning-soft-edge: oklab(0.666 0.0940116 0.152325 / 0.8944);
138
+ --palette-warning-soft-bg-hover: oklab(0.633155 0.100794 0.128308 / 0.26);
139
+ --palette-warning-soft-edge-hover: oklab(0.633155 0.100794 0.128308 / 0.9112);
140
+ --palette-warning-soft-page-bg: oklab(0.94672 0.0112814 0.018279);
141
+ --palette-warning-soft-page-edge: oklab(0.699686 0.0840839 0.136239);
142
+ --palette-warning-soft-page-bg-hover: oklab(0.89352 0.0262064 0.0333601);
143
+ --palette-warning-soft-page-edge-hover: oklab(0.664399 0.0918435 0.116914);
144
+ --palette-warning-soft-subtle-bg: oklab(0.92648 0.00619956 0.0699497);
145
+ --palette-warning-soft-subtle-edge: oklab(0.697258 0.0834741 0.14244);
146
+ --palette-warning-soft-subtle-bg-hover: oklab(0.8765 0.0219331 0.0768105);
147
+ --palette-warning-soft-subtle-edge-hover: oklab(0.662356 0.0913307 0.122128);
148
+ --palette-warning-ghost-fg: oklab(0.473 0.0948219 0.0988828);
149
+ --palette-warning-ghost-bg: oklab(0 0 0 / 0);
150
+ --palette-warning-ghost-edge: oklab(0.666 0.0940116 0.152325);
151
+ --palette-warning-ghost-bg-hover: oklab(0.633155 0.100794 0.128308 / 0.14);
152
+ --palette-warning-ghost-edge-hover: oklab(0.633155 0.100794 0.128308);
153
+ --palette-warning-ghost-page-bg: oklab(0.985 0 0);
154
+ --palette-warning-ghost-page-edge: oklab(0.666 0.0940116 0.152325);
155
+ --palette-warning-ghost-page-bg-hover: oklab(0.935742 0.0141112 0.0179631);
156
+ --palette-warning-ghost-page-edge-hover: oklab(0.633155 0.100794 0.128308);
157
+ --palette-warning-ghost-subtle-bg: oklab(0.962 -0.0057748 0.0587167);
158
+ --palette-warning-ghost-subtle-edge: oklab(0.666 0.0940116 0.152325);
159
+ --palette-warning-ghost-subtle-bg-hover: oklab(0.915962 0.00914482 0.0684595);
160
+ --palette-warning-ghost-subtle-edge-hover: oklab(0.633155 0.100794 0.128308);
161
+ --palette-destructive-solid-bg: oklab(0.514 0.212373 0.0646656);
162
+ --palette-destructive-solid-fg: oklab(0.985 0 0);
163
+ --palette-destructive-solid-edge: oklab(0.514 0.212373 0.0646656);
164
+ --palette-destructive-solid-bg-hover: oklab(0.51189 0.194868 0.0640785);
165
+ --palette-destructive-solid-edge-hover: oklab(0.51189 0.194868 0.0640785);
166
+ --palette-destructive-soft-fg: oklab(0.455 0.182654 0.044516);
167
+ --palette-destructive-soft-bg: oklab(0.514 0.212373 0.0646656 / 0.12);
168
+ --palette-destructive-soft-edge: oklab(0.514 0.212373 0.0646656 / 0.8944);
169
+ --palette-destructive-soft-bg-hover: oklab(0.51189 0.194868 0.0640785 / 0.26);
170
+ --palette-destructive-soft-edge-hover: oklab(0.51189 0.194868 0.0640785 / 0.9112);
171
+ --palette-destructive-soft-page-bg: oklab(0.92848 0.0254848 0.00775988);
172
+ --palette-destructive-soft-page-edge: oklab(0.563738 0.189947 0.0578369);
173
+ --palette-destructive-soft-page-bg-hover: oklab(0.861991 0.0506656 0.0166604);
174
+ --palette-destructive-soft-page-edge-hover: oklab(0.553902 0.177564 0.0583884);
175
+ --palette-destructive-soft-subtle-bg: oklab(0.88976 0.051251 0.0135099);
176
+ --palette-destructive-soft-subtle-edge: oklab(0.559091 0.193038 0.0585269);
177
+ --palette-destructive-soft-subtle-bg-hover: oklab(0.829431 0.0723327 0.0214956);
178
+ --palette-destructive-soft-subtle-edge-hover: oklab(0.549995 0.180164 0.0589686);
179
+ --palette-destructive-ghost-fg: oklab(0.455 0.182654 0.044516);
180
+ --palette-destructive-ghost-bg: oklab(0 0 0 / 0);
181
+ --palette-destructive-ghost-edge: oklab(0.514 0.212373 0.0646656);
182
+ --palette-destructive-ghost-bg-hover: oklab(0.51189 0.194868 0.0640785 / 0.14);
183
+ --palette-destructive-ghost-edge-hover: oklab(0.51189 0.194868 0.0640785);
184
+ --palette-destructive-ghost-page-bg: oklab(0.985 0 0);
185
+ --palette-destructive-ghost-page-edge: oklab(0.514 0.212373 0.0646656);
186
+ --palette-destructive-ghost-page-bg-hover: oklab(0.918765 0.0272815 0.00897099);
187
+ --palette-destructive-ghost-page-edge-hover: oklab(0.51189 0.194868 0.0640785);
188
+ --palette-destructive-ghost-subtle-bg: oklab(0.941 0.0292798 0.00653408);
189
+ --palette-destructive-ghost-subtle-edge: oklab(0.514 0.212373 0.0646656);
190
+ --palette-destructive-ghost-subtle-bg-hover: oklab(0.880925 0.0524621 0.0145903);
191
+ --palette-destructive-ghost-subtle-edge-hover: oklab(0.51189 0.194868 0.0640785);
192
+ --palette-info-solid-bg: oklab(0.511 0.0317755 -0.260066);
193
+ --palette-info-solid-fg: oklab(0.985 0 0);
194
+ --palette-info-solid-edge: oklab(0.511 0.0317755 -0.260066);
195
+ --palette-info-solid-bg-hover: oklab(0.490714 0.0309565 -0.24875);
196
+ --palette-info-solid-edge-hover: oklab(0.490714 0.0309565 -0.24875);
197
+ --palette-info-soft-fg: oklab(0.398 0.0250004 -0.193391);
198
+ --palette-info-soft-bg: oklab(0.511 0.0317755 -0.260066 / 0.12);
199
+ --palette-info-soft-edge: oklab(0.511 0.0317755 -0.260066 / 0.8944);
200
+ --palette-info-soft-bg-hover: oklab(0.490714 0.0309565 -0.24875 / 0.26);
201
+ --palette-info-soft-edge-hover: oklab(0.490714 0.0309565 -0.24875 / 0.9112);
202
+ --palette-info-soft-page-bg: oklab(0.92812 0.00381305 -0.0312079);
203
+ --palette-info-soft-page-edge: oklab(0.561054 0.02842 -0.232603);
204
+ --palette-info-soft-page-bg-hover: oklab(0.856486 0.0080487 -0.0646751);
205
+ --palette-info-soft-page-edge-hover: oklab(0.534607 0.0282076 -0.226661);
206
+ --palette-info-soft-subtle-bg: oklab(0.87972 0.00526838 -0.0610925);
207
+ --palette-info-soft-subtle-edge: oklab(0.555246 0.0285946 -0.236189);
208
+ --palette-info-soft-subtle-bg-hover: oklab(0.815786 0.0092725 -0.0898053);
209
+ --palette-info-soft-subtle-edge-hover: oklab(0.529723 0.0283545 -0.229677);
210
+ --palette-info-ghost-fg: oklab(0.398 0.0250004 -0.193391);
211
+ --palette-info-ghost-bg: oklab(0 0 0 / 0);
212
+ --palette-info-ghost-edge: oklab(0.511 0.0317755 -0.260066);
213
+ --palette-info-ghost-bg-hover: oklab(0.490714 0.0309565 -0.24875 / 0.14);
214
+ --palette-info-ghost-edge-hover: oklab(0.490714 0.0309565 -0.24875);
215
+ --palette-info-ghost-page-bg: oklab(0.985 0 0);
216
+ --palette-info-ghost-page-edge: oklab(0.511 0.0317755 -0.260066);
217
+ --palette-info-ghost-page-bg-hover: oklab(0.9158 0.00433391 -0.034825);
218
+ --palette-info-ghost-page-edge-hover: oklab(0.490714 0.0309565 -0.24875);
219
+ --palette-info-ghost-subtle-bg: oklab(0.93 0.00165378 -0.0339598);
220
+ --palette-info-ghost-subtle-edge: oklab(0.511 0.0317755 -0.260066);
221
+ --palette-info-ghost-subtle-bg-hover: oklab(0.8685 0.00575617 -0.0640304);
222
+ --palette-info-ghost-subtle-edge-hover: oklab(0.490714 0.0309565 -0.24875);
223
+ --palette-border: oklch(0.708 0 0);
224
+ --palette-surface: oklch(0.922 0 0);
225
+ --palette-text: oklch(0.145 0 0);
226
+ }
227
+
228
+ .dark,
229
+ .theme-dark,
230
+ [data-theme="dark"] {
231
+ --palette-neutral-solid-bg: oklab(0.985 0 0 / 0.2);
232
+ --palette-neutral-solid-fg: oklab(0.97 0 0);
233
+ --palette-neutral-solid-edge: oklab(0.985 0 0 / 0.2);
234
+ --palette-neutral-solid-bg-hover: oklab(0.922 0 0 / 0.34);
235
+ --palette-neutral-solid-edge-hover: oklab(0.922 0 0 / 0.34);
236
+ --palette-neutral-soft-fg: oklab(0.97 0 0);
237
+ --palette-neutral-soft-bg: oklab(0.985 0 0 / 0.12);
238
+ --palette-neutral-soft-edge: oklab(0.380886 0 0 / 0.8944);
239
+ --palette-neutral-soft-bg-hover: oklab(0.922 0 0 / 0.26);
240
+ --palette-neutral-soft-edge-hover: oklab(0.922 0 0 / 0.9112);
241
+ --palette-neutral-soft-page-bg: oklab(0.2458 0 0);
242
+ --palette-neutral-soft-page-edge: oklab(0.355976 0 0);
243
+ --palette-neutral-soft-page-bg-hover: oklab(0.34702 0 0);
244
+ --palette-neutral-soft-page-edge-hover: oklab(0.853002 0 0);
245
+ --palette-neutral-soft-subtle-bg: oklab(0.35492 0 0);
246
+ --palette-neutral-soft-subtle-edge: oklab(0.36907 0 0);
247
+ --palette-neutral-soft-subtle-bg-hover: oklab(0.43878 0 0);
248
+ --palette-neutral-soft-subtle-edge-hover: oklab(0.864014 0 0);
249
+ --palette-neutral-ghost-fg: oklab(0.97 0 0);
250
+ --palette-neutral-ghost-bg: oklab(0 0 0 / 0);
251
+ --palette-neutral-ghost-edge: oklab(0.371 0 0);
252
+ --palette-neutral-ghost-bg-hover: oklab(0.922 0 0 / 0.14);
253
+ --palette-neutral-ghost-edge-hover: oklab(0.922 0 0);
254
+ --palette-neutral-ghost-page-bg: oklab(0.145 0 0);
255
+ --palette-neutral-ghost-page-edge: oklab(0.371 0 0);
256
+ --palette-neutral-ghost-page-bg-hover: oklab(0.25378 0 0);
257
+ --palette-neutral-ghost-page-edge-hover: oklab(0.922 0 0);
258
+ --palette-neutral-ghost-subtle-bg: oklab(0.269 0 0);
259
+ --palette-neutral-ghost-subtle-edge: oklab(0.371 0 0);
260
+ --palette-neutral-ghost-subtle-bg-hover: oklab(0.36042 0 0);
261
+ --palette-neutral-ghost-subtle-edge-hover: oklab(0.922 0 0);
262
+ --palette-primary-solid-bg: oklab(0.985 0 0);
263
+ --palette-primary-solid-fg: oklab(0.145 0 0);
264
+ --palette-primary-solid-edge: oklab(0.985 0 0);
265
+ --palette-primary-solid-bg-hover: oklab(0.922 0 0);
266
+ --palette-primary-solid-edge-hover: oklab(0.922 0 0);
267
+ --palette-primary-soft-fg: oklab(0.97 0 0);
268
+ --palette-primary-soft-bg: oklab(0.985 0 0 / 0.12);
269
+ --palette-primary-soft-edge: oklab(0.985 0 0 / 0.8944);
270
+ --palette-primary-soft-bg-hover: oklab(0.922 0 0 / 0.26);
271
+ --palette-primary-soft-edge-hover: oklab(0.922 0 0 / 0.9112);
272
+ --palette-primary-soft-page-bg: oklab(0.2458 0 0);
273
+ --palette-primary-soft-page-edge: oklab(0.896296 0 0);
274
+ --palette-primary-soft-page-bg-hover: oklab(0.34702 0 0);
275
+ --palette-primary-soft-page-edge-hover: oklab(0.853002 0 0);
276
+ --palette-primary-soft-subtle-bg: oklab(0.2986 0 0);
277
+ --palette-primary-soft-subtle-edge: oklab(0.902632 0 0);
278
+ --palette-primary-soft-subtle-bg-hover: oklab(0.39142 0 0);
279
+ --palette-primary-soft-subtle-edge-hover: oklab(0.85833 0 0);
280
+ --palette-primary-ghost-fg: oklab(0.97 0 0);
281
+ --palette-primary-ghost-bg: oklab(0 0 0 / 0);
282
+ --palette-primary-ghost-edge: oklab(0.985 0 0);
283
+ --palette-primary-ghost-bg-hover: oklab(0.922 0 0 / 0.14);
284
+ --palette-primary-ghost-edge-hover: oklab(0.922 0 0);
285
+ --palette-primary-ghost-page-bg: oklab(0.145 0 0);
286
+ --palette-primary-ghost-page-edge: oklab(0.985 0 0);
287
+ --palette-primary-ghost-page-bg-hover: oklab(0.25378 0 0);
288
+ --palette-primary-ghost-page-edge-hover: oklab(0.922 0 0);
289
+ --palette-primary-ghost-subtle-bg: oklab(0.205 0 0);
290
+ --palette-primary-ghost-subtle-edge: oklab(0.985 0 0);
291
+ --palette-primary-ghost-subtle-bg-hover: oklab(0.30538 0 0);
292
+ --palette-primary-ghost-subtle-edge-hover: oklab(0.922 0 0);
293
+ --palette-secondary-solid-bg: oklab(0.708 0 0);
294
+ --palette-secondary-solid-fg: oklab(0.145 0 0);
295
+ --palette-secondary-solid-edge: oklab(0.708 0 0);
296
+ --palette-secondary-solid-bg-hover: oklab(0.87 0 0);
297
+ --palette-secondary-solid-edge-hover: oklab(0.87 0 0);
298
+ --palette-secondary-soft-fg: oklab(0.922 0 0);
299
+ --palette-secondary-soft-bg: oklab(0.708 0 0 / 0.12);
300
+ --palette-secondary-soft-edge: oklab(0.708 0 0 / 0.8944);
301
+ --palette-secondary-soft-bg-hover: oklab(0.87 0 0 / 0.26);
302
+ --palette-secondary-soft-edge-hover: oklab(0.87 0 0 / 0.9112);
303
+ --palette-secondary-soft-page-bg: oklab(0.21256 0 0);
304
+ --palette-secondary-soft-page-edge: oklab(0.648547 0 0);
305
+ --palette-secondary-soft-page-bg-hover: oklab(0.3335 0 0);
306
+ --palette-secondary-soft-page-edge-hover: oklab(0.80562 0 0);
307
+ --palette-secondary-soft-subtle-bg: oklab(0.32168 0 0);
308
+ --palette-secondary-soft-subtle-edge: oklab(0.661642 0 0);
309
+ --palette-secondary-soft-subtle-bg-hover: oklab(0.42526 0 0);
310
+ --palette-secondary-soft-subtle-edge-hover: oklab(0.816631 0 0);
311
+ --palette-secondary-ghost-fg: oklab(0.922 0 0);
312
+ --palette-secondary-ghost-bg: oklab(0 0 0 / 0);
313
+ --palette-secondary-ghost-edge: oklab(0.708 0 0);
314
+ --palette-secondary-ghost-bg-hover: oklab(0.87 0 0 / 0.14);
315
+ --palette-secondary-ghost-edge-hover: oklab(0.87 0 0);
316
+ --palette-secondary-ghost-page-bg: oklab(0.145 0 0);
317
+ --palette-secondary-ghost-page-edge: oklab(0.708 0 0);
318
+ --palette-secondary-ghost-page-bg-hover: oklab(0.2465 0 0);
319
+ --palette-secondary-ghost-page-edge-hover: oklab(0.87 0 0);
320
+ --palette-secondary-ghost-subtle-bg: oklab(0.269 0 0);
321
+ --palette-secondary-ghost-subtle-edge: oklab(0.708 0 0);
322
+ --palette-secondary-ghost-subtle-bg-hover: oklab(0.35314 0 0);
323
+ --palette-secondary-ghost-subtle-edge-hover: oklab(0.87 0 0);
324
+ --palette-success-solid-bg: oklab(0.508 -0.114299 0.0293215);
325
+ --palette-success-solid-fg: oklab(0.985 0 0);
326
+ --palette-success-solid-edge: oklab(0.508 -0.114299 0.0293215);
327
+ --palette-success-solid-bg-hover: oklab(0.572945 -0.116429 0.0314383);
328
+ --palette-success-solid-edge-hover: oklab(0.572945 -0.116429 0.0314383);
329
+ --palette-success-soft-fg: oklab(0.845 -0.138113 0.0370641);
330
+ --palette-success-soft-bg: oklab(0.508 -0.114299 0.0293215 / 0.12);
331
+ --palette-success-soft-edge: oklab(0.508 -0.114299 0.0293215 / 0.8944);
332
+ --palette-success-soft-bg-hover: oklab(0.572945 -0.116429 0.0314383 / 0.26);
333
+ --palette-success-soft-edge-hover: oklab(0.572945 -0.116429 0.0314383 / 0.9112);
334
+ --palette-success-soft-page-bg: oklab(0.18856 -0.0137159 0.00351857);
335
+ --palette-success-soft-page-edge: oklab(0.469667 -0.102229 0.0262251);
336
+ --palette-success-soft-page-bg-hover: oklab(0.256266 -0.0302715 0.00817395);
337
+ --palette-success-soft-page-edge-hover: oklab(0.534944 -0.10609 0.0286465);
338
+ --palette-success-soft-subtle-bg: oklab(0.3936 -0.0802174 0.0165174);
339
+ --palette-success-soft-subtle-edge: oklab(0.494272 -0.110209 0.027785);
340
+ --palette-success-soft-subtle-bg-hover: oklab(0.428686 -0.0861932 0.0191048);
341
+ --palette-success-soft-subtle-edge-hover: oklab(0.555634 -0.1128 0.0299582);
342
+ --palette-success-ghost-fg: oklab(0.845 -0.138113 0.0370641);
343
+ --palette-success-ghost-bg: oklab(0 0 0 / 0);
344
+ --palette-success-ghost-edge: oklab(0.508 -0.114299 0.0293215);
345
+ --palette-success-ghost-bg-hover: oklab(0.572945 -0.116429 0.0314383 / 0.14);
346
+ --palette-success-ghost-edge-hover: oklab(0.572945 -0.116429 0.0314383);
347
+ --palette-success-ghost-page-bg: oklab(0.145 0 0);
348
+ --palette-success-ghost-page-edge: oklab(0.508 -0.114299 0.0293215);
349
+ --palette-success-ghost-page-bg-hover: oklab(0.204912 -0.0163 0.00440136);
350
+ --palette-success-ghost-page-edge-hover: oklab(0.572945 -0.116429 0.0314383);
351
+ --palette-success-ghost-subtle-bg: oklab(0.378 -0.0755699 0.0147714);
352
+ --palette-success-ghost-subtle-edge: oklab(0.508 -0.114299 0.0293215);
353
+ --palette-success-ghost-subtle-bg-hover: oklab(0.405292 -0.0812901 0.0171048);
354
+ --palette-success-ghost-subtle-edge-hover: oklab(0.572945 -0.116429 0.0314383);
355
+ --palette-warning-solid-bg: oklab(0.666 0.0940116 0.152325);
356
+ --palette-warning-solid-fg: oklab(0.145 0 0);
357
+ --palette-warning-solid-edge: oklab(0.666 0.0940116 0.152325);
358
+ --palette-warning-solid-bg-hover: oklab(0.70431 0.0802 0.143076);
359
+ --palette-warning-solid-edge-hover: oklab(0.70431 0.0802 0.143076);
360
+ --palette-warning-soft-fg: oklab(0.879 -0.00473352 0.168934);
361
+ --palette-warning-soft-bg: oklab(0.666 0.0940116 0.152325 / 0.12);
362
+ --palette-warning-soft-edge: oklab(0.666 0.0940116 0.152325 / 0.8944);
363
+ --palette-warning-soft-bg-hover: oklab(0.70431 0.0802 0.143076 / 0.26);
364
+ --palette-warning-soft-edge-hover: oklab(0.70431 0.0802 0.143076 / 0.9112);
365
+ --palette-warning-soft-page-bg: oklab(0.20752 0.0112814 0.018279);
366
+ --palette-warning-soft-page-edge: oklab(0.610982 0.0840839 0.136239);
367
+ --palette-warning-soft-page-bg-hover: oklab(0.290421 0.020852 0.0371997);
368
+ --palette-warning-soft-page-edge-hover: oklab(0.654644 0.0730783 0.130371);
369
+ --palette-warning-soft-subtle-bg: oklab(0.44424 0.0798656 0.0890623);
370
+ --palette-warning-soft-subtle-edge: oklab(0.639389 0.092314 0.144733);
371
+ --palette-warning-soft-subtle-bg-hover: oklab(0.489481 0.0785251 0.0967221);
372
+ --palette-warning-soft-subtle-edge-hover: oklab(0.678531 0.079999 0.137513);
373
+ --palette-warning-ghost-fg: oklab(0.879 -0.00473352 0.168934);
374
+ --palette-warning-ghost-bg: oklab(0 0 0 / 0);
375
+ --palette-warning-ghost-edge: oklab(0.666 0.0940116 0.152325);
376
+ --palette-warning-ghost-bg-hover: oklab(0.70431 0.0802 0.143076 / 0.14);
377
+ --palette-warning-ghost-edge-hover: oklab(0.70431 0.0802 0.143076);
378
+ --palette-warning-ghost-page-bg: oklab(0.145 0 0);
379
+ --palette-warning-ghost-page-edge: oklab(0.666 0.0940116 0.152325);
380
+ --palette-warning-ghost-page-bg-hover: oklab(0.223303 0.011228 0.0200306);
381
+ --palette-warning-ghost-page-edge-hover: oklab(0.70431 0.0802 0.143076);
382
+ --palette-warning-ghost-subtle-bg: oklab(0.414 0.0779366 0.0804356);
383
+ --palette-warning-ghost-subtle-edge: oklab(0.666 0.0940116 0.152325);
384
+ --palette-warning-ghost-subtle-bg-hover: oklab(0.454643 0.0782535 0.0892052);
385
+ --palette-warning-ghost-subtle-edge-hover: oklab(0.70431 0.0802 0.143076);
386
+ --palette-destructive-solid-bg: oklab(0.514 0.212373 0.0646656);
387
+ --palette-destructive-solid-fg: oklab(0.985 0 0);
388
+ --palette-destructive-solid-edge: oklab(0.514 0.212373 0.0646656);
389
+ --palette-destructive-solid-bg-hover: oklab(0.549356 0.21195 0.0500346);
390
+ --palette-destructive-solid-edge-hover: oklab(0.549356 0.21195 0.0500346);
391
+ --palette-destructive-soft-fg: oklab(0.81 0.114595 0.0236021);
392
+ --palette-destructive-soft-bg: oklab(0.514 0.212373 0.0646656 / 0.12);
393
+ --palette-destructive-soft-edge: oklab(0.514 0.212373 0.0646656 / 0.8944);
394
+ --palette-destructive-soft-bg-hover: oklab(0.549356 0.21195 0.0500346 / 0.26);
395
+ --palette-destructive-soft-edge-hover: oklab(0.549356 0.21195 0.0500346 / 0.9112);
396
+ --palette-destructive-soft-page-bg: oklab(0.18928 0.0254848 0.00775988);
397
+ --palette-destructive-soft-page-edge: oklab(0.475034 0.189947 0.0578369);
398
+ --palette-destructive-soft-page-bg-hover: oklab(0.250132 0.0551069 0.013009);
399
+ --palette-destructive-soft-page-edge-hover: oklab(0.513449 0.193128 0.0455916);
400
+ --palette-destructive-soft-subtle-bg: oklab(0.42248 0.163162 0.0327106);
401
+ --palette-destructive-soft-subtle-edge: oklab(0.503018 0.206468 0.060831);
402
+ --palette-destructive-soft-subtle-bg-hover: oklab(0.446232 0.170881 0.0339903);
403
+ --palette-destructive-soft-subtle-edge-hover: oklab(0.536981 0.207021 0.0481093);
404
+ --palette-destructive-ghost-fg: oklab(0.81 0.114595 0.0236021);
405
+ --palette-destructive-ghost-bg: oklab(0 0 0 / 0);
406
+ --palette-destructive-ghost-edge: oklab(0.514 0.212373 0.0646656);
407
+ --palette-destructive-ghost-bg-hover: oklab(0.549356 0.21195 0.0500346 / 0.14);
408
+ --palette-destructive-ghost-edge-hover: oklab(0.549356 0.21195 0.0500346);
409
+ --palette-destructive-ghost-page-bg: oklab(0.145 0 0);
410
+ --palette-destructive-ghost-page-edge: oklab(0.514 0.212373 0.0646656);
411
+ --palette-destructive-ghost-page-bg-hover: oklab(0.20161 0.0296729 0.00700485);
412
+ --palette-destructive-ghost-page-edge-hover: oklab(0.549356 0.21195 0.0500346);
413
+ --palette-destructive-ghost-subtle-bg: oklab(0.41 0.156452 0.0283531);
414
+ --palette-destructive-ghost-subtle-edge: oklab(0.514 0.212373 0.0646656);
415
+ --palette-destructive-ghost-subtle-bg-hover: oklab(0.42951 0.164221 0.0313885);
416
+ --palette-destructive-ghost-subtle-edge-hover: oklab(0.549356 0.21195 0.0500346);
417
+ --palette-info-solid-bg: oklab(0.511 0.0317755 -0.260066);
418
+ --palette-info-solid-fg: oklab(0.985 0 0);
419
+ --palette-info-solid-edge: oklab(0.511 0.0317755 -0.260066);
420
+ --palette-info-solid-bg-hover: oklab(0.551929 0.0373722 -0.238521);
421
+ --palette-info-solid-edge-hover: oklab(0.551929 0.0373722 -0.238521);
422
+ --palette-info-soft-fg: oklab(0.785 0.00944898 -0.114611);
423
+ --palette-info-soft-bg: oklab(0.511 0.0317755 -0.260066 / 0.12);
424
+ --palette-info-soft-edge: oklab(0.511 0.0317755 -0.260066 / 0.8944);
425
+ --palette-info-soft-bg-hover: oklab(0.551929 0.0373722 -0.238521 / 0.26);
426
+ --palette-info-soft-edge-hover: oklab(0.551929 0.0373722 -0.238521 / 0.9112);
427
+ --palette-info-soft-page-bg: oklab(0.18892 0.00381305 -0.0312079);
428
+ --palette-info-soft-page-edge: oklab(0.47235 0.02842 -0.232603);
429
+ --palette-info-soft-page-bg-hover: oklab(0.250801 0.00971677 -0.0620155);
430
+ --palette-info-soft-page-edge-hover: oklab(0.515793 0.0340535 -0.217341);
431
+ --palette-info-soft-subtle-bg: oklab(0.37724 0.0229742 -0.156471);
432
+ --palette-info-soft-subtle-edge: oklab(0.494949 0.0307193 -0.247635);
433
+ --palette-info-soft-subtle-bg-hover: oklab(0.409161 0.0258296 -0.16735);
434
+ --palette-info-soft-subtle-edge-hover: oklab(0.534797 0.0359871 -0.229981);
435
+ --palette-info-ghost-fg: oklab(0.785 0.00944898 -0.114611);
436
+ --palette-info-ghost-bg: oklab(0 0 0 / 0);
437
+ --palette-info-ghost-edge: oklab(0.511 0.0317755 -0.260066);
438
+ --palette-info-ghost-bg-hover: oklab(0.551929 0.0373722 -0.238521 / 0.14);
439
+ --palette-info-ghost-edge-hover: oklab(0.551929 0.0373722 -0.238521);
440
+ --palette-info-ghost-page-bg: oklab(0.145 0 0);
441
+ --palette-info-ghost-page-edge: oklab(0.511 0.0317755 -0.260066);
442
+ --palette-info-ghost-page-bg-hover: oklab(0.20197 0.00523211 -0.033393);
443
+ --palette-info-ghost-page-edge-hover: oklab(0.551929 0.0373722 -0.238521);
444
+ --palette-info-ghost-subtle-bg: oklab(0.359 0.0217741 -0.142344);
445
+ --palette-info-ghost-subtle-edge: oklab(0.511 0.0317755 -0.260066);
446
+ --palette-info-ghost-subtle-bg-hover: oklab(0.38601 0.0239578 -0.155809);
447
+ --palette-info-ghost-subtle-edge-hover: oklab(0.551929 0.0373722 -0.238521);
448
+ --palette-border: oklch(0.371 0 0);
449
+ --palette-surface: oklch(0.269 0 0);
450
+ --palette-text: oklch(0.985 0 0);
451
+ }
package/dist/tw/reset.css CHANGED
@@ -127,3 +127,24 @@
127
127
  border-color: CanvasText;
128
128
  }
129
129
  }
130
+
131
+ /* The user agent already promises both of these for a native `<dialog>` --
132
+ `dialog:not([open]) { display: none }` and a centered `margin: auto` on the
133
+ open box -- but both are user-agent origin, which loses to any author rule
134
+ at all. `.card`'s own `display: block` (`surface`'s `@apply box block`)
135
+ beats the first outright, so a `<dialog class="card">` renders open with no
136
+ `open` attribute and no `.showModal()` call -- the registry has no
137
+ dialog/modal component of its own, and `.card` is the closest primitive a
138
+ consumer reaches for. A margin reset on every element -- Tailwind's own
139
+ Preflight on the entries that carry it -- beats the second, so an opened
140
+ dialog pins to the top-left instead of centering. Restated here, unlayered like
141
+ the block above, for the same reason: a behavior override has to win over
142
+ any layered rule whatever the specificity, and `.card` is layered in the
143
+ utilities layer regardless of how it composes `box`. */
144
+ dialog:not([open]) {
145
+ display: none;
146
+ }
147
+
148
+ dialog[open] {
149
+ margin: auto;
150
+ }
package/dist/tw/theme.css CHANGED
@@ -24,8 +24,17 @@
24
24
  --color-accent-hover: light-dark(var(--color-neutral-700), var(--color-neutral-300));
25
25
  --color-accent-subtle: light-dark(var(--color-neutral-100), var(--color-neutral-800));
26
26
  --color-accent-strong: light-dark(var(--color-neutral-800), var(--color-neutral-200));
27
- --color-border: light-dark(var(--color-neutral-300), var(--color-neutral-700));
28
- --color-border-hover: light-dark(var(--color-neutral-600), var(--color-neutral-500));
27
+ /* Light was neutral-300 (1.42:1 against the page, already under 3:1 by the
28
+ text-control comment below) until a `.card.soft.edged` measured its own
29
+ border against its own fill rather than against the page: 12% of
30
+ `--intent-color` mixed into the ground and a line resolving to nearly the
31
+ same tone landed the two 4 RGB units apart, which reads as no boundary at
32
+ all. Dark's neutral-700 pairing already separated -- 27 units, still under
33
+ 3:1 but at least legible -- so only light moved. Neutral-400 is not a new
34
+ number: `.chunky-tile` already measured it at 2.48:1 against the light
35
+ page and picked it for the same reason, "the heaviest grey that still
36
+ leaves a field legible." Dark is unchanged. */
37
+ --color-border: light-dark(var(--color-neutral-400), var(--color-neutral-700));
29
38
 
30
39
  /* A text control's line is the only thing identifying it: the box is
31
40
  transparent at rest, so nothing else marks where typing goes.
@@ -128,6 +137,20 @@
128
137
  --breakpoint-2xl: 90rem;
129
138
  }
130
139
 
140
+ /* Tailwind only keeps a `@theme` variable in the compiled output when it
141
+ detects that variable being used somewhere in this package's own source --
142
+ everything above earns its keep that way, through `intent.css` or a
143
+ component reading it. `--color-border-hover` is different: `docs/usage/
144
+ theming.md` documents it as a public override point like every other row
145
+ in that table, but nothing in this package draws a border that darkens on
146
+ hover, so nothing here ever references it, and Tailwind quietly dropped it
147
+ from every compiled stylesheet. `static` forces it to compile regardless,
148
+ so the token a consumer's docs promise is the token their `var()` actually
149
+ resolves. */
150
+ @theme static {
151
+ --color-border-hover: light-dark(var(--color-neutral-600), var(--color-neutral-500));
152
+ }
153
+
131
154
  :root {
132
155
  /* Both keywords: the system preference decides, and the explicit theme
133
156
  selectors below override it at any depth because `color-scheme` inherits. */
@@ -214,10 +237,33 @@
214
237
  color-scheme: dark;
215
238
  }
216
239
 
217
- /* The selector list mirrors the `color-scheme: dark` block above, all three
240
+ /* The first arm mirrors the `color-scheme: dark` block above, all three
218
241
  spellings included -- a consumer writing `.theme-dark` for the token theme
219
- was otherwise left without the matching `dark:` variant. System preference is
220
- deliberately out: the variant follows an explicit theme selector, the same
221
- rule the rest of the theme model states, so `dark:` utilities track the theme
222
- a subtree was actually put in rather than the OS default. */
223
- @custom-variant dark (&:where(.dark, .dark *, .theme-dark, .theme-dark *, [data-theme="dark"], [data-theme="dark"] *));
242
+ was otherwise left without the matching `dark:` variant.
243
+
244
+ The second arm closes the gap that left open: `--color-*` tokens resolve
245
+ through `light-dark()` against the computed `color-scheme`, so with no
246
+ explicit selector at all `:root`'s `color-scheme: light dark` already
247
+ follows the OS preference -- see `concepts.md#theme-selection`. A selector
248
+ list cannot query computed style the way `light-dark()` does, but it can
249
+ still match "OS prefers dark, and not under a forced-light subtree" with a
250
+ plain descendant exclusion: `:not(:where(.light, .light *, ...))` matches
251
+ only when no ancestor (or the element itself) carries one of the three
252
+ light spellings. That is the one case the exclusion cannot see -- a
253
+ subtree forced light through some means other than these three selectors,
254
+ where `light-dark()` would still honor it but this variant could not
255
+ detect it. Out of contract: those three spellings are the only supported
256
+ way to force a theme, so nothing else is expected to set `color-scheme`
257
+ directly. Each arm is independent, so an explicit selector still wins at
258
+ any depth even inside a subtree the other arm would otherwise match. */
259
+ @custom-variant dark {
260
+ &:where(.dark, .dark *, .theme-dark, .theme-dark *, [data-theme="dark"], [data-theme="dark"] *) {
261
+ @slot;
262
+ }
263
+
264
+ @media (prefers-color-scheme: dark) {
265
+ &:not(:where(.light, .light *, .theme-light, .theme-light *, [data-theme="light"], [data-theme="light"] *)) {
266
+ @slot;
267
+ }
268
+ }
269
+ }