@dixy-ui/themes 0.1.0-beta.3 → 0.1.0-beta.5

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