@ecopages/radiant-themes 0.0.0-stage → 0.2.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 (66) hide show
  1. package/README.md +96 -2
  2. package/dist/compiled/themes/cloudflare/compact.css +848 -0
  3. package/dist/compiled/themes/cloudflare.css +831 -0
  4. package/dist/compiled/themes/github/compact.css +819 -0
  5. package/dist/compiled/themes/github.css +802 -0
  6. package/dist/compiled/themes/high-contrast/compact.css +707 -0
  7. package/dist/compiled/themes/high-contrast.css +690 -0
  8. package/dist/compiled/themes/macos/compact.css +815 -0
  9. package/dist/compiled/themes/macos-classic/compact.css +1083 -0
  10. package/dist/compiled/themes/macos-classic.css +1066 -0
  11. package/dist/compiled/themes/macos.css +798 -0
  12. package/dist/compiled/themes/material/compact.css +634 -0
  13. package/dist/compiled/themes/material.css +617 -0
  14. package/dist/compiled/themes/vercel/compact.css +811 -0
  15. package/dist/compiled/themes/vercel.css +794 -0
  16. package/dist/compiled/themes/vscode/compact.css +763 -0
  17. package/dist/compiled/themes/vscode.css +746 -0
  18. package/dist/compiled/themes/windows95/compact.css +959 -0
  19. package/dist/compiled/themes/windows95.css +942 -0
  20. package/dist/foundation.css +11 -0
  21. package/dist/themes/cloudflare/compact.css +2 -0
  22. package/dist/themes/cloudflare.css +4 -0
  23. package/dist/themes/github/compact.css +2 -0
  24. package/dist/themes/github.css +4 -0
  25. package/dist/themes/high-contrast/compact.css +2 -0
  26. package/dist/themes/high-contrast.css +4 -0
  27. package/dist/themes/macos/compact.css +2 -0
  28. package/dist/themes/macos-classic/compact.css +2 -0
  29. package/dist/themes/macos-classic.css +4 -0
  30. package/dist/themes/macos.css +4 -0
  31. package/dist/themes/material/compact.css +2 -0
  32. package/dist/themes/material.css +4 -0
  33. package/dist/themes/vercel/compact.css +2 -0
  34. package/dist/themes/vercel.css +4 -0
  35. package/dist/themes/vscode/compact.css +2 -0
  36. package/dist/themes/vscode.css +4 -0
  37. package/dist/themes/windows95/compact.css +2 -0
  38. package/dist/themes/windows95.css +4 -0
  39. package/dist/tokens/colors/cloudflare.css +53 -0
  40. package/dist/tokens/colors/github.css +33 -0
  41. package/dist/tokens/colors/high-contrast.css +53 -0
  42. package/dist/tokens/colors/macos-classic.css +66 -0
  43. package/dist/tokens/colors/macos.css +40 -0
  44. package/dist/tokens/colors/material.css +25 -0
  45. package/dist/tokens/colors/vercel.css +71 -0
  46. package/dist/tokens/colors/vscode.css +31 -0
  47. package/dist/tokens/colors/windows95.css +54 -0
  48. package/dist/tokens/components/cloudflare.css +147 -0
  49. package/dist/tokens/components/github.css +111 -0
  50. package/dist/tokens/components/high-contrast.css +108 -0
  51. package/dist/tokens/components/macos-classic.css +587 -0
  52. package/dist/tokens/components/macos.css +225 -0
  53. package/dist/tokens/components/material.css +82 -0
  54. package/dist/tokens/components/vercel.css +150 -0
  55. package/dist/tokens/components/vscode.css +72 -0
  56. package/dist/tokens/components/windows95.css +433 -0
  57. package/dist/tokens/roles/cloudflare.css +150 -0
  58. package/dist/tokens/roles/github.css +150 -0
  59. package/dist/tokens/roles/high-contrast.css +155 -0
  60. package/dist/tokens/roles/macos-classic.css +142 -0
  61. package/dist/tokens/roles/macos.css +155 -0
  62. package/dist/tokens/roles/material.css +144 -0
  63. package/dist/tokens/roles/vercel.css +141 -0
  64. package/dist/tokens/roles/vscode.css +143 -0
  65. package/dist/tokens/roles/windows95.css +142 -0
  66. package/package.json +144 -3
