@styleframe/theme 1.0.1 → 1.0.3

package/src/variables/useBoxShadow.test.ts

@@ -1,336 +0,0 @@
-import type { Variable } from "@styleframe/core";
-import { styleframe } from "@styleframe/core";
-import { consume } from "@styleframe/transpiler";
-import { useBoxShadow } from "./useBoxShadow";
-
-describe("useBoxShadow", () => {
-	it("should create a single box-shadow variable with 'default' key", () => {
-		const s = styleframe();
-		const { boxShadow } = useBoxShadow(s, {
-			default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-		});
-
-		expect(boxShadow).toEqual({
-			type: "variable",
-			name: "box-shadow",
-			value: "0 2px 4px rgba(0, 0, 0, 0.1)",
-		});
-
-		const css = consume(boxShadow, s.options);
-		expect(css).toBe(`--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);`);
-	});
-
-	it("should create box-shadow variable with modifier for non-default keys", () => {
-		const s = styleframe();
-		const { boxShadowSm } = useBoxShadow(s, {
-			sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-		});
-
-		expect(boxShadowSm).toEqual({
-			type: "variable",
-			name: "box-shadow--sm",
-			value: "0 1px 2px rgba(0, 0, 0, 0.05)",
-		});
-
-		const css = consume(boxShadowSm, s.options);
-		expect(css).toBe(`--box-shadow--sm: 0 1px 2px rgba(0, 0, 0, 0.05);`);
-	});
-
-	it("should create multiple box-shadow variables", () => {
-		const s = styleframe();
-		const { boxShadow, boxShadowSm, boxShadowMd, boxShadowLg } = useBoxShadow(
-			s,
-			{
-				default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-				sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-				md: "0 4px 8px rgba(0, 0, 0, 0.1)",
-				lg: "0 8px 16px rgba(0, 0, 0, 0.15)",
-			},
-		);
-
-		expect(boxShadow).toEqual({
-			type: "variable",
-			name: "box-shadow",
-			value: "0 2px 4px rgba(0, 0, 0, 0.1)",
-		});
-
-		expect(boxShadowSm).toEqual({
-			type: "variable",
-			name: "box-shadow--sm",
-			value: "0 1px 2px rgba(0, 0, 0, 0.05)",
-		});
-
-		expect(boxShadowMd).toEqual({
-			type: "variable",
-			name: "box-shadow--md",
-			value: "0 4px 8px rgba(0, 0, 0, 0.1)",
-		});
-
-		expect(boxShadowLg).toEqual({
-			type: "variable",
-			name: "box-shadow--lg",
-			value: "0 8px 16px rgba(0, 0, 0, 0.15)",
-		});
-	});
-
-	it("should add variables to root", () => {
-		const s = styleframe();
-		useBoxShadow(s, {
-			default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-			sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-		});
-
-		expect(s.root.variables).toHaveLength(2);
-		expect(s.root.variables[0]?.name).toBe("box-shadow");
-		expect(s.root.variables[1]?.name).toBe("box-shadow--sm");
-	});
-
-	it("should handle kebab-case box-shadow names", () => {
-		const s = styleframe();
-		const { boxShadowExtraLarge } = useBoxShadow(s, {
-			"extra-large": "0 20px 40px rgba(0, 0, 0, 0.2)",
-		});
-
-		expect(boxShadowExtraLarge).toEqual({
-			type: "variable",
-			name: "box-shadow--extra-large",
-			value: "0 20px 40px rgba(0, 0, 0, 0.2)",
-		});
-	});
-
-	it("should handle snake_case box-shadow names", () => {
-		const s = styleframe();
-		const { boxShadowCardElevation } = useBoxShadow(s, {
-			card_elevation: "0 4px 6px rgba(0, 0, 0, 0.1)",
-		});
-
-		expect(boxShadowCardElevation).toEqual({
-			type: "variable",
-			name: "box-shadow--card_elevation",
-			value: "0 4px 6px rgba(0, 0, 0, 0.1)",
-		});
-	});
-
-	it("should handle numeric box-shadow names", () => {
-		const s = styleframe();
-		const { boxShadow100 } = useBoxShadow(s, {
-			"100": "0 1px 3px rgba(0, 0, 0, 0.12)",
-		});
-
-		expect(boxShadow100).toEqual({
-			type: "variable",
-			name: "box-shadow--100",
-			value: "0 1px 3px rgba(0, 0, 0, 0.12)",
-		});
-	});
-
-	it("should handle none value", () => {
-		const s = styleframe();
-		const { boxShadowNone } = useBoxShadow(s, {
-			none: "none",
-		});
-
-		expect(boxShadowNone).toEqual({
-			type: "variable",
-			name: "box-shadow--none",
-			value: "none",
-		});
-	});
-
-	it("should handle inset shadows", () => {
-		const s = styleframe();
-		const { boxShadowInset } = useBoxShadow(s, {
-			inset: "inset 0 2px 4px rgba(0, 0, 0, 0.1)",
-		});
-
-		expect(boxShadowInset).toEqual({
-			type: "variable",
-			name: "box-shadow--inset",
-			value: "inset 0 2px 4px rgba(0, 0, 0, 0.1)",
-		});
-	});
-
-	it("should handle multiple shadows", () => {
-		const s = styleframe();
-		const { boxShadowMultiple } = useBoxShadow(s, {
-			multiple: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
-		});
-
-		expect(boxShadowMultiple.value).toBe(
-			"0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
-		);
-	});
-
-	it("should handle colored shadows", () => {
-		const s = styleframe();
-		const { boxShadowColored } = useBoxShadow(s, {
-			colored: "0 4px 8px rgba(59, 130, 246, 0.3)",
-		});
-
-		expect(boxShadowColored.value).toBe("0 4px 8px rgba(59, 130, 246, 0.3)");
-	});
-
-	it("should handle spread radius", () => {
-		const s = styleframe();
-		const { boxShadowSpread } = useBoxShadow(s, {
-			spread: "0 4px 8px 2px rgba(0, 0, 0, 0.1)",
-		});
-
-		expect(boxShadowSpread.value).toBe("0 4px 8px 2px rgba(0, 0, 0, 0.1)");
-	});
-
-	it("should handle hex color values", () => {
-		const s = styleframe();
-		const { boxShadowHex } = useBoxShadow(s, {
-			hex: "0 2px 4px #00000019",
-		});
-
-		expect(boxShadowHex.value).toBe("0 2px 4px #00000019");
-	});
-
-	it("should handle hsl color values", () => {
-		const s = styleframe();
-		const { boxShadowHsl } = useBoxShadow(s, {
-			hsl: "0 4px 8px hsl(0, 0%, 0%, 0.1)",
-		});
-
-		expect(boxShadowHsl.value).toBe("0 4px 8px hsl(0, 0%, 0%, 0.1)");
-	});
-
-	it("should handle CSS variables in shadow values", () => {
-		const s = styleframe();
-		const { boxShadowVar } = useBoxShadow(s, {
-			var: "0 2px 4px var(--shadow-color)",
-		});
-
-		expect(boxShadowVar.value).toBe("0 2px 4px var(--shadow-color)");
-	});
-
-	it("should handle empty box-shadow object", () => {
-		const s = styleframe();
-		const result = useBoxShadow(s, {});
-
-		expect(result).toEqual({});
-		expect(s.root.variables).toHaveLength(0);
-	});
-
-	it("should handle box-shadow references", () => {
-		const s = styleframe();
-		const baseBoxShadow = s.variable(
-			"base-box-shadow",
-			"0 2px 4px rgba(0, 0, 0, 0.1)",
-		);
-		const { boxShadow } = useBoxShadow(s, {
-			default: s.ref(baseBoxShadow),
-		});
-
-		expect(boxShadow.value).toEqual({
-			type: "reference",
-			name: "base-box-shadow",
-			fallback: undefined,
-		});
-	});
-
-	it("should compile to correct CSS output using consume", () => {
-		const s = styleframe();
-		useBoxShadow(s, {
-			default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-			none: "none",
-			sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-			md: "0 4px 8px rgba(0, 0, 0, 0.1)",
-			lg: "0 8px 16px rgba(0, 0, 0, 0.15)",
-		});
-
-		const css = consume(s.root, s.options);
-
-		expect(css).toBe(`:root {
-	--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	--box-shadow--none: none;
-	--box-shadow--sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-	--box-shadow--md: 0 4px 8px rgba(0, 0, 0, 0.1);
-	--box-shadow--lg: 0 8px 16px rgba(0, 0, 0, 0.15);
-}`);
-	});
-
-	it("should handle a complete box-shadow scale", () => {
-		const s = styleframe();
-		const shadows = useBoxShadow(s, {
-			none: "none",
-			xs: "0 1px 2px rgba(0, 0, 0, 0.05)",
-			sm: "0 1px 3px rgba(0, 0, 0, 0.1)",
-			default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-			md: "0 4px 8px rgba(0, 0, 0, 0.1)",
-			lg: "0 8px 16px rgba(0, 0, 0, 0.15)",
-			xl: "0 12px 24px rgba(0, 0, 0, 0.2)",
-			"2xl": "0 16px 32px rgba(0, 0, 0, 0.25)",
-			"3xl": "0 24px 48px rgba(0, 0, 0, 0.3)",
-		});
-
-		expect(shadows.boxShadowNone.value).toBe("none");
-		expect(shadows.boxShadowXs.value).toBe("0 1px 2px rgba(0, 0, 0, 0.05)");
-		expect(shadows.boxShadowSm.value).toBe("0 1px 3px rgba(0, 0, 0, 0.1)");
-		expect(shadows.boxShadow.value).toBe("0 2px 4px rgba(0, 0, 0, 0.1)");
-		expect(shadows.boxShadowMd.value).toBe("0 4px 8px rgba(0, 0, 0, 0.1)");
-		expect(shadows.boxShadowLg.value).toBe("0 8px 16px rgba(0, 0, 0, 0.15)");
-		expect(shadows.boxShadowXl.value).toBe("0 12px 24px rgba(0, 0, 0, 0.2)");
-		expect(shadows.boxShadow2xl.value).toBe("0 16px 32px rgba(0, 0, 0, 0.25)");
-		expect(shadows.boxShadow3xl.value).toBe("0 24px 48px rgba(0, 0, 0, 0.3)");
-	});
-
-	it("should handle elevation system", () => {
-		const s = styleframe();
-		const shadows = useBoxShadow(s, {
-			"1": "0 1px 3px rgba(0, 0, 0, 0.12)",
-			"2": "0 3px 6px rgba(0, 0, 0, 0.16)",
-			"3": "0 10px 20px rgba(0, 0, 0, 0.19)",
-			"4": "0 14px 28px rgba(0, 0, 0, 0.25)",
-			"5": "0 19px 38px rgba(0, 0, 0, 0.30)",
-		});
-
-		expect(shadows.boxShadow1.value).toBe("0 1px 3px rgba(0, 0, 0, 0.12)");
-		expect(shadows.boxShadow2.value).toBe("0 3px 6px rgba(0, 0, 0, 0.16)");
-		expect(shadows.boxShadow3.value).toBe("0 10px 20px rgba(0, 0, 0, 0.19)");
-		expect(shadows.boxShadow4.value).toBe("0 14px 28px rgba(0, 0, 0, 0.25)");
-		expect(shadows.boxShadow5.value).toBe("0 19px 38px rgba(0, 0, 0, 0.30)");
-	});
-
-	describe("type safety", () => {
-		it("should preserve exact box-shadow names in return type", () => {
-			const s = styleframe();
-			const shadows = useBoxShadow(s, {
-				default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-				sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-			});
-
-			// Type assertions to verify the generic types are preserved
-			const defaultBoxShadow: Variable<"box-shadow"> = shadows.boxShadow;
-			const smBoxShadow: Variable<"box-shadow--sm"> = shadows.boxShadowSm;
-
-			expect(defaultBoxShadow.name).toBe("box-shadow");
-			expect(smBoxShadow.name).toBe("box-shadow--sm");
-		});
-
-		it("should maintain type information for kebab-case names", () => {
-			const s = styleframe();
-			const { boxShadowExtraLarge } = useBoxShadow(s, {
-				"extra-large": "0 20px 40px rgba(0, 0, 0, 0.2)",
-			});
-
-			const typed: Variable<"box-shadow--extra-large"> = boxShadowExtraLarge;
-			expect(typed.name).toBe("box-shadow--extra-large");
-		});
-
-		it("should work with const assertion", () => {
-			const s = styleframe();
-			const boxShadowConfig = {
-				default: "0 2px 4px rgba(0, 0, 0, 0.1)",
-				sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-			} as const;
-
-			const shadows = useBoxShadow(s, boxShadowConfig);
-
-			expect(shadows.boxShadow.name).toBe("box-shadow");
-			expect(shadows.boxShadowSm.name).toBe("box-shadow--sm");
-		});
-	});
-});

