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

package/dist/diwali-lights.css

@@ -32,6 +32,11 @@
     --dixy-font-title-sm-family:
       "Fraunces Variable", "Fraunces", ui-serif, Georgia, serif;
     --dixy-skin-edge: #efc27a;
+    --dixy-skin-field-edge: color-mix(
+      in oklab,
+      var(--dixy-color-base-9) 50%,
+      var(--dixy-color-base-8)
+    );
     --dixy-organic-density: 50;
     --dixy-organic-cornerDensity: 75;
     --dixy-organic-canopyDepth: 45;
@@ -108,7 +113,6 @@
     --dixy-organic-b: #ffb627;
     --dixy-organic-c: #ffe08a;
     --dixy-organic-d: #26c6b0;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 75%,
@@ -126,6 +130,7 @@
       #2a0b2e
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/diwali-lights"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -261,6 +266,30 @@
     ):not([data-variant="soft"]) {
     background-color: var(--dixy-skin-surface);
   }
+  :is(
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup
+    )[data-dixy-skin="dixy/diwali-lights"]:not(
+      [data-dixy-material-override]
+    ):not(:where([data-dixy-material-override]) *):not(
+      [data-variant="solid"]
+    ):not([data-variant="soft"]) {
+    background-color: color-mix(
+      in srgb,
+      var(--dixy-color-background-surface-raised) 94%,
+      var(--dixy-skin-surface)
+    );
+  }
   :is(
     .dixy-input,
     .dixy-textarea,
@@ -293,7 +322,7 @@
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *) {
     border-width: var(--dixy-input-border-width);
-    border-color: var(--dixy-skin-edge);
+    border-color: var(--dixy-skin-field-edge);
     background-image: var(--dixy-skin-paint);
     background-color: var(--dixy-color-background-canvas);
     background-size:
@@ -303,6 +332,45 @@
       100% 100%;
     box-shadow: var(--dixy-skin-inset);
   }
+  /* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
+     skin's paint to that so its image and grain size always land together;
+     otherwise the material image is tiled at the grain size (stripes). */
+  :is(
+      .dixy-card,
+      .dixy-box,
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup,
+      .dixy-toast-root,
+      .dixy-alert,
+      .dixy-list-box,
+      .dixy-calendar,
+      .dixy-range-calendar,
+      .dixy-input,
+      .dixy-textarea,
+      .dixy-native-select,
+      .dixy-select-trigger,
+      .dixy-input-group,
+      .dixy-combobox-input-group,
+      .dixy-autocomplete-input-group,
+      .dixy-number-field-group,
+      .dixy-otp-field-input
+    )[data-dixy-skin="dixy/diwali-lights"]:not(
+      [data-dixy-material-override]
+    ):not(
+      :where([data-dixy-material-override]) *
+    )[data-dixy-visual][data-material]:not([data-disabled]) {
+    background-image: var(--dixy-skin-paint);
+  }
   :is(.dixy-button)[data-dixy-skin="dixy/diwali-lights"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -333,14 +401,19 @@
     border: 1px solid var(--dixy-skin-edge);
     box-shadow: var(--dixy-skin-inset);
   }
+  /* 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). */
   :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/diwali-lights"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *) {
-    background-image: var(--dixy-skin-finish);
     box-shadow: var(--dixy-skin-control-relief);
     border: 1px solid var(--dixy-skin-edge);
   }
