@styleframe/theme 2.1.0 → 2.3.0

package/dist/theme.d.ts

@@ -1,9 +1,49 @@
 import { CamelCase } from 'scule';
+import { ModifierFactory } from '@styleframe/core';
 import { Reference } from '@styleframe/core';
 import { Styleframe } from '@styleframe/core';
 import { TokenValue } from '@styleframe/core';
+import { UtilityCallbackFn } from '@styleframe/core';
+import { UtilityCreatorFn } from '@styleframe/core';
 import { Variable } from '@styleframe/core';
 
+/**
+ * Creates a generic composable function for a CSS utility.
+ *
+ * This factory function generates `use*Utility` composables (like `useMarginUtility`, `usePaddingUtility`, etc.)
+ * from a utility name and factory function.
+ *
+ * @param utilityName - The utility name (e.g., 'margin', 'padding')
+ * @param factory - Function that receives { value } and returns CSS declarations
+ * @param options - Configuration options
+ * @returns A composable function that creates utilities for the given property
+ *
+ * @example
+ * ```typescript
+ * // Create a useMarginUtility composable
+ * export const useMarginUtility = createUseUtility(
+ *     'm',
+ *     ({ value }) => ({ margin: value })
+ * );
+ *
+ * // Usage
+ * const s = styleframe();
+ * const createMargin = useMarginUtility(s, {
+ *     sm: '0.5rem',
+ *     md: '1rem',
+ *     lg: '1.5rem',
+ * });
+ * ```
+ */
+export declare function createUseUtility<UtilityName extends string, Defaults extends Record<string, TokenValue> = Record<string, TokenValue>>(utilityName: UtilityName, factory: UtilityCallbackFn, options?: CreateUseUtilityOptions<Defaults>): <T extends Record<string, TokenValue> = Defaults>(s: Styleframe, values?: T, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+export declare interface CreateUseUtilityOptions<Defaults extends Record<string, TokenValue>> {
+    /** Default values for the utility */
+    defaults?: Defaults;
+    /** Whether to merge user values with defaults (true) or replace them (false) */
+    mergeDefaults?: boolean;
+}
+
 /**
  * Creates a generic composable function for a CSS property.
  *
@@ -41,13 +81,208 @@ import { Variable } from '@styleframe/core';
  * });
  * ```
  */
-export declare function createUseVariable<PropertyName extends string, PropertyType = TokenValue, Delimiter extends string = "--", Defaults extends Record<string, PropertyType> = Record<string, PropertyType>, MergeDefaults extends boolean = false>(propertyName: PropertyName, { defaults, mergeDefaults, transform, delimiter, }?: {
+export declare function createUseVariable<PropertyName extends string, PropertyType = TokenValue, Delimiter extends string = ".", Defaults extends Record<string, PropertyType> = Record<string, PropertyType>, MergeDefaults extends boolean = false>(propertyName: PropertyName, { defaults, mergeDefaults, transform, delimiter, }?: {
     defaults?: Defaults;
     mergeDefaults?: MergeDefaults;
     transform?: (value: PropertyType) => TokenValue;
     delimiter?: Delimiter;
 }): <T extends Record<string, PropertyType> = Defaults>(s: Styleframe, tokens?: T) => ExportKeys<PropertyName, MergeDefaults extends true ? Defaults & T : T, Delimiter>;
 
+/**
+ * Default align-content utility values matching Tailwind CSS.
+ */
+export declare const defaultAlignContentValues: {
+    normal: string;
+    center: string;
+    start: string;
+    end: string;
+    between: string;
+    around: string;
+    evenly: string;
+    baseline: string;
+    stretch: string;
+};
+
+/**
+ * Default align-items utility values matching Tailwind CSS.
+ */
+export declare const defaultAlignItemsValues: {
+    start: string;
+    end: string;
+    center: string;
+    baseline: string;
+    stretch: string;
+};
+
+/**
+ * Default align-self utility values matching Tailwind CSS.
+ */
+export declare const defaultAlignSelfValues: {
+    auto: string;
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+    baseline: string;
+};
+
+/**
+ * Default animation utility values matching Tailwind CSS.
+ */
+export declare const defaultAnimationValues: {
+    none: string;
+    spin: string;
+    ping: string;
+    pulse: string;
+    bounce: string;
+};
+
+/**
+ * Default appearance utility values matching Tailwind CSS.
+ */
+export declare const defaultAppearanceValues: {
+    none: string;
+    auto: string;
+};
+
+/**
+ * Default aspect ratio utility values matching Tailwind CSS.
+ */
+export declare const defaultAspectRatioValues: {
+    auto: string;
+    square: string;
+    video: string;
+};
+
+/**
+ * Default backface-visibility utility values matching Tailwind CSS.
+ */
+export declare const defaultBackfaceVisibilityValues: {
+    visible: string;
+    hidden: string;
+};
+
+/**
+ * Default background-attachment utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundAttachmentValues: {
+    fixed: string;
+    local: string;
+    scroll: string;
+};
+
+/**
+ * Default background-blend-mode utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundBlendModeValues: {
+    normal: string;
+    multiply: string;
+    screen: string;
+    overlay: string;
+    darken: string;
+    lighten: string;
+    "color-dodge": string;
+    "color-burn": string;
+    "hard-light": string;
+    "soft-light": string;
+    difference: string;
+    exclusion: string;
+    hue: string;
+    saturation: string;
+    color: string;
+    luminosity: string;
+};
+
+/**
+ * Default background-clip utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundClipValues: {
+    border: string;
+    padding: string;
+    content: string;
+    text: string;
+};
+
+/**
+ * Default background-image utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundImageValues: {
+    none: string;
+    "gradient-to-t": string;
+    "gradient-to-tr": string;
+    "gradient-to-r": string;
+    "gradient-to-br": string;
+    "gradient-to-b": string;
+    "gradient-to-bl": string;
+    "gradient-to-l": string;
+    "gradient-to-tl": string;
+};
+
+/**
+ * Default background-origin utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundOriginValues: {
+    border: string;
+    padding: string;
+    content: string;
+};
+
+/**
+ * Default background-position utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundPositionValues: {
+    bottom: string;
+    center: string;
+    left: string;
+    "left-bottom": string;
+    "left-top": string;
+    right: string;
+    "right-bottom": string;
+    "right-top": string;
+    top: string;
+};
+
+/**
+ * Default background-repeat utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundRepeatValues: {
+    repeat: string;
+    "no-repeat": string;
+    "repeat-x": string;
+    "repeat-y": string;
+    round: string;
+    space: string;
+};
+
+/**
+ * Default background-size utility values matching Tailwind CSS.
+ */
+export declare const defaultBackgroundSizeValues: {
+    auto: string;
+    cover: string;
+    contain: string;
+};
+
+/**
+ * Default border-collapse utility values matching Tailwind CSS.
+ */
+export declare const defaultBorderCollapseValues: {
+    collapse: string;
+    separate: string;
+};
+
+/**
+ * Default border-style utility values matching Tailwind CSS.
+ */
+export declare const defaultBorderStyleUtilityValues: {
+    solid: string;
+    dashed: string;
+    dotted: string;
+    double: string;
+    hidden: string;
+    none: string;
+};
+
 export declare const defaultBorderStyleValues: {
     readonly default: "@solid";
     readonly none: "none";
@@ -68,6 +303,14 @@ export declare const defaultBorderWidthValues: {
     thick: string;
 };
 
+/**
+ * Default box-decoration-break utility values matching Tailwind CSS.
+ */
+export declare const defaultBoxDecorationBreakValues: {
+    clone: string;
+    slice: string;
+};
+
 export declare const defaultBoxShadowValues: {
     default: string;
     none: string;
@@ -81,6 +324,52 @@ export declare const defaultBoxShadowValues: {
     ring: string;
 };
 
+/**
+ * Default box-sizing utility values matching Tailwind CSS.
+ */
+export declare const defaultBoxSizingValues: {
+    border: string;
+    content: string;
+};
+
+/**
+ * Default break-after utility values matching Tailwind CSS.
+ */
+export declare const defaultBreakAfterValues: {
+    auto: string;
+    avoid: string;
+    all: string;
+    "avoid-page": string;
+    page: string;
+    left: string;
+    right: string;
+    column: string;
+};
+
+/**
+ * Default break-before utility values matching Tailwind CSS.
+ */
+export declare const defaultBreakBeforeValues: {
+    auto: string;
+    avoid: string;
+    all: string;
+    "avoid-page": string;
+    page: string;
+    left: string;
+    right: string;
+    column: string;
+};
+
+/**
+ * Default break-inside utility values matching Tailwind CSS.
+ */
+export declare const defaultBreakInsideValues: {
+    auto: string;
+    avoid: string;
+    "avoid-page": string;
+    "avoid-column": string;
+};
+
 export declare const defaultBreakpointValues: {
     xs: number;
     sm: number;
@@ -89,6 +378,26 @@ export declare const defaultBreakpointValues: {
     xl: number;
 };
 
+/**
+ * Default caption-side utility values matching Tailwind CSS.
+ */
+export declare const defaultCaptionSideValues: {
+    top: string;
+    bottom: string;
+};
+
+/**
+ * Default clear utility values matching Tailwind CSS.
+ */
+export declare const defaultClearValues: {
+    start: string;
+    end: string;
+    left: string;
+    right: string;
+    both: string;
+    none: string;
+};
+
 export declare const defaultColorLightnessValues: {
     readonly 50: 5;
     readonly 100: 10;
@@ -103,6 +412,16 @@ export declare const defaultColorLightnessValues: {
     readonly 950: 95;
 };
 
+/**
+ * Default color-scheme utility values matching Tailwind CSS.
+ */
+export declare const defaultColorSchemeValues: {
+    normal: string;
+    light: string;
+    dark: string;
+    "light-dark": string;
+};
+
 export declare const defaultColorShadeValues: {
     readonly 50: 5;
     readonly 100: 10;
@@ -117,6 +436,160 @@ export declare const defaultColorTintValues: {
     readonly 200: 20;
 };
 
+/**
+ * Default cursor utility values matching Tailwind CSS.
+ */
+export declare const defaultCursorValues: {
+    auto: string;
+    default: string;
+    pointer: string;
+    wait: string;
+    text: string;
+    move: string;
+    help: string;
+    "not-allowed": string;
+    none: string;
+    "context-menu": string;
+    progress: string;
+    cell: string;
+    crosshair: string;
+    "vertical-text": string;
+    alias: string;
+    copy: string;
+    "no-drop": string;
+    grab: string;
+    grabbing: string;
+    "all-scroll": string;
+    "col-resize": string;
+    "row-resize": string;
+    "n-resize": string;
+    "e-resize": string;
+    "s-resize": string;
+    "w-resize": string;
+    "ne-resize": string;
+    "nw-resize": string;
+    "se-resize": string;
+    "sw-resize": string;
+    "ew-resize": string;
+    "ns-resize": string;
+    "nesw-resize": string;
+    "nwse-resize": string;
+    "zoom-in": string;
+    "zoom-out": string;
+};
+
+/**
+ * Default display utility values matching Tailwind CSS.
+ */
+export declare const defaultDisplayValues: {
+    block: string;
+    "inline-block": string;
+    inline: string;
+    flex: string;
+    "inline-flex": string;
+    table: string;
+    "inline-table": string;
+    "table-caption": string;
+    "table-cell": string;
+    "table-column": string;
+    "table-column-group": string;
+    "table-footer-group": string;
+    "table-header-group": string;
+    "table-row-group": string;
+    "table-row": string;
+    "flow-root": string;
+    grid: string;
+    "inline-grid": string;
+    contents: string;
+    "list-item": string;
+    hidden: string;
+};
+
+/**
+ * Default divide-style utility values matching Tailwind CSS.
+ */
+export declare const defaultDivideStyleValues: {
+    solid: string;
+    dashed: string;
+    dotted: string;
+    double: string;
+    none: string;
+};
+
+export declare const defaultEasingValues: {
+    readonly linear: "linear";
+    readonly ease: "ease";
+    readonly "ease-in": "ease-in";
+    readonly "ease-out": "ease-out";
+    readonly "ease-in-out": "ease-in-out";
+    readonly "ease-in-sine": "cubic-bezier(0.47, 0, 0.745, 0.715)";
+    readonly "ease-out-sine": "cubic-bezier(0.39, 0.575, 0.565, 1)";
+    readonly "ease-in-out-sine": "cubic-bezier(0.445, 0.05, 0.55, 0.95)";
+    readonly "ease-in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)";
+    readonly "ease-out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+    readonly "ease-in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)";
+    readonly "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)";
+    readonly "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    readonly "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)";
+    readonly "ease-in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)";
+    readonly "ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)";
+    readonly "ease-in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)";
+    readonly "ease-in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)";
+    readonly "ease-out-quint": "cubic-bezier(0.23, 1, 0.32, 1)";
+    readonly "ease-in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)";
+    readonly "ease-in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)";
+    readonly "ease-out-expo": "cubic-bezier(0.19, 1, 0.22, 1)";
+    readonly "ease-in-out-expo": "cubic-bezier(1, 0, 0, 1)";
+    readonly "ease-in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)";
+    readonly "ease-out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)";
+    readonly "ease-in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)";
+    readonly "ease-in-back": "cubic-bezier(0.6, -0.28, 0.735, 0.045)";
+    readonly "ease-out-back": "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+    readonly "ease-in-out-back": "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    readonly spring: "linear(0, 0.0018, 0.0069 1.15%, 0.026 2.3%, 0.0637, 0.1135 5.18%, 0.2229 7.78%, 0.5977 15.84%, 0.7014, 0.7904, 0.8641, 0.9228, 0.9676 28.8%, 1.0032 31.68%, 1.0225, 1.0352 36.29%, 1.0431 38.88%, 1.046 42.05%, 1.0448 44.35%, 1.0407 47.23%, 1.0118 61.63%, 1.0025 69.41%, 0.9981 80.35%, 0.9992 99.94%)";
+    readonly bounce: "linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1)";
+};
+
+/**
+ * Default flex-direction utility values matching Tailwind CSS.
+ */
+export declare const defaultFlexDirectionValues: {
+    row: string;
+    "row-reverse": string;
+    col: string;
+    "col-reverse": string;
+};
+
+/**
+ * Default flex utility values matching Tailwind CSS.
+ */
+export declare const defaultFlexValues: {
+    "1": string;
+    auto: string;
+    initial: string;
+    none: string;
+};
+
+/**
+ * Default flex-wrap utility values matching Tailwind CSS.
+ */
+export declare const defaultFlexWrapValues: {
+    wrap: string;
+    "wrap-reverse": string;
+    nowrap: string;
+};
+
+/**
+ * Default float utility values matching Tailwind CSS.
+ */
+export declare const defaultFloatValues: {
+    start: string;
+    end: string;
+    right: string;
+    left: string;
+    none: string;
+};
+
 export declare const defaultFontFamilyValues: {
     default: string;
     base: string;
@@ -128,6 +601,67 @@ export declare const defaultFontSizeValues: {
     default: string;
 };
 
+/**
+ * Default font-smoothing utility values matching Tailwind CSS.
+ */
+export declare const defaultFontSmoothingValues: {
+    antialiased: string;
+    "subpixel-antialiased": string;
+};
+
+/**
+ * Default font-stretch utility values matching Tailwind CSS.
+ */
+export declare const defaultFontStretchValues: {
+    "ultra-condensed": string;
+    "extra-condensed": string;
+    condensed: string;
+    "semi-condensed": string;
+    normal: string;
+    "semi-expanded": string;
+    expanded: string;
+    "extra-expanded": string;
+    "ultra-expanded": string;
+};
+
+/**
+ * Default font-style utility values matching Tailwind CSS.
+ */
+export declare const defaultFontStyleValues: {
+    italic: string;
+    "not-italic": string;
+};
+
+/**
+ * Default font-variant-numeric utility values matching Tailwind CSS.
+ */
+export declare const defaultFontVariantNumericValues: {
+    "normal-nums": string;
+    ordinal: string;
+    "slashed-zero": string;
+    "lining-nums": string;
+    "oldstyle-nums": string;
+    "proportional-nums": string;
+    "tabular-nums": string;
+    "diagonal-fractions": string;
+    "stacked-fractions": string;
+};
+
+/**
+ * Default font-weight utility values matching Tailwind CSS.
+ */
+export declare const defaultFontWeightUtilityValues: {
+    thin: string;
+    extralight: string;
+    light: string;
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    extrabold: string;
+    black: string;
+};
+
 export declare const defaultFontWeightValues: {
     default: string;
     extralight: number;
@@ -142,6 +676,77 @@ export declare const defaultFontWeightValues: {
     inherit: string;
 };
 
+/**
+ * Default forced-color-adjust utility values matching Tailwind CSS.
+ */
+export declare const defaultForcedColorAdjustValues: {
+    auto: string;
+    none: string;
+};
+
+/**
+ * Default grid-auto-flow utility values matching Tailwind CSS.
+ */
+export declare const defaultGridAutoFlowValues: {
+    row: string;
+    col: string;
+    dense: string;
+    "row-dense": string;
+    "col-dense": string;
+};
+
+/**
+ * Default hyphens utility values matching Tailwind CSS.
+ */
+export declare const defaultHyphensValues: {
+    none: string;
+    manual: string;
+    auto: string;
+};
+
+/**
+ * Default isolation utility values matching Tailwind CSS.
+ */
+export declare const defaultIsolationValues: {
+    isolate: string;
+    auto: string;
+};
+
+/**
+ * Default justify-content utility values matching Tailwind CSS.
+ */
+export declare const defaultJustifyContentValues: {
+    normal: string;
+    start: string;
+    end: string;
+    center: string;
+    between: string;
+    around: string;
+    evenly: string;
+    stretch: string;
+};
+
+/**
+ * Default justify-items utility values matching Tailwind CSS.
+ */
+export declare const defaultJustifyItemsValues: {
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+};
+
+/**
+ * Default justify-self utility values matching Tailwind CSS.
+ */
+export declare const defaultJustifySelfValues: {
+    auto: string;
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+};
+
 export declare const defaultLetterSpacingValues: {
     default: string;
     tighter: string;
@@ -160,613 +765,3792 @@ export declare const defaultLineHeightValues: {
     loose: number;
 };
 
-export declare const defaultScalePowerValues: readonly number[];
+/**
+ * Default list-style-position utility values matching Tailwind CSS.
+ */
+export declare const defaultListStylePositionValues: {
+    inside: string;
+    outside: string;
+};
 
-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;
+/**
+ * Default list-style-type utility values matching Tailwind CSS.
+ */
+export declare const defaultListStyleTypeValues: {
+    none: string;
+    disc: string;
+    decimal: string;
 };
 
 /**
- * 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'>,
- * }
+ * Default mix-blend-mode utility values matching Tailwind CSS.
  */
-export declare type ExportKeys<Prefix extends string, T extends Record<string, unknown>, Separator extends string = "--"> = {
-    [K in keyof T as CamelCase<ExportKeyVariableName<Prefix, K, Separator>>]: Variable<ExportKeyVariableName<Prefix, K, Separator>>;
+export declare const defaultMixBlendModeValues: {
+    normal: string;
+    multiply: string;
+    screen: string;
+    overlay: string;
+    darken: string;
+    lighten: string;
+    "color-dodge": string;
+    "color-burn": string;
+    "hard-light": string;
+    "soft-light": string;
+    difference: string;
+    exclusion: string;
+    hue: string;
+    saturation: string;
+    color: string;
+    luminosity: string;
+    "plus-darker": string;
+    "plus-lighter": string;
 };
 
 /**
- * Helper type to compute the variable name for a given prefix and key
+ * Default object-fit utility values matching Tailwind CSS.
  */
-declare type ExportKeyVariableName<Prefix extends string, K, Separator extends string = "--"> = K extends "default" ? Prefix : `${Prefix}${Separator}${K & (string | number)}`;
+export declare const defaultObjectFitValues: {
+    contain: string;
+    cover: string;
+    fill: string;
+    none: string;
+    "scale-down": string;
+};
 
-export declare function isKeyReferenceValue(value: unknown): value is `@${string}`;
+/**
+ * Default object-position utility values matching Tailwind CSS.
+ */
+export declare const defaultObjectPositionValues: {
+    bottom: string;
+    center: string;
+    left: string;
+    "left-bottom": string;
+    "left-top": string;
+    right: string;
+    "right-bottom": string;
+    "right-top": string;
+    top: 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",
+ * Default outline-style utility values matching Tailwind CSS.
+ */
+export declare const defaultOutlineStyleValues: {
+    none: string;
+    solid: string;
+    dashed: string;
+    dotted: string;
+    double: string;
+};
+
+/**
+ * Default overflow utility values matching Tailwind CSS.
+ */
+export declare const defaultOverflowValues: {
+    auto: string;
+    hidden: string;
+    clip: string;
+    visible: string;
+    scroll: string;
+};
+
+/**
+ * Default overflow-wrap utility values matching Tailwind CSS.
+ */
+export declare const defaultOverflowWrapValues: {
+    normal: string;
+    "break-word": string;
+    anywhere: string;
+};
+
+/**
+ * Default overscroll-behavior utility values matching Tailwind CSS.
+ */
+export declare const defaultOverscrollValues: {
+    auto: string;
+    contain: string;
+    none: string;
+};
+
+/**
+ * Default perspective-origin utility values matching Tailwind CSS.
+ */
+export declare const defaultPerspectiveOriginValues: {
+    center: string;
+    top: string;
+    "top-right": string;
+    right: string;
+    "bottom-right": string;
+    bottom: string;
+    "bottom-left": string;
+    left: string;
+    "top-left": string;
+};
+
+/**
+ * Default place-content utility values matching Tailwind CSS.
+ */
+export declare const defaultPlaceContentValues: {
+    center: string;
+    start: string;
+    end: string;
+    between: string;
+    around: string;
+    evenly: string;
+    baseline: string;
+    stretch: string;
+};
+
+/**
+ * Default place-items utility values matching Tailwind CSS.
+ */
+export declare const defaultPlaceItemsValues: {
+    start: string;
+    end: string;
+    center: string;
+    baseline: string;
+    stretch: string;
+};
+
+/**
+ * Default place-self utility values matching Tailwind CSS.
+ */
+export declare const defaultPlaceSelfValues: {
+    auto: string;
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+};
+
+/**
+ * Default pointer-events utility values matching Tailwind CSS.
+ */
+export declare const defaultPointerEventsValues: {
+    none: string;
+    auto: string;
+};
+
+/**
+ * Default position utility values matching Tailwind CSS.
+ */
+export declare const defaultPositionValues: {
+    static: string;
+    fixed: string;
+    absolute: string;
+    relative: string;
+    sticky: string;
+};
+
+/**
+ * Default resize utility values matching Tailwind CSS.
+ */
+export declare const defaultResizeValues: {
+    none: string;
+    y: string;
+    x: string;
+    both: string;
+};
+
+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;
+};
+
+/**
+ * Default scroll-behavior utility values matching Tailwind CSS.
+ */
+export declare const defaultScrollBehaviorValues: {
+    auto: string;
+    smooth: string;
+};
+
+/**
+ * Default scroll-snap-align utility values matching Tailwind CSS.
+ */
+export declare const defaultScrollSnapAlignValues: {
+    start: string;
+    end: string;
+    center: string;
+    "align-none": string;
+};
+
+/**
+ * Default scroll-snap-stop utility values matching Tailwind CSS.
+ */
+export declare const defaultScrollSnapStopValues: {
+    normal: string;
+    always: string;
+};
+
+/**
+ * Default scroll-snap-type utility values matching Tailwind CSS.
+ */
+export declare const defaultScrollSnapTypeValues: {
+    none: string;
+    x: string;
+    y: string;
+    both: string;
+    mandatory: string;
+    proximity: string;
+};
+
+/**
+ * Default table-layout utility values matching Tailwind CSS.
+ */
+export declare const defaultTableLayoutValues: {
+    auto: string;
+    fixed: string;
+};
+
+/**
+ * Default text-align utility values matching Tailwind CSS.
+ */
+export declare const defaultTextAlignValues: {
+    left: string;
+    center: string;
+    right: string;
+    justify: string;
+    start: string;
+    end: string;
+};
+
+/**
+ * Default text-decoration-line utility values matching Tailwind CSS.
+ */
+export declare const defaultTextDecorationLineValues: {
+    underline: string;
+    overline: string;
+    "line-through": string;
+    "no-underline": string;
+};
+
+/**
+ * Default text-decoration-style utility values matching Tailwind CSS.
+ */
+export declare const defaultTextDecorationStyleValues: {
+    solid: string;
+    double: string;
+    dotted: string;
+    dashed: string;
+    wavy: string;
+};
+
+/**
+ * Default text-overflow utility values matching Tailwind CSS.
+ */
+export declare const defaultTextOverflowValues: {
+    truncate: string;
+    "text-ellipsis": string;
+    "text-clip": string;
+};
+
+/**
+ * Default text-transform utility values matching Tailwind CSS.
+ */
+export declare const defaultTextTransformValues: {
+    uppercase: string;
+    lowercase: string;
+    capitalize: string;
+    "normal-case": string;
+};
+
+/**
+ * Default text-wrap utility values matching Tailwind CSS.
+ */
+export declare const defaultTextWrapValues: {
+    wrap: string;
+    nowrap: string;
+    balance: string;
+    pretty: string;
+};
+
+/**
+ * Default touch-action utility values matching Tailwind CSS.
+ */
+export declare const defaultTouchActionValues: {
+    auto: string;
+    none: string;
+    "pan-x": string;
+    "pan-left": string;
+    "pan-right": string;
+    "pan-y": string;
+    "pan-up": string;
+    "pan-down": string;
+    "pinch-zoom": string;
+    manipulation: string;
+};
+
+/**
+ * Default transform-origin utility values matching Tailwind CSS.
+ */
+export declare const defaultTransformOriginValues: {
+    center: string;
+    top: string;
+    "top-right": string;
+    right: string;
+    "bottom-right": string;
+    bottom: string;
+    "bottom-left": string;
+    left: string;
+    "top-left": string;
+};
+
+/**
+ * Default transform-style utility values matching Tailwind CSS.
+ */
+export declare const defaultTransformStyleValues: {
+    flat: string;
+    "3d": string;
+};
+
+/**
+ * Default transition-behavior utility values matching Tailwind CSS.
+ */
+export declare const defaultTransitionBehaviorValues: {
+    normal: string;
+    "allow-discrete": string;
+};
+
+/**
+ * Default transition-property utility values matching Tailwind CSS.
+ */
+export declare const defaultTransitionPropertyValues: {
+    none: string;
+    all: string;
+    default: string;
+    colors: string;
+    opacity: string;
+    shadow: string;
+    transform: string;
+};
+
+/**
+ * Default user-select utility values matching Tailwind CSS.
+ */
+export declare const defaultUserSelectValues: {
+    none: string;
+    text: string;
+    all: string;
+    auto: string;
+};
+
+/**
+ * Default vertical-align utility values matching Tailwind CSS.
+ */
+export declare const defaultVerticalAlignValues: {
+    baseline: string;
+    top: string;
+    middle: string;
+    bottom: string;
+    "text-top": string;
+    "text-bottom": string;
+    sub: string;
+    super: string;
+};
+
+/**
+ * Default visibility utility values matching Tailwind CSS.
+ */
+export declare const defaultVisibilityValues: {
+    visible: string;
+    invisible: string;
+    collapse: string;
+};
+
+/**
+ * Default white-space utility values matching Tailwind CSS.
+ */
+export declare const defaultWhitespaceValues: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    "pre-line": string;
+    "pre-wrap": string;
+    "break-spaces": string;
+};
+
+/**
+ * Default will-change utility values matching Tailwind CSS.
+ */
+export declare const defaultWillChangeValues: {
+    auto: string;
+    scroll: string;
+    contents: string;
+    transform: string;
+};
+
+/**
+ * Default word-break utility values matching Tailwind CSS.
+ */
+export declare const defaultWordBreakValues: {
+    normal: string;
+    words: string;
+    all: string;
+    keep: string;
+};
+
+/**
+ * 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, unknown>, 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 accent-color utility classes.
+ */
+export declare const useAccentColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create align-content utility classes.
+ */
+export declare const useAlignContentUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    center: string;
+    start: string;
+    end: string;
+    between: string;
+    around: string;
+    evenly: string;
+    baseline: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create align-items utility classes.
+ */
+export declare const useAlignItemsUtility: <T extends Record<string, TokenValue> = {
+    start: string;
+    end: string;
+    center: string;
+    baseline: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create align-self utility classes.
+ */
+export declare const useAlignSelfUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+    baseline: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create animation utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useAnimationUtility(s);
+ * // Uses defaults: ._animate:none, ._animate:spin, etc.
+ * ```
+ */
+export declare const useAnimationUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    spin: string;
+    ping: string;
+    pulse: string;
+    bounce: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create appearance utility classes.
+ */
+export declare const useAppearanceUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    auto: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create aspect-ratio utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useAspectRatioUtility(s, { square: '1 / 1', video: '16 / 9', '4/3': '4 / 3' });
+ * ```
+ */
+export declare const useAspectRatioUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    square: string;
+    video: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-blur utility classes.
+ */
+export declare const useBackdropBlurUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-brightness utility classes.
+ */
+export declare const useBackdropBrightnessUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-contrast utility classes.
+ */
+export declare const useBackdropContrastUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-grayscale utility classes.
+ */
+export declare const useBackdropGrayscaleUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-hue-rotate utility classes.
+ */
+export declare const useBackdropHueRotateUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-invert utility classes.
+ */
+export declare const useBackdropInvertUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-opacity utility classes.
+ */
+export declare const useBackdropOpacityUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-saturate utility classes.
+ */
+export declare const useBackdropSaturateUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backdrop-sepia utility classes.
+ */
+export declare const useBackdropSepiaUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create backface-visibility utility classes.
+ */
+export declare const useBackfaceVisibilityUtility: <T extends Record<string, TokenValue> = {
+    visible: string;
+    hidden: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-attachment utility classes.
+ */
+export declare const useBackgroundAttachmentUtility: <T extends Record<string, TokenValue> = {
+    fixed: string;
+    local: string;
+    scroll: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-blend-mode utility classes.
+ */
+export declare const useBackgroundBlendModeUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    multiply: string;
+    screen: string;
+    overlay: string;
+    darken: string;
+    lighten: string;
+    "color-dodge": string;
+    "color-burn": string;
+    "hard-light": string;
+    "soft-light": string;
+    difference: string;
+    exclusion: string;
+    hue: string;
+    saturation: string;
+    color: string;
+    luminosity: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-clip utility classes.
+ */
+export declare const useBackgroundClipUtility: <T extends Record<string, TokenValue> = {
+    border: string;
+    padding: string;
+    content: string;
+    text: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-color utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useBackgroundColorUtility(s, {
+ *     inherit: 'inherit',
+ *     current: 'currentColor',
+ *     transparent: 'transparent',
+ *     black: '#000',
+ *     white: '#fff',
+ * });
+ * ```
+ */
+export declare const useBackgroundColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-image utility classes.
+ */
+export declare const useBackgroundImageUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    "gradient-to-t": string;
+    "gradient-to-tr": string;
+    "gradient-to-r": string;
+    "gradient-to-br": string;
+    "gradient-to-b": string;
+    "gradient-to-bl": string;
+    "gradient-to-l": string;
+    "gradient-to-tl": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-origin utility classes.
+ */
+export declare const useBackgroundOriginUtility: <T extends Record<string, TokenValue> = {
+    border: string;
+    padding: string;
+    content: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-position utility classes.
+ */
+export declare const useBackgroundPositionUtility: <T extends Record<string, TokenValue> = {
+    bottom: string;
+    center: string;
+    left: string;
+    "left-bottom": string;
+    "left-top": string;
+    right: string;
+    "right-bottom": string;
+    "right-top": string;
+    top: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-repeat utility classes.
+ */
+export declare const useBackgroundRepeatUtility: <T extends Record<string, TokenValue> = {
+    repeat: string;
+    "no-repeat": string;
+    "repeat-x": string;
+    "repeat-y": string;
+    round: string;
+    space: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create background-size utility classes.
+ */
+export declare const useBackgroundSizeUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    cover: string;
+    contain: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create blur utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useBlurUtility(s, {
+ *     none: '0',
+ *     sm: '4px',
+ *     default: '8px',
+ *     md: '12px',
+ *     lg: '16px',
+ *     xl: '24px',
+ *     '2xl': '40px',
+ *     '3xl': '64px',
+ * });
+ * ```
+ */
+export declare const useBlurUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-collapse utility classes.
+ */
+export declare const useBorderCollapseUtility: <T extends Record<string, TokenValue> = {
+    collapse: string;
+    separate: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 border-bottom-color utility classes.
+ */
+export declare const useBorderColorBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-inline-end-color utility classes.
+ */
+export declare const useBorderColorEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-left-color utility classes.
+ */
+export declare const useBorderColorLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-right-color utility classes.
+ */
+export declare const useBorderColorRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-inline-start-color utility classes.
+ */
+export declare const useBorderColorStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-top-color utility classes.
+ */
+export declare const useBorderColorTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-color utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useBorderColorUtility(s, {
+ *     inherit: 'inherit',
+ *     current: 'currentColor',
+ *     transparent: 'transparent',
+ *     black: '#000',
+ *     white: '#fff',
+ * });
+ * ```
+ */
+export declare const useBorderColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-x-color utility classes.
+ */
+export declare const useBorderColorXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-y-color utility classes.
+ */
+export declare const useBorderColorYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 border-bottom-left-radius utility classes.
+ */
+export declare const useBorderRadiusBottomLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-bottom-right-radius utility classes.
+ */
+export declare const useBorderRadiusBottomRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius-bottom utility classes.
+ */
+export declare const useBorderRadiusBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-end-end-radius utility classes.
+ */
+export declare const useBorderRadiusEndEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-end-start-radius utility classes.
+ */
+export declare const useBorderRadiusEndStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius-end utility classes (logical property).
+ */
+export declare const useBorderRadiusEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius-left utility classes.
+ */
+export declare const useBorderRadiusLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius-right utility classes.
+ */
+export declare const useBorderRadiusRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-start-end-radius utility classes.
+ */
+export declare const useBorderRadiusStartEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-start-start-radius utility classes.
+ */
+export declare const useBorderRadiusStartStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius-start utility classes (logical property).
+ */
+export declare const useBorderRadiusStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-top-left-radius utility classes.
+ */
+export declare const useBorderRadiusTopLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-top-right-radius utility classes.
+ */
+export declare const useBorderRadiusTopRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius-top utility classes.
+ */
+export declare const useBorderRadiusTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-radius utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useBorderRadiusUtility(s, {
+ *     none: '0px',
+ *     sm: '0.125rem',
+ *     default: '0.25rem',
+ *     md: '0.375rem',
+ *     lg: '0.5rem',
+ *     full: '9999px',
+ * });
+ * ```
+ */
+export declare const useBorderRadiusUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-spacing utility classes.
+ */
+export declare const useBorderSpacingUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-spacing-x utility classes.
+ */
+export declare const useBorderSpacingXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-spacing-y utility classes.
+ */
+export declare const useBorderSpacingYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 border-style utility classes.
+ */
+export declare const useBorderStyleUtility: <T extends Record<string, TokenValue> = {
+    solid: string;
+    dashed: string;
+    dotted: string;
+    double: string;
+    hidden: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 border-bottom-width utility classes.
+ */
+export declare const useBorderWidthBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-inline-end-width utility classes.
+ */
+export declare const useBorderWidthEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-left-width utility classes.
+ */
+export declare const useBorderWidthLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-right-width utility classes.
+ */
+export declare const useBorderWidthRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-inline-start-width utility classes.
+ */
+export declare const useBorderWidthStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-top-width utility classes.
+ */
+export declare const useBorderWidthTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-width utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useBorderWidthUtility(s, {
+ *     '0': '0px',
+ *     '2': '2px',
+ *     '4': '4px',
+ *     '8': '8px',
+ *     default: '1px',
+ * });
+ * ```
+ */
+export declare const useBorderWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-x-width utility classes.
+ */
+export declare const useBorderWidthXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create border-y-width utility classes.
+ */
+export declare const useBorderWidthYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create bottom utility classes.
+ */
+export declare const useBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create box-decoration-break utility classes.
+ */
+export declare const useBoxDecorationBreakUtility: <T extends Record<string, TokenValue> = {
+    clone: string;
+    slice: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 box-shadow-color utility classes.
+ */
+export declare const useBoxShadowColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create box-shadow utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useBoxShadowUtility(s, {
+ *     sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+ *     default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+ *     md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+ *     lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+ *     xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+ *     '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+ *     inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+ *     none: 'none',
+ * });
+ * ```
+ */
+export declare const useBoxShadowUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create box-sizing utility classes.
+ */
+export declare const useBoxSizingUtility: <T extends Record<string, TokenValue> = {
+    border: string;
+    content: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create break-after utility classes.
+ */
+export declare const useBreakAfterUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    avoid: string;
+    all: string;
+    "avoid-page": string;
+    page: string;
+    left: string;
+    right: string;
+    column: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create break-before utility classes.
+ */
+export declare const useBreakBeforeUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    avoid: string;
+    all: string;
+    "avoid-page": string;
+    page: string;
+    left: string;
+    right: string;
+    column: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create break-inside utility classes.
+ */
+export declare const useBreakInsideUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    avoid: string;
+    "avoid-page": string;
+    "avoid-column": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 brightness utility classes.
+ */
+export declare const useBrightnessUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create caption-side utility classes.
+ */
+export declare const useCaptionSideUtility: <T extends Record<string, TokenValue> = {
+    top: string;
+    bottom: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create caret-color utility classes.
+ */
+export declare const useCaretColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create clear utility classes.
+ */
+export declare const useClearUtility: <T extends Record<string, TokenValue> = {
+    start: string;
+    end: string;
+    left: string;
+    right: string;
+    both: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 } = useColor(s, { 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 color-scheme utility classes.
+ */
+export declare const useColorSchemeUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    light: string;
+    dark: string;
+    "light-dark": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create a set of relative color shade (darker) levels
+ *
+ * @usage
+ * const s = styleframe();
+ *
+ * const { colorPrimary } = useColor(s, { 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 } = useColor(s, { 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 color utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useColorUtility(s, {
+ *     inherit: 'inherit',
+ *     current: 'currentColor',
+ *     transparent: 'transparent',
+ *     black: '#000',
+ *     white: '#fff',
+ * });
+ * ```
+ */
+export declare const useColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create columns utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useColumnsUtility(s, {
+ *     '1': '1',
+ *     '2': '2',
+ *     '3': '3',
+ *     auto: 'auto',
+ *     '3xs': '16rem',
+ *     '2xs': '18rem',
+ *     xs: '20rem',
+ * });
+ * ```
+ */
+export declare const useColumnsUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create content utility classes for pseudo-elements.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useContentUtility(s, {
+ *     none: 'none',
+ *     empty: "''",
+ * });
+ * ```
+ */
+export declare const useContentUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create contrast utility classes.
+ */
+export declare const useContrastUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create cursor utility classes.
+ */
+export declare const useCursorUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    default: string;
+    pointer: string;
+    wait: string;
+    text: string;
+    move: string;
+    help: string;
+    "not-allowed": string;
+    none: string;
+    "context-menu": string;
+    progress: string;
+    cell: string;
+    crosshair: string;
+    "vertical-text": string;
+    alias: string;
+    copy: string;
+    "no-drop": string;
+    grab: string;
+    grabbing: string;
+    "all-scroll": string;
+    "col-resize": string;
+    "row-resize": string;
+    "n-resize": string;
+    "e-resize": string;
+    "s-resize": string;
+    "w-resize": string;
+    "ne-resize": string;
+    "nw-resize": string;
+    "se-resize": string;
+    "sw-resize": string;
+    "ew-resize": string;
+    "ns-resize": string;
+    "nesw-resize": string;
+    "nwse-resize": string;
+    "zoom-in": string;
+    "zoom-out": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create display utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useDisplayUtility(s, { flex: 'flex', block: 'block', hidden: 'none' });
+ * // Generates: ._display:flex, ._display:block, ._display:hidden
+ * ```
+ */
+export declare const useDisplayUtility: <T extends Record<string, TokenValue> = {
+    block: string;
+    "inline-block": string;
+    inline: string;
+    flex: string;
+    "inline-flex": string;
+    table: string;
+    "inline-table": string;
+    "table-caption": string;
+    "table-cell": string;
+    "table-column": string;
+    "table-column-group": string;
+    "table-footer-group": string;
+    "table-header-group": string;
+    "table-row-group": string;
+    "table-row": string;
+    "flow-root": string;
+    grid: string;
+    "inline-grid": string;
+    contents: string;
+    "list-item": string;
+    hidden: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create divide-color utility classes.
+ */
+export declare const useDivideColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create divide-style utility classes.
+ */
+export declare const useDivideStyleUtility: <T extends Record<string, TokenValue> = {
+    solid: string;
+    dashed: string;
+    dotted: string;
+    double: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create divide-x-reverse utility classes.
+ */
+export declare const useDivideXReverseUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create divide-x-width utility classes.
+ * Adds borders between horizontal children.
+ */
+export declare const useDivideXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create divide-y-reverse utility classes.
+ */
+export declare const useDivideYReverseUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create divide-y-width utility classes.
+ * Adds borders between vertical children.
+ */
+export declare const useDivideYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create drop-shadow utility classes.
+ */
+export declare const useDropShadowUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create a set of easing variables for use in a Styleframe instance.
+ *
+ * Includes CSS keywords, cubic-bezier curves from easings.net, and
+ * linear() functions for spring and bounce animations.
+ *
+ * @usage
+ * ```typescript
+ * import { styleframe } from "styleframe";
+ * import { useEasing } from "@styleframe/theme";
+ *
+ * const s = styleframe();
+ *
+ * const {
+ *   easing, // Variable<'easing'>
+ *   easingEaseInOut, // Variable<'easing.ease-in-out'>
+ *   easingEaseOutCubic, // Variable<'easing.ease-out-cubic'>
+ *   easingSpring, // Variable<'easing.spring'>
+ *   easingBounce, // Variable<'easing.bounce'>
+ * } = useEasing(s, {
+ *   default: "ease-in-out",
+ *   "ease-in-out": "ease-in-out",
+ *   "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
+ *   spring: "linear(...)",
+ *   bounce: "linear(...)",
+ * });
+ * ```
+ */
+export declare const useEasing: <T extends Record<string, TokenValue> = {
+    readonly linear: "linear";
+    readonly ease: "ease";
+    readonly "ease-in": "ease-in";
+    readonly "ease-out": "ease-out";
+    readonly "ease-in-out": "ease-in-out";
+    readonly "ease-in-sine": "cubic-bezier(0.47, 0, 0.745, 0.715)";
+    readonly "ease-out-sine": "cubic-bezier(0.39, 0.575, 0.565, 1)";
+    readonly "ease-in-out-sine": "cubic-bezier(0.445, 0.05, 0.55, 0.95)";
+    readonly "ease-in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)";
+    readonly "ease-out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+    readonly "ease-in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)";
+    readonly "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)";
+    readonly "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    readonly "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)";
+    readonly "ease-in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)";
+    readonly "ease-out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)";
+    readonly "ease-in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)";
+    readonly "ease-in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)";
+    readonly "ease-out-quint": "cubic-bezier(0.23, 1, 0.32, 1)";
+    readonly "ease-in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)";
+    readonly "ease-in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)";
+    readonly "ease-out-expo": "cubic-bezier(0.19, 1, 0.22, 1)";
+    readonly "ease-in-out-expo": "cubic-bezier(1, 0, 0, 1)";
+    readonly "ease-in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)";
+    readonly "ease-out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)";
+    readonly "ease-in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)";
+    readonly "ease-in-back": "cubic-bezier(0.6, -0.28, 0.735, 0.045)";
+    readonly "ease-out-back": "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+    readonly "ease-in-out-back": "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    readonly spring: "linear(0, 0.0018, 0.0069 1.15%, 0.026 2.3%, 0.0637, 0.1135 5.18%, 0.2229 7.78%, 0.5977 15.84%, 0.7014, 0.7904, 0.8641, 0.9228, 0.9676 28.8%, 1.0032 31.68%, 1.0225, 1.0352 36.29%, 1.0431 38.88%, 1.046 42.05%, 1.0448 44.35%, 1.0407 47.23%, 1.0118 61.63%, 1.0025 69.41%, 0.9981 80.35%, 0.9992 99.94%)";
+    readonly bounce: "linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1)";
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"easing", T, ".">;
+
+/**
+ * Create fill utility classes for SVG elements.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useFillUtility(s, {
+ *     none: 'none',
+ *     current: 'currentColor',
+ *     inherit: 'inherit',
+ * });
+ * ```
+ */
+export declare const useFillUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create flex-basis utility classes.
+ */
+export declare const useFlexBasisUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create flex-direction utility classes.
+ */
+export declare const useFlexDirectionUtility: <T extends Record<string, TokenValue> = {
+    row: string;
+    "row-reverse": string;
+    col: string;
+    "col-reverse": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create flex-grow utility classes.
+ */
+export declare const useFlexGrowUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create flex-shrink utility classes.
+ */
+export declare const useFlexShrinkUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create flex utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useFlexUtility(s);
+ * // Uses defaults: ._flex:1, ._flex:auto, ._flex:initial, ._flex:none
+ * ```
+ */
+export declare const useFlexUtility: <T extends Record<string, TokenValue> = {
+    "1": string;
+    auto: string;
+    initial: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create flex-wrap utility classes.
+ */
+export declare const useFlexWrapUtility: <T extends Record<string, TokenValue> = {
+    wrap: string;
+    "wrap-reverse": string;
+    nowrap: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create float utility classes.
+ */
+export declare const useFloatUtility: <T extends Record<string, TokenValue> = {
+    start: string;
+    end: string;
+    right: string;
+    left: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 font-family utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useFontFamilyUtility(s, {
+ *     sans: 'ui-sans-serif, system-ui, sans-serif',
+ *     serif: 'ui-serif, Georgia, serif',
+ *     mono: 'ui-monospace, monospace',
+ * });
+ * ```
+ */
+export declare const useFontFamilyUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 font-size utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useFontSizeUtility(s, {
+ *     xs: '0.75rem',
+ *     sm: '0.875rem',
+ *     base: '1rem',
+ *     lg: '1.125rem',
+ *     xl: '1.25rem',
+ * });
+ * ```
+ */
+export declare const useFontSizeUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create font-smoothing utility classes.
+ */
+export declare const useFontSmoothingUtility: <T extends Record<string, TokenValue> = {
+    antialiased: string;
+    "subpixel-antialiased": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create font-stretch utility classes.
+ */
+export declare const useFontStretchUtility: <T extends Record<string, TokenValue> = {
+    "ultra-condensed": string;
+    "extra-condensed": string;
+    condensed: string;
+    "semi-condensed": string;
+    normal: string;
+    "semi-expanded": string;
+    expanded: string;
+    "extra-expanded": string;
+    "ultra-expanded": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create font-style utility classes.
+ */
+export declare const useFontStyleUtility: <T extends Record<string, TokenValue> = {
+    italic: string;
+    "not-italic": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create font-variant-numeric utility classes.
+ */
+export declare const useFontVariantNumericUtility: <T extends Record<string, TokenValue> = {
+    "normal-nums": string;
+    ordinal: string;
+    "slashed-zero": string;
+    "lining-nums": string;
+    "oldstyle-nums": string;
+    "proportional-nums": string;
+    "tabular-nums": string;
+    "diagonal-fractions": string;
+    "stacked-fractions": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 font-weight utility classes.
+ */
+export declare const useFontWeightUtility: <T extends Record<string, TokenValue> = {
+    thin: string;
+    extralight: string;
+    light: string;
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    extrabold: string;
+    black: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create forced-color-adjust utility classes.
+ */
+export declare const useForcedColorAdjustUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create gap utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useGapUtility(s, { '0': '0', '1': '0.25rem', '2': '0.5rem' });
+ * ```
+ */
+export declare const useGapUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create column-gap utility classes.
+ */
+export declare const useGapXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create row-gap utility classes.
+ */
+export declare const useGapYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create gradient from-color utility classes.
+ */
+export declare const useGradientFromUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create gradient to-color utility classes.
+ */
+export declare const useGradientToUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create gradient via-color utility classes.
+ */
+export declare const useGradientViaUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grayscale utility classes.
+ */
+export declare const useGrayscaleUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-auto-columns utility classes.
+ */
+export declare const useGridAutoColumnsUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-auto-flow utility classes.
+ */
+export declare const useGridAutoFlowUtility: <T extends Record<string, TokenValue> = {
+    row: string;
+    col: string;
+    dense: string;
+    "row-dense": string;
+    "col-dense": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-auto-rows utility classes.
+ */
+export declare const useGridAutoRowsUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-column-end utility classes.
+ */
+export declare const useGridColumnEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-column-start utility classes.
+ */
+export declare const useGridColumnStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-column utility classes (span).
+ */
+export declare const useGridColumnUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-row-end utility classes.
+ */
+export declare const useGridRowEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-row-start utility classes.
+ */
+export declare const useGridRowStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-row utility classes.
+ */
+export declare const useGridRowUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-template-columns utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useGridTemplateColumnsUtility(s, {
+ *     '1': 'repeat(1, minmax(0, 1fr))',
+ *     '2': 'repeat(2, minmax(0, 1fr))',
+ *     '3': 'repeat(3, minmax(0, 1fr))',
+ *     none: 'none',
+ *     subgrid: 'subgrid',
+ * });
+ * ```
+ */
+export declare const useGridTemplateColumnsUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create grid-template-rows utility classes.
+ */
+export declare const useGridTemplateRowsUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create height utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useHeightUtility(s, {
+ *     full: '100%',
+ *     screen: '100vh',
+ *     auto: 'auto',
+ *     '1/2': '50%',
+ * });
+ * ```
+ */
+export declare const useHeightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create hue-rotate utility classes.
+ */
+export declare const useHueRotateUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create hyphens utility classes.
+ */
+export declare const useHyphensUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    manual: string;
+    auto: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create inset-inline-end utility classes.
+ */
+export declare const useInsetEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create inset-inline-start utility classes.
+ */
+export declare const useInsetStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create inset utility classes (top, right, bottom, left).
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useInsetUtility(s, { '0': '0', '1': '0.25rem', auto: 'auto' });
+ * ```
+ */
+export declare const useInsetUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create inset-x utility classes (left and right).
+ */
+export declare const useInsetXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create inset-y utility classes (top and bottom).
+ */
+export declare const useInsetYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create invert utility classes.
+ */
+export declare const useInvertUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create isolation utility classes.
+ */
+export declare const useIsolationUtility: <T extends Record<string, TokenValue> = {
+    isolate: string;
+    auto: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create justify-content utility classes.
+ */
+export declare const useJustifyContentUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    start: string;
+    end: string;
+    center: string;
+    between: string;
+    around: string;
+    evenly: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create justify-items utility classes.
+ */
+export declare const useJustifyItemsUtility: <T extends Record<string, TokenValue> = {
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create justify-self utility classes.
+ */
+export declare const useJustifySelfUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create left utility classes.
+ */
+export declare const useLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 letter-spacing utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useLetterSpacingUtility(s, {
+ *     tighter: '-0.05em',
+ *     tight: '-0.025em',
+ *     normal: '0em',
+ *     wide: '0.025em',
+ *     wider: '0.05em',
+ *     widest: '0.1em',
+ * });
+ * ```
+ */
+export declare const useLetterSpacingUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create line-clamp utility classes.
+ * Limits the number of visible lines with an ellipsis.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useLineClampUtility(s, { '1': '1', '2': '2', '3': '3', none: 'unset' });
+ * ```
+ */
+export declare const useLineClampUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 line-height utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useLineHeightUtility(s, {
+ *     none: '1',
+ *     tight: '1.25',
+ *     snug: '1.375',
+ *     normal: '1.5',
+ *     relaxed: '1.625',
+ *     loose: '2',
+ * });
+ * ```
+ */
+export declare const useLineHeightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create list-style-image utility classes.
+ */
+export declare const useListStyleImageUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create list-style-position utility classes.
+ */
+export declare const useListStylePositionUtility: <T extends Record<string, TokenValue> = {
+    inside: string;
+    outside: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create list-style-type utility classes.
+ */
+export declare const useListStyleTypeUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    disc: string;
+    decimal: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create vertical margin utility classes (top and bottom).
+ */
+export declare const useMarginBlockUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-bottom utility classes.
+ */
+export declare const useMarginBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-inline-end utility classes.
+ */
+export declare const useMarginInlineEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-inline-start utility classes.
+ */
+export declare const useMarginInlineStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create horizontal margin utility classes (left and right).
+ */
+export declare const useMarginInlineUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-left utility classes.
+ */
+export declare const useMarginLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-right utility classes.
+ */
+export declare const useMarginRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-top utility classes.
+ */
+export declare const useMarginTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useMarginUtility(s, { sm: '0.5rem', md: '1rem', lg: '1.5rem', auto: 'auto' });
+ * // Generates: ._margin:sm, ._margin:md, ._margin:lg, ._margin:auto
+ * ```
+ */
+export declare const useMarginUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-x utility classes (left and right).
+ */
+export declare const useMarginXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create margin-y utility classes (top and bottom).
+ */
+export declare const useMarginYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create max-height utility classes.
+ */
+export declare const useMaxHeightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create max-width utility classes.
+ */
+export declare const useMaxWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create min-height utility classes.
+ */
+export declare const useMinHeightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create min-width utility classes.
+ */
+export declare const useMinWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create mix-blend-mode utility classes.
+ */
+export declare const useMixBlendModeUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    multiply: string;
+    screen: string;
+    overlay: string;
+    darken: string;
+    lighten: string;
+    "color-dodge": string;
+    "color-burn": string;
+    "hard-light": string;
+    "soft-light": string;
+    difference: string;
+    exclusion: string;
+    hue: string;
+    saturation: string;
+    color: string;
+    luminosity: string;
+    "plus-darker": string;
+    "plus-lighter": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 not-sr-only utility class.
+ * Undoes the sr-only utility.
+ */
+export declare const useNotSrOnlyUtility: <T extends Record<string, TokenValue> = {
+    default: true;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create object-fit utility classes.
+ */
+export declare const useObjectFitUtility: <T extends Record<string, TokenValue> = {
+    contain: string;
+    cover: string;
+    fill: string;
+    none: string;
+    "scale-down": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create object-position utility classes.
+ */
+export declare const useObjectPositionUtility: <T extends Record<string, TokenValue> = {
+    bottom: string;
+    center: string;
+    left: string;
+    "left-bottom": string;
+    "left-top": string;
+    right: string;
+    "right-bottom": string;
+    "right-top": string;
+    top: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create opacity utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useOpacityUtility(s, {
+ *     '0': '0',
+ *     '5': '0.05',
+ *     '10': '0.1',
+ *     '25': '0.25',
+ *     '50': '0.5',
+ *     '75': '0.75',
+ *     '100': '1',
+ * });
+ * ```
+ */
+export declare const useOpacityUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create order utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useOrderUtility(s, {
+ *     '1': '1',
+ *     '2': '2',
+ *     first: '-9999',
+ *     last: '9999',
+ *     none: '0',
+ * });
+ * ```
+ */
+export declare const useOrderUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create outline-color utility classes.
+ */
+export declare const useOutlineColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create outline-offset utility classes.
+ */
+export declare const useOutlineOffsetUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create outline-style utility classes.
+ */
+export declare const useOutlineStyleUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    solid: string;
+    dashed: string;
+    dotted: string;
+    double: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create outline-width utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useOutlineWidthUtility(s, {
+ *     '0': '0px',
+ *     '1': '1px',
+ *     '2': '2px',
+ *     '4': '4px',
+ *     '8': '8px',
+ * });
+ * ```
+ */
+export declare const useOutlineWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overflow utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useOverflowUtility(s);
+ * // Uses defaults: ._overflow:auto, ._overflow:hidden, etc.
+ * ```
+ */
+export declare const useOverflowUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    hidden: string;
+    clip: string;
+    visible: string;
+    scroll: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overflow-wrap utility classes.
+ */
+export declare const useOverflowWrapUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    "break-word": string;
+    anywhere: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overflow-x utility classes.
+ */
+export declare const useOverflowXUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    hidden: string;
+    clip: string;
+    visible: string;
+    scroll: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overflow-y utility classes.
+ */
+export declare const useOverflowYUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    hidden: string;
+    clip: string;
+    visible: string;
+    scroll: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overscroll-behavior utility classes.
+ */
+export declare const useOverscrollUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    contain: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overscroll-behavior-x utility classes.
+ */
+export declare const useOverscrollXUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    contain: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create overscroll-behavior-y utility classes.
+ */
+export declare const useOverscrollYUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    contain: string;
+    none: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create vertical padding utility classes (top and bottom).
+ */
+export declare const usePaddingBlockUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-bottom utility classes.
+ */
+export declare const usePaddingBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-inline-end utility classes.
+ */
+export declare const usePaddingInlineEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-inline-start utility classes.
+ */
+export declare const usePaddingInlineStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create horizontal padding utility classes (left and right).
+ */
+export declare const usePaddingInlineUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-left utility classes.
+ */
+export declare const usePaddingLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-right utility classes.
+ */
+export declare const usePaddingRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-top utility classes.
+ */
+export declare const usePaddingTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * usePaddingUtility(s, { sm: '0.5rem', md: '1rem', lg: '1.5rem' });
+ * // Generates: ._padding:sm, ._padding:md, ._padding:lg
+ * ```
+ */
+export declare const usePaddingUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-x utility classes (left and right).
+ */
+export declare const usePaddingXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create padding-y utility classes (top and bottom).
+ */
+export declare const usePaddingYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create perspective-origin utility classes.
+ */
+export declare const usePerspectiveOriginUtility: <T extends Record<string, TokenValue> = {
+    center: string;
+    top: string;
+    "top-right": string;
+    right: string;
+    "bottom-right": string;
+    bottom: string;
+    "bottom-left": string;
+    left: string;
+    "top-left": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create perspective utility classes.
+ */
+export declare const usePerspectiveUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create place-content utility classes.
+ */
+export declare const usePlaceContentUtility: <T extends Record<string, TokenValue> = {
+    center: string;
+    start: string;
+    end: string;
+    between: string;
+    around: string;
+    evenly: string;
+    baseline: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create place-items utility classes.
+ */
+export declare const usePlaceItemsUtility: <T extends Record<string, TokenValue> = {
+    start: string;
+    end: string;
+    center: string;
+    baseline: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create place-self utility classes.
+ */
+export declare const usePlaceSelfUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    start: string;
+    end: string;
+    center: string;
+    stretch: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create pointer-events utility classes.
+ */
+export declare const usePointerEventsUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    auto: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create position utility classes.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * usePositionUtility(s);
+ * // Uses defaults: ._position:static, ._position:fixed, etc.
+ * ```
+ */
+export declare const usePositionUtility: <T extends Record<string, TokenValue> = {
+    static: string;
+    fixed: string;
+    absolute: string;
+    relative: string;
+    sticky: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create resize utility classes.
+ */
+export declare const useResizeUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    y: string;
+    x: string;
+    both: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create right utility classes.
+ */
+export declare const useRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create ring-color utility classes.
+ */
+export declare const useRingColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create ring-inset utility classes.
+ */
+export declare const useRingInsetUtility: <T extends Record<string, TokenValue> = {
+    default: true;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create ring-offset-color utility classes.
+ */
+export declare const useRingOffsetColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create ring-offset-width utility classes.
+ */
+export declare const useRingOffsetWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create ring-width utility classes.
+ * Uses box-shadow to create a ring effect.
+ *
+ * @example
+ * ```typescript
+ * const s = styleframe();
+ * useRingWidthUtility(s, {
+ *     '0': '0px',
+ *     '1': '1px',
+ *     '2': '2px',
+ *     default: '3px',
+ *     '4': '4px',
+ *     '8': '8px',
+ * });
+ * ```
+ */
+export declare const useRingWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create rotate utility classes.
+ */
+export declare const useRotateUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create rotate-x utility classes.
+ */
+export declare const useRotateXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create rotate-y utility classes.
+ */
+export declare const useRotateYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create saturate utility classes.
+ */
+export declare const useSaturateUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * 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 {
- *   borderColorPrimary, // Variable<'border-color--primary'>
- *   borderColorSecondary, // Variable<'border-color--secondary'>
- * } = useBorderColor(s, {
- * 	 primary: ref(colorPrimary),
- *   secondary: ref(colorSecondary),
+ *   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 useBorderColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-color", T, "--">;
+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 scale utility classes.
+ */
+export declare const useScaleUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scale-x utility classes.
+ */
+export declare const useScaleXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scale-y utility classes.
+ */
+export declare const useScaleYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-behavior utility classes.
+ */
+export declare const useScrollBehaviorUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    smooth: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-bottom utility classes.
+ */
+export declare const useScrollMarginBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-end utility classes.
+ */
+export declare const useScrollMarginEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-left utility classes.
+ */
+export declare const useScrollMarginLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-right utility classes.
+ */
+export declare const useScrollMarginRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-start utility classes.
+ */
+export declare const useScrollMarginStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-top utility classes.
+ */
+export declare const useScrollMarginTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin utility classes.
+ */
+export declare const useScrollMarginUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-x utility classes.
+ */
+export declare const useScrollMarginXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-margin-y utility classes.
+ */
+export declare const useScrollMarginYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-bottom utility classes.
+ */
+export declare const useScrollPaddingBottomUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-end utility classes.
+ */
+export declare const useScrollPaddingEndUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-left utility classes.
+ */
+export declare const useScrollPaddingLeftUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-right utility classes.
+ */
+export declare const useScrollPaddingRightUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-start utility classes.
+ */
+export declare const useScrollPaddingStartUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-top utility classes.
+ */
+export declare const useScrollPaddingTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding utility classes.
+ */
+export declare const useScrollPaddingUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-x utility classes.
+ */
+export declare const useScrollPaddingXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-padding-y utility classes.
+ */
+export declare const useScrollPaddingYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-snap-align utility classes.
+ */
+export declare const useScrollSnapAlignUtility: <T extends Record<string, TokenValue> = {
+    start: string;
+    end: string;
+    center: string;
+    "align-none": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create scroll-snap-stop utility classes.
+ */
+export declare const useScrollSnapStopUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    always: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * 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",
- * });
- * ```
+ * Create scroll-snap-type utility classes.
  */
-export declare const useBorderRadius: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-radius", T, "--">;
+export declare const useScrollSnapTypeUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    x: string;
+    y: string;
+    both: string;
+    mandatory: string;
+    proximity: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * 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",
- * });
- * ```
+ * Create sepia utility classes.
  */
-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, "--">;
+export declare const useSepiaUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of border-width variables for use in a Styleframe instance.
+ * Create size utility classes (sets both width and height).
  *
- * @usage
+ * @example
  * ```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",
+ * useSizeUtility(s, {
+ *     full: '100%',
+ *     '4': '1rem',
+ *     '8': '2rem',
  * });
+ * // Generates classes that set both width and height
  * ```
  */
-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, "--">;
+export declare const useSizeUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * 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)`,
- * });
- * ```
+ * Create skew-x utility classes.
  */
-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, "--">;
+export declare const useSkewXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * 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,
- * });
- * ```
+ * Create skew-y utility classes.
  */
-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, "--">;
+export declare const useSkewYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of color variables for use in a Styleframe instance.
+ * Create space-x-reverse utility classes.
+ * Reverses the direction of horizontal spacing.
+ */
+export declare const useSpaceXReverseUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create space-x utility classes (horizontal space between children).
+ * Uses the "lobotomized owl" selector to add margin-left to all but the first child.
  *
- * @usage
+ * @example
  * ```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",
- * });
+ * useSpaceXUtility(s, { sm: '0.5rem', md: '1rem' });
+ * // Generates: ._space-x:sm > * + *, ._space-x:md > * + *
  * ```
  */
-export declare const useColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"color", T, "--">;
+export declare const useSpaceXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of lightness levels for a color variable.
+ * Create space-y-reverse utility classes.
+ * Reverses the direction of vertical spacing.
+ */
+export declare const useSpaceYReverseUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create space-y utility classes (vertical space between children).
+ * Uses the "lobotomized owl" selector to add margin-top to all but the first child.
+ */
+export declare const useSpaceYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create a set of spacing variables for use in a Styleframe instance.
  *
  * @usage
  * ```typescript
  * import { styleframe } from "styleframe";
- * import { useColors } from "styleframe/theme";
+ * import { useSpacing } 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,
- *   ...
+ *   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 function useColorLightness<Name extends string, T extends Record<string | number, number>>(s: Styleframe, color: Variable<Name>, levels: T): ExportKeys<Name, T, "-">;
+export declare const useSpacing: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"spacing", 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,
- *   ...
- * });
- * ```
+ * Create screen-reader only utility class.
+ * Visually hides an element while keeping it accessible to screen readers.
  */
-export declare function useColorShade<Name extends string, T extends Record<string | number, number>>(s: Styleframe, color: Variable<Name>, levels: T): ExportKeys<`${Name}-shade`, T, "-">;
+export declare const useSrOnlyUtility: <T extends Record<string, TokenValue> = {
+    default: true;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * 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,
- *   ...
- * });
- * ```
+ * Create stroke utility classes for SVG elements.
  */
-export declare function useColorTint<Name extends string, T extends Record<string | number, number>>(s: Styleframe, color: Variable<Name>, levels: T): ExportKeys<`${Name}-tint`, T, "-">;
+export declare const useStrokeUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of font family variables for use in a Styleframe instance.
+ * Create stroke-width utility classes for SVG elements.
+ */
+export declare const useStrokeWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create table-layout utility classes.
+ */
+export declare const useTableLayoutUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    fixed: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-align utility classes.
+ */
+export declare const useTextAlignUtility: <T extends Record<string, TokenValue> = {
+    left: string;
+    center: string;
+    right: string;
+    justify: string;
+    start: string;
+    end: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-color utility classes.
  *
- * @usage
+ * @example
  * ```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",
+ * useTextColorUtility(s, {
+ *     inherit: 'inherit',
+ *     current: 'currentColor',
+ *     transparent: 'transparent',
+ *     black: '#000',
+ *     white: '#fff',
  * });
  * ```
  */
-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, "--">;
+export declare const useTextColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of font-size variables for use in a Styleframe instance.
- *
- * @usage
- * ```typescript
- * import { styleframe } from "styleframe";
- * import { useFontSize } from "styleframe/theme";
+ * Create text-decoration-color utility classes.
+ */
+export declare const useTextDecorationColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-decoration-line utility classes.
+ */
+export declare const useTextDecorationLineUtility: <T extends Record<string, TokenValue> = {
+    underline: string;
+    overline: string;
+    "line-through": string;
+    "no-underline": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-decoration-style utility classes.
+ */
+export declare const useTextDecorationStyleUtility: <T extends Record<string, TokenValue> = {
+    solid: string;
+    double: string;
+    dotted: string;
+    dashed: string;
+    wavy: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-decoration-thickness utility classes.
+ */
+export declare const useTextDecorationThicknessUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-indent utility classes.
  *
+ * @example
+ * ```typescript
  * 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",
+ * useTextIndentUtility(s, {
+ *     '0': '0px',
+ *     '1': '0.25rem',
+ *     '2': '0.5rem',
+ *     '4': '1rem',
  * });
  * ```
  */
-export declare const useFontSize: <T extends Record<string, TokenValue> = {
-    default: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-size", T, "--">;
+export declare const useTextIndentUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of font-weight variables for use in a Styleframe instance.
+ * Create text-overflow utility classes.
+ */
+export declare const useTextOverflowUtility: <T extends Record<string, TokenValue> = {
+    truncate: string;
+    "text-ellipsis": string;
+    "text-clip": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-shadow-color utility classes.
+ */
+export declare const useTextShadowColorUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-shadow utility classes.
  *
- * @usage
+ * @example
  * ```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",
+ * useTextShadowUtility(s, {
+ *     sm: '0 1px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.05))',
+ *     default: '0 1px 3px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1))',
+ *     md: '0 2px 4px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1))',
+ *     lg: '0 4px 8px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1))',
+ *     none: 'none',
  * });
  * ```
  */
-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, "--">;
+export declare const useTextShadowUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of letter-spacing variables for use in a Styleframe instance.
+ * Create text-transform utility classes.
+ */
+export declare const useTextTransformUtility: <T extends Record<string, TokenValue> = {
+    uppercase: string;
+    lowercase: string;
+    capitalize: string;
+    "normal-case": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-underline-offset utility classes.
  *
- * @usage
+ * @example
  * ```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",
+ * useTextUnderlineOffsetUtility(s, {
+ *     auto: 'auto',
+ *     '0': '0px',
+ *     '1': '1px',
+ *     '2': '2px',
+ *     '4': '4px',
+ *     '8': '8px',
  * });
  * ```
  */
-export declare const useLetterSpacing: <T extends Record<string, TokenValue> = {
-    default: string;
-    tighter: string;
-    tight: string;
+export declare const useTextUnderlineOffsetUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create text-wrap utility classes.
+ */
+export declare const useTextWrapUtility: <T extends Record<string, TokenValue> = {
+    wrap: string;
+    nowrap: string;
+    balance: string;
+    pretty: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create top utility classes.
+ */
+export declare const useTopUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create touch-action utility classes.
+ */
+export declare const useTouchActionUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    none: string;
+    "pan-x": string;
+    "pan-left": string;
+    "pan-right": string;
+    "pan-y": string;
+    "pan-up": string;
+    "pan-down": string;
+    "pinch-zoom": string;
+    manipulation: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create transform-origin utility classes.
+ */
+export declare const useTransformOriginUtility: <T extends Record<string, TokenValue> = {
+    center: string;
+    top: string;
+    "top-right": string;
+    right: string;
+    "bottom-right": string;
+    bottom: string;
+    "bottom-left": string;
+    left: string;
+    "top-left": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create transform-style utility classes.
+ */
+export declare const useTransformStyleUtility: <T extends Record<string, TokenValue> = {
+    flat: string;
+    "3d": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create transition-behavior utility classes.
+ */
+export declare const useTransitionBehaviorUtility: <T extends Record<string, TokenValue> = {
     normal: string;
-    wide: string;
-    wider: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"letter-spacing", T, "--">;
+    "allow-discrete": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of line-height variables for use in a Styleframe instance.
+ * Create transition-delay utility classes.
+ */
+export declare const useTransitionDelayUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create transition-duration utility classes.
+ */
+export declare const useTransitionDurationUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create transition-property utility classes.
+ */
+export declare const useTransitionPropertyUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    all: string;
+    default: string;
+    colors: string;
+    opacity: string;
+    shadow: string;
+    transform: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create transition-timing-function utility classes.
+ */
+export declare const useTransitionTimingFunctionUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create translate utility classes (both x and y).
+ */
+export declare const useTranslateUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create translate-x utility classes.
+ */
+export declare const useTranslateXUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create translate-y utility classes.
+ */
+export declare const useTranslateYUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create translate-z utility classes.
+ */
+export declare const useTranslateZUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create user-select utility classes.
+ */
+export declare const useUserSelectUtility: <T extends Record<string, TokenValue> = {
+    none: string;
+    text: string;
+    all: string;
+    auto: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Register all utility factories with the Styleframe instance and return their creator functions.
  *
- * @usage
+ * This function is useful when you want to register all utilities at once for use with recipes.
+ * Each utility factory is registered without default values, allowing recipes to automatically
+ * generate utility classes based on the values used in recipe declarations.
+ *
+ * @example
  * ```typescript
  * import { styleframe } from "styleframe";
- * import { useLineHeight } from "styleframe/theme";
+ * import { useUtilities } 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,
+ *   createMarginUtility,
+ *   createPaddingUtility,
+ *   createDisplayUtility,
+ *   // ... all other utilities
+ * } = useUtilities(s);
+ *
+ * // Now you can use the creator functions to define utility values
+ * createMarginUtility({ sm: '0.5rem', md: '1rem', lg: '1.5rem' });
+ * createPaddingUtility({ sm: '0.5rem', md: '1rem', lg: '1.5rem' });
+ *
+ * // Or use them in recipes - utilities are already registered
+ * s.recipe({
+ *   name: 'button',
+ *   base: { display: 'flex' },
+ *   variants: {
+ *     size: {
+ *       sm: { padding: '0.5rem' },
+ *       md: { padding: '1rem' },
+ *     },
+ *   },
  * });
  * ```
  */
-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, "--">;
+export declare function useUtilities(s: Styleframe): {
+    createForcedColorAdjustUtility: UtilityCreatorFn;
+    createNotSrOnlyUtility: UtilityCreatorFn;
+    createSrOnlyUtility: UtilityCreatorFn;
+    createBackgroundAttachmentUtility: UtilityCreatorFn;
+    createBackgroundClipUtility: UtilityCreatorFn;
+    createBackgroundColorUtility: UtilityCreatorFn;
+    createBackgroundImageUtility: UtilityCreatorFn;
+    createBackgroundOriginUtility: UtilityCreatorFn;
+    createBackgroundPositionUtility: UtilityCreatorFn;
+    createBackgroundRepeatUtility: UtilityCreatorFn;
+    createBackgroundSizeUtility: UtilityCreatorFn;
+    createGradientFromUtility: UtilityCreatorFn;
+    createGradientToUtility: UtilityCreatorFn;
+    createGradientViaUtility: UtilityCreatorFn;
+    createBorderColorBottomUtility: UtilityCreatorFn;
+    createBorderColorEndUtility: UtilityCreatorFn;
+    createBorderColorLeftUtility: UtilityCreatorFn;
+    createBorderColorRightUtility: UtilityCreatorFn;
+    createBorderColorStartUtility: UtilityCreatorFn;
+    createBorderColorTopUtility: UtilityCreatorFn;
+    createBorderColorUtility: UtilityCreatorFn;
+    createBorderColorXUtility: UtilityCreatorFn;
+    createBorderColorYUtility: UtilityCreatorFn;
+    createBorderRadiusBottomLeftUtility: UtilityCreatorFn;
+    createBorderRadiusBottomRightUtility: UtilityCreatorFn;
+    createBorderRadiusBottomUtility: UtilityCreatorFn;
+    createBorderRadiusEndEndUtility: UtilityCreatorFn;
+    createBorderRadiusEndStartUtility: UtilityCreatorFn;
+    createBorderRadiusEndUtility: UtilityCreatorFn;
+    createBorderRadiusLeftUtility: UtilityCreatorFn;
+    createBorderRadiusRightUtility: UtilityCreatorFn;
+    createBorderRadiusStartEndUtility: UtilityCreatorFn;
+    createBorderRadiusStartStartUtility: UtilityCreatorFn;
+    createBorderRadiusStartUtility: UtilityCreatorFn;
+    createBorderRadiusTopLeftUtility: UtilityCreatorFn;
+    createBorderRadiusTopRightUtility: UtilityCreatorFn;
+    createBorderRadiusTopUtility: UtilityCreatorFn;
+    createBorderRadiusUtility: UtilityCreatorFn;
+    createBorderStyleUtility: UtilityCreatorFn;
+    createBorderWidthBottomUtility: UtilityCreatorFn;
+    createBorderWidthEndUtility: UtilityCreatorFn;
+    createBorderWidthLeftUtility: UtilityCreatorFn;
+    createBorderWidthRightUtility: UtilityCreatorFn;
+    createBorderWidthStartUtility: UtilityCreatorFn;
+    createBorderWidthTopUtility: UtilityCreatorFn;
+    createBorderWidthUtility: UtilityCreatorFn;
+    createBorderWidthXUtility: UtilityCreatorFn;
+    createBorderWidthYUtility: UtilityCreatorFn;
+    createDivideColorUtility: UtilityCreatorFn;
+    createDivideStyleUtility: UtilityCreatorFn;
+    createDivideXReverseUtility: UtilityCreatorFn;
+    createDivideXUtility: UtilityCreatorFn;
+    createDivideYReverseUtility: UtilityCreatorFn;
+    createDivideYUtility: UtilityCreatorFn;
+    createOutlineColorUtility: UtilityCreatorFn;
+    createOutlineOffsetUtility: UtilityCreatorFn;
+    createOutlineStyleUtility: UtilityCreatorFn;
+    createOutlineWidthUtility: UtilityCreatorFn;
+    createRingColorUtility: UtilityCreatorFn;
+    createRingInsetUtility: UtilityCreatorFn;
+    createRingOffsetColorUtility: UtilityCreatorFn;
+    createRingOffsetWidthUtility: UtilityCreatorFn;
+    createRingWidthUtility: UtilityCreatorFn;
+    createBackgroundBlendModeUtility: UtilityCreatorFn;
+    createBoxShadowColorUtility: UtilityCreatorFn;
+    createBoxShadowUtility: UtilityCreatorFn;
+    createMixBlendModeUtility: UtilityCreatorFn;
+    createOpacityUtility: UtilityCreatorFn;
+    createTextShadowColorUtility: UtilityCreatorFn;
+    createTextShadowUtility: UtilityCreatorFn;
+    createBackdropBlurUtility: UtilityCreatorFn;
+    createBackdropBrightnessUtility: UtilityCreatorFn;
+    createBackdropContrastUtility: UtilityCreatorFn;
+    createBackdropGrayscaleUtility: UtilityCreatorFn;
+    createBackdropHueRotateUtility: UtilityCreatorFn;
+    createBackdropInvertUtility: UtilityCreatorFn;
+    createBackdropOpacityUtility: UtilityCreatorFn;
+    createBackdropSaturateUtility: UtilityCreatorFn;
+    createBackdropSepiaUtility: UtilityCreatorFn;
+    createBlurUtility: UtilityCreatorFn;
+    createBrightnessUtility: UtilityCreatorFn;
+    createContrastUtility: UtilityCreatorFn;
+    createDropShadowUtility: UtilityCreatorFn;
+    createGrayscaleUtility: UtilityCreatorFn;
+    createHueRotateUtility: UtilityCreatorFn;
+    createInvertUtility: UtilityCreatorFn;
+    createSaturateUtility: UtilityCreatorFn;
+    createSepiaUtility: UtilityCreatorFn;
+    createAlignContentUtility: UtilityCreatorFn;
+    createAlignItemsUtility: UtilityCreatorFn;
+    createAlignSelfUtility: UtilityCreatorFn;
+    createFlexBasisUtility: UtilityCreatorFn;
+    createFlexDirectionUtility: UtilityCreatorFn;
+    createFlexGrowUtility: UtilityCreatorFn;
+    createFlexShrinkUtility: UtilityCreatorFn;
+    createFlexUtility: UtilityCreatorFn;
+    createFlexWrapUtility: UtilityCreatorFn;
+    createGapUtility: UtilityCreatorFn;
+    createGapXUtility: UtilityCreatorFn;
+    createGapYUtility: UtilityCreatorFn;
+    createGridAutoColumnsUtility: UtilityCreatorFn;
+    createGridAutoFlowUtility: UtilityCreatorFn;
+    createGridAutoRowsUtility: UtilityCreatorFn;
+    createGridColumnEndUtility: UtilityCreatorFn;
+    createGridColumnStartUtility: UtilityCreatorFn;
+    createGridColumnUtility: UtilityCreatorFn;
+    createGridRowEndUtility: UtilityCreatorFn;
+    createGridRowStartUtility: UtilityCreatorFn;
+    createGridRowUtility: UtilityCreatorFn;
+    createGridTemplateColumnsUtility: UtilityCreatorFn;
+    createGridTemplateRowsUtility: UtilityCreatorFn;
+    createJustifyContentUtility: UtilityCreatorFn;
+    createJustifyItemsUtility: UtilityCreatorFn;
+    createJustifySelfUtility: UtilityCreatorFn;
+    createOrderUtility: UtilityCreatorFn;
+    createPlaceContentUtility: UtilityCreatorFn;
+    createPlaceItemsUtility: UtilityCreatorFn;
+    createPlaceSelfUtility: UtilityCreatorFn;
+    createAccentColorUtility: UtilityCreatorFn;
+    createAppearanceUtility: UtilityCreatorFn;
+    createCaretColorUtility: UtilityCreatorFn;
+    createColorSchemeUtility: UtilityCreatorFn;
+    createCursorUtility: UtilityCreatorFn;
+    createPointerEventsUtility: UtilityCreatorFn;
+    createResizeUtility: UtilityCreatorFn;
+    createScrollBehaviorUtility: UtilityCreatorFn;
+    createScrollMarginBottomUtility: UtilityCreatorFn;
+    createScrollMarginEndUtility: UtilityCreatorFn;
+    createScrollMarginLeftUtility: UtilityCreatorFn;
+    createScrollMarginRightUtility: UtilityCreatorFn;
+    createScrollMarginStartUtility: UtilityCreatorFn;
+    createScrollMarginTopUtility: UtilityCreatorFn;
+    createScrollMarginUtility: UtilityCreatorFn;
+    createScrollMarginXUtility: UtilityCreatorFn;
+    createScrollMarginYUtility: UtilityCreatorFn;
+    createScrollPaddingBottomUtility: UtilityCreatorFn;
+    createScrollPaddingEndUtility: UtilityCreatorFn;
+    createScrollPaddingLeftUtility: UtilityCreatorFn;
+    createScrollPaddingRightUtility: UtilityCreatorFn;
+    createScrollPaddingStartUtility: UtilityCreatorFn;
+    createScrollPaddingTopUtility: UtilityCreatorFn;
+    createScrollPaddingUtility: UtilityCreatorFn;
+    createScrollPaddingXUtility: UtilityCreatorFn;
+    createScrollPaddingYUtility: UtilityCreatorFn;
+    createScrollSnapAlignUtility: UtilityCreatorFn;
+    createScrollSnapStopUtility: UtilityCreatorFn;
+    createScrollSnapTypeUtility: UtilityCreatorFn;
+    createTouchActionUtility: UtilityCreatorFn;
+    createUserSelectUtility: UtilityCreatorFn;
+    createWillChangeUtility: UtilityCreatorFn;
+    createAspectRatioUtility: UtilityCreatorFn;
+    createBottomUtility: UtilityCreatorFn;
+    createBoxDecorationBreakUtility: UtilityCreatorFn;
+    createBoxSizingUtility: UtilityCreatorFn;
+    createBreakAfterUtility: UtilityCreatorFn;
+    createBreakBeforeUtility: UtilityCreatorFn;
+    createBreakInsideUtility: UtilityCreatorFn;
+    createClearUtility: UtilityCreatorFn;
+    createColumnsUtility: UtilityCreatorFn;
+    createDisplayUtility: UtilityCreatorFn;
+    createFloatUtility: UtilityCreatorFn;
+    createInsetEndUtility: UtilityCreatorFn;
+    createInsetStartUtility: UtilityCreatorFn;
+    createInsetUtility: UtilityCreatorFn;
+    createInsetXUtility: UtilityCreatorFn;
+    createInsetYUtility: UtilityCreatorFn;
+    createIsolationUtility: UtilityCreatorFn;
+    createLeftUtility: UtilityCreatorFn;
+    createObjectFitUtility: UtilityCreatorFn;
+    createObjectPositionUtility: UtilityCreatorFn;
+    createOverflowUtility: UtilityCreatorFn;
+    createOverflowXUtility: UtilityCreatorFn;
+    createOverflowYUtility: UtilityCreatorFn;
+    createOverscrollUtility: UtilityCreatorFn;
+    createOverscrollXUtility: UtilityCreatorFn;
+    createOverscrollYUtility: UtilityCreatorFn;
+    createPositionUtility: UtilityCreatorFn;
+    createRightUtility: UtilityCreatorFn;
+    createTopUtility: UtilityCreatorFn;
+    createVisibilityUtility: UtilityCreatorFn;
+    createZIndexUtility: UtilityCreatorFn;
+    createHeightUtility: UtilityCreatorFn;
+    createMaxHeightUtility: UtilityCreatorFn;
+    createMaxWidthUtility: UtilityCreatorFn;
+    createMinHeightUtility: UtilityCreatorFn;
+    createMinWidthUtility: UtilityCreatorFn;
+    createSizeUtility: UtilityCreatorFn;
+    createWidthUtility: UtilityCreatorFn;
+    createMarginBlockUtility: UtilityCreatorFn;
+    createMarginBottomUtility: UtilityCreatorFn;
+    createMarginInlineEndUtility: UtilityCreatorFn;
+    createMarginInlineStartUtility: UtilityCreatorFn;
+    createMarginInlineUtility: UtilityCreatorFn;
+    createMarginLeftUtility: UtilityCreatorFn;
+    createMarginRightUtility: UtilityCreatorFn;
+    createMarginTopUtility: UtilityCreatorFn;
+    createMarginUtility: UtilityCreatorFn;
+    createMarginXUtility: UtilityCreatorFn;
+    createMarginYUtility: UtilityCreatorFn;
+    createPaddingBlockUtility: UtilityCreatorFn;
+    createPaddingBottomUtility: UtilityCreatorFn;
+    createPaddingInlineEndUtility: UtilityCreatorFn;
+    createPaddingInlineStartUtility: UtilityCreatorFn;
+    createPaddingInlineUtility: UtilityCreatorFn;
+    createPaddingLeftUtility: UtilityCreatorFn;
+    createPaddingRightUtility: UtilityCreatorFn;
+    createPaddingTopUtility: UtilityCreatorFn;
+    createPaddingUtility: UtilityCreatorFn;
+    createPaddingXUtility: UtilityCreatorFn;
+    createPaddingYUtility: UtilityCreatorFn;
+    createSpaceXReverseUtility: UtilityCreatorFn;
+    createSpaceXUtility: UtilityCreatorFn;
+    createSpaceYReverseUtility: UtilityCreatorFn;
+    createSpaceYUtility: UtilityCreatorFn;
+    createFillUtility: UtilityCreatorFn;
+    createStrokeUtility: UtilityCreatorFn;
+    createStrokeWidthUtility: UtilityCreatorFn;
+    createBorderCollapseUtility: UtilityCreatorFn;
+    createBorderSpacingUtility: UtilityCreatorFn;
+    createBorderSpacingXUtility: UtilityCreatorFn;
+    createBorderSpacingYUtility: UtilityCreatorFn;
+    createCaptionSideUtility: UtilityCreatorFn;
+    createTableLayoutUtility: UtilityCreatorFn;
+    createBackfaceVisibilityUtility: UtilityCreatorFn;
+    createPerspectiveOriginUtility: UtilityCreatorFn;
+    createPerspectiveUtility: UtilityCreatorFn;
+    createRotateUtility: UtilityCreatorFn;
+    createRotateXUtility: UtilityCreatorFn;
+    createRotateYUtility: UtilityCreatorFn;
+    createScaleUtility: UtilityCreatorFn;
+    createScaleXUtility: UtilityCreatorFn;
+    createScaleYUtility: UtilityCreatorFn;
+    createSkewXUtility: UtilityCreatorFn;
+    createSkewYUtility: UtilityCreatorFn;
+    createTransformOriginUtility: UtilityCreatorFn;
+    createTransformStyleUtility: UtilityCreatorFn;
+    createTranslateUtility: UtilityCreatorFn;
+    createTranslateXUtility: UtilityCreatorFn;
+    createTranslateYUtility: UtilityCreatorFn;
+    createTranslateZUtility: UtilityCreatorFn;
+    createAnimationUtility: UtilityCreatorFn;
+    createTransitionBehaviorUtility: UtilityCreatorFn;
+    createTransitionDelayUtility: UtilityCreatorFn;
+    createTransitionDurationUtility: UtilityCreatorFn;
+    createTransitionPropertyUtility: UtilityCreatorFn;
+    createTransitionTimingFunctionUtility: UtilityCreatorFn;
+    createColorUtility: UtilityCreatorFn;
+    createContentUtility: UtilityCreatorFn;
+    createFontFamilyUtility: UtilityCreatorFn;
+    createFontSizeUtility: UtilityCreatorFn;
+    createFontSmoothingUtility: UtilityCreatorFn;
+    createFontStretchUtility: UtilityCreatorFn;
+    createFontStyleUtility: UtilityCreatorFn;
+    createFontVariantNumericUtility: UtilityCreatorFn;
+    createFontWeightUtility: UtilityCreatorFn;
+    createHyphensUtility: UtilityCreatorFn;
+    createLetterSpacingUtility: UtilityCreatorFn;
+    createLineClampUtility: UtilityCreatorFn;
+    createLineHeightUtility: UtilityCreatorFn;
+    createListStyleImageUtility: UtilityCreatorFn;
+    createListStylePositionUtility: UtilityCreatorFn;
+    createListStyleTypeUtility: UtilityCreatorFn;
+    createOverflowWrapUtility: UtilityCreatorFn;
+    createTextAlignUtility: UtilityCreatorFn;
+    createTextColorUtility: UtilityCreatorFn;
+    createTextDecorationColorUtility: UtilityCreatorFn;
+    createTextDecorationLineUtility: UtilityCreatorFn;
+    createTextDecorationStyleUtility: UtilityCreatorFn;
+    createTextDecorationThicknessUtility: UtilityCreatorFn;
+    createTextIndentUtility: UtilityCreatorFn;
+    createTextOverflowUtility: UtilityCreatorFn;
+    createTextTransformUtility: UtilityCreatorFn;
+    createTextUnderlineOffsetUtility: UtilityCreatorFn;
+    createTextWrapUtility: UtilityCreatorFn;
+    createVerticalAlignUtility: UtilityCreatorFn;
+    createWhitespaceUtility: UtilityCreatorFn;
+    createWordBreakUtility: UtilityCreatorFn;
+};
 
 /**
- * Create a font-size scale for use in a Styleframe instance.
+ * Create vertical-align utility classes.
+ */
+export declare const useVerticalAlignUtility: <T extends Record<string, TokenValue> = {
+    baseline: string;
+    top: string;
+    middle: string;
+    bottom: string;
+    "text-top": string;
+    "text-bottom": string;
+    sub: string;
+    super: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create visibility utility classes.
  *
- * @usage
+ * @example
  * ```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],
- * });
+ * useVisibilityUtility(s);
+ * // Uses defaults: ._visibility:visible, ._visibility:invisible, ._visibility:collapse
  * ```
  */
-export declare function useMultiplier<Name extends string, T extends Record<string | number, TokenValue>>(s: Styleframe, variable: Variable<Name>, values: T): ExportKeys<Name, T>;
+export declare const useVisibilityUtility: <T extends Record<string, TokenValue> = {
+    visible: string;
+    invisible: string;
+    collapse: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of scale variables for use in a Styleframe instance.
+ * Create white-space utility classes.
+ */
+export declare const useWhitespaceUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    "pre-line": string;
+    "pre-wrap": string;
+    "break-spaces": string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create width utility classes.
  *
- * @usage
+ * @example
  * ```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,
+ * useWidthUtility(s, {
+ *     full: '100%',
+ *     screen: '100vw',
+ *     auto: 'auto',
+ *     '1/2': '50%',
+ *     '1/3': '33.333333%',
  * });
  * ```
  */
-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 const useWidthUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
-export declare function useScalePowers<T extends readonly number[]>(s: Styleframe, scale: Variable | Reference, powers?: T): Record<number, TokenValue>;
+/**
+ * Create will-change utility classes.
+ */
+export declare const useWillChangeUtility: <T extends Record<string, TokenValue> = {
+    auto: string;
+    scroll: string;
+    contents: string;
+    transform: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 /**
- * Create a set of spacing variables for use in a Styleframe instance.
+ * Create word-break utility classes.
+ */
+export declare const useWordBreakUtility: <T extends Record<string, TokenValue> = {
+    normal: string;
+    words: string;
+    all: string;
+    keep: string;
+}>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
+
+/**
+ * Create z-index utility classes.
  *
- * @usage
+ * @example
  * ```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",
+ * useZIndexUtility(s, {
+ *     '0': '0',
+ *     '10': '10',
+ *     '20': '20',
+ *     '30': '30',
+ *     '40': '40',
+ *     '50': '50',
+ *     auto: 'auto',
  * });
  * ```
  */
-export declare const useSpacing: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"spacing", T, "--">;
+export declare const useZIndexUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
 export { }