@dreamboard-games/sdk 0.2.0

package/src/ui/theme/presets/studio.ts

@@ -0,0 +1,261 @@
+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 const studioTheme: Theme = {
+  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/src/ui/theme/presets/tabletop.ts

@@ -0,0 +1,266 @@
+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 const tabletopTheme: Theme = {
+  meta: {
+    id: "tabletop",
+    name: "Tabletop",
+    mode: "light",
+  },
+  color: {
+    neutral: {
+      50: "#fbf8f1",
+      100: "#f4ecd8",
+      200: "#e7dcc1",
+      400: "#a89c84",
+      600: "#5f5547",
+      800: "#2f2a22",
+      950: "#15120d",
+    },
+    brand: {
+      50: "#eef3fb",
+      100: "#d3e0f3",
+      200: "#a7c1e7",
+      400: "#5780bf",
+      600: "#2d5da1",
+      800: "#1a3c6b",
+      950: "#0d1f37",
+    },
+    accent: {
+      50: "#fff5e0",
+      100: "#ffe5b3",
+      200: "#fcd07a",
+      400: "#f0a738",
+      600: "#c87a16",
+      800: "#7e4a08",
+      950: "#3c2103",
+    },
+    success: {
+      50: "#e8f6ec",
+      100: "#c4ecd0",
+      200: "#8fd6a3",
+      400: "#3fae62",
+      600: "#1f7d3e",
+      800: "#0d4a23",
+      950: "#062213",
+    },
+    warning: {
+      50: "#fff5dc",
+      100: "#ffe7a8",
+      200: "#fad164",
+      400: "#dca41a",
+      600: "#9c6f06",
+      800: "#5b4002",
+      950: "#2b1d00",
+    },
+    danger: {
+      50: "#fdecec",
+      100: "#f9c7c7",
+      200: "#f08e8e",
+      400: "#d53f3f",
+      600: "#a31d1d",
+      800: "#5e0d0d",
+      950: "#2a0404",
+    },
+    info: {
+      50: "#e6f5fb",
+      100: "#bfe3f4",
+      200: "#7ec5e6",
+      400: "#2f8fc4",
+      600: "#0d5e8a",
+      800: "#073650",
+      950: "#021a26",
+    },
+  },
+  semantic: {
+    surface: {
+      app: "#f6efe0",
+      board: "#1a3552",
+      hud: "#fbf8f1",
+      card: "#ffffff",
+      sheet: "#fbf8f1",
+      overlay: "rgba(15, 23, 42, 0.55)",
+      inset: "#f4ecd8",
+    },
+    text: {
+      primary: "#2f2a22",
+      muted: "#5f5547",
+      onIntent: "#ffffff",
+      accent: "#1a3c6b",
+      disabled: "#a89c84",
+    },
+    border: {
+      subtle: "#e7dcc1",
+      default: "#a89c84",
+      strong: "#5f5547",
+      focus: "#2d5da1",
+    },
+    intent: {
+      primary: {
+        solid: "#2d5da1",
+        on: "#ffffff",
+        soft: "#d3e0f3",
+        onSoft: "#1a3c6b",
+        border: "#1a3c6b",
+      },
+      secondary: {
+        solid: "#fbf8f1",
+        on: "#2f2a22",
+        soft: "#f4ecd8",
+        onSoft: "#2f2a22",
+        border: "#a89c84",
+      },
+      success: {
+        solid: "#1f7d3e",
+        on: "#ffffff",
+        soft: "#c4ecd0",
+        onSoft: "#0d4a23",
+        border: "#0d4a23",
+      },
+      danger: {
+        solid: "#a31d1d",
+        on: "#ffffff",
+        soft: "#f9c7c7",
+        onSoft: "#5e0d0d",
+        border: "#5e0d0d",
+      },
+      warning: {
+        solid: "#dca41a",
+        on: "#2f2a22",
+        soft: "#ffe7a8",
+        onSoft: "#5b4002",
+        border: "#9c6f06",
+      },
+      info: {
+        solid: "#0d5e8a",
+        on: "#ffffff",
+        soft: "#bfe3f4",
+        onSoft: "#073650",
+        border: "#073650",
+      },
+    },
+  },
+  radius: {
+    none: "0px",
+    sm: "6px",
+    md: "10px",
+    lg: "16px",
+    hud: "20px",
+    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:
+        '"Fraunces", "Iowan Old Style", "Source Serif Pro", "Georgia", 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.15",
+      normal: "1.4",
+      relaxed: "1.6",
+    },
+    letterSpacing: {
+      tight: "-0.01em",
+      normal: "0",
+      wide: "0.04em",
+      caps: "0.14em",
+    },
+  },
+  elevation: {
+    rest: "0 1px 0 rgba(15, 18, 13, 0.06), 0 2px 6px rgba(15, 18, 13, 0.05)",
+    hover: "0 4px 0 rgba(15, 18, 13, 0.05), 0 8px 18px rgba(15, 18, 13, 0.12)",
+    lifted:
+      "0 12px 0 rgba(15, 18, 13, 0.05), 0 18px 36px rgba(15, 18, 13, 0.18)",
+    overlay: "0 24px 64px rgba(15, 18, 13, 0.32)",
+    inset: "inset 0 1px 0 rgba(15, 18, 13, 0.08)",
+  },
+  motion: {
+    duration: {
+      fast: "80ms",
+      normal: "160ms",
+      slow: "280ms",
+      ambient: "1800ms",
+    },
+    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: "#d04848", soft: "#fcdedd", on: "#ffffff" },
+    { solid: "#2d5da1", soft: "#d3e0f3", on: "#ffffff" },
+    { solid: "#1f7d3e", soft: "#c4ecd0", on: "#ffffff" },
+    { solid: "#c87a16", soft: "#ffe5b3", on: "#2f2a22" },
+    { solid: "#7d4a8a", soft: "#e6d6ee", on: "#ffffff" },
+    { solid: "#0d5e8a", soft: "#bfe3f4", on: "#ffffff" },
+  ],
+  component: {
+    board: {
+      frameBorder: "#a89c84",
+      frameBackground: "#1a3552",
+      hoverRing: "#f0a738",
+      eligibleHint: "rgba(240, 167, 56, 0.55)",
+    },
+    card: {
+      border: "#2f2a22",
+      backBorder: "#1a3c6b",
+      backBackground: "#2d5da1",
+      selectedRing: "#d04848",
+    },
+    playerCard: {
+      activeBackground: "#fff5e0",
+      activeBorder: "#f0a738",
+      activeGlow: "rgba(240, 167, 56, 0.32)",
+      youBadgeBackground: "#d3e0f3",
+      youBadgeForeground: "#1a3c6b",
+    },
+    toast: {
+      successBackground: "#1f7d3e",
+      errorBackground: "#a31d1d",
+      infoBackground: "#0d5e8a",
+      foreground: "#ffffff",
+    },
+  },
+};