@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.
- package/dist/ansi-panes.css +79 -5
- package/dist/arcade/ornament.d.ts +3 -0
- package/dist/arcade/ornament.js +8 -0
- package/dist/arcade-cabinet.css +1086 -0
- package/dist/art-deco.css +79 -5
- package/dist/atomic-lounge.css +83 -5
- package/dist/authoring.d.ts +8 -8
- package/dist/azulejo-tile.css +83 -5
- package/dist/blueprint.css +79 -5
- package/dist/brutalist-concrete.css +83 -5
- package/dist/bytes.json +97 -67
- package/dist/candy-clay.css +85 -5
- package/dist/catalog.d.ts +294 -42
- package/dist/catalog.js +301 -43
- package/dist/character.d.ts +1 -1
- package/dist/character.js +6 -0
- package/dist/chrome.js +13 -3
- package/dist/compile-css.js +23 -5
- package/dist/dispatch.css +731 -0
- package/dist/diwali-lights.css +83 -5
- package/dist/documents.d.ts +115 -7
- package/dist/documents.js +10 -2
- package/dist/foundations.d.ts +8 -0
- package/dist/foundations.js +10 -0
- package/dist/frame-styles.d.ts +3 -0
- package/dist/frame-styles.js +6 -0
- package/dist/freighter.css +145 -15
- package/dist/glass-ui.css +79 -5
- package/dist/holi-colours.css +83 -5
- package/dist/ledger.css +566 -0
- package/dist/living-forest.css +85 -5
- package/dist/mainframe.css +764 -0
- package/dist/manifests.d.ts +144 -144
- package/dist/material-light.css +83 -5
- package/dist/neon-night-market.css +83 -5
- package/dist/ocean-depths.css +85 -5
- package/dist/orbital-hud.css +145 -15
- package/dist/organic-paint-launch.d.ts +9 -0
- package/dist/organic-paint-launch.js +121 -46
- package/dist/organic-paint.d.ts +1 -1
- package/dist/organic-settings.d.ts +109 -25
- package/dist/organic-settings.js +49 -0
- package/dist/papel-picado.css +83 -5
- package/dist/phosphor-terminal.css +83 -5
- package/dist/prism-glass.css +79 -5
- package/dist/recipes.d.ts +162 -0
- package/dist/recipes.js +164 -0
- package/dist/resolve.d.ts +18 -2
- package/dist/retro-os.css +79 -5
- package/dist/riso-zine.css +79 -5
- package/dist/save-point.css +948 -0
- package/dist/savepoint/ornament.d.ts +3 -0
- package/dist/savepoint/ornament.js +8 -0
- package/dist/scrapbook.css +79 -5
- package/dist/signal.css +563 -0
- package/dist/skins/arcade-cabinet.d.ts +68 -0
- package/dist/skins/arcade-cabinet.js +68 -0
- package/dist/skins/dispatch.d.ts +57 -0
- package/dist/skins/dispatch.js +57 -0
- package/dist/skins/ledger.d.ts +57 -0
- package/dist/skins/ledger.js +57 -0
- package/dist/skins/mainframe.d.ts +57 -0
- package/dist/skins/mainframe.js +57 -0
- package/dist/skins/save-point.d.ts +68 -0
- package/dist/skins/save-point.js +68 -0
- package/dist/skins/signal.d.ts +57 -0
- package/dist/skins/signal.js +57 -0
- package/dist/skins/sunset-drive.d.ts +68 -0
- package/dist/skins/sunset-drive.js +68 -0
- package/dist/solar-sail.css +79 -5
- package/dist/starters-launch.d.ts +25 -1
- package/dist/starters-launch.js +343 -49
- package/dist/studio-hardware.css +83 -5
- package/dist/sumi-ink.css +79 -5
- package/dist/sunset/ornament.d.ts +3 -0
- package/dist/sunset/ornament.js +8 -0
- package/dist/sunset-drive.css +1024 -0
- package/dist/swiss-poster.css +149 -15
- package/dist/tactile-atelier.css +85 -5
- package/dist/theme-document.schema.json +34 -6
- package/dist/theme-fix.d.ts +11 -0
- package/dist/theme-fix.js +32 -0
- package/dist/theme-fixes.d.ts +2 -0
- package/dist/theme-fixes.js +1 -0
- package/dist/theme-schema.d.ts +6 -6
- package/dist/theme-schema.js +2 -0
- package/dist/tokyo-transit.css +83 -5
- package/dist/winamp-signal.css +83 -5
- package/dist/y2k-titanium.css +151 -15
- package/dist/yule-knit.css +79 -5
- package/package.json +50 -8
- package/dist/lunar-new-year.css +0 -811
- package/dist/skins/lunar-new-year.d.ts +0 -68
- package/dist/skins/lunar-new-year.js +0 -68
package/dist/swiss-poster.css
CHANGED
|
@@ -29,6 +29,11 @@
|
|
|
29
29
|
--dixy-font-title-sm-family:
|
|
30
30
|
"Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
|
|
31
31
|
--dixy-skin-edge: #0d0d0d;
|
|
32
|
+
--dixy-skin-field-edge: color-mix(
|
|
33
|
+
in oklab,
|
|
34
|
+
var(--dixy-color-base-9) 50%,
|
|
35
|
+
var(--dixy-color-base-8)
|
|
36
|
+
);
|
|
32
37
|
--dixy-organic-density: 50;
|
|
33
38
|
--dixy-organic-cornerDensity: 80;
|
|
34
39
|
--dixy-organic-canopyDepth: 40;
|
|
@@ -121,7 +126,6 @@
|
|
|
121
126
|
--dixy-organic-b: #f4f4f4;
|
|
122
127
|
--dixy-organic-c: #6a6a6a;
|
|
123
128
|
--dixy-organic-d: #f4f4f4;
|
|
124
|
-
--dixy-skin-selected: var(--dixy-skin-finish);
|
|
125
129
|
--dixy-skin-edge: #f4f4f4;
|
|
126
130
|
--dixy-skin-surface: color-mix(
|
|
127
131
|
in srgb,
|
|
@@ -134,6 +138,7 @@
|
|
|
134
138
|
#111111
|
|
135
139
|
);
|
|
136
140
|
}
|
|
141
|
+
|
|
137
142
|
.dixy-theme[data-dixy-skin="dixy/swiss-poster"][data-relief="2"] {
|
|
138
143
|
--dixy-skin-shadow:
|
|
139
144
|
var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
|
|
@@ -269,6 +274,30 @@
|
|
|
269
274
|
):not([data-variant="soft"]) {
|
|
270
275
|
background-color: var(--dixy-skin-surface);
|
|
271
276
|
}
|
|
277
|
+
:is(
|
|
278
|
+
.dixy-dialog-popup,
|
|
279
|
+
.dixy-alert-dialog-popup,
|
|
280
|
+
.dixy-drawer-popup,
|
|
281
|
+
.dixy-popover-popup,
|
|
282
|
+
.dixy-preview-card-popup,
|
|
283
|
+
.dixy-tooltip-popup,
|
|
284
|
+
.dixy-select-popup,
|
|
285
|
+
.dixy-combobox-popup,
|
|
286
|
+
.dixy-autocomplete-popup,
|
|
287
|
+
.dixy-menu-popup,
|
|
288
|
+
.dixy-context-menu-popup,
|
|
289
|
+
.dixy-navigation-menu-popup
|
|
290
|
+
)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
291
|
+
[data-dixy-material-override]
|
|
292
|
+
):not(:where([data-dixy-material-override]) *):not(
|
|
293
|
+
[data-variant="solid"]
|
|
294
|
+
):not([data-variant="soft"]) {
|
|
295
|
+
background-color: color-mix(
|
|
296
|
+
in srgb,
|
|
297
|
+
var(--dixy-color-background-surface-raised) 94%,
|
|
298
|
+
var(--dixy-skin-surface)
|
|
299
|
+
);
|
|
300
|
+
}
|
|
272
301
|
:is(
|
|
273
302
|
.dixy-input,
|
|
274
303
|
.dixy-textarea,
|
|
@@ -282,6 +311,11 @@
|
|
|
282
311
|
)[data-dixy-skin="dixy/swiss-poster"] {
|
|
283
312
|
border-radius: calc(var(--dixy-radius-control) * 1);
|
|
284
313
|
}
|
|
314
|
+
:is(.dixy-textarea)[data-dixy-skin="dixy/swiss-poster"] {
|
|
315
|
+
border-radius: calc(
|
|
316
|
+
min(var(--dixy-radius-control), var(--dixy-radius-card)) * 1
|
|
317
|
+
);
|
|
318
|
+
}
|
|
285
319
|
:is(
|
|
286
320
|
.dixy-input,
|
|
287
321
|
.dixy-textarea,
|
|
@@ -296,7 +330,7 @@
|
|
|
296
330
|
[data-dixy-material-override]
|
|
297
331
|
):not(:where([data-dixy-material-override]) *) {
|
|
298
332
|
border-width: var(--dixy-input-border-width);
|
|
299
|
-
border-color: var(--dixy-skin-edge);
|
|
333
|
+
border-color: var(--dixy-skin-field-edge);
|
|
300
334
|
background-image: var(--dixy-skin-paint);
|
|
301
335
|
background-color: var(--dixy-color-background-canvas);
|
|
302
336
|
background-size:
|
|
@@ -306,6 +340,45 @@
|
|
|
306
340
|
100% 100%;
|
|
307
341
|
box-shadow: var(--dixy-skin-inset);
|
|
308
342
|
}
|
|
343
|
+
/* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
|
|
344
|
+
skin's paint to that so its image and grain size always land together;
|
|
345
|
+
otherwise the material image is tiled at the grain size (stripes). */
|
|
346
|
+
:is(
|
|
347
|
+
.dixy-card,
|
|
348
|
+
.dixy-box,
|
|
349
|
+
.dixy-dialog-popup,
|
|
350
|
+
.dixy-alert-dialog-popup,
|
|
351
|
+
.dixy-drawer-popup,
|
|
352
|
+
.dixy-popover-popup,
|
|
353
|
+
.dixy-preview-card-popup,
|
|
354
|
+
.dixy-tooltip-popup,
|
|
355
|
+
.dixy-select-popup,
|
|
356
|
+
.dixy-combobox-popup,
|
|
357
|
+
.dixy-autocomplete-popup,
|
|
358
|
+
.dixy-menu-popup,
|
|
359
|
+
.dixy-context-menu-popup,
|
|
360
|
+
.dixy-navigation-menu-popup,
|
|
361
|
+
.dixy-toast-root,
|
|
362
|
+
.dixy-alert,
|
|
363
|
+
.dixy-list-box,
|
|
364
|
+
.dixy-calendar,
|
|
365
|
+
.dixy-range-calendar,
|
|
366
|
+
.dixy-input,
|
|
367
|
+
.dixy-textarea,
|
|
368
|
+
.dixy-native-select,
|
|
369
|
+
.dixy-select-trigger,
|
|
370
|
+
.dixy-input-group,
|
|
371
|
+
.dixy-combobox-input-group,
|
|
372
|
+
.dixy-autocomplete-input-group,
|
|
373
|
+
.dixy-number-field-group,
|
|
374
|
+
.dixy-otp-field-input
|
|
375
|
+
)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
376
|
+
[data-dixy-material-override]
|
|
377
|
+
):not(
|
|
378
|
+
:where([data-dixy-material-override]) *
|
|
379
|
+
)[data-dixy-visual][data-material]:not([data-disabled]) {
|
|
380
|
+
background-image: var(--dixy-skin-paint);
|
|
381
|
+
}
|
|
309
382
|
:is(.dixy-button)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
310
383
|
[data-dixy-material-override]
|
|
311
384
|
):not(:where([data-dixy-material-override]) *):is(
|
|
@@ -336,14 +409,19 @@
|
|
|
336
409
|
border: 1px solid var(--dixy-skin-edge);
|
|
337
410
|
box-shadow: var(--dixy-skin-inset);
|
|
338
411
|
}
|
|
412
|
+
/* 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). */
|
|
339
413
|
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
340
414
|
[data-dixy-material-override]
|
|
341
415
|
):not(:where([data-dixy-material-override]) *) {
|
|
342
|
-
background-image: var(--dixy-skin-finish);
|
|
343
416
|
box-shadow: var(--dixy-skin-control-relief);
|
|
344
417
|
border: 1px solid var(--dixy-skin-edge);
|
|
345
418
|
}
|
|
346
|
-
|
|
419
|
+
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
420
|
+
[data-dixy-material-override]
|
|
421
|
+
):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
|
|
422
|
+
background-image: none;
|
|
423
|
+
}
|
|
424
|
+
/* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
|
|
347
425
|
.dixy-theme[data-dixy-skin="dixy/swiss-poster"]
|
|
348
426
|
.dixy-toggle-group:is([data-attached], [data-segmented]):not(
|
|
349
427
|
[data-dixy-material-override]
|
|
@@ -358,7 +436,7 @@
|
|
|
358
436
|
[data-variant="solid"]
|
|
359
437
|
)[data-pressed]:not([data-disabled]) {
|
|
360
438
|
background-color: var(--dixy-color-background-surface-raised);
|
|
361
|
-
background-image:
|
|
439
|
+
background-image: none;
|
|
362
440
|
box-shadow: var(--dixy-skin-control-relief);
|
|
363
441
|
border-color: var(--dixy-skin-edge);
|
|
364
442
|
color: var(--dixy-color-text-primary);
|
|
@@ -667,16 +745,72 @@
|
|
|
667
745
|
:is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/swiss-poster"] {
|
|
668
746
|
border-radius: 0;
|
|
669
747
|
--dixy-chrome-bar-radius: 0px;
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
748
|
+
}
|
|
749
|
+
@supports (corner-shape: bevel) {
|
|
750
|
+
.dixy-theme[data-dixy-skin="dixy/swiss-poster"]
|
|
751
|
+
:is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/swiss-poster"] {
|
|
752
|
+
border-radius: 10px;
|
|
753
|
+
corner-shape: bevel;
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
@supports not (corner-shape: bevel) {
|
|
757
|
+
.dixy-theme[data-dixy-skin="dixy/swiss-poster"]
|
|
758
|
+
:is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/swiss-poster"] {
|
|
759
|
+
clip-path: polygon(
|
|
760
|
+
10px 0,
|
|
761
|
+
calc(100% - 10px) 0,
|
|
762
|
+
100% 10px,
|
|
763
|
+
100% calc(100% - 10px),
|
|
764
|
+
calc(100% - 10px) 100%,
|
|
765
|
+
10px 100%,
|
|
766
|
+
0 calc(100% - 10px),
|
|
767
|
+
0 10px
|
|
768
|
+
);
|
|
769
|
+
}
|
|
770
|
+
.dixy-theme[data-dixy-skin="dixy/swiss-poster"]
|
|
771
|
+
:is(
|
|
772
|
+
.dixy-card,
|
|
773
|
+
.dixy-dialog-popup
|
|
774
|
+
)[data-dixy-skin="dixy/swiss-poster"]::after {
|
|
775
|
+
content: "";
|
|
776
|
+
position: absolute;
|
|
777
|
+
inset: calc(var(--dixy-skin-frame-width, 1px) * -1);
|
|
778
|
+
pointer-events: none;
|
|
779
|
+
z-index: 1;
|
|
780
|
+
background:
|
|
781
|
+
linear-gradient(
|
|
782
|
+
to bottom right,
|
|
783
|
+
transparent 50%,
|
|
784
|
+
var(--dixy-skin-edge) 50%
|
|
785
|
+
calc(50% + var(--dixy-skin-frame-width, 1px)),
|
|
786
|
+
transparent calc(50% + var(--dixy-skin-frame-width, 1px))
|
|
787
|
+
)
|
|
788
|
+
top left/10px 10px no-repeat,
|
|
789
|
+
linear-gradient(
|
|
790
|
+
to bottom left,
|
|
791
|
+
transparent 50%,
|
|
792
|
+
var(--dixy-skin-edge) 50%
|
|
793
|
+
calc(50% + var(--dixy-skin-frame-width, 1px)),
|
|
794
|
+
transparent calc(50% + var(--dixy-skin-frame-width, 1px))
|
|
795
|
+
)
|
|
796
|
+
top right/10px 10px no-repeat,
|
|
797
|
+
linear-gradient(
|
|
798
|
+
to top right,
|
|
799
|
+
transparent 50%,
|
|
800
|
+
var(--dixy-skin-edge) 50%
|
|
801
|
+
calc(50% + var(--dixy-skin-frame-width, 1px)),
|
|
802
|
+
transparent calc(50% + var(--dixy-skin-frame-width, 1px))
|
|
803
|
+
)
|
|
804
|
+
bottom left/10px 10px no-repeat,
|
|
805
|
+
linear-gradient(
|
|
806
|
+
to top left,
|
|
807
|
+
transparent 50%,
|
|
808
|
+
var(--dixy-skin-edge) 50%
|
|
809
|
+
calc(50% + var(--dixy-skin-frame-width, 1px)),
|
|
810
|
+
transparent calc(50% + var(--dixy-skin-frame-width, 1px))
|
|
811
|
+
)
|
|
812
|
+
bottom right/10px 10px no-repeat;
|
|
813
|
+
}
|
|
680
814
|
}
|
|
681
815
|
|
|
682
816
|
@supports (backdrop-filter: blur(8px)) {
|
package/dist/tactile-atelier.css
CHANGED
|
@@ -40,6 +40,11 @@
|
|
|
40
40
|
"Cormorant Garamond Variable", "Cormorant Garamond", "Garamond", ui-serif,
|
|
41
41
|
Georgia, serif;
|
|
42
42
|
--dixy-skin-edge: #d9cab3;
|
|
43
|
+
--dixy-skin-field-edge: color-mix(
|
|
44
|
+
in oklab,
|
|
45
|
+
var(--dixy-color-base-9) 50%,
|
|
46
|
+
var(--dixy-color-base-8)
|
|
47
|
+
);
|
|
43
48
|
|
|
44
49
|
--dixy-skin-surface: color-mix(
|
|
45
50
|
in srgb,
|
|
@@ -109,7 +114,6 @@
|
|
|
109
114
|
--dixy-font-title-sm-weight: 500;
|
|
110
115
|
}
|
|
111
116
|
.dixy-theme[data-dixy-skin="dixy/tactile-atelier"][data-appearance="dark"] {
|
|
112
|
-
--dixy-skin-selected: var(--dixy-skin-finish);
|
|
113
117
|
--dixy-skin-edge: #4a3a2c;
|
|
114
118
|
--dixy-skin-surface: color-mix(
|
|
115
119
|
in srgb,
|
|
@@ -122,6 +126,7 @@
|
|
|
122
126
|
#2a211a
|
|
123
127
|
);
|
|
124
128
|
}
|
|
129
|
+
|
|
125
130
|
.dixy-theme[data-dixy-skin="dixy/tactile-atelier"][data-relief="2"] {
|
|
126
131
|
--dixy-skin-shadow:
|
|
127
132
|
var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
|
|
@@ -160,6 +165,7 @@
|
|
|
160
165
|
--dixy-color-brand-12: oklch(0.255 0.056999 35);
|
|
161
166
|
--dixy-color-brand-pressed: oklch(0.465 0.1425 35);
|
|
162
167
|
--dixy-color-brand-on-solid: oklch(1 0 0);
|
|
168
|
+
--dixy-color-brand-focus: oklch(0.5375 0.13175 35);
|
|
163
169
|
}
|
|
164
170
|
.dixy-theme[data-dixy-skin="dixy/tactile-atelier"][data-appearance="dark"] {
|
|
165
171
|
--dixy-color-brand-1: oklch(0.155 0.012 35);
|
|
@@ -176,6 +182,7 @@
|
|
|
176
182
|
--dixy-color-brand-12: oklch(0.94 0.018 35);
|
|
177
183
|
--dixy-color-brand-pressed: oklch(0.685 0.113999 35);
|
|
178
184
|
--dixy-color-brand-on-solid: oklch(0.13 0.005 270);
|
|
185
|
+
--dixy-color-brand-focus: oklch(0.585 0.12 35);
|
|
179
186
|
}
|
|
180
187
|
}
|
|
181
188
|
@layer dixy.components {
|
|
@@ -289,6 +296,30 @@
|
|
|
289
296
|
):not([data-variant="soft"]) {
|
|
290
297
|
background-color: var(--dixy-skin-surface);
|
|
291
298
|
}
|
|
299
|
+
:is(
|
|
300
|
+
.dixy-dialog-popup,
|
|
301
|
+
.dixy-alert-dialog-popup,
|
|
302
|
+
.dixy-drawer-popup,
|
|
303
|
+
.dixy-popover-popup,
|
|
304
|
+
.dixy-preview-card-popup,
|
|
305
|
+
.dixy-tooltip-popup,
|
|
306
|
+
.dixy-select-popup,
|
|
307
|
+
.dixy-combobox-popup,
|
|
308
|
+
.dixy-autocomplete-popup,
|
|
309
|
+
.dixy-menu-popup,
|
|
310
|
+
.dixy-context-menu-popup,
|
|
311
|
+
.dixy-navigation-menu-popup
|
|
312
|
+
)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
313
|
+
[data-dixy-material-override]
|
|
314
|
+
):not(:where([data-dixy-material-override]) *):not(
|
|
315
|
+
[data-variant="solid"]
|
|
316
|
+
):not([data-variant="soft"]) {
|
|
317
|
+
background-color: color-mix(
|
|
318
|
+
in srgb,
|
|
319
|
+
var(--dixy-color-background-surface-raised) 94%,
|
|
320
|
+
var(--dixy-skin-surface)
|
|
321
|
+
);
|
|
322
|
+
}
|
|
292
323
|
:is(
|
|
293
324
|
.dixy-input,
|
|
294
325
|
.dixy-textarea,
|
|
@@ -302,6 +333,11 @@
|
|
|
302
333
|
)[data-dixy-skin="dixy/tactile-atelier"] {
|
|
303
334
|
border-radius: calc(var(--dixy-radius-control) * 1);
|
|
304
335
|
}
|
|
336
|
+
:is(.dixy-textarea)[data-dixy-skin="dixy/tactile-atelier"] {
|
|
337
|
+
border-radius: calc(
|
|
338
|
+
min(var(--dixy-radius-control), var(--dixy-radius-card)) * 1
|
|
339
|
+
);
|
|
340
|
+
}
|
|
305
341
|
:is(
|
|
306
342
|
.dixy-input,
|
|
307
343
|
.dixy-textarea,
|
|
@@ -316,7 +352,7 @@
|
|
|
316
352
|
[data-dixy-material-override]
|
|
317
353
|
):not(:where([data-dixy-material-override]) *) {
|
|
318
354
|
border-width: var(--dixy-input-border-width);
|
|
319
|
-
border-color: var(--dixy-skin-edge);
|
|
355
|
+
border-color: var(--dixy-skin-field-edge);
|
|
320
356
|
background-image: var(--dixy-skin-paint);
|
|
321
357
|
background-color: var(--dixy-color-background-canvas);
|
|
322
358
|
background-size:
|
|
@@ -326,6 +362,45 @@
|
|
|
326
362
|
100% 100%;
|
|
327
363
|
box-shadow: var(--dixy-skin-inset);
|
|
328
364
|
}
|
|
365
|
+
/* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
|
|
366
|
+
skin's paint to that so its image and grain size always land together;
|
|
367
|
+
otherwise the material image is tiled at the grain size (stripes). */
|
|
368
|
+
:is(
|
|
369
|
+
.dixy-card,
|
|
370
|
+
.dixy-box,
|
|
371
|
+
.dixy-dialog-popup,
|
|
372
|
+
.dixy-alert-dialog-popup,
|
|
373
|
+
.dixy-drawer-popup,
|
|
374
|
+
.dixy-popover-popup,
|
|
375
|
+
.dixy-preview-card-popup,
|
|
376
|
+
.dixy-tooltip-popup,
|
|
377
|
+
.dixy-select-popup,
|
|
378
|
+
.dixy-combobox-popup,
|
|
379
|
+
.dixy-autocomplete-popup,
|
|
380
|
+
.dixy-menu-popup,
|
|
381
|
+
.dixy-context-menu-popup,
|
|
382
|
+
.dixy-navigation-menu-popup,
|
|
383
|
+
.dixy-toast-root,
|
|
384
|
+
.dixy-alert,
|
|
385
|
+
.dixy-list-box,
|
|
386
|
+
.dixy-calendar,
|
|
387
|
+
.dixy-range-calendar,
|
|
388
|
+
.dixy-input,
|
|
389
|
+
.dixy-textarea,
|
|
390
|
+
.dixy-native-select,
|
|
391
|
+
.dixy-select-trigger,
|
|
392
|
+
.dixy-input-group,
|
|
393
|
+
.dixy-combobox-input-group,
|
|
394
|
+
.dixy-autocomplete-input-group,
|
|
395
|
+
.dixy-number-field-group,
|
|
396
|
+
.dixy-otp-field-input
|
|
397
|
+
)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
398
|
+
[data-dixy-material-override]
|
|
399
|
+
):not(
|
|
400
|
+
:where([data-dixy-material-override]) *
|
|
401
|
+
)[data-dixy-visual][data-material]:not([data-disabled]) {
|
|
402
|
+
background-image: var(--dixy-skin-paint);
|
|
403
|
+
}
|
|
329
404
|
:is(.dixy-button)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
330
405
|
[data-dixy-material-override]
|
|
331
406
|
):not(:where([data-dixy-material-override]) *):is(
|
|
@@ -356,14 +431,19 @@
|
|
|
356
431
|
border: 1px solid var(--dixy-skin-edge);
|
|
357
432
|
box-shadow: var(--dixy-skin-inset);
|
|
358
433
|
}
|
|
434
|
+
/* 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). */
|
|
359
435
|
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
360
436
|
[data-dixy-material-override]
|
|
361
437
|
):not(:where([data-dixy-material-override]) *) {
|
|
362
|
-
background-image: var(--dixy-skin-finish);
|
|
363
438
|
box-shadow: var(--dixy-skin-control-relief);
|
|
364
439
|
border: 1px solid var(--dixy-skin-edge);
|
|
365
440
|
}
|
|
366
|
-
|
|
441
|
+
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
442
|
+
[data-dixy-material-override]
|
|
443
|
+
):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
|
|
444
|
+
background-image: none;
|
|
445
|
+
}
|
|
446
|
+
/* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
|
|
367
447
|
.dixy-theme[data-dixy-skin="dixy/tactile-atelier"]
|
|
368
448
|
.dixy-toggle-group:is([data-attached], [data-segmented]):not(
|
|
369
449
|
[data-dixy-material-override]
|
|
@@ -378,7 +458,7 @@
|
|
|
378
458
|
[data-variant="solid"]
|
|
379
459
|
)[data-pressed]:not([data-disabled]) {
|
|
380
460
|
background-color: var(--dixy-color-background-surface-raised);
|
|
381
|
-
background-image:
|
|
461
|
+
background-image: none;
|
|
382
462
|
box-shadow: var(--dixy-skin-control-relief);
|
|
383
463
|
border-color: var(--dixy-skin-edge);
|
|
384
464
|
color: var(--dixy-color-text-primary);
|
|
@@ -129,7 +129,9 @@
|
|
|
129
129
|
"jetbrains",
|
|
130
130
|
"manrope",
|
|
131
131
|
"figtree",
|
|
132
|
-
"cormorant"
|
|
132
|
+
"cormorant",
|
|
133
|
+
"plexSans",
|
|
134
|
+
"atkinson"
|
|
133
135
|
]
|
|
134
136
|
},
|
|
135
137
|
"headingFont": {
|
|
@@ -157,7 +159,9 @@
|
|
|
157
159
|
"jetbrains",
|
|
158
160
|
"manrope",
|
|
159
161
|
"figtree",
|
|
160
|
-
"cormorant"
|
|
162
|
+
"cormorant",
|
|
163
|
+
"plexSans",
|
|
164
|
+
"atkinson"
|
|
161
165
|
]
|
|
162
166
|
},
|
|
163
167
|
"border": { "enum": [1, 2] },
|
|
@@ -228,7 +232,14 @@
|
|
|
228
232
|
"fiesta-paper",
|
|
229
233
|
"powder-wash",
|
|
230
234
|
"wool",
|
|
231
|
-
"liquid-glass"
|
|
235
|
+
"liquid-glass",
|
|
236
|
+
"sunset-neon",
|
|
237
|
+
"ledger-ruled",
|
|
238
|
+
"layer-grid",
|
|
239
|
+
"mono-ink",
|
|
240
|
+
"signal-contrast",
|
|
241
|
+
"menu-window",
|
|
242
|
+
"arcade-bezel"
|
|
232
243
|
]
|
|
233
244
|
},
|
|
234
245
|
"version": { "enum": [1] },
|
|
@@ -343,7 +354,10 @@
|
|
|
343
354
|
"picado",
|
|
344
355
|
"gulal",
|
|
345
356
|
"knit",
|
|
346
|
-
"liquid"
|
|
357
|
+
"liquid",
|
|
358
|
+
"sunset",
|
|
359
|
+
"menu",
|
|
360
|
+
"marquee"
|
|
347
361
|
]
|
|
348
362
|
},
|
|
349
363
|
"version": { "enum": [1] },
|
|
@@ -455,7 +469,19 @@
|
|
|
455
469
|
"Specular rim",
|
|
456
470
|
"Refraction",
|
|
457
471
|
"Light catch",
|
|
458
|
-
"Clear"
|
|
472
|
+
"Clear",
|
|
473
|
+
"Sun and grid",
|
|
474
|
+
"Sun only",
|
|
475
|
+
"Grid only",
|
|
476
|
+
"Bare coast",
|
|
477
|
+
"Cursor and stars",
|
|
478
|
+
"Cursor only",
|
|
479
|
+
"Stars only",
|
|
480
|
+
"Plain window",
|
|
481
|
+
"Bulbs and credits",
|
|
482
|
+
"Bulbs only",
|
|
483
|
+
"Credits only",
|
|
484
|
+
"Dark cabinet"
|
|
459
485
|
]
|
|
460
486
|
},
|
|
461
487
|
"canopy": {
|
|
@@ -679,7 +705,9 @@
|
|
|
679
705
|
"details": {
|
|
680
706
|
"type": "object",
|
|
681
707
|
"properties": {
|
|
682
|
-
"focus": {
|
|
708
|
+
"focus": {
|
|
709
|
+
"enum": ["ring", "double", "dashed", "glow", "offset", "halo"]
|
|
710
|
+
},
|
|
683
711
|
"divider": {
|
|
684
712
|
"enum": ["line", "dashed", "dotted", "double", "groove"]
|
|
685
713
|
},
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme fixes are deep partial patches over a starter document. Objects merge
|
|
3
|
+
* key by key; any other value (including arrays) replaces the starter's.
|
|
4
|
+
*/
|
|
5
|
+
export type ThemeFix = {
|
|
6
|
+
readonly [key: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
/** Return `base` with `fix` merged in. Neither input is changed. */
|
|
9
|
+
export declare function applyThemeFix<T>(base: T, fix: ThemeFix | undefined): T;
|
|
10
|
+
/** The smallest patch that turns `base` into `next`, or undefined if equal. */
|
|
11
|
+
export declare function diffThemeDocument(base: unknown, next: unknown): ThemeFix | undefined;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
|
|
2
|
+
/** Return `base` with `fix` merged in. Neither input is changed. */
|
|
3
|
+
export function applyThemeFix(base, fix) {
|
|
4
|
+
if (!fix)
|
|
5
|
+
return base;
|
|
6
|
+
return merge(base, fix);
|
|
7
|
+
}
|
|
8
|
+
function merge(base, patch) {
|
|
9
|
+
if (!isRecord(base) || !isRecord(patch))
|
|
10
|
+
return patch;
|
|
11
|
+
const result = { ...base };
|
|
12
|
+
for (const [key, value] of Object.entries(patch))
|
|
13
|
+
result[key] = merge(base[key], value);
|
|
14
|
+
return result;
|
|
15
|
+
}
|
|
16
|
+
/** The smallest patch that turns `base` into `next`, or undefined if equal. */
|
|
17
|
+
export function diffThemeDocument(base, next) {
|
|
18
|
+
const patch = diff(base, next);
|
|
19
|
+
return isRecord(patch) ? patch : undefined;
|
|
20
|
+
}
|
|
21
|
+
function diff(base, next) {
|
|
22
|
+
if (isRecord(base) && isRecord(next)) {
|
|
23
|
+
const result = {};
|
|
24
|
+
for (const key of Object.keys(next)) {
|
|
25
|
+
const change = diff(base[key], next[key]);
|
|
26
|
+
if (change !== undefined)
|
|
27
|
+
result[key] = change;
|
|
28
|
+
}
|
|
29
|
+
return Object.keys(result).length ? result : undefined;
|
|
30
|
+
}
|
|
31
|
+
return JSON.stringify(base) === JSON.stringify(next) ? undefined : next;
|
|
32
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const themeFixes = {};
|
package/dist/theme-schema.d.ts
CHANGED
|
@@ -80,10 +80,10 @@ export declare const themeDocumentSchema: {
|
|
|
80
80
|
readonly enum: readonly ["light", "dark"];
|
|
81
81
|
};
|
|
82
82
|
readonly bodyFont: {
|
|
83
|
-
readonly enum: readonly ["inter", "grotesk", "system", "serif", "mono", "fraunces", "deco", "pixel", "techno", "rounded", "lcd", "plex", "archivo", "neon", "mincho", "gothic", "playfair", "caveat", "bricolage", "terminal", "jetbrains", "manrope", "figtree", "cormorant"];
|
|
83
|
+
readonly enum: readonly ["inter", "grotesk", "system", "serif", "mono", "fraunces", "deco", "pixel", "techno", "rounded", "lcd", "plex", "archivo", "neon", "mincho", "gothic", "playfair", "caveat", "bricolage", "terminal", "jetbrains", "manrope", "figtree", "cormorant", "plexSans", "atkinson"];
|
|
84
84
|
};
|
|
85
85
|
readonly headingFont: {
|
|
86
|
-
readonly enum: readonly ["inter", "grotesk", "system", "serif", "mono", "fraunces", "deco", "pixel", "techno", "rounded", "lcd", "plex", "archivo", "neon", "mincho", "gothic", "playfair", "caveat", "bricolage", "terminal", "jetbrains", "manrope", "figtree", "cormorant"];
|
|
86
|
+
readonly enum: readonly ["inter", "grotesk", "system", "serif", "mono", "fraunces", "deco", "pixel", "techno", "rounded", "lcd", "plex", "archivo", "neon", "mincho", "gothic", "playfair", "caveat", "bricolage", "terminal", "jetbrains", "manrope", "figtree", "cormorant", "plexSans", "atkinson"];
|
|
87
87
|
};
|
|
88
88
|
readonly border: {
|
|
89
89
|
readonly enum: readonly [1, 2];
|
|
@@ -111,7 +111,7 @@ export declare const themeDocumentSchema: {
|
|
|
111
111
|
readonly type: "object";
|
|
112
112
|
readonly properties: {
|
|
113
113
|
readonly id: {
|
|
114
|
-
readonly enum: ("botanical-paper" | "pixel-enamel" | "gunmetal" | "ceramic" | "prismatic-glass" | "atelier-paper" | "sea-glass" | "candy-clay" | "lacquer-brass" | "titanium" | "frosted-porcelain" | "scrapbook-paper" | "cyanotype" | "riso-paper" | "wet-asphalt" | "washi" | "station-enamel" | "phosphor-glass" | "ansi-term" | "poster-stock" | "glazed-tile" | "concrete" | "atomic-laminate" | "hologram" | "painted-steel" | "gold-foil" | "marigold-silk" | "red-paper" | "fiesta-paper" | "powder-wash" | "wool" | "liquid-glass")[];
|
|
114
|
+
readonly enum: ("botanical-paper" | "pixel-enamel" | "gunmetal" | "ceramic" | "prismatic-glass" | "atelier-paper" | "sea-glass" | "candy-clay" | "lacquer-brass" | "titanium" | "frosted-porcelain" | "scrapbook-paper" | "cyanotype" | "riso-paper" | "wet-asphalt" | "washi" | "station-enamel" | "phosphor-glass" | "ansi-term" | "poster-stock" | "glazed-tile" | "concrete" | "atomic-laminate" | "hologram" | "painted-steel" | "gold-foil" | "marigold-silk" | "red-paper" | "fiesta-paper" | "powder-wash" | "wool" | "liquid-glass" | "sunset-neon" | "ledger-ruled" | "layer-grid" | "mono-ink" | "signal-contrast" | "menu-window" | "arcade-bezel")[];
|
|
115
115
|
};
|
|
116
116
|
readonly version: {
|
|
117
117
|
readonly enum: readonly [1];
|
|
@@ -185,7 +185,7 @@ export declare const themeDocumentSchema: {
|
|
|
185
185
|
readonly type: "object";
|
|
186
186
|
readonly properties: {
|
|
187
187
|
readonly id: {
|
|
188
|
-
readonly enum: ("none" | "coral" | "forest" | "cushion" | "deco" | "drafting" | "riso" | "neon" | "sumi" | "transit" | "crt" | "panes" | "swiss" | "azulejo" | "formwork" | "atomic" | "hud" | "hazard" | "orbit" | "rangoli" | "papercut" | "picado" | "gulal" | "knit" | "liquid" | "glass" | "pixel" | "halo" | "ceramic" | "rails" | "stitch" | "chamfer")[];
|
|
188
|
+
readonly enum: ("none" | "menu" | "marquee" | "coral" | "forest" | "cushion" | "deco" | "drafting" | "riso" | "neon" | "sumi" | "transit" | "crt" | "panes" | "swiss" | "azulejo" | "formwork" | "atomic" | "hud" | "hazard" | "orbit" | "rangoli" | "papercut" | "picado" | "gulal" | "knit" | "liquid" | "sunset" | "glass" | "pixel" | "halo" | "ceramic" | "rails" | "stitch" | "chamfer")[];
|
|
189
189
|
};
|
|
190
190
|
readonly version: {
|
|
191
191
|
readonly enum: readonly [1];
|
|
@@ -194,7 +194,7 @@ export declare const themeDocumentSchema: {
|
|
|
194
194
|
readonly type: "object";
|
|
195
195
|
readonly properties: {
|
|
196
196
|
readonly style: {
|
|
197
|
-
readonly enum: ("Woodland mix" | "Wild ivy" | "Fern grove" | "Willow canopy" | "Oak & moss" | "Spring growth" | "Ginkgo fans" | "Maple grove" | "Eucalyptus" | "Olive branch" | "Clover meadow" | "Wildflower hedge" | "Piped petals" | "Twisted rope" | "Candy pebbles" | "Ribbon folds" | "Tidal ribbons" | "Seafoam beads" | "Glass droplets" | "Quiet currents" | "Fine filigree" | "Art deco" | "Hammered edge" | "Quiet gilding" | "Dimensioned" | "Ruler ticks" | "Construction lines" | "Quiet draft" | "Misprint" | "Halftone" | "Taped corners" | "Clean stamp" | "Tube outline" | "Broken tubes" | "Sign shapes" | "Low hum" | "Bamboo" | "Plum blossom" | "Dry brush" | "Ensō" | "Line map" | "Station roundels" | "Platform edge" | "Quiet line" | "Box corners" | "Status line" | "Raster ticks" | "Quiet cursor" | "Pane titles" | "Key hints" | "Split panes" | "Bare panes" | "Crop marks" | "Red block" | "Grid ticks" | "Bare grid" | "Corner tiles" | "Border run" | "Floral rosette" | "Single tile" | "Tie holes" | "Stencil marks" | "Board seams" | "Bare concrete" | "Starbursts" | "Boomerangs" | "Orbit atoms" | "Lone star" | "Target brackets" | "Telemetry" | "Reticle" | "Clean brackets" | "Hazard stripes" | "Rivet seams" | "Cargo stencils" | "Clean plate" | "Orbit rings" | "Gold foil" | "Star field" | "Single orbit" | "Rangoli corners" | "Diya row" | "Marigold string" | "Single diya" | "Lanterns" | "Scallop edge" | "Cloud scrolls" | "Single lantern" | "Bunting" | "Marigold garland" | "Paper confetti" | "Short string" | "Powder clouds" | "Splashes" | "Speckle dust" | "Soft haze" | "Fair Isle band" | "Snowflakes" | "Cable stitch" | "Plain rib" | "Specular rim" | "Refraction" | "Light catch" | "Clear")[];
|
|
197
|
+
readonly enum: ("Woodland mix" | "Wild ivy" | "Fern grove" | "Willow canopy" | "Oak & moss" | "Spring growth" | "Ginkgo fans" | "Maple grove" | "Eucalyptus" | "Olive branch" | "Clover meadow" | "Wildflower hedge" | "Piped petals" | "Twisted rope" | "Candy pebbles" | "Ribbon folds" | "Tidal ribbons" | "Seafoam beads" | "Glass droplets" | "Quiet currents" | "Fine filigree" | "Art deco" | "Hammered edge" | "Quiet gilding" | "Dimensioned" | "Ruler ticks" | "Construction lines" | "Quiet draft" | "Misprint" | "Halftone" | "Taped corners" | "Clean stamp" | "Tube outline" | "Broken tubes" | "Sign shapes" | "Low hum" | "Bamboo" | "Plum blossom" | "Dry brush" | "Ensō" | "Line map" | "Station roundels" | "Platform edge" | "Quiet line" | "Box corners" | "Status line" | "Raster ticks" | "Quiet cursor" | "Pane titles" | "Key hints" | "Split panes" | "Bare panes" | "Crop marks" | "Red block" | "Grid ticks" | "Bare grid" | "Corner tiles" | "Border run" | "Floral rosette" | "Single tile" | "Tie holes" | "Stencil marks" | "Board seams" | "Bare concrete" | "Starbursts" | "Boomerangs" | "Orbit atoms" | "Lone star" | "Target brackets" | "Telemetry" | "Reticle" | "Clean brackets" | "Hazard stripes" | "Rivet seams" | "Cargo stencils" | "Clean plate" | "Orbit rings" | "Gold foil" | "Star field" | "Single orbit" | "Rangoli corners" | "Diya row" | "Marigold string" | "Single diya" | "Lanterns" | "Scallop edge" | "Cloud scrolls" | "Single lantern" | "Bunting" | "Marigold garland" | "Paper confetti" | "Short string" | "Powder clouds" | "Splashes" | "Speckle dust" | "Soft haze" | "Fair Isle band" | "Snowflakes" | "Cable stitch" | "Plain rib" | "Specular rim" | "Refraction" | "Light catch" | "Clear" | "Sun and grid" | "Sun only" | "Grid only" | "Bare coast" | "Cursor and stars" | "Cursor only" | "Stars only" | "Plain window" | "Bulbs and credits" | "Bulbs only" | "Credits only" | "Dark cabinet")[];
|
|
198
198
|
};
|
|
199
199
|
readonly canopy: {
|
|
200
200
|
readonly enum: readonly ["Scattered trails", "Corner cascades", "Overhead boughs", "Long tendrils", "Open crown"];
|
|
@@ -368,7 +368,7 @@ export declare const themeDocumentSchema: {
|
|
|
368
368
|
readonly type: "object";
|
|
369
369
|
readonly properties: {
|
|
370
370
|
readonly focus: {
|
|
371
|
-
readonly enum: readonly ["ring", "double", "dashed", "glow", "offset"];
|
|
371
|
+
readonly enum: readonly ["ring", "double", "dashed", "glow", "offset", "halo"];
|
|
372
372
|
};
|
|
373
373
|
readonly divider: {
|
|
374
374
|
readonly enum: readonly ["line", "dashed", "dotted", "double", "groove"];
|
package/dist/theme-schema.js
CHANGED