Presets

function useUtilitiesPreset(
    s: Styleframe,
    config?: UtilitiesPresetConfig
): Record<string, UtilityCreator>

const {
    createMarginUtility,
    createPaddingUtility,
    createDisplayUtility,
    // ... 200+ more creators
} = useUtilitiesPreset(s);

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

const s = styleframe();

// Create spacing tokens
const { spacingSm, spacingMd, spacingLg } = useSpacing(s, {
    default: '@md',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
});

// Register all utilities and get creators
const {
    createMarginUtility,
    createPaddingUtility,
    createGapUtility,
} = useUtilitiesPreset(s);

// Define specific values using your design tokens
createMarginUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
    auto: 'auto',
});

createPaddingUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
});

createGapUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
});

export default s;

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

const s = styleframe();

// Create design tokens
const { spacingSm, spacingMd, spacingLg, spacingXl } = useSpacing(s, {
    default: '@md',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
});

const { colorPrimary, colorSecondary } = useColor(s, {
    primary: '#3b82f6',
    secondary: '#6b7280',
});

// Get specific creators
const {
    createMarginUtility,
    createPaddingUtility,
    createBackgroundColorUtility,
    createTextColorUtility,
} = useUtilitiesPreset(s);

// Create utilities with your design tokens
createMarginUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
    xl: s.ref(spacingXl),
    auto: 'auto',
});

createPaddingUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
    xl: s.ref(spacingXl),
});

createBackgroundColorUtility({
    primary: s.ref(colorPrimary),
    secondary: s.ref(colorSecondary),
    white: '#ffffff',
    transparent: 'transparent',
});

createTextColorUtility({
    primary: s.ref(colorPrimary),
    secondary: s.ref(colorSecondary),
    white: '#ffffff',
    black: '#000000',
});

export default s;

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

const s = styleframe();

// Create comprehensive design tokens
const tokens = useDesignTokensPreset(s);

// Register all utilities
const utilities = useUtilitiesPreset(s);

// Use token values for utilities
utilities.createMarginUtility({
    '2xs': s.ref(tokens.spacing.spacing2xs),
    xs: s.ref(tokens.spacing.spacingXs),
    sm: s.ref(tokens.spacing.spacingSm),
    md: s.ref(tokens.spacing.spacingMd),
    lg: s.ref(tokens.spacing.spacingLg),
    xl: s.ref(tokens.spacing.spacingXl),
    '2xl': s.ref(tokens.spacing.spacing2xl),
    auto: 'auto',
});

utilities.createBorderRadiusUtility({
    none: s.ref(tokens.borderRadius.borderRadiusNone),
    sm: s.ref(tokens.borderRadius.borderRadiusSm),
    md: s.ref(tokens.borderRadius.borderRadiusMd),
    lg: s.ref(tokens.borderRadius.borderRadiusLg),
    full: s.ref(tokens.borderRadius.borderRadiusFull),
});

export default s;

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

const s = styleframe();

const utilities = useUtilitiesPreset(s, {
    // Use custom display values
    display: {
        block: 'block',
        flex: 'flex',
        grid: 'grid',
        hidden: 'none',
    },
    // Disable position utilities entirely
    position: false,
    // Custom cursor values
    cursor: {
        auto: 'auto',
        pointer: 'pointer',
        grab: 'grab',
    },
    // All other utilities use their defaults
});

export default s;

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

const s = styleframe();

const utilities = useUtilitiesPreset(s, {
    meta: { merge: true },
    // These values are ADDED to the defaults, not replacing them
    cursor: {
        'custom-cursor': "url('custom.cur'), auto",
    },
    display: {
        'custom-display': 'contents',
    },
});

// Now you have all default cursor values PLUS 'custom-cursor'
// And all default display values PLUS 'custom-display'

export default s;