@dixy-ui/themes 0.0.0-stage → 0.1.0-beta.0

package/dist/organic-settings.js

@@ -0,0 +1,433 @@
+import { freezeData } from "./freeze.js";
+export const canopyShapes = [
+    "Scattered trails",
+    "Corner cascades",
+    "Overhead boughs",
+    "Long tendrils",
+    "Open crown",
+];
+export const stemCharacters = [
+    "Twining vines",
+    "Woody branches",
+    "Tender shoots",
+    "Mossy roots",
+];
+export const organicFrameRecipes = freezeData({
+    forest: {
+        label: "Living grove",
+        styles: [
+            "Woodland mix",
+            "Wild ivy",
+            "Fern grove",
+            "Willow canopy",
+            "Oak & moss",
+            "Spring growth",
+            "Ginkgo fans",
+            "Maple grove",
+            "Eucalyptus",
+            "Olive branch",
+            "Clover meadow",
+            "Wildflower hedge",
+        ],
+        defaults: {
+            density: 68,
+            cornerDensity: 78,
+            canopyDepth: 48,
+            variation: 72,
+            scale: 22,
+            stemWeight: 40,
+            motion: 30,
+            seed: 17,
+        },
+        light: ["#2c542f", "#7f9b4e", "#acb76e", "#696b3f"],
+        // Deeper, less saturated foliage: bright lime leaves read as confetti on dark ground.
+        dark: ["#4a7040", "#7f9f5c", "#a3ad7c", "#857f55"],
+    },
+    cushion: {
+        label: "Soft sculpture",
+        styles: ["Piped petals", "Twisted rope", "Candy pebbles", "Ribbon folds"],
+        defaults: {
+            density: 42,
+            cornerDensity: 72,
+            canopyDepth: 62,
+            variation: 68,
+            scale: 22,
+            stemWeight: 65,
+            motion: 42,
+            seed: 31,
+        },
+        light: ["#ca83a8", "#c5a9e1", "#f1ba9e", "#f8e0c8"],
+        dark: ["#bf7ea9", "#c7a5e5", "#ecc29f", "#e5d0b2"],
+    },
+    coral: {
+        label: "Tidal ornament",
+        styles: [
+            "Tidal ribbons",
+            "Seafoam beads",
+            "Glass droplets",
+            "Quiet currents",
+        ],
+        defaults: {
+            density: 38,
+            cornerDensity: 65,
+            canopyDepth: 60,
+            variation: 60,
+            scale: 18,
+            stemWeight: 45,
+            motion: 45,
+            seed: 47,
+        },
+        light: ["#4d9a92", "#85c8c0", "#b1d2db", "#d2ead6"],
+        dark: ["#54a49a", "#9fd9cc", "#88bacb", "#b4d8b9"],
+    },
+    deco: {
+        label: "Crafted inlay",
+        styles: ["Fine filigree", "Art deco", "Hammered edge", "Quiet gilding"],
+        defaults: {
+            density: 45,
+            cornerDensity: 76,
+            canopyDepth: 30,
+            variation: 45,
+            scale: 18,
+            stemWeight: 38,
+            motion: 28,
+            seed: 63,
+        },
+        light: ["#8c723a", "#c3a15b", "#eee0ae", "#67552c"],
+        dark: ["#9f8245", "#d8b972", "#f1e4bc", "#77663a"],
+    },
+    drafting: {
+        label: "Drafting marks",
+        styles: ["Dimensioned", "Ruler ticks", "Construction lines", "Quiet draft"],
+        defaults: {
+            density: 55,
+            cornerDensity: 100,
+            canopyDepth: 40,
+            variation: 30,
+            scale: 20,
+            stemWeight: 30,
+            motion: 30,
+            seed: 11,
+        },
+        light: ["#2b5c9e", "#6f93c9", "#c4472f", "#1d3557"],
+        dark: ["#eef5ff", "#9cc2f0", "#ffd27a", "#bcd6f5"],
+    },
+    riso: {
+        label: "Riso print",
+        styles: ["Misprint", "Halftone", "Taped corners", "Clean stamp"],
+        defaults: {
+            density: 40,
+            cornerDensity: 70,
+            canopyDepth: 30,
+            variation: 55,
+            scale: 22,
+            stemWeight: 40,
+            motion: 20,
+            seed: 29,
+        },
+        light: ["#ff48b0", "#0078bf", "#ffe14d", "#2a2a2a"],
+        dark: ["#ff6ac1", "#3fa9f5", "#e8c93a", "#f2efe6"],
+    },
+    neon: {
+        label: "Neon tubes",
+        styles: ["Tube outline", "Broken tubes", "Sign shapes", "Low hum"],
+        defaults: {
+            density: 45,
+            cornerDensity: 60,
+            canopyDepth: 55,
+            variation: 65,
+            scale: 22,
+            stemWeight: 40,
+            motion: 35,
+            seed: 41,
+        },
+        light: ["#d6338f", "#128aa8", "#d99a1c", "#3b3540"],
+        dark: ["#ff4fd8", "#3ff2ff", "#ffd166", "#2a2233"],
+    },
+    sumi: {
+        label: "Ink brush",
+        styles: ["Bamboo", "Plum blossom", "Dry brush", "Ensō"],
+        defaults: {
+            density: 40,
+            cornerDensity: 70,
+            canopyDepth: 45,
+            variation: 45,
+            scale: 22,
+            stemWeight: 40,
+            motion: 20,
+            seed: 7,
+        },
+        light: ["#1c1b19", "#45533f", "#c4505a", "#c8402a"],
+        dark: ["#ebe5d8", "#a9b59b", "#e58c94", "#d65a42"],
+    },
+    transit: {
+        label: "Transit lines",
+        styles: ["Line map", "Station roundels", "Platform edge", "Quiet line"],
+        defaults: {
+            density: 50,
+            cornerDensity: 60,
+            canopyDepth: 40,
+            variation: 40,
+            scale: 22,
+            stemWeight: 40,
+            motion: 30,
+            seed: 5,
+        },
+        light: ["#2e9e4f", "#ef7d1a", "#1f6fd1", "#33393f"],
+        dark: ["#4cc36f", "#ff9a3d", "#5a9bff", "#d3d8de"],
+    },
+    // 2026-12 launch frames. Painters live in organic-paint-launch.ts.
+    crt: {
+        label: "Phosphor CRT",
+        styles: ["Box corners", "Status line", "Raster ticks", "Quiet cursor"],
+        defaults: {
+            density: 55,
+            cornerDensity: 70,
+            canopyDepth: 30,
+            variation: 20,
+            scale: 20,
+            stemWeight: 30,
+            motion: 40,
+            seed: 64,
+        },
+        light: ["#2f7a3d", "#7fb98a", "#b8641c", "#24402a"],
+        dark: ["#3dff6e", "#1f9e44", "#ffb000", "#7dffa0"],
+    },
+    panes: {
+        label: "TUI panes",
+        styles: ["Pane titles", "Key hints", "Split panes", "Bare panes"],
+        defaults: {
+            density: 60,
+            cornerDensity: 50,
+            canopyDepth: 30,
+            variation: 30,
+            scale: 18,
+            stemWeight: 30,
+            motion: 30,
+            seed: 16,
+        },
+        light: ["#1f6fb2", "#5f8a00", "#c42d74", "#586e75"],
+        dark: ["#5fafff", "#87d75f", "#ff87d7", "#9a9a9a"],
+    },
+    swiss: {
+        label: "Swiss grid",
+        styles: ["Crop marks", "Red block", "Grid ticks", "Bare grid"],
+        defaults: {
+            density: 50,
+            cornerDensity: 80,
+            canopyDepth: 40,
+            variation: 20,
+            scale: 20,
+            stemWeight: 40,
+            motion: 0,
+            seed: 26,
+        },
+        light: ["#e30613", "#0d0d0d", "#9a9a9a", "#0d0d0d"],
+        dark: ["#ff2a2a", "#f4f4f4", "#6a6a6a", "#f4f4f4"],
+    },
+    azulejo: {
+        label: "Azulejo tiles",
+        styles: ["Corner tiles", "Border run", "Floral rosette", "Single tile"],
+        defaults: {
+            density: 45,
+            cornerDensity: 80,
+            canopyDepth: 40,
+            variation: 30,
+            scale: 20,
+            stemWeight: 40,
+            motion: 20,
+            seed: 14,
+        },
+        light: ["#1f4fa0", "#5f86c9", "#d79a2b", "#eef3fc"],
+        dark: ["#8fb3ff", "#4f74c0", "#e8c06a", "#1a2d57"],
+    },
+    formwork: {
+        label: "Formwork",
+        styles: ["Tie holes", "Stencil marks", "Board seams", "Bare concrete"],
+        defaults: {
+            density: 50,
+            cornerDensity: 70,
+            canopyDepth: 40,
+            variation: 30,
+            scale: 20,
+            stemWeight: 50,
+            motion: 0,
+            seed: 4,
+        },
+        light: ["#5d5a55", "#8e8b84", "#d9961a", "#2a2927"],
+        dark: ["#9b968c", "#6b6862", "#e0a020", "#e6e2da"],
+    },
+    atomic: {
+        label: "Atomic age",
+        styles: ["Starbursts", "Boomerangs", "Orbit atoms", "Lone star"],
+        defaults: {
+            density: 50,
+            cornerDensity: 70,
+            canopyDepth: 40,
+            variation: 50,
+            scale: 20,
+            stemWeight: 40,
+            motion: 30,
+            seed: 57,
+        },
+        light: ["#ef8a3c", "#2a9d8f", "#e76f51", "#2c3a3f"],
+        dark: ["#f4a261", "#4cc3b3", "#ef8a6f", "#f6ecd6"],
+    },
+    hud: {
+        label: "HUD brackets",
+        styles: ["Target brackets", "Telemetry", "Reticle", "Clean brackets"],
+        defaults: {
+            density: 55,
+            cornerDensity: 80,
+            canopyDepth: 40,
+            variation: 30,
+            scale: 20,
+            stemWeight: 40,
+            motion: 40,
+            seed: 412,
+        },
+        light: ["#0a8aa3", "#3fa6bb", "#e05a2a", "#0b3a47"],
+        dark: ["#5ff3ff", "#2bb5c8", "#ff8a4c", "#cdf9ff"],
+    },
+    hazard: {
+        label: "Cargo hazard",
+        styles: ["Hazard stripes", "Rivet seams", "Cargo stencils", "Clean plate"],
+        defaults: {
+            density: 50,
+            cornerDensity: 70,
+            canopyDepth: 40,
+            variation: 30,
+            scale: 20,
+            stemWeight: 50,
+            motion: 30,
+            seed: 88,
+        },
+        light: ["#e09a00", "#1d1f21", "#c0392b", "#4b5156"],
+        dark: ["#f2a900", "#0e0f10", "#e5533d", "#a5a59c"],
+    },
+    orbit: {
+        label: "Solar orbits",
+        styles: ["Orbit rings", "Gold foil", "Star field", "Single orbit"],
+        defaults: {
+            density: 45,
+            cornerDensity: 70,
+            canopyDepth: 50,
+            variation: 40,
+            scale: 22,
+            stemWeight: 30,
+            motion: 30,
+            seed: 1,
+        },
+        light: ["#b8892b", "#e7c56a", "#8a8ea6", "#1d2033"],
+        dark: ["#e2b85a", "#f3d98c", "#a3a3b8", "#f0ecdf"],
+    },
+    rangoli: {
+        label: "Rangoli & diyas",
+        styles: ["Rangoli corners", "Diya row", "Marigold string", "Single diya"],
+        defaults: {
+            density: 50,
+            cornerDensity: 75,
+            canopyDepth: 45,
+            variation: 40,
+            scale: 22,
+            stemWeight: 40,
+            motion: 35,
+            seed: 108,
+        },
+        light: ["#c2185b", "#f08c00", "#f7c948", "#00897b"],
+        dark: ["#ff5c9a", "#ffb627", "#ffe08a", "#26c6b0"],
+    },
+    papercut: {
+        label: "Paper-cut",
+        styles: ["Lanterns", "Scallop edge", "Cloud scrolls", "Single lantern"],
+        defaults: {
+            density: 50,
+            cornerDensity: 70,
+            canopyDepth: 45,
+            variation: 35,
+            scale: 22,
+            stemWeight: 40,
+            motion: 30,
+            seed: 8,
+        },
+        light: ["#c8102e", "#e3ac1f", "#8a1020", "#5a0d12"],
+        dark: ["#f5c542", "#ffe7a8", "#ff5a6e", "#ffe7a8"],
+    },
+    picado: {
+        label: "Papel picado",
+        styles: ["Bunting", "Marigold garland", "Paper confetti", "Short string"],
+        defaults: {
+            density: 55,
+            cornerDensity: 60,
+            canopyDepth: 45,
+            variation: 50,
+            scale: 20,
+            stemWeight: 40,
+            motion: 35,
+            seed: 31,
+        },
+        light: ["#e8590c", "#d6336c", "#7048e8", "#12b886"],
+        dark: ["#ff922b", "#f06595", "#9775fa", "#38d9a9"],
+    },
+    gulal: {
+        label: "Colour powder",
+        styles: ["Powder clouds", "Splashes", "Speckle dust", "Soft haze"],
+        defaults: {
+            density: 50,
+            cornerDensity: 75,
+            canopyDepth: 50,
+            variation: 60,
+            scale: 24,
+            stemWeight: 40,
+            motion: 25,
+            seed: 3,
+        },
+        light: ["#ff4d9a", "#f5b800", "#20c997", "#4dabf7"],
+        dark: ["#ff5fa2", "#ffd43b", "#38d9a9", "#74c0fc"],
+    },
+    knit: {
+        label: "Knit wool",
+        styles: ["Fair Isle band", "Snowflakes", "Cable stitch", "Plain rib"],
+        defaults: {
+            density: 50,
+            cornerDensity: 60,
+            canopyDepth: 40,
+            variation: 30,
+            scale: 20,
+            stemWeight: 40,
+            motion: 25,
+            seed: 12,
+        },
+        light: ["#1f5e3a", "#b3261e", "#f4ecdd", "#2d3b2f"],
+        dark: ["#c9b98f", "#e5534b", "#16261c", "#9fb8a4"],
+    },
+    liquid: {
+        label: "Liquid glass",
+        styles: ["Specular rim", "Refraction", "Light catch", "Clear"],
+        defaults: {
+            density: 50,
+            cornerDensity: 60,
+            canopyDepth: 50,
+            variation: 30,
+            scale: 22,
+            stemWeight: 40,
+            motion: 30,
+            seed: 26,
+        },
+        light: ["#ffffff", "#9fc4ff", "#ffc2e2", "#0a1a33"],
+        dark: ["#ffffff", "#6ea8ff", "#d68cff", "#e8f0ff"],
+    },
+});
+export function isOrganicFrame(frame) {
+    return Object.hasOwn(organicFrameRecipes, frame);
+}
+export const organicStyles = Object.values(organicFrameRecipes).flatMap((recipe) => [...recipe.styles]);
+export function defaultOrganicOrnament(frame) {
+    const recipe = organicFrameRecipes[isOrganicFrame(frame) ? frame : "forest"];
+    return {
+        ...recipe.defaults,
+        style: recipe.styles[0],
+        canopy: canopyShapes[0],
+        stem: stemCharacters[0],
+    };
+}