package/src/variables/useBoxShadow.ts

@@ -1,54 +0,0 @@
-import { createUseVariable } from "../utils";
-
-export const defaultBoxShadowValues = {
-	default: "@md",
-	none: "none",
-	// subtle card / surfaces
-	xs: "0 1px 1px oklch(var(--box-shadow-color, 0 0 0) / 0.12), 0 2px 2px -1px oklch(var(--box-shadow-color, 0 0 0) / 0.06)",
-	// default
-	sm: "0 1px 2px oklch(var(--box-shadow-color, 0 0 0) / 0.14), 0 3px 6px -1px oklch(var(--box-shadow-color, 0 0 0) / 0.10)",
-	// popover / raised button
-	md: "0 2px 4px oklch(var(--box-shadow-color, 0 0 0) / 0.16), 0 8px 16px -4px oklch(var(--box-shadow-color, 0 0 0) / 0.10)",
-	// modal / floating panel
-	lg: "0 4px 8px oklch(var(--box-shadow-color, 0 0 0) / 0.18), 0 16px 24px -8px oklch(var(--box-shadow-color, 0 0 0) / 0.12)",
-	// drawer / high elevation
-	xl: "0 8px 12px oklch(var(--box-shadow-color, 0 0 0) / 0.20), 0 24px 48px -12px oklch(var(--box-shadow-color, 0 0 0) / 0.14)",
-	// highest elevation / toast over content
-	"2xl":
-		"0 12px 16px oklch(var(--box-shadow-color, 0 0 0) / 0.22), 0 32px 64px -16px oklch(var(--box-shadow-color, 0 0 0) / 0.16)",
-	// borders-for-free on dark backgrounds and inset wells
-	inner:
-		"inset 0 1px 0 oklch(var(--box-shadow-color, 0 0 0) / 0.08), inset 0 0 0 1px oklch(var(--box-shadow-color, 0 0 0) / 0.06)",
-	// focus rings that still read as elevation
-	ring: "0 0 0 1px oklch(var(--box-shadow-color, 0 0 0) / 0.12), 0 1px 2px oklch(var(--box-shadow-color, 0 0 0) / 0.08)",
-};
-
-/**
- * Create a set of box-shadow variables for use in a Styleframe instance.
- *
- * @usage
- * ```typescript
- * import { styleframe } from "styleframe";
- * import { useBoxShadow } from "styleframe/theme";
- *
- * const s = styleframe();
- * const { variable } = s;
- *
- * const boxShadowColor = s.variable("box-shadow-color", "0 0 0");
- *
- * const {
- *   boxShadow, // Variable<'box-shadow'>
- *   boxShadowSm, // Variable<'box-shadow--sm'>
- *   boxShadowMd, // Variable<'box-shadow--md'>
- *   boxShadowLg, // Variable<'box-shadow--lg'>
- * } = useBoxShadow(s, {
- *   default: '@md',
- *   sm: css`0 1px 2px oklcha(${ref(boxShadowColor)} / 0.05)`,
- *   md: css`0 4px 8px oklcha(${ref(boxShadowColor)} / 0.1)`,
- *   lg: css`0 8px 16px oklcha(${ref(boxShadowColor)} / 0.15)`,
- * });
- * ```
- */
-export const useBoxShadow = createUseVariable("box-shadow", {
-	defaults: defaultBoxShadowValues,
-});