@styleframe/theme 1.0.1 → 1.0.3

package/src/variables/useColorShade.test.ts

@@ -1,166 +0,0 @@
-import type { Variable } from "@styleframe/core";
-import { styleframe } from "@styleframe/core";
-import { consume } from "@styleframe/transpiler";
-import { useColorShade, defaultColorShadeValues } from "./useColorShade";
-
-describe("useColorShade", () => {
-	it("should create shade levels with default values", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		const shades = useColorShade(s, colorPrimary, defaultColorShadeValues);
-
-		expect(shades.colorPrimaryShade50).toEqual({
-			type: "variable",
-			name: "color--primary-shade-50",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(shades.colorPrimaryShade100).toEqual({
-			type: "variable",
-			name: "color--primary-shade-100",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(shades.colorPrimaryShade150).toEqual({
-			type: "variable",
-			name: "color--primary-shade-150",
-			value: expect.objectContaining({ type: "css" }),
-		});
-
-		const css = consume(shades.colorPrimaryShade100, s.options);
-		expect(css).toBe(
-			`--color--primary-shade-100: oklch(from var(--color--primary) calc(l - 0.1) c h / a);`,
-		);
-	});
-
-	it("should create shade levels with custom values", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		const shades = useColorShade(s, colorPrimary, {
-			25: 2.5,
-			50: 5,
-			75: 7.5,
-			100: 10,
-		} as const);
-
-		expect(shades.colorPrimaryShade25).toEqual({
-			type: "variable",
-			name: "color--primary-shade-25",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(shades.colorPrimaryShade50).toEqual({
-			type: "variable",
-			name: "color--primary-shade-50",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(shades.colorPrimaryShade75).toEqual({
-			type: "variable",
-			name: "color--primary-shade-75",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(shades.colorPrimaryShade100).toEqual({
-			type: "variable",
-			name: "color--primary-shade-100",
-			value: expect.objectContaining({ type: "css" }),
-		});
-	});
-
-	it("should compile shade levels to correct CSS output using consume", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-
-		useColorShade(s, colorPrimary, {
-			50: 5,
-			100: 10,
-		});
-
-		const css = consume(s.root, s.options);
-
-		expect(css).toBe(`:root {
-	--color--primary: #007bff;
-	--color--primary-shade-50: oklch(from var(--color--primary) calc(l - 0.05) c h / a);
-	--color--primary-shade-100: oklch(from var(--color--primary) calc(l - 0.1) c h / a);
-}`);
-	});
-
-	it("should add variables to root", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-
-		useColorShade(s, colorPrimary, {
-			50: 5,
-			100: 10,
-		} as const);
-
-		// +1 for the original color variable
-		expect(s.root.variables.length).toBeGreaterThanOrEqual(3);
-	});
-
-	it("should handle color with kebab-case name", () => {
-		const s = styleframe();
-		const colorPrimaryDark = s.variable("color--primary-dark", "#0056b3");
-		const shades = useColorShade(s, colorPrimaryDark, { 50: 5 });
-
-		expect(shades.colorPrimaryDarkShade50).toEqual({
-			type: "variable",
-			name: "color--primary-dark-shade-50",
-			value: expect.objectContaining({ type: "css" }),
-		});
-	});
-
-	it("should handle empty levels object", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		const shades = useColorShade(s, colorPrimary, {} as const);
-
-		expect(shades).toEqual({});
-	});
-
-	it("should work with different variable name patterns", () => {
-		const s = styleframe();
-		const customColor = s.variable("custom-color", "#ff0000");
-		const shades = useColorShade(s, customColor, {
-			100: 10,
-		} as const);
-
-		expect(shades.customColorShade100).toEqual({
-			type: "variable",
-			name: "custom-color-shade-100",
-			value: expect.objectContaining({ type: "css" }),
-		});
-
-		const css = consume(shades.customColorShade100, s.options);
-		expect(css).toBe(
-			`--custom-color-shade-100: oklch(from var(--custom-color) calc(l - 0.1) c h / a);`,
-		);
-	});
-
-	describe("type safety", () => {
-		it("should preserve variable name in return type", () => {
-			const s = styleframe();
-			const colorPrimary = s.variable("color--primary", "#007bff");
-			const shades = useColorShade(s, colorPrimary, {
-				50: 5,
-				100: 10,
-			} as const);
-
-			const shade50: Variable<"color--primary-shade-50"> =
-				shades.colorPrimaryShade50;
-			const shade100: Variable<"color--primary-shade-100"> =
-				shades.colorPrimaryShade100;
-
-			expect(shade50.name).toBe("color--primary-shade-50");
-			expect(shade100.name).toBe("color--primary-shade-100");
-		});
-
-		it("should work with generic variable names", () => {
-			const s = styleframe();
-			const colorSecondary = s.variable("color--secondary", "#6c757d");
-			const shades = useColorShade(s, colorSecondary, {
-				75: 7.5,
-			} as const);
-
-			const typed: Variable<"color--secondary-shade-75"> =
-				shades.colorSecondaryShade75;
-			expect(typed.name).toBe("color--secondary-shade-75");
-		});
-	});
-});

package/src/variables/useColorShade.ts

@@ -1,52 +0,0 @@
-import type { Styleframe, Variable } from "@styleframe/core";
-import type { ExportKeys } from "../types";
-import { createUseVariable } from "../utils";
-
-export const defaultColorShadeValues = {
-	50: 5,
-	100: 10,
-	150: 15,
-	200: 20,
-} as const;
-
-/**
- * Create a set of relative color shade (darker) levels
- *
- * @usage
- * const s = styleframe();
- *
- * const colorPrimary = s.variable("color--primary", "#007bff");
- *
- * const {
- *   colorPrimaryShade50, // Variable<'color--primary-shade-50'>
- *   colorPrimaryShade100, // Variable<'color--primary-shade-100'>
- *   colorPrimaryShade150, // Variable<'color--primary-shade-150'>
- *   ...
- * } = useColorShadeLevels(s, colorPrimary, {
- *   50: 5,
- *   100: 10,
- *   150: 15,
- *   ...
- * });
- * ```
- */
-export function useColorShade<
-	Name extends string,
-	T extends Record<string | number, number>,
->(
-	s: Styleframe,
-	color: Variable<Name>,
-	levels: T,
-): ExportKeys<`${Name}-shade`, T, "-"> {
-	return createUseVariable(`${color.name}-shade`, {
-		defaults: defaultColorShadeValues,
-		transform: (value) => {
-			if (typeof value !== "number") {
-				return 0;
-			}
-
-			return s.css`oklch(from ${s.ref(color)} calc(l - ${value / 100}) c h / a)`;
-		},
-		delimiter: "-" as const,
-	})(s, levels);
-}

package/src/variables/useColorTint.test.ts

@@ -1,164 +0,0 @@
-import type { Variable } from "@styleframe/core";
-import { styleframe } from "@styleframe/core";
-import { consume } from "@styleframe/transpiler";
-import { useColorTint, defaultColorTintValues } from "./useColorTint";
-
-describe("useColorTint", () => {
-	it("should create tint levels with default values", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		const tints = useColorTint(s, colorPrimary, defaultColorTintValues);
-
-		expect(tints.colorPrimaryTint50).toEqual({
-			type: "variable",
-			name: "color--primary-tint-50",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(tints.colorPrimaryTint100).toEqual({
-			type: "variable",
-			name: "color--primary-tint-100",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(tints.colorPrimaryTint150).toEqual({
-			type: "variable",
-			name: "color--primary-tint-150",
-			value: expect.objectContaining({ type: "css" }),
-		});
-
-		const css = consume(tints.colorPrimaryTint100, s.options);
-		expect(css).toBe(
-			`--color--primary-tint-100: oklch(from var(--color--primary) calc(l + 0.1) c h / a);`,
-		);
-	});
-
-	it("should create tint levels with custom values", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		const tints = useColorTint(s, colorPrimary, {
-			25: 2.5,
-			50: 5,
-			75: 7.5,
-			100: 10,
-		} as const);
-
-		expect(tints.colorPrimaryTint25).toEqual({
-			type: "variable",
-			name: "color--primary-tint-25",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(tints.colorPrimaryTint50).toEqual({
-			type: "variable",
-			name: "color--primary-tint-50",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(tints.colorPrimaryTint75).toEqual({
-			type: "variable",
-			name: "color--primary-tint-75",
-			value: expect.objectContaining({ type: "css" }),
-		});
-		expect(tints.colorPrimaryTint100).toEqual({
-			type: "variable",
-			name: "color--primary-tint-100",
-			value: expect.objectContaining({ type: "css" }),
-		});
-	});
-
-	it("should compile tint levels to correct CSS output using consume", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		useColorTint(s, colorPrimary, {
-			50: 5,
-			100: 10,
-		});
-
-		const css = consume(s.root, s.options);
-
-		expect(css).toBe(`:root {
-	--color--primary: #007bff;
-	--color--primary-tint-50: oklch(from var(--color--primary) calc(l + 0.05) c h / a);
-	--color--primary-tint-100: oklch(from var(--color--primary) calc(l + 0.1) c h / a);
-}`);
-	});
-
-	it("should add variables to root", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		useColorTint(s, colorPrimary, {
-			50: 5,
-			100: 10,
-		} as const);
-
-		// +1 for the original color variable
-		expect(s.root.variables.length).toBeGreaterThanOrEqual(3);
-	});
-
-	it("should handle color with kebab-case name", () => {
-		const s = styleframe();
-		const colorPrimaryLight = s.variable("color--primary-light", "#80bdff");
-		const tints = useColorTint(s, colorPrimaryLight, {
-			50: 5,
-		} as const);
-
-		expect(tints.colorPrimaryLightTint50.name).toBe(
-			"color--primary-light-tint-50",
-		);
-	});
-
-	it("should handle empty levels object", () => {
-		const s = styleframe();
-		const colorPrimary = s.variable("color--primary", "#007bff");
-		const tints = useColorTint(s, colorPrimary, {} as const);
-
-		expect(tints).toEqual({});
-	});
-
-	it("should work with different variable name patterns", () => {
-		const s = styleframe();
-		const customColor = s.variable("custom-color", "#ff0000");
-		const tints = useColorTint(s, customColor, {
-			100: 10,
-		} as const);
-
-		expect(tints.customColorTint100).toEqual({
-			type: "variable",
-			name: "custom-color-tint-100",
-			value: expect.objectContaining({ type: "css" }),
-		});
-
-		const css = consume(tints.customColorTint100, s.options);
-		expect(css).toBe(
-			`--custom-color-tint-100: oklch(from var(--custom-color) calc(l + 0.1) c h / a);`,
-		);
-	});
-
-	describe("type safety", () => {
-		it("should preserve variable name in return type", () => {
-			const s = styleframe();
-			const colorPrimary = s.variable("color--primary", "#007bff");
-			const tints = useColorTint(s, colorPrimary, {
-				50: 5,
-				100: 10,
-			} as const);
-
-			const tint50: Variable<"color--primary-tint-50"> =
-				tints.colorPrimaryTint50;
-			const tint100: Variable<"color--primary-tint-100"> =
-				tints.colorPrimaryTint100;
-
-			expect(tint50.name).toBe("color--primary-tint-50");
-			expect(tint100.name).toBe("color--primary-tint-100");
-		});
-
-		it("should work with generic variable names", () => {
-			const s = styleframe();
-			const colorSecondary = s.variable("color--secondary", "#6c757d");
-			const tints = useColorTint(s, colorSecondary, {
-				75: 7.5,
-			} as const);
-
-			const typed: Variable<"color--secondary-tint-75"> =
-				tints.colorSecondaryTint75;
-			expect(typed.name).toBe("color--secondary-tint-75");
-		});
-	});
-});

package/src/variables/useColorTint.ts

@@ -1,52 +0,0 @@
-import type { Styleframe, Variable } from "@styleframe/core";
-import type { ExportKeys } from "../types";
-import { createUseVariable } from "../utils";
-
-export const defaultColorTintValues = {
-	50: 5,
-	100: 10,
-	150: 15,
-	200: 20,
-} as const;
-
-/**
- * Create a set of relative color tint (lighter) levels
- *
- * @usage
- * const s = styleframe();
- *
- * const colorPrimary = s.variable("color--primary", "#007bff");
- *
- * const {
- *   colorPrimaryTint50, // Variable<'color--primary-tint-50'>
- *   colorPrimaryTint100, // Variable<'color--primary-tint-100'>
- *   colorPrimaryTint150, // Variable<'color--primary-tint-150'>
- *   ...
- * } = useColorTintLevels(s, colorPrimary, {
- *   50: 5,
- *   100: 10,
- *   150: 15,
- *   ...
- * });
- * ```
- */
-export function useColorTint<
-	Name extends string,
-	T extends Record<string | number, number>,
->(
-	s: Styleframe,
-	color: Variable<Name>,
-	levels: T,
-): ExportKeys<`${Name}-tint`, T, "-"> {
-	return createUseVariable(`${color.name}-tint`, {
-		defaults: defaultColorTintValues,
-		transform: (value) => {
-			if (typeof value !== "number") {
-				return 0;
-			}
-
-			return s.css`oklch(from ${s.ref(color)} calc(l + ${value / 100}) c h / a)`;
-		},
-		delimiter: "-" as const,
-	})(s, levels);
-}

package/src/variables/useFontFamily.test.ts

@@ -1,228 +0,0 @@
-import type { Variable } from "@styleframe/core";
-import { styleframe } from "@styleframe/core";
-import { consume } from "@styleframe/transpiler";
-import { useFontFamily } from "./useFontFamily";
-
-describe("useFontFamily", () => {
-	it("should create a single font family variable with 'default' key", () => {
-		const s = styleframe();
-		const { fontFamily } = useFontFamily(s, {
-			default: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto",
-		});
-
-		expect(fontFamily).toEqual({
-			type: "variable",
-			name: "font-family",
-			value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto",
-		});
-
-		const css = consume(fontFamily, s.options);
-		expect(css).toBe(
-			`--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;`,
-		);
-	});
-
-	it("should create font family variable with modifier for non-default keys", () => {
-		const s = styleframe();
-		const { fontFamilyMono } = useFontFamily(s, {
-			mono: "'SFMono-Regular', Menlo, Monaco, Consolas",
-		});
-
-		expect(fontFamilyMono).toEqual({
-			type: "variable",
-			name: "font-family--mono",
-			value: "'SFMono-Regular', Menlo, Monaco, Consolas",
-		});
-
-		const css = consume(fontFamilyMono, s.options);
-		expect(css).toBe(
-			`--font-family--mono: 'SFMono-Regular', Menlo, Monaco, Consolas;`,
-		);
-	});
-
-	it("should create multiple font family variables", () => {
-		const s = styleframe();
-		const { fontFamily, fontFamilyPrint, fontFamilyMono } = useFontFamily(s, {
-			default:
-				"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-			print: "'Georgia', 'Times New Roman', 'Times', serif",
-			mono: "'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-		});
-
-		expect(fontFamily).toEqual({
-			type: "variable",
-			name: "font-family",
-			value:
-				"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-		});
-
-		expect(fontFamilyPrint).toEqual({
-			type: "variable",
-			name: "font-family--print",
-			value: "'Georgia', 'Times New Roman', 'Times', serif",
-		});
-
-		expect(fontFamilyMono).toEqual({
-			type: "variable",
-			name: "font-family--mono",
-			value:
-				"'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-		});
-	});
-
-	it("should add variables to root", () => {
-		const s = styleframe();
-		useFontFamily(s, {
-			default: "Arial, sans-serif",
-			mono: "Courier, monospace",
-		});
-
-		expect(s.root.variables).toHaveLength(2);
-		expect(s.root.variables[0]?.name).toBe("font-family");
-		expect(s.root.variables[1]?.name).toBe("font-family--mono");
-	});
-
-	it("should handle kebab-case font family names", () => {
-		const s = styleframe();
-		const { fontFamilySerifDisplay } = useFontFamily(s, {
-			"serif-display": "'Playfair Display', Georgia, serif",
-		});
-
-		expect(fontFamilySerifDisplay).toEqual({
-			type: "variable",
-			name: "font-family--serif-display",
-			value: "'Playfair Display', Georgia, serif",
-		});
-	});
-
-	it("should handle snake_case font family names", () => {
-		const s = styleframe();
-		const { fontFamilyHeadingPrimary } = useFontFamily(s, {
-			heading_primary: "'Inter', sans-serif",
-		});
-
-		expect(fontFamilyHeadingPrimary).toEqual({
-			type: "variable",
-			name: "font-family--heading_primary",
-			value: "'Inter', sans-serif",
-		});
-	});
-
-	it("should handle numeric font family names", () => {
-		const s = styleframe();
-		const { fontFamily100 } = useFontFamily(s, {
-			"100": "'Roboto', sans-serif",
-		});
-
-		expect(fontFamily100).toEqual({
-			type: "variable",
-			name: "font-family--100",
-			value: "'Roboto', sans-serif",
-		});
-	});
-
-	it("should handle single font family without fallback", () => {
-		const s = styleframe();
-		const { fontFamilyCustom } = useFontFamily(s, {
-			custom: "Arial",
-		});
-
-		expect(fontFamilyCustom).toEqual({
-			type: "variable",
-			name: "font-family--custom",
-			value: "Arial",
-		});
-	});
-
-	it("should handle complex font family stacks", () => {
-		const s = styleframe();
-		const { fontFamilySystem } = useFontFamily(s, {
-			system:
-				"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-		});
-
-		expect(fontFamilySystem.value).toBe(
-			"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-		);
-	});
-
-	it("should handle empty font family object", () => {
-		const s = styleframe();
-		const result = useFontFamily(s, {});
-
-		expect(result).toEqual({});
-		expect(s.root.variables).toHaveLength(0);
-	});
-
-	it("should handle font family references", () => {
-		const s = styleframe();
-		const baseFont = s.variable("base-font", "Arial, sans-serif");
-		const { fontFamily } = useFontFamily(s, {
-			default: s.ref(baseFont),
-		});
-
-		expect(fontFamily.value).toEqual({
-			type: "reference",
-			name: "base-font",
-			fallback: undefined,
-		});
-	});
-
-	it("should compile to correct CSS output using consume", () => {
-		const s = styleframe();
-		useFontFamily(s, {
-			default: "Arial, sans-serif",
-			mono: "Courier, monospace",
-			display: "'Playfair Display', Georgia, serif",
-		});
-
-		const css = consume(s.root, s.options);
-
-		expect(css).toBe(`:root {
-	--font-family: Arial, sans-serif;
-	--font-family--mono: Courier, monospace;
-	--font-family--display: 'Playfair Display', Georgia, serif;
-}`);
-	});
-
-	describe("type safety", () => {
-		it("should preserve exact font family names in return type", () => {
-			const s = styleframe();
-			const fonts = useFontFamily(s, {
-				default: "Arial, sans-serif",
-				mono: "Courier, monospace",
-			});
-
-			// Type assertions to verify the generic types are preserved
-			const defaultFont: Variable<"font-family"> = fonts.fontFamily;
-			const monoFont: Variable<"font-family--mono"> = fonts.fontFamilyMono;
-
-			expect(defaultFont.name).toBe("font-family");
-			expect(monoFont.name).toBe("font-family--mono");
-		});
-
-		it("should maintain type information for kebab-case names", () => {
-			const s = styleframe();
-			const { fontFamilySerifDisplay } = useFontFamily(s, {
-				"serif-display": "'Playfair Display', Georgia, serif",
-			});
-
-			const typed: Variable<"font-family--serif-display"> =
-				fontFamilySerifDisplay;
-			expect(typed.name).toBe("font-family--serif-display");
-		});
-
-		it("should work with const assertion", () => {
-			const s = styleframe();
-			const fontConfig = {
-				default: "Arial, sans-serif",
-				mono: "Courier, monospace",
-			} as const;
-
-			const fonts = useFontFamily(s, fontConfig);
-
-			expect(fonts.fontFamily.name).toBe("font-family");
-			expect(fonts.fontFamilyMono.name).toBe("font-family--mono");
-		});
-	});
-});

package/src/variables/useFontFamily.ts

@@ -1,33 +0,0 @@
-import { createUseVariable } from "../utils";
-
-export const defaultFontFamilyValues = {
-	default: "@base",
-	base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-	print: "'Georgia', 'Times New Roman', 'Times', serif",
-	mono: "'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-};
-
-/**
- * Create a set of font family variables for use in a Styleframe instance.
- *
- * @usage
- * ```typescript
- * import { styleframe } from "styleframe";
- * import { useFontFamily } from "styleframe/theme";
- *
- * const s = styleframe();
- *
- * const {
- *   fontFamily, // Variable<'font-family'>
- *   fontFamilyPrint, // Variable<'font-family--print'>
- *   fontFamilyMono, // Variable<'font-family--mono'>
- * } = useFontFamily(s, {
- *   default: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
- *   print: "'Georgia', 'Times New Roman', 'Times', serif",
- *   mono: "'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
- * });
- * ```
- */
-export const useFontFamily = createUseVariable("font-family", {
-	defaults: defaultFontFamilyValues,
-});