@puzzle-ui/theme 0.0.0-stage → 0.2.0

package/dist/fonts/typography.cjs

@@ -0,0 +1,172 @@
+// src/fonts/typography.ts
+const typographyDefaults = {
+	display1: {
+		size: 80,
+		lineHeight: 1.05,
+		weight: 300,
+		letterSpacing: -1.5,
+		font: "heading",
+		responsive: {
+			min: 40,
+			max: 80,
+			minViewport: 360,
+			maxViewport: 1440
+		}
+	},
+	display2: {
+		size: 60,
+		lineHeight: 1.1,
+		weight: 300,
+		letterSpacing: -.5,
+		font: "heading",
+		responsive: {
+			min: 36,
+			max: 60,
+			minViewport: 360,
+			maxViewport: 1200
+		}
+	},
+	headline1: {
+		size: 48,
+		lineHeight: 1.15,
+		weight: 400,
+		letterSpacing: -.5,
+		font: "heading",
+		responsive: {
+			min: 32,
+			max: 48,
+			minViewport: 360,
+			maxViewport: 1200
+		}
+	},
+	headline2: {
+		size: 36,
+		lineHeight: 1.2,
+		weight: 400,
+		letterSpacing: -.25,
+		font: "heading",
+		responsive: {
+			min: 28,
+			max: 36,
+			minViewport: 360,
+			maxViewport: 1024
+		}
+	},
+	headline3: {
+		size: 28,
+		lineHeight: 1.25,
+		weight: 400,
+		letterSpacing: 0,
+		font: "heading",
+		responsive: {
+			min: 22,
+			max: 28,
+			minViewport: 360,
+			maxViewport: 900
+		}
+	},
+	headline4: {
+		size: 20,
+		lineHeight: 1.3,
+		weight: 500,
+		letterSpacing: .15,
+		font: "heading"
+	},
+	subtitle1: {
+		size: 16,
+		lineHeight: 1.5,
+		weight: 500,
+		letterSpacing: .15,
+		font: "heading"
+	},
+	subtitle2: {
+		size: 14,
+		lineHeight: 1.43,
+		weight: 500,
+		letterSpacing: .1,
+		font: "heading"
+	},
+	body1: {
+		size: 16,
+		lineHeight: 1.5,
+		weight: 400,
+		letterSpacing: .5,
+		font: "body"
+	},
+	body2: {
+		size: 14,
+		lineHeight: 1.43,
+		weight: 400,
+		letterSpacing: .25,
+		font: "body"
+	},
+	button: {
+		size: 14,
+		lineHeight: 1.43,
+		weight: 500,
+		letterSpacing: .5,
+		font: "body"
+	},
+	caption: {
+		size: 12,
+		lineHeight: 1.4,
+		weight: 400,
+		letterSpacing: .4,
+		font: "body"
+	},
+	overline: {
+		size: 10,
+		lineHeight: 1.6,
+		weight: 500,
+		letterSpacing: 1,
+		font: "body"
+	}
+};
+const createFluidFontSize = ({ min, max, minViewport = 360, maxViewport = 1440 }) => {
+	const minRem = min / 16;
+	const maxRem = max / 16;
+	const slope = (max - min) / (maxViewport - minViewport) * 100;
+	return `clamp(${minRem}rem, ${((min - slope * minViewport / 100) / 16).toFixed(4)}rem + ${slope.toFixed(4)}vw, ${maxRem}rem)`;
+};
+const fontSizeScaleByRole = {
+	headline4: "xl",
+	subtitle1: "base",
+	subtitle2: "sm",
+	body1: "base",
+	body2: "sm",
+	button: "sm",
+	caption: "xs"
+};
+const fontWeightTokenByValue = /* @__PURE__ */ new Map([
+	[400, "normal"],
+	[500, "medium"],
+	[600, "semibold"],
+	[700, "bold"],
+	[800, "extrabold"]
+]);
+const lineHeightTokenByValue = /* @__PURE__ */ new Map([
+	[1, "none"],
+	[1.15, "tight"],
+	[1.3, "snug"],
+	[1.5, "normal"],
+	[1.625, "relaxed"],
+	[2, "loose"]
+]);
+const createTypographyRole = (name, typography) => {
+	const fontSizeScale = fontSizeScaleByRole[name];
+	const fontWeightToken = fontWeightTokenByValue.get(typography.weight);
+	const lineHeightToken = lineHeightTokenByValue.get(typography.lineHeight);
+	return {
+		font: typography.font,
+		fontSize: fontSizeScale !== void 0 ? `var(--puzzle-font-size-${fontSizeScale})` : "responsive" in typography ? createFluidFontSize(typography.responsive) : `${typography.size / 16}rem`,
+		fontWeight: fontWeightToken !== void 0 ? `var(--puzzle-font-weight-${fontWeightToken})` : String(typography.weight),
+		lineHeight: lineHeightToken !== void 0 ? `var(--puzzle-font-line-height-${lineHeightToken})` : String(typography.lineHeight),
+		letterSpacing: `${typography.letterSpacing / typography.size}em`
+	};
+};
+const DEFAULT_TYPOGRAPHY_ROLES = Object.fromEntries(Object.entries(typographyDefaults).map(([name, typography]) => [name, createTypographyRole(name, typography)]));
+exports.DEFAULT_TYPOGRAPHY_ROLES = DEFAULT_TYPOGRAPHY_ROLES;
+exports.createFluidFontSize = createFluidFontSize;
+exports.typographyDefaults = typographyDefaults;
+
+//# sourceMappingURL=typography.cjs.map