@@ -0,0 +1,707 @@
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ :root {
4
+ --shadow-control: 0 1px 2px 0 rgb(0 0 0 / 0.05);
5
+ --shadow-overlay: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
6
+ --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
7
+ --sheen-highlight: color-mix(in oklab, white 8%, transparent);
8
+ --sheen-shade: color-mix(in oklab, black 7%, transparent);
9
+ --sheen-image: linear-gradient(to bottom, var(--sheen-highlight), transparent 55%, var(--sheen-shade));
10
+ }
11
+ :root, :host {
12
+ --shadow-control: var(--shadow-control);
13
+ --shadow-overlay: var(--shadow-overlay);
14
+ --shadow-modal: var(--shadow-modal);
15
+ --font-sans: var(--font-sans);
16
+ --font-heading: var(--font-heading);
17
+ --font-mono: var(--font-mono);
18
+ --text-xs: var(--text-xs);
19
+ --text-sm: var(--text-sm);
20
+ --text-body: var(--text-body);
21
+ --text-lg: var(--text-lg);
22
+ --text-xl: var(--text-xl);
23
+ --text-2xl: var(--text-2xl);
24
+ --text-3xl: var(--text-3xl);
25
+ --text-4xl: var(--text-4xl);
26
+ --text-5xl: var(--text-5xl);
27
+ --font-weight-semibold: var(--weight-semibold);
28
+ --opacity-disabled: var(--opacity-disabled);
29
+ --opacity-muted: var(--opacity-muted);
30
+ --color-primary: var(--primary);
31
+ --color-on-primary: var(--on-primary);
32
+ --color-background: var(--background);
33
+ --color-on-background: var(--on-background);
34
+ --radius-none: var(--border-radius-none);
35
+ --radius-control: var(--radius-control);
36
+ --radius-container: var(--radius-container);
37
+ --radius-pill: var(--radius-pill);
38
+ }
39
+ :root {
40
+ --text-xs: 0.75rem;
41
+ --text-sm: 0.875rem;
42
+ --text-body: 1rem;
43
+ --text-lg: 1.125rem;
44
+ --text-xl: 1.25rem;
45
+ --text-2xl: 1.5rem;
46
+ --text-3xl: 1.875rem;
47
+ --text-4xl: 2.25rem;
48
+ --text-5xl: 3rem;
49
+ --text-label: 0.875rem;
50
+ --text-control: 0.875rem;
51
+ --text-control-input: 1rem;
52
+ --leading-body: 1.5;
53
+ --leading-relaxed: 1.625;
54
+ --leading-compact: 1.25;
55
+ --weight-regular: 400;
56
+ --weight-medium: 500;
57
+ --weight-semibold: 600;
58
+ --tracking-wide: 0.025em;
59
+ }
60
+ @media (min-width: 640px) {
61
+ :root {
62
+ --text-control-input: var(--text-control);
63
+ }
64
+ }
65
+ :root {
66
+ --duration-fast: 150ms;
67
+ --duration-normal: 200ms;
68
+ --duration-slow: 300ms;
69
+ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
70
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
71
+ --color-black: oklch(0% 0 0);
72
+ --color-white: oklch(100% 0 0);
73
+ --border-width-hairline: 1px;
74
+ --border-width-thin: 1px;
75
+ --border-width-thick: 2px;
76
+ --rui-track-mix: 45%;
77
+ --rui-track-fill: var(--on-background);
78
+ @supports (color: color-mix(in lab, red, red)) {
79
+ --rui-track-fill: color-mix(in oklab, var(--on-background) var(--rui-track-mix), transparent);
80
+ }
81
+ --focus-ring-width: 2px;
82
+ --focus-ring-offset: 2px;
83
+ --opacity-disabled: 0.5;
84
+ --opacity-muted: 0.6;
85
+ --z-dropdown: 10;
86
+ --z-popover: 20;
87
+ --z-overlay: 30;
88
+ --z-modal: 40;
89
+ --z-toast: 50;
90
+ --size-control-sm: var(--space-8, 2rem);
91
+ --size-control-md: var(--space-10, 2.5rem);
92
+ --size-control-lg: var(--space-12, 3rem);
93
+ --size-icon-sm: 1rem;
94
+ --size-icon-md: 1.25rem;
95
+ }
96
+ @layer base {
97
+ :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
98
+ [data-rui-focus-managed]
99
+ ):focus-visible {
100
+ outline: var(--focus-ring-width, 3px) solid var(--focus-ring);
101
+ outline-offset: var(--focus-ring-offset, 2px);
102
+ }
103
+ }
104
+ @media (prefers-contrast: more) {
105
+ html:root,
106
+ html:root[data-rui-theme],
107
+ html:root.dark[data-rui-theme] {
108
+ --rui-border-alpha: 100%;
109
+ --rui-control-border-color: var(--on-background);
110
+ --border: var(--rui-border-color);
111
+ @supports (color: color-mix(in lab, red, red)) {
112
+ --border: color-mix(in oklab, var(--rui-border-color) 45%, var(--on-background));
113
+ }
114
+ --opacity-disabled: 0.78;
115
+ --opacity-muted: 0.78;
116
+ --focus-ring-width: 3px;
117
+ --focus-ring-offset: 2px;
118
+ }
119
+ }
120
+ @media (prefers-reduced-motion: reduce) {
121
+ :root {
122
+ --duration-fast: 0ms;
123
+ --duration-normal: 0ms;
124
+ --duration-slow: 0ms;
125
+ }
126
+ *,
127
+ *::before,
128
+ *::after {
129
+ animation-duration: 0.01ms !important;
130
+ animation-iteration-count: 1 !important;
131
+ scroll-behavior: auto !important;
132
+ transition-duration: 0.01ms !important;
133
+ }
134
+ }
135
+ @media (forced-colors: active) {
136
+ html:root,
137
+ html:root.dark,
138
+ html:root[data-rui-theme],
139
+ html:root.dark[data-rui-theme] {
140
+ --primary: Highlight;
141
+ --on-primary: HighlightText;
142
+ --primary-container: Highlight;
143
+ --on-primary-container: HighlightText;
144
+ --primary-light: LinkText;
145
+ --primary-dark: Highlight;
146
+ --secondary: ButtonText;
147
+ --on-secondary: ButtonFace;
148
+ --secondary-container: ButtonFace;
149
+ --on-secondary-container: ButtonText;
150
+ --tertiary: ButtonText;
151
+ --on-tertiary: ButtonFace;
152
+ --tertiary-container: ButtonFace;
153
+ --on-tertiary-container: ButtonText;
154
+ --error: CanvasText;
155
+ --on-error: Canvas;
156
+ --error-container: Canvas;
157
+ --on-error-container: CanvasText;
158
+ --success: CanvasText;
159
+ --on-success: Canvas;
160
+ --success-container: Canvas;
161
+ --on-success-container: CanvasText;
162
+ --info: LinkText;
163
+ --on-info: Canvas;
164
+ --info-container: Canvas;
165
+ --on-info-container: CanvasText;
166
+ --warning: CanvasText;
167
+ --on-warning: Canvas;
168
+ --warning-container: Canvas;
169
+ --on-warning-container: CanvasText;
170
+ --neutral: GrayText;
171
+ --surface: Canvas;
172
+ --on-surface: CanvasText;
173
+ --surface-container-lowest: Canvas;
174
+ --on-surface-container-lowest: CanvasText;
175
+ --surface-container-low: Canvas;
176
+ --on-surface-container-low: CanvasText;
177
+ --surface-container: Canvas;
178
+ --on-surface-container: CanvasText;
179
+ --surface-container-high: Canvas;
180
+ --on-surface-container-high: CanvasText;
181
+ --surface-container-highest: Canvas;
182
+ --on-surface-container-highest: CanvasText;
183
+ --background: Canvas;
184
+ --on-background: CanvasText;
185
+ --border: ButtonText;
186
+ --focus-ring: Highlight;
187
+ --on-focus-ring: HighlightText;
188
+ --link: LinkText;
189
+ --overlay: Canvas;
190
+ --background-code: Canvas;
191
+ --on-background-code: CanvasText;
192
+ }
193
+ :where(.rui-button, .rui-input, .rui-textarea, .rui-select, .rui-checkbox__control, .rui-radio__control) {
194
+ forced-color-adjust: auto;
195
+ border-color: ButtonText;
196
+ }
197
+ :where([aria-selected='true'], [aria-checked='true'], [aria-pressed='true'], [aria-current='page']) {
198
+ border-color: Highlight;
199
+ }
200
+ @layer base {
201
+ :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
202
+ [data-rui-focus-managed]
203
+ ):focus-visible {
204
+ outline: 3px solid Highlight !important;
205
+ outline-offset: 2px !important;
206
+ }
207
+ }
208
+ :disabled,
209
+ [aria-disabled='true'] {
210
+ color: GrayText;
211
+ opacity: 1;
212
+ }
213
+ }
214
+ :where(:root) {
215
+ --rui-density: 1;
216
+ }
217
+ :root {
218
+ --space-1: calc(0.25rem * var(--rui-density));
219
+ --space-2: calc(0.5rem * var(--rui-density));
220
+ --space-3: calc(0.75rem * var(--rui-density));
221
+ --space-4: calc(1rem * var(--rui-density));
222
+ --space-5: calc(1.25rem * var(--rui-density));
223
+ --space-6: calc(1.5rem * var(--rui-density));
224
+ --space-8: calc(2rem * var(--rui-density));
225
+ --space-10: calc(2.5rem * var(--rui-density));
226
+ --space-12: calc(3rem * var(--rui-density));
227
+ --space-16: calc(4rem * var(--rui-density));
228
+ --space-control-x: var(--space-3);
229
+ --space-control-y: var(--space-2);
230
+ --space-inline: var(--space-2);
231
+ --space-stack: var(--space-4);
232
+ --space-inset: var(--space-4);
233
+ --rui-radius-scale: 1;
234
+ --border-radius-none: 0;
235
+ --border-radius-xs: calc(0.25rem * var(--rui-radius-scale));
236
+ --border-radius-sm: calc(0.5rem * var(--rui-radius-scale));
237
+ --border-radius-md: calc(0.75rem * var(--rui-radius-scale));
238
+ --border-radius-lg: calc(1rem * var(--rui-radius-scale));
239
+ --border-radius-xl: calc(1.25rem * var(--rui-radius-scale));
240
+ --border-radius-2xl: calc(1.5rem * var(--rui-radius-scale));
241
+ --border-radius-3xl: calc(2rem * var(--rui-radius-scale));
242
+ --border-radius-full: 9999px;
243
+ --radius-control: var(--border-radius-md);
244
+ --radius-container: var(--border-radius-lg);
245
+ --radius-pill: var(--border-radius-full);
246
+ }
247
+ :where(:root) {
248
+ color-scheme: light;
249
+ }
250
+ :where(.dark) {
251
+ color-scheme: dark;
252
+ }
253
+ :where(:root), :root[data-rui-theme='high-contrast'] {
254
+ --contrast-canvas: #ffffff;
255
+ --contrast-surface: #ffffff;
256
+ --contrast-container: #f2f2f2;
257
+ --contrast-text: #000000;
258
+ --contrast-primary: #0033cc;
259
+ --contrast-secondary: #005050;
260
+ --contrast-tertiary: #000000;
261
+ --contrast-error: #780000;
262
+ --contrast-success: #005000;
263
+ --contrast-info: #0033cc;
264
+ --contrast-warning: #4a3600;
265
+ --contrast-primary-container: #dce8ff;
266
+ --contrast-secondary-container: #d9f4ef;
267
+ --contrast-error-container: #ffe2dd;
268
+ --contrast-success-container: #e0f5dd;
269
+ --contrast-info-container: #dce8ff;
270
+ --contrast-warning-container: #fff0b8;
271
+ --contrast-focus: #0000a8;
272
+ }
273
+ :where(.dark), :root.dark[data-rui-theme='high-contrast'] {
274
+ --contrast-canvas: #000000;
275
+ --contrast-surface: #000000;
276
+ --contrast-container: #1a1a1a;
277
+ --contrast-text: #ffffff;
278
+ --contrast-primary: #ffff00;
279
+ --contrast-secondary: #00ffff;
280
+ --contrast-tertiary: #ffffff;
281
+ --contrast-error: #ff9a91;
282
+ --contrast-success: #8bff70;
283
+ --contrast-info: #80dfff;
284
+ --contrast-warning: #ffff00;
285
+ --contrast-primary-container: #ffff00;
286
+ --contrast-secondary-container: #00ffff;
287
+ --contrast-error-container: #ffb4ab;
288
+ --contrast-success-container: #aaff90;
289
+ --contrast-info-container: #8ee6ff;
290
+ --contrast-warning-container: #ffff00;
291
+ --contrast-focus: #ffff00;
292
+ }
293
+ :where(:root), :root[data-rui-theme='high-contrast'] {
294
+ --gray-50: #ffffff;
295
+ --gray-100: #ffffff;
296
+ --gray-200: #f2f2f2;
297
+ --gray-300: #e6e6e6;
298
+ --gray-400: #cccccc;
299
+ --gray-500: #808080;
300
+ --gray-600: #595959;
301
+ --gray-700: #333333;
302
+ --gray-800: #1a1a1a;
303
+ --gray-900: #080808;
304
+ --gray-950: #000000;
305
+ --primary: var(--contrast-primary);
306
+ --on-primary: #ffffff;
307
+ --primary-light: #315cff;
308
+ --primary-dark: #00228a;
309
+ --primary-container: var(--contrast-primary-container);
310
+ --on-primary-container: #000000;
311
+ --secondary: var(--contrast-secondary);
312
+ --on-secondary: #ffffff;
313
+ --secondary-light: #007070;
314
+ --secondary-dark: #003b3b;
315
+ --secondary-container: var(--contrast-secondary-container);
316
+ --on-secondary-container: #000000;
317
+ --tertiary: var(--contrast-tertiary);
318
+ --on-tertiary: #ffffff;
319
+ --tertiary-container: #e6e6e6;
320
+ --on-tertiary-container: #000000;
321
+ --error: var(--contrast-error);
322
+ --on-error: #ffffff;
323
+ --error-light: #ad0000;
324
+ --error-dark: #500000;
325
+ --error-container: var(--contrast-error-container);
326
+ --on-error-container: #000000;
327
+ --success: var(--contrast-success);
328
+ --on-success: #ffffff;
329
+ --success-light: #007000;
330
+ --success-dark: #003800;
331
+ --success-container: var(--contrast-success-container);
332
+ --on-success-container: #000000;
333
+ --info: var(--contrast-info);
334
+ --on-info: #ffffff;
335
+ --info-light: #315cff;
336
+ --info-dark: #00228a;
337
+ --info-container: var(--contrast-info-container);
338
+ --on-info-container: #000000;
339
+ --warning: var(--contrast-warning);
340
+ --on-warning: #ffffff;
341
+ --warning-light: #755300;
342
+ --warning-dark: #302300;
343
+ --warning-container: var(--contrast-warning-container);
344
+ --on-warning-container: #000000;
345
+ --neutral: #333333;
346
+ --surface: var(--contrast-surface);
347
+ --on-surface: var(--contrast-text);
348
+ --surface-container-lowest: #ffffff;
349
+ --on-surface-container-lowest: #000000;
350
+ --surface-container-low: #ffffff;
351
+ --on-surface-container-low: #000000;
352
+ --surface-container: var(--contrast-container);
353
+ --on-surface-container: #000000;
354
+ --surface-container-high: #e6e6e6;
355
+ --on-surface-container-high: #000000;
356
+ --surface-container-highest: #cccccc;
357
+ --on-surface-container-highest: #000000;
358
+ --background: var(--contrast-canvas);
359
+ --on-background: var(--contrast-text);
360
+ --rui-border-color: #000000;
361
+ --rui-control-border-color: #000000;
362
+ --border: var(--rui-border-color);
363
+ @supports (color: color-mix(in lab, red, red)) {
364
+ --border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
365
+ }
366
+ --focus-ring: var(--contrast-focus);
367
+ --on-focus-ring: #ffffff;
368
+ --link: #0033cc;
369
+ --overlay: rgb(0 0 0 / 70%);
370
+ --background-code: #ffffff;
371
+ --on-background-code: #000000;
372
+ }
373
+ :where(.dark), :root.dark[data-rui-theme='high-contrast'] {
374
+ --gray-50: #ffffff;
375
+ --gray-100: #f2f2f2;
376
+ --gray-200: #d9d9d9;
377
+ --gray-300: #bfbfbf;
378
+ --gray-400: #999999;
379
+ --gray-500: #737373;
380
+ --gray-600: #4d4d4d;
381
+ --gray-700: #333333;
382
+ --gray-800: #1a1a1a;
383
+ --gray-900: #080808;
384
+ --gray-950: #000000;
385
+ --primary: var(--contrast-primary);
386
+ --on-primary: #000000;
387
+ --primary-light: #ffff80;
388
+ --primary-dark: #e6e600;
389
+ --primary-container: var(--contrast-primary-container);
390
+ --on-primary-container: #000000;
391
+ --secondary: var(--contrast-secondary);
392
+ --on-secondary: #000000;
393
+ --secondary-light: #80ffff;
394
+ --secondary-dark: #00cccc;
395
+ --secondary-container: var(--contrast-secondary-container);
396
+ --on-secondary-container: #000000;
397
+ --tertiary: var(--contrast-tertiary);
398
+ --on-tertiary: #000000;
399
+ --tertiary-container: #ffffff;
400
+ --on-tertiary-container: #000000;
401
+ --error: var(--contrast-error);
402
+ --on-error: #000000;
403
+ --error-light: #ffd1cc;
404
+ --error-dark: #ff756b;
405
+ --error-container: var(--contrast-error-container);
406
+ --on-error-container: #000000;
407
+ --success: var(--contrast-success);
408
+ --on-success: #000000;
409
+ --success-light: #c6ffb8;
410
+ --success-dark: #64e64e;
411
+ --success-container: var(--contrast-success-container);
412
+ --on-success-container: #000000;
413
+ --info: var(--contrast-info);
414
+ --on-info: #000000;
415
+ --info-light: #d1f5ff;
416
+ --info-dark: #52c8eb;
417
+ --info-container: var(--contrast-info-container);
418
+ --on-info-container: #000000;
419
+ --warning: var(--contrast-warning);
420
+ --on-warning: #000000;
421
+ --warning-light: #ffff80;
422
+ --warning-dark: #e6e600;
423
+ --warning-container: var(--contrast-warning-container);
424
+ --on-warning-container: #000000;
425
+ --neutral: #ffffff;
426
+ --surface: #000000;
427
+ --on-surface: #ffffff;
428
+ --surface-container-lowest: #000000;
429
+ --on-surface-container-lowest: #ffffff;
430
+ --surface-container-low: #000000;
431
+ --on-surface-container-low: #ffffff;
432
+ --surface-container: #1a1a1a;
433
+ --on-surface-container: #ffffff;
434
+ --surface-container-high: #1a1a1a;
435
+ --on-surface-container-high: #ffffff;
436
+ --surface-container-highest: #333333;
437
+ --on-surface-container-highest: #ffffff;
438
+ --background: var(--contrast-canvas);
439
+ --on-background: var(--contrast-text);
440
+ --rui-border-color: #ffffff;
441
+ --rui-control-border-color: #ffffff;
442
+ --border: var(--rui-border-color);
443
+ @supports (color: color-mix(in lab, red, red)) {
444
+ --border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
445
+ }
446
+ --focus-ring: var(--contrast-focus);
447
+ --on-focus-ring: #000000;
448
+ --link: #80dfff;
449
+ --overlay: rgb(0 0 0 / 70%);
450
+ --background-code: #000000;
451
+ --on-background-code: #ffffff;
452
+ }
453
+ :root, :root[data-rui-theme='high-contrast'] {
454
+ --font-sans: ui-sans-serif, system-ui, sans-serif;
455
+ --font-heading: var(--font-sans);
456
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
457
+ --border-radius-xs: 0;
458
+ --border-radius-sm: 0;
459
+ --border-radius-md: 0;
460
+ --border-radius-lg: 0;
461
+ --border-radius-xl: 0;
462
+ --border-radius-2xl: 0;
463
+ --border-radius-3xl: 0;
464
+ --radius-control: 0;
465
+ --radius-container: 0;
466
+ --rui-border-alpha: 100%;
467
+ --focus-ring-width: 3px;
468
+ --focus-ring-offset: 3px;
469
+ --opacity-disabled: 1;
470
+ }
471
+ @layer components {
472
+ :root .rui-button {
473
+ border-radius: var(--radius-none);
474
+ border-style: var(--tw-border-style);
475
+ border-width: 2px;
476
+ --tw-font-weight: var(--font-weight-semibold);
477
+ font-weight: var(--font-weight-semibold);
478
+ --tw-shadow: 0 0 #0000;
479
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
480
+ transition: none;
481
+ }
482
+ :root .rui-button--outline,
483
+ :root .rui-button--ghost {
484
+ border-style: var(--tw-border-style);
485
+ border-width: 2px;
486
+ border-color: var(--color-on-background);
487
+ background-color: var(--color-background);
488
+ color: var(--color-on-background);
489
+ }
490
+ :root .rui-button:disabled,
491
+ :root .rui-input:disabled,
492
+ :root .rui-textarea:disabled,
493
+ :root .rui-select[aria-disabled='true'] {
494
+ border-style: var(--tw-border-style);
495
+ border-width: 2px;
496
+ border-color: var(--color-on-background);
497
+ color: var(--color-on-background);
498
+ opacity: 1;
499
+ }
500
+ :root .rui-input,
501
+ :root .rui-textarea,
502
+ :root .rui-autocomplete__input,
503
+ :root .rui-combobox__input,
504
+ :root .rui-date-field__input,
505
+ :root .rui-date-input__segment,
506
+ :root .rui-number-field__input,
507
+ :root .rui-select__control {
508
+ border-radius: var(--radius-none);
509
+ border-style: var(--tw-border-style);
510
+ border-width: 2px;
511
+ border-color: var(--color-on-background);
512
+ background-color: var(--color-background);
513
+ color: var(--color-on-background);
514
+ }
515
+ :root .rui-checkbox__control,
516
+ :root .rui-radio__control,
517
+ :root .rui-switch__track {
518
+ border-radius: var(--radius-none);
519
+ border-style: var(--tw-border-style);
520
+ border-width: 2px;
521
+ border-color: var(--color-on-background);
522
+ background-color: var(--color-background);
523
+ }
524
+ :root .rui-checkbox__input:checked + .rui-checkbox__control,
525
+ :root .rui-radio__input:checked + .rui-radio__control,
526
+ :root .rui-switch__input:checked + .rui-switch__track {
527
+ border-style: var(--tw-border-style);
528
+ border-width: 2px;
529
+ border-color: var(--color-primary);
530
+ background-color: var(--color-primary);
531
+ }
532
+ :root .rui-listbox__option[aria-selected='true'],
533
+ :root .rui-menu-button__item[aria-checked='true'],
534
+ :root .rui-menubar__menu-item[aria-checked='true'],
535
+ :root .rui-tree__node[aria-selected='true'],
536
+ :root .rui-calendar__day[aria-selected='true'] {
537
+ border-style: var(--tw-border-style);
538
+ border-width: 2px;
539
+ border-color: var(--color-primary);
540
+ background-color: var(--color-primary);
541
+ --tw-font-weight: var(--font-weight-semibold);
542
+ font-weight: var(--font-weight-semibold);
543
+ color: var(--color-on-primary);
544
+ }
545
+ :root .rui-tabs__tab[aria-selected='true'],
546
+ :root .rui-button[aria-pressed='true'],
547
+ :root .rui-pagination__link[aria-current='page'] {
548
+ --tw-font-weight: var(--font-weight-bold, 700);
549
+ font-weight: var(--font-weight-bold, 700);
550
+ text-decoration-line: underline;
551
+ text-decoration-thickness: 2px;
552
+ text-underline-offset: 4px;
553
+ }
554
+ :root .rui-alert,
555
+ :root .rui-toast__content,
556
+ :root .rui-dialog__surface,
557
+ :root .rui-popover-host,
558
+ :root .rui-hover-card__content,
559
+ :root .rui-calendar,
560
+ :root rui-tabs[variant='boxed'] {
561
+ border-radius: var(--radius-none);
562
+ border-style: var(--tw-border-style);
563
+ border-width: 2px;
564
+ border-color: var(--color-on-background);
565
+ background-color: var(--color-background);
566
+ color: var(--color-on-background);
567
+ --tw-shadow: 0 0 #0000;
568
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
569
+ }
570
+ :root .rui-badge,
571
+ :root .rui-chip,
572
+ :root .rui-separator,
573
+ :root .rui-meter__track,
574
+ :root .rui-slider__range-track,
575
+ :root .rui-window-splitter__separator {
576
+ border-style: var(--tw-border-style);
577
+ border-width: 1px;
578
+ border-color: var(--color-on-background);
579
+ }
580
+ :root .rui-table__header,
581
+ :root .rui-treegrid__row--header,
582
+ :root .rui-calendar__weekdays {
583
+ border-bottom-style: var(--tw-border-style);
584
+ border-bottom-width: 2px;
585
+ border-color: var(--color-on-background);
586
+ --tw-font-weight: var(--font-weight-bold, 700);
587
+ font-weight: var(--font-weight-bold, 700);
588
+ }
589
+ :root .rui-checkbox:has(input:disabled),
590
+ :root .rui-radio:has(input:disabled),
591
+ :root .rui-switch:has(input:disabled) {
592
+ opacity: 1;
593
+ }
594
+ }
595
+ :root {
596
+ --space-1: calc(0.125rem * var(--rui-density));
597
+ --space-2: calc(0.25rem * var(--rui-density));
598
+ --space-3: calc(0.5rem * var(--rui-density));
599
+ --space-4: calc(0.75rem * var(--rui-density));
600
+ --space-5: calc(1rem * var(--rui-density));
601
+ --space-6: calc(1.25rem * var(--rui-density));
602
+ --space-8: calc(1.5rem * var(--rui-density));
603
+ --space-10: calc(2rem * var(--rui-density));
604
+ --space-12: calc(2.5rem * var(--rui-density));
605
+ --space-16: calc(3rem * var(--rui-density));
606
+ --space-control-x: var(--space-3);
607
+ --space-control-y: var(--space-2);
608
+ --space-inline: var(--space-2);
609
+ --space-stack: var(--space-3);
610
+ --space-inset: var(--space-4);
611
+ }
612
+ @property --tw-border-style {
613
+ syntax: "*";
614
+ inherits: false;
615
+ initial-value: solid;
616
+ }
617
+ @property --tw-font-weight {
618
+ syntax: "*";
619
+ inherits: false;
620
+ }
621
+ @property --tw-shadow {
622
+ syntax: "*";
623
+ inherits: false;
624
+ initial-value: 0 0 #0000;
625
+ }
626
+ @property --tw-shadow-color {
627
+ syntax: "*";
628
+ inherits: false;
629
+ }
630
+ @property --tw-shadow-alpha {
631
+ syntax: "<percentage>";
632
+ inherits: false;
633
+ initial-value: 100%;
634
+ }
635
+ @property --tw-inset-shadow {
636
+ syntax: "*";
637
+ inherits: false;
638
+ initial-value: 0 0 #0000;
639
+ }
640
+ @property --tw-inset-shadow-color {
641
+ syntax: "*";
642
+ inherits: false;
643
+ }
644
+ @property --tw-inset-shadow-alpha {
645
+ syntax: "<percentage>";
646
+ inherits: false;
647
+ initial-value: 100%;
648
+ }
649
+ @property --tw-ring-color {
650
+ syntax: "*";
651
+ inherits: false;
652
+ }
653
+ @property --tw-ring-shadow {
654
+ syntax: "*";
655
+ inherits: false;
656
+ initial-value: 0 0 #0000;
657
+ }
658
+ @property --tw-inset-ring-color {
659
+ syntax: "*";
660
+ inherits: false;
661
+ }
662
+ @property --tw-inset-ring-shadow {
663
+ syntax: "*";
664
+ inherits: false;
665
+ initial-value: 0 0 #0000;
666
+ }
667
+ @property --tw-ring-inset {
668
+ syntax: "*";
669
+ inherits: false;
670
+ }
671
+ @property --tw-ring-offset-width {
672
+ syntax: "<length>";
673
+ inherits: false;
674
+ initial-value: 0px;
675
+ }
676
+ @property --tw-ring-offset-color {
677
+ syntax: "*";
678
+ inherits: false;
679
+ initial-value: #fff;
680
+ }
681
+ @property --tw-ring-offset-shadow {
682
+ syntax: "*";
683
+ inherits: false;
684
+ initial-value: 0 0 #0000;
685
+ }
686
+ @layer properties {
687
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
688
+ *, ::before, ::after, ::backdrop {
689
+ --tw-border-style: solid;
690
+ --tw-font-weight: initial;
691
+ --tw-shadow: 0 0 #0000;
692
+ --tw-shadow-color: initial;
693
+ --tw-shadow-alpha: 100%;
694
+ --tw-inset-shadow: 0 0 #0000;
695
+ --tw-inset-shadow-color: initial;
696
+ --tw-inset-shadow-alpha: 100%;
697
+ --tw-ring-color: initial;
698
+ --tw-ring-shadow: 0 0 #0000;
699
+ --tw-inset-ring-color: initial;
700
+ --tw-inset-ring-shadow: 0 0 #0000;
701
+ --tw-ring-inset: initial;
702
+ --tw-ring-offset-width: 0px;
703
+ --tw-ring-offset-color: #fff;
704
+ --tw-ring-offset-shadow: 0 0 #0000;
705
+ }
706
+ }
707
+ }