@puzzle-ui/theme 0.0.0-stage → 0.2.0

package/dist/types.d.cts

@@ -0,0 +1,185 @@
+import { COLOR_THEMES } from "./constants.cjs";
+import { DeepPartial } from "@puzzle-ui/core";
+export type ThemeMode = "light" | "dark" | "system";
+export type TypographyStyle = "display1" | "display2" | "headline1" | "headline2" | "headline3" | "headline4" | "subtitle1" | "subtitle2" | "body1" | "body2" | "button" | "caption" | "overline";
+export type ThemeTypographyFontRole = "heading" | "body" | "accent";
+export type ThemeTypographyRoleTokens = {
+  font: ThemeTypographyFontRole;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+};
+export type ThemeColorSchemeTokens = {
+  background: string;
+  surface: string;
+  surfaceElevated: string;
+  surfaceSunken: string;
+  text: string;
+  textMuted: string;
+  textSubtle: string;
+  border: string;
+  borderStrong: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  ring: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  danger: string;
+  dangerForeground: string;
+  info: string;
+  infoForeground: string;
+};
+export type ThemeTokens = {
+  colorSchemes: {
+    light: ThemeColorSchemeTokens;
+    dark: ThemeColorSchemeTokens;
+  };
+  typography: {
+    fontSize: {
+      xs: string;
+      sm: string;
+      base: string;
+      lg: string;
+      xl: string;
+      "2xl": string;
+      "3xl": string;
+      "4xl": string;
+      "5xl": string;
+      "6xl": string;
+    };
+    fontWeight: {
+      normal: string;
+      medium: string;
+      semibold: string;
+      bold: string;
+      extrabold: string;
+    };
+    lineHeight: {
+      none: string;
+      tight: string;
+      snug: string;
+      normal: string;
+      relaxed: string;
+      loose: string;
+    };
+    letterSpacing: {
+      tighter: string;
+      tight: string;
+      normal: string;
+      wide: string;
+      wider: string;
+      widest: string;
+    };
+    fontGap: {
+      headingStackGap: string;
+      headingParagraphGap: string;
+      paragraphGap: string;
+      sectionGap: string;
+    };
+    /**
+     * Named typography roles.
+     *
+     * Optional to keep existing user-defined theme objects backwards
+     * compatible. The resolver supplies defaults for every role.
+     */
+    roles?: Partial<Record<TypographyStyle, ThemeTypographyRoleTokens>>;
+  };
+  spacing: {
+    0: string;
+    px: string;
+    "0.5": string;
+    1: string;
+    "1.5": string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+  };
+  radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    full: string;
+  };
+  shadows: {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+  elevation: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+    24: string;
+  };
+  borders: {
+    width: string;
+    widthStrong: string;
+    style: string;
+  };
+  breakpoints: {
+    tablet: string;
+    desktop: string;
+    hd: string;
+  };
+  layout: {
+    container: string;
+    content: string;
+    prose: string;
+  };
+  overlays: {
+    backdrop: string;
+    backdropBlur: string;
+  };
+  motion: {
+    fast: string;
+    normal: string;
+    slow: string;
+    easingStandard: string;
+    easingIn: string;
+    easingOut: string;
+  };
+  zIndex: {
+    base: string;
+    dropdown: string;
+    sticky: string;
+    navigation: string;
+    overlay: string;
+    modal: string;
+    popover: string;
+    toast: string;
+    tooltip: string;
+  };
+};
+export type ColorTheme = {
+  light: ThemeTokens["colorSchemes"]["light"];
+  dark: Pick<ThemeTokens["colorSchemes"]["dark"], "primary" | "primaryForeground" | "secondary" | "secondaryForeground" | "accent" | "accentForeground">;
+};
+export type ColorThemes = keyof typeof COLOR_THEMES;
+export type ThemeTokenOverrides = DeepPartial<ThemeTokens>;

package/dist/types.d.ts