package/dist/fonts/typography.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.cjs","names":[],"sources":["../../src/fonts/typography.ts"],"sourcesContent":["import type { ThemeTypographyRoleTokens, TypographyStyle } from \"../types\";\n\nexport type { TypographyStyle } from \"../types\";\n\nexport const typographyDefaults = {\n  display1: {\n    size: 80,\n    lineHeight: 1.05,\n    weight: 300,\n    letterSpacing: -1.5,\n    font: \"heading\",\n    responsive: {\n      min: 40,\n      max: 80,\n      minViewport: 360,\n      maxViewport: 1440,\n    },\n  },\n  display2: {\n    size: 60,\n    lineHeight: 1.1,\n    weight: 300,\n    letterSpacing: -0.5,\n    font: \"heading\",\n    responsive: {\n      min: 36,\n      max: 60,\n      minViewport: 360,\n      maxViewport: 1200,\n    },\n  },\n  headline1: {\n    size: 48,\n    lineHeight: 1.15,\n    weight: 400,\n    letterSpacing: -0.5,\n    font: \"heading\",\n    responsive: {\n      min: 32,\n      max: 48,\n      minViewport: 360,\n      maxViewport: 1200,\n    },\n  },\n  headline2: {\n    size: 36,\n    lineHeight: 1.2,\n    weight: 400,\n    letterSpacing: -0.25,\n    font: \"heading\",\n    responsive: {\n      min: 28,\n      max: 36,\n      minViewport: 360,\n      maxViewport: 1024,\n    },\n  },\n  headline3: {\n    size: 28,\n    lineHeight: 1.25,\n    weight: 400,\n    letterSpacing: 0,\n    font: \"heading\",\n    responsive: {\n      min: 22,\n      max: 28,\n      minViewport: 360,\n      maxViewport: 900,\n    },\n  },\n  headline4: {\n    size: 20,\n    lineHeight: 1.3,\n    weight: 500,\n    letterSpacing: 0.15,\n    font: \"heading\",\n  },\n  subtitle1: {\n    size: 16,\n    lineHeight: 1.5,\n    weight: 500,\n    letterSpacing: 0.15,\n    font: \"heading\",\n  },\n  subtitle2: {\n    size: 14,\n    lineHeight: 1.43,\n    weight: 500,\n    letterSpacing: 0.1,\n    font: \"heading\",\n  },\n  body1: {\n    size: 16,\n    lineHeight: 1.5,\n    weight: 400,\n    letterSpacing: 0.5,\n    font: \"body\",\n  },\n  body2: {\n    size: 14,\n    lineHeight: 1.43,\n    weight: 400,\n    letterSpacing: 0.25,\n    font: \"body\",\n  },\n  button: {\n    size: 14,\n    lineHeight: 1.43,\n    weight: 500,\n    letterSpacing: 0.5,\n    font: \"body\",\n  },\n  caption: {\n    size: 12,\n    lineHeight: 1.4,\n    weight: 400,\n    letterSpacing: 0.4,\n    font: \"body\",\n  },\n  overline: {\n    size: 10,\n    lineHeight: 1.6,\n    weight: 500,\n    letterSpacing: 1,\n    font: \"body\",\n  },\n} as const;\n\nexport type ResponsiveFontSize = {\n  min: number;\n  max: number;\n  minViewport?: number;\n  maxViewport?: number;\n};\n\nexport const createFluidFontSize = ({\n  min,\n  max,\n  minViewport = 360,\n  maxViewport = 1440,\n}: ResponsiveFontSize): string => {\n  const minRem = min / 16;\n  const maxRem = max / 16;\n\n  const slope = ((max - min) / (maxViewport - minViewport)) * 100;\n  const intercept = (min - (slope * minViewport) / 100) / 16;\n\n  return `clamp(${minRem}rem, ${intercept.toFixed(4)}rem + ${slope.toFixed(4)}vw, ${maxRem}rem)`;\n};\n\nconst fontSizeScaleByRole: Partial<Record<TypographyStyle, string>> = {\n  headline4: \"xl\",\n  subtitle1: \"base\",\n  subtitle2: \"sm\",\n  body1: \"base\",\n  body2: \"sm\",\n  button: \"sm\",\n  caption: \"xs\",\n};\n\nconst fontWeightTokenByValue = new Map<number, string>([\n  [400, \"normal\"],\n  [500, \"medium\"],\n  [600, \"semibold\"],\n  [700, \"bold\"],\n  [800, \"extrabold\"],\n]);\n\nconst lineHeightTokenByValue = new Map<number, string>([\n  [1, \"none\"],\n  [1.15, \"tight\"],\n  [1.3, \"snug\"],\n  [1.5, \"normal\"],\n  [1.625, \"relaxed\"],\n  [2, \"loose\"],\n]);\n\nconst createTypographyRole = (\n  name: TypographyStyle,\n  typography: (typeof typographyDefaults)[TypographyStyle],\n): ThemeTypographyRoleTokens => {\n  const fontSizeScale = fontSizeScaleByRole[name];\n  const fontWeightToken = fontWeightTokenByValue.get(typography.weight);\n  const lineHeightToken = lineHeightTokenByValue.get(typography.lineHeight);\n\n  return {\n    font: typography.font,\n\n    fontSize:\n      fontSizeScale !== undefined\n        ? `var(--puzzle-font-size-${fontSizeScale})`\n        : \"responsive\" in typography\n          ? createFluidFontSize(typography.responsive)\n          : `${typography.size / 16}rem`,\n\n    fontWeight:\n      fontWeightToken !== undefined\n        ? `var(--puzzle-font-weight-${fontWeightToken})`\n        : String(typography.weight),\n\n    lineHeight:\n      lineHeightToken !== undefined\n        ? `var(--puzzle-font-line-height-${lineHeightToken})`\n        : String(typography.lineHeight),\n\n    letterSpacing: `${typography.letterSpacing / typography.size}em`,\n  };\n};\n\nexport const DEFAULT_TYPOGRAPHY_ROLES = Object.fromEntries(\n  Object.entries(typographyDefaults).map(([name, typography]) => [\n    name,\n    createTypographyRole(\n      name as TypographyStyle,\n      typography as (typeof typographyDefaults)[TypographyStyle],\n    ),\n  ]),\n) as Record<TypographyStyle, ThemeTypographyRoleTokens>;\n"],"mappings":"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"}

