@dreamboard-games/ui-sdk 0.0.41

package/dist/theme/presets/arcade.js

@@ -0,0 +1,257 @@
+/**
+ * `arcade` — high-contrast neon theme for fast/competitive games.
+ *
+ * Visual identity: deep slate background, electric cyan/magenta
+ * intents, square-ish corners, sharp drop shadows. Designed to evoke
+ * action games and to keep critical CTAs popping at a glance.
+ */
+export const arcadeTheme = {
+    meta: {
+        id: "arcade",
+        name: "Arcade",
+        mode: "dark",
+    },
+    color: {
+        neutral: {
+            50: "#f5f7fb",
+            100: "#d6dde9",
+            200: "#a8b2c4",
+            400: "#5b6478",
+            600: "#2c3344",
+            800: "#161b27",
+            950: "#070912",
+        },
+        brand: {
+            50: "#e0fbff",
+            100: "#aef1fb",
+            200: "#62e0f0",
+            400: "#1bc4dc",
+            600: "#0d8ea1",
+            800: "#06525e",
+            950: "#03252b",
+        },
+        accent: {
+            50: "#ffe6f6",
+            100: "#ffb1de",
+            200: "#ff6cbf",
+            400: "#ff2891",
+            600: "#c80862",
+            800: "#73003a",
+            950: "#37001b",
+        },
+        success: {
+            50: "#dafdf2",
+            100: "#9af2cf",
+            200: "#52e1a3",
+            400: "#0fc171",
+            600: "#067a45",
+            800: "#024226",
+            950: "#001f10",
+        },
+        warning: {
+            50: "#fff4d8",
+            100: "#ffe198",
+            200: "#fbc739",
+            400: "#dba500",
+            600: "#9b7400",
+            800: "#5a4200",
+            950: "#291e00",
+        },
+        danger: {
+            50: "#ffdcdc",
+            100: "#ff9c9c",
+            200: "#ff5454",
+            400: "#e41e1e",
+            600: "#960a0a",
+            800: "#5a0202",
+            950: "#290000",
+        },
+        info: {
+            50: "#dceefe",
+            100: "#9ecdfb",
+            200: "#4f9ff5",
+            400: "#1d6fde",
+            600: "#0a4598",
+            800: "#03234f",
+            950: "#011024",
+        },
+    },
+    semantic: {
+        surface: {
+            app: "#070912",
+            board: "#0a0e1d",
+            hud: "#161b27",
+            card: "#1f2636",
+            sheet: "#161b27",
+            overlay: "rgba(7, 9, 18, 0.78)",
+            inset: "#0a0e1d",
+        },
+        text: {
+            primary: "#f5f7fb",
+            muted: "#a8b2c4",
+            onIntent: "#070912",
+            accent: "#62e0f0",
+            disabled: "#5b6478",
+        },
+        border: {
+            subtle: "#2c3344",
+            default: "#5b6478",
+            strong: "#a8b2c4",
+            focus: "#1bc4dc",
+        },
+        intent: {
+            primary: {
+                solid: "#1bc4dc",
+                on: "#070912",
+                soft: "rgba(27, 196, 220, 0.18)",
+                onSoft: "#aef1fb",
+                border: "#62e0f0",
+            },
+            secondary: {
+                solid: "#1f2636",
+                on: "#f5f7fb",
+                soft: "#161b27",
+                onSoft: "#a8b2c4",
+                border: "#5b6478",
+            },
+            success: {
+                solid: "#0fc171",
+                on: "#070912",
+                soft: "rgba(15, 193, 113, 0.18)",
+                onSoft: "#9af2cf",
+                border: "#52e1a3",
+            },
+            danger: {
+                solid: "#e41e1e",
+                on: "#ffffff",
+                soft: "rgba(228, 30, 30, 0.18)",
+                onSoft: "#ff9c9c",
+                border: "#ff5454",
+            },
+            warning: {
+                solid: "#fbc739",
+                on: "#070912",
+                soft: "rgba(251, 199, 57, 0.18)",
+                onSoft: "#ffe198",
+                border: "#dba500",
+            },
+            info: {
+                solid: "#4f9ff5",
+                on: "#070912",
+                soft: "rgba(79, 159, 245, 0.18)",
+                onSoft: "#9ecdfb",
+                border: "#1d6fde",
+            },
+        },
+    },
+    radius: {
+        none: "0px",
+        sm: "2px",
+        md: "4px",
+        lg: "6px",
+        hud: "10px",
+        pill: "9999px",
+    },
+    space: {
+        0: "0",
+        0.5: "0.125rem",
+        1: "0.25rem",
+        1.5: "0.375rem",
+        2: "0.5rem",
+        3: "0.75rem",
+        4: "1rem",
+        6: "1.5rem",
+        8: "2rem",
+        12: "3rem",
+    },
+    typography: {
+        fontFamily: {
+            display: '"Space Grotesk", "Inter", system-ui, -apple-system, sans-serif',
+            body: '"Inter", "SF Pro Text", system-ui, -apple-system, sans-serif',
+            tabular: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
+            mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
+        },
+        fontSize: {
+            xs: "0.6875rem",
+            sm: "0.8125rem",
+            md: "0.9375rem",
+            lg: "1.0625rem",
+            xl: "1.25rem",
+            "2xl": "1.5rem",
+            "3xl": "2rem",
+        },
+        fontWeight: {
+            regular: "400",
+            medium: "500",
+            bold: "700",
+        },
+        lineHeight: {
+            tight: "1.1",
+            normal: "1.35",
+            relaxed: "1.55",
+        },
+        letterSpacing: {
+            tight: "-0.01em",
+            normal: "0",
+            wide: "0.06em",
+            caps: "0.18em",
+        },
+    },
+    elevation: {
+        rest: "0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 0 rgba(27, 196, 220, 0.15)",
+        hover: "0 0 0 1px rgba(27, 196, 220, 0.4), 0 6px 16px rgba(27, 196, 220, 0.35)",
+        lifted: "0 0 0 2px rgba(27, 196, 220, 0.6), 0 14px 28px rgba(27, 196, 220, 0.45)",
+        overlay: "0 20px 60px rgba(0, 0, 0, 0.7)",
+        inset: "inset 0 0 0 1px rgba(27, 196, 220, 0.18)",
+    },
+    motion: {
+        duration: {
+            fast: "60ms",
+            normal: "120ms",
+            slow: "220ms",
+            ambient: "1400ms",
+        },
+        easing: {
+            out: "cubic-bezier(0.22, 1, 0.36, 1)",
+            in: "cubic-bezier(0.36, 0, 1, 0.36)",
+            inOut: "cubic-bezier(0.7, 0, 0.3, 1)",
+            spring: "cubic-bezier(0.32, 1.6, 0.6, 1)",
+        },
+        reducedMotion: "false",
+    },
+    player: [
+        { solid: "#1bc4dc", soft: "rgba(27, 196, 220, 0.2)", on: "#070912" },
+        { solid: "#ff2891", soft: "rgba(255, 40, 145, 0.2)", on: "#ffffff" },
+        { solid: "#0fc171", soft: "rgba(15, 193, 113, 0.2)", on: "#070912" },
+        { solid: "#fbc739", soft: "rgba(251, 199, 57, 0.2)", on: "#070912" },
+        { solid: "#9b59ff", soft: "rgba(155, 89, 255, 0.2)", on: "#ffffff" },
+        { solid: "#ff7b3a", soft: "rgba(255, 123, 58, 0.2)", on: "#070912" },
+    ],
+    component: {
+        board: {
+            frameBorder: "#1bc4dc",
+            frameBackground: "#0a0e1d",
+            hoverRing: "#ff2891",
+            eligibleHint: "rgba(27, 196, 220, 0.55)",
+        },
+        card: {
+            border: "#1bc4dc",
+            backBorder: "#ff2891",
+            backBackground: "#161b27",
+            selectedRing: "#ff2891",
+        },
+        playerCard: {
+            activeBackground: "rgba(27, 196, 220, 0.18)",
+            activeBorder: "#1bc4dc",
+            activeGlow: "rgba(27, 196, 220, 0.5)",
+            youBadgeBackground: "rgba(27, 196, 220, 0.22)",
+            youBadgeForeground: "#aef1fb",
+        },
+        toast: {
+            successBackground: "#0fc171",
+            errorBackground: "#e41e1e",
+            infoBackground: "#1bc4dc",
+            foreground: "#070912",
+        },
+    },
+};

