@dreamboard-games/sdk 0.2.1-alpha.0 → 0.3.0-alpha.1

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

@@ -1,261 +0,0 @@
-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

@@ -1,266 +0,0 @@
-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",
-    },
-  },
-};