@dixy-ui/themes 0.1.0-beta.2 → 0.1.0-beta.4

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 (94) hide show
  1. package/dist/ansi-panes.css +79 -5
  2. package/dist/arcade/ornament.d.ts +3 -0
  3. package/dist/arcade/ornament.js +8 -0
  4. package/dist/arcade-cabinet.css +1086 -0
  5. package/dist/art-deco.css +79 -5
  6. package/dist/atomic-lounge.css +83 -5
  7. package/dist/authoring.d.ts +8 -8
  8. package/dist/azulejo-tile.css +83 -5
  9. package/dist/blueprint.css +79 -5
  10. package/dist/brutalist-concrete.css +83 -5
  11. package/dist/bytes.json +97 -67
  12. package/dist/candy-clay.css +85 -5
  13. package/dist/catalog.d.ts +294 -42
  14. package/dist/catalog.js +301 -43
  15. package/dist/character.d.ts +1 -1
  16. package/dist/character.js +6 -0
  17. package/dist/chrome.js +13 -3
  18. package/dist/compile-css.js +23 -5
  19. package/dist/dispatch.css +731 -0
  20. package/dist/diwali-lights.css +83 -5
  21. package/dist/documents.d.ts +115 -7
  22. package/dist/documents.js +10 -2
  23. package/dist/foundations.d.ts +8 -0
  24. package/dist/foundations.js +10 -0
  25. package/dist/frame-styles.d.ts +3 -0
  26. package/dist/frame-styles.js +6 -0
  27. package/dist/freighter.css +145 -15
  28. package/dist/glass-ui.css +79 -5
  29. package/dist/holi-colours.css +83 -5
  30. package/dist/ledger.css +566 -0
  31. package/dist/living-forest.css +85 -5
  32. package/dist/mainframe.css +764 -0
  33. package/dist/manifests.d.ts +144 -144
  34. package/dist/material-light.css +83 -5
  35. package/dist/neon-night-market.css +83 -5
  36. package/dist/ocean-depths.css +85 -5
  37. package/dist/orbital-hud.css +145 -15
  38. package/dist/organic-paint-launch.d.ts +9 -0
  39. package/dist/organic-paint-launch.js +121 -46
  40. package/dist/organic-paint.d.ts +1 -1
  41. package/dist/organic-settings.d.ts +109 -25
  42. package/dist/organic-settings.js +49 -0
  43. package/dist/papel-picado.css +83 -5
  44. package/dist/phosphor-terminal.css +83 -5
  45. package/dist/prism-glass.css +79 -5
  46. package/dist/recipes.d.ts +162 -0
  47. package/dist/recipes.js +164 -0
  48. package/dist/resolve.d.ts +18 -2
  49. package/dist/retro-os.css +79 -5
  50. package/dist/riso-zine.css +79 -5
  51. package/dist/save-point.css +948 -0
  52. package/dist/savepoint/ornament.d.ts +3 -0
  53. package/dist/savepoint/ornament.js +8 -0
  54. package/dist/scrapbook.css +79 -5
  55. package/dist/signal.css +563 -0
  56. package/dist/skins/arcade-cabinet.d.ts +68 -0
  57. package/dist/skins/arcade-cabinet.js +68 -0
  58. package/dist/skins/dispatch.d.ts +57 -0
  59. package/dist/skins/dispatch.js +57 -0
  60. package/dist/skins/ledger.d.ts +57 -0
  61. package/dist/skins/ledger.js +57 -0
  62. package/dist/skins/mainframe.d.ts +57 -0
  63. package/dist/skins/mainframe.js +57 -0
  64. package/dist/skins/save-point.d.ts +68 -0
  65. package/dist/skins/save-point.js +68 -0
  66. package/dist/skins/signal.d.ts +57 -0
  67. package/dist/skins/signal.js +57 -0
  68. package/dist/skins/sunset-drive.d.ts +68 -0
  69. package/dist/skins/sunset-drive.js +68 -0
  70. package/dist/solar-sail.css +79 -5
  71. package/dist/starters-launch.d.ts +25 -1
  72. package/dist/starters-launch.js +343 -49
  73. package/dist/studio-hardware.css +83 -5
  74. package/dist/sumi-ink.css +79 -5
  75. package/dist/sunset/ornament.d.ts +3 -0
  76. package/dist/sunset/ornament.js +8 -0
  77. package/dist/sunset-drive.css +1024 -0
  78. package/dist/swiss-poster.css +149 -15
  79. package/dist/tactile-atelier.css +85 -5
  80. package/dist/theme-document.schema.json +34 -6
  81. package/dist/theme-fix.d.ts +11 -0
  82. package/dist/theme-fix.js +32 -0
  83. package/dist/theme-fixes.d.ts +2 -0
  84. package/dist/theme-fixes.js +1 -0
  85. package/dist/theme-schema.d.ts +6 -6
  86. package/dist/theme-schema.js +2 -0
  87. package/dist/tokyo-transit.css +83 -5
  88. package/dist/winamp-signal.css +83 -5
  89. package/dist/y2k-titanium.css +151 -15
  90. package/dist/yule-knit.css +79 -5
  91. package/package.json +50 -8
  92. package/dist/lunar-new-year.css +0 -811
  93. package/dist/skins/lunar-new-year.d.ts +0 -68
  94. package/dist/skins/lunar-new-year.js +0 -68
