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

package/dist/orbital-hud.css

@@ -39,6 +39,11 @@
       "Orbitron Variable", "Orbitron", "Eurostile", "Bank Gothic",
       ui-sans-serif, sans-serif;
     --dixy-skin-edge: #0a8aa366;
+    --dixy-skin-field-edge: color-mix(
+      in oklab,
+      var(--dixy-color-base-9) 50%,
+      var(--dixy-color-base-8)
+    );
     --dixy-organic-density: 55;
     --dixy-organic-cornerDensity: 80;
     --dixy-organic-canopyDepth: 40;
@@ -127,7 +132,6 @@
     --dixy-organic-b: #2bb5c8;
     --dixy-organic-c: #ff8a4c;
     --dixy-organic-d: #cdf9ff;
-    --dixy-skin-selected: var(--dixy-skin-finish);
     --dixy-color-text-primary: color-mix(
       in srgb,
       var(--dixy-color-base-12) 65%,
@@ -145,6 +149,7 @@
       #06161e
     );
   }
+
   .dixy-theme[data-dixy-skin="dixy/orbital-hud"][data-relief="2"] {
     --dixy-skin-shadow:
       var(--dixy-skin-depth-shadow, var(--dixy-skin-authored-shadow)),
@@ -170,11 +175,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/orbital-hud"] {
+  .dixy-theme[data-dixy-skin="dixy/orbital-hud"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/orbital-hud"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -278,6 +281,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/orbital-hud"]: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,
@@ -310,7 +335,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:
@@ -320,6 +345,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/orbital-hud"]: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/orbital-hud"]:not(
       [data-dixy-material-override]
     ):not(:where([data-dixy-material-override]) *):is(
@@ -350,14 +412,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/orbital-hud"]: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/orbital-hud"]: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/orbital-hud"]
     .dixy-toggle-group:is([data-attached], [data-segmented]):not(
       [data-dixy-material-override]
@@ -372,7 +439,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);
@@ -876,16 +943,72 @@
     :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/orbital-hud"] {
     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/orbital-hud"]