package/dist/ornament-parts.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import type { OrnamentLevel, MotionPreference, EffectsPreference } from "@dixy-ui/tokens";
+/** Structural counterpart to core's optional ornament slot; no core runtime dependency. */
+export interface OrnamentProps {
+    part: "theme" | "card" | "dialog" | "switch-thumb";
+    ornament: OrnamentLevel;
+    motion: MotionPreference;
+    effects: EffectsPreference;
+    animate: boolean;
+}
+export declare function useOrnamentId(prefix: string): string;
+export declare function OrnamentLayer({ skin, children, ...props }: OrnamentProps & {
+    skin: string;
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+/** Fixed-size hardware never stretches with the surrounding panel. */
+export declare function Fasteners({ id, dark, }: {
+    id: string;
+    dark?: boolean;
+}): import("react").JSX.Element;

package/dist/ornament-parts.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+export function useOrnamentId(prefix) {
+    return "dixy-" + prefix + "-" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
+}
+export function OrnamentLayer({ skin, children, ...props }) {
+    if (props.effects === "reduced" || props.ornament === "quiet")
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: `dixy-skin-ornament dixy-${skin}-ornament dixy-skin-ornament-${props.part}`, "data-animated": props.animate && props.motion !== "reduced" ? "" : undefined, "data-motion": props.motion, "data-ornament": props.ornament, children: children }));
+}
+/** Fixed-size hardware never stretches with the surrounding panel. */
+export function Fasteners({ id, dark = false, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { width: "0", height: "0", className: "dixy-skin-definitions", children: _jsxs("defs", { children: [_jsxs("radialGradient", { id: id + "-steel", cx: ".32", cy: ".25", children: [_jsx("stop", { stopColor: dark ? "#87918c" : "#fff" }), _jsx("stop", { offset: ".45", stopColor: dark ? "#353d39" : "#b6b8b7" }), _jsx("stop", { offset: "1", stopColor: dark ? "#101713" : "#676d6a" })] }), _jsxs("g", { id: id + "-screw", children: [_jsx("circle", { cx: "7", cy: "7", r: "6", fill: "url(#" + id + "-steel)", stroke: dark ? "#050a07" : "#878c88" }), _jsx("circle", { cx: "7", cy: "7", r: "4.5", fill: "none", stroke: "#ffffff", strokeOpacity: ".24" }), _jsx("path", { d: "m4.5 8.4 5-2.8m-3.8-1 2.6 4.8", stroke: dark ? "#070d09" : "#4c524e", strokeWidth: "1.2", strokeLinecap: "round" })] })] }) }), ["tl", "tr", "bl", "br"].map((corner, i) => (_jsx("svg", { className: "dixy-skin-fastener dixy-skin-fastener-" + corner, viewBox: "0 0 14 14", children: _jsx("use", { href: "#" + id + "-screw", transform: `rotate(${i * 57} 7 7)` }) }, corner)))] }));
+}