@@ -0,0 +1,563 @@
1
+ /* Generated by scripts/generate-skins.mjs. Do not edit. */
2
+
3
+ @layer dixy.tokens, dixy.components;
4
+ @layer dixy.tokens {
5
+ .dixy-theme[data-dixy-skin="dixy/signal"] {
6
+ font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
7
+ --dixy-font-sans:
8
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
9
+ --dixy-font-display:
10
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
11
+ --dixy-skin-cushion-elevation: 0 0 0 transparent;
12
+ --dixy-card-shadow: var(--dixy-shadow-none);
13
+ --dixy-skin-depth-shadow: 0 0 0 transparent;
14
+ --dixy-stroke-width: 2px;
15
+ --dixy-card-border-width: 2px;
16
+ --dixy-button-border-width: 2px;
17
+ --dixy-input-border-width: 2px;
18
+ --dixy-dialog-border-width: 2px;
19
+ --dixy-font-heading-lg-family:
20
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
21
+ --dixy-font-heading-md-family:
22
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
23
+ --dixy-font-heading-sm-family:
24
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
25
+ --dixy-font-title-lg-family:
26
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
27
+ --dixy-font-title-md-family:
28
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
29
+ --dixy-font-title-sm-family:
30
+ "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
31
+ --dixy-skin-edge: #000000;
32
+ --dixy-skin-field-edge: color-mix(
33
+ in oklab,
34
+ var(--dixy-color-base-9) 50%,
35
+ var(--dixy-color-base-8)
36
+ );
37
+
38
+ --dixy-skin-surface: color-mix(
39
+ in srgb,
40
+ var(--dixy-color-background-surface-raised) 0%,
41
+ #ffffff
42
+ );
43
+ --dixy-skin-ground: color-mix(
44
+ in srgb,
45
+ var(--dixy-color-background-canvas) 65%,
46
+ #ffffff
47
+ );
48
+ --dixy-skin-card-inset: 24px 24px 24px;
49
+ --dixy-skin-pad-top: 24px;
50
+ --dixy-skin-pad-inline: 24px;
51
+ --dixy-skin-frame-inset: 0px;
52
+ --dixy-skin-frame-width: 0px;
53
+ --dixy-skin-finish:
54
+ linear-gradient(180deg, rgb(255 255 255 / 0), transparent 42%),
55
+ linear-gradient(transparent, transparent);
56
+ --dixy-skin-grain: linear-gradient(transparent, transparent);
57
+ --dixy-skin-grain-size: 4px;
58
+ --dixy-skin-paint: var(--dixy-skin-grain), var(--dixy-skin-finish);
59
+ --dixy-skin-canvas: linear-gradient(#ffffff, #ffffff);
60
+ --dixy-skin-authored-shadow: 0 0 #0000;
61
+ --dixy-skin-shadow: var(
62
+ --dixy-skin-depth-shadow,
63
+ var(--dixy-skin-authored-shadow)
64
+ );
65
+ --dixy-skin-inset: 0 0 #0000;
66
+ --dixy-skin-control-edge:
67
+ inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 -1px 0 #0002;
68
+ --dixy-skin-cushion:
69
+ inset 0 0px 0px #ffffff66,
70
+ inset 0 -0px 0px color-mix(in srgb, var(--dixy-skin-edge) 0%, transparent),
71
+ var(--dixy-skin-cushion-elevation);
72
+ --dixy-skin-cushion-cast: 0 0px 0px
73
+ color-mix(in srgb, var(--dixy-skin-edge) 0%, transparent);
74
+ --dixy-skin-panel-relief: var(--dixy-skin-shadow);
75
+ --dixy-skin-control-relief:
76
+ var(--dixy-skin-control-edge), var(--dixy-skin-shadow);
77
+ --dixy-skin-thumb: linear-gradient(#ffffff, #ffffff);
78
+ --dixy-skin-mark-opacity: 1;
79
+ --dixy-font-display-lg-weight: 700;
80
+ --dixy-font-display-md-weight: 700;
81
+ --dixy-font-display-sm-weight: 700;
82
+ --dixy-font-heading-lg-weight: 700;
83
+ --dixy-font-heading-md-weight: 700;
84
+ --dixy-font-heading-sm-weight: 700;
85
+ --dixy-font-title-lg-weight: 700;
86
+ --dixy-font-title-md-weight: 700;
87
+ --dixy-font-title-sm-weight: 700;
88
+ }
89
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-appearance="dark"] {
90
+ --dixy-skin-edge: #ffffff;
91
+ --dixy-skin-canvas: linear-gradient(#000000, #000000);
92
+ --dixy-skin-surface: color-mix(
93
+ in srgb,
94
+ var(--dixy-color-background-surface-raised) 0%,
95
+ #000000
96
+ );
97
+ --dixy-skin-ground: color-mix(
98
+ in srgb,
99
+ var(--dixy-color-background-canvas) 65%,
100
+ #000000
101
+ );
102
+ }
103
+ .dixy-theme[data-dixy-skin="dixy/signal"]:not([data-appearance="dark"]) {
104
+ --dixy-color-brand-9: var(--dixy-color-brand-11);
105
+ --dixy-color-brand-10: var(--dixy-color-brand-12);
106
+ --dixy-color-brand-pressed: var(--dixy-color-brand-12);
107
+ }
108
+ .dixy-theme[data-dixy-skin="dixy/signal"] {
109
+ --dixy-size-control-sm: 44px;
110
+ --dixy-size-control-md: 48px;
111
+ --dixy-size-control-lg: 56px;
112
+ --dixy-height-sm: 44px;
113
+ --dixy-height-md: 48px;
114
+ --dixy-height-lg: 56px;
115
+ }
116
+
117
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-relief="2"] {
118
+ --dixy-skin-shadow:
119
+ var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
120
+ 0 10px 18px #0002;
121
+ }
122
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-relief="0"],
123
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-effects="reduced"] {
124
+ --dixy-skin-shadow: none;
125
+ --dixy-skin-inset: none;
126
+ --dixy-skin-control-edge: none;
127
+ --dixy-skin-panel-relief: none;
128
+ --dixy-skin-control-relief: none;
129
+ }
130
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-effects="reduced"] {
131
+ --dixy-skin-paint: none;
132
+ --dixy-skin-finish: none;
133
+ --dixy-skin-canvas: none;
134
+ --dixy-skin-thumb: none;
135
+ --dixy-skin-mark-opacity: 0;
136
+ }
137
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-ornament="quiet"] {
138
+ --dixy-skin-mark-opacity: 0;
139
+ }
140
+ }
141
+ @layer dixy.components {
142
+ .dixy-theme[data-dixy-skin="dixy/signal"] {
143
+ position: relative;
144
+ isolation: isolate;
145
+ }
146
+ .dixy-theme[data-dixy-skin="dixy/signal"]:not(.dixy-portal-scope) {
147
+ background-color: var(--dixy-skin-ground);
148
+ background-image: var(--dixy-skin-canvas);
149
+ }
150
+ :is(
151
+ .dixy-card,
152
+ .dixy-box,
153
+ .dixy-dialog-popup,
154
+ .dixy-alert-dialog-popup,
155
+ .dixy-drawer-popup,
156
+ .dixy-popover-popup,
157
+ .dixy-preview-card-popup,
158
+ .dixy-tooltip-popup,
159
+ .dixy-select-popup,
160
+ .dixy-combobox-popup,
161
+ .dixy-autocomplete-popup,
162
+ .dixy-menu-popup,
163
+ .dixy-context-menu-popup,
164
+ .dixy-navigation-menu-popup,
165
+ .dixy-toast-root,
166
+ .dixy-alert,
167
+ .dixy-list-box,
168
+ .dixy-calendar,
169
+ .dixy-range-calendar
170
+ )[data-dixy-skin="dixy/signal"] {
171
+ position: relative;
172
+ border-radius: calc(var(--dixy-radius-card) * 1);
173
+ }
174
+ :is(
175
+ .dixy-dialog-popup,
176
+ .dixy-alert-dialog-popup,
177
+ .dixy-drawer-popup,
178
+ .dixy-popover-popup,
179
+ .dixy-preview-card-popup,
180
+ .dixy-tooltip-popup,
181
+ .dixy-select-popup,
182
+ .dixy-combobox-popup,
183
+ .dixy-autocomplete-popup,
184
+ .dixy-menu-popup,
185
+ .dixy-context-menu-popup,
186
+ .dixy-navigation-menu-popup
187
+ )[data-dixy-skin="dixy/signal"] {
188
+ border-radius: calc(var(--dixy-radius-overlay) * 1);
189
+ }
190
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/signal"] {
191
+ padding: var(--dixy-skin-card-inset);
192
+ border: 0px solid var(--dixy-skin-edge);
193
+ }
194
+ :is(
195
+ .dixy-card,
196
+ .dixy-box,
197
+ .dixy-dialog-popup,
198
+ .dixy-alert-dialog-popup,
199
+ .dixy-drawer-popup,
200
+ .dixy-popover-popup,
201
+ .dixy-preview-card-popup,
202
+ .dixy-tooltip-popup,
203
+ .dixy-select-popup,
204
+ .dixy-combobox-popup,
205
+ .dixy-autocomplete-popup,
206
+ .dixy-menu-popup,
207
+ .dixy-context-menu-popup,
208
+ .dixy-navigation-menu-popup,
209
+ .dixy-toast-root,
210
+ .dixy-alert,
211
+ .dixy-list-box,
212
+ .dixy-calendar,
213
+ .dixy-range-calendar
214
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
215
+ :where([data-dixy-material-override]) *
216
+ ) {
217
+ background-image: var(--dixy-skin-paint);
218
+ background-size:
219
+ var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
220
+ 100% 100%,
221
+ 100% 100%,
222
+ 100% 100%;
223
+ box-shadow: var(--dixy-skin-panel-relief);
224
+ }
225
+ :is(
226
+ .dixy-card,
227
+ .dixy-box,
228
+ .dixy-dialog-popup,
229
+ .dixy-alert-dialog-popup,
230
+ .dixy-drawer-popup,
231
+ .dixy-popover-popup,
232
+ .dixy-preview-card-popup,
233
+ .dixy-tooltip-popup,
234
+ .dixy-select-popup,
235
+ .dixy-combobox-popup,
236
+ .dixy-autocomplete-popup,
237
+ .dixy-menu-popup,
238
+ .dixy-context-menu-popup,
239
+ .dixy-navigation-menu-popup,
240
+ .dixy-toast-root,
241
+ .dixy-alert,
242
+ .dixy-list-box,
243
+ .dixy-calendar,
244
+ .dixy-range-calendar
245
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
246
+ :where([data-dixy-material-override]) *
247
+ ):not([data-variant="solid"]):not([data-variant="soft"]) {
248
+ background-color: var(--dixy-skin-surface);
249
+ }
250
+ :is(
251
+ .dixy-dialog-popup,
252
+ .dixy-alert-dialog-popup,
253
+ .dixy-drawer-popup,
254
+ .dixy-popover-popup,
255
+ .dixy-preview-card-popup,
256
+ .dixy-tooltip-popup,
257
+ .dixy-select-popup,
258
+ .dixy-combobox-popup,
259
+ .dixy-autocomplete-popup,
260
+ .dixy-menu-popup,
261
+ .dixy-context-menu-popup,
262
+ .dixy-navigation-menu-popup
263
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
264
+ :where([data-dixy-material-override]) *
265
+ ):not([data-variant="solid"]):not([data-variant="soft"]) {
266
+ background-color: color-mix(
267
+ in srgb,
268
+ var(--dixy-color-background-surface-raised) 94%,
269
+ var(--dixy-skin-surface)
270
+ );
271
+ }
272
+ :is(
273
+ .dixy-input,
274
+ .dixy-textarea,
275
+ .dixy-native-select,
276
+ .dixy-select-trigger,
277
+ .dixy-input-group,
278
+ .dixy-combobox-input-group,
279
+ .dixy-autocomplete-input-group,
280
+ .dixy-number-field-group,
281
+ .dixy-otp-field-input
282
+ )[data-dixy-skin="dixy/signal"] {
283
+ border-radius: calc(var(--dixy-radius-control) * 1);
284
+ }
285
+ :is(.dixy-textarea)[data-dixy-skin="dixy/signal"] {
286
+ border-radius: calc(
287
+ min(var(--dixy-radius-control), var(--dixy-radius-card)) * 1
288
+ );
289
+ }
290
+ :is(
291
+ .dixy-input,
292
+ .dixy-textarea,
293
+ .dixy-native-select,
294
+ .dixy-select-trigger,
295
+ .dixy-input-group,
296
+ .dixy-combobox-input-group,
297
+ .dixy-autocomplete-input-group,
298
+ .dixy-number-field-group,
299
+ .dixy-otp-field-input
300
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
301
+ :where([data-dixy-material-override]) *
302
+ ) {
303
+ border-width: var(--dixy-input-border-width);
304
+ border-color: var(--dixy-skin-field-edge);
305
+ background-image: var(--dixy-skin-paint);
306
+ background-color: var(--dixy-color-background-canvas);
307
+ background-size:
308
+ var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
309
+ 100% 100%,
310
+ 100% 100%,
311
+ 100% 100%;
312
+ box-shadow: var(--dixy-skin-inset);
313
+ }
314
+ /* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
315
+ skin's paint to that so its image and grain size always land together;
316
+ otherwise the material image is tiled at the grain size (stripes). */
317
+ :is(
318
+ .dixy-card,
319
+ .dixy-box,
320
+ .dixy-dialog-popup,
321
+ .dixy-alert-dialog-popup,
322
+ .dixy-drawer-popup,
323
+ .dixy-popover-popup,
324
+ .dixy-preview-card-popup,
325
+ .dixy-tooltip-popup,
326
+ .dixy-select-popup,
327
+ .dixy-combobox-popup,
328
+ .dixy-autocomplete-popup,
329
+ .dixy-menu-popup,
330
+ .dixy-context-menu-popup,
331
+ .dixy-navigation-menu-popup,
332
+ .dixy-toast-root,
333
+ .dixy-alert,
334
+ .dixy-list-box,
335
+ .dixy-calendar,
336
+ .dixy-range-calendar,
337
+ .dixy-input,
338
+ .dixy-textarea,
339
+ .dixy-native-select,
340
+ .dixy-select-trigger,
341
+ .dixy-input-group,
342
+ .dixy-combobox-input-group,
343
+ .dixy-autocomplete-input-group,
344
+ .dixy-number-field-group,
345
+ .dixy-otp-field-input
346
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
347
+ :where([data-dixy-material-override]) *
348
+ )[data-dixy-visual][data-material]:not([data-disabled]) {
349
+ background-image: var(--dixy-skin-paint);
350
+ }
351
+ :is(.dixy-button)[data-dixy-skin="dixy/signal"]:not(
352
+ [data-dixy-material-override]
353
+ ):not(:where([data-dixy-material-override]) *):is(
354
+ [data-variant="solid"],
355
+ [data-variant="soft"],
356
+ [data-variant="outline"]
357
+ ):not([data-disabled]) {
358
+ border-width: var(--dixy-button-border-width);
359
+ border-color: var(--dixy-skin-edge);
360
+ border-radius: calc(var(--dixy-shape-control) * 1);
361
+ background-image: var(--dixy-skin-finish);
362
+ box-shadow: var(--dixy-skin-control-relief);
363
+ }
364
+
365
+ :is(.dixy-button)[data-dixy-skin="dixy/signal"]:not(
366
+ [data-dixy-material-override]
367
+ ):not(:where([data-dixy-material-override]) *):is(
368
+ [data-variant="solid"],
369
+ [data-variant="soft"],
370
+ [data-variant="outline"]
371
+ ):not([data-disabled]):active {
372
+ box-shadow: var(--dixy-skin-inset);
373
+ }
374
+ :is(.dixy-tabs-list)[data-dixy-skin="dixy/signal"]:not(
375
+ [data-dixy-material-override]
376
+ ):not(:where([data-dixy-material-override]) *) {
377
+ background-color: var(--dixy-color-background-canvas);
378
+ border: 1px solid var(--dixy-skin-edge);
379
+ box-shadow: var(--dixy-skin-inset);
380
+ }
381
+ /* Selected tabs and toggles are one flat colour, lifted by edge and relief only. A gradient behind the label (thumb art, sheen, material image) splits it across two colours. :not([data-variant="line"]) also outranks materials.css (0,3,0). */
382
+ :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/signal"]:not(
383
+ [data-dixy-material-override]
384
+ ):not(:where([data-dixy-material-override]) *) {
385
+ box-shadow: var(--dixy-skin-control-relief);
386
+ border: 1px solid var(--dixy-skin-edge);
387
+ }
388
+ :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/signal"]:not(
389
+ [data-dixy-material-override]
390
+ ):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
391
+ background-image: none;
392
+ }
393
+ /* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
394
+ .dixy-theme[data-dixy-skin="dixy/signal"]
395
+ .dixy-toggle-group:is([data-attached], [data-segmented]):not(
396
+ [data-dixy-material-override]
397
+ ):not(:where([data-dixy-material-override]) *) {
398
+ background-color: var(--dixy-color-background-canvas);
399
+ border: 1px solid var(--dixy-skin-edge);
400
+ box-shadow: var(--dixy-skin-inset);
401
+ }
402
+ :is(.dixy-toggle)[data-dixy-skin="dixy/signal"]:not(
403
+ [data-dixy-material-override]
404
+ ):not(:where([data-dixy-material-override]) *):not(
405
+ [data-variant="solid"]
406
+ )[data-pressed]:not([data-disabled]) {
407
+ background-color: var(--dixy-color-background-surface-raised);
408
+ background-image: none;
409
+ box-shadow: var(--dixy-skin-control-relief);
410
+ border-color: var(--dixy-skin-edge);
411
+ color: var(--dixy-color-text-primary);
412
+ }
413
+ :is(
414
+ .dixy-slider-track,
415
+ .dixy-progress-track,
416
+ .dixy-meter-track
417
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
418
+ :where([data-dixy-material-override]) *
419
+ ) {
420
+ border: 1px solid var(--dixy-skin-edge);
421
+ background-color: var(--dixy-color-background-surface);
422
+ box-shadow: var(--dixy-skin-inset);
423
+ }
424
+ :is(
425
+ .dixy-slider-indicator,
426
+ .dixy-progress-indicator,
427
+ .dixy-meter-indicator
428
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
429
+ :where([data-dixy-material-override]) *
430
+ ) {
431
+ background-image: var(--dixy-skin-finish);
432
+ }
433
+ :is(
434
+ .dixy-switch-root,
435
+ .dixy-checkbox-root,
436
+ .dixy-radio-root
437
+ )[data-dixy-skin="dixy/signal"]:not([data-dixy-material-override]):not(
438
+ :where([data-dixy-material-override]) *
439
+ )::before {
440
+ box-shadow: var(--dixy-skin-inset);
441
+ }
442
+ :is(.dixy-checkbox-root, .dixy-radio-root)[data-dixy-skin="dixy/signal"]:not(
443
+ [data-dixy-material-override]
444
+ ):not(:where([data-dixy-material-override]) *)[data-checked]::before {
445
+ background-image: var(--dixy-skin-finish);
446
+ }
447
+ :is(.dixy-switch-thumb)[data-dixy-skin="dixy/signal"]:not(
448
+ [data-dixy-material-override]
449
+ ):not(:where([data-dixy-material-override]) *) {
450
+ background-image: var(--dixy-skin-thumb);
451
+ box-shadow: var(--dixy-skin-control-relief);
452
+ border: 1px solid var(--dixy-skin-edge);
453
+ }
454
+ :is(.dixy-slider-thumb)[data-dixy-skin="dixy/signal"]:not(
455
+ [data-dixy-material-override]
456
+ ):not(:where([data-dixy-material-override]) *)::before {
457
+ background-image: var(--dixy-skin-thumb);
458
+ box-shadow: var(--dixy-skin-control-relief);
459
+ border: 1px solid var(--dixy-skin-edge);
460
+ }
461
+
462
+ .dixy-theme[data-dixy-skin="dixy/signal"] {
463
+ --dixy-personality-press-distance: 0px;
464
+ }
465
+ @media (prefers-reduced-motion: no-preference) {
466
+ .dixy-theme[data-dixy-skin="dixy/signal"]:not([data-motion="reduced"]) {
467
+ --dixy-motion-duration-fast: 72ms;
468
+ --dixy-motion-duration-normal: 120ms;
469
+ --dixy-motion-duration-deliberate: 168ms;
470
+ --dixy-motion-duration-slow: 240ms;
471
+ }
472
+ }
473
+ .dixy-theme[data-dixy-skin="dixy/signal"] :is(h1, h2, h3, .dixy-heading) {
474
+ font-weight: 700;
475
+ }
476
+ .dixy-theme[data-dixy-skin="dixy/signal"] {
477
+ font-variant-numeric: tabular-nums;
478
+ }
479
+ .dixy-theme[data-dixy-skin="dixy/signal"] [data-dixy-skin]:focus-visible,
480
+ .dixy-theme[data-dixy-skin="dixy/signal"] [data-dixy-skin] :focus-visible {
481
+ --dixy-focus-halo: 0 0 0 8px var(--dixy-color-yellow-9);
482
+ outline-style: solid;
483
+ outline-width: 3px;
484
+ outline-offset: 2px;
485
+ box-shadow: var(--dixy-focus-halo) !important;
486
+ }
487
+ .dixy-theme[data-dixy-skin="dixy/signal"] ::selection {
488
+ background: var(--dixy-color-base-12);
489
+ color: var(--dixy-color-base-1);
490
+ }
491
+ .dixy-theme[data-dixy-skin="dixy/signal"]
492
+ :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/signal"] {
493
+ border: 1px solid var(--dixy-skin-edge);
494
+ box-shadow:
495
+ 0 0 0 3px var(--dixy-skin-surface),
496
+ 0 0 0 4px var(--dixy-skin-edge),
497
+ var(--dixy-skin-panel-relief);
498
+ }
499
+ .dixy-theme[data-dixy-skin="dixy/signal"]
500
+ :is(.dixy-card)[data-dixy-skin="dixy/signal"]
501
+ > .dixy-card-header
502
+ + .dixy-card-content {
503
+ position: relative;
504
+ padding: 12px 14px;
505
+ }
506
+ .dixy-theme[data-dixy-skin="dixy/signal"]
507
+ :is(.dixy-card)[data-dixy-skin="dixy/signal"]
508
+ > .dixy-card-header
509
+ + .dixy-card-content {
510
+ color: var(--dixy-color-text-primary);
511
+ background-color: var(--dixy-color-background-canvas);
512
+ border-radius: 16px;
513
+ box-shadow:
514
+ inset 0 3px 8px color-mix(in srgb, var(--dixy-skin-edge) 40%, transparent),
515
+ inset 0 -2px 0 color-mix(in srgb, #ffffff 50%, transparent);
516
+ }
517
+
518
+ @supports (backdrop-filter: blur(8px)) {
519
+ .dixy-theme[data-dixy-skin="dixy/signal"][data-effects="backdrop"]
520
+ > .dixy-skin-backdrop {
521
+ backdrop-filter: blur(8px);
522
+ }
523
+ }
524
+ @media (prefers-reduced-transparency: reduce),
525
+ (prefers-contrast: more),
526
+ (forced-colors: active) {
527
+ .dixy-theme[data-dixy-skin="dixy/signal"] {
528
+ --dixy-skin-paint: none;
529
+ --dixy-skin-finish: none;
530
+ --dixy-skin-canvas: none;
531
+ --dixy-skin-thumb: none;
532
+ --dixy-skin-shadow: none;
533
+ --dixy-skin-inset: none;
534
+ --dixy-skin-panel-relief: none;
535
+ --dixy-skin-control-relief: none;
536
+ }
537
+ .dixy-theme[data-dixy-skin="dixy/signal"] > .dixy-skin-backdrop,
538
+ :is(
539
+ .dixy-card,
540
+ .dixy-box,
541
+ .dixy-dialog-popup,
542
+ .dixy-alert-dialog-popup,
543
+ .dixy-drawer-popup,
544
+ .dixy-popover-popup,
545
+ .dixy-preview-card-popup,
546
+ .dixy-tooltip-popup,
547
+ .dixy-select-popup,
548
+ .dixy-combobox-popup,
549
+ .dixy-autocomplete-popup,
550
+ .dixy-menu-popup,
551
+ .dixy-context-menu-popup,
552
+ .dixy-navigation-menu-popup,
553
+ .dixy-toast-root,
554
+ .dixy-alert,
555
+ .dixy-list-box,
556
+ .dixy-calendar,
557
+ .dixy-range-calendar
558
+ )[data-dixy-skin="dixy/signal"] {
559
+ backdrop-filter: none !important;
560
+ -webkit-backdrop-filter: none !important;
561
+ }
562
+ }
563
+ }
@@ -0,0 +1,68 @@
1
+ export declare const arcadeCabinet: {
2
+ readonly id: "dixy/arcade-cabinet";
3
+ readonly name: "Arcade Cabinet";
4
+ readonly version: 1;
5
+ readonly defaults: {
6
+ readonly accentColor: "red";
7
+ readonly neutralColor: "neutral";
8
+ readonly radius: "none";
9
+ readonly density: "default";
10
+ readonly material: "matte";
11
+ readonly shape: "square";
12
+ };
13
+ };
14
+ export declare const arcadeCabinetTheme: {
15
+ readonly skin: {
16
+ readonly id: "dixy/arcade-cabinet";
17
+ readonly name: "Arcade Cabinet";
18
+ readonly version: 1;
19
+ readonly defaults: {
20
+ readonly accentColor: "red";
21
+ readonly neutralColor: "neutral";
22
+ readonly radius: "none";
23
+ readonly density: "default";
24
+ readonly material: "matte";
25
+ readonly shape: "square";
26
+ };
27
+ };
28
+ readonly appearance: "dark";
29
+ readonly accentColor: "red";
30
+ readonly neutralColor: "neutral";
31
+ readonly radius: "none";
32
+ readonly density: "default";
33
+ readonly shape: "square";
34
+ readonly ornament: "balanced";
35
+ readonly relief: 1;
36
+ readonly effects: "static";
37
+ readonly style: {
38
+ readonly fontFamily: "\"VT323\", \"Share Tech Mono\", ui-monospace, monospace";
39
+ readonly "--dixy-font-sans": "\"VT323\", \"Share Tech Mono\", ui-monospace, monospace";
40
+ readonly "--dixy-font-display": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
41
+ readonly "--dixy-skin-cushion-elevation": "var(--dixy-skin-cushion-cast)";
42
+ readonly "--dixy-card-shadow": "var(--dixy-shadow-raised)";
43
+ readonly "--dixy-skin-depth-shadow": "var(--dixy-skin-authored-shadow, var(--dixy-shadow-raised))";
44
+ readonly "--dixy-stroke-width": "2px";
45
+ readonly "--dixy-card-border-width": "2px";
46
+ readonly "--dixy-button-border-width": "2px";
47
+ readonly "--dixy-input-border-width": "2px";
48
+ readonly "--dixy-dialog-border-width": "2px";
49
+ readonly "--dixy-font-heading-lg-family": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
50
+ readonly "--dixy-font-heading-md-family": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
51
+ readonly "--dixy-font-heading-sm-family": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
52
+ readonly "--dixy-font-title-lg-family": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
53
+ readonly "--dixy-font-title-md-family": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
54
+ readonly "--dixy-font-title-sm-family": "\"Silkscreen\", \"VT323\", ui-monospace, monospace";
55
+ readonly "--dixy-organic-density": "55";
56
+ readonly "--dixy-organic-cornerDensity": "50";
57
+ readonly "--dixy-organic-canopyDepth": "30";
58
+ readonly "--dixy-organic-variation": "20";
59
+ readonly "--dixy-organic-scale": "18";
60
+ readonly "--dixy-organic-stemWeight": "30";
61
+ readonly "--dixy-organic-motion": "50";
62
+ readonly "--dixy-organic-seed": "81";
63
+ readonly "--dixy-organic-style": "0";
64
+ readonly "--dixy-organic-canopy": "0";
65
+ readonly "--dixy-organic-stem": "0";
66
+ };
67
+ };
68
+ export default arcadeCabinet;
@@ -0,0 +1,68 @@
1
+ export const arcadeCabinet = {
2
+ id: "dixy/arcade-cabinet",
3
+ name: "Arcade Cabinet",
4
+ version: 1,
5
+ defaults: {
6
+ accentColor: "red",
7
+ neutralColor: "neutral",
8
+ radius: "none",
9
+ density: "default",
10
+ material: "matte",
11
+ shape: "square",
12
+ },
13
+ };
14
+ export const arcadeCabinetTheme = {
15
+ skin: {
16
+ id: "dixy/arcade-cabinet",
17
+ name: "Arcade Cabinet",
18
+ version: 1,
19
+ defaults: {
20
+ accentColor: "red",
21
+ neutralColor: "neutral",
22
+ radius: "none",
23
+ density: "default",
24
+ material: "matte",
25
+ shape: "square",
26
+ },
27
+ },
28
+ appearance: "dark",
29
+ accentColor: "red",
30
+ neutralColor: "neutral",
31
+ radius: "none",
32
+ density: "default",
33
+ shape: "square",
34
+ ornament: "balanced",
35
+ relief: 1,
36
+ effects: "static",
37
+ style: {
38
+ fontFamily: '"VT323", "Share Tech Mono", ui-monospace, monospace',
39
+ "--dixy-font-sans": '"VT323", "Share Tech Mono", ui-monospace, monospace',
40
+ "--dixy-font-display": '"Silkscreen", "VT323", ui-monospace, monospace',
41
+ "--dixy-skin-cushion-elevation": "var(--dixy-skin-cushion-cast)",
42
+ "--dixy-card-shadow": "var(--dixy-shadow-raised)",
43
+ "--dixy-skin-depth-shadow": "var(--dixy-skin-authored-shadow, var(--dixy-shadow-raised))",
44
+ "--dixy-stroke-width": "2px",
45
+ "--dixy-card-border-width": "2px",
46
+ "--dixy-button-border-width": "2px",
47
+ "--dixy-input-border-width": "2px",
48
+ "--dixy-dialog-border-width": "2px",
49
+ "--dixy-font-heading-lg-family": '"Silkscreen", "VT323", ui-monospace, monospace',
50
+ "--dixy-font-heading-md-family": '"Silkscreen", "VT323", ui-monospace, monospace',
51
+ "--dixy-font-heading-sm-family": '"Silkscreen", "VT323", ui-monospace, monospace',
52
+ "--dixy-font-title-lg-family": '"Silkscreen", "VT323", ui-monospace, monospace',
53
+ "--dixy-font-title-md-family": '"Silkscreen", "VT323", ui-monospace, monospace',
54
+ "--dixy-font-title-sm-family": '"Silkscreen", "VT323", ui-monospace, monospace',
55
+ "--dixy-organic-density": "55",
56
+ "--dixy-organic-cornerDensity": "50",
57
+ "--dixy-organic-canopyDepth": "30",
58
+ "--dixy-organic-variation": "20",
59
+ "--dixy-organic-scale": "18",
60
+ "--dixy-organic-stemWeight": "30",
61
+ "--dixy-organic-motion": "50",
62
+ "--dixy-organic-seed": "81",
63
+ "--dixy-organic-style": "0",
64
+ "--dixy-organic-canopy": "0",
65
+ "--dixy-organic-stem": "0",
66
+ },
67
+ };
68
+ export default arcadeCabinet;