@styleframe/theme 1.0.0

package/src/variables/useScalePowers.test.ts

@@ -0,0 +1,412 @@
+import type { TokenValue } from "@styleframe/core";
+import { styleframe } from "@styleframe/core";
+import { consume } from "@styleframe/transpiler";
+import { defaultScalePowerValues } from "../constants/scale";
+import { useScale } from "./useScale";
+import { useScalePowers } from "./useScalePowers";
+
+describe("useScalePowers", () => {
+	it("should create scale powers with default powers array", () => {
+		const s = styleframe();
+		const { scaleGolden } = useScale(s);
+		const powers = useScalePowers(s, scaleGolden, defaultScalePowerValues);
+
+		// Keys are in insertion order
+		expect(Object.keys(powers).length).toBe(8);
+		expect(powers[-2]).toBeDefined();
+		expect(powers[-1]).toBeDefined();
+		expect(powers[0]).toBeDefined();
+		expect(powers[1]).toBeDefined();
+		expect(powers[2]).toBeDefined();
+		expect(powers[3]).toBeDefined();
+		expect(powers[4]).toBeDefined();
+		expect(powers[5]).toBeDefined();
+	});
+
+	it("should create CSS templates for each power", () => {
+		const s = styleframe();
+		const { scaleMajorThird } = useScale(s);
+		const powers = useScalePowers(s, scaleMajorThird, [1, 2, 3]);
+
+		expect(powers[1]).toHaveProperty("type", "css");
+		expect(powers[2]).toHaveProperty("type", "css");
+		expect(powers[3]).toHaveProperty("type", "css");
+	});
+
+	it("should handle custom powers array", () => {
+		const s = styleframe();
+		const { scaleGolden } = useScale(s);
+		const powers = useScalePowers(s, scaleGolden, [0, 1, 10]);
+
+		expect(Object.keys(powers).length).toBe(3);
+		expect(powers[0]).toBeDefined();
+		expect(powers[1]).toBeDefined();
+		expect(powers[10]).toBeDefined();
+	});
+
+	it("should handle single power", () => {
+		const s = styleframe();
+		const { scaleMajorSecond } = useScale(s);
+		const powers = useScalePowers(s, scaleMajorSecond, [2]);
+
+		expect(Object.keys(powers)).toEqual(["2"]);
+		expect(powers[2]).toBeDefined();
+	});
+
+	it("should handle empty powers array", () => {
+		const s = styleframe();
+		const { scaleMinorThird } = useScale(s);
+		const powers = useScalePowers(s, scaleMinorThird, []);
+
+		expect(Object.keys(powers)).toEqual([]);
+		expect(powers).toEqual({});
+	});
+
+	it("should work with different scale variables", () => {
+		const s = styleframe();
+		const { scaleMinorSecond, scaleMajorSecond, scaleGolden } = useScale(s);
+
+		const powers1 = useScalePowers(s, scaleMinorSecond, [1, 2]);
+		const powers2 = useScalePowers(s, scaleMajorSecond, [1, 2]);
+		const powers3 = useScalePowers(s, scaleGolden, [1, 2]);
+
+		expect(powers1[1]).toBeDefined();
+		expect(powers2[1]).toBeDefined();
+		expect(powers3[1]).toBeDefined();
+	});
+
+	it("should compile to correct CSS with positive powers", () => {
+		const s = styleframe();
+		const { scaleMajorThird } = useScale(s);
+		const powers = useScalePowers(s, scaleMajorThird, [1, 2] as const);
+
+		const baseSize = s.variable("base", "1rem");
+		s.selector(".scale-1", ({ variable }) => {
+			variable("font-size", s.css`calc(${s.ref(baseSize)} * ${powers[1]})`);
+		});
+		s.selector(".scale-2", ({ variable }) => {
+			variable("font-size", s.css`calc(${s.ref(baseSize)} * (${powers[2]}))`);
+		});
+
+		const css = consume(s.root, s.options);
+
+		expect(css).toEqual(`:root {
+	--scale--minor-second: 1.067;
+	--scale--major-second: 1.125;
+	--scale--minor-third: 1.2;
+	--scale--major-third: 1.25;
+	--scale--perfect-fourth: 1.333;
+	--scale--augmented-fourth: 1.414;
+	--scale--perfect-fifth: 1.5;
+	--scale--golden: 1.618;
+	--scale: var(--scale--minor-third);
+	--base: 1rem;
+}
+
+.scale-1 {
+	--font-size: calc(var(--base) * var(--scale--major-third));
+}
+
+.scale-2 {
+	--font-size: calc(var(--base) * (var(--scale--major-third) * var(--scale--major-third)));
+}`);
+	});
+
+	it("should compile to correct CSS with negative powers", () => {
+		const s = styleframe();
+		const { scaleGolden } = useScale(s);
+		const powers = useScalePowers(s, scaleGolden, [-1, -2] as const);
+
+		const baseSize = s.variable("base", "1rem");
+		s.selector(".scale-neg-1", ({ variable }) => {
+			variable("font-size", s.css`calc(${s.ref(baseSize)} * ${powers[-1]})`);
+		});
+		s.selector(".scale-neg-2", ({ variable }) => {
+			variable("font-size", s.css`calc(${s.ref(baseSize)} * ${powers[-2]})`);
+		});
+
+		const css = consume(s.root, s.options);
+
+		expect(css).toEqual(`:root {
+	--scale--minor-second: 1.067;
+	--scale--major-second: 1.125;
+	--scale--minor-third: 1.2;
+	--scale--major-third: 1.25;
+	--scale--perfect-fourth: 1.333;
+	--scale--augmented-fourth: 1.414;
+	--scale--perfect-fifth: 1.5;
+	--scale--golden: 1.618;
+	--scale: var(--scale--minor-third);
+	--base: 1rem;
+}
+
+.scale-neg-1 {
+	--font-size: calc(var(--base) * 1 / var(--scale--golden));
+}
+
+.scale-neg-2 {
+	--font-size: calc(var(--base) * 1 / var(--scale--golden) / var(--scale--golden));
+}`);
+	});
+
+	it("should handle mixed positive and negative powers", () => {
+		const s = styleframe();
+		const { scalePerfectFourth } = useScale(s);
+		const powers = useScalePowers(s, scalePerfectFourth, [
+			-3, -1, 1, 3,
+		] as const);
+
+		expect(Object.keys(powers).length).toBe(4);
+		expect(powers[-3]).toBeDefined();
+		expect(powers[-1]).toBeDefined();
+		expect(powers[1]).toBeDefined();
+		expect(powers[3]).toBeDefined();
+	});
+
+	describe("type safety", () => {
+		it("should return Record<number, TokenValue>", () => {
+			const s = styleframe();
+			const { scaleGolden } = useScale(s);
+			const powers = useScalePowers(s, scaleGolden, [1, 2, 3] as const);
+
+			// Type check
+			const result: Record<number, TokenValue> = powers;
+			expect(result).toBeDefined();
+		});
+
+		it("should accept any Variable as scale parameter", () => {
+			const s = styleframe();
+			const customScale = s.variable("custom-scale", 1.5);
+			const powers = useScalePowers(s, customScale, [1, 2] as const);
+
+			expect(powers[1]).toBeDefined();
+			expect(powers[2]).toBeDefined();
+		});
+	});
+
+	describe("practical usage", () => {
+		it("should create modular typography scale", () => {
+			const s = styleframe();
+			const { scale } = useScale(s);
+
+			const powers = useScalePowers(s, scale, [-2, -1, 1, 2, 3] as const);
+
+			const fontSize = s.variable("font-size", "1rem");
+
+			s.variable(
+				"font-size-xs",
+				s.css`calc(${s.ref(fontSize)} * ${powers[-2]})`,
+			);
+			s.variable(
+				"font-size-sm",
+				s.css`calc(${s.ref(fontSize)} * ${powers[-1]})`,
+			);
+			s.variable("font-size-md", s.ref(fontSize));
+			s.variable(
+				"font-size-lg",
+				s.css`calc(${s.ref(fontSize)} * ${powers[1]})`,
+			);
+			s.variable(
+				"font-size-xl",
+				s.css`calc(${s.ref(fontSize)} * ${powers[2]})`,
+			);
+			s.variable(
+				"font-size-2xl",
+				s.css`calc(${s.ref(fontSize)} * ${powers[3]})`,
+			);
+
+			const css = consume(s.root, s.options);
+
+			expect(css).toEqual(`:root {
+	--scale--minor-second: 1.067;
+	--scale--major-second: 1.125;
+	--scale--minor-third: 1.2;
+	--scale--major-third: 1.25;
+	--scale--perfect-fourth: 1.333;
+	--scale--augmented-fourth: 1.414;
+	--scale--perfect-fifth: 1.5;
+	--scale--golden: 1.618;
+	--scale: var(--scale--minor-third);
+	--font-size: 1rem;
+	--font-size-xs: calc(var(--font-size) * 1 / var(--scale) / var(--scale));
+	--font-size-sm: calc(var(--font-size) * 1 / var(--scale));
+	--font-size-md: var(--font-size);
+	--font-size-lg: calc(var(--font-size) * var(--scale));
+	--font-size-xl: calc(var(--font-size) * var(--scale) * var(--scale));
+	--font-size-2xl: calc(var(--font-size) * var(--scale) * var(--scale) * var(--scale));
+}`);
+		});
+
+		it("should create spacing scale with golden ratio", () => {
+			const s = styleframe();
+			const { scaleGolden } = useScale(s);
+			const powers = useScalePowers(s, scaleGolden, [-1, 0, 1, 2]);
+
+			const baseSpacing = s.variable("spacing-base", "1rem");
+			s.variable(
+				"spacing-sm",
+				s.css`calc(${s.ref(baseSpacing)} * ${powers[-1]})`,
+			);
+			s.variable(
+				"spacing-md",
+				s.css`calc(${s.ref(baseSpacing)} * ${powers[0]})`,
+			);
+			s.variable(
+				"spacing-lg",
+				s.css`calc(${s.ref(baseSpacing)} * ${powers[1]})`,
+			);
+			s.variable(
+				"spacing-xl",
+				s.css`calc(${s.ref(baseSpacing)} * ${powers[2]})`,
+			);
+
+			const css = consume(s.root, s.options);
+
+			expect(css).toEqual(`:root {
+	--scale--minor-second: 1.067;
+	--scale--major-second: 1.125;
+	--scale--minor-third: 1.2;
+	--scale--major-third: 1.25;
+	--scale--perfect-fourth: 1.333;
+	--scale--augmented-fourth: 1.414;
+	--scale--perfect-fifth: 1.5;
+	--scale--golden: 1.618;
+	--scale: var(--scale--minor-third);
+	--spacing-base: 1rem;
+	--spacing-sm: calc(var(--spacing-base) * 1 / var(--scale--golden));
+	--spacing-md: calc(var(--spacing-base) * 1);
+	--spacing-lg: calc(var(--spacing-base) * var(--scale--golden));
+	--spacing-xl: calc(var(--spacing-base) * var(--scale--golden) * var(--scale--golden));
+}`);
+		});
+
+		it("should work with default scale powers constant", () => {
+			const s = styleframe();
+			const { scaleMajorSecond } = useScale(s);
+			const powers = useScalePowers(
+				s,
+				scaleMajorSecond,
+				defaultScalePowerValues,
+			);
+
+			// defaultScalePowerValues = [-2, -1, 1, 2, 3, 4, 5]
+			expect(Object.keys(powers).length).toBe(defaultScalePowerValues.length);
+			expect(powers[-2]).toBeDefined();
+			expect(powers[-1]).toBeDefined();
+			expect(powers[1]).toBeDefined();
+			expect(powers[2]).toBeDefined();
+			expect(powers[3]).toBeDefined();
+			expect(powers[4]).toBeDefined();
+			expect(powers[5]).toBeDefined();
+		});
+
+		it("should work with different scale ratios", () => {
+			const s = styleframe();
+			const { scaleMajorSecond, scaleGolden } = useScale(s);
+
+			const mobilePowers = useScalePowers(s, scaleMajorSecond, [1, 2, 3]);
+			const desktopPowers = useScalePowers(s, scaleGolden, [1, 2, 3]);
+
+			const baseSize = s.variable("size-base", "1rem");
+
+			s.selector(".mobile", ({ variable }) => {
+				variable(
+					"font-size",
+					s.css`calc(${s.ref(baseSize)} * ${mobilePowers[2]})`,
+				);
+			});
+
+			s.selector(".desktop", ({ variable }) => {
+				variable(
+					"font-size",
+					s.css`calc(${s.ref(baseSize)} * ${desktopPowers[2]})`,
+				);
+			});
+
+			const css = consume(s.root, s.options);
+
+			expect(css).toEqual(`:root {
+	--scale--minor-second: 1.067;
+	--scale--major-second: 1.125;
+	--scale--minor-third: 1.2;
+	--scale--major-third: 1.25;
+	--scale--perfect-fourth: 1.333;
+	--scale--augmented-fourth: 1.414;
+	--scale--perfect-fifth: 1.5;
+	--scale--golden: 1.618;
+	--scale: var(--scale--minor-third);
+	--size-base: 1rem;
+}
+
+.mobile {
+	--font-size: calc(var(--size-base) * var(--scale--major-second) * var(--scale--major-second));
+}
+
+.desktop {
+	--font-size: calc(var(--size-base) * var(--scale--golden) * var(--scale--golden));
+}`);
+		});
+	});
+
+	describe("edge cases", () => {
+		it("should handle power of 0", () => {
+			const s = styleframe();
+			const { scaleMajorThird } = useScale(s);
+			const powers = useScalePowers(s, scaleMajorThird, [0]);
+
+			expect(powers[0]).toBeDefined();
+			expect(powers[0]).toHaveProperty("type", "css");
+		});
+
+		it("should handle duplicate powers in array", () => {
+			const s = styleframe();
+			const { scaleMinorSecond } = useScale(s);
+			const powers = useScalePowers(s, scaleMinorSecond, [1, 1, 2, 2]);
+
+			// Should overwrite duplicates, resulting in unique keys
+			expect(Object.keys(powers).length).toBe(2);
+			expect(powers[1]).toBeDefined();
+			expect(powers[2]).toBeDefined();
+		});
+
+		it("should handle unsorted powers array", () => {
+			const s = styleframe();
+			const { scalePerfectFifth } = useScale(s);
+			const powers = useScalePowers(s, scalePerfectFifth, [3, -1, 2, -2, 1]);
+
+			expect(Object.keys(powers).length).toBe(5);
+			expect(powers[-2]).toBeDefined();
+			expect(powers[-1]).toBeDefined();
+			expect(powers[1]).toBeDefined();
+			expect(powers[2]).toBeDefined();
+			expect(powers[3]).toBeDefined();
+		});
+
+		it("should handle power of 1", () => {
+			const s = styleframe();
+			const { scaleAugmentedFourth } = useScale(s);
+			const powers = useScalePowers(s, scaleAugmentedFourth, [1]);
+
+			expect(powers[1]).toBeDefined();
+			expect(powers[1]).toHaveProperty("type", "css");
+		});
+
+		it("should handle power of -1", () => {
+			const s = styleframe();
+			const { scaleAugmentedFourth } = useScale(s);
+			const powers = useScalePowers(s, scaleAugmentedFourth, [-1]);
+
+			expect(powers[-1]).toBeDefined();
+			expect(powers[-1]).toHaveProperty("type", "css");
+		});
+
+		it("should handle large powers", () => {
+			const s = styleframe();
+			const { scaleMajorSecond } = useScale(s);
+			const powers = useScalePowers(s, scaleMajorSecond, [10, -10]);
+
+			expect(powers[10]).toBeDefined();
+			expect(powers[-10]).toBeDefined();
+		});
+	});
+});

package/src/variables/useScalePowers.ts

@@ -0,0 +1,35 @@
+import type { CSS, Styleframe, TokenValue, Variable } from "@styleframe/core";
+import { defaultScalePowerValues } from "../constants";
+
+export function useScalePowers<T extends readonly number[]>(
+	s: Styleframe,
+	scale: Variable,
+	powers: T = defaultScalePowerValues as T,
+): Record<number, TokenValue> {
+	const results: Record<number, CSS> = {};
+
+	for (const power of powers) {
+		const absPower = Math.abs(power);
+		const operator = power > 0 ? " * " : " / ";
+		const value: TokenValue[] = [];
+
+		if (power <= 0) {
+			value.push("1");
+		}
+
+		// Build the CSS value array directly
+		for (let i = 0; i < absPower; i++) {
+			if (i > 0 || power < 0) {
+				value.push(operator);
+			}
+			value.push(s.ref(scale));
+		}
+
+		results[power] = {
+			type: "css",
+			value,
+		};
+	}
+
+	return results as Record<keyof typeof powers, TokenValue>;
+}