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

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 (41) hide show
  1. package/dist/ansi-panes.css +5 -0
  2. package/dist/art-deco.css +5 -0
  3. package/dist/atomic-lounge.css +5 -0
  4. package/dist/azulejo-tile.css +5 -0
  5. package/dist/blueprint.css +5 -0
  6. package/dist/brutalist-concrete.css +5 -0
  7. package/dist/bytes.json +62 -67
  8. package/dist/candy-clay.css +5 -0
  9. package/dist/catalog.d.ts +0 -42
  10. package/dist/catalog.js +0 -43
  11. package/dist/compile-css.js +1 -0
  12. package/dist/diwali-lights.css +5 -0
  13. package/dist/freighter.css +5 -0
  14. package/dist/glass-ui.css +5 -0
  15. package/dist/holi-colours.css +5 -0
  16. package/dist/living-forest.css +5 -0
  17. package/dist/material-light.css +5 -0
  18. package/dist/neon-night-market.css +5 -0
  19. package/dist/ocean-depths.css +5 -0
  20. package/dist/orbital-hud.css +5 -0
  21. package/dist/papel-picado.css +5 -0
  22. package/dist/phosphor-terminal.css +5 -0
  23. package/dist/prism-glass.css +5 -0
  24. package/dist/retro-os.css +5 -0
  25. package/dist/riso-zine.css +5 -0
  26. package/dist/scrapbook.css +5 -0
  27. package/dist/solar-sail.css +5 -0
  28. package/dist/starters-launch.d.ts +1 -1
  29. package/dist/starters-launch.js +0 -49
  30. package/dist/studio-hardware.css +5 -0
  31. package/dist/sumi-ink.css +5 -0
  32. package/dist/swiss-poster.css +5 -0
  33. package/dist/tactile-atelier.css +5 -0
  34. package/dist/tokyo-transit.css +5 -0
  35. package/dist/winamp-signal.css +5 -0
  36. package/dist/y2k-titanium.css +5 -0
  37. package/dist/yule-knit.css +5 -0
  38. package/package.json +2 -7
  39. package/dist/lunar-new-year.css +0 -811
  40. package/dist/skins/lunar-new-year.d.ts +0 -68
  41. package/dist/skins/lunar-new-year.js +0 -68
