Styleframe Logo
Elements

Elements Preset

Apply all HTML element base styles in a single call with useGlobalPreset, including body, headings, links, lists, code, focus, and selection.

Overview

The useGlobalPreset composable applies base styles to all common HTML elements in a single function call. It registers CSS custom properties for body, headings, links, paragraphs, lists, code blocks, and more — with sensible defaults that reference your design token system.

Why use the preset?

  • Quick start: Style every HTML element with one function call
  • Sensible defaults: All values reference standard design tokens (@color.primary, @spacing, @font-family, etc.)
  • Fully customizable: Override any element's config or disable elements entirely
  • Theme-aware: Supports centralized per-theme overrides for dark mode or brand themes
  • Incremental adoption: Disable individual elements with false and replace them with custom composable calls

Quick Start

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

const { body, heading, link } = useGlobalPreset(s);

export default s;

useGlobalPreset

Signature

function useGlobalPreset(
    s: Styleframe,
    config?: GlobalPresetConfig
): GlobalPresetResult

Configuration Options

Each element can be configured as:

  • Omitted/undefined (default): Use the element's default values
  • false: Skip this element entirely (no variables or selectors registered)
  • WithThemes<Config>: Use custom values with optional per-theme overrides
OptionTypeDefaultDescription
bodyWithThemes<BodyElementConfig> | falseEnabledBody color, background, font family, size, line height
headingWithThemes<HeadingElementConfig> | falseEnabledHeading font family, weight, line height, per-level sizes
paragraphWithThemes<ParagraphElementConfig> | falseEnabledParagraph top/bottom margins
linkWithThemes<LinkElementConfig> | falseEnabledLink color, decoration, hover states
olWithThemes<OlElementConfig> | falseEnabledOrdered list margin and padding
ulWithThemes<UlElementConfig> | falseEnabledUnordered list margin and padding
dlWithThemes<DlElementConfig> | falseEnabledDefinition list bottom margin
dtWithThemes<DtElementConfig> | falseEnabledDefinition term font weight
ddWithThemes<DdElementConfig> | falseEnabledDefinition description margins
codeWithThemes<CodeElementConfig> | falseEnabledCode font family and size
preWithThemes<PreElementConfig> | falseEnabledPre font family, size, bottom margin
kbdWithThemes<KbdElementConfig> | falseEnabledKeyboard input background, color, font, padding
sampWithThemes<SampElementConfig> | falseEnabledSample output font family
abbrWithThemes<AbbrElementConfig> | falseEnabledAbbreviation cursor and text decoration
markWithThemes<MarkElementConfig> | falseEnabledMark background, color, padding
hrWithThemes<HrElementConfig> | falseEnabledHorizontal rule border and margin
captionWithThemes<CaptionElementConfig> | falseEnabledTable caption color, padding, text alignment
addressWithThemes<AddressElementConfig> | falseEnabledAddress bottom margin
selectionWithThemes<SelectionStateConfig> | falseEnabledText selection background and color
focusWithThemes<FocusStateConfig> | falseEnabledFocus-visible outline styles
imgbooleantrueImage and SVG vertical alignment
iframebooleantrueIframe border removal
outputbooleantrueOutput display mode
legendbooleantrueLegend form layout
summarybooleantrueSummary cursor style
themesRecord<string, GlobalThemeOverrides>—Centralized per-theme overrides for all elements

Return Value

The useGlobalPreset function returns a GlobalPresetResult object containing the result of each enabled element composable:

const {
    body,       // BodyElementResult
    heading,    // HeadingElementResult
    link,       // LinkElementResult
    paragraph,  // ParagraphElementResult
    code,       // CodeElementResult
    selection,  // SelectionStateResult
    focus,      // FocusStateResult
    // ... all other element results
} = useGlobalPreset(s);

Each result contains the CSS variable tokens for that element. For example, body.bodyColor is a Variable<"body.color"> that you can use with ref().

Examples

Customizing Individual Elements

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

const { body, heading, link } = useGlobalPreset(s, {
    body: {
        color: '#333333',
        background: '#ffffff',
        fontFamily: '"Inter", sans-serif',
    },
    heading: {
        fontWeight: '600',
        sizes: {
            h1: '2.5rem',
            h2: '2rem',
        },
    },
    link: {
        color: '@color.info',
        hoverColor: '@color.info-700',
    },
});

export default s;

Disabling Specific Elements

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

// Only apply body, headings, and links — skip everything else
const { body, heading, link } = useGlobalPreset(s, {
    paragraph: false,
    ol: false,
    ul: false,
    dl: false,
    dt: false,
    dd: false,
    code: false,
    pre: false,
    kbd: false,
    samp: false,
    abbr: false,
    mark: false,
    hr: false,
    caption: false,
    address: false,
    focus: false,
    selection: false,
    img: false,
    iframe: false,
    output: false,
    legend: false,
    summary: false,
});

export default s;

Centralized Theme Overrides

The themes option lets you define per-theme overrides for multiple elements in one place:

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

useGlobalPreset(s, {
    themes: {
        dark: {
            body: {
                color: '#e2e8f0',
                background: '#0f172a',
            },
            heading: {
                color: '#f1f5f9',
            },
            link: {
                color: '@color.primary-300',
                hoverColor: '@color.primary-200',
            },
            hr: {
                borderColor: '@color.gray-700',
            },
        },
    },
});

export default s;

Per-Element vs. Centralized Themes

You can define theme overrides both on individual elements and in the centralized themes map. When both exist, they are merged — centralized themes take precedence:

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

useGlobalPreset(s, {
    // Per-element theme override
    body: {
        color: '@color.text',
        themes: {
            dark: {
                color: '#cccccc',
            },
        },
    },
    // Centralized theme override — takes precedence
    themes: {
        dark: {
            body: {
                color: '#e2e8f0',  // This value wins
            },
        },
    },
});

export default s;

Importing Default Values

You can import the default options for any element to reference or extend them:

import {
    defaultBodyOptions,
    defaultHeadingOptions,
    defaultHeadingSizeConfig,
    defaultLinkOptions,
    defaultCodeOptions,
    defaultPreOptions,
    defaultHrOptions,
    defaultKbdOptions,
    defaultMarkOptions,
    defaultCaptionOptions,
    defaultAbbrOptions,
    defaultAddressOptions,
    defaultDlOptions,
    defaultDtOptions,
    defaultDdOptions,
    defaultOlOptions,
    defaultUlOptions,
    defaultParagraphOptions,
    defaultSampOptions,
    defaultFocusOptions,
    defaultSelectionOptions,
} from '@styleframe/theme';

Best Practices

  • Start with defaults: Call useGlobalPreset(s) with no config to get a complete set of element styles
  • Disable rather than override: Use element: false to skip elements you don't need, instead of overriding everything to empty values
  • Prefer centralized themes: Use the themes option to define dark mode overrides in one place rather than spreading them across individual element configs
  • Reference design tokens: Use @ references (e.g., @color.primary, @spacing.lg) to keep element styles in sync with your token system
  • Use the return value: Destructure the returned variables to reference them elsewhere with ref()

FAQ

Overview

Apply consistent, theme-aware base styles to HTML elements using Styleframe's element composables for body, headings, links, lists, and more.

Abbreviation

Style abbreviation elements with configurable cursor and text decoration using the useAbbrElement composable.