@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.
Files changed (91) hide show
  1. package/dist/ansi-panes.css +74 -5
  2. package/dist/arcade/ornament.d.ts +3 -0
  3. package/dist/arcade/ornament.js +8 -0
  4. package/dist/arcade-cabinet.css +1086 -0
  5. package/dist/art-deco.css +74 -5
  6. package/dist/atomic-lounge.css +78 -5
  7. package/dist/authoring.d.ts +8 -8
  8. package/dist/azulejo-tile.css +78 -5
  9. package/dist/blueprint.css +74 -5
  10. package/dist/brutalist-concrete.css +78 -5
  11. package/dist/bytes.json +97 -62
  12. package/dist/candy-clay.css +80 -5
  13. package/dist/catalog.d.ts +294 -0
  14. package/dist/catalog.js +301 -0
  15. package/dist/character.d.ts +1 -1
  16. package/dist/character.js +6 -0
  17. package/dist/chrome.js +13 -3
  18. package/dist/compile-css.js +22 -5
  19. package/dist/dispatch.css +731 -0
  20. package/dist/diwali-lights.css +78 -5
  21. package/dist/documents.d.ts +115 -7
  22. package/dist/documents.js +10 -2
  23. package/dist/foundations.d.ts +8 -0
  24. package/dist/foundations.js +10 -0
  25. package/dist/frame-styles.d.ts +3 -0
  26. package/dist/frame-styles.js +6 -0
  27. package/dist/freighter.css +140 -15
  28. package/dist/glass-ui.css +74 -5
  29. package/dist/holi-colours.css +78 -5
  30. package/dist/ledger.css +566 -0
  31. package/dist/living-forest.css +80 -5
  32. package/dist/mainframe.css +764 -0
  33. package/dist/manifests.d.ts +144 -144
  34. package/dist/material-light.css +78 -5
  35. package/dist/neon-night-market.css +78 -5
  36. package/dist/ocean-depths.css +80 -5
  37. package/dist/orbital-hud.css +140 -15
  38. package/dist/organic-paint-launch.d.ts +9 -0
  39. package/dist/organic-paint-launch.js +121 -46
  40. package/dist/organic-paint.d.ts +1 -1
  41. package/dist/organic-settings.d.ts +109 -25
  42. package/dist/organic-settings.js +49 -0
  43. package/dist/papel-picado.css +78 -5
  44. package/dist/phosphor-terminal.css +78 -5
  45. package/dist/prism-glass.css +74 -5
  46. package/dist/recipes.d.ts +162 -0
  47. package/dist/recipes.js +164 -0
  48. package/dist/resolve.d.ts +18 -2
  49. package/dist/retro-os.css +74 -5
  50. package/dist/riso-zine.css +74 -5
  51. package/dist/save-point.css +948 -0
  52. package/dist/savepoint/ornament.d.ts +3 -0
  53. package/dist/savepoint/ornament.js +8 -0
  54. package/dist/scrapbook.css +74 -5
  55. package/dist/signal.css +563 -0
  56. package/dist/skins/arcade-cabinet.d.ts +68 -0
  57. package/dist/skins/arcade-cabinet.js +68 -0
  58. package/dist/skins/dispatch.d.ts +57 -0
  59. package/dist/skins/dispatch.js +57 -0
  60. package/dist/skins/ledger.d.ts +57 -0
  61. package/dist/skins/ledger.js +57 -0
  62. package/dist/skins/mainframe.d.ts +57 -0
  63. package/dist/skins/mainframe.js +57 -0
  64. package/dist/skins/save-point.d.ts +68 -0
  65. package/dist/skins/save-point.js +68 -0
  66. package/dist/skins/signal.d.ts +57 -0
  67. package/dist/skins/signal.js +57 -0
  68. package/dist/skins/sunset-drive.d.ts +68 -0
  69. package/dist/skins/sunset-drive.js +68 -0
  70. package/dist/solar-sail.css +74 -5
  71. package/dist/starters-launch.d.ts +24 -0
  72. package/dist/starters-launch.js +343 -0
  73. package/dist/studio-hardware.css +78 -5
  74. package/dist/sumi-ink.css +74 -5
  75. package/dist/sunset/ornament.d.ts +3 -0
  76. package/dist/sunset/ornament.js +8 -0
  77. package/dist/sunset-drive.css +1024 -0
  78. package/dist/swiss-poster.css +144 -15
  79. package/dist/tactile-atelier.css +80 -5
  80. package/dist/theme-document.schema.json +34 -6
  81. package/dist/theme-fix.d.ts +11 -0
  82. package/dist/theme-fix.js +32 -0
  83. package/dist/theme-fixes.d.ts +2 -0
  84. package/dist/theme-fixes.js +1 -0
  85. package/dist/theme-schema.d.ts +6 -6
  86. package/dist/theme-schema.js +2 -0
  87. package/dist/tokyo-transit.css +78 -5
  88. package/dist/winamp-signal.css +78 -5
  89. package/dist/y2k-titanium.css +146 -15
  90. package/dist/yule-knit.css +74 -5
  91. 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;
@@ -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
- /* Toggle groups read like tabs: a sunken track, the selected toggle a raised thumb (slider-knob paint in light, the raised finish in dark so its label stays readable). */
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: var(--dixy-skin-selected, var(--dixy-skin-thumb));
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
  };
@@ -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. */