package/dist/fonts/typography.d.cts

@@ -0,0 +1,2 @@
+import { TypographyStyle } from "../types.cjs";
+export type { TypographyStyle };

package/dist/fonts/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyStyle } from "../types.js";
+export type { TypographyStyle };

package/dist/fonts/typography.js

@@ -0,0 +1,170 @@
+// src/fonts/typography.ts
+const typographyDefaults = {
+	display1: {
+		size: 80,
+		lineHeight: 1.05,
+		weight: 300,
+		letterSpacing: -1.5,
+		font: "heading",
+		responsive: {
+			min: 40,
+			max: 80,
+			minViewport: 360,
+			maxViewport: 1440
+		}
+	},
+	display2: {
+		size: 60,
+		lineHeight: 1.1,
+		weight: 300,
+		letterSpacing: -.5,
+		font: "heading",
+		responsive: {
+			min: 36,
+			max: 60,
+			minViewport: 360,
+			maxViewport: 1200
+		}
+	},
+	headline1: {
+		size: 48,
+		lineHeight: 1.15,
+		weight: 400,
+		letterSpacing: -.5,
+		font: "heading",
+		responsive: {
+			min: 32,
+			max: 48,
+			minViewport: 360,
+			maxViewport: 1200
+		}
+	},
+	headline2: {
+		size: 36,
+		lineHeight: 1.2,
+		weight: 400,
+		letterSpacing: -.25,
+		font: "heading",
+		responsive: {
+			min: 28,
+			max: 36,
+			minViewport: 360,
+			maxViewport: 1024
+		}
+	},
+	headline3: {
+		size: 28,
+		lineHeight: 1.25,
+		weight: 400,
+		letterSpacing: 0,
+		font: "heading",
+		responsive: {
+			min: 22,
+			max: 28,
+			minViewport: 360,
+			maxViewport: 900
+		}
+	},
+	headline4: {
+		size: 20,
+		lineHeight: 1.3,
+		weight: 500,
+		letterSpacing: .15,
+		font: "heading"
+	},
+	subtitle1: {
+		size: 16,
+		lineHeight: 1.5,
+		weight: 500,
+		letterSpacing: .15,
+		font: "heading"
+	},
+	subtitle2: {
+		size: 14,
+		lineHeight: 1.43,
+		weight: 500,
+		letterSpacing: .1,
+		font: "heading"
+	},
+	body1: {
+		size: 16,
+		lineHeight: 1.5,
+		weight: 400,
+		letterSpacing: .5,
+		font: "body"
+	},
+	body2: {
+		size: 14,
+		lineHeight: 1.43,
+		weight: 400,
+		letterSpacing: .25,
+		font: "body"
+	},
+	button: {
+		size: 14,
+		lineHeight: 1.43,
+		weight: 500,
+		letterSpacing: .5,
+		font: "body"
+	},
+	caption: {
+		size: 12,
+		lineHeight: 1.4,
+		weight: 400,
+		letterSpacing: .4,
+		font: "body"
+	},
+	overline: {
+		size: 10,
+		lineHeight: 1.6,
+		weight: 500,
+		letterSpacing: 1,
+		font: "body"
+	}
+};
+const createFluidFontSize = ({ min, max, minViewport = 360, maxViewport = 1440 }) => {
+	const minRem = min / 16;
+	const maxRem = max / 16;
+	const slope = (max - min) / (maxViewport - minViewport) * 100;
+	return `clamp(${minRem}rem, ${((min - slope * minViewport / 100) / 16).toFixed(4)}rem + ${slope.toFixed(4)}vw, ${maxRem}rem)`;
+};
+const fontSizeScaleByRole = {
+	headline4: "xl",
+	subtitle1: "base",
+	subtitle2: "sm",
+	body1: "base",
+	body2: "sm",
+	button: "sm",
+	caption: "xs"
+};
+const fontWeightTokenByValue = /* @__PURE__ */ new Map([
+	[400, "normal"],
+	[500, "medium"],
+	[600, "semibold"],
+	[700, "bold"],
+	[800, "extrabold"]
+]);
+const lineHeightTokenByValue = /* @__PURE__ */ new Map([
+	[1, "none"],
+	[1.15, "tight"],
+	[1.3, "snug"],
+	[1.5, "normal"],
+	[1.625, "relaxed"],
+	[2, "loose"]
+]);
+const createTypographyRole = (name, typography) => {
+	const fontSizeScale = fontSizeScaleByRole[name];
+	const fontWeightToken = fontWeightTokenByValue.get(typography.weight);
+	const lineHeightToken = lineHeightTokenByValue.get(typography.lineHeight);
+	return {
+		font: typography.font,
+		fontSize: fontSizeScale !== void 0 ? `var(--puzzle-font-size-${fontSizeScale})` : "responsive" in typography ? createFluidFontSize(typography.responsive) : `${typography.size / 16}rem`,
+		fontWeight: fontWeightToken !== void 0 ? `var(--puzzle-font-weight-${fontWeightToken})` : String(typography.weight),
+		lineHeight: lineHeightToken !== void 0 ? `var(--puzzle-font-line-height-${lineHeightToken})` : String(typography.lineHeight),
+		letterSpacing: `${typography.letterSpacing / typography.size}em`
+	};
+};
+const DEFAULT_TYPOGRAPHY_ROLES = Object.fromEntries(Object.entries(typographyDefaults).map(([name, typography]) => [name, createTypographyRole(name, typography)]));
+export { DEFAULT_TYPOGRAPHY_ROLES, createFluidFontSize, typographyDefaults };
+
+//# sourceMappingURL=typography.js.map

