@stealthscale/plugin-theming 0.0.0-stage → 0.2.1

package/dist/themes-yClyRA9e.js

@@ -0,0 +1,305 @@
+import { r as SAMPLE } from "./theming-text.recipe-Dvcza4j1.js";
+import { t as referenceOf } from "./variables-ymFs3Bzn.js";
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as useWornTheme } from "./worn-D4HEJsJ2.js";
+import { i as ThemingSample } from "./parts-BVmqVMgo.js";
+import { t as setting } from "./setting-BsgJKTlh.js";
+import { CORNERS, FACES, PALETTES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { Badge, ColorSwatch } from "@stealthscale/component-data";
+import { Text } from "@stealthscale/component-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { THEME_ATTRIBUTE } from "@stealthscale/theme";
+import { useThemeChoice } from "@stealthscale/provider-shell";
+import { Button } from "@stealthscale/component-actions";
+import { Card } from "@stealthscale/component-surfaces";
+//#region src/blocks/theme-samples.tsx
+/**
+* Renders the samples in the theme of the element around them.
+*
+* @remarks
+*   Every sample reads its token through a reference, so it shows the theme of the nearest element
+*   above it that has a theme attribute.
+*/
+function ThemeSamples() {
+	const $ = c(18);
+	const { t } = useWords();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "xs",
+			wrap: true,
+			children: PALETTES.map(_temp$1)
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "md",
+			children: [FACES.map(_temp2), CORNERS.slice(0, 3).map(_temp3)]
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("blocks.save");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t2
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("blocks.cancel");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			children: t4
+		});
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("blocks.draft");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Badge, { children: t6 });
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t3 || $[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				t0,
+				t1,
+				/* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					gap: "sm",
+					wrap: true,
+					children: [
+						t3,
+						t5,
+						t7
+					]
+				})
+			]
+		});
+		$[14] = t3;
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+function _temp3(corner) {
+	return /* @__PURE__ */ jsx(ThemingSample, { style: setting(SAMPLE.radius, referenceOf("radii", corner)) }, corner);
+}
+function _temp2(face) {
+	return /* @__PURE__ */ jsx(ThemingSample, {
+		shape: "text",
+		style: setting(SAMPLE.face, referenceOf("fonts", face)),
+		children: "Aa"
+	}, face);
+}
+function _temp$1(palette) {
+	return /* @__PURE__ */ jsx(ColorSwatch, { value: referenceOf("colors", `${palette}.solid`) }, palette);
+}
+//#endregion
+//#region src/blocks/theme-card.tsx
+/**
+* Renders the card under the theme's own attribute, in the page's color mode.
+*
+* @remarks
+*   The card states the theme attribute, so every token inside it is the theme's and every sample
+*   wears it, whichever theme the page wears. The sentence about the theme is the plugin's word
+*   `themes.characters.<name>`, and a theme without one shows its name and its samples alone. The
+*   button is pressed while the page wears the theme.
+*/
+function ThemeCard(t0) {
+	const $ = c(28);
+	const { name } = t0;
+	const { t } = useWords();
+	const { setTheme } = useThemeChoice();
+	const worn = useWornTheme() === name;
+	const t1 = `themes.characters.${name}`;
+	let t2;
+	if ($[0] !== t || $[1] !== t1) {
+		t2 = t(t1, { defaultValue: "" });
+		$[0] = t;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const character = t2;
+	let t3;
+	if ($[3] !== name) {
+		t3 = { [THEME_ATTRIBUTE]: name };
+		$[3] = name;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== name) {
+		t4 = /* @__PURE__ */ jsx(Card.Title, {
+			as: "h3",
+			children: name
+		});
+		$[5] = name;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== character) {
+		t5 = character === "" ? null : /* @__PURE__ */ jsx(Card.Description, { children: character });
+		$[7] = character;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Card.Header, { children: [t4, t5] });
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Card.Content, { children: /* @__PURE__ */ jsx(ThemeSamples, {}) });
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== name || $[14] !== setTheme) {
+		t8 = () => {
+			setTheme(name);
+		};
+		$[13] = name;
+		$[14] = setTheme;
+		$[15] = t8;
+	} else t8 = $[15];
+	const t9 = worn ? "solid" : "outline";
+	let t10;
+	if ($[16] !== name || $[17] !== t) {
+		t10 = t("blocks.wear", { name });
+		$[16] = name;
+		$[17] = t;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t10 || $[20] !== t8 || $[21] !== t9 || $[22] !== worn) {
+		t11 = /* @__PURE__ */ jsx(Card.Footer, { children: /* @__PURE__ */ jsx(Button, {
+			"aria-pressed": worn,
+			onClick: t8,
+			size: "sm",
+			variant: t9,
+			children: t10
+		}) });
+		$[19] = t10;
+		$[20] = t8;
+		$[21] = t9;
+		$[22] = worn;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11 || $[25] !== t3 || $[26] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(Card.Root, {
+			variant: "outline",
+			...t3,
+			children: [
+				t6,
+				t7,
+				t11
+			]
+		});
+		$[24] = t11;
+		$[25] = t3;
+		$[26] = t6;
+		$[27] = t12;
+	} else t12 = $[27];
+	return t12;
+}
+//#endregion
+//#region src/blocks/theme-cards.tsx
+/**
+* Renders the cards in columns as wide as the room allows, in the order the product offers the
+* themes, or a sentence where the product offers none.
+*/
+function ThemeCards() {
+	const $ = c(8);
+	const { t } = useWords();
+	const { themes } = useThemeChoice();
+	if (themes.length === 0) {
+		let t0;
+		if ($[0] !== t) {
+			t0 = t("blocks.noThemes");
+			$[0] = t;
+			$[1] = t0;
+		} else t0 = $[1];
+		let t1;
+		if ($[2] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Text, { children: t0 });
+			$[2] = t0;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	let t0;
+	if ($[4] !== themes) {
+		t0 = themes.map(_temp);
+		$[4] = themes;
+		$[5] = t0;
+	} else t0 = $[5];
+	let t1;
+	if ($[6] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fill-xs",
+			gap: "md",
+			children: t0
+		});
+		$[6] = t0;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+}
+function _temp(name) {
+	return /* @__PURE__ */ jsx(ThemeCard, { name }, name);
+}
+//#endregion
+//#region src/pages/themes.tsx
+/**
+* Renders the themes page.
+*/
+function ThemesPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "themes",
+			sections: [{
+				block: /* @__PURE__ */ jsx(ThemeCards, {}),
+				id: "offered"
+			}, { id: "wearing" }]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { ThemesPage };

