Design Tokens Presets

function useDesignTokensPreset(
    s: Styleframe,
    config?: DesignTokensPresetConfig
): DesignTokensPresetResult

const preset = useDesignTokensPreset(s);
const {
    borderRadius,     // Variable<'border-radius'>
    borderRadiusNone, // Variable<'border-radius.none'>
    borderRadiusSm,   // Variable<'border-radius.sm'>
    borderRadiusMd,   // Variable<'border-radius.md'>
    borderRadiusLg,   // Variable<'border-radius.lg'>
    borderRadiusXl,   // Variable<'border-radius.xl'>
    borderRadius2xl,  // Variable<'border-radius.2xl'>
    borderRadiusFull, // Variable<'border-radius.full'>
} = preset.borderRadius;

const preset = useDesignTokensPreset(s);
const {
    borderStyle,       // Variable<'border-style'>
    borderStyleNone,   // Variable<'border-style.none'>
    borderStyleSolid,  // Variable<'border-style.solid'>
    borderStyleDashed, // Variable<'border-style.dashed'>
    borderStyleDotted, // Variable<'border-style.dotted'>
    borderStyleDouble, // Variable<'border-style.double'>
    borderStyleGroove, // Variable<'border-style.groove'>
    borderStyleInset,  // Variable<'border-style.inset'>
    borderStyleOutset, // Variable<'border-style.outset'>
} = preset.borderStyle;

const preset = useDesignTokensPreset(s);
const {
    borderWidth,       // Variable<'border-width'>
    borderWidthNone,   // Variable<'border-width.none'>
    borderWidthThin,   // Variable<'border-width.thin'>
    borderWidthMedium, // Variable<'border-width.medium'>
    borderWidthThick,  // Variable<'border-width.thick'>
} = preset.borderWidth;

const preset = useDesignTokensPreset(s);
const {
    boxShadow,      // Variable<'box-shadow'>
    boxShadowNone,  // Variable<'box-shadow.none'>
    boxShadowXs,    // Variable<'box-shadow.xs'>
    boxShadowSm,    // Variable<'box-shadow.sm'>
    boxShadowMd,    // Variable<'box-shadow.md'>
    boxShadowLg,    // Variable<'box-shadow.lg'>
    boxShadowXl,    // Variable<'box-shadow.xl'>
    boxShadow2xl,   // Variable<'box-shadow.2xl'>
    boxShadowInner, // Variable<'box-shadow.inner'>
    boxShadowRing,  // Variable<'box-shadow.ring'>
} = preset.boxShadow;

const preset = useDesignTokensPreset(s);
const {
    breakpointXs, // Variable<'breakpoint.xs'>
    breakpointSm, // Variable<'breakpoint.sm'>
    breakpointMd, // Variable<'breakpoint.md'>
    breakpointLg, // Variable<'breakpoint.lg'>
    breakpointXl, // Variable<'breakpoint.xl'>
} = preset.breakpoint;

const preset = useDesignTokensPreset(s);
const {
    colorPrimary,   // Variable<'color.primary'>
    colorSecondary, // Variable<'color.secondary'>
    colorSuccess,   // Variable<'color.success'>
    colorWarning,   // Variable<'color.warning'>
    colorDanger,    // Variable<'color.danger'>
    colorInfo,      // Variable<'color.info'>
    colorLight,     // Variable<'color.light'>
    colorDark,      // Variable<'color.dark'>
} = preset.colors;

const preset = useDesignTokensPreset(s);
const {
    easingLinear,       // Variable<'easing.linear'>
    easingEase,         // Variable<'easing.ease'>
    easingEaseIn,       // Variable<'easing.ease-in'>
    easingEaseOut,      // Variable<'easing.ease-out'>
    easingEaseInOut,    // Variable<'easing.ease-in-out'>
    easingEaseInSine,   // Variable<'easing.ease-in-sine'>
    easingEaseOutCubic, // Variable<'easing.ease-out-cubic'>
    easingSpring,       // Variable<'easing.spring'>
    easingBounce,       // Variable<'easing.bounce'>
} = preset.easing;

const preset = useDesignTokensPreset(s);
const {
    fontFamily,      // Variable<'font-family'>
    fontFamilyBase,  // Variable<'font-family.base'>
    fontFamilyPrint, // Variable<'font-family.print'>
    fontFamilyMono,  // Variable<'font-family.mono'>
} = preset.fontFamily;

const preset = useDesignTokensPreset(s);
const {
    fontSize,    // Variable<'font-size'>
    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'>
    fontSize2xl, // Variable<'font-size.2xl'>
    fontSize3xl, // Variable<'font-size.3xl'>
    fontSize4xl, // Variable<'font-size.4xl'>
} = preset.fontSize;

const preset = useDesignTokensPreset(s);
const {
    fontStyle,        // Variable<'font-style'>
    fontStyleItalic,  // Variable<'font-style.italic'>
    fontStyleOblique, // Variable<'font-style.oblique'>
    fontStyleNormal,  // Variable<'font-style.normal'>
    fontStyleInherit, // Variable<'font-style.inherit'>
} = preset.fontStyle;