package/dist/fonts/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","names":[],"sources":["../../src/fonts/typography.ts"],"sourcesContent":["import type { ThemeTypographyRoleTokens, TypographyStyle } from \"../types\";\n\nexport type { TypographyStyle } from \"../types\";\n\nexport const typographyDefaults = {\n  display1: {\n    size: 80,\n    lineHeight: 1.05,\n    weight: 300,\n    letterSpacing: -1.5,\n    font: \"heading\",\n    responsive: {\n      min: 40,\n      max: 80,\n      minViewport: 360,\n      maxViewport: 1440,\n    },\n  },\n  display2: {\n    size: 60,\n    lineHeight: 1.1,\n    weight: 300,\n    letterSpacing: -0.5,\n    font: \"heading\",\n    responsive: {\n      min: 36,\n      max: 60,\n      minViewport: 360,\n      maxViewport: 1200,\n    },\n  },\n  headline1: {\n    size: 48,\n    lineHeight: 1.15,\n    weight: 400,\n    letterSpacing: -0.5,\n    font: \"heading\",\n    responsive: {\n      min: 32,\n      max: 48,\n      minViewport: 360,\n      maxViewport: 1200,\n    },\n  },\n  headline2: {\n    size: 36,\n    lineHeight: 1.2,\n    weight: 400,\n    letterSpacing: -0.25,\n    font: \"heading\",\n    responsive: {\n      min: 28,\n      max: 36,\n      minViewport: 360,\n      maxViewport: 1024,\n    },\n  },\n  headline3: {\n    size: 28,\n    lineHeight: 1.25,\n    weight: 400,\n    letterSpacing: 0,\n    font: \"heading\",\n    responsive: {\n      min: 22,\n      max: 28,\n      minViewport: 360,\n      maxViewport: 900,\n    },\n  },\n  headline4: {\n    size: 20,\n    lineHeight: 1.3,\n    weight: 500,\n    letterSpacing: 0.15,\n    font: \"heading\",\n  },\n  subtitle1: {\n    size: 16,\n    lineHeight: 1.5,\n    weight: 500,\n    letterSpacing: 0.15,\n    font: \"heading\",\n  },\n  subtitle2: {\n    size: 14,\n    lineHeight: 1.43,\n    weight: 500,\n    letterSpacing: 0.1,\n    font: \"heading\",\n  },\n  body1: {\n    size: 16,\n    lineHeight: 1.5,\n    weight: 400,\n    letterSpacing: 0.5,\n    font: \"body\",\n  },\n  body2: {\n    size: 14,\n    lineHeight: 1.43,\n    weight: 400,\n    letterSpacing: 0.25,\n    font: \"body\",\n  },\n  button: {\n    size: 14,\n    lineHeight: 1.43,\n    weight: 500,\n    letterSpacing: 0.5,\n    font: \"body\",\n  },\n  caption: {\n    size: 12,\n    lineHeight: 1.4,\n    weight: 400,\n    letterSpacing: 0.4,\n    font: \"body\",\n  },\n  overline: {\n    size: 10,\n    lineHeight: 1.6,\n    weight: 500,\n    letterSpacing: 1,\n    font: \"body\",\n  },\n} as const;\n\nexport type ResponsiveFontSize = {\n  min: number;\n  max: number;\n  minViewport?: number;\n  maxViewport?: number;\n};\n\nexport const createFluidFontSize = ({\n  min,\n  max,\n  minViewport = 360,\n  maxViewport = 1440,\n}: ResponsiveFontSize): string => {\n  const minRem = min / 16;\n  const maxRem = max / 16;\n\n  const slope = ((max - min) / (maxViewport - minViewport)) * 100;\n  const intercept = (min - (slope * minViewport) / 100) / 16;\n\n  return `clamp(${minRem}rem, ${intercept.toFixed(4)}rem + ${slope.toFixed(4)}vw, ${maxRem}rem)`;\n};\n\nconst fontSizeScaleByRole: Partial<Record<TypographyStyle, string>> = {\n  headline4: \"xl\",\n  subtitle1: \"base\",\n  subtitle2: \"sm\",\n  body1: \"base\",\n  body2: \"sm\",\n  button: \"sm\",\n  caption: \"xs\",\n};\n\nconst fontWeightTokenByValue = new Map<number, string>([\n  [400, \"normal\"],\n  [500, \"medium\"],\n  [600, \"semibold\"],\n  [700, \"bold\"],\n  [800, \"extrabold\"],\n]);\n\nconst lineHeightTokenByValue = new Map<number, string>([\n  [1, \"none\"],\n  [1.15, \"tight\"],\n  [1.3, \"snug\"],\n  [1.5, \"normal\"],\n  [1.625, \"relaxed\"],\n  [2, \"loose\"],\n]);\n\nconst createTypographyRole = (\n  name: TypographyStyle,\n  typography: (typeof typographyDefaults)[TypographyStyle],\n): ThemeTypographyRoleTokens => {\n  const fontSizeScale = fontSizeScaleByRole[name];\n  const fontWeightToken = fontWeightTokenByValue.get(typography.weight);\n  const lineHeightToken = lineHeightTokenByValue.get(typography.lineHeight);\n\n  return {\n    font: typography.font,\n\n    fontSize:\n      fontSizeScale !== undefined\n        ? `var(--puzzle-font-size-${fontSizeScale})`\n        : \"responsive\" in typography\n          ? createFluidFontSize(typography.responsive)\n          : `${typography.size / 16}rem`,\n\n    fontWeight:\n      fontWeightToken !== undefined\n        ? `var(--puzzle-font-weight-${fontWeightToken})`\n        : String(typography.weight),\n\n    lineHeight:\n      lineHeightToken !== undefined\n        ? `var(--puzzle-font-line-height-${lineHeightToken})`\n        : String(typography.lineHeight),\n\n    letterSpacing: `${typography.letterSpacing / typography.size}em`,\n  };\n};\n\nexport const DEFAULT_TYPOGRAPHY_ROLES = Object.fromEntries(\n  Object.entries(typographyDefaults).map(([name, typography]) => [\n    name,\n    createTypographyRole(\n      name as TypographyStyle,\n      typography as (typeof typographyDefaults)[TypographyStyle],\n    ),\n  ]),\n) as Record<TypographyStyle, ThemeTypographyRoleTokens>;\n"],"mappings":"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"}

