@dixy-ui/themes 0.1.0-beta.3 → 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 +74 -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 +74 -5
- package/dist/atomic-lounge.css +78 -5
- package/dist/authoring.d.ts +8 -8
- package/dist/azulejo-tile.css +78 -5
- package/dist/blueprint.css +74 -5
- package/dist/brutalist-concrete.css +78 -5
- package/dist/bytes.json +97 -62
- package/dist/candy-clay.css +80 -5
- package/dist/catalog.d.ts +294 -0
- package/dist/catalog.js +301 -0
- package/dist/character.d.ts +1 -1
- package/dist/character.js +6 -0
- package/dist/chrome.js +13 -3
- package/dist/compile-css.js +22 -5
- package/dist/dispatch.css +731 -0
- package/dist/diwali-lights.css +78 -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 +140 -15
- package/dist/glass-ui.css +74 -5
- package/dist/holi-colours.css +78 -5
- package/dist/ledger.css +566 -0
- package/dist/living-forest.css +80 -5
- package/dist/mainframe.css +764 -0
- package/dist/manifests.d.ts +144 -144
- package/dist/material-light.css +78 -5
- package/dist/neon-night-market.css +78 -5
- package/dist/ocean-depths.css +80 -5
- package/dist/orbital-hud.css +140 -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 +78 -5
- package/dist/phosphor-terminal.css +78 -5
- package/dist/prism-glass.css +74 -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 +74 -5
- package/dist/riso-zine.css +74 -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 +74 -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 +74 -5
- package/dist/starters-launch.d.ts +24 -0
- package/dist/starters-launch.js +343 -0
- package/dist/studio-hardware.css +78 -5
- package/dist/sumi-ink.css +74 -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 +144 -15
- package/dist/tactile-atelier.css +80 -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 +78 -5
- package/dist/winamp-signal.css +78 -5
- package/dist/y2k-titanium.css +146 -15
- package/dist/yule-knit.css +74 -5
- package/package.json +50 -3
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,
|
|
@@ -301,7 +330,7 @@
|
|
|
301
330
|
[data-dixy-material-override]
|
|
302
331
|
):not(:where([data-dixy-material-override]) *) {
|
|
303
332
|
border-width: var(--dixy-input-border-width);
|
|
304
|
-
border-color: var(--dixy-skin-edge);
|
|
333
|
+
border-color: var(--dixy-skin-field-edge);
|
|
305
334
|
background-image: var(--dixy-skin-paint);
|
|
306
335
|
background-color: var(--dixy-color-background-canvas);
|
|
307
336
|
background-size:
|
|
@@ -311,6 +340,45 @@
|
|
|
311
340
|
100% 100%;
|
|
312
341
|
box-shadow: var(--dixy-skin-inset);
|
|
313
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
|
+
}
|
|
314
382
|
:is(.dixy-button)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
315
383
|
[data-dixy-material-override]
|
|
316
384
|
):not(:where([data-dixy-material-override]) *):is(
|
|
@@ -341,14 +409,19 @@
|
|
|
341
409
|
border: 1px solid var(--dixy-skin-edge);
|
|
342
410
|
box-shadow: var(--dixy-skin-inset);
|
|
343
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). */
|
|
344
413
|
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/swiss-poster"]:not(
|
|
345
414
|
[data-dixy-material-override]
|
|
346
415
|
):not(:where([data-dixy-material-override]) *) {
|
|
347
|
-
background-image: var(--dixy-skin-finish);
|
|
348
416
|
box-shadow: var(--dixy-skin-control-relief);
|
|
349
417
|
border: 1px solid var(--dixy-skin-edge);
|
|
350
418
|
}
|
|
351
|
-
|
|
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. */
|
|
352
425
|
.dixy-theme[data-dixy-skin="dixy/swiss-poster"]
|
|
353
426
|
.dixy-toggle-group:is([data-attached], [data-segmented]):not(
|
|
354
427
|
[data-dixy-material-override]
|
|
@@ -363,7 +436,7 @@
|
|
|
363
436
|
[data-variant="solid"]
|
|
364
437
|
)[data-pressed]:not([data-disabled]) {
|
|
365
438
|
background-color: var(--dixy-color-background-surface-raised);
|
|
366
|
-
background-image:
|
|
439
|
+
background-image: none;
|
|
367
440
|
box-shadow: var(--dixy-skin-control-relief);
|
|
368
441
|
border-color: var(--dixy-skin-edge);
|
|
369
442
|
color: var(--dixy-color-text-primary);
|
|
@@ -672,16 +745,72 @@
|
|
|
672
745
|
:is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/swiss-poster"] {
|
|
673
746
|
border-radius: 0;
|
|
674
747
|
--dixy-chrome-bar-radius: 0px;
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
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
|
+
}
|
|
685
814
|
}
|
|
686
815
|
|
|
687
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,
|
|
@@ -321,7 +352,7 @@
|
|
|
321
352
|
[data-dixy-material-override]
|
|
322
353
|
):not(:where([data-dixy-material-override]) *) {
|
|
323
354
|
border-width: var(--dixy-input-border-width);
|
|
324
|
-
border-color: var(--dixy-skin-edge);
|
|
355
|
+
border-color: var(--dixy-skin-field-edge);
|
|
325
356
|
background-image: var(--dixy-skin-paint);
|
|
326
357
|
background-color: var(--dixy-color-background-canvas);
|
|
327
358
|
background-size:
|
|
@@ -331,6 +362,45 @@
|
|
|
331
362
|
100% 100%;
|
|
332
363
|
box-shadow: var(--dixy-skin-inset);
|
|
333
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
|
+
}
|
|
334
404
|
:is(.dixy-button)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
335
405
|
[data-dixy-material-override]
|
|
336
406
|
):not(:where([data-dixy-material-override]) *):is(
|
|
@@ -361,14 +431,19 @@
|
|
|
361
431
|
border: 1px solid var(--dixy-skin-edge);
|
|
362
432
|
box-shadow: var(--dixy-skin-inset);
|
|
363
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). */
|
|
364
435
|
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/tactile-atelier"]:not(
|
|
365
436
|
[data-dixy-material-override]
|
|
366
437
|
):not(:where([data-dixy-material-override]) *) {
|
|
367
|
-
background-image: var(--dixy-skin-finish);
|
|
368
438
|
box-shadow: var(--dixy-skin-control-relief);
|
|
369
439
|
border: 1px solid var(--dixy-skin-edge);
|
|
370
440
|
}
|
|
371
|
-
|
|
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. */
|
|
372
447
|
.dixy-theme[data-dixy-skin="dixy/tactile-atelier"]
|
|
373
448
|
.dixy-toggle-group:is([data-attached], [data-segmented]):not(
|
|
374
449
|
[data-dixy-material-override]
|
|
@@ -383,7 +458,7 @@
|
|
|
383
458
|
[data-variant="solid"]
|
|
384
459
|
)[data-pressed]:not([data-disabled]) {
|
|
385
460
|
background-color: var(--dixy-color-background-surface-raised);
|
|
386
|
-
background-image:
|
|
461
|
+
background-image: none;
|
|
387
462
|
box-shadow: var(--dixy-skin-control-relief);
|
|
388
463
|
border-color: var(--dixy-skin-edge);
|
|
389
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