@stealthscale/plugin-theming 0.0.0-stage → 0.2.1

package/dist/sizes-B7LgvyBS.js

@@ -0,0 +1,98 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as tokenRows } from "./rows-Dv8c7jye.js";
+import { t as TokenTable } from "./token-table-yrZh5kLy.js";
+import { t as sampler } from "./sampler-Ue67PX2n.js";
+import { ASPECT_RATIOS, INTRINSIC, LAYOUT, SCALE, WIDTHS } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/sizes.tsx
+/**
+* Renders a square as large as a size.
+*/
+const SQUARE = sampler("square", "size");
+/**
+* Lists the page's tables, in reading order.
+*/
+const TABLES = [
+	{
+		category: "sizes",
+		id: "controls",
+		lengths: true,
+		names: SCALE.map((step) => `control.${step}`),
+		sample: SQUARE
+	},
+	{
+		category: "sizes",
+		id: "icons",
+		lengths: true,
+		names: SCALE.map((step) => `icon.${step}`),
+		sample: SQUARE
+	},
+	{
+		category: "sizes",
+		id: "tags",
+		lengths: true,
+		names: SCALE.map((step) => `tag.${step}`),
+		sample: SQUARE
+	},
+	{
+		category: "sizes",
+		id: "layout",
+		lengths: true,
+		names: LAYOUT
+	},
+	{
+		category: "sizes",
+		id: "measures",
+		lengths: true,
+		names: WIDTHS
+	},
+	{
+		category: "sizes",
+		id: "intrinsic",
+		lengths: false,
+		names: INTRINSIC
+	},
+	{
+		category: "aspectRatios",
+		id: "ratios",
+		lengths: false,
+		names: ASPECT_RATIOS,
+		sample: sampler("ratio", "ratio")
+	}
+];
+/**
+* Renders the sizes page.
+*/
+function SizesPage() {
+	const $ = c(4);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = TABLES.map((t1) => {
+			const { category, id, lengths, names, sample } = t1;
+			return {
+				block: /* @__PURE__ */ jsx(TokenTable, {
+					caption: t(`sizes.sections.${id}.title`, { defaultValue: id }),
+					lengths,
+					rows: tokenRows(category, names, sample)
+				}),
+				id
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(DocPage, {
+			page: "sizes",
+			sections: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+//#endregion
+export { SizesPage };

package/dist/spacing-DMyyV6vX.js

@@ -0,0 +1,75 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as tokenRows } from "./rows-Dv8c7jye.js";
+import { t as TokenTable } from "./token-table-yrZh5kLy.js";
+import { t as sampler } from "./sampler-Ue67PX2n.js";
+import { GRID, SCALE } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/spacing.tsx
+/**
+* Lists the page's tables, in reading order.
+*/
+const TABLES = [
+	{
+		barred: true,
+		id: "gaps",
+		names: SCALE.map((step) => `gap.${step}`)
+	},
+	{
+		barred: true,
+		id: "insets",
+		names: SCALE.map((step) => `inset.${step}`)
+	},
+	{
+		barred: true,
+		id: "grid",
+		names: GRID
+	},
+	{
+		barred: false,
+		id: "other",
+		names: [
+			"marker",
+			"ring",
+			"safe.top",
+			"safe.right",
+			"safe.bottom",
+			"safe.left"
+		]
+	}
+];
+/**
+* Renders the spacing page.
+*/
+function SpacingPage() {
+	const $ = c(4);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = TABLES.map((t1) => {
+			const { barred, id, names } = t1;
+			return {
+				block: /* @__PURE__ */ jsx(TokenTable, {
+					caption: t(`spacing.sections.${id}.title`, { defaultValue: id }),
+					lengths: true,
+					rows: tokenRows("spacing", names, barred ? sampler("bar", "size") : void 0)
+				}),
+				id
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(DocPage, {
+			page: "spacing",
+			sections: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+//#endregion
+export { SpacingPage };

package/dist/surfaces-Db0HjMwB.js

@@ -0,0 +1,76 @@
+import { n as variableOf } from "./variables-ymFs3Bzn.js";
+import { t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as ModeColors } from "./mode-colors-Cf_ZPo3g.js";
+import { BACKGROUNDS, BORDERS, FOREGROUNDS, STATUSES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/surfaces.tsx
+/**
+* Returns a token of a family by its member, the family's own value for `DEFAULT`.
+*/
+function tokenOf(family, member) {
+	const name = member === "DEFAULT" ? family : `${family}.${member}`;
+	return {
+		name,
+		variable: variableOf("colors", name)
+	};
+}
+/**
+* Returns a family's members and its status members as rows, each measured against the token its
+* function names: the ink on a background, a background behind an ink or a line, and the inverted
+* member against its inverted partner.
+*/
+function rowsOf(family, members, partner) {
+	return [...members, ...STATUSES].map((member) => {
+		const { name, variable } = tokenOf(family, member);
+		return {
+			against: tokenOf(partner, member === "inverted" ? "inverted" : "DEFAULT"),
+			name,
+			variable
+		};
+	});
+}
+/**
+* The page's sections: a family each, then the wells.
+*/
+const SECTIONS = [
+	{
+		block: /* @__PURE__ */ jsx(ModeColors, {
+			name: "bg",
+			rows: rowsOf("bg", BACKGROUNDS, "fg")
+		}),
+		id: "backgrounds"
+	},
+	{
+		block: /* @__PURE__ */ jsx(ModeColors, {
+			name: "fg",
+			rows: rowsOf("fg", FOREGROUNDS, "bg")
+		}),
+		id: "inks"
+	},
+	{
+		block: /* @__PURE__ */ jsx(ModeColors, {
+			name: "border",
+			rows: rowsOf("border", BORDERS, "bg")
+		}),
+		id: "lines"
+	},
+	{ id: "wells" }
+];
+/**
+* Renders the surfaces page.
+*/
+function SurfacesPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "surfaces",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { SurfacesPage };

package/dist/text-styles-BZnXaigP.js

@@ -0,0 +1,233 @@
+import { s as keyOf } from "./theming-text.recipe-Dvcza4j1.js";
+import { s as roundedPixels } from "./measure-uwF7Fmpy.js";
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as tokenRows } from "./rows-Dv8c7jye.js";
+import { t as TokenTable } from "./token-table-yrZh5kLy.js";
+import { a as ThemingText } from "./parts-BVmqVMgo.js";
+import { t as sampler } from "./sampler-Ue67PX2n.js";
+import { FONT_SIZES, LETTER_SPACINGS, LINE_HEIGHTS, ROLE_STYLES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { Code, Text } from "@stealthscale/component-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/text-style-item.tsx
+/**
+* Renders one text style: its name, a line set in it, and the size, leading, weight and tracking
+* the line comes to.
+*/
+/**
+* Renders the style's name, the sample line, and what the browser computed for the line.
+*
+* @remarks
+*   The computed values are read from the line once it renders, so they are the theme's values in
+*   the page's mode, whatever the style refers to.
+*/
+function TextStyleItem(t0) {
+	const $ = c(19);
+	const { name } = t0;
+	const { t } = useWords();
+	const [line, setLine] = useState(null);
+	const [computed, setComputed] = useState("");
+	let t1;
+	let t2;
+	if ($[0] !== line || $[1] !== t) {
+		t1 = () => {
+			if (line === null) return;
+			const element = line;
+			(function read() {
+				const style = getComputedStyle(element);
+				setComputed(t("blocks.computed", {
+					leading: roundedPixels(style.lineHeight),
+					size: roundedPixels(style.fontSize),
+					tracking: roundedPixels(style.letterSpacing),
+					weight: style.fontWeight
+				}));
+			})();
+		};
+		t2 = [line, t];
+		$[0] = line;
+		$[1] = t;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[4] !== name) {
+		t3 = /* @__PURE__ */ jsx(Code, { children: name });
+		$[4] = name;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== name) {
+		t4 = keyOf(name);
+		$[6] = name;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("blocks.specimen");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ThemingText, {
+			ref: setLine,
+			text: t4,
+			children: t5
+		});
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== computed) {
+		t7 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: computed
+		});
+		$[13] = computed;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t3 || $[16] !== t6 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				t3,
+				t6,
+				t7
+			]
+		});
+		$[15] = t3;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+//#endregion
+//#region src/blocks/text-style-list.tsx
+/**
+* Renders an item per text style, in columns as wide as the room allows.
+*/
+function TextStyleList(t0) {
+	const $ = c(4);
+	const { names } = t0;
+	let t1;
+	if ($[0] !== names) {
+		t1 = names.map(_temp);
+		$[0] = names;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fill-xs",
+			gap: "xl",
+			children: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+function _temp(name) {
+	return /* @__PURE__ */ jsx(TextStyleItem, { name }, name);
+}
+//#endregion
+//#region src/pages/text-styles.tsx
+/**
+* Renders the text styles page.
+*/
+function TextStylesPage() {
+	const $ = c(17);
+	const { t } = useWords();
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			block: /* @__PURE__ */ jsx(TextStyleList, { names: FONT_SIZES }),
+			id: "sizes"
+		};
+		t1 = {
+			block: /* @__PURE__ */ jsx(TextStyleList, { names: ROLE_STYLES }),
+			id: "roles"
+		};
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("text-styles.sections.leading.title");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = tokenRows("lineHeights", LINE_HEIGHTS);
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2) {
+		t4 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t2,
+				rows: t3
+			}),
+			id: "leading"
+		};
+		$[5] = t2;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("text-styles.sections.tracking.title");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = tokenRows("letterSpacings", LETTER_SPACINGS, sampler("text", "tracking", t("blocks.specimen")));
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t5 || $[12] !== t6) {
+		t7 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t5,
+				rows: t6
+			}),
+			id: "tracking"
+		};
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t4 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DocPage, {
+			page: "text-styles",
+			sections: [
+				t0,
+				t1,
+				t4,
+				t7
+			]
+		});
+		$[14] = t4;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
+}
+//#endregion
+export { TextStylesPage };

package/dist/theme.d.ts

@@ -0,0 +1,12 @@
+//#region src/theme.d.ts
+/**
+ * Publishes the theming plugin's recipes as a preset, for the stylesheet compiler of an application
+ * that renders the theme pages.
+ *
+ * @remarks
+ *   Each recipe's class name starts with the plugin's id, and each states every value it offers
+ *   under `staticCss`, so a product compiles every sample the pages show.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };

package/dist/theme.js

@@ -0,0 +1,23 @@
+import { a as recipe$1, i as recipe$2, n as recipe$3, o as recipe, t as recipe$4 } from "./theming-text.recipe-Dvcza4j1.js";
+import { definePreset } from "@stealthscale/theme/authoring";
+//#region src/theme.ts
+/**
+* Publishes the theming plugin's recipes as a preset, for the stylesheet compiler of an application
+* that renders the theme pages.
+*
+* @remarks
+*   Each recipe's class name starts with the plugin's id, and each states every value it offers
+*   under `staticCss`, so a product compiles every sample the pages show.
+*/
+var theme_default = definePreset({
+	name: "@stealthscale/plugin-theming",
+	theme: { extend: { recipes: {
+		themingLook: recipe,
+		themingMotion: recipe$1,
+		themingPanel: recipe$2,
+		themingSample: recipe$3,
+		themingText: recipe$4
+	} } }
+});
+//#endregion
+export { theme_default as default };