package/dist/global.css

@@ -0,0 +1,135 @@
+:root:has(style[data-puzzle-global-styles]) *, :root:has(style[data-puzzle-global-styles]) :before, :root:has(style[data-puzzle-global-styles]) :after {
+  box-sizing: border-box;
+}
+
+:root:has(style[data-puzzle-global-styles]) {
+  color-scheme: light;
+}
+
+:root:has(style[data-puzzle-global-styles]) body {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-background, #f7f4ea);
+  font-family: var(--puzzle-font-family-body1, system-ui, sans-serif);
+  font-size: var(--puzzle-font-size-body1, 1rem);
+  font-weight: var(--puzzle-font-weight-body1, 400);
+  line-height: var(--puzzle-font-line-height-body1, 1.5);
+  letter-spacing: var(--puzzle-font-letter-spacing-body1, 0);
+  margin: 0;
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(input, textarea, select, button) {
+  font: inherit;
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(button) {
+  cursor: pointer;
+  font-family: var(--puzzle-font-family-button, inherit);
+  font-size: var(--puzzle-font-size-button, inherit);
+  font-weight: var(--puzzle-font-weight-button, inherit);
+  line-height: var(--puzzle-font-line-height-button, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-button, inherit);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
+  cursor: not-allowed;
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h1, h2, h3, h4, p) {
+  margin-block: 0;
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h1) {
+  font-family: var(--puzzle-font-family-headline1, inherit);
+  font-size: var(--puzzle-font-size-headline1, 2.25rem);
+  font-weight: var(--puzzle-font-weight-headline1, 700);
+  line-height: var(--puzzle-font-line-height-headline1, 1.15);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline1, -.025em);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h2) {
+  font-family: var(--puzzle-font-family-headline2, inherit);
+  font-size: var(--puzzle-font-size-headline2, 1.875rem);
+  font-weight: var(--puzzle-font-weight-headline2, 700);
+  line-height: var(--puzzle-font-line-height-headline2, 1.2);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline2, -.025em);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h3) {
+  font-family: var(--puzzle-font-family-headline3, inherit);
+  font-size: var(--puzzle-font-size-headline3, 1.5rem);
+  font-weight: var(--puzzle-font-weight-headline3, 600);
+  line-height: var(--puzzle-font-line-height-headline3, 1.3);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline3, 0);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h4) {
+  font-family: var(--puzzle-font-family-headline4, inherit);
+  font-size: var(--puzzle-font-size-headline4, 1.25rem);
+  font-weight: var(--puzzle-font-weight-headline4, 600);
+  line-height: var(--puzzle-font-line-height-headline4, 1.3);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline4, 0);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h1, h2, h3, h4) + :where(h1, h2, h3, h4) {
+  margin-block-start: var(--puzzle-font-gap-heading-stack-gap, .3em);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(h1, h2, h3, h4) + :where(p) {
+  margin-block-start: var(--puzzle-font-gap-heading-paragraph-gap, .65em);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(p) + :where(p) {
+  margin-block-start: var(--puzzle-font-gap-paragraph-gap, 1em);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(p) + :where(h1, h2, h3, h4) {
+  margin-block-start: var(--puzzle-font-gap-section-gap, 1.5em);
+}
+
+:where(:root:has(style[data-puzzle-global-styles])) :where(a) {
+  color: var(--puzzle-color-primary, #2563eb);
+}
+
+:root:has(style[data-puzzle-global-styles]) :where(:focus-visible) {
+  outline: 2px solid var(--puzzle-color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:has(style[data-puzzle-global-styles]) *, :root:has(style[data-puzzle-global-styles]) :before, :root:has(style[data-puzzle-global-styles]) :after {
+    scroll-behavior: auto !important;
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media (forced-colors: active) {
+  :root:has(style[data-puzzle-global-styles]) :where(:focus-visible) {
+    outline-offset: 2px;
+    outline: 2px solid highlight;
+  }
+
+  :root:has(style[data-puzzle-global-styles]) :where(a) {
+    color: linktext;
+  }
+
+  :root:has(style[data-puzzle-global-styles]) :where(button, input, textarea, select, [role="button"], [role="option"]) {
+    forced-color-adjust: auto;
+  }
+
+  :root:has(style[data-puzzle-global-styles]) :where(input, textarea, select) {
+    border-color: buttontext;
+  }
+
+  :root:has(style[data-puzzle-global-styles]) :where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
+    color: graytext;
+    border-color: graytext;
+  }
+
+  :root:has(style[data-puzzle-global-styles]) :where([aria-invalid="true"], [data-invalid="true"]) {
+    outline-color: mark;
+  }
+}

package/dist/index.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_google_font_url = require("./fonts/create-google-font-url.cjs");
+const require_google_font = require("./fonts/google-font.cjs");
+const require_theme = require("./theme.cjs");
+const require_breakpoints = require("./breakpoints.cjs");
+exports.BREAKPOINTS = require_breakpoints.BREAKPOINTS;
+exports.GoogleFont = require_google_font.GoogleFont;
+exports.Theme = require_theme.Theme;
+exports.createGoogleFontUrl = require_create_google_font_url.createGoogleFontUrl;

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+import { FontConfig, FontDisplay, FontRole, FontStyle, FontStylesheet, ResolvedFontConfig, ThemeFonts } from "./fonts/types.cjs";
+import { createGoogleFontUrl } from "./fonts/create-google-font-url.cjs";
+import { GoogleFont } from "./fonts/google-font.cjs";
+import "./fonts/index.cjs";
+import { Theme, ThemeProps, ThemeScope } from "./theme.cjs";
+import "./fonts/typography.cjs";
+import { BREAKPOINTS, Breakpoint } from "./breakpoints.cjs";
+import { ColorTheme, ThemeColorSchemeTokens, ThemeMode, ThemeTokenOverrides, ThemeTokens, ThemeTypographyFontRole, ThemeTypographyRoleTokens, TypographyStyle } from "./types.cjs";
+import { ThemeComponents, ThemeImageComponent, ThemeLinkComponent, ThemeLinkComponentConfig } from "./components.types.cjs";
+export { BREAKPOINTS, type Breakpoint, type ColorTheme, type FontConfig, type FontDisplay, type FontRole, type FontStyle, type FontStylesheet, GoogleFont, type ResolvedFontConfig, Theme, type ThemeColorSchemeTokens, type ThemeComponents, type ThemeFonts, type ThemeImageComponent, type ThemeLinkComponent, type ThemeLinkComponentConfig, type ThemeMode, type ThemeProps, type ThemeScope, type ThemeTokenOverrides, type ThemeTokens, type ThemeTypographyFontRole, type ThemeTypographyRoleTokens, type TypographyStyle, createGoogleFontUrl };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { createGoogleFontUrl } from "./fonts/create-google-font-url.js";
+import { GoogleFont } from "./fonts/google-font.js";
+import { FontConfig, FontDisplay, FontRole, FontStyle, FontStylesheet, ResolvedFontConfig, ThemeFonts } from "./fonts/types.js";
+import { Theme, ThemeProps, ThemeScope } from "./theme.js";
+import "./fonts/typography.js";
+import { BREAKPOINTS, Breakpoint } from "./breakpoints.js";
+import { ColorTheme, ThemeColorSchemeTokens, ThemeMode, ThemeTokenOverrides, ThemeTokens, ThemeTypographyFontRole, ThemeTypographyRoleTokens, TypographyStyle } from "./types.js";
+import { ThemeComponents, ThemeImageComponent, ThemeLinkComponent, ThemeLinkComponentConfig } from "./components.types.js";
+export { BREAKPOINTS, type Breakpoint, type ColorTheme, type FontConfig, type FontDisplay, type FontRole, type FontStyle, type FontStylesheet, GoogleFont, type ResolvedFontConfig, Theme, type ThemeColorSchemeTokens, type ThemeComponents, type ThemeFonts, type ThemeImageComponent, type ThemeLinkComponent, type ThemeLinkComponentConfig, type ThemeMode, type ThemeProps, type ThemeScope, type ThemeTokenOverrides, type ThemeTokens, type ThemeTypographyFontRole, type ThemeTypographyRoleTokens, type TypographyStyle, createGoogleFontUrl };

package/dist/index.js

@@ -0,0 +1,5 @@
+import { createGoogleFontUrl } from "./fonts/create-google-font-url.js";
+import { GoogleFont } from "./fonts/google-font.js";
+import { Theme } from "./theme.js";
+import { BREAKPOINTS } from "./breakpoints.js";
+export { BREAKPOINTS, GoogleFont, Theme, createGoogleFontUrl };

package/dist/scope-context.cjs

@@ -0,0 +1,58 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+// src/scope-context.tsx
+const ThemeScopeContext = (0, react.createContext)(null);
+const ThemeScopeProvider = ({ scopeId, theme, children }) => {
+	const scopeElementRef = (0, react.useRef)(null);
+	const [portalState, setPortalState] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (scopeId === null) return;
+		const ownerDocument = scopeElementRef.current?.ownerDocument;
+		if (!ownerDocument?.body) return;
+		const portalTarget = ownerDocument.createElement("div");
+		portalTarget.className = "puzzle-theme-scope puzzle-theme-scope--portal";
+		portalTarget.dataset.puzzleThemeScope = scopeId;
+		portalTarget.dataset.theme = theme;
+		portalTarget.dataset.puzzleThemePortal = "true";
+		ownerDocument.body.append(portalTarget);
+		setPortalState({
+			scopeId,
+			theme,
+			element: portalTarget
+		});
+		return () => {
+			portalTarget.remove();
+		};
+	}, [scopeId, theme]);
+	const portalTarget = scopeId !== null && portalState?.scopeId === scopeId && portalState.theme === theme ? portalState.element : null;
+	const value = (0, react.useMemo)(() => {
+		return scopeId === null ? null : {
+			scopeId,
+			theme,
+			portalTarget
+		};
+	}, [
+		scopeId,
+		theme,
+		portalTarget
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeScopeContext.Provider, {
+		value,
+		children: scopeId === null ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: scopeElementRef,
+			className: "puzzle-theme-scope",
+			"data-puzzle-theme-scope": scopeId,
+			"data-theme": theme,
+			children
+		})
+	});
+};
+const useThemeScope = () => {
+	return (0, react.useContext)(ThemeScopeContext);
+};
+exports.ThemeScopeProvider = ThemeScopeProvider;
+exports.useThemeScope = useThemeScope;
+
+//# sourceMappingURL=scope-context.cjs.map

package/dist/scope-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope-context.cjs","names":["createContext","useRef","useState","useMemo","useContext"],"sources":["../src/scope-context.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n} from \"react\";\n\nimport type { ThemeMode } from \"./types\";\n\ntype ThemeScopeContextValue = {\n  scopeId: string;\n  theme: ThemeMode;\n  portalTarget: HTMLDivElement | null;\n};\n\ntype ThemeScopePortalState = {\n  scopeId: string;\n  theme: ThemeMode;\n  element: HTMLDivElement;\n};\n\ntype ThemeScopeProviderProps = PropsWithChildren<{\n  scopeId: string | null;\n  theme: ThemeMode;\n}>;\n\nconst ThemeScopeContext = createContext<ThemeScopeContextValue | null>(null);\n\nconst ThemeScopeProvider = ({\n  scopeId,\n  theme,\n  children,\n}: ThemeScopeProviderProps) => {\n  const scopeElementRef = useRef<HTMLDivElement>(null);\n  const [portalState, setPortalState] = useState<ThemeScopePortalState | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if (scopeId === null) {\n      return;\n    }\n\n    const ownerDocument = scopeElementRef.current?.ownerDocument;\n\n    if (!ownerDocument?.body) {\n      return;\n    }\n\n    const portalTarget = ownerDocument.createElement(\"div\");\n\n    portalTarget.className = \"puzzle-theme-scope puzzle-theme-scope--portal\";\n    portalTarget.dataset.puzzleThemeScope = scopeId;\n    portalTarget.dataset.theme = theme;\n    portalTarget.dataset.puzzleThemePortal = \"true\";\n\n    ownerDocument.body.append(portalTarget);\n\n    setPortalState({\n      scopeId,\n      theme,\n      element: portalTarget,\n    });\n\n    return () => {\n      portalTarget.remove();\n    };\n  }, [scopeId, theme]);\n\n  const portalTarget =\n    scopeId !== null &&\n    portalState?.scopeId === scopeId &&\n    portalState.theme === theme\n      ? portalState.element\n      : null;\n\n  const value = useMemo<ThemeScopeContextValue | null>(() => {\n    return scopeId === null\n      ? null\n      : {\n          scopeId,\n          theme,\n          portalTarget,\n        };\n  }, [scopeId, theme, portalTarget]);\n\n  return (\n    <ThemeScopeContext.Provider value={value}>\n      {scopeId === null ? (\n        children\n      ) : (\n        <div\n          ref={scopeElementRef}\n          className=\"puzzle-theme-scope\"\n          data-puzzle-theme-scope={scopeId}\n          data-theme={theme}\n        >\n          {children}\n        </div>\n      )}\n    </ThemeScopeContext.Provider>\n  );\n};\n\nconst useThemeScope = () => {\n  return useContext(ThemeScopeContext);\n};\n\nexport { ThemeScopeProvider, useThemeScope, type ThemeScopeContextValue };\n"],"mappings":";;;;;AA+BA,MAAM,qBAAA,GAAoBA,MAAAA,cAAAA,CAA6C,IAAI;AAE3E,MAAM,sBAAsB,EAC1B,SACA,OACA,eAC6B;CAC7B,MAAM,mBAAA,GAAkBC,MAAAA,OAAAA,CAAuB,IAAI;CACnD,MAAM,CAAC,aAAa,mBAAA,GAAkBC,MAAAA,SAAAA,CACpC,IACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,YAAY,MACd;EAGF,MAAM,gBAAgB,gBAAgB,SAAS;EAE/C,IAAI,CAAC,eAAe,MAClB;EAGF,MAAM,eAAe,cAAc,cAAc,KAAK;EAEtD,aAAa,YAAY;EACzB,aAAa,QAAQ,mBAAmB;EACxC,aAAa,QAAQ,QAAQ;EAC7B,aAAa,QAAQ,oBAAoB;EAEzC,cAAc,KAAK,OAAO,YAAY;EAEtC,eAAe;GACb;GACA;GACA,SAAS;EACX,CAAC;EAED,aAAa;GACX,aAAa,OAAO;EACtB;CACF,GAAG,CAAC,SAAS,KAAK,CAAC;CAEnB,MAAM,eACJ,YAAY,QACZ,aAAa,YAAY,WACzB,YAAY,UAAU,QAClB,YAAY,UACZ;CAEN,MAAM,SAAA,GAAQC,MAAAA,QAAAA,OAA6C;EACzD,OAAO,YAAY,OACf,OACA;GACE;GACA;GACA;EACF;CACN,GAAG;EAAC;EAAS;EAAO;CAAY,CAAC;CAEjC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAkB,UAAnB;EAAmC;EAChC,UAAA,YAAY,OACX,WAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,2BAAyB;GACzB,cAAY;GAEX;EACE,CAAA;CAEmB,CAAA;AAEhC;AAEA,MAAM,sBAAsB;CAC1B,QAAA,GAAOC,MAAAA,WAAAA,CAAW,iBAAiB;AACrC"}