package/dist/theme/presets/studio.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from "../tokens.js";
+/**
+ * `studio` — clean monochrome theme for prototypes and design reviews.
+ *
+ * Visual identity: pure white surfaces, near-black text, single brand
+ * accent, generous whitespace. Designed for screenshot-friendly demos
+ * and games where the board art does the storytelling.
+ */
+export declare const studioTheme: Theme;
+//# sourceMappingURL=studio.d.ts.map

package/dist/theme/presets/studio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../../../src/theme/presets/studio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KA2PzB,CAAC"}

package/dist/theme/presets/studio.js

@@ -0,0 +1,257 @@
+/**
+ * `studio` — clean monochrome theme for prototypes and design reviews.
+ *
+ * Visual identity: pure white surfaces, near-black text, single brand
+ * accent, generous whitespace. Designed for screenshot-friendly demos
+ * and games where the board art does the storytelling.
+ */
+export const studioTheme = {
+    meta: {
+        id: "studio",
+        name: "Studio",
+        mode: "light",
+    },
+    color: {
+        neutral: {
+            50: "#ffffff",
+            100: "#f5f5f5",
+            200: "#e5e5e5",
+            400: "#a3a3a3",
+            600: "#525252",
+            800: "#262626",
+            950: "#0a0a0a",
+        },
+        brand: {
+            50: "#eef2ff",
+            100: "#e0e7ff",
+            200: "#c7d2fe",
+            400: "#818cf8",
+            600: "#4f46e5",
+            800: "#3730a3",
+            950: "#1e1b4b",
+        },
+        accent: {
+            50: "#fdf4ff",
+            100: "#fae8ff",
+            200: "#f5d0fe",
+            400: "#e879f9",
+            600: "#a21caf",
+            800: "#701a75",
+            950: "#4a044e",
+        },
+        success: {
+            50: "#ecfdf5",
+            100: "#d1fae5",
+            200: "#a7f3d0",
+            400: "#34d399",
+            600: "#059669",
+            800: "#065f46",
+            950: "#022c22",
+        },
+        warning: {
+            50: "#fffbeb",
+            100: "#fef3c7",
+            200: "#fde68a",
+            400: "#facc15",
+            600: "#ca8a04",
+            800: "#854d0e",
+            950: "#422006",
+        },
+        danger: {
+            50: "#fef2f2",
+            100: "#fee2e2",
+            200: "#fecaca",
+            400: "#f87171",
+            600: "#dc2626",
+            800: "#991b1b",
+            950: "#450a0a",
+        },
+        info: {
+            50: "#eff6ff",
+            100: "#dbeafe",
+            200: "#bfdbfe",
+            400: "#60a5fa",
+            600: "#2563eb",
+            800: "#1e40af",
+            950: "#172554",
+        },
+    },
+    semantic: {
+        surface: {
+            app: "#fafafa",
+            board: "#ffffff",
+            hud: "#ffffff",
+            card: "#ffffff",
+            sheet: "#ffffff",
+            overlay: "rgba(10, 10, 10, 0.4)",
+            inset: "#f5f5f5",
+        },
+        text: {
+            primary: "#0a0a0a",
+            muted: "#525252",
+            onIntent: "#ffffff",
+            accent: "#4f46e5",
+            disabled: "#a3a3a3",
+        },
+        border: {
+            subtle: "#f5f5f5",
+            default: "#e5e5e5",
+            strong: "#a3a3a3",
+            focus: "#4f46e5",
+        },
+        intent: {
+            primary: {
+                solid: "#0a0a0a",
+                on: "#ffffff",
+                soft: "#f5f5f5",
+                onSoft: "#0a0a0a",
+                border: "#0a0a0a",
+            },
+            secondary: {
+                solid: "#ffffff",
+                on: "#0a0a0a",
+                soft: "#f5f5f5",
+                onSoft: "#0a0a0a",
+                border: "#e5e5e5",
+            },
+            success: {
+                solid: "#059669",
+                on: "#ffffff",
+                soft: "#d1fae5",
+                onSoft: "#065f46",
+                border: "#34d399",
+            },
+            danger: {
+                solid: "#dc2626",
+                on: "#ffffff",
+                soft: "#fee2e2",
+                onSoft: "#991b1b",
+                border: "#f87171",
+            },
+            warning: {
+                solid: "#ca8a04",
+                on: "#ffffff",
+                soft: "#fef3c7",
+                onSoft: "#854d0e",
+                border: "#facc15",
+            },
+            info: {
+                solid: "#2563eb",
+                on: "#ffffff",
+                soft: "#dbeafe",
+                onSoft: "#1e40af",
+                border: "#60a5fa",
+            },
+        },
+    },
+    radius: {
+        none: "0px",
+        sm: "4px",
+        md: "8px",
+        lg: "12px",
+        hud: "16px",
+        pill: "9999px",
+    },
+    space: {
+        0: "0",
+        0.5: "0.125rem",
+        1: "0.25rem",
+        1.5: "0.375rem",
+        2: "0.5rem",
+        3: "0.75rem",
+        4: "1rem",
+        6: "1.5rem",
+        8: "2rem",
+        12: "3rem",
+    },
+    typography: {
+        fontFamily: {
+            display: '"Inter", "SF Pro Display", system-ui, -apple-system, sans-serif',
+            body: '"Inter", "SF Pro Text", system-ui, -apple-system, sans-serif',
+            tabular: '"Inter", "SF Pro Text", system-ui, sans-serif',
+            mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
+        },
+        fontSize: {
+            xs: "0.75rem",
+            sm: "0.875rem",
+            md: "1rem",
+            lg: "1.125rem",
+            xl: "1.25rem",
+            "2xl": "1.5rem",
+            "3xl": "2rem",
+        },
+        fontWeight: {
+            regular: "400",
+            medium: "500",
+            bold: "600",
+        },
+        lineHeight: {
+            tight: "1.2",
+            normal: "1.5",
+            relaxed: "1.65",
+        },
+        letterSpacing: {
+            tight: "-0.015em",
+            normal: "0",
+            wide: "0.02em",
+            caps: "0.08em",
+        },
+    },
+    elevation: {
+        rest: "0 1px 2px rgba(10, 10, 10, 0.05)",
+        hover: "0 4px 8px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04)",
+        lifted: "0 12px 24px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10, 10, 10, 0.06)",
+        overlay: "0 24px 48px rgba(10, 10, 10, 0.18)",
+        inset: "inset 0 1px 0 rgba(10, 10, 10, 0.04)",
+    },
+    motion: {
+        duration: {
+            fast: "100ms",
+            normal: "180ms",
+            slow: "300ms",
+            ambient: "2400ms",
+        },
+        easing: {
+            out: "cubic-bezier(0.16, 1, 0.3, 1)",
+            in: "cubic-bezier(0.4, 0, 1, 0.4)",
+            inOut: "cubic-bezier(0.65, 0, 0.35, 1)",
+            spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        },
+        reducedMotion: "false",
+    },
+    player: [
+        { solid: "#4f46e5", soft: "#e0e7ff", on: "#ffffff" },
+        { solid: "#dc2626", soft: "#fee2e2", on: "#ffffff" },
+        { solid: "#059669", soft: "#d1fae5", on: "#ffffff" },
+        { solid: "#ca8a04", soft: "#fef3c7", on: "#ffffff" },
+        { solid: "#a21caf", soft: "#fae8ff", on: "#ffffff" },
+        { solid: "#0891b2", soft: "#cffafe", on: "#ffffff" },
+    ],
+    component: {
+        board: {
+            frameBorder: "#e5e5e5",
+            frameBackground: "#ffffff",
+            hoverRing: "#4f46e5",
+            eligibleHint: "rgba(79, 70, 229, 0.4)",
+        },
+        card: {
+            border: "#e5e5e5",
+            backBorder: "#0a0a0a",
+            backBackground: "#0a0a0a",
+            selectedRing: "#4f46e5",
+        },
+        playerCard: {
+            activeBackground: "#f5f5f5",
+            activeBorder: "#0a0a0a",
+            activeGlow: "rgba(10, 10, 10, 0.06)",
+            youBadgeBackground: "#0a0a0a",
+            youBadgeForeground: "#ffffff",
+        },
+        toast: {
+            successBackground: "#059669",
+            errorBackground: "#dc2626",
+            infoBackground: "#2563eb",
+            foreground: "#ffffff",
+        },
+    },
+};

package/dist/theme/presets/tabletop.d.ts

@@ -0,0 +1,15 @@
+import type { Theme } from "../tokens.js";
+/**
+ * `tabletop` — the default Dreamboard theme.
+ *
+ * Visual identity: warm paper backgrounds, deep ink-blue brand,
+ * confident type, rounded but disciplined corners. Designed to feel
+ * like a polished hobby-game client (Splendor digital, modern Catan
+ * apps) without leaning into a specific game's IP.
+ *
+ * Picked deliberately for the default: a board game UI sitting on
+ * cool grey or pure white reads as "spreadsheet"; warm parchment
+ * cues "play" without sliding into kitsch.
+ */
+export declare const tabletopTheme: Theme;
+//# sourceMappingURL=tabletop.d.ts.map

package/dist/theme/presets/tabletop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabletop.d.ts","sourceRoot":"","sources":["../../../src/theme/presets/tabletop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,KA2P3B,CAAC"}