@@ -0,0 +1,185 @@
+import { COLOR_THEMES } from "./constants.js";
+import { DeepPartial } from "@puzzle-ui/core";
+export type ThemeMode = "light" | "dark" | "system";
+export type TypographyStyle = "display1" | "display2" | "headline1" | "headline2" | "headline3" | "headline4" | "subtitle1" | "subtitle2" | "body1" | "body2" | "button" | "caption" | "overline";
+export type ThemeTypographyFontRole = "heading" | "body" | "accent";
+export type ThemeTypographyRoleTokens = {
+  font: ThemeTypographyFontRole;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+};
+export type ThemeColorSchemeTokens = {
+  background: string;
+  surface: string;
+  surfaceElevated: string;
+  surfaceSunken: string;
+  text: string;
+  textMuted: string;
+  textSubtle: string;
+  border: string;
+  borderStrong: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  ring: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  danger: string;
+  dangerForeground: string;
+  info: string;
+  infoForeground: string;
+};
+export type ThemeTokens = {
+  colorSchemes: {
+    light: ThemeColorSchemeTokens;
+    dark: ThemeColorSchemeTokens;
+  };
+  typography: {
+    fontSize: {
+      xs: string;
+      sm: string;
+      base: string;
+      lg: string;
+      xl: string;
+      "2xl": string;
+      "3xl": string;
+      "4xl": string;
+      "5xl": string;
+      "6xl": string;
+    };
+    fontWeight: {
+      normal: string;
+      medium: string;
+      semibold: string;
+      bold: string;
+      extrabold: string;
+    };
+    lineHeight: {
+      none: string;
+      tight: string;
+      snug: string;
+      normal: string;
+      relaxed: string;
+      loose: string;
+    };
+    letterSpacing: {
+      tighter: string;
+      tight: string;
+      normal: string;
+      wide: string;
+      wider: string;
+      widest: string;
+    };
+    fontGap: {
+      headingStackGap: string;
+      headingParagraphGap: string;
+      paragraphGap: string;
+      sectionGap: string;
+    };
+    /**
+     * Named typography roles.
+     *
+     * Optional to keep existing user-defined theme objects backwards
+     * compatible. The resolver supplies defaults for every role.
+     */
+    roles?: Partial<Record<TypographyStyle, ThemeTypographyRoleTokens>>;
+  };
+  spacing: {
+    0: string;
+    px: string;
+    "0.5": string;
+    1: string;
+    "1.5": string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+  };
+  radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    full: string;
+  };
+  shadows: {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+  elevation: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+    24: string;
+  };
+  borders: {
+    width: string;
+    widthStrong: string;
+    style: string;
+  };
+  breakpoints: {
+    tablet: string;
+    desktop: string;
+    hd: string;
+  };
+  layout: {
+    container: string;
+    content: string;
+    prose: string;
+  };
+  overlays: {
+    backdrop: string;
+    backdropBlur: string;
+  };
+  motion: {
+    fast: string;
+    normal: string;
+    slow: string;
+    easingStandard: string;
+    easingIn: string;
+    easingOut: string;
+  };
+  zIndex: {
+    base: string;
+    dropdown: string;
+    sticky: string;
+    navigation: string;
+    overlay: string;
+    modal: string;
+    popover: string;
+    toast: string;
+    tooltip: string;
+  };
+};
+export type ColorTheme = {
+  light: ThemeTokens["colorSchemes"]["light"];
+  dark: Pick<ThemeTokens["colorSchemes"]["dark"], "primary" | "primaryForeground" | "secondary" | "secondaryForeground" | "accent" | "accentForeground">;
+};
+export type ColorThemes = keyof typeof COLOR_THEMES;
+export type ThemeTokenOverrides = DeepPartial<ThemeTokens>;

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@puzzle-ui/theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Theme components for Puzzle",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./components-context": {
+      "import": {
+        "types": "./dist/components-context.d.ts",
+        "default": "./dist/components-context.js"
+      },
+      "require": {
+        "types": "./dist/components-context.d.cts",
+        "default": "./dist/components-context.cjs"
+      }
+    },
+    "./scope-context": {
+      "import": {
+        "types": "./dist/scope-context.d.ts",
+        "default": "./dist/scope-context.js"
+      },
+      "require": {
+        "types": "./dist/scope-context.d.cts",
+        "default": "./dist/scope-context.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "vitest": "bunx vitest run",
+    "vitest:watch": "bunx vitest",
+    "clean": "rm -rf dist",
+    "prepack": "tsdown"
+  },
+  "dependencies": {
+    "@puzzle-ui/core": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tsdown/css": "^0.23.1",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsdown": "^0.23.1",
+    "typescript": "^6.0.3",
+    "vitest": "latest"
+  }
+}