@styleframe/theme 1.0.0 → 1.0.2

package/dist/theme.d.ts

@@ -0,0 +1,772 @@
+import { CamelCase } from 'scule';
+import { Reference } from '@styleframe/core';
+import { Styleframe } from '@styleframe/core';
+import { TokenValue } from '@styleframe/core';
+import { Variable } from '@styleframe/core';
+
+/**
+ * Creates a generic composable function for a CSS property.
+ *
+ * This factory function generates `use*` composables (like `useFontFamily`, `useLineHeight`, etc.)
+ * from a CSS property name string.
+ *
+ * @param propertyName - The CSS property name (e.g., 'font-family', 'line-height')
+ * @returns A composable function that creates variables for the given property
+ *
+ * @example
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { createUseVariable } from "styleframe/theme";
+ *
+ * // Create a useFontFamily composable
+ * const useFontFamily = createUseVariable("font-family");
+ *
+ * const s = styleframe();
+ * const { fontFamily, fontFamilyMono } = useFontFamily(s, {
+ *   default: "Arial, sans-serif",
+ *   mono: "Courier, monospace",
+ * });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Create a useLineHeight composable
+ * const useLineHeight = createUseVariable("line-height");
+ *
+ * const s = styleframe();
+ * const { lineHeight, lineHeightTight, lineHeightLoose } = useLineHeight(s, {
+ *   default: "1.5",
+ *   tight: "1.25",
+ *   loose: "1.75",
+ * });
+ * ```
+ */
+export declare function createUseVariable<PropertyName extends string, Delimiter extends string = "--", Defaults extends Record<string, TokenValue> = Record<string, TokenValue>, MergeDefaults extends boolean = false>(propertyName: PropertyName, { defaults, mergeDefaults, transform, delimiter, }?: {
+    defaults?: Defaults;
+    mergeDefaults?: MergeDefaults;
+    transform?: (value: TokenValue) => TokenValue;
+    delimiter?: Delimiter;
+}): <T extends Record<string, TokenValue> = Defaults>(s: Styleframe, tokens?: T) => ExportKeys<PropertyName, MergeDefaults extends true ? Defaults & T : T, Delimiter>;
+
+export declare const defaultBorderStyleValues: {
+    readonly default: "@solid";
+    readonly none: "none";
+    readonly solid: "solid";
+    readonly dashed: "dashed";
+    readonly dotted: "dotted";
+    readonly double: "double";
+    readonly groove: "groove";
+    readonly inset: "inset";
+    readonly outset: "outset";
+};
+
+export declare const defaultBorderWidthValues: {
+    default: string;
+    none: number;
+    thin: string;
+    medium: string;
+    thick: string;
+};
+
+export declare const defaultBoxShadowValues: {
+    default: string;
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    inner: string;
+    ring: string;
+};
+
+export declare const defaultBreakpointValues: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+
+export declare const defaultColorLightnessValues: {
+    readonly 50: 5;
+    readonly 100: 10;
+    readonly 200: 20;
+    readonly 300: 30;
+    readonly 400: 40;
+    readonly 500: 50;
+    readonly 600: 60;
+    readonly 700: 70;
+    readonly 800: 80;
+    readonly 900: 90;
+    readonly 950: 95;
+};
+
+export declare const defaultColorShadeValues: {
+    readonly 50: 5;
+    readonly 100: 10;
+    readonly 150: 15;
+    readonly 200: 20;
+};
+
+export declare const defaultColorTintValues: {
+    readonly 50: 5;
+    readonly 100: 10;
+    readonly 150: 15;
+    readonly 200: 20;
+};
+
+export declare const defaultFontFamilyValues: {
+    default: string;
+    base: string;
+    print: string;
+    mono: string;
+};
+
+export declare const defaultFontSizeValues: {
+    default: string;
+};
+
+export declare const defaultFontWeightValues: {
+    default: string;
+    extralight: number;
+    light: number;
+    normal: string;
+    medium: number;
+    semibold: number;
+    bold: string;
+    black: number;
+    lighter: string;
+    bolder: string;
+    inherit: string;
+};
+
+export declare const defaultLetterSpacingValues: {
+    default: string;
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+};
+
+export declare const defaultLineHeightValues: {
+    default: string;
+    tight: number;
+    snug: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+};
+
+export declare const defaultScalePowerValues: readonly number[];
+
+export declare const defaultScaleValues: {
+    readonly default: "@minor-third";
+    readonly "minor-second": 1.067;
+    readonly "major-second": 1.125;
+    readonly "minor-third": 1.2;
+    readonly "major-third": 1.25;
+    readonly "perfect-fourth": 1.333;
+    readonly "augmented-fourth": 1.414;
+    readonly "perfect-fifth": 1.5;
+    readonly golden: 1.618;
+};
+
+/**
+ * Generic type that transforms keys to their export names with a given prefix
+ *
+ * @example
+ * ExportKeys<"example-property", { "default": "...", "variant": "..." }> -> {
+ * 		"exampleProperty": Variable<'example-property'>,
+ * 		"examplePropertyVariant": Variable<'example-property--variant'>,
+ * }
+ */
+export declare type ExportKeys<Prefix extends string, T extends Record<string, TokenValue>, Separator extends string = "--"> = {
+    [K in keyof T as CamelCase<ExportKeyVariableName<Prefix, K, Separator>>]: Variable<ExportKeyVariableName<Prefix, K, Separator>>;
+};
+
+/**
+ * Helper type to compute the variable name for a given prefix and key
+ */
+declare type ExportKeyVariableName<Prefix extends string, K, Separator extends string = "--"> = K extends "default" ? Prefix : `${Prefix}${Separator}${K & (string | number)}`;
+
+export declare function isKeyReferenceValue(value: unknown): value is string;
+
+/**
+ * Create a set of border-color variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useBorderColor, useColor } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const { colorPrimary, colorSecondary } = useColor(s, {
+ * 	 primary: "#007bff",
+ *   secondary: "#6c757d",
+ * });
+ *
+ * const {
+ *   borderColorPrimary, // Variable<'border-color--primary'>
+ *   borderColorSecondary, // Variable<'border-color--secondary'>
+ * } = useBorderColor(s, {
+ * 	 primary: ref(colorPrimary),
+ *   secondary: ref(colorSecondary),
+ * });
+ * ```
+ */
+export declare const useBorderColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-color", T, "--">;
+
+/**
+ * Create a set of border-radius variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useBorderRadius } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   borderRadius, // Variable<'border-radius'>
+ *   borderRadiusSm, // Variable<'border-radius--sm'>
+ *   borderRadiusMd, // Variable<'border-radius--md'>
+ *   borderRadiusLg, // Variable<'border-radius--lg'>
+ * } = useBorderRadius(s, {
+ *   default: "0.25rem",
+ *   sm: "0.125rem",
+ *   md: "0.25rem",
+ *   lg: "0.5rem",
+ * });
+ * ```
+ */
+export declare const useBorderRadius: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-radius", T, "--">;
+
+/**
+ * Create a set of border-style variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useBorderStyle } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   borderStyleNone,
+ *   borderStyleSolid,
+ *   borderStyleDashed,
+ *   borderStyleDotted,
+ *   borderStyleDouble,
+ *   borderStyleGroove,
+ *   borderStyleInset,
+ *   borderStyleOutset,
+ *   borderStyle,
+ * } = useBorderStyle(s, {
+ *   default: "solid",
+ *   none: "none",
+ *   dashed: "dashed",
+ *   dotted: "dotted",
+ *   double: "double",
+ *   groove: "groove",
+ *   inset: "inset",
+ *   outset: "outset",
+ * });
+ * ```
+ */
+export declare const useBorderStyle: <T extends Record<string, TokenValue> = {
+    readonly default: "@solid";
+    readonly none: "none";
+    readonly solid: "solid";
+    readonly dashed: "dashed";
+    readonly dotted: "dotted";
+    readonly double: "double";
+    readonly groove: "groove";
+    readonly inset: "inset";
+    readonly outset: "outset";
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-style", T, "--">;
+
+/**
+ * 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 declare const useBorderWidth: <T extends Record<string, TokenValue> = {
+    default: string;
+    none: number;
+    thin: string;
+    medium: string;
+    thick: string;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-width", T, "--">;
+
+/**
+ * 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 declare const useBoxShadow: <T extends Record<string, TokenValue> = {
+    default: string;
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    inner: string;
+    ring: string;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"box-shadow", T, "--">;
+
+/**
+ * Create a set of breakpoint variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useBreakpoint } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   breakpointXs, // Variable<'breakpoint--xs'>
+ *   breakpointSm, // Variable<'breakpoint--sm'>
+ *   breakpointMd, // Variable<'breakpoint--md'>
+ *   breakpointLg, // Variable<'breakpoint--lg'>
+ *   breakpointXl, // Variable<'breakpoint--xl'>
+ * } = useBreakpoint(s, {
+ *   xs: 0,
+ *   sm: 576,
+ *   md: 992,
+ *   lg: 1200,
+ *   xl: 1440,
+ * });
+ * ```
+ */
+export declare const useBreakpoint: <T extends Record<string, TokenValue> = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"breakpoint", T, "--">;
+
+/**
+ * Create a set of color variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useColors } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   colorPrimary, // Variable<'color--primary'>
+ *   colorSecondary, // Variable<'color--secondary'>
+ * } = useColors(s, {
+ *   primary: "#007bff",
+ *   secondary: "#6c757d",
+ * });
+ * ```
+ */
+export declare const useColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"color", T, "--">;
+
+/**
+ * Create a set of lightness levels for a color variable.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useColors } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const colorPrimary = s.variable("color--primary", "#007bff");
+ *
+ * const {
+ *   colorPrimary100, // Variable<'color--primary-100'>
+ *   colorPrimary200, // Variable<'color--primary-200'>
+ *   colorPrimary300, // Variable<'color--primary-300'>
+ *   ...
+ * } = useColorLightnessLevels(s, colorPrimary, {
+ *   100: 10,
+ *   200: 20,
+ *   300: 30,
+ *   ...
+ * });
+ * ```
+ */
+export declare function useColorLightness<Name extends string, T extends Record<string | number, number>>(s: Styleframe, color: Variable<Name>, levels: T): ExportKeys<Name, T, "-">;
+
+/**
+ * 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 declare function useColorShade<Name extends string, T extends Record<string | number, number>>(s: Styleframe, color: Variable<Name>, levels: T): ExportKeys<`${Name}-shade`, T, "-">;
+
+/**
+ * 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 declare function useColorTint<Name extends string, T extends Record<string | number, number>>(s: Styleframe, color: Variable<Name>, levels: T): ExportKeys<`${Name}-tint`, T, "-">;
+
+/**
+ * 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 declare const useFontFamily: <T extends Record<string, TokenValue> = {
+    default: string;
+    base: string;
+    print: string;
+    mono: string;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-family", T, "--">;
+
+/**
+ * Create a set of font-size variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useFontSize } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   fontSize, // Variable<'font-size'>
+ *   fontSizeSm, // Variable<'font-size--sm'>
+ *   fontSizeMd, // Variable<'font-size--md'>
+ *   fontSizeLg, // Variable<'font-size--lg'>
+ * } = useFontSize(s, {
+ *   default: "1rem",
+ *   sm: "0.875rem",
+ *   md: "1rem",
+ *   lg: "1.25rem",
+ * });
+ * ```
+ */
+export declare const useFontSize: <T extends Record<string, TokenValue> = {
+    default: string;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-size", T, "--">;
+
+/**
+ * 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 declare const useFontWeight: <T extends Record<string, TokenValue> = {
+    default: string;
+    extralight: number;
+    light: number;
+    normal: string;
+    medium: number;
+    semibold: number;
+    bold: string;
+    black: number;
+    lighter: string;
+    bolder: string;
+    inherit: string;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-weight", T, "--">;
+
+/**
+ * Create a set of letter-spacing variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useLetterSpacing } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   letterSpacingTighter,
+ *   letterSpacingTight,
+ *   letterSpacingNormal,
+ *   letterSpacingWide,
+ *   letterSpacingWider,
+ *   letterSpacing,
+ * } = useLetterSpacing(s, {
+ *   default: "normal",
+ *   tighter: "-0.05em",
+ *   tight: "-0.025em",
+ *   normal: "normal",
+ *   wide: "0.05em",
+ *   wider: "0.1em",
+ * });
+ * ```
+ */
+export declare const useLetterSpacing: <T extends Record<string, TokenValue> = {
+    default: string;
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"letter-spacing", T, "--">;
+
+/**
+ * Create a set of line-height variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useLineHeight } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   lineHeightTight,
+ *   lineHeightSnug,
+ *   lineHeightNormal,
+ *   lineHeightRelaxed,
+ *   lineHeightLoose,
+ *   lineHeight,
+ * } = useLineHeight(s, {
+ *   default: "normal",
+ *   tight: 1.2,
+ *   snug: 1.35,
+ *   normal: 1.5,
+ *   relaxed: 1.65,
+ *   loose: 1.9,
+ * });
+ * ```
+ */
+export declare const useLineHeight: <T extends Record<string, TokenValue> = {
+    default: string;
+    tight: number;
+    snug: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"line-height", T, "--">;
+
+/**
+ * Create a font-size scale for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useFontSize, useScale, useScalePowers, useMultiplier } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const { scale } = useScale(s);
+ * const { fontSize } = useFontSize(s);
+ *
+ * const scalePowers = useScalePowers(s, scale, defaultScalePowerValues);
+ *
+ * const {
+ *   fontSizeXs, // Variable<'font-size--xs'>
+ *   fontSizeSm, // Variable<'font-size--sm'>
+ *   fontSizeMd, // Variable<'font-size--md'>
+ *   fontSizeLg, // Variable<'font-size--lg'>
+ *   fontSizeXl, // Variable<'font-size--xl'>
+ * } = useMultiplier(s, fontSize, {
+ *   xs: scalePowers[-2],
+ *   sm: scalePowers[-1],
+ *   md: scalePowers[0],
+ *   lg: scalePowers[1],
+ *   xl: scalePowers[2],
+ * });
+ * ```
+ */
+export declare function useMultiplier<Name extends string, T extends Record<string | number, TokenValue>>(s: Styleframe, variable: Variable<Name>, values: T): ExportKeys<Name, T>;
+
+/**
+ * Create a set of scale variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useScale } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   scaleMinorSecond,
+ *   scaleMajorSecond,
+ *   scaleMinorThird,
+ *   scaleMajorThird,
+ *   scalePerfectFourth,
+ *   scaleAugmentedFourth,
+ *   scalePerfectFifth,
+ *   scaleGolden,
+ *   scale,
+ * } = useScale(s, {
+ *   default: 1.2,
+ *   minorSecond: 1.067,
+ *   majorSecond: 1.125,
+ *   minorThird: 1.2,
+ *   majorThird: 1.25,
+ *   perfectFourth: 1.333,
+ *   augmentedFourth: 1.414,
+ *   perfectFifth: 1.5,
+ *   golden: 1.618,
+ * });
+ * ```
+ */
+export declare const useScale: <T extends Record<string, TokenValue> = {
+    readonly default: "@minor-third";
+    readonly "minor-second": 1.067;
+    readonly "major-second": 1.125;
+    readonly "minor-third": 1.2;
+    readonly "major-third": 1.25;
+    readonly "perfect-fourth": 1.333;
+    readonly "augmented-fourth": 1.414;
+    readonly "perfect-fifth": 1.5;
+    readonly golden: 1.618;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"scale", T, "--">;
+
+export declare function useScalePowers<T extends readonly number[]>(s: Styleframe, scale: Variable | Reference, powers?: T): Record<number, TokenValue>;
+
+/**
+ * Create a set of spacing variables for use in a Styleframe instance.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useSpacing } from "styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   spacing, // Variable<'spacing'>
+ *   spacingSm, // Variable<'spacing--sm'>
+ *   spacingMd, // Variable<'spacing--md'>
+ *   spacingLg, // Variable<'spacing--lg'>
+ * } = useSpacing(s, {
+ *   default: "1rem",
+ *   sm: "0.875rem",
+ *   md: "1rem",
+ *   lg: "1.25rem",
+ * });
+ * ```
+ */
+export declare const useSpacing: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"spacing", T, "--">;
+
+export { }