+      :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/orbital-hud"] {
+      border-radius: 10px;
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .dixy-theme[data-dixy-skin="dixy/orbital-hud"]
+      :is(.dixy-card, .dixy-dialog-popup)[data-dixy-skin="dixy/orbital-hud"] {
+      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/orbital-hud"]
+      :is(
+        .dixy-card,
+        .dixy-dialog-popup
+      )[data-dixy-skin="dixy/orbital-hud"]::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/orbital-hud"]
     :is(.dixy-card)[data-dixy-skin="dixy/orbital-hud"]

package/dist/organic-paint-launch.d.ts

@@ -24,6 +24,12 @@ export declare const paintPicado: OrganicPainter;
 export declare const paintGulal: OrganicPainter;
 export declare const paintKnit: OrganicPainter;
 export declare const paintLiquid: OrganicPainter;
+/** A striped sun setting behind the top edge and a horizon grid under the card. */
+export declare const paintSunset: OrganicPainter;
+/** A blinking menu cursor beside the window and a sparkle on one corner. */
+export declare const paintMenuCursor: OrganicPainter;
+/** Chasing marquee bulbs over the top edge and credits under the card. */
+export declare const paintMarquee: OrganicPainter;
 export declare const launchPainters: {
     readonly crt: OrganicPainter;
     readonly panes: OrganicPainter;
@@ -40,4 +46,7 @@ export declare const launchPainters: {
     readonly gulal: OrganicPainter;
     readonly knit: OrganicPainter;
     readonly liquid: OrganicPainter;
+    readonly sunset: OrganicPainter;
+    readonly menu: OrganicPainter;
+    readonly marquee: OrganicPainter;
 };

package/dist/organic-paint-launch.js

@@ -925,29 +925,7 @@ export const paintPicado = (ctx, _p, w, h, settings, colors, clock, playing, ind
 });
 /* ───────────────────────── Holi Colours ───────────────────────── */
 export const paintGulal = (ctx, _p, w, h, settings, colors, clock, playing, index, limits, shown = settings.density) => framed(ctx, w, h, limits, () => {
-    const s = paintState(settings), tier = tierOf(w, h), seed = s.seed + index * 41, inks = [colors.a, colors.b, colors.c, colors.d], drift = playing ? clock * (s.motion / 200) : 0, haze = s.style === "Soft haze", corners = cornersOf(w, h), at = choose(index, s.seed, 1, 4), ink = choose(index, s.seed, 2, 4);
-    // A powder cloud pushed outward from a corner. Its radius stops before the
-    // content box, so the soft edge is never sliced by the frame clip.
-    const cloud = (k, color, scale) => {
-        const [x, y, sx, sy] = corners[k], base = (18 + s.scale * 0.9) * scale, ox = Math.sin(drift + k) * 2, oy = Math.cos(drift * 0.8 + k) * 2;
-        for (let j = 0; j < 5; j++) {
-            const jx = x -
-                sx * (6 + rand(seed + k * 7 + j) * 10) +
-                ox +
-                (rand(seed + k + j * 3) - 0.5) * base * 0.6, jy = y - sy * (6 + rand(seed + k * 7 + j + 3) * 10) + oy, r = Math.min(base * (0.6 + rand(seed + j) * 0.4), room(jx, jy, w, h, limits) - 1);
-            if (r < 4)
-                continue;
-            const g = ctx.createRadialGradient(jx, jy, 0, jx, jy, r);
-            g.addColorStop(0, color);
-            g.addColorStop(1, "transparent");
-            ctx.globalAlpha = haze ? 0.28 : 0.5;
-            ctx.fillStyle = g;
-            ctx.beginPath();
-            ctx.arc(jx, jy, r, 0, tau);
-            ctx.fill();
-        }
-        ctx.globalAlpha = 1;
-    };
+    const s = paintState(settings), tier = tierOf(w, h), seed = s.seed + index * 41, inks = [colors.a, colors.b, colors.c, colors.d], haze = s.style === "Soft haze", corners = cornersOf(w, h), at = choose(index, s.seed, 1, 4), ink = choose(index, s.seed, 2, 4);
     // Dry powder thrown along an edge, thinning away from its corner.
     const speckle = (k, color, count) => {
         const [x, y, sx, sy] = corners[k];
@@ -955,35 +933,23 @@ export const paintGulal = (ctx, _p, w, h, settings, colors, clock, playing, inde
             const along = rand(seed + i + k * 13) ** 1.6 * Math.min(w, h) * 0.6, off = 3 + rand(seed + i + 1) * 18, edge = i % 2, px = edge ? x + sx * along : x - sx * off, py = edge ? y - sy * off : y + sy * along;
             if (room(px, py, w, h, limits) < 2)
                 continue;
-            ctx.globalAlpha = 0.5 + rand(seed + i + 2) * 0.45;
+            ctx.globalAlpha = (haze ? 0.3 : 0.5) + rand(seed + i + 2) * 0.45;
             dot(ctx, px, py, 0.6 + rand(seed + i + 3) * (s.style === "Splashes" ? 2.2 : 1.3), color);
         }
         ctx.globalAlpha = 1;
     };
-    const count = Math.round((shown / 100) * 40);
+    // Corner powder clouds were removed: their blur was cut square by the
+    // ornament canvas. Every style now throws dry powder; haze is fainter.
+    const count = Math.round((shown / 100) * 40) * (haze ? 0.6 : 1);
     if (tier === "hero") {
-        if (s.style !== "Speckle dust") {
-            cloud(at, inks[ink], 1.1);
-            cloud((at + 2) % 4, inks[(ink + 2) % 4], 0.9);
-        }
-        if (!haze) {
-            speckle(at, inks[ink], count);
-            speckle((at + 2) % 4, inks[(ink + 2) % 4], count);
-            speckle((at + 1) % 4, inks[(ink + 1) % 4], count / 3);
-        }
-    }
-    else if (tier === "card") {
-        if (s.style !== "Speckle dust")
-            cloud(at, inks[ink], 0.85);
-        if (!haze)
-            speckle(at, inks[ink], count * 0.7);
-    }
-    else {
-        if (s.style !== "Speckle dust")
-            cloud(at, inks[ink], 0.6);
-        if (!haze)
-            speckle(at, inks[ink], count * 0.4);
+        speckle(at, inks[ink], count);
+        speckle((at + 2) % 4, inks[(ink + 2) % 4], count);
+        speckle((at + 1) % 4, inks[(ink + 1) % 4], count / 3);
     }
+    else if (tier === "card")
+        speckle(at, inks[ink], count * 0.7);
+    else
+        speckle(at, inks[ink], count * 0.4);
 });
 /* ───────────────────────── Yule Knit ───────────────────────── */
 function snowflake(ctx, x, y, r, color, turn) {
@@ -1137,6 +1103,112 @@ export const paintLiquid = (ctx, p, w, h, settings, colors, clock, playing, _ind
     ctx.stroke();
     ctx.globalAlpha = 1;
 });
+/* ───────────────────────── Sunset Drive ───────────────────────── */
+/** A striped sun setting behind the top edge and a horizon grid under the card. */
+export const paintSunset = (ctx, _p, w, h, settings, colors, clock, playing, index, limits, shown = settings.density) => framed(ctx, w, h, limits, () => {
+    const s = paintState(settings), tier = tierOf(w, h), right = choose(index, s.seed, 1, 2) === 0, t = playing ? clock * (s.motion / 100) : 0, sun = s.style === "Sun and grid" || s.style === "Sun only", grid = s.style === "Sun and grid" || s.style === "Grid only";
+    if (sun) {
+        const r = tier === "hero"
+            ? Math.min(30, 22 + s.scale * 0.35)
+            : tier === "card"
+                ? Math.min(27, 18 + s.scale * 0.3)
+                : 14, cx = right ? w - r - 26 : r + 26, cy = -2;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(cx - r - 14, -40, r * 2 + 28, 40 + cy);
+        ctx.clip();
+        const g = ctx.createLinearGradient(0, cy - r, 0, cy);
+        g.addColorStop(0, colors.b);
+        g.addColorStop(1, colors.a);
+        glow(ctx, colors.a, 10);
+        ctx.fillStyle = g;
+        ctx.beginPath();
+        ctx.arc(cx, cy, r, Math.PI, tau);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+        // Gaps widen toward the horizon, the classic sliced sun.
+        for (let i = 1; i <= 4; i++) {
+            const y = cy - (r * i) / 5;
+            ctx.clearRect(cx - r - 1, y - (5 - i) * 0.45 - 0.6, r * 2 + 2, (5 - i) * 0.9 + 0.6);
+        }
+        ctx.restore();
+    }
+    if (grid && tier !== "small") {
+        const half = tier === "card", x0 = half && right ? w * 0.45 : 0, x1 = half && !right ? w * 0.55 : w, depth = 24, top = h + 4, phase = (t * 0.5) % 1, vx = (x0 + x1) / 2;
+        ctx.strokeStyle = colors.a;
+        ctx.lineWidth = 1;
+        for (let i = 0; i < 5; i++) {
+            const k = (i + phase) / 5, y = top + depth * k * k;
+            ctx.globalAlpha = 0.12 + 0.4 * k;
+            ctx.beginPath();
+            ctx.moveTo(x0, y);
+            ctx.lineTo(x1, y);
+            ctx.stroke();
+        }
+        const cols = Math.max(4, Math.round((x1 - x0) / (40 - shown * 0.15)));
+        ctx.globalAlpha = 0.3;
+        for (let i = 0; i <= cols; i++) {
+            const x = x0 + ((x1 - x0) * i) / cols;
+            ctx.beginPath();
+            ctx.moveTo(vx + (x - vx) * 0.6, top);
+            ctx.lineTo(vx + (x - vx) * 1.3, top + depth);
+            ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+    }
+});
+/* ───────────────────────── Save Point ───────────────────────── */
+const pixelFont = (size) => `400 ${size}px "Silkscreen", "VT323", ui-monospace, monospace`;
+/** A blinking menu cursor beside the window and a sparkle on one corner. */
+export const paintMenuCursor = (ctx, _p, w, h, settings, colors, clock, playing, index, limits) => framed(ctx, w, h, limits, () => {
+    const s = paintState(settings), tier = tierOf(w, h), at = choose(index, s.seed, 1, 4), cursor = s.style === "Cursor and stars" || s.style === "Cursor only", stars = s.style === "Cursor and stars" || s.style === "Stars only", blink = !playing || s.motion === 0 || clock % 1 < 0.6;
+    if (cursor && blink && tier !== "small") {
+        const y = Math.min(h - 14, limits.top + 12), x = -6, size = 6 + s.scale * 0.12;
+        ctx.beginPath();
+        ctx.moveTo(x - size * 1.6, y - size);
+        ctx.lineTo(x, y);
+        ctx.lineTo(x - size * 1.6, y + size);
+        ctx.closePath();
+        ctx.fillStyle = colors.b;
+        ctx.fill();
+        ctx.strokeStyle = colors.d;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+    if (stars) {
+        const corners = cornersOf(w, h), picks = tier === "hero" ? [at, (at + 2) % 4] : [at];
+        for (const [n, k] of picks.entries()) {
+            const [x, y, sx, sy] = corners[k], twinkle = playing ? 0.55 + 0.45 * Math.sin(clock * 3 + n * 2) : 1, r = (tier === "small" ? 4 : 5) + s.scale * 0.12;
+            ctx.globalAlpha = twinkle;
+            ctx.fillStyle = colors.c;
+            star(ctx, x - sx * 9, y - sy * 9, r, r * 0.28, 4);
+            ctx.fill();
+        }
+        ctx.globalAlpha = 1;
+    }
+    if (tier === "hero" && s.style !== "Plain window")
+        label(ctx, "FILE 1", w - 4, -12, pixelFont(9), colors.d, "right");
+});
+/* ───────────────────────── Arcade Cabinet ───────────────────────── */
+/** Chasing marquee bulbs over the top edge and credits under the card. */
+export const paintMarquee = (ctx, _p, w, h, settings, colors, clock, playing, _index, limits, shown = settings.density) => framed(ctx, w, h, limits, () => {
+    const s = paintState(settings), tier = tierOf(w, h), bulbs = s.style === "Bulbs and credits" || s.style === "Bulbs only", credits = s.style === "Bulbs and credits" || s.style === "Credits only";
+    if (bulbs) {
+        const gap = 18 - shown * 0.05, n = Math.max(3, Math.floor((w - 16) / gap)), step = playing && s.motion > 0 ? Math.floor(clock * (2 + s.motion / 25)) : 0;
+        for (let i = 0; i <= n; i++) {
+            const x = 8 + ((w - 16) * i) / n, lit = (i + step) % 3 === 0;
+            if (lit)
+                glow(ctx, colors.b, 6);
+            dot(ctx, x, -8, lit ? 2.4 : 1.8, lit ? colors.b : colors.d);
+            ctx.shadowBlur = 0;
+        }
+    }
+    if (credits && tier !== "small") {
+        label(ctx, "1UP 004200", 0, h + 15, pixelFont(9), colors.a);
+        if (tier === "hero" && (!playing || s.motion === 0 || clock % 1.2 < 0.8))
+            label(ctx, "INSERT COIN", w, h + 15, pixelFont(9), colors.b, "right");
+    }
+});
 export const launchPainters = {
     crt: paintPhosphor,
     panes: paintPanes,
@@ -1153,4 +1225,7 @@ export const launchPainters = {
     gulal: paintGulal,
     knit: paintKnit,
     liquid: paintLiquid,
+    sunset: paintSunset,
+    menu: paintMenuCursor,
+    marquee: paintMarquee,
 };

package/dist/organic-paint.d.ts

@@ -35,7 +35,7 @@ declare function paintState(settings: OrganicSettings): {
     weight: number;
     motion: number;
     seed: number;
-    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";
+    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";
     canopy: "Scattered trails" | "Corner cascades" | "Overhead boughs" | "Long tendrils" | "Open crown";
     stem: "Twining vines" | "Woody branches" | "Tender shoots" | "Mossy roots";
 };