@@ -1,811 +0,0 @@
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/lunar-new-year"] {
6
- font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
7
- --dixy-font-sans:
8
- "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
9
- --dixy-font-display:
10
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
11
- --dixy-skin-cushion-elevation: var(--dixy-skin-cushion-cast);
12
- --dixy-card-shadow: var(--dixy-shadow-raised);
13
- --dixy-skin-depth-shadow: var(
14
- --dixy-skin-authored-shadow,
15
- var(--dixy-shadow-raised)
16
- );
17
- --dixy-stroke-width: 1px;
18
- --dixy-card-border-width: 1px;
19
- --dixy-button-border-width: 1px;
20
- --dixy-input-border-width: 1px;
21
- --dixy-dialog-border-width: 1px;
22
- --dixy-font-heading-lg-family:
23
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
24
- --dixy-font-heading-md-family:
25
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
26
- --dixy-font-heading-sm-family:
27
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
28
- --dixy-font-title-lg-family:
29
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
30
- --dixy-font-title-md-family:
31
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
32
- --dixy-font-title-sm-family:
33
- "Playfair Display Variable", "Playfair Display", ui-serif, Georgia, serif;
34
- --dixy-skin-edge: #c8102e;
35
- --dixy-organic-density: 50;
36
- --dixy-organic-cornerDensity: 70;
37
- --dixy-organic-canopyDepth: 45;
38
- --dixy-organic-variation: 35;
39
- --dixy-organic-scale: 22;
40
- --dixy-organic-stemWeight: 40;
41
- --dixy-organic-motion: 30;
42
- --dixy-organic-seed: 8;
43
- --dixy-organic-style: 0;
44
- --dixy-organic-canopy: 0;
45
- --dixy-organic-stem: 0;
46
- --dixy-organic-a: #c8102e;
47
- --dixy-organic-b: #e3ac1f;
48
- --dixy-organic-c: #8a1020;
49
- --dixy-organic-d: #5a0d12;
50
- --dixy-color-text-primary: color-mix(
51
- in srgb,
52
- var(--dixy-color-base-12) 65%,
53
- #7d0a1b
54
- );
55
- --dixy-skin-surface: color-mix(
56
- in srgb,
57
- var(--dixy-color-background-surface-raised) 25%,
58
- #fff4e6
59
- );
60
- --dixy-skin-ground: color-mix(
61
- in srgb,
62
- var(--dixy-color-background-canvas) 65%,
63
- #fbe9d4
64
- );
65
- --dixy-skin-card-inset: 36px 30px 32px;
66
- --dixy-skin-pad-top: 36px;
67
- --dixy-skin-pad-inline: 30px;
68
- --dixy-skin-frame-inset: 10px;
69
- --dixy-skin-frame-width: 1px;
70
- --dixy-skin-finish:
71
- linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 42%),
72
- linear-gradient(180deg, #ffffff24, transparent 30%);
73
- --dixy-skin-grain:
74
- radial-gradient(circle at 1px 1px, #8a102010 0.6px, transparent 1px),
75
- radial-gradient(circle at 3px 2px, #e3ac1f12 0.5px, transparent 1px);
76
- --dixy-skin-grain-size: 4px;
77
- --dixy-skin-paint: var(--dixy-skin-grain), var(--dixy-skin-finish);
78
- --dixy-skin-canvas: radial-gradient(
79
- circle at 50% 0,
80
- #c8102e10 7px,
81
- transparent 7.5px
82
- )
83
- 0 0/24px 16px;
84
- --dixy-skin-authored-shadow: 0 2px 0 #8a102022, 0 10px 22px #5a0d1214;
85
- --dixy-skin-shadow: var(
86
- --dixy-skin-depth-shadow,
87
- var(--dixy-skin-authored-shadow)
88
- );
89
- --dixy-skin-inset: inset 0 2px 3px #5a0d1220;
90
- --dixy-skin-control-edge:
91
- inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 -1px 0 #0002;
92
- --dixy-skin-cushion:
93
- inset 0 0px 0px #ffffff66,
94
- inset 0 -0px 0px color-mix(in srgb, var(--dixy-skin-edge) 0%, transparent),
95
- var(--dixy-skin-cushion-elevation);
96
- --dixy-skin-cushion-cast: 0 0px 0px
97
- color-mix(in srgb, var(--dixy-skin-edge) 0%, transparent);
98
- --dixy-skin-panel-relief: var(--dixy-skin-shadow);
99
- --dixy-skin-control-relief:
100
- var(--dixy-skin-control-edge), var(--dixy-skin-shadow);
101
- --dixy-skin-thumb: radial-gradient(circle, #f5c542 0 30%, #c8102e 32%);
102
- --dixy-skin-mark-opacity: 1;
103
- --dixy-font-display-lg-weight: 700;
104
- --dixy-font-display-lg-letter-spacing: 0.02em;
105
- --dixy-font-display-md-weight: 700;
106
- --dixy-font-display-md-letter-spacing: 0.02em;
107
- --dixy-font-display-sm-weight: 700;
108
- --dixy-font-display-sm-letter-spacing: 0.02em;
109
- --dixy-font-heading-lg-weight: 700;
110
- --dixy-font-heading-lg-letter-spacing: 0.02em;
111
- --dixy-font-heading-md-weight: 700;
112
- --dixy-font-heading-md-letter-spacing: 0.02em;
113
- --dixy-font-heading-sm-weight: 700;
114
- --dixy-font-heading-sm-letter-spacing: 0.02em;
115
- --dixy-font-title-lg-weight: 700;
116
- --dixy-font-title-lg-letter-spacing: 0.02em;
117
- --dixy-font-title-md-weight: 700;
118
- --dixy-font-title-md-letter-spacing: 0.02em;
119
- --dixy-font-title-sm-weight: 700;
120
- --dixy-font-title-sm-letter-spacing: 0.02em;
121
- }
122
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-appearance="dark"] {
123
- --dixy-organic-a: #f5c542;
124
- --dixy-organic-b: #ffe7a8;
125
- --dixy-organic-c: #ff5a6e;
126
- --dixy-organic-d: #ffe7a8;
127
- --dixy-skin-selected: var(--dixy-skin-finish);
128
- --dixy-color-text-primary: color-mix(
129
- in srgb,
130
- var(--dixy-color-base-12) 65%,
131
- #fff4e6
132
- );
133
- --dixy-skin-edge: #f5c542;
134
- --dixy-skin-surface: color-mix(
135
- in srgb,
136
- var(--dixy-color-background-surface-raised) 40%,
137
- #7d0a1b
138
- );
139
- --dixy-skin-ground: color-mix(
140
- in srgb,
141
- var(--dixy-color-background-canvas) 65%,
142
- #7d0a1b
143
- );
144
- }
145
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-relief="2"] {
146
- --dixy-skin-shadow:
147
- var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
148
- 0 10px 18px #0002;
149
- }
150
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-relief="0"],
151
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-effects="reduced"] {
152
- --dixy-skin-shadow: none;
153
- --dixy-skin-inset: none;
154
- --dixy-skin-control-edge: none;
155
- --dixy-skin-panel-relief: none;
156
- --dixy-skin-control-relief: none;
157
- }
158
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-effects="reduced"] {
159
- --dixy-skin-paint: none;
160
- --dixy-skin-finish: none;
161
- --dixy-skin-canvas: none;
162
- --dixy-skin-thumb: none;
163
- --dixy-skin-mark-opacity: 0;
164
- }
165
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-ornament="quiet"] {
166
- --dixy-skin-mark-opacity: 0;
167
- }
168
- }
169
- @layer dixy.components {
170
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] {
171
- position: relative;
172
- isolation: isolate;
173
- }
174
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]:not(.dixy-portal-scope) {
175
- background-color: var(--dixy-skin-ground);
176
- background-image: var(--dixy-skin-canvas);
177
- }
178
- :is(
179
- .dixy-card,
180
- .dixy-box,
181
- .dixy-dialog-popup,
182
- .dixy-alert-dialog-popup,
183
- .dixy-drawer-popup,
184
- .dixy-popover-popup,
185
- .dixy-preview-card-popup,
186
- .dixy-tooltip-popup,
187
- .dixy-select-popup,
188
- .dixy-combobox-popup,
189
- .dixy-autocomplete-popup,
190
- .dixy-menu-popup,
191
- .dixy-context-menu-popup,
192
- .dixy-navigation-menu-popup,
193
- .dixy-toast-root,
194
- .dixy-alert,
195
- .dixy-list-box,
196
- .dixy-calendar,
197
- .dixy-range-calendar
198
- )[data-dixy-skin="dixy/lunar-new-year"] {
199
- position: relative;
200
- border-radius: calc(var(--dixy-radius-card) * 1);
201
- }
202
- :is(
203
- .dixy-dialog-popup,
204
- .dixy-alert-dialog-popup,
205
- .dixy-drawer-popup,
206
- .dixy-popover-popup,
207
- .dixy-preview-card-popup,
208
- .dixy-tooltip-popup,
209
- .dixy-select-popup,
210
- .dixy-combobox-popup,
211
- .dixy-autocomplete-popup,
212
- .dixy-menu-popup,
213
- .dixy-context-menu-popup,
214
- .dixy-navigation-menu-popup
215
- )[data-dixy-skin="dixy/lunar-new-year"] {
216
- border-radius: calc(var(--dixy-radius-overlay) * 1);
217
- }
218
- :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/lunar-new-year"] {
219
- padding: var(--dixy-skin-card-inset);
220
- border: 1px solid var(--dixy-skin-edge);
221
- }
222
- :is(
223
- .dixy-card,
224
- .dixy-box,
225
- .dixy-dialog-popup,
226
- .dixy-alert-dialog-popup,
227
- .dixy-drawer-popup,
228
- .dixy-popover-popup,
229
- .dixy-preview-card-popup,
230
- .dixy-tooltip-popup,
231
- .dixy-select-popup,
232
- .dixy-combobox-popup,
233
- .dixy-autocomplete-popup,
234
- .dixy-menu-popup,
235
- .dixy-context-menu-popup,
236
- .dixy-navigation-menu-popup,
237
- .dixy-toast-root,
238
- .dixy-alert,
239
- .dixy-list-box,
240
- .dixy-calendar,
241
- .dixy-range-calendar
242
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
243
- [data-dixy-material-override]
244
- ):not(:where([data-dixy-material-override]) *) {
245
- background-image: var(--dixy-skin-paint);
246
- background-size:
247
- var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
248
- 100% 100%,
249
- 100% 100%,
250
- 100% 100%;
251
- box-shadow: var(--dixy-skin-panel-relief);
252
- }
253
- :is(
254
- .dixy-card,
255
- .dixy-box,
256
- .dixy-dialog-popup,
257
- .dixy-alert-dialog-popup,
258
- .dixy-drawer-popup,
259
- .dixy-popover-popup,
260
- .dixy-preview-card-popup,
261
- .dixy-tooltip-popup,
262
- .dixy-select-popup,
263
- .dixy-combobox-popup,
264
- .dixy-autocomplete-popup,
265
- .dixy-menu-popup,
266
- .dixy-context-menu-popup,
267
- .dixy-navigation-menu-popup,
268
- .dixy-toast-root,
269
- .dixy-alert,
270
- .dixy-list-box,
271
- .dixy-calendar,
272
- .dixy-range-calendar
273
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
274
- [data-dixy-material-override]
275
- ):not(:where([data-dixy-material-override]) *):not(
276
- [data-variant="solid"]
277
- ):not([data-variant="soft"]) {
278
- background-color: var(--dixy-skin-surface);
279
- }
280
- :is(
281
- .dixy-input,
282
- .dixy-textarea,
283
- .dixy-native-select,
284
- .dixy-select-trigger,
285
- .dixy-input-group,
286
- .dixy-combobox-input-group,
287
- .dixy-autocomplete-input-group,
288
- .dixy-number-field-group,
289
- .dixy-otp-field-input
290
- )[data-dixy-skin="dixy/lunar-new-year"] {
291
- border-radius: calc(var(--dixy-radius-control) * 1);
292
- }
293
- :is(
294
- .dixy-input,
295
- .dixy-textarea,
296
- .dixy-native-select,
297
- .dixy-select-trigger,
298
- .dixy-input-group,
299
- .dixy-combobox-input-group,
300
- .dixy-autocomplete-input-group,
301
- .dixy-number-field-group,
302
- .dixy-otp-field-input
303
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
304
- [data-dixy-material-override]
305
- ):not(:where([data-dixy-material-override]) *) {
306
- border-width: var(--dixy-input-border-width);
307
- border-color: var(--dixy-skin-edge);
308
- background-image: var(--dixy-skin-paint);
309
- background-color: var(--dixy-color-background-canvas);
310
- background-size:
311
- var(--dixy-skin-grain-size) var(--dixy-skin-grain-size),
312
- 100% 100%,
313
- 100% 100%,
314
- 100% 100%;
315
- box-shadow: var(--dixy-skin-inset);
316
- }
317
- :is(.dixy-button)[data-dixy-skin="dixy/lunar-new-year"]:not(
318
- [data-dixy-material-override]
319
- ):not(:where([data-dixy-material-override]) *):is(
320
- [data-variant="solid"],
321
- [data-variant="soft"],
322
- [data-variant="outline"]
323
- ):not([data-disabled]) {
324
- border-width: var(--dixy-button-border-width);
325
- border-color: var(--dixy-skin-edge);
326
- border-radius: calc(var(--dixy-shape-control) * 1);
327
- background-image: var(--dixy-skin-finish);
328
- box-shadow: var(--dixy-skin-control-relief);
329
- }
330
-
331
- :is(.dixy-button)[data-dixy-skin="dixy/lunar-new-year"]:not(
332
- [data-dixy-material-override]
333
- ):not(:where([data-dixy-material-override]) *):is(
334
- [data-variant="solid"],
335
- [data-variant="soft"],
336
- [data-variant="outline"]
337
- ):not([data-disabled]):active {
338
- box-shadow: var(--dixy-skin-inset);
339
- }
340
- :is(.dixy-tabs-list)[data-dixy-skin="dixy/lunar-new-year"]:not(
341
- [data-dixy-material-override]
342
- ):not(:where([data-dixy-material-override]) *) {
343
- background-color: var(--dixy-color-background-canvas);
344
- border: 1px solid var(--dixy-skin-edge);
345
- box-shadow: var(--dixy-skin-inset);
346
- }
347
- :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/lunar-new-year"]:not(
348
- [data-dixy-material-override]
349
- ):not(:where([data-dixy-material-override]) *) {
350
- background-image: var(--dixy-skin-finish);
351
- box-shadow: var(--dixy-skin-control-relief);
352
- border: 1px solid var(--dixy-skin-edge);
353
- }
354
- /* Toggle groups read like tabs: a sunken track, the selected toggle a raised thumb (slider-knob paint in light, the raised finish in dark so its label stays readable). */
355
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
356
- .dixy-toggle-group:is([data-attached], [data-segmented]):not(
357
- [data-dixy-material-override]
358
- ):not(:where([data-dixy-material-override]) *) {
359
- background-color: var(--dixy-color-background-canvas);
360
- border: 1px solid var(--dixy-skin-edge);
361
- box-shadow: var(--dixy-skin-inset);
362
- }
363
- :is(.dixy-toggle)[data-dixy-skin="dixy/lunar-new-year"]:not(
364
- [data-dixy-material-override]
365
- ):not(:where([data-dixy-material-override]) *):not(
366
- [data-variant="solid"]
367
- )[data-pressed]:not([data-disabled]) {
368
- background-color: var(--dixy-color-background-surface-raised);
369
- background-image: var(--dixy-skin-selected, var(--dixy-skin-thumb));
370
- box-shadow: var(--dixy-skin-control-relief);
371
- border-color: var(--dixy-skin-edge);
372
- color: var(--dixy-color-text-primary);
373
- }
374
- :is(
375
- .dixy-slider-track,
376
- .dixy-progress-track,
377
- .dixy-meter-track
378
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
379
- [data-dixy-material-override]
380
- ):not(:where([data-dixy-material-override]) *) {
381
- border: 1px solid var(--dixy-skin-edge);
382
- background-color: var(--dixy-color-background-surface);
383
- box-shadow: var(--dixy-skin-inset);
384
- }
385
- :is(
386
- .dixy-slider-indicator,
387
- .dixy-progress-indicator,
388
- .dixy-meter-indicator
389
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
390
- [data-dixy-material-override]
391
- ):not(:where([data-dixy-material-override]) *) {
392
- background-image: var(--dixy-skin-finish);
393
- }
394
- :is(
395
- .dixy-switch-root,
396
- .dixy-checkbox-root,
397
- .dixy-radio-root
398
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
399
- [data-dixy-material-override]
400
- ):not(:where([data-dixy-material-override]) *)::before {
401
- box-shadow: var(--dixy-skin-inset);
402
- }
403
- :is(
404
- .dixy-checkbox-root,
405
- .dixy-radio-root
406
- )[data-dixy-skin="dixy/lunar-new-year"]:not(
407
- [data-dixy-material-override]
408
- ):not(:where([data-dixy-material-override]) *)[data-checked]::before {
409
- background-image: var(--dixy-skin-finish);
410
- }
411
- :is(.dixy-switch-thumb)[data-dixy-skin="dixy/lunar-new-year"]:not(
412
- [data-dixy-material-override]
413
- ):not(:where([data-dixy-material-override]) *) {
414
- background-image: var(--dixy-skin-thumb);
415
- box-shadow: var(--dixy-skin-control-relief);
416
- border: 1px solid var(--dixy-skin-edge);
417
- }
418
- :is(.dixy-slider-thumb)[data-dixy-skin="dixy/lunar-new-year"]:not(
419
- [data-dixy-material-override]
420
- ):not(:where([data-dixy-material-override]) *)::before {
421
- background-image: var(--dixy-skin-thumb);
422
- box-shadow: var(--dixy-skin-control-relief);
423
- border: 1px solid var(--dixy-skin-edge);
424
- }
425
-
426
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] .dixy-lunar-ornament {
427
- position: absolute;
428
- inset: 0;
429
- display: block;
430
- pointer-events: none;
431
- user-select: none;
432
- border-radius: inherit;
433
- z-index: 1;
434
- color: var(--dixy-skin-edge);
435
- }
436
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
437
- .dixy-lunar-ornament:is(
438
- .dixy-skin-ornament-card,
439
- .dixy-skin-ornament-dialog
440
- ) {
441
- clip-path: polygon(
442
- evenodd,
443
- 0 0,
444
- 100% 0,
445
- 100% 100%,
446
- 0 100%,
447
- 0 0,
448
- var(--dixy-skin-frame-safe-inline, 22px)
449
- var(--dixy-skin-frame-safe-top, 28px),
450
- var(--dixy-skin-frame-safe-inline, 22px)
451
- calc(100% - var(--dixy-skin-frame-safe-bottom, 24px)),
452
- calc(100% - var(--dixy-skin-frame-safe-inline, 22px))
453
- calc(100% - var(--dixy-skin-frame-safe-bottom, 24px)),
454
- calc(100% - var(--dixy-skin-frame-safe-inline, 22px))
455
- var(--dixy-skin-frame-safe-top, 28px),
456
- var(--dixy-skin-frame-safe-inline, 22px)
457
- var(--dixy-skin-frame-safe-top, 28px)
458
- );
459
- }
460
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
461
- .dixy-lunar-ornament.dixy-skin-ornament-theme {
462
- z-index: -1;
463
- overflow: hidden;
464
- }
465
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
466
- .dixy-lunar-ornament
467
- .dixy-skin-definitions {
468
- position: absolute;
469
- overflow: hidden;
470
- }
471
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
472
- .dixy-lunar-ornament
473
- .dixy-skin-control-art {
474
- width: 100%;
475
- height: 100%;
476
- }
477
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
478
- .dixy-lunar-ornament.dixy-skin-ornament-switch-thumb {
479
- display: grid;
480
- place-items: center;
481
- inset: 2px;
482
- }
483
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
484
- .dixy-switch-thumb:not([data-checked])
485
- > .dixy-lunar-ornament {
486
- display: none;
487
- }
488
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
489
- .dixy-lunar-ornament
490
- .dixy-skin-fastener {
491
- position: absolute;
492
- width: 11px;
493
- height: 11px;
494
- }
495
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
496
- .dixy-lunar-ornament
497
- .dixy-skin-fastener-tl {
498
- top: 5px;
499
- left: 5px;
500
- }
501
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
502
- .dixy-lunar-ornament
503
- .dixy-skin-fastener-tr {
504
- top: 5px;
505
- right: 5px;
506
- }
507
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
508
- .dixy-lunar-ornament
509
- .dixy-skin-fastener-bl {
510
- bottom: 5px;
511
- left: 5px;
512
- }
513
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
514
- .dixy-lunar-ornament
515
- .dixy-skin-fastener-br {
516
- bottom: 5px;
517
- right: 5px;
518
- }
519
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
520
- .dixy-lunar-ornament[data-animated]
521
- .dixy-skin-motion {
522
- animation: dixy-lunar-detail 4s ease-in-out infinite alternate;
523
- }
524
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
525
- .dixy-lunar-ornament[data-motion="reduced"]
526
- .dixy-skin-motion {
527
- animation: none;
528
- }
529
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
530
- .dixy-lunar-ornament
531
- .dixy-frame-corner {
532
- position: absolute;
533
- width: min(64px, 50%);
534
- height: min(64px, 50%);
535
- overflow: visible;
536
- }
537
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
538
- .dixy-lunar-ornament
539
- .dixy-frame-corner-tl {
540
- left: 0;
541
- top: 0;
542
- }
543
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
544
- .dixy-lunar-ornament
545
- .dixy-frame-corner-tr {
546
- right: 0;
547
- top: 0;
548
- transform: scaleX(-1);
549
- }
550
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
551
- .dixy-lunar-ornament
552
- .dixy-frame-corner-bl {
553
- left: 0;
554
- bottom: 0;
555
- transform: scaleY(-1);
556
- }
557
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
558
- .dixy-lunar-ornament
559
- .dixy-frame-corner-br {
560
- right: 0;
561
- bottom: 0;
562
- transform: scale(-1);
563
- }
564
- @media (prefers-reduced-motion: reduce) {
565
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
566
- .dixy-lunar-ornament[data-animated]
567
- .dixy-skin-motion {
568
- animation: none;
569
- }
570
- }
571
- @media (prefers-reduced-transparency: reduce),
572
- (prefers-contrast: more),
573
- (forced-colors: active) {
574
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] .dixy-lunar-ornament {
575
- display: none;
576
- }
577
- }
578
- @keyframes dixy-lunar-detail {
579
- from {
580
- opacity: 0.5;
581
- }
582
- to {
583
- opacity: 1;
584
- }
585
- }
586
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
587
- :is(.dixy-forest-paper, .dixy-atelier-paper, .dixy-atelier-linen) {
588
- display: none;
589
- }
590
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
591
- .dixy-lunar-ornament.dixy-organic-ornament {
592
- clip-path: none;
593
- overflow: visible;
594
- border-radius: inherit;
595
- }
596
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
597
- .dixy-lunar-ornament
598
- .dixy-organic-canvas {
599
- display: block;
600
- position: absolute;
601
- left: -32px;
602
- top: -32px;
603
- width: calc(100% + 64px);
604
- height: calc(100% + 64px);
605
- pointer-events: none;
606
- }
607
-
608
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] {
609
- --dixy-motion-easing-standard: cubic-bezier(0.5, 0, 0.1, 1);
610
- --dixy-motion-easing-enter: cubic-bezier(0.5, 0, 0.1, 1);
611
- }
612
- @media (prefers-reduced-motion: no-preference) {
613
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]:not(
614
- [data-motion="reduced"]
615
- ) {
616
- --dixy-motion-duration-fast: 156ms;
617
- --dixy-motion-duration-normal: 260ms;
618
- --dixy-motion-duration-deliberate: 364ms;
619
- --dixy-motion-duration-slow: 520ms;
620
- }
621
- }
622
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
623
- :is(h1, h2, h3, .dixy-heading) {
624
- letter-spacing: 0.02em;
625
- }
626
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
627
- :is(h1, h2, h3, .dixy-heading) {
628
- font-weight: 700;
629
- }
630
-
631
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
632
- :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/lunar-new-year"] {
633
- border: 2px solid var(--dixy-skin-edge);
634
- }
635
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
636
- :is(
637
- .dixy-input,
638
- .dixy-textarea,
639
- .dixy-native-select,
640
- .dixy-select-trigger,
641
- .dixy-input-group,
642
- .dixy-number-field-group
643
- )[data-dixy-skin="dixy/lunar-new-year"]:is(
644
- [data-invalid],
645
- [aria-invalid="true"]
646
- ) {
647
- background-image: repeating-linear-gradient(
648
- -45deg,
649
- color-mix(in srgb, var(--dixy-color-border-danger) 14%, transparent) 0 4px,
650
- transparent 4px 9px
651
- );
652
- border-color: var(--dixy-color-border-danger);
653
- }
654
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
655
- :is(.dixy-button)[data-dixy-skin="dixy/lunar-new-year"][aria-busy="true"] {
656
- background-image: repeating-linear-gradient(
657
- -45deg,
658
- #0002 0 4px,
659
- transparent 4px 9px
660
- );
661
- }
662
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
663
- [data-dixy-skin]:focus-visible,
664
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
665
- [data-dixy-skin]
666
- :focus-visible {
667
- outline-width: 2px;
668
- outline-offset: 5px;
669
- }
670
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
671
- :is(.dixy-separator)[data-dixy-skin="dixy/lunar-new-year"]:not(
672
- [aria-orientation="vertical"]
673
- ) {
674
- background: linear-gradient(
675
- 180deg,
676
- var(--dixy-skin-edge) 0 1px,
677
- transparent 1px calc(100% - 1px),
678
- var(--dixy-skin-edge) calc(100% - 1px)
679
- );
680
- block-size: 4px;
681
- }
682
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
683
- :is(
684
- .dixy-separator
685
- )[data-dixy-skin="dixy/lunar-new-year"][aria-orientation="vertical"] {
686
- background: linear-gradient(
687
- 90deg,
688
- var(--dixy-skin-edge) 0 1px,
689
- transparent 1px calc(100% - 1px),
690
- var(--dixy-skin-edge) calc(100% - 1px)
691
- );
692
- inline-size: 4px;
693
- }
694
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] {
695
- scrollbar-color: var(--dixy-color-background-action-primary)
696
- color-mix(
697
- in srgb,
698
- var(--dixy-color-background-action-primary) 12%,
699
- transparent
700
- );
701
- }
702
-
703
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]:not(
704
- .dixy-portal-scope
705
- )::before {
706
- content: "";
707
- position: absolute;
708
- inset: 0;
709
- z-index: -1;
710
- pointer-events: none;
711
- border-radius: inherit;
712
- opacity: 0.25;
713
- --dixy-skin-pattern-ink: color-mix(
714
- in srgb,
715
- var(--dixy-skin-edge) 40%,
716
- transparent
717
- );
718
- background-image: radial-gradient(
719
- var(--dixy-skin-pattern-ink) 1.2px,
720
- transparent 1.7px
721
- );
722
- background-size: 32px 32px;
723
- }
724
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-effects="reduced"]::before {
725
- display: none;
726
- }
727
- @media (prefers-reduced-transparency: reduce),
728
- (prefers-contrast: more),
729
- (forced-colors: active) {
730
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]::before {
731
- display: none;
732
- }
733
- }
734
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
735
- :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/lunar-new-year"] {
736
- border: 1px solid var(--dixy-skin-edge);
737
- box-shadow:
738
- 0 0 0 3px var(--dixy-skin-surface),
739
- 0 0 0 4px var(--dixy-skin-edge),
740
- var(--dixy-skin-panel-relief);
741
- }
742
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
743
- :is(.dixy-card)[data-dixy-skin="dixy/lunar-new-year"]
744
- > .dixy-card-header
745
- + .dixy-card-content {
746
- position: relative;
747
- padding: 12px 14px;
748
- }
749
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"]
750
- :is(.dixy-card)[data-dixy-skin="dixy/lunar-new-year"]
751
- > .dixy-card-header
752
- + .dixy-card-content {
753
- color: var(--dixy-color-text-primary);
754
- background-color: var(--dixy-color-background-canvas);
755
- background-image: repeating-linear-gradient(
756
- 180deg,
757
- transparent 0 23px,
758
- color-mix(in srgb, var(--dixy-skin-edge) 22%, transparent) 23px 24px
759
- );
760
- background-position: 0 10px;
761
- border-inline-start: 2px solid
762
- color-mix(in srgb, var(--dixy-color-border-danger) 45%, transparent);
763
- border-radius: 2px;
764
- }
765
-
766
- @supports (backdrop-filter: blur(8px)) {
767
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"][data-effects="backdrop"]
768
- > .dixy-skin-backdrop {
769
- backdrop-filter: blur(8px);
770
- }
771
- }
772
- @media (prefers-reduced-transparency: reduce),
773
- (prefers-contrast: more),
774
- (forced-colors: active) {
775
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] {
776
- --dixy-skin-paint: none;
777
- --dixy-skin-finish: none;
778
- --dixy-skin-canvas: none;
779
- --dixy-skin-thumb: none;
780
- --dixy-skin-shadow: none;
781
- --dixy-skin-inset: none;
782
- --dixy-skin-panel-relief: none;
783
- --dixy-skin-control-relief: none;
784
- }
785
- .dixy-theme[data-dixy-skin="dixy/lunar-new-year"] > .dixy-skin-backdrop,
786
- :is(
787
- .dixy-card,
788
- .dixy-box,
789
- .dixy-dialog-popup,
790
- .dixy-alert-dialog-popup,
791
- .dixy-drawer-popup,
792
- .dixy-popover-popup,
793
- .dixy-preview-card-popup,
794
- .dixy-tooltip-popup,
795
- .dixy-select-popup,
796
- .dixy-combobox-popup,
797
- .dixy-autocomplete-popup,
798
- .dixy-menu-popup,
799
- .dixy-context-menu-popup,
800
- .dixy-navigation-menu-popup,
801
- .dixy-toast-root,
802
- .dixy-alert,
803
- .dixy-list-box,
804
- .dixy-calendar,
805
- .dixy-range-calendar
806
- )[data-dixy-skin="dixy/lunar-new-year"] {
807
- backdrop-filter: none !important;
808
- -webkit-backdrop-filter: none !important;
809
- }
810
- }
811
- }