@styleframe/theme 1.0.0

package/src/variables/useFontWeight.test.ts

@@ -0,0 +1,650 @@
+import type { Variable } from "@styleframe/core";
+import { styleframe } from "@styleframe/core";
+import { consume } from "@styleframe/transpiler";
+import { defaultFontWeightValues, useFontWeight } from "./useFontWeight";
+
+describe("useFontWeight", () => {
+	it("should create all font weight variables with correct names and values", () => {
+		const s = styleframe();
+		const {
+			fontWeightExtralight,
+			fontWeightLight,
+			fontWeightNormal,
+			fontWeightMedium,
+			fontWeightSemibold,
+			fontWeightBold,
+			fontWeightBlack,
+			fontWeightLighter,
+			fontWeightBolder,
+			fontWeight,
+		} = useFontWeight(s);
+
+		expect(fontWeightExtralight).toEqual({
+			type: "variable",
+			name: "font-weight--extralight",
+			value: 200,
+		});
+
+		expect(fontWeightLight).toEqual({
+			type: "variable",
+			name: "font-weight--light",
+			value: 300,
+		});
+
+		expect(fontWeightNormal).toEqual({
+			type: "variable",
+			name: "font-weight--normal",
+			value: "normal",
+		});
+
+		expect(fontWeightMedium).toEqual({
+			type: "variable",
+			name: "font-weight--medium",
+			value: 500,
+		});
+
+		expect(fontWeightSemibold).toEqual({
+			type: "variable",
+			name: "font-weight--semibold",
+			value: 600,
+		});
+
+		expect(fontWeightBold).toEqual({
+			type: "variable",
+			name: "font-weight--bold",
+			value: "bold",
+		});
+
+		expect(fontWeightBlack).toEqual({
+			type: "variable",
+			name: "font-weight--black",
+			value: 900,
+		});
+
+		expect(fontWeightLighter).toEqual({
+			type: "variable",
+			name: "font-weight--lighter",
+			value: "lighter",
+		});
+
+		expect(fontWeightBolder).toEqual({
+			type: "variable",
+			name: "font-weight--bolder",
+			value: "bolder",
+		});
+
+		expect(fontWeight).toEqual({
+			type: "variable",
+			name: "font-weight",
+			value: {
+				type: "reference",
+				name: "font-weight--normal",
+				fallback: undefined,
+			},
+		});
+	});
+
+	it("should add all font weight variables to root", () => {
+		const s = styleframe();
+		useFontWeight(s);
+
+		expect(s.root.variables).toHaveLength(11);
+		expect(s.root.variables[0]?.name).toBe("font-weight--extralight");
+		expect(s.root.variables[1]?.name).toBe("font-weight--light");
+		expect(s.root.variables[2]?.name).toBe("font-weight--normal");
+		expect(s.root.variables[3]?.name).toBe("font-weight--medium");
+		expect(s.root.variables[4]?.name).toBe("font-weight--semibold");
+		expect(s.root.variables[5]?.name).toBe("font-weight--bold");
+		expect(s.root.variables[6]?.name).toBe("font-weight--black");
+		expect(s.root.variables[7]?.name).toBe("font-weight--lighter");
+		expect(s.root.variables[8]?.name).toBe("font-weight--bolder");
+		expect(s.root.variables[9]?.name).toBe("font-weight--inherit");
+		expect(s.root.variables[10]?.name).toBe("font-weight");
+	});
+
+	it("should return all font weight variables in an object", () => {
+		const s = styleframe();
+		const fontWeights = useFontWeight(s);
+
+		expect(Object.keys(fontWeights)).toEqual([
+			"fontWeightExtralight",
+			"fontWeightLight",
+			"fontWeightNormal",
+			"fontWeightMedium",
+			"fontWeightSemibold",
+			"fontWeightBold",
+			"fontWeightBlack",
+			"fontWeightLighter",
+			"fontWeightBolder",
+			"fontWeightInherit",
+			"fontWeight",
+		]);
+	});
+
+	it("should compile to correct CSS output using consume", () => {
+		const s = styleframe();
+		useFontWeight(s);
+
+		const css = consume(s.root, s.options);
+
+		expect(css).toBe(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}`);
+	});
+
+	it("should compile individual font weight variable to correct CSS", () => {
+		const s = styleframe();
+		const { fontWeightSemibold } = useFontWeight(s);
+
+		const css = consume(fontWeightSemibold, s.options);
+
+		expect(css).toBe("--font-weight--semibold: 600;");
+	});
+
+	it("should not create duplicate variables when called multiple times", () => {
+		const s = styleframe();
+		const fontWeights1 = useFontWeight(s);
+		const fontWeights2 = useFontWeight(s);
+
+		// Should return the same variables (default: true behavior)
+		expect(fontWeights1.fontWeightExtralight).toBe(
+			fontWeights2.fontWeightExtralight,
+		);
+		expect(fontWeights1.fontWeight).toBe(fontWeights2.fontWeight);
+		expect(s.root.variables).toHaveLength(11);
+	});
+
+	it("should allow font weight variables to be used as references", () => {
+		const s = styleframe();
+		const { fontWeightBold } = useFontWeight(s);
+
+		const customFontWeight = s.variable(
+			"custom-font-weight",
+			s.ref(fontWeightBold),
+		);
+
+		expect(customFontWeight.value).toEqual({
+			type: "reference",
+			name: "font-weight--bold",
+			fallback: undefined,
+		});
+
+		const css = consume(s.root, s.options);
+		expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+	--custom-font-weight: var(--font-weight--bold);
+}`);
+	});
+
+	it("should work with selector overrides", () => {
+		const s = styleframe();
+		const { fontWeightNormal } = useFontWeight(s);
+
+		s.selector(".custom-font-weight", ({ variable }) => {
+			variable(fontWeightNormal, 450);
+		});
+
+		const css = consume(s.root, s.options);
+
+		expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}
+
+.custom-font-weight {
+	--font-weight--normal: 450;
+}`);
+	});
+
+	describe("type safety", () => {
+		it("should preserve exact font weight variable names in return type", () => {
+			const s = styleframe();
+			const fontWeights = useFontWeight(s);
+
+			// Type assertions to verify the generic types are preserved
+			const extralight: Variable<"font-weight--extralight"> =
+				fontWeights.fontWeightExtralight;
+			const light: Variable<"font-weight--light"> = fontWeights.fontWeightLight;
+			const normal: Variable<"font-weight--normal"> =
+				fontWeights.fontWeightNormal;
+			const medium: Variable<"font-weight--medium"> =
+				fontWeights.fontWeightMedium;
+			const semibold: Variable<"font-weight--semibold"> =
+				fontWeights.fontWeightSemibold;
+			const bold: Variable<"font-weight--bold"> = fontWeights.fontWeightBold;
+			const black: Variable<"font-weight--black"> = fontWeights.fontWeightBlack;
+			const lighter: Variable<"font-weight--lighter"> =
+				fontWeights.fontWeightLighter;
+			const bolder: Variable<"font-weight--bolder"> =
+				fontWeights.fontWeightBolder;
+			const fontWeight: Variable<"font-weight"> = fontWeights.fontWeight;
+
+			expect(extralight.name).toBe("font-weight--extralight");
+			expect(light.name).toBe("font-weight--light");
+			expect(normal.name).toBe("font-weight--normal");
+			expect(medium.name).toBe("font-weight--medium");
+			expect(semibold.name).toBe("font-weight--semibold");
+			expect(bold.name).toBe("font-weight--bold");
+			expect(black.name).toBe("font-weight--black");
+			expect(lighter.name).toBe("font-weight--lighter");
+			expect(bolder.name).toBe("font-weight--bolder");
+			expect(fontWeight.name).toBe("font-weight");
+		});
+
+		it("should have correct value types", () => {
+			const s = styleframe();
+			const fontWeights = useFontWeight(s);
+
+			expect(typeof fontWeights.fontWeightExtralight.value).toBe("number");
+			expect(typeof fontWeights.fontWeightLight.value).toBe("number");
+			expect(typeof fontWeights.fontWeightNormal.value).toBe("string");
+			expect(typeof fontWeights.fontWeightMedium.value).toBe("number");
+			expect(typeof fontWeights.fontWeightSemibold.value).toBe("number");
+			expect(typeof fontWeights.fontWeightBold.value).toBe("string");
+			expect(typeof fontWeights.fontWeightBlack.value).toBe("number");
+			expect(typeof fontWeights.fontWeightLighter.value).toBe("string");
+			expect(typeof fontWeights.fontWeightBolder.value).toBe("string");
+			expect(typeof fontWeights.fontWeight.value).toBe("object");
+		});
+	});
+
+	describe("default font weight", () => {
+		it("should create a default font weight variable referencing normal by default", () => {
+			const s = styleframe();
+			const { fontWeight } = useFontWeight(s);
+
+			expect(fontWeight).toEqual({
+				type: "variable",
+				name: "font-weight",
+				value: {
+					type: "reference",
+					name: "font-weight--normal",
+					fallback: undefined,
+				},
+			});
+		});
+
+		it("should allow customizing the default font weight", () => {
+			const s = styleframe();
+			const { fontWeight } = useFontWeight(s, {
+				...defaultFontWeightValues,
+				default: "@bold",
+			});
+
+			expect(fontWeight.value).toEqual({
+				type: "reference",
+				name: "font-weight--bold",
+				fallback: undefined,
+			});
+		});
+
+		it("should compile default font weight to CSS correctly", () => {
+			const s = styleframe();
+			useFontWeight(s, {
+				...defaultFontWeightValues,
+				default: "@semibold",
+			});
+
+			const css = consume(s.root, s.options);
+
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--semibold);
+}`);
+		});
+
+		it("should work with different default font weights", () => {
+			const fontWeights = [
+				"extralight",
+				"light",
+				"normal",
+				"medium",
+				"semibold",
+				"bold",
+				"black",
+				"lighter",
+				"bolder",
+			];
+
+			for (const fontWeightName of fontWeights) {
+				const s = styleframe();
+				const { fontWeight } = useFontWeight(s, {
+					...defaultFontWeightValues,
+					default: `@${fontWeightName}`,
+				});
+
+				expect(fontWeight.value).toEqual({
+					type: "reference",
+					name: `font-weight--${fontWeightName}`,
+					fallback: undefined,
+				});
+			}
+		});
+	});
+
+	describe("font weight value relationships", () => {
+		it("should have numeric weights in ascending order", () => {
+			const s = styleframe();
+			const {
+				fontWeightExtralight,
+				fontWeightLight,
+				fontWeightMedium,
+				fontWeightSemibold,
+				fontWeightBlack,
+			} = useFontWeight(s);
+
+			expect(fontWeightExtralight.value).toBe(200);
+			expect(fontWeightLight.value).toBe(300);
+			expect(fontWeightMedium.value).toBe(500);
+			expect(fontWeightSemibold.value).toBe(600);
+			expect(fontWeightBlack.value).toBe(900);
+
+			expect(fontWeightExtralight.value).toBeLessThan(
+				fontWeightLight.value as number,
+			);
+			expect(fontWeightLight.value).toBeLessThan(
+				fontWeightMedium.value as number,
+			);
+			expect(fontWeightMedium.value).toBeLessThan(
+				fontWeightSemibold.value as number,
+			);
+			expect(fontWeightSemibold.value).toBeLessThan(
+				fontWeightBlack.value as number,
+			);
+		});
+
+		it("should have black as the heaviest numeric weight", () => {
+			const s = styleframe();
+			const fontWeights = useFontWeight(s);
+			const numericValues = Object.values(fontWeights)
+				.filter((v) => typeof v.value === "number")
+				.map((v) => v.value as number);
+			const maxValue = Math.max(...numericValues);
+
+			expect(fontWeights.fontWeightBlack.value).toBe(maxValue);
+			expect(fontWeights.fontWeightBlack.value).toBe(900);
+		});
+
+		it("should have extralight as the lightest numeric weight", () => {
+			const s = styleframe();
+			const fontWeights = useFontWeight(s);
+			const numericValues = Object.values(fontWeights)
+				.filter((v) => typeof v.value === "number")
+				.map((v) => v.value as number);
+			const minValue = Math.min(...numericValues);
+
+			expect(fontWeights.fontWeightExtralight.value).toBe(minValue);
+			expect(fontWeights.fontWeightExtralight.value).toBe(200);
+		});
+
+		it("should have CSS keyword values for normal, bold, lighter, and bolder", () => {
+			const s = styleframe();
+			const {
+				fontWeightNormal,
+				fontWeightBold,
+				fontWeightLighter,
+				fontWeightBolder,
+			} = useFontWeight(s);
+
+			expect(fontWeightNormal.value).toBe("normal");
+			expect(fontWeightBold.value).toBe("bold");
+			expect(fontWeightLighter.value).toBe("lighter");
+			expect(fontWeightBolder.value).toBe("bolder");
+		});
+	});
+
+	describe("practical usage", () => {
+		it("should work for creating typography with different font weights", () => {
+			const s = styleframe();
+			const { fontWeightNormal, fontWeightBold } = useFontWeight(s);
+
+			s.selector("p", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightNormal));
+			});
+
+			s.selector("strong, b", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightBold));
+			});
+
+			const css = consume(s.root, s.options);
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}
+
+p {
+	--font-weight: var(--font-weight--normal);
+}
+
+strong, b {
+	--font-weight: var(--font-weight--bold);
+}`);
+		});
+
+		it("should work for heading hierarchy with different weights", () => {
+			const s = styleframe();
+			const { fontWeightBlack, fontWeightBold, fontWeightSemibold } =
+				useFontWeight(s);
+
+			s.selector("h1", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightBlack));
+			});
+
+			s.selector("h2", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightBold));
+			});
+
+			s.selector("h3, h4, h5, h6", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightSemibold));
+			});
+
+			const css = consume(s.root, s.options);
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}
+
+h1 {
+	--font-weight: var(--font-weight--black);
+}
+
+h2 {
+	--font-weight: var(--font-weight--bold);
+}
+
+h3, h4, h5, h6 {
+	--font-weight: var(--font-weight--semibold);
+}`);
+		});
+
+		it("should work for theme-specific font weight overrides", () => {
+			const s = styleframe();
+			const { fontWeightNormal, fontWeightMedium } = useFontWeight(s);
+
+			s.selector(".theme-strong", ({ variable }) => {
+				variable(fontWeightNormal, s.ref(fontWeightMedium));
+			});
+
+			const css = consume(s.root, s.options);
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}
+
+.theme-strong {
+	--font-weight--normal: var(--font-weight--medium);
+}`);
+		});
+
+		it("should work with lighter and bolder relative weights", () => {
+			const s = styleframe();
+			const { fontWeightLighter, fontWeightBolder } = useFontWeight(s);
+
+			s.selector(".text-lighter", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightLighter));
+			});
+
+			s.selector(".text-bolder", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightBolder));
+			});
+
+			const css = consume(s.root, s.options);
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}
+
+.text-lighter {
+	--font-weight: var(--font-weight--lighter);
+}
+
+.text-bolder {
+	--font-weight: var(--font-weight--bolder);
+}`);
+		});
+
+		it("should work for responsive font weight adjustments", () => {
+			const s = styleframe();
+			const { fontWeightNormal, fontWeightMedium } = useFontWeight(s);
+
+			const bodyFontWeight = s.variable(
+				"body-font-weight",
+				s.ref(fontWeightNormal),
+			);
+
+			s.selector("@media (min-width: 768px)", ({ variable }) => {
+				variable(bodyFontWeight, s.ref(fontWeightMedium));
+			});
+
+			const css = consume(s.root, s.options);
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+	--body-font-weight: var(--font-weight--normal);
+}
+
+@media (min-width: 768px) {
+	--body-font-weight: var(--font-weight--medium);
+}`);
+		});
+
+		it("should work for light text on dark backgrounds", () => {
+			const s = styleframe();
+			const { fontWeightLight, fontWeightExtralight } = useFontWeight(s);
+
+			s.selector(".dark-theme", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightLight));
+			});
+
+			s.selector(".dark-theme .text-subtle", ({ variable }) => {
+				variable("font-weight", s.ref(fontWeightExtralight));
+			});
+
+			const css = consume(s.root, s.options);
+			expect(css).toEqual(`:root {
+	--font-weight--extralight: 200;
+	--font-weight--light: 300;
+	--font-weight--normal: normal;
+	--font-weight--medium: 500;
+	--font-weight--semibold: 600;
+	--font-weight--bold: bold;
+	--font-weight--black: 900;
+	--font-weight--lighter: lighter;
+	--font-weight--bolder: bolder;
+	--font-weight--inherit: inherit;
+	--font-weight: var(--font-weight--normal);
+}
+
+.dark-theme {
+	--font-weight: var(--font-weight--light);
+}
+
+.dark-theme .text-subtle {
+	--font-weight: var(--font-weight--extralight);
+}`);
+		});
+	});
+});

package/src/variables/useFontWeight.ts

@@ -0,0 +1,55 @@
+import { createUseVariable } from "../utils";
+
+export const defaultFontWeightValues = {
+	default: "@normal",
+	extralight: 200,
+	light: 300,
+	normal: "normal",
+	medium: 500,
+	semibold: 600,
+	bold: "bold",
+	black: 900,
+	lighter: "lighter",
+	bolder: "bolder",
+	inherit: "inherit",
+};
+
+/**
+ * Create a set of font-weight variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useFontWeight } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   fontWeightExtralight,
+ *   fontWeightLight,
+ *   fontWeightNormal,
+ *   fontWeightMedium,
+ *   fontWeightSemibold,
+ *   fontWeightBold,
+ *   fontWeightBlack,
+ *   fontWeightLighter,
+ *   fontWeightBolder,
+ *   fontWeight,
+ * } = useFontWeight(s, {
+ *   default: "normal",
+ *   extralight: 200,
+ *   light: 300,
+ *   normal: "normal",
+ *   medium: 500,
+ *   semibold: 600,
+ *   bold: 700,
+ *   black: 900,
+ *   lighter: "lighter",
+ *   bolder: "bolder",
+ *   inherit: "inherit",
+ * });
+ * ```
+ */
+export const useFontWeight = createUseVariable("font-weight", {
+	defaults: defaultFontWeightValues,
+});