Interface YarclShape

The structure every yarcl config must satisfy.

Open groups (colors, sizes, radii, variants, spacing, shadows, density, modalSizes, widths, breakpoints, typography) take any keys; those keys become the valid prop values. Groups with required keys (neutrals, zIndex, motion, timing, borders) must include the keys the library depends on, and accept any extra keys, which are emitted as CSS variables for the consumer's own styles.

interface YarclShape {
    borders: Record<string, string> & { width: string };
    breakpoints: Record<string, string>;
    colors: Record<string, ColorToken>;
    components?: {
        Accordion?: ComponentConfig<"Accordion">;
        Alert?: ComponentConfig<"Alert">;
        AppLayout?: ComponentConfig<"AppLayout">;
        Avatar?: ComponentConfig<"Avatar">;
        AvatarGroup?: ComponentConfig<"AvatarGroup">;
        Badge?: ComponentConfig<"Badge">;
        Breadcrumb?: ComponentConfig<"Breadcrumb">;
        Button?: ComponentConfig<"Button">;
        Card?: ComponentConfig<"Card">;
        Checkbox?: ComponentConfig<"Checkbox">;
        ColorPicker?: ComponentConfig<"ColorPicker">;
        Combobox?: ComponentConfig<"Combobox">;
        CommandPalette?: ComponentConfig<"CommandPalette">;
        DatePicker?: ComponentConfig<"DatePicker">;
        Dialog?: ComponentConfig<"Dialog">;
        Drawer?: ComponentConfig<"Drawer">;
        EmptyState?: ComponentConfig<"EmptyState">;
        Grid?: ComponentConfig<"Grid">;
        HoverCard?: ComponentConfig<"HoverCard">;
        IconButton?: ComponentConfig<"IconButton">;
        Inline?: ComponentConfig<"Inline">;
        Input?: ComponentConfig<"Input">;
        Label?: ComponentConfig<"Label">;
        Link?: ComponentConfig<"Link">;
        Listbox?: ComponentConfig<"Listbox">;
        Menu?: ComponentConfig<"Menu">;
        NavSection?: ComponentConfig<"NavSection">;
        NumberInput?: ComponentConfig<"NumberInput">;
        Pagination?: ComponentConfig<"Pagination">;
        Popover?: ComponentConfig<"Popover">;
        Progress?: ComponentConfig<"Progress">;
        Radio?: ComponentConfig<"Radio">;
        Select?: ComponentConfig<"Select">;
        Skeleton?: ComponentConfig<"Skeleton">;
        Slider?: ComponentConfig<"Slider">;
        Spinner?: ComponentConfig<"Spinner">;
        SplitButton?: ComponentConfig<"SplitButton">;
        SplitPane?: ComponentConfig<"SplitPane">;
        Stack?: ComponentConfig<"Stack">;
        Stepper?: ComponentConfig<"Stepper">;
        Switch?: ComponentConfig<"Switch">;
        Table?: ComponentConfig<"Table">;
        Tabs?: ComponentConfig<"Tabs">;
        Text?: ComponentConfig<"Text">;
        Textarea?: ComponentConfig<"Textarea">;
        Toast?: ComponentConfig<"Toast">;
        ToggleGroup?: ComponentConfig<"ToggleGroup">;
        Tooltip?: ComponentConfig<"Tooltip">;
        TreeView?: ComponentConfig<"TreeView">;
    };
    defaults: {
        color: string;
        density: string;
        errorColor: string;
        floatingShadow: string;
        gap: string;
        helperStyle: string;
        labelStyle: string;
        modalSize: string;
        padding: string;
        radius: string;
        size: string;
        softVariant: string;
        textStyle: string;
        variant: string;
    };
    density: Record<string, DensityToken>;
    focusRing: {
        color: string;
        offset: string;
        style?: "solid" | "dashed" | "dotted" | "double";
        width: string;
    };
    labels: ConfigLabels;
    modalSizes: Record<string, string>;
    motion: Record<string, string> & {
        base: string;
        easing: string;
        fast: string;
    };
    neutrals: Record<string, ColorPair> & {
        bg: ColorPair;
        border: ColorPair;
        muted: ColorPair;
        surface: ColorPair;
        text: ColorPair;
    };
    radii: Record<string, string>;
    recipes?: Record<string, RecipeDefinition>;
    shadows: Record<string, string>;
    sizes: Record<string, SizeToken>;
    spacing: Record<string, string>;
    timing: Record<string, number> & {
        hoverCloseDelay: number;
        hoverOpenDelay: number;
        toastDuration: number;
        tooltipDelay: number;
        typeaheadTimeout: number;
    };
    typography: {
        families: Record<string, string>;
        fontFaces?: readonly FontFaceToken[];
        fonts?: { body: string; heading: string; mono: string };
        headings: {
            h1: string;
            h2: string;
            h3: string;
            h4: string;
            h5: string;
            h6: string;
        };
        prose?: {
            blockGap?: string;
            body?: string;
            code?: string;
            headingGap?: string;
            listIndent?: string;
        };
        styles: Record<string, TextStyleToken>;
    };
    variants: Record<string, VariantToken>;
    widths: Record<string, string>;
    zIndex: Record<string, number> & {
        dialog: number;
        dropdown: number;
        toast: number;
        tooltip: number;
    };
}

