@dreamboard-games/ui-sdk 0.0.41

package/src/theme/index.ts

@@ -0,0 +1,61 @@
+/**
+ * Public theme surface for `@dreamboard/ui-sdk`.
+ *
+ * Authors who only consume the SDK never need to import from
+ * sub-modules — `<ThemeProvider>`, `useTheme()`, and the preset ids
+ * are the entire public API. Type-level exports cover advanced use
+ * (custom themes, deep overrides) without leaking internal token shape
+ * surfaces (CSS-var serializer, derive helpers) that may move.
+ *
+ * Module entry order is import-friendly: tokens (types) before
+ * presets (values) before provider (consumes both).
+ */
+
+export type {
+  ColorRamp,
+  ComponentTokens,
+  Elevation,
+  FoundationColor,
+  IntentColor,
+  Motion,
+  PlayerColor,
+  Radius,
+  SemanticColor,
+  Space,
+  Theme,
+  ThemeMeta,
+  ThemeOverride,
+  Typography,
+} from "./tokens.js";
+
+export { mergeTheme } from "./tokens.js";
+
+export { tabletopTheme } from "./presets/tabletop.js";
+export { arcadeTheme } from "./presets/arcade.js";
+export { studioTheme } from "./presets/studio.js";
+
+export {
+  ThemeProvider,
+  resolveTheme,
+  getThemePreset,
+  useTheme,
+  useThemeCssVars,
+  type ThemeContextValue,
+  type ThemePresetId,
+  type ThemeProviderProps,
+} from "./ThemeProvider.js";
+
+export { themeToCssVars, cssVar, cssVarOr } from "./css-vars.js";
+
+export {
+  buttonStyle,
+  chipStyle,
+  surfaceStyle,
+  intentForVariant,
+  playerColor,
+  motionDuration,
+  type ButtonSize,
+  type ButtonVariant,
+} from "./derive.js";
+
+export { useBoardTheme, deriveBoardTheme, type BoardTheme } from "./board.js";

package/src/theme/presets/arcade.ts

@@ -0,0 +1,261 @@
+import type { Theme } from "../tokens.js";
+
+/**
+ * `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: Theme = {
+  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/src/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",
+    },
+  },
+};