package/dist/theming-text.recipe-Dvcza4j1.js

@@ -0,0 +1,308 @@
+import { FIELD_EDGE, axis, defineRecipe, dense, stack } from "@stealthscale/theme/authoring";
+import { ANIMATION_STYLES, FONT_SIZES, LAYER_STYLES, ROLE_STYLES } from "@stealthscale/theme/contract";
+//#region src/recipes/keys.ts
+/**
+* Writes the name of a style as the value of a recipe's axis.
+*
+* @remarks
+*   A value of an axis becomes part of a class name, so the dot a nested style's name contains is
+*   written as a dash: `fill.solid` is the value `fill-solid`. No two of the foundation's names
+*   differ by a dot alone.
+*/
+/**
+* Returns the axis value of a style's name, each dot written as a dash.
+*
+* @param name - The style's name, such as `heading.2xl`.
+*/
+function keyOf(name) {
+	return name.replaceAll(".", "-");
+}
+//#endregion
+//#region src/recipes/theming-look.recipe.ts
+/**
+* States the box a layer style is shown on: one value per layer style the foundation fills.
+*
+* @remarks
+*   The axis lists every name of the foundation's vocabulary and states each value under
+*   `staticCss`, so a product that installs the plugin emits every look whether or not its own
+*   sources name one. A look reads the primary palette, so a fill shows the brand.
+*/
+/**
+* Maps each value of the axis to the layer style it applies.
+*/
+const NAMED$2 = new Map(LAYER_STYLES.map((name) => [keyOf(name), name]));
+/**
+* Lists the values of the axis, in the vocabulary's order.
+*/
+const LOOKS = [...NAMED$2.keys()];
+/**
+* Writes one value of the axis: the layer style of the same name.
+*/
+const look = axis(LOOKS, (key) => ({ layerStyle: NAMED$2.get(key) }));
+/**
+* Styles a box that centres its name, at the control's corner, in the primary palette.
+*
+* @remarks
+*   The box has a transparent edge at the control's width and the field's edge color, so a look
+*   that colors the edge, such as an outline or a field look, shows it.
+*/
+const recipe$4 = defineRecipe({
+	base: {
+		alignItems: "center",
+		borderColor: "transparent",
+		borderRadius: "l2",
+		borderStyle: "solid",
+		borderWidth: "control",
+		colorPalette: "primary",
+		display: "flex",
+		[FIELD_EDGE]: "{colors.border.emphasized}",
+		justifyContent: "center",
+		minBlockSize: "20",
+		padding: dense("{spacing.inset.sm}"),
+		textAlign: "center"
+	},
+	className: "theming-look",
+	jsx: [/^ThemingLook$/u],
+	staticCss: [{ look: LOOKS }],
+	variants: { look: look() }
+});
+//#endregion
+//#region src/recipes/theming-motion.recipe.ts
+/**
+* States the tile a motion is shown on: one value per animation style the foundation fills.
+*
+* @remarks
+*   Three motions move a property a plain tile does not paint, so their values paint it: `sweep`
+*   turns the moving border's angle, `shimmer` moves the shine across the tile, and `aurora`
+*   drifts the aurora backdrop. A collapsing tile starts from its own height, and a meteor crosses
+*   the tile's room rather than the window. Every motion stops for a reader who asked for less
+*   motion, as every animation style of the foundation does.
+*/
+/**
+* Maps each value of the axis to the animation style it applies.
+*/
+const NAMED$1 = new Map(ANIMATION_STYLES.map((name) => [keyOf(name), name]));
+/**
+* Lists the values of the axis, in the vocabulary's order.
+*/
+const MOTIONS = [...NAMED$1.keys()];
+/**
+* Lists the paint each motion that moves a property a tile does not paint adds.
+*/
+const PAINTED = {
+	aurora: { layerStyle: "backdrop.aurora" },
+	shimmer: {
+		backgroundImage: "{gradients.shine}",
+		backgroundSize: "200% 100%"
+	},
+	sweep: { layerStyle: "border.moving" }
+};
+/**
+* Writes one value of the axis: the animation style of the same name, with the paint it moves.
+*/
+const motion = axis(MOTIONS, (key) => ({
+	animationStyle: NAMED$1.get(key),
+	...PAINTED[key]
+}));
+/**
+* Styles a tile in the primary palette's solid, at the control's corner.
+*/
+const recipe$3 = defineRecipe({
+	base: {
+		"--height": "{sizes.10}",
+		"--meteor-travel": "{sizes.24}",
+		"--shadow-color": "{colors.primary.solid}",
+		background: "colorPalette.solid",
+		borderRadius: "l2",
+		boxSize: "10",
+		colorPalette: "primary",
+		display: "block"
+	},
+	className: "theming-motion",
+	jsx: [/^ThemingMotion$/u],
+	staticCss: [{ motion: MOTIONS }],
+	variants: { motion: motion() }
+});
+//#endregion
+//#region src/recipes/theming-panel.recipe.ts
+/**
+* States the panel a block shows one color mode in: the mode's page and ink, with a hairline edge.
+*
+* @remarks
+*   The panel has the theme and the mode attributes, so every token inside it resolves in that
+*   mode, and it paints the mode's page background, so each value shows against the page of its
+*   own mode.
+*/
+/**
+* Styles a panel: the page's background and ink, the container's corner and a medium inset.
+*/
+const recipe$2 = defineRecipe({
+	base: {
+		...stack({
+			direction: "column",
+			gap: "gap.md"
+		}),
+		background: "bg",
+		borderColor: "border",
+		borderRadius: "l3",
+		borderStyle: "solid",
+		borderWidth: "hairline",
+		color: "fg",
+		minInlineSize: "0",
+		padding: dense("{spacing.inset.md}")
+	},
+	className: "theming-panel",
+	jsx: [/^ThemingPanel$/u]
+});
+//#endregion
+//#region src/recipes/sample-properties.ts
+/**
+* Lists the custom property each value of a sample is read from.
+*/
+const SAMPLE = {
+	cursor: "--theming-cursor",
+	face: "--theming-face",
+	filter: "--theming-filter",
+	fontSize: "--theming-font-size",
+	leading: "--theming-leading",
+	opacity: "--theming-opacity",
+	radius: "--theming-radius",
+	ratio: "--theming-ratio",
+	shadow: "--theming-shadow",
+	size: "--theming-size",
+	stroke: "--theming-stroke",
+	tracking: "--theming-tracking",
+	weight: "--theming-weight"
+};
+//#endregion
+//#region src/recipes/theming-sample.recipe.ts
+/**
+* States the sample a token is shown on: a bar as long as a length, a square as large as a size, a
+* line as thick as a stroke, a box at an aspect ratio, a tile with a corner, a shadow, a cursor, a
+* blur or an opacity, and words set at a face, size, weight, leading or tracking.
+*
+* @remarks
+*   A page passes the token to the sample as a custom property, `var(--radii-l2)` for
+*   `--theming-radius`, because the page shows whichever token it lists. Each shape reads only the
+*   properties it shows, and a property left unset takes the value that shows nothing. Words that
+*   state no face are set in the heading face, which follows the body face unless the theme states
+*   one, so a size or a weight shows the face that sets a theme apart.
+*/
+/**
+* Lists the shapes a sample takes, in the order a page shows them.
+*/
+const SHAPES = [
+	"bar",
+	"square",
+	"line",
+	"ratio",
+	"tile",
+	"text"
+];
+/**
+* Lists the styles of each shape.
+*/
+const STYLES$1 = {
+	bar: {
+		background: "colorPalette.solid",
+		blockSize: "2",
+		borderRadius: "xs",
+		inlineSize: `var(${SAMPLE.size})`
+	},
+	line: {
+		borderBlockStartStyle: "solid",
+		borderBlockStartWidth: `var(${SAMPLE.stroke})`,
+		borderColor: "fg",
+		inlineSize: "16"
+	},
+	ratio: {
+		aspectRatio: `var(${SAMPLE.ratio})`,
+		background: "colorPalette.subtle",
+		borderColor: "colorPalette.muted",
+		borderStyle: "solid",
+		borderWidth: "hairline",
+		inlineSize: "20"
+	},
+	square: {
+		background: "colorPalette.subtle",
+		borderColor: "colorPalette.muted",
+		borderRadius: "l1",
+		borderStyle: "solid",
+		borderWidth: "hairline",
+		boxSize: `var(${SAMPLE.size})`
+	},
+	text: {
+		fontFamily: `var(${SAMPLE.face}, {fonts.heading})`,
+		fontSize: `var(${SAMPLE.fontSize}, inherit)`,
+		fontWeight: `var(${SAMPLE.weight}, inherit)`,
+		letterSpacing: `var(${SAMPLE.tracking}, inherit)`,
+		lineHeight: `var(${SAMPLE.leading}, inherit)`
+	},
+	tile: {
+		background: "bg.panel",
+		borderColor: "border",
+		borderRadius: `var(${SAMPLE.radius}, {radii.l2})`,
+		borderStyle: "solid",
+		borderWidth: "hairline",
+		boxShadow: `var(${SAMPLE.shadow}, none)`,
+		boxSize: "12",
+		cursor: `var(${SAMPLE.cursor}, auto)`,
+		filter: `var(${SAMPLE.filter}, none)`,
+		opacity: `var(${SAMPLE.opacity}, 1)`
+	}
+};
+/**
+* Styles a sample in the primary palette at the shape a page asks for.
+*/
+const recipe$1 = defineRecipe({
+	base: {
+		colorPalette: "primary",
+		display: "block",
+		flexShrink: "0"
+	},
+	className: "theming-sample",
+	defaultVariants: { shape: "tile" },
+	jsx: [/^ThemingSample$/u],
+	staticCss: [{ shape: [...SHAPES] }],
+	variants: { shape: axis(SHAPES, (one) => STYLES$1[one])() }
+});
+//#endregion
+//#region src/recipes/theming-text.recipe.ts
+/**
+* States the words a text style is shown in: one value per size style and per role style the
+* foundation fills.
+*
+* @remarks
+*   The axis lists every name of the foundation's vocabulary and states each value under
+*   `staticCss`, so a product that installs the plugin emits every text style. The axis is `text`,
+*   because a prop named `style` is the element's inline style.
+*/
+/**
+* Maps each value of the axis to the text style it applies.
+*/
+const NAMED = new Map([...FONT_SIZES, ...ROLE_STYLES].map((name) => [keyOf(name), name]));
+/**
+* Lists the values of the axis: the sizes, then the roles.
+*/
+const STYLES = [...NAMED.keys()];
+/**
+* Writes one value of the axis: the text style of the same name.
+*/
+const style = axis(STYLES, (key) => ({ textStyle: NAMED.get(key) }));
+/**
+* Styles the words of a sample in the ink, breaking a line that is wider than its room anywhere.
+*/
+const recipe = defineRecipe({
+	base: {
+		color: "fg",
+		display: "block",
+		minInlineSize: "0",
+		overflowWrap: "anywhere"
+	},
+	className: "theming-text",
+	jsx: [/^ThemingText$/u],
+	staticCss: [{ text: STYLES }],
+	variants: { text: style() }
+});
+//#endregion
+export { recipe$3 as a, recipe$2 as i, recipe$1 as n, recipe$4 as o, SAMPLE as r, keyOf as s, recipe as t };