Properties

borders

borders: Record<string, string> & { width: string }

Border widths. Extra keys allowed.

breakpoints

breakpoints: Record<string, string>

Named viewport thresholds in ascending declaration order. Use as @media (--yarcl-min-{key}) or @media (--yarcl-max-{key}) in plugin-processed CSS. The name base is reserved for responsive props.

colors

colors: Record<string, ColorToken>

Semantic colors. Keys become the valid values of the color prop.

`Optional`components

components?: {
    Accordion?: ComponentConfig<"Accordion">;
    Alert?: ComponentConfig<"Alert">;
    AppLayout?: ComponentConfig<"AppLayout">;
    Avatar?: ComponentConfig<"Avatar">;
    AvatarGroup?: ComponentConfig<"AvatarGroup">;
    Badge?: ComponentConfig<"Badge">;
    Breadcrumb?: ComponentConfig<"Breadcrumb">;
    Button?: ComponentConfig<"Button">;
    Card?: ComponentConfig<"Card">;
    Checkbox?: ComponentConfig<"Checkbox">;
    ColorPicker?: ComponentConfig<"ColorPicker">;
    Combobox?: ComponentConfig<"Combobox">;
    CommandPalette?: ComponentConfig<"CommandPalette">;
    DatePicker?: ComponentConfig<"DatePicker">;
    Dialog?: ComponentConfig<"Dialog">;
    Drawer?: ComponentConfig<"Drawer">;
    EmptyState?: ComponentConfig<"EmptyState">;
    Grid?: ComponentConfig<"Grid">;
    HoverCard?: ComponentConfig<"HoverCard">;
    IconButton?: ComponentConfig<"IconButton">;
    Inline?: ComponentConfig<"Inline">;
    Input?: ComponentConfig<"Input">;
    Label?: ComponentConfig<"Label">;
    Link?: ComponentConfig<"Link">;
    Listbox?: ComponentConfig<"Listbox">;
    Menu?: ComponentConfig<"Menu">;
    NavSection?: ComponentConfig<"NavSection">;
    NumberInput?: ComponentConfig<"NumberInput">;
    Pagination?: ComponentConfig<"Pagination">;
    Popover?: ComponentConfig<"Popover">;
    Progress?: ComponentConfig<"Progress">;
    Radio?: ComponentConfig<"Radio">;
    Select?: ComponentConfig<"Select">;
    Skeleton?: ComponentConfig<"Skeleton">;
    Slider?: ComponentConfig<"Slider">;
    Spinner?: ComponentConfig<"Spinner">;
    SplitButton?: ComponentConfig<"SplitButton">;
    SplitPane?: ComponentConfig<"SplitPane">;
    Stack?: ComponentConfig<"Stack">;
    Stepper?: ComponentConfig<"Stepper">;
    Switch?: ComponentConfig<"Switch">;
    Table?: ComponentConfig<"Table">;
    Tabs?: ComponentConfig<"Tabs">;
    Text?: ComponentConfig<"Text">;
    Textarea?: ComponentConfig<"Textarea">;
    Toast?: ComponentConfig<"Toast">;
    ToggleGroup?: ComponentConfig<"ToggleGroup">;
    Tooltip?: ComponentConfig<"Tooltip">;
    TreeView?: ComponentConfig<"TreeView">;
}

