@styleframe/theme 1.0.1 → 1.0.3

package/src/variables/useBorderWidth.test.ts

@@ -1,535 +0,0 @@
-import type { Variable } from "@styleframe/core";
-import { styleframe } from "@styleframe/core";
-import { consume } from "@styleframe/transpiler";
-import { defaultBorderWidthValues, useBorderWidth } from "./useBorderWidth";
-
-describe("useBorderWidth", () => {
-	it("should create all border width variables with correct names and values", () => {
-		const s = styleframe();
-		const {
-			borderWidthNone,
-			borderWidthThin,
-			borderWidthMedium,
-			borderWidthThick,
-			borderWidth,
-		} = useBorderWidth(s);
-
-		expect(borderWidthNone).toEqual({
-			type: "variable",
-			name: "border-width--none",
-			value: 0,
-		});
-
-		expect(borderWidthThin).toEqual({
-			type: "variable",
-			name: "border-width--thin",
-			value: "thin",
-		});
-
-		expect(borderWidthMedium).toEqual({
-			type: "variable",
-			name: "border-width--medium",
-			value: "medium",
-		});
-
-		expect(borderWidthThick).toEqual({
-			type: "variable",
-			name: "border-width--thick",
-			value: "thick",
-		});
-
-		expect(borderWidth).toEqual({
-			type: "variable",
-			name: "border-width",
-			value: {
-				type: "reference",
-				name: "border-width--thin",
-				fallback: undefined,
-			},
-		});
-	});
-
-	it("should add all border width variables to root", () => {
-		const s = styleframe();
-		useBorderWidth(s);
-
-		expect(s.root.variables).toHaveLength(5);
-		expect(s.root.variables[0]?.name).toBe("border-width--none");
-		expect(s.root.variables[1]?.name).toBe("border-width--thin");
-		expect(s.root.variables[2]?.name).toBe("border-width--medium");
-		expect(s.root.variables[3]?.name).toBe("border-width--thick");
-		expect(s.root.variables[4]?.name).toBe("border-width");
-	});
-
-	it("should return all border width variables in an object", () => {
-		const s = styleframe();
-		const borderWidths = useBorderWidth(s);
-
-		expect(Object.keys(borderWidths)).toEqual([
-			"borderWidthNone",
-			"borderWidthThin",
-			"borderWidthMedium",
-			"borderWidthThick",
-			"borderWidth",
-		]);
-	});
-
-	it("should compile to correct CSS output using consume", () => {
-		const s = styleframe();
-		useBorderWidth(s);
-
-		const css = consume(s.root, s.options);
-
-		expect(css).toBe(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}`);
-	});
-
-	it("should compile individual border width variable to correct CSS", () => {
-		const s = styleframe();
-		const { borderWidthMedium } = useBorderWidth(s);
-
-		const css = consume(borderWidthMedium, s.options);
-
-		expect(css).toBe("--border-width--medium: medium;");
-	});
-
-	it("should not create duplicate variables when called multiple times", () => {
-		const s = styleframe();
-		const borderWidths1 = useBorderWidth(s);
-		const borderWidths2 = useBorderWidth(s);
-
-		// Should return the same variables (default: true behavior)
-		expect(borderWidths1.borderWidthThin).toBe(borderWidths2.borderWidthThin);
-		expect(borderWidths1.borderWidth).toBe(borderWidths2.borderWidth);
-		expect(s.root.variables).toHaveLength(5);
-	});
-
-	it("should allow border width variables to be used as references", () => {
-		const s = styleframe();
-		const { borderWidthThick } = useBorderWidth(s);
-
-		const customBorderWidth = s.variable(
-			"custom-border-width",
-			s.ref(borderWidthThick),
-		);
-
-		expect(customBorderWidth.value).toEqual({
-			type: "reference",
-			name: "border-width--thick",
-			fallback: undefined,
-		});
-
-		const css = consume(s.root, s.options);
-		expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-	--custom-border-width: var(--border-width--thick);
-}`);
-	});
-
-	it("should work with selector overrides", () => {
-		const s = styleframe();
-		const { borderWidthThin } = useBorderWidth(s);
-
-		s.selector(".custom-border-width", ({ variable }) => {
-			variable(borderWidthThin, "2px");
-		});
-
-		const css = consume(s.root, s.options);
-
-		expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}
-
-.custom-border-width {
-	--border-width--thin: 2px;
-}`);
-	});
-
-	describe("type safety", () => {
-		it("should preserve exact border width variable names in return type", () => {
-			const s = styleframe();
-			const borderWidths = useBorderWidth(s);
-
-			// Type assertions to verify the generic types are preserved
-			const none: Variable<"border-width--none"> = borderWidths.borderWidthNone;
-			const thin: Variable<"border-width--thin"> = borderWidths.borderWidthThin;
-			const medium: Variable<"border-width--medium"> =
-				borderWidths.borderWidthMedium;
-			const thick: Variable<"border-width--thick"> =
-				borderWidths.borderWidthThick;
-			const borderWidth: Variable<"border-width"> = borderWidths.borderWidth;
-
-			expect(none.name).toBe("border-width--none");
-			expect(thin.name).toBe("border-width--thin");
-			expect(medium.name).toBe("border-width--medium");
-			expect(thick.name).toBe("border-width--thick");
-			expect(borderWidth.name).toBe("border-width");
-		});
-
-		it("should have correct value types", () => {
-			const s = styleframe();
-			const borderWidths = useBorderWidth(s);
-
-			expect(typeof borderWidths.borderWidthNone.value).toBe("number");
-			expect(typeof borderWidths.borderWidthThin.value).toBe("string");
-			expect(typeof borderWidths.borderWidthMedium.value).toBe("string");
-			expect(typeof borderWidths.borderWidthThick.value).toBe("string");
-			expect(typeof borderWidths.borderWidth.value).toBe("object");
-		});
-	});
-
-	describe("default border width", () => {
-		it("should create a default border width variable referencing thin by default", () => {
-			const s = styleframe();
-			const { borderWidth } = useBorderWidth(s);
-
-			expect(borderWidth).toEqual({
-				type: "variable",
-				name: "border-width",
-				value: {
-					type: "reference",
-					name: "border-width--thin",
-					fallback: undefined,
-				},
-			});
-		});
-
-		it("should allow customizing the default border width", () => {
-			const s = styleframe();
-			const { borderWidth } = useBorderWidth(s, {
-				...defaultBorderWidthValues,
-				default: "@medium",
-			});
-
-			expect(borderWidth.value).toEqual({
-				type: "reference",
-				name: "border-width--medium",
-				fallback: undefined,
-			});
-		});
-
-		it("should compile default border width to CSS correctly", () => {
-			const s = styleframe();
-			useBorderWidth(s, {
-				...defaultBorderWidthValues,
-				default: "@thick",
-			});
-
-			const css = consume(s.root, s.options);
-
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thick);
-}`);
-		});
-
-		it("should work with different default border widths", () => {
-			const borderWidthNames = ["none", "thin", "medium", "thick"];
-
-			for (const borderWidthName of borderWidthNames) {
-				const s = styleframe();
-				const { borderWidth } = useBorderWidth(s, {
-					...defaultBorderWidthValues,
-					default: `@${borderWidthName}`,
-				});
-
-				expect(borderWidth.value).toEqual({
-					type: "reference",
-					name: `border-width--${borderWidthName}`,
-					fallback: undefined,
-				});
-			}
-		});
-	});
-
-	describe("border width values", () => {
-		it("should have correct CSS keyword values", () => {
-			const s = styleframe();
-			const {
-				borderWidthNone,
-				borderWidthThin,
-				borderWidthMedium,
-				borderWidthThick,
-			} = useBorderWidth(s);
-
-			expect(borderWidthNone.value).toBe(0);
-			expect(borderWidthThin.value).toBe("thin");
-			expect(borderWidthMedium.value).toBe("medium");
-			expect(borderWidthThick.value).toBe("thick");
-		});
-
-		it("should have all standard CSS border-width values", () => {
-			const s = styleframe();
-			const borderWidths = useBorderWidth(s);
-			const values = [
-				borderWidths.borderWidthNone.value,
-				borderWidths.borderWidthThin.value,
-				borderWidths.borderWidthMedium.value,
-				borderWidths.borderWidthThick.value,
-			];
-
-			const expectedValues = [0, "thin", "medium", "thick"];
-
-			expect(values).toEqual(expectedValues);
-		});
-
-		it("should have none as zero value", () => {
-			const s = styleframe();
-			const { borderWidthNone } = useBorderWidth(s);
-
-			expect(borderWidthNone.value).toBe(0);
-			expect(typeof borderWidthNone.value).toBe("number");
-		});
-	});
-
-	describe("practical usage", () => {
-		it("should work for creating borders with different widths", () => {
-			const s = styleframe();
-			const { borderWidthThin, borderWidthThick } = useBorderWidth(s);
-
-			s.selector(".card", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthThin));
-			});
-
-			s.selector(".emphasis", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthThick));
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}
-
-.card {
-	--border-width: var(--border-width--thin);
-}
-
-.emphasis {
-	--border-width: var(--border-width--thick);
-}`);
-		});
-
-		it("should work for responsive border width adjustments", () => {
-			const s = styleframe();
-			const { borderWidthThin, borderWidthMedium } = useBorderWidth(s);
-
-			const buttonBorderWidth = s.variable(
-				"button-border-width",
-				s.ref(borderWidthThin),
-			);
-
-			s.selector("@media (min-width: 768px)", ({ variable }) => {
-				variable(buttonBorderWidth, s.ref(borderWidthMedium));
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-	--button-border-width: var(--border-width--thin);
-}
-
-@media (min-width: 768px) {
-	--button-border-width: var(--border-width--medium);
-}`);
-		});
-
-		it("should work for theme-specific border width overrides", () => {
-			const s = styleframe();
-			const { borderWidthThin, borderWidthThick } = useBorderWidth(s);
-
-			s.selector(".theme-bold", ({ variable }) => {
-				variable(borderWidthThin, s.ref(borderWidthThick));
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}
-
-.theme-bold {
-	--border-width--thin: var(--border-width--thick);
-}`);
-		});
-
-		it("should work for state-specific border widths", () => {
-			const s = styleframe();
-			const { borderWidthThin, borderWidthMedium, borderWidthNone } =
-				useBorderWidth(s);
-
-			s.selector(".input", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthThin));
-			});
-
-			s.selector(".input:focus", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthMedium));
-			});
-
-			s.selector(".input:disabled", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthNone));
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}
-
-.input {
-	--border-width: var(--border-width--thin);
-}
-
-.input:focus {
-	--border-width: var(--border-width--medium);
-}
-
-.input:disabled {
-	--border-width: var(--border-width--none);
-}`);
-		});
-
-		it("should work for combining border widths with other border properties", () => {
-			const s = styleframe();
-			const { borderWidthThin, borderWidthThick } = useBorderWidth(s);
-
-			const borderStyle = s.variable("border-style", "solid");
-			s.variable("border-color", "#000");
-
-			s.selector(".box", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthThin));
-			});
-
-			s.selector(".box-fancy", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthThick));
-				variable(borderStyle, "double");
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-	--border-style: solid;
-	--border-color: #000;
-}
-
-.box {
-	--border-width: var(--border-width--thin);
-}
-
-.box-fancy {
-	--border-width: var(--border-width--thick);
-	--border-style: double;
-}`);
-		});
-
-		it("should work with custom pixel values for overrides", () => {
-			const s = styleframe();
-			const { borderWidthThin } = useBorderWidth(s);
-
-			s.selector(".custom", ({ variable }) => {
-				variable(borderWidthThin, "1px");
-			});
-
-			s.selector(".custom-thick", ({ variable }) => {
-				variable(borderWidthThin, "3px");
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}
-
-.custom {
-	--border-width--thin: 1px;
-}
-
-.custom-thick {
-	--border-width--thin: 3px;
-}`);
-		});
-
-		it("should work for removing borders with none value", () => {
-			const s = styleframe();
-			const { borderWidthNone } = useBorderWidth(s);
-
-			s.selector(".no-border", ({ variable }) => {
-				variable("border-width", s.ref(borderWidthNone));
-			});
-
-			const css = consume(s.root, s.options);
-			expect(css).toEqual(`:root {
-	--border-width--none: 0;
-	--border-width--thin: thin;
-	--border-width--medium: medium;
-	--border-width--thick: thick;
-	--border-width: var(--border-width--thin);
-}
-
-.no-border {
-	--border-width: var(--border-width--none);
-}`);
-		});
-	});
-
-	describe("border width value relationships", () => {
-		it("should have none as the smallest value", () => {
-			const s = styleframe();
-			const { borderWidthNone } = useBorderWidth(s);
-
-			expect(borderWidthNone.value).toBe(0);
-		});
-
-		it("should have semantic progression from thin to thick", () => {
-			const s = styleframe();
-			const { borderWidthThin, borderWidthMedium, borderWidthThick } =
-				useBorderWidth(s);
-
-			// Verify semantic naming progression exists
-			expect(borderWidthThin.value).toBe("thin");
-			expect(borderWidthMedium.value).toBe("medium");
-			expect(borderWidthThick.value).toBe("thick");
-
-			// These CSS keywords have defined progressive values
-			expect(borderWidthThin.name).toContain("thin");
-			expect(borderWidthMedium.name).toContain("medium");
-			expect(borderWidthThick.name).toContain("thick");
-		});
-	});
-});

package/src/variables/useBorderWidth.ts

@@ -1,38 +0,0 @@
-import { createUseVariable } from "../utils";
-
-export const defaultBorderWidthValues = {
-	default: "@thin",
-	none: 0,
-	thin: "thin",
-	medium: "medium",
-	thick: "thick",
-};
-
-/**
- * Create a set of border-width variables for use in a Styleframe instance.
- *
- * @usage
- * ```typescript
- * import { styleframe } from "styleframe";
- * import { useBorderWidth } from "styleframe/theme";
- *
- * const s = styleframe();
- *
- * const {
- *   borderWidthNone,
- *   borderWidthThin,
- *   borderWidthMedium,
- *   borderWidthThick,
- *   borderWidth,
- * } = useBorderWidth(s, {
- *   default: "thin",
- *   none: 0,
- *   thin: "thin",
- *   medium: "medium",
- *   thick: "thick",
- * });
- * ```
- */
-export const useBorderWidth = createUseVariable("border-width", {
-	defaults: defaultBorderWidthValues,
-});