@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
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export declare const sunsetDrive: {
|
|
2
|
+
readonly id: "dixy/sunset-drive";
|
|
3
|
+
readonly name: "Sunset Drive";
|
|
4
|
+
readonly version: 1;
|
|
5
|
+
readonly defaults: {
|
|
6
|
+
readonly accentColor: "pink";
|
|
7
|
+
readonly neutralColor: "mauve";
|
|
8
|
+
readonly radius: "lg";
|
|
9
|
+
readonly density: "default";
|
|
10
|
+
readonly material: "glossy";
|
|
11
|
+
readonly shape: "pill";
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export declare const sunsetDriveTheme: {
|
|
15
|
+
readonly skin: {
|
|
16
|
+
readonly id: "dixy/sunset-drive";
|
|
17
|
+
readonly name: "Sunset Drive";
|
|
18
|
+
readonly version: 1;
|
|
19
|
+
readonly defaults: {
|
|
20
|
+
readonly accentColor: "pink";
|
|
21
|
+
readonly neutralColor: "mauve";
|
|
22
|
+
readonly radius: "lg";
|
|
23
|
+
readonly density: "default";
|
|
24
|
+
readonly material: "glossy";
|
|
25
|
+
readonly shape: "pill";
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
readonly appearance: "dark";
|
|
29
|
+
readonly accentColor: "pink";
|
|
30
|
+
readonly neutralColor: "mauve";
|
|
31
|
+
readonly radius: "lg";
|
|
32
|
+
readonly density: "default";
|
|
33
|
+
readonly shape: "pill";
|
|
34
|
+
readonly ornament: "balanced";
|
|
35
|
+
readonly relief: 1;
|
|
36
|
+
readonly effects: "static";
|
|
37
|
+
readonly style: {
|
|
38
|
+
readonly fontFamily: "\"Figtree Variable\", \"Figtree\", ui-sans-serif, system-ui, sans-serif";
|
|
39
|
+
readonly "--dixy-font-sans": "\"Figtree Variable\", \"Figtree\", ui-sans-serif, system-ui, sans-serif";
|
|
40
|
+
readonly "--dixy-font-display": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
41
|
+
readonly "--dixy-skin-cushion-elevation": "var(--dixy-skin-cushion-cast)";
|
|
42
|
+
readonly "--dixy-card-shadow": "var(--dixy-shadow-floating)";
|
|
43
|
+
readonly "--dixy-skin-depth-shadow": "var(--dixy-skin-authored-shadow, 0 0 0 transparent), var(--dixy-shadow-floating)";
|
|
44
|
+
readonly "--dixy-stroke-width": "1px";
|
|
45
|
+
readonly "--dixy-card-border-width": "1px";
|
|
46
|
+
readonly "--dixy-button-border-width": "1px";
|
|
47
|
+
readonly "--dixy-input-border-width": "1px";
|
|
48
|
+
readonly "--dixy-dialog-border-width": "1px";
|
|
49
|
+
readonly "--dixy-font-heading-lg-family": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
50
|
+
readonly "--dixy-font-heading-md-family": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
51
|
+
readonly "--dixy-font-heading-sm-family": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
52
|
+
readonly "--dixy-font-title-lg-family": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
53
|
+
readonly "--dixy-font-title-md-family": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
54
|
+
readonly "--dixy-font-title-sm-family": "\"Tilt Neon\", \"Fredoka Variable\", ui-rounded, sans-serif";
|
|
55
|
+
readonly "--dixy-organic-density": "55";
|
|
56
|
+
readonly "--dixy-organic-cornerDensity": "50";
|
|
57
|
+
readonly "--dixy-organic-canopyDepth": "40";
|
|
58
|
+
readonly "--dixy-organic-variation": "30";
|
|
59
|
+
readonly "--dixy-organic-scale": "22";
|
|
60
|
+
readonly "--dixy-organic-stemWeight": "30";
|
|
61
|
+
readonly "--dixy-organic-motion": "45";
|
|
62
|
+
readonly "--dixy-organic-seed": "86";
|
|
63
|
+
readonly "--dixy-organic-style": "0";
|
|
64
|
+
readonly "--dixy-organic-canopy": "0";
|
|
65
|
+
readonly "--dixy-organic-stem": "0";
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
export default sunsetDrive;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export const sunsetDrive = {
|
|
2
|
+
id: "dixy/sunset-drive",
|
|
3
|
+
name: "Sunset Drive",
|
|
4
|
+
version: 1,
|
|
5
|
+
defaults: {
|
|
6
|
+
accentColor: "pink",
|
|
7
|
+
neutralColor: "mauve",
|
|
8
|
+
radius: "lg",
|
|
9
|
+
density: "default",
|
|
10
|
+
material: "glossy",
|
|
11
|
+
shape: "pill",
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
export const sunsetDriveTheme = {
|
|
15
|
+
skin: {
|
|
16
|
+
id: "dixy/sunset-drive",
|
|
17
|
+
name: "Sunset Drive",
|
|
18
|
+
version: 1,
|
|
19
|
+
defaults: {
|
|
20
|
+
accentColor: "pink",
|
|
21
|
+
neutralColor: "mauve",
|
|
22
|
+
radius: "lg",
|
|
23
|
+
density: "default",
|
|
24
|
+
material: "glossy",
|
|
25
|
+
shape: "pill",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
appearance: "dark",
|
|
29
|
+
accentColor: "pink",
|
|
30
|
+
neutralColor: "mauve",
|
|
31
|
+
radius: "lg",
|
|
32
|
+
density: "default",
|
|
33
|
+
shape: "pill",
|
|
34
|
+
ornament: "balanced",
|
|
35
|
+
relief: 1,
|
|
36
|
+
effects: "static",
|
|
37
|
+
style: {
|
|
38
|
+
fontFamily: '"Figtree Variable", "Figtree", ui-sans-serif, system-ui, sans-serif',
|
|
39
|
+
"--dixy-font-sans": '"Figtree Variable", "Figtree", ui-sans-serif, system-ui, sans-serif',
|
|
40
|
+
"--dixy-font-display": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
41
|
+
"--dixy-skin-cushion-elevation": "var(--dixy-skin-cushion-cast)",
|
|
42
|
+
"--dixy-card-shadow": "var(--dixy-shadow-floating)",
|
|
43
|
+
"--dixy-skin-depth-shadow": "var(--dixy-skin-authored-shadow, 0 0 0 transparent), var(--dixy-shadow-floating)",
|
|
44
|
+
"--dixy-stroke-width": "1px",
|
|
45
|
+
"--dixy-card-border-width": "1px",
|
|
46
|
+
"--dixy-button-border-width": "1px",
|
|
47
|
+
"--dixy-input-border-width": "1px",
|
|
48
|
+
"--dixy-dialog-border-width": "1px",
|
|
49
|
+
"--dixy-font-heading-lg-family": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
50
|
+
"--dixy-font-heading-md-family": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
51
|
+
"--dixy-font-heading-sm-family": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
52
|
+
"--dixy-font-title-lg-family": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
53
|
+
"--dixy-font-title-md-family": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
54
|
+
"--dixy-font-title-sm-family": '"Tilt Neon", "Fredoka Variable", ui-rounded, sans-serif',
|
|
55
|
+
"--dixy-organic-density": "55",
|
|
56
|
+
"--dixy-organic-cornerDensity": "50",
|
|
57
|
+
"--dixy-organic-canopyDepth": "40",
|
|
58
|
+
"--dixy-organic-variation": "30",
|
|
59
|
+
"--dixy-organic-scale": "22",
|
|
60
|
+
"--dixy-organic-stemWeight": "30",
|
|
61
|
+
"--dixy-organic-motion": "45",
|
|
62
|
+
"--dixy-organic-seed": "86",
|
|
63
|
+
"--dixy-organic-style": "0",
|
|
64
|
+
"--dixy-organic-canopy": "0",
|
|
65
|
+
"--dixy-organic-stem": "0",
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
export default sunsetDrive;
|
package/dist/solar-sail.css
CHANGED
|
@@ -41,6 +41,11 @@
|
|
|
41
41
|
"Space Grotesk Variable", "Inter Variable", ui-sans-serif, system-ui,
|
|
42
42
|
sans-serif;
|
|
43
43
|
--dixy-skin-edge: #e8e2cf;
|
|
44
|
+
--dixy-skin-field-edge: color-mix(
|
|
45
|
+
in oklab,
|
|
46
|
+
var(--dixy-color-base-9) 50%,
|
|
47
|
+
var(--dixy-color-base-8)
|
|
48
|
+
);
|
|
44
49
|
--dixy-organic-density: 45;
|
|
45
50
|
--dixy-organic-cornerDensity: 70;
|
|
46
51
|
--dixy-organic-canopyDepth: 50;
|
|
@@ -137,7 +142,6 @@
|
|
|
137
142
|
--dixy-organic-b: #f3d98c;
|
|
138
143
|
--dixy-organic-c: #a3a3b8;
|
|
139
144
|
--dixy-organic-d: #f0ecdf;
|
|
140
|
-
--dixy-skin-selected: var(--dixy-skin-finish);
|
|
141
145
|
--dixy-color-text-primary: color-mix(
|
|
142
146
|
in srgb,
|
|
143
147
|
var(--dixy-color-base-12) 90%,
|
|
@@ -155,6 +159,7 @@
|
|
|
155
159
|
#0d1020
|
|
156
160
|
);
|
|
157
161
|
}
|
|
162
|
+
|
|
158
163
|
.dixy-theme[data-dixy-skin="dixy/solar-sail"][data-relief="2"] {
|
|
159
164
|
--dixy-skin-shadow:
|
|
160
165
|
var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
|
|
@@ -288,6 +293,28 @@
|
|
|
288
293
|
):not([data-variant="solid"]):not([data-variant="soft"]) {
|
|
289
294
|
background-color: var(--dixy-skin-surface);
|
|
290
295
|
}
|
|
296
|
+
:is(
|
|
297
|
+
.dixy-dialog-popup,
|
|
298
|
+
.dixy-alert-dialog-popup,
|
|
299
|
+
.dixy-drawer-popup,
|
|
300
|
+
.dixy-popover-popup,
|
|
301
|
+
.dixy-preview-card-popup,
|
|
302
|
+
.dixy-tooltip-popup,
|
|
303
|
+
.dixy-select-popup,
|
|
304
|
+
.dixy-combobox-popup,
|
|
305
|
+
.dixy-autocomplete-popup,
|
|
306
|
+
.dixy-menu-popup,
|
|
307
|
+
.dixy-context-menu-popup,
|
|
308
|
+
.dixy-navigation-menu-popup
|
|
309
|
+
)[data-dixy-skin="dixy/solar-sail"]:not([data-dixy-material-override]):not(
|
|
310
|
+
:where([data-dixy-material-override]) *
|
|
311
|
+
):not([data-variant="solid"]):not([data-variant="soft"]) {
|
|
312
|
+
background-color: color-mix(
|
|
313
|
+
in srgb,
|
|
314
|
+
var(--dixy-color-background-surface-raised) 94%,
|
|
315
|
+
var(--dixy-skin-surface)
|
|
316
|
+
);
|
|
317
|
+
}
|
|
291
318
|
:is(
|
|
292
319
|
.dixy-input,
|
|
293
320
|
.dixy-textarea,
|
|
@@ -320,7 +347,7 @@
|
|
|
320
347
|
:where([data-dixy-material-override]) *
|
|
321
348
|
) {
|
|
322
349
|
border-width: var(--dixy-input-border-width);
|
|
323
|
-
border-color: var(--dixy-skin-edge);
|
|
350
|
+
border-color: var(--dixy-skin-field-edge);
|
|
324
351
|
background-image: var(--dixy-skin-paint);
|
|
325
352
|
background-color: var(--dixy-color-background-canvas);
|
|
326
353
|
background-size:
|
|
@@ -330,6 +357,43 @@
|
|
|
330
357
|
100% 100%;
|
|
331
358
|
box-shadow: var(--dixy-skin-inset);
|
|
332
359
|
}
|
|
360
|
+
/* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
|
|
361
|
+
skin's paint to that so its image and grain size always land together;
|
|
362
|
+
otherwise the material image is tiled at the grain size (stripes). */
|
|
363
|
+
:is(
|
|
364
|
+
.dixy-card,
|
|
365
|
+
.dixy-box,
|
|
366
|
+
.dixy-dialog-popup,
|
|
367
|
+
.dixy-alert-dialog-popup,
|
|
368
|
+
.dixy-drawer-popup,
|
|
369
|
+
.dixy-popover-popup,
|
|
370
|
+
.dixy-preview-card-popup,
|
|
371
|
+
.dixy-tooltip-popup,
|
|
372
|
+
.dixy-select-popup,
|
|
373
|
+
.dixy-combobox-popup,
|
|
374
|
+
.dixy-autocomplete-popup,
|
|
375
|
+
.dixy-menu-popup,
|
|
376
|
+
.dixy-context-menu-popup,
|
|
377
|
+
.dixy-navigation-menu-popup,
|
|
378
|
+
.dixy-toast-root,
|
|
379
|
+
.dixy-alert,
|
|
380
|
+
.dixy-list-box,
|
|
381
|
+
.dixy-calendar,
|
|
382
|
+
.dixy-range-calendar,
|
|
383
|
+
.dixy-input,
|
|
384
|
+
.dixy-textarea,
|
|
385
|
+
.dixy-native-select,
|
|
386
|
+
.dixy-select-trigger,
|
|
387
|
+
.dixy-input-group,
|
|
388
|
+
.dixy-combobox-input-group,
|
|
389
|
+
.dixy-autocomplete-input-group,
|
|
390
|
+
.dixy-number-field-group,
|
|
391
|
+
.dixy-otp-field-input
|
|
392
|
+
)[data-dixy-skin="dixy/solar-sail"]:not([data-dixy-material-override]):not(
|
|
393
|
+
:where([data-dixy-material-override]) *
|
|
394
|
+
)[data-dixy-visual][data-material]:not([data-disabled]) {
|
|
395
|
+
background-image: var(--dixy-skin-paint);
|
|
396
|
+
}
|
|
333
397
|
:is(.dixy-button)[data-dixy-skin="dixy/solar-sail"]:not(
|
|
334
398
|
[data-dixy-material-override]
|
|
335
399
|
):not(:where([data-dixy-material-override]) *):is(
|
|
@@ -360,14 +424,19 @@
|
|
|
360
424
|
border: 1px solid var(--dixy-skin-edge);
|
|
361
425
|
box-shadow: var(--dixy-skin-inset);
|
|
362
426
|
}
|
|
427
|
+
/* 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). */
|
|
363
428
|
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/solar-sail"]:not(
|
|
364
429
|
[data-dixy-material-override]
|
|
365
430
|
):not(:where([data-dixy-material-override]) *) {
|
|
366
|
-
background-image: var(--dixy-skin-finish);
|
|
367
431
|
box-shadow: var(--dixy-skin-control-relief);
|
|
368
432
|
border: 1px solid var(--dixy-skin-edge);
|
|
369
433
|
}
|
|
370
|
-
|
|
434
|
+
:is(.dixy-tabs-indicator)[data-dixy-skin="dixy/solar-sail"]:not(
|
|
435
|
+
[data-dixy-material-override]
|
|
436
|
+
):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
|
|
437
|
+
background-image: none;
|
|
438
|
+
}
|
|
439
|
+
/* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
|
|
371
440
|
.dixy-theme[data-dixy-skin="dixy/solar-sail"]
|
|
372
441
|
.dixy-toggle-group:is([data-attached], [data-segmented]):not(
|
|
373
442
|
[data-dixy-material-override]
|
|
@@ -382,7 +451,7 @@
|
|
|
382
451
|
[data-variant="solid"]
|
|
383
452
|
)[data-pressed]:not([data-disabled]) {
|
|
384
453
|
background-color: var(--dixy-color-background-surface-raised);
|
|
385
|
-
background-image:
|
|
454
|
+
background-image: none;
|
|
386
455
|
box-shadow: var(--dixy-skin-control-relief);
|
|
387
456
|
border-color: var(--dixy-skin-edge);
|
|
388
457
|
color: var(--dixy-color-text-primary);
|
|
@@ -343,6 +343,30 @@ export declare const launchDocuments: {
|
|
|
343
343
|
inset: 10;
|
|
344
344
|
cornerScale: 1;
|
|
345
345
|
cornerVariation: 0;
|
|
346
|
+
} | {
|
|
347
|
+
width: 1;
|
|
348
|
+
paddingTop: 34;
|
|
349
|
+
paddingInline: 30;
|
|
350
|
+
paddingBottom: 32;
|
|
351
|
+
inset: 10;
|
|
352
|
+
cornerScale: 1;
|
|
353
|
+
cornerVariation: 0;
|
|
354
|
+
} | {
|
|
355
|
+
width: 2;
|
|
356
|
+
paddingTop: 30;
|
|
357
|
+
paddingInline: 28;
|
|
358
|
+
paddingBottom: 28;
|
|
359
|
+
inset: 6;
|
|
360
|
+
cornerScale: 1;
|
|
361
|
+
cornerVariation: 0;
|
|
362
|
+
} | {
|
|
363
|
+
width: 3;
|
|
364
|
+
paddingTop: 32;
|
|
365
|
+
paddingInline: 28;
|
|
366
|
+
paddingBottom: 30;
|
|
367
|
+
inset: 8;
|
|
368
|
+
cornerScale: 1;
|
|
369
|
+
cornerVariation: 0;
|
|
346
370
|
};
|
|
347
371
|
};
|
|
348
372
|
};
|
package/dist/starters-launch.js
CHANGED
|
@@ -713,6 +713,349 @@ export const launchStarters = [
|
|
|
713
713
|
},
|
|
714
714
|
chrome: { edge: "pill", well: "glass", corners: "inherit" },
|
|
715
715
|
},
|
|
716
|
+
{
|
|
717
|
+
slug: "sunset-drive",
|
|
718
|
+
symbol: "sunsetDrive",
|
|
719
|
+
name: "Sunset Drive",
|
|
720
|
+
description: "Cruise the coast.",
|
|
721
|
+
detail: "80s coastal neon: a striped sun, a horizon grid and pink light.",
|
|
722
|
+
swatches: ["#ff4fa3", "#ffb347", "#1b0b30"],
|
|
723
|
+
voice: {
|
|
724
|
+
eyebrow: "COAST HIGHWAY · 1986",
|
|
725
|
+
headline: "Cruise the coast.",
|
|
726
|
+
body: "Pink skies, palm shadows and a long drive home.",
|
|
727
|
+
primary: "Drive",
|
|
728
|
+
secondary: "Park it",
|
|
729
|
+
},
|
|
730
|
+
foundations: {
|
|
731
|
+
accentColor: "pink",
|
|
732
|
+
neutralColor: "mauve",
|
|
733
|
+
radius: "lg",
|
|
734
|
+
shape: "pill",
|
|
735
|
+
appearance: "dark",
|
|
736
|
+
bodyFont: "figtree",
|
|
737
|
+
headingFont: "neon",
|
|
738
|
+
border: 1,
|
|
739
|
+
depth: "floating",
|
|
740
|
+
material: "glossy",
|
|
741
|
+
},
|
|
742
|
+
material: { id: "sunset-neon", parameters: mat(55, 20, 0, 0, 0.3) },
|
|
743
|
+
frame: "sunset",
|
|
744
|
+
character: {
|
|
745
|
+
controls: "halo",
|
|
746
|
+
motion: { style: "springy", press: 1, tempo: 1 },
|
|
747
|
+
type: {
|
|
748
|
+
headingCase: "none",
|
|
749
|
+
headingTracking: 0.01,
|
|
750
|
+
headingWeight: 400,
|
|
751
|
+
numerals: "proportional",
|
|
752
|
+
},
|
|
753
|
+
states: "glow",
|
|
754
|
+
details: {
|
|
755
|
+
focus: "glow",
|
|
756
|
+
divider: "line",
|
|
757
|
+
selection: "accent",
|
|
758
|
+
scrollbar: "accent",
|
|
759
|
+
iconStroke: 1.75,
|
|
760
|
+
},
|
|
761
|
+
backdrop: { pattern: "grid", intensity: 0.2, scale: 1.2 },
|
|
762
|
+
},
|
|
763
|
+
chrome: { edge: "line", well: "tinted", corners: "inherit" },
|
|
764
|
+
},
|
|
765
|
+
{
|
|
766
|
+
slug: "save-point",
|
|
767
|
+
symbol: "savePoint",
|
|
768
|
+
name: "Save Point",
|
|
769
|
+
description: "Rest here?",
|
|
770
|
+
detail: "1994 menu windows: blue panels, white double borders, a blinking cursor.",
|
|
771
|
+
swatches: ["#2b44b8", "#ffe066", "#05081c"],
|
|
772
|
+
voice: {
|
|
773
|
+
eyebrow: "CHAPTER 3 · SAVE POINT",
|
|
774
|
+
headline: "Rest here?",
|
|
775
|
+
body: "Your progress is safe. The party is ready when you are.",
|
|
776
|
+
primary: "Save",
|
|
777
|
+
secondary: "Continue",
|
|
778
|
+
},
|
|
779
|
+
foundations: {
|
|
780
|
+
accentColor: "yellow",
|
|
781
|
+
neutralColor: "slate",
|
|
782
|
+
radius: "sm",
|
|
783
|
+
shape: "rounded",
|
|
784
|
+
appearance: "dark",
|
|
785
|
+
bodyFont: "terminal",
|
|
786
|
+
headingFont: "pixel",
|
|
787
|
+
border: 2,
|
|
788
|
+
depth: "raised",
|
|
789
|
+
material: "matte",
|
|
790
|
+
},
|
|
791
|
+
material: { id: "menu-window", parameters: mat(40, 0, 0, 0, 0.1) },
|
|
792
|
+
frame: "menu",
|
|
793
|
+
character: {
|
|
794
|
+
controls: "pixel",
|
|
795
|
+
motion: { style: "stepped", press: 1, tempo: 0.8 },
|
|
796
|
+
type: {
|
|
797
|
+
headingCase: "uppercase",
|
|
798
|
+
headingTracking: 0.04,
|
|
799
|
+
headingWeight: 400,
|
|
800
|
+
numerals: "tabular",
|
|
801
|
+
},
|
|
802
|
+
states: "inlay",
|
|
803
|
+
details: {
|
|
804
|
+
focus: "double",
|
|
805
|
+
divider: "double",
|
|
806
|
+
selection: "inverse",
|
|
807
|
+
scrollbar: "thin",
|
|
808
|
+
iconStroke: 2,
|
|
809
|
+
},
|
|
810
|
+
backdrop: { pattern: "none", intensity: 0, scale: 1 },
|
|
811
|
+
},
|
|
812
|
+
chrome: { edge: "double", well: "tinted", corners: "inherit" },
|
|
813
|
+
},
|
|
814
|
+
{
|
|
815
|
+
slug: "arcade-cabinet",
|
|
816
|
+
symbol: "arcadeCabinet",
|
|
817
|
+
name: "Arcade Cabinet",
|
|
818
|
+
description: "Insert coin.",
|
|
819
|
+
detail: "Scanlines, chunky pixels, hard red shadows and marquee bulbs.",
|
|
820
|
+
swatches: ["#ff3b3b", "#ffd400", "#050505"],
|
|
821
|
+
voice: {
|
|
822
|
+
eyebrow: "1UP · HI 042000",
|
|
823
|
+
headline: "Insert coin.",
|
|
824
|
+
body: "Three lives. One high score. No continues.",
|
|
825
|
+
primary: "Start",
|
|
826
|
+
secondary: "Quit",
|
|
827
|
+
},
|
|
828
|
+
foundations: {
|
|
829
|
+
accentColor: "red",
|
|
830
|
+
neutralColor: "neutral",
|
|
831
|
+
radius: "none",
|
|
832
|
+
shape: "square",
|
|
833
|
+
appearance: "dark",
|
|
834
|
+
bodyFont: "terminal",
|
|
835
|
+
headingFont: "pixel",
|
|
836
|
+
border: 2,
|
|
837
|
+
depth: "raised",
|
|
838
|
+
material: "matte",
|
|
839
|
+
},
|
|
840
|
+
material: { id: "arcade-bezel", parameters: mat(60, 15, 0, 0, 0) },
|
|
841
|
+
frame: "marquee",
|
|
842
|
+
character: {
|
|
843
|
+
controls: "pixel",
|
|
844
|
+
motion: { style: "snappy", press: 1.5, tempo: 0.7 },
|
|
845
|
+
type: {
|
|
846
|
+
headingCase: "uppercase",
|
|
847
|
+
headingTracking: 0.06,
|
|
848
|
+
headingWeight: 400,
|
|
849
|
+
numerals: "tabular",
|
|
850
|
+
},
|
|
851
|
+
states: "led",
|
|
852
|
+
details: {
|
|
853
|
+
focus: "offset",
|
|
854
|
+
divider: "dashed",
|
|
855
|
+
selection: "inverse",
|
|
856
|
+
scrollbar: "accent",
|
|
857
|
+
iconStroke: 2.25,
|
|
858
|
+
},
|
|
859
|
+
backdrop: { pattern: "scanlines", intensity: 0.35, scale: 1 },
|
|
860
|
+
},
|
|
861
|
+
chrome: { edge: "line", well: "lcd", corners: "pixel" },
|
|
862
|
+
},
|
|
863
|
+
{
|
|
864
|
+
slug: "ledger",
|
|
865
|
+
symbol: "ledger",
|
|
866
|
+
name: "Ledger",
|
|
867
|
+
description: "Cash position",
|
|
868
|
+
detail: "A quiet working theme: hairline rules, tabular figures, one green accent and faint ledger columns.",
|
|
869
|
+
swatches: ["#0b6e4f", "#fbfbf9", "#16181d"],
|
|
870
|
+
voice: {
|
|
871
|
+
eyebrow: "Q3 · TREASURY",
|
|
872
|
+
headline: "Cash position",
|
|
873
|
+
body: "Balances reconcile nightly. Figures in USD thousands.",
|
|
874
|
+
primary: "Export CSV",
|
|
875
|
+
secondary: "Filters",
|
|
876
|
+
},
|
|
877
|
+
foundations: {
|
|
878
|
+
accentColor: "jade",
|
|
879
|
+
neutralColor: "gray",
|
|
880
|
+
radius: "sm",
|
|
881
|
+
shape: "rounded",
|
|
882
|
+
appearance: "light",
|
|
883
|
+
bodyFont: "inter",
|
|
884
|
+
headingFont: "plex",
|
|
885
|
+
border: 1,
|
|
886
|
+
depth: "raised",
|
|
887
|
+
material: "matte",
|
|
888
|
+
},
|
|
889
|
+
material: { id: "ledger-ruled", parameters: mat(8, 8, 0, 0, 0) },
|
|
890
|
+
frame: "none",
|
|
891
|
+
character: {
|
|
892
|
+
controls: "standard",
|
|
893
|
+
motion: { style: "weighted", press: 0.6, tempo: 0.8 },
|
|
894
|
+
type: {
|
|
895
|
+
headingCase: "none",
|
|
896
|
+
headingTracking: 0,
|
|
897
|
+
headingWeight: 500,
|
|
898
|
+
numerals: "tabular",
|
|
899
|
+
},
|
|
900
|
+
states: "standard",
|
|
901
|
+
details: {
|
|
902
|
+
focus: "ring",
|
|
903
|
+
divider: "line",
|
|
904
|
+
selection: "accent",
|
|
905
|
+
scrollbar: "thin",
|
|
906
|
+
iconStroke: 1.5,
|
|
907
|
+
},
|
|
908
|
+
backdrop: { pattern: "none", intensity: 0, scale: 1 },
|
|
909
|
+
},
|
|
910
|
+
chrome: { edge: "double", well: "paper", corners: "inherit" },
|
|
911
|
+
},
|
|
912
|
+
{
|
|
913
|
+
slug: "mainframe",
|
|
914
|
+
symbol: "mainframe",
|
|
915
|
+
name: "Mainframe",
|
|
916
|
+
description: "Shipments",
|
|
917
|
+
detail: "A square enterprise grid: flat grey layers instead of shadows, one blue, dense 40px rows.",
|
|
918
|
+
swatches: ["#0f5fd9", "#f4f4f4", "#161616"],
|
|
919
|
+
voice: {
|
|
920
|
+
eyebrow: "OPERATIONS / SHIPMENTS",
|
|
921
|
+
headline: "Shipments",
|
|
922
|
+
body: "1,284 active across 38 carriers. Updated two minutes ago.",
|
|
923
|
+
primary: "New shipment",
|
|
924
|
+
secondary: "Export",
|
|
925
|
+
},
|
|
926
|
+
foundations: {
|
|
927
|
+
accentColor: "blue",
|
|
928
|
+
neutralColor: "neutral",
|
|
929
|
+
radius: "none",
|
|
930
|
+
shape: "square",
|
|
931
|
+
appearance: "light",
|
|
932
|
+
bodyFont: "plexSans",
|
|
933
|
+
headingFont: "plexSans",
|
|
934
|
+
border: 1,
|
|
935
|
+
depth: "none",
|
|
936
|
+
material: "matte",
|
|
937
|
+
},
|
|
938
|
+
material: { id: "layer-grid", parameters: mat(0, 0, 0, 0, 0) },
|
|
939
|
+
frame: "none",
|
|
940
|
+
character: {
|
|
941
|
+
controls: "instrument",
|
|
942
|
+
motion: { style: "snappy", press: 0.4, tempo: 0.7 },
|
|
943
|
+
type: {
|
|
944
|
+
headingCase: "none",
|
|
945
|
+
headingTracking: 0,
|
|
946
|
+
headingWeight: 300,
|
|
947
|
+
numerals: "tabular",
|
|
948
|
+
},
|
|
949
|
+
states: "standard",
|
|
950
|
+
details: {
|
|
951
|
+
focus: "ring",
|
|
952
|
+
divider: "line",
|
|
953
|
+
selection: "accent",
|
|
954
|
+
scrollbar: "thin",
|
|
955
|
+
iconStroke: 1.5,
|
|
956
|
+
},
|
|
957
|
+
backdrop: { pattern: "none", intensity: 0, scale: 1 },
|
|
958
|
+
},
|
|
959
|
+
chrome: { edge: "line", well: "lcd", corners: "inherit" },
|
|
960
|
+
},
|
|
961
|
+
{
|
|
962
|
+
slug: "dispatch",
|
|
963
|
+
symbol: "dispatch",
|
|
964
|
+
name: "Dispatch",
|
|
965
|
+
description: "Ready when you are",
|
|
966
|
+
detail: "Black and white, bold type and pill controls. Colour is kept for status.",
|
|
967
|
+
swatches: ["#000000", "#ffffff", "#eeeeee"],
|
|
968
|
+
voice: {
|
|
969
|
+
eyebrow: "LIVE · 842 IN TRANSIT",
|
|
970
|
+
headline: "Ready when you are",
|
|
971
|
+
body: "Every route, driver and delivery in one place. Colour only means something.",
|
|
972
|
+
primary: "New shipment",
|
|
973
|
+
secondary: "Export",
|
|
974
|
+
},
|
|
975
|
+
foundations: {
|
|
976
|
+
accentColor: "neutral",
|
|
977
|
+
neutralColor: "neutral",
|
|
978
|
+
radius: "lg",
|
|
979
|
+
shape: "pill",
|
|
980
|
+
appearance: "light",
|
|
981
|
+
bodyFont: "inter",
|
|
982
|
+
headingFont: "inter",
|
|
983
|
+
border: 1,
|
|
984
|
+
depth: "raised",
|
|
985
|
+
material: "matte",
|
|
986
|
+
},
|
|
987
|
+
material: { id: "mono-ink", parameters: mat(0, 0, 0, 0, 0) },
|
|
988
|
+
frame: "none",
|
|
989
|
+
character: {
|
|
990
|
+
controls: "standard",
|
|
991
|
+
motion: { style: "springy", press: 1, tempo: 1.1 },
|
|
992
|
+
type: {
|
|
993
|
+
headingCase: "none",
|
|
994
|
+
headingTracking: -0.02,
|
|
995
|
+
headingWeight: 800,
|
|
996
|
+
numerals: "tabular",
|
|
997
|
+
},
|
|
998
|
+
states: "standard",
|
|
999
|
+
details: {
|
|
1000
|
+
focus: "offset",
|
|
1001
|
+
divider: "line",
|
|
1002
|
+
selection: "inverse",
|
|
1003
|
+
scrollbar: "native",
|
|
1004
|
+
iconStroke: 2,
|
|
1005
|
+
},
|
|
1006
|
+
backdrop: { pattern: "none", intensity: 0, scale: 1 },
|
|
1007
|
+
},
|
|
1008
|
+
chrome: { edge: "line", well: "lcd", corners: "round" },
|
|
1009
|
+
},
|
|
1010
|
+
{
|
|
1011
|
+
slug: "signal",
|
|
1012
|
+
symbol: "signal",
|
|
1013
|
+
name: "Signal",
|
|
1014
|
+
description: "Make it easier to read",
|
|
1015
|
+
detail: "High contrast, accessibility first: 2px edges, 44px targets, a thick focus ring with a yellow halo, no textures or ornament.",
|
|
1016
|
+
swatches: ["#000000", "#ffffff", "#ffbf00"],
|
|
1017
|
+
voice: {
|
|
1018
|
+
eyebrow: "SETTINGS · DISPLAY",
|
|
1019
|
+
headline: "Make it easier to read",
|
|
1020
|
+
body: "Clear type, strong edges and focus you can always see.",
|
|
1021
|
+
primary: "Save changes",
|
|
1022
|
+
secondary: "Cancel",
|
|
1023
|
+
},
|
|
1024
|
+
foundations: {
|
|
1025
|
+
accentColor: "blue",
|
|
1026
|
+
neutralColor: "neutral",
|
|
1027
|
+
radius: "sm",
|
|
1028
|
+
shape: "rounded",
|
|
1029
|
+
appearance: "light",
|
|
1030
|
+
bodyFont: "atkinson",
|
|
1031
|
+
headingFont: "atkinson",
|
|
1032
|
+
border: 2,
|
|
1033
|
+
depth: "none",
|
|
1034
|
+
material: "matte",
|
|
1035
|
+
},
|
|
1036
|
+
material: { id: "signal-contrast", parameters: mat(0, 0, 0, 0, 0) },
|
|
1037
|
+
frame: "none",
|
|
1038
|
+
character: {
|
|
1039
|
+
controls: "standard",
|
|
1040
|
+
motion: { style: "standard", press: 0, tempo: 0.6 },
|
|
1041
|
+
type: {
|
|
1042
|
+
headingCase: "none",
|
|
1043
|
+
headingTracking: 0,
|
|
1044
|
+
headingWeight: 700,
|
|
1045
|
+
numerals: "tabular",
|
|
1046
|
+
},
|
|
1047
|
+
states: "standard",
|
|
1048
|
+
details: {
|
|
1049
|
+
focus: "halo",
|
|
1050
|
+
divider: "line",
|
|
1051
|
+
selection: "inverse",
|
|
1052
|
+
scrollbar: "native",
|
|
1053
|
+
iconStroke: 2,
|
|
1054
|
+
},
|
|
1055
|
+
backdrop: { pattern: "none", intensity: 0, scale: 1 },
|
|
1056
|
+
},
|
|
1057
|
+
chrome: { edge: "double", well: "sunken", corners: "inherit" },
|
|
1058
|
+
},
|
|
716
1059
|
];
|
|
717
1060
|
const id = (s) => "dixy/" + s.slug;
|
|
718
1061
|
/** v2 source documents, migrated by documents.ts like every other starter. */
|