Per-component defaults, part styles, variants and sizing, e.g. { Button: { radius: 'square', allowedSizes: ['sm', 'md'] } }. Defaults apply when a prop is omitted, before the global defaults.

defaults

defaults: {
    color: string;
    density: string;
    errorColor: string;
    floatingShadow: string;
    gap: string;
    helperStyle: string;
    labelStyle: string;
    modalSize: string;
    padding: string;
    radius: string;
    size: string;
    softVariant: string;
    textStyle: string;
    variant: string;
}

Values used when a component prop is omitted. Each must be a key of its group.

Type Declaration

color: string
density: string

Density for Table. A key of density.
errorColor: string

Color used for invalid fields. A key of colors.
floatingShadow: string

Elevation of popovers, menus and listboxes. A key of shadows.
gap: string

Gap for Stack and Inline. A key of spacing.
helperStyle: string

Text style for helper and error text below form controls. A key of typography.styles.
labelStyle: string

Text style for form labels and legends. A key of typography.styles.
modalSize: string

Width of Dialog and Drawer. A key of modalSizes.
padding: string

Padding for Card. A key of spacing.
radius: string

A key of radii, or 'size' to use the radius named like the control's size (a lg button gets radii.lg). Components without a size use defaults.size.
size: string
softVariant: string

Variant for low-emphasis components such as Badge and Alert. A key of variants.
textStyle: string

Text style for Text. A key of typography.styles.
variant: string

density

density: Record<string, DensityToken>

Table densities. Keys become the valid values of the density prop.

focusRing

focusRing: {
    color: string;
    offset: string;
    style?: "solid" | "dashed" | "dotted" | "double";
    width: string;
}

Keyboard focus indicator, shared by every focusable component.

Type Declaration

color: string

A key of colors.
offset: string

Gap between the element and the outline, e.g. '2px'. Negative values draw it inside.
Optionalstyle?: "solid" | "dashed" | "dotted" | "double"

Outline style.
Default
```
'solid'
```
width: string

Outline width, e.g. '2px'.

labels

labels: ConfigLabels

Built-in text and message formatters. Spread the default catalog when translating selected entries.

modalSizes

modalSizes: Record<string, string>

Widths of Dialog and Drawer, e.g. { sm: '24rem', md: '32rem', full: '100vw' }. Keys become the valid values of their size prop. Separate from sizes, which sets control heights.

motion

motion: Record<string, string> & { base: string; easing: string; fast: string }

Transition timing. Extra keys allowed.

Type Declaration

base: string

Standard transitions, e.g. opening a popover.
easing: string

Easing function.
fast: string

Short transitions, e.g. hover.

neutrals

neutrals: Record<string, ColorPair> & {
    bg: ColorPair;
    border: ColorPair;
    muted: ColorPair;
    surface: ColorPair;
    text: ColorPair;
}

Neutral colors for backgrounds, text and borders. Extra keys allowed.

Type Declaration

bg: ColorPair

Page background.
border: ColorPair

Default border.
muted: ColorPair

Secondary text and placeholders.
surface: ColorPair

Background of controls and raised surfaces.
text: ColorPair

Default text.

radii

radii: Record<string, string>

Border radii. Keys become the valid values of the radius prop. Name them after your sizes (sm, md, lg …) so controls can match their size, plus exceptions such as square and rounded. size is reserved.

`Optional`recipes

recipes?: Record<string, RecipeDefinition>

Consumer component recipes, generated alongside the built-in component modifiers.

shadows

shadows: Record<string, string>

Box shadows.

sizes

sizes: Record<string, SizeToken>

Base control size scale. Keys become valid size values unless a component restricts them.

spacing

spacing: Record<string, string>

Spacing scale, e.g. for gap and padding.

timing

timing: Record<string, number> & {
    hoverCloseDelay: number;
    hoverOpenDelay: number;
    toastDuration: number;
    tooltipDelay: number;
    typeaheadTimeout: number;
}

Interaction timing in milliseconds, read by components at render time. Extra keys allowed.

Type Declaration

hoverCloseDelay: number

Delay before a HoverCard closes after the pointer leaves.
hoverOpenDelay: number

Delay before a HoverCard opens on hover.
toastDuration: number

How long a toast stays before it dismisses itself. 0 keeps toasts until dismissed.
tooltipDelay: number

Delay before a Tooltip opens on hover.
typeaheadTimeout: number