package/dist/scope-context.d.cts

@@ -0,0 +1,14 @@
+import { ThemeMode } from "./types.cjs";
+import { PropsWithChildren } from "react";
+type ThemeScopeContextValue = {
+  scopeId: string;
+  theme: ThemeMode;
+  portalTarget: HTMLDivElement | null;
+};
+type ThemeScopeProviderProps = PropsWithChildren<{
+  scopeId: string | null;
+  theme: ThemeMode;
+}>;
+declare const ThemeScopeProvider: ({ scopeId, theme, children }: ThemeScopeProviderProps) => import("react").JSX.Element;
+declare const useThemeScope: () => ThemeScopeContextValue | null;
+export { type ThemeScopeContextValue, ThemeScopeProvider, useThemeScope };

package/dist/scope-context.d.ts

@@ -0,0 +1,14 @@
+import { ThemeMode } from "./types.js";
+import { PropsWithChildren } from "react";
+type ThemeScopeContextValue = {
+  scopeId: string;
+  theme: ThemeMode;
+  portalTarget: HTMLDivElement | null;
+};
+type ThemeScopeProviderProps = PropsWithChildren<{
+  scopeId: string | null;
+  theme: ThemeMode;
+}>;
+declare const ThemeScopeProvider: ({ scopeId, theme, children }: ThemeScopeProviderProps) => import("react").JSX.Element;
+declare const useThemeScope: () => ThemeScopeContextValue | null;
+export { type ThemeScopeContextValue, ThemeScopeProvider, useThemeScope };