Styleframe Logo
Modifiers

Presets

Quickly register all modifier composables with the useModifiersPreset function for comprehensive modifier coverage in a single call.

Overview

The useModifiersPreset composable registers all available modifier categories with your Styleframe instance in a single function call. It returns a flat object containing all individual modifier instances, ready to be passed to utility creator functions.

Why use presets?

  • Complete Coverage: Register all 8 modifier categories with one function call
  • Flat Return Value: All individual modifiers are spread into a single flat object for easy destructuring
  • Selective Disabling: Disable specific categories you don't need via configuration

Quick Start

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useModifiersPreset, useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

// Register all modifiers
const { hover, focus, active, dark, disabled, first, last } = useModifiersPreset(s);

// Register utilities and create values with modifiers
const { createBackgroundColorUtility, createOpacityUtility } = useUtilitiesPreset(s);

createBackgroundColorUtility({
    primary: '#006cff',
    secondary: '#6c757d',
}, [hover, focus, dark]);

createOpacityUtility({
    0: '0',
    50: '0.5',
    100: '1',
}, [hover]);

export default s;

useModifiersPreset

Registers all modifier categories with the Styleframe instance and returns a flat object containing all individual modifier instances.

Signature

function useModifiersPreset(
    s: Styleframe,
    config?: ModifiersConfig
): ModifierInstances

Configuration Options

Each modifier category can be configured as:

  • Omitted or undefined (default): Enable the category
  • false: Disable the category entirely
OptionTypeDefaultDescription
pseudoStatesbooleantruePseudo-class state modifiers (hover, focus, active, etc.)
formStatesbooleantrueForm state modifiers (disabled, checked, valid, etc.)
structuralbooleantrueStructural pseudo-class modifiers (first, last, odd, even, etc.)
pseudoElementsbooleantruePseudo-element modifiers (before, after, placeholder, etc.)
mediaPreferencesbooleantrueMedia/preference query modifiers (dark, motionSafe, print, etc.)
ariaStatesbooleantrueARIA state modifiers (ariaExpanded, ariaDisabled, etc.)
directionalbooleantrueDirectional modifiers (rtl, ltr)
otherStatesbooleantrueOther state modifiers (open, inert)

Return Value

Returns a flat ModifierInstances object containing all individual modifiers from every enabled category. The modifiers are spread into a single object for easy destructuring:

const {
    // Pseudo-State
    hover, focus, focusWithin, focusVisible, active, visited, target,
    // Form State
    disabled, enabled, checked, indeterminate, required, optional, valid, invalid,
    placeholderShown, autofill, readOnly,
    // Structural
    first, last, only, odd, even, firstOfType, lastOfType, onlyOfType, empty,
    // Pseudo-Elements
    before, after, placeholder, selection, firstLetter, firstLine, marker, backdrop, file,
    // Media & Preferences
    dark, motionSafe, motionReduce, contrastMore, contrastLess, portrait, landscape, print, forcedColors,
    // ARIA State
    ariaBusy, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly,
    ariaRequired, ariaSelected,
    // Directional
    rtl, ltr,
    // Other State
    open, inert,
} = useModifiersPreset(s);

Selective Registration

Disable specific categories you don't need:

import { styleframe } from 'styleframe';
import { useModifiersPreset } from '@styleframe/theme';

const s = styleframe();

const modifiers = useModifiersPreset(s, {
    pseudoStates: true,        // Keep hover, focus, active, etc.
    formStates: true,          // Keep disabled, checked, valid, etc.
    mediaPreferences: true,    // Keep dark, motionReduce, etc.
    structural: false,         // Skip first, last, odd, even
    pseudoElements: false,     // Skip before, after, placeholder
    ariaStates: false,         // Skip ARIA modifiers
    directional: false,        // Skip rtl, ltr
    otherStates: false,        // Skip open, inert
});

export default s;

Pre-generating Modifier Variants

When using the Styleframe Vite plugin, the scanner automatically detects modifier-prefixed utility class names in your source files and generates the corresponding CSS — so you don't need to manually pass modifiers to every utility creator. However, if you want to pre-generate specific modifier variants tied to your design tokens, you can pass modifier instances to creator functions:

import { styleframe } from 'styleframe';
import { useUtilitiesPreset, useModifiersPreset, useColor } from '@styleframe/theme';

const s = styleframe();

// Register modifiers and get instances
const { hover, focus, dark } = useModifiersPreset(s);

// Register utilities and get creators
const { createBackgroundColorUtility, createTextColorUtility } = useUtilitiesPreset(s);

// Create color tokens
const { colorPrimary, colorSecondary } = useColor(s, {
    primary: '#006cff',
    secondary: '#6c757d',
} as const);

// Pre-generate modifier variants for specific values
createBackgroundColorUtility({
    primary: s.ref(colorPrimary),
    secondary: s.ref(colorSecondary),
}, [hover, focus, dark]);

createTextColorUtility({
    primary: s.ref(colorPrimary),
    secondary: s.ref(colorSecondary),
}, [hover]);

export default s;

This generates classes like _background-color:primary, _hover:background-color:primary, _focus:background-color:primary, and _dark:background-color:primary.

Available Modifier Groups

Group FunctionModifiersPurpose
usePseudoStateModifiers(s)hover, focus, focusWithin, focusVisible, active, visited, targetInteractive states
useFormStateModifiers(s)disabled, enabled, checked, indeterminate, required, optional, valid, invalid, placeholderShown, autofill, readOnlyForm element states
usePseudoElementModifiers(s)before, after, placeholder, selection, firstLetter, firstLine, marker, backdrop, fileElement sub-parts
useAriaStateModifiers(s)ariaBusy, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly, ariaRequired, ariaSelectedARIA attribute states
useStructuralModifiers(s)first, last, only, odd, even, firstOfType, lastOfType, onlyOfType, emptyDOM position
useMediaPreferenceModifiers(s)dark, motionSafe, motionReduce, contrastMore, contrastLess, portrait, landscape, print, forcedColorsUser preferences
useDirectionalModifiers(s)rtl, ltrText direction
useOtherStateModifiers(s)open, inertMiscellaneous states

FAQ

Overview

Explore Styleframe's modifier composables for generating state-based, responsive, and structural variants of your utility classes with full type safety.

Pseudo-State

Create pseudo-state modifiers for interactive states like hover, focus, active, and more with full type safety.