Maximum pause between characters in TreeView type-ahead.

typography

typography: {
    families: Record<string, string>;
    fontFaces?: readonly FontFaceToken[];
    fonts?: { body: string; heading: string; mono: string };
    headings: {
        h1: string;
        h2: string;
        h3: string;
        h4: string;
        h5: string;
        h6: string;
    };
    prose?: {
        blockGap?: string;
        body?: string;
        code?: string;
        headingGap?: string;
        listIndent?: string;
    };
    styles: Record<string, TextStyleToken>;
}

Font files, font families, stable font roles, named text styles and heading levels.

Type Declaration

families: Record<string, string>

Font stacks, e.g. { sans: 'Inter, system-ui, sans-serif' }.
OptionalfontFaces?: readonly FontFaceToken[]

Font files to load. Reference their family names in families.
Optionalfonts?: { body: string; heading: string; mono: string }

Stable application font roles. Each value must be a key of families. Omit to use available family keys.
headings: { h1: string; h2: string; h3: string; h4: string; h5: string; h6: string }

Text style for each heading level, used by Heading. Each must be a key of styles.
Optionalprose?: {
    blockGap?: string;
    body?: string;
    code?: string;
    headingGap?: string;
    listIndent?: string;
}

Styles and spacing for unclassed HTML inside .yarcl-prose.
- OptionalblockGap?: string
  
  Spacing key between blocks. Defaults to defaults.gap.
- Optionalbody?: string
  
  Text style for body content. Defaults to defaults.textStyle.
- Optionalcode?: string
  
  Text style for code. Defaults to code when present, otherwise the body style.
- OptionalheadingGap?: string
  
  Spacing key before headings. Defaults to defaults.padding.
- OptionallistIndent?: string
  
  Spacing key for list indentation. Defaults to defaults.padding.
styles: Record<string, TextStyleToken>

Named text styles. Keys become the valid text style names.

variants

variants: Record<string, VariantToken>

Style recipes. Keys become the valid values of the variant prop.

widths

widths: Record<string, string>

Page and container widths, emitted as --yarcl-width-{key}.

zIndex

zIndex: Record<string, number> & {
    dialog: number;
    dropdown: number;
    toast: number;
    tooltip: number;
}

Stacking order of floating layers. Extra keys allowed.

Interface YarclShape

Index

Properties

Properties

borders

breakpoints

colors

Optionalcomponents

defaults

Type Declaration

color: string

density: string

errorColor: string

floatingShadow: string

gap: string

helperStyle: string

labelStyle: string

modalSize: string

padding: string

radius: string

size: string

softVariant: string

textStyle: string

variant: string

density

focusRing

Type Declaration

color: string

offset: string

Optionalstyle?: "solid" | "dashed" | "dotted" | "double"

Default

width: string

labels

modalSizes

motion

Type Declaration

base: string

easing: string

fast: string

neutrals

Type Declaration

bg: ColorPair

border: ColorPair

muted: ColorPair

surface: ColorPair

text: ColorPair

radii

Optionalrecipes

shadows

sizes

spacing

timing

Type Declaration

hoverCloseDelay: number

hoverOpenDelay: number

toastDuration: number

tooltipDelay: number

typeaheadTimeout: number

typography

Type Declaration

families: Record<string, string>

OptionalfontFaces?: readonly FontFaceToken[]

Optionalfonts?: { body: string; heading: string; mono: string }

headings: { h1: string; h2: string; h3: string; h4: string; h5: string; h6: string }

Optionalprose?: { blockGap?: string; body?: string; code?: string; headingGap?: string; listIndent?: string;}

OptionalblockGap?: string

Optionalbody?: string

Optionalcode?: string

OptionalheadingGap?: string

OptionallistIndent?: string

styles: Record<string, TextStyleToken>

variants

widths

zIndex

Settings

On This Page

`Optional`components

`Optional`style?: "solid" | "dashed" | "dotted" | "double"

`Optional`recipes

`Optional`fontFaces?: readonly FontFaceToken[]

`Optional`fonts?: { body: string; heading: string; mono: string }

`Optional`prose?: {
blockGap?: string;
body?: string;
code?: string;
headingGap?: string;
listIndent?: string;
}

`Optional`blockGap?: string

`Optional`body?: string

`Optional`code?: string

`Optional`headingGap?: string

`Optional`listIndent?: string