const preset = useDesignTokensPreset(s);
const {
    fontWeight,           // Variable<'font-weight'>
    fontWeightExtralight, // Variable<'font-weight.extralight'>
    fontWeightLight,      // Variable<'font-weight.light'>
    fontWeightNormal,     // Variable<'font-weight.normal'>
    fontWeightMedium,     // Variable<'font-weight.medium'>
    fontWeightSemibold,   // Variable<'font-weight.semibold'>
    fontWeightBold,       // Variable<'font-weight.bold'>
    fontWeightBlack,      // Variable<'font-weight.black'>
    fontWeightLighter,    // Variable<'font-weight.lighter'>
    fontWeightBolder,     // Variable<'font-weight.bolder'>
    fontWeightInherit,    // Variable<'font-weight.inherit'>
} = preset.fontWeight;

const preset = useDesignTokensPreset(s);
const {
    letterSpacing,        // Variable<'letter-spacing'>
    letterSpacingTighter, // Variable<'letter-spacing.tighter'>
    letterSpacingTight,   // Variable<'letter-spacing.tight'>
    letterSpacingNormal,  // Variable<'letter-spacing.normal'>
    letterSpacingWide,    // Variable<'letter-spacing.wide'>
    letterSpacingWider,   // Variable<'letter-spacing.wider'>
} = preset.letterSpacing;

const preset = useDesignTokensPreset(s);
const {
    lineHeight,        // Variable<'line-height'>
    lineHeightTight,   // Variable<'line-height.tight'>
    lineHeightSnug,    // Variable<'line-height.snug'>
    lineHeightNormal,  // Variable<'line-height.normal'>
    lineHeightRelaxed, // Variable<'line-height.relaxed'>
    lineHeightLoose,   // Variable<'line-height.loose'>
} = preset.lineHeight;

const preset = useDesignTokensPreset(s);
const {
    scale,                // Variable<'scale'>
    scaleMinorSecond,     // Variable<'scale.minor-second'>
    scaleMajorSecond,     // Variable<'scale.major-second'>
    scaleMinorThird,      // Variable<'scale.minor-third'>
    scaleMajorThird,      // Variable<'scale.major-third'>
    scalePerfectFourth,   // Variable<'scale.perfect-fourth'>
    scaleAugmentedFourth, // Variable<'scale.augmented-fourth'>
    scalePerfectFifth,    // Variable<'scale.perfect-fifth'>
    scaleGolden,          // Variable<'scale.golden'>
} = preset.scale;

const preset = useDesignTokensPreset(s);
// Access computed scale powers
const scalePowers = preset.scalePowers;
// Returns: { -2: CSS, -1: CSS, 0: CSS, 1: CSS, 2: CSS, 3: CSS, 4: CSS, 5: CSS }

const preset = useDesignTokensPreset(s);
const {
    spacing,    // Variable<'spacing'>
    spacing2xs, // Variable<'spacing.2xs'>
    spacingXs,  // Variable<'spacing.xs'>
    spacingSm,  // Variable<'spacing.sm'>
    spacingMd,  // Variable<'spacing.md'>
    spacingLg,  // Variable<'spacing.lg'>
    spacingXl,  // Variable<'spacing.xl'>
    spacing2xl, // Variable<'spacing.2xl'>
    spacing3xl, // Variable<'spacing.3xl'>
} = preset.spacing;

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

const s = styleframe();
const { ref, selector } = s;

const preset = useDesignTokensPreset(s);

// Destructure the variables you need from each domain
const { spacingMd } = preset.spacing;
const { colorPrimary, colorPrimary600 } = preset.colors;
const { borderRadiusMd } = preset.borderRadius;
const { fontWeightSemibold } = preset.fontWeight;
const { boxShadowSm } = preset.boxShadow;

// Use the generated variables in your styles
selector('.button', {
    padding: ref(spacingMd),
    backgroundColor: ref(colorPrimary),
    borderRadius: ref(borderRadiusMd),
    fontWeight: ref(fontWeightSemibold),
    boxShadow: ref(boxShadowSm),
});

selector('.button:hover', {
    backgroundColor: ref(colorPrimary600),
});

export default s;

import { styleframe } from 'styleframe';
import {
    useDesignTokensPreset,
    // Import default values
    defaultSpacingValues,
    defaultColorValues,
    defaultBorderRadiusValues,
} from '@styleframe/theme';

const s = styleframe();

// Use defaults with customizations
const preset = useDesignTokensPreset(s, {
    meta: { merge: true },
    spacing: {
        ...defaultSpacingValues,
        '4xl': '6rem', // Add a new size
    },
});

export default s;

const preset = useDesignTokensPreset(s, {
    colors: { primary: '#007bff' },
    spacing: { default: '@md', sm: '0.5rem', md: '1rem', lg: '2rem' },
    themes: {
        dark: {
            colors: { primary: '#60a5fa' },
        },
        compact: {
            spacing: { default: '0.75rem', sm: '0.25rem', lg: '1.5rem' },
        },
        high_contrast: {
            colors: { primary: '#0000ff' },
        },
    },
});

const preset = useDesignTokensPreset(s, {
    // No root-level colors or spacing defined
    themes: {
        default: {
            colors: { primary: '#ff6600', secondary: '#333' },
            spacing: { default: '0.5rem', sm: '0.25rem' },
        },
        dark: {
            colors: { primary: '#60a5fa' },
        },
    },
});

// Colors and spacing are created at :root from themes.default
// Only "dark" gets a [data-theme="dark"] block

const preset = useDesignTokensPreset(s, {
    colors: { brand: '#ff0000' },  // This wins
    themes: {
        default: {
            colors: { primary: '#007bff' },  // Ignored (root-level colors defined)
        },
    },
});