-  /* 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). */
+  :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/diwali-lights"]:not(
+      [data-dixy-material-override]
+    ):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
+    background-image: none;
+  }
+  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
   .dixy-theme[data-dixy-skin="dixy/diwali-lights"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -355,7 +428,7 @@
       [data-variant="solid"]
     )[data-pressed]:not([data-disabled]) {
     background-color: var(--dixy-color-background-surface-raised);
-    background-image: var(--dixy-skin-selected, var(--dixy-skin-thumb));
+    background-image: none;
     box-shadow: var(--dixy-skin-control-relief);
     border-color: var(--dixy-skin-edge);
     color: var(--dixy-color-text-primary);

package/dist/documents.d.ts

@@ -1,4 +1,112 @@
-/** Portable recipes for all eleven installed themes. */
+/** Each starter as authored, before any saved fix from the theme audit. */
+export declare const starterDocuments: {
+    readonly schemaVersion: 6;
+    readonly id: string;
+    readonly name: string;
+    readonly revision: number;
+    readonly foundations: {
+        readonly accentColor: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "fuchsia" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "neutral" | "slate" | "zinc" | "stone" | "taupe" | "mauve" | "mist" | "sage" | "sand" | "rose" | "iris" | "sky" | "emerald" | "jade" | "grass" | "mint" | "amber" | "bronze";
+        readonly customAccent: boolean;
+        readonly lightness: number;
+        readonly chroma: number;
+        readonly hue: number;
+        readonly neutralColor: "gray" | "olive" | "neutral" | "slate" | "zinc" | "stone" | "taupe" | "mauve" | "mist" | "sage" | "sand";
+        readonly radius: "none" | "full" | "lg" | "md" | "sm";
+        readonly density: "default" | "compact" | "comfortable";
+        readonly material: "glossy" | "soft" | "matte" | "metal" | "paper";
+        readonly componentFinish: "inherit" | "glossy" | "soft" | "matte" | "metal" | "paper";
+        readonly shape: "square" | "rounded" | "pill";
+        readonly appearance: "dark" | "light";
+        readonly bodyFont: "serif" | "terminal" | "deco" | "neon" | "mono" | "system" | "rounded" | "lcd" | "pixel" | "inter" | "grotesk" | "fraunces" | "techno" | "plex" | "archivo" | "mincho" | "gothic" | "playfair" | "caveat" | "bricolage" | "jetbrains" | "manrope" | "figtree" | "cormorant" | "plexSans" | "atkinson";
+        readonly headingFont: "serif" | "terminal" | "deco" | "neon" | "mono" | "system" | "rounded" | "lcd" | "pixel" | "inter" | "grotesk" | "fraunces" | "techno" | "plex" | "archivo" | "mincho" | "gothic" | "playfair" | "caveat" | "bricolage" | "jetbrains" | "manrope" | "figtree" | "cormorant" | "plexSans" | "atkinson";
+        readonly border: 2 | 1;
+        readonly depth: "none" | "raised" | "floating";
+        readonly ornament: "balanced" | "expressive" | "quiet";
+        readonly relief: 0 | 2 | 1;
+        readonly effects: "static" | "reduced" | "backdrop";
+    };
+    readonly recipes: {
+        readonly material: {
+            readonly id: "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";
+            readonly version: 1;
+            readonly parameters: {
+                readonly surfaceMix: number;
+                readonly darkSurfaceMix: number;
+                readonly sheen: number;
+                readonly cushion: number;
+                readonly inkTint: number;
+                readonly textureScale: number;
+                readonly lightAngle: number;
+                readonly backdropBlur: number;
+                readonly backdropSaturate: number;
+            };
+        };
+        readonly frame: {
+            readonly id: "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";
+            readonly version: 1;
+            readonly ornament: {
+                readonly style: "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";
+                readonly canopy: "Scattered trails" | "Corner cascades" | "Overhead boughs" | "Long tendrils" | "Open crown";
+                readonly stem: "Twining vines" | "Woody branches" | "Tender shoots" | "Mossy roots";
+                readonly density: number;
+                readonly cornerDensity: number;
+                readonly canopyDepth: number;
+                readonly variation: number;
+                readonly scale: number;
+                readonly stemWeight: number;
+                readonly motion: number;
+                readonly seed: number;
+            };
+            readonly parameters: {
+                readonly width: number;
+                readonly paddingTop: number;
+                readonly paddingInline: number;
+                readonly paddingBottom: number;
+                readonly inset: number;
+                readonly cornerVariation: number;
+                readonly cornerScale: number;
+            };
+        };
+    };
+    readonly character: {
+        readonly controls: "standard" | "glass" | "chrome" | "pixel" | "botanical" | "instrument" | "hardware" | "stitched" | "pearl" | "clay" | "brass" | "halo";
+        readonly motion: {
+            readonly style: "standard" | "stepped" | "snappy" | "springy" | "weighted" | "drift";
+            readonly press: number;
+            readonly tempo: number;
+        };
+        readonly type: {
+            readonly headingCase: "none" | "small-caps" | "uppercase";
+            readonly headingTracking: number;
+            readonly headingWeight: 400 | 500 | 600 | 700 | 900 | 300 | 800;
+            readonly numerals: "proportional" | "tabular" | "oldstyle";
+        };
+        readonly states: "standard" | "led" | "marching" | "inlay" | "glow" | "stamp";
+        readonly details: {
+            readonly focus: "offset" | "dashed" | "double" | "halo" | "glow" | "ring";
+            readonly divider: "line" | "dashed" | "dotted" | "double" | "groove";
+            readonly selection: "accent" | "inverse" | "highlighter";
+            readonly scrollbar: "accent" | "native" | "thin";
+            readonly iconStroke: number;
+        };
+        readonly backdrop: {
+            readonly pattern: "none" | "grid" | "scanlines" | "sunburst" | "caustics" | "fibre" | "dots" | "topo" | "halftone";
+            readonly intensity: number;
+            readonly scale: number;
+        };
+        readonly chrome: {
+            readonly titlebar: "none" | "caption" | "tab" | "grip" | "gradient" | "glass" | "chrome";
+            readonly edge: "bevel" | "line" | "double" | "pill" | "stepped";
+            readonly well: "none" | "paper" | "glass" | "lcd" | "recessed" | "tinted" | "sunken";
+            readonly corners: "round" | "inherit" | "pixel" | "notched";
+        };
+    };
+}[];
+/**
+ * Installed themes: each starter with its saved fix, if any. Fixes are small
+ * patches written by the playground's "Save as theme fix" (dev server only),
+ * so a reviewer sees exactly which values changed.
+ */
 export declare const themeDocuments: {
     readonly schemaVersion: 6;
     readonly id: string;
@@ -17,8 +125,8 @@ export declare const themeDocuments: {
         readonly componentFinish: "inherit" | "glossy" | "soft" | "matte" | "metal" | "paper";
         readonly shape: "square" | "rounded" | "pill";
         readonly appearance: "dark" | "light";
-        readonly bodyFont: "serif" | "terminal" | "deco" | "neon" | "mono" | "system" | "rounded" | "lcd" | "pixel" | "inter" | "grotesk" | "fraunces" | "techno" | "plex" | "archivo" | "mincho" | "gothic" | "playfair" | "caveat" | "bricolage" | "jetbrains" | "manrope" | "figtree" | "cormorant";
-        readonly headingFont: "serif" | "terminal" | "deco" | "neon" | "mono" | "system" | "rounded" | "lcd" | "pixel" | "inter" | "grotesk" | "fraunces" | "techno" | "plex" | "archivo" | "mincho" | "gothic" | "playfair" | "caveat" | "bricolage" | "jetbrains" | "manrope" | "figtree" | "cormorant";
+        readonly bodyFont: "serif" | "terminal" | "deco" | "neon" | "mono" | "system" | "rounded" | "lcd" | "pixel" | "inter" | "grotesk" | "fraunces" | "techno" | "plex" | "archivo" | "mincho" | "gothic" | "playfair" | "caveat" | "bricolage" | "jetbrains" | "manrope" | "figtree" | "cormorant" | "plexSans" | "atkinson";
+        readonly headingFont: "serif" | "terminal" | "deco" | "neon" | "mono" | "system" | "rounded" | "lcd" | "pixel" | "inter" | "grotesk" | "fraunces" | "techno" | "plex" | "archivo" | "mincho" | "gothic" | "playfair" | "caveat" | "bricolage" | "jetbrains" | "manrope" | "figtree" | "cormorant" | "plexSans" | "atkinson";
         readonly border: 2 | 1;
         readonly depth: "none" | "raised" | "floating";
         readonly ornament: "balanced" | "expressive" | "quiet";
@@ -27,7 +135,7 @@ export declare const themeDocuments: {
     };
     readonly recipes: {
         readonly material: {
-            readonly id: "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";
+            readonly id: "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";
             readonly version: 1;
             readonly parameters: {
                 readonly surfaceMix: number;
@@ -42,10 +150,10 @@ export declare const themeDocuments: {
             };
         };
         readonly frame: {
-            readonly id: "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";
+            readonly id: "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";
             readonly version: 1;
             readonly ornament: {
-                readonly style: "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";
+                readonly style: "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";
                 readonly canopy: "Scattered trails" | "Corner cascades" | "Overhead boughs" | "Long tendrils" | "Open crown";
                 readonly stem: "Twining vines" | "Woody branches" | "Tender shoots" | "Mossy roots";
                 readonly density: number;
@@ -83,7 +191,7 @@ export declare const themeDocuments: {
         };
         readonly states: "standard" | "led" | "marching" | "inlay" | "glow" | "stamp";
         readonly details: {
-            readonly focus: "offset" | "dashed" | "double" | "glow" | "ring";
+            readonly focus: "offset" | "dashed" | "double" | "halo" | "glow" | "ring";
             readonly divider: "line" | "dashed" | "dotted" | "double" | "groove";
             readonly selection: "accent" | "inverse" | "highlighter";
             readonly scrollbar: "accent" | "native" | "thin";

package/dist/documents.js

@@ -1,4 +1,6 @@
 import { parseThemeDocument } from "./theme-schema.js";
+import { applyThemeFix } from "./theme-fix.js";
+import { themeFixes } from "./theme-fixes.js";
 import { defaultChrome } from "./chrome.js";
 import { launchCharacters, launchChrome, launchDocuments, } from "./starters-launch.js";
 /**
@@ -437,8 +439,8 @@ const starterCharacters = {
         backdrop: { pattern: "dots", intensity: 0.22, scale: 0.8 },
     },
 };
-/** Portable recipes for all eleven installed themes. */
-export const themeDocuments = [
+/** Each starter as authored, before any saved fix from the theme audit. */
+export const starterDocuments = [
     {
         schemaVersion: 2,
         id: "dixy/living-forest",
@@ -1409,3 +1411,9 @@ export const themeDocuments = [
         },
     });
 });
+/**
+ * Installed themes: each starter with its saved fix, if any. Fixes are small
+ * patches written by the playground's "Save as theme fix" (dev server only),
+ * so a reviewer sees exactly which values changed.
+ */
+export const themeDocuments = starterDocuments.map((document) => parseThemeDocument(applyThemeFix(document, themeFixes[document.id])));

package/dist/foundations.d.ts

@@ -88,6 +88,14 @@ export declare const themeFonts: {
         readonly label: "Manrope";
         readonly value: "\"Manrope Variable\", \"Manrope\", ui-sans-serif, system-ui, sans-serif";
     };
+    readonly atkinson: {
+        readonly label: "Atkinson Hyperlegible";
+        readonly value: "\"Atkinson Hyperlegible\", ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly plexSans: {
+        readonly label: "IBM Plex Sans";
+        readonly value: "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif";
+    };
     readonly figtree: {
         readonly label: "Figtree";
         readonly value: "\"Figtree Variable\", \"Figtree\", ui-sans-serif, system-ui, sans-serif";

package/dist/foundations.js

@@ -80,6 +80,14 @@ export const themeFonts = {
         label: "Manrope",
         value: '"Manrope Variable", "Manrope", ui-sans-serif, system-ui, sans-serif',
     },
+    atkinson: {
+        label: "Atkinson Hyperlegible",
+        value: '"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif',
+    },
+    plexSans: {
+        label: "IBM Plex Sans",
+        value: '"IBM Plex Sans Variable", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif',
+    },
     figtree: {
         label: "Figtree",
         value: '"Figtree Variable", "Figtree", ui-sans-serif, system-ui, sans-serif',
@@ -111,6 +119,8 @@ export const themeFontPackages = {
     jetbrains: "@fontsource/jetbrains-mono",
     manrope: "@fontsource-variable/manrope",
     figtree: "@fontsource-variable/figtree",
+    plexSans: "@fontsource-variable/ibm-plex-sans",
+    atkinson: "@fontsource/atkinson-hyperlegible",
     cormorant: "@fontsource-variable/cormorant-garamond",
 };
 /** Shared by the compiled consumer settings and playground exports; no React or router import. */

package/dist/frame-styles.d.ts

@@ -31,6 +31,9 @@ export declare const framePrefixes: {
     readonly gulal: "holi";
     readonly knit: "yule";
     readonly liquid: "glass";
+    readonly sunset: "sunset";
+    readonly menu: "savepoint";
+    readonly marquee: "arcade";
 };
 /** Frame code owns trim/geometry only. It never paints an input or action surface. */
 export declare function frameStyles(m: ResolvedThemeRecipe, theme: string): string;

package/dist/frame-styles.js

@@ -31,6 +31,9 @@ export const framePrefixes = {
     gulal: "holi",
     knit: "yule",
     liquid: "glass",
+    sunset: "sunset",
+    menu: "savepoint",
+    marquee: "arcade",
 };
 /** Frame code owns trim/geometry only. It never paints an input or action surface. */
 export function frameStyles(m, theme) {
@@ -125,6 +128,9 @@ export function frameStyles(m, theme) {
     details.gulal = `@keyframes dixy-holi-detail { from { opacity:.5; } to { opacity:1; } }`;
     details.knit = `@keyframes dixy-yule-detail { from { opacity:.5; } to { opacity:1; } }`;
     details.liquid = `@keyframes dixy-glass-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.sunset = `@keyframes dixy-sunset-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.menu = `@keyframes dixy-savepoint-detail { from { opacity:.5; } to { opacity:1; } }`;
+    details.marquee = `@keyframes dixy-arcade-detail { from { opacity:.5; } to { opacity:1; } }`;
     // Scope every legacy ornament selector as well, so two custom frames can coexist.
     const scoped = details[m.frame].replace(/(^|[}\n])([ \t]*)(\.dixy-[^{]+)\{/g, (_match, before, space, selector) => before +
         space +

package/dist/freighter.css

@@ -31,6 +31,11 @@
     --dixy-font-title-sm-family:
       "Archivo Black", "Arial Black", ui-sans-serif, sans-serif;
     --dixy-skin-edge: #9b9a94;
+    --dixy-skin-field-edge: color-mix(
+      in oklab,
+      var(--dixy-color-base-9) 50%,
+      var(--dixy-color-base-8)
+    );
     --dixy-organic-density: 50;
     --dixy-organic-cornerDensity: 70;
     --dixy-organic-canopyDepth: 40;
@@ -128,7 +133,6 @@
     --dixy-organic-b: #0e0f10;
     --dixy-organic-c: #e5533d;
     --dixy-organic-d: #a5a59c;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 85%,
@@ -146,6 +150,7 @@
       #2b2e30
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/freighter"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -279,6 +284,28 @@
     ):not([data-variant="solid"]):not([data-variant="soft"]) {
     background-color: var(--dixy-skin-surface);
   }
+  :is(
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup
+    )[data-dixy-skin="dixy/freighter"]:not([data-dixy-material-override]):not(
+      :where([data-dixy-material-override]) *
+    ):not([data-variant="solid"]):not([data-variant="soft"]) {
+    background-color: color-mix(
+      in srgb,
+      var(--dixy-color-background-surface-raised) 94%,
+      var(--dixy-skin-surface)
+    );
+  }
   :is(
     .dixy-input,
     .dixy-textarea,
@@ -311,7 +338,7 @@
       :where([data-dixy-material-override]) *
     ) {
     border-width: var(--dixy-input-border-width);
-    border-color: var(--dixy-skin-edge);
+    border-color: var(--dixy-skin-field-edge);
     background-image: var(--dixy-skin-paint);
     background-color: var(--dixy-color-background-canvas);
     background-size:
@@ -321,6 +348,43 @@
       100% 100%;
     box-shadow: var(--dixy-skin-inset);
   }
+  /* materials.css styles [data-dixy-visual] surfaces at 0,5,0. Match the
+     skin's paint to that so its image and grain size always land together;
+     otherwise the material image is tiled at the grain size (stripes). */
+  :is(
+      .dixy-card,
+      .dixy-box,
+      .dixy-dialog-popup,
+      .dixy-alert-dialog-popup,
+      .dixy-drawer-popup,
+      .dixy-popover-popup,
+      .dixy-preview-card-popup,
+      .dixy-tooltip-popup,
+      .dixy-select-popup,
+      .dixy-combobox-popup,
+      .dixy-autocomplete-popup,
+      .dixy-menu-popup,
+      .dixy-context-menu-popup,
+      .dixy-navigation-menu-popup,
+      .dixy-toast-root,
+      .dixy-alert,
+      .dixy-list-box,
+      .dixy-calendar,
+      .dixy-range-calendar,
+      .dixy-input,
+      .dixy-textarea,
+      .dixy-native-select,
+      .dixy-select-trigger,
+      .dixy-input-group,
+      .dixy-combobox-input-group,
+      .dixy-autocomplete-input-group,
+      .dixy-number-field-group,
+      .dixy-otp-field-input
+    )[data-dixy-skin="dixy/freighter"]:not([data-dixy-material-override]):not(
+      :where([data-dixy-material-override]) *
+    )[data-dixy-visual][data-material]:not([data-disabled]) {
+    background-image: var(--dixy-skin-paint);
+  }
   :is(.dixy-button)[data-dixy-skin="dixy/freighter"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -351,14 +415,19 @@
     border: 1px solid var(--dixy-skin-edge);
     box-shadow: var(--dixy-skin-inset);
   }
+  /* 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). */
   :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/freighter"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *) {
-    background-image: var(--dixy-skin-finish);
     box-shadow: var(--dixy-skin-control-relief);
     border: 1px solid var(--dixy-skin-edge);
   }
-  /* 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). */
+  :is(.dixy-tabs-indicator)[data-dixy-skin="dixy/freighter"]:not(
+      [data-dixy-material-override]
+    ):not(:where([data-dixy-material-override]) *):not([data-variant="line"]) {
+    background-image: none;
+  }
+  /* Toggle groups read like tabs: a sunken track, the selected toggle a raised, flat thumb. */
   .dixy-theme[data-dixy-skin="dixy/freighter"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -373,7 +442,7 @@
       [data-variant="solid"]
     )[data-pressed]:not([data-disabled]) {
     background-color: var(--dixy-color-background-surface-raised);
-    background-image: var(--dixy-skin-selected, var(--dixy-skin-thumb));
+    background-image: none;
     box-shadow: var(--dixy-skin-control-relief);
     border-color: var(--dixy-skin-edge);
     color: var(--dixy-color-text-primary);
@@ -834,16 +903,72 @@
     :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/freighter"] {
     border-radius: 0;
     --dixy-chrome-bar-radius: 0px;
-    clip-path: polygon(
-      10px 0,
-      calc(100% - 10px) 0,
-      100% 10px,
-      100% calc(100% - 10px),
-      calc(100% - 10px) 100%,
-      10px 100%,
-      0 calc(100% - 10px),
-      0 10px
-    );
+  }
+  @supports (corner-shape: bevel) {
+    .dixy-theme[data-dixy-skin="dixy/freighter"]
+      :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/freighter"] {
+      border-radius: 10px;
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .dixy-theme[data-dixy-skin="dixy/freighter"]
+      :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/freighter"] {
+      clip-path: polygon(
+        10px 0,
+        calc(100% - 10px) 0,
+        100% 10px,
+        100% calc(100% - 10px),
+        calc(100% - 10px) 100%,
+        10px 100%,
+        0 calc(100% - 10px),
+        0 10px
+      );
+    }
+    .dixy-theme[data-dixy-skin="dixy/freighter"]
+      :is(
+        .dixy-card,
+        .dixy-dialog-popup
+      )[data-dixy-skin="dixy/freighter"]::after {
+      content: "";
+      position: absolute;
+      inset: calc(var(--dixy-skin-frame-width, 1px) * -1);
+      pointer-events: none;
+      z-index: 1;
+      background:
+        linear-gradient(
+            to bottom right,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          top left/10px 10px no-repeat,
+        linear-gradient(
+            to bottom left,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          top right/10px 10px no-repeat,
+        linear-gradient(
+            to top right,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          bottom left/10px 10px no-repeat,
+        linear-gradient(
+            to top left,
+            transparent 50%,
+            var(--dixy-skin-edge) 50%
+              calc(50% + var(--dixy-skin-frame-width, 1px)),
+            transparent calc(50% + var(--dixy-skin-frame-width, 1px))
+          )
+          bottom right/10px 10px no-repeat;
+    }
   }
   .dixy-theme[data-dixy-skin="dixy/freighter"]
     :is(.dixy-card)[data-dixy-skin="dixy/freighter"]