Interface YarclShape

The structure every yarcl config must satisfy.

Open groups (colors, sizes, radii, variants, spacing, shadows, density, modalSizes, typography) take any keys; those keys become the valid prop values. Groups with required keys (neutrals, zIndex, motion, 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 };
    colors: Record<string, ColorToken>;
    components?: {
        Alert?: { color?: string; radius?: string; variant?: string };
        Badge?: {
            color?: string;
            radius?: string;
            size?: string;
            variant?: string;
        };
        Button?: {
            color?: string;
            radius?: string;
            size?: string;
            variant?: string;
        };
        Card?: { padding?: string; radius?: string; shadow?: string };
        Checkbox?: { color?: string; size?: string };
        Combobox?: { color?: string; radius?: string; size?: string };
        Dialog?: { radius?: string; size?: string };
        Drawer?: { size?: string };
        HoverCard?: { padding?: string; radius?: string };
        IconButton?: {
            color?: string;
            radius?: string;
            size?: string;
            variant?: string;
        };
        Inline?: { gap?: string };
        Input?: { color?: string; radius?: string; size?: string };
        Label?: { color?: string; textStyle?: string };
        Link?: { color?: string };
        Menu?: { size?: string };
        Popover?: { padding?: string; radius?: string };
        Radio?: { color?: string; size?: string };
        Select?: { color?: string; radius?: string; size?: string };
        Skeleton?: { radius?: string; size?: string };
        Spinner?: { color?: string; size?: string };
        Stack?: { gap?: string };
        Switch?: { color?: string; size?: string };
        Table?: { density?: string };
        Tabs?: { color?: string; size?: string };
        Text?: { color?: string; textStyle?: string };
        Textarea?: { color?: string; radius?: string; size?: string };
        Toast?: { color?: string };
        ToggleGroup?: {
            color?: string;
            radius?: string;
            selectedVariant?: string;
            size?: string;
            variant?: string;
        };
    };
    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;
    };
    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>;
    shadows: Record<string, string>;
    sizes: Record<string, SizeToken>;
    spacing: Record<string, string>;
    typography: {
        families: Record<string, string>;
        fontFaces?: readonly FontFaceToken[];
        headings: {
            h1: string;
            h2: string;
            h3: string;
            h4: string;
            h5: string;
            h6: string;
        };
        styles: Record<string, TextStyleToken>;
    };
    variants: Record<string, VariantToken>;
    zIndex: Record<string, number> & {
        dialog: number;
        dropdown: number;
        toast: number;
        tooltip: number;
    };
}

Index

Properties

borders colors components? defaults density focusRing modalSizes motion neutrals radii shadows sizes spacing typography variants zIndex

Properties

borders

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

Border widths. Extra keys allowed.

colors

colors: Record<string, ColorToken>

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

`Optional`components

components?: {
    Alert?: { color?: string; radius?: string; variant?: string };
    Badge?: {
        color?: string;
        radius?: string;
        size?: string;
        variant?: string;
    };
    Button?: {
        color?: string;
        radius?: string;
        size?: string;
        variant?: string;
    };
    Card?: { padding?: string; radius?: string; shadow?: string };
    Checkbox?: { color?: string; size?: string };
    Combobox?: { color?: string; radius?: string; size?: string };
    Dialog?: { radius?: string; size?: string };
    Drawer?: { size?: string };
    HoverCard?: { padding?: string; radius?: string };
    IconButton?: {
        color?: string;
        radius?: string;
        size?: string;
        variant?: string;
    };
    Inline?: { gap?: string };
    Input?: { color?: string; radius?: string; size?: string };
    Label?: { color?: string; textStyle?: string };
    Link?: { color?: string };
    Menu?: { size?: string };
    Popover?: { padding?: string; radius?: string };
    Radio?: { color?: string; size?: string };
    Select?: { color?: string; radius?: string; size?: string };
    Skeleton?: { radius?: string; size?: string };
    Spinner?: { color?: string; size?: string };
    Stack?: { gap?: string };
    Switch?: { color?: string; size?: string };
    Table?: { density?: string };
    Tabs?: { color?: string; size?: string };
    Text?: { color?: string; textStyle?: string };
    Textarea?: { color?: string; radius?: string; size?: string };
    Toast?: { color?: string };
    ToggleGroup?: {
        color?: string;
        radius?: string;
        selectedVariant?: string;
        size?: string;
        variant?: string;
    };
}

Per-component defaults, e.g. { Button: { radius: 'square' } }. Applied when a prop is omitted, before the global defaults. Each value must be a key of its group.

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'.

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.

shadows

shadows: Record<string, string>

Box shadows.

sizes

sizes: Record<string, SizeToken>

Control size scale. Keys become the valid values of the size prop.

spacing

spacing: Record<string, string>

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

typography

typography: {
    families: Record<string, string>;
    fontFaces?: readonly FontFaceToken[];
    headings: {
        h1: string;
        h2: string;
        h3: string;
        h4: string;
        h5: string;
        h6: string;
    };
    styles: Record<string, TextStyleToken>;
}

Font files, font families, 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.
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.
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.

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

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

modalSizes

motion

Type Declaration

base: string

easing: string

fast: string

neutrals

Type Declaration

bg: ColorPair

border: ColorPair

muted: ColorPair

surface: ColorPair

text: ColorPair

radii

shadows

sizes

spacing

typography

Type Declaration

families: Record<string, string>

OptionalfontFaces?: readonly FontFaceToken[]

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

styles: Record<string, TextStyleToken>

variants

zIndex

Settings

On This Page

`Optional`components

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

`Optional`fontFaces?: readonly FontFaceToken[]