Skip to content
Transtyle v0.1.0-alpha.5

    Markdown llms.txt GitHub
    ok: build 10:17 UTC31 pages main · 7ed21c5
    Menu / Slot matrix

    Alpha — breaking changes ship without a deprecation cycle. What is built vs. planned

    Slot matrix

    Authoring a slot changes the targets that read it, and only those. This page answers “if I author elevation.3.surface, which libraries change?” for every slot of the catalog: one row per slot, one column per target.

    It is compiled, not written. Acme is built with each of the 11 exporters while the compiler records every slot each exporter reads, and each cell is classed from that exporter’s coverage report. The rows are the 262 catalog slots all 4 examples share. npm run gen:matrix regenerates the page and npm run check:matrix fails when it no longer matches the exporters.

    For your own design system and targets, run transtyle check --matrix (add --json for a matrix key in the report, see the CLI reference).

    Reading a cell#

    Cell Meaning
    native A target variable maps to this slot one to one.
    derived A target variable is computed from this slot (a mix, a ramp step, a unit conversion).
    approx. A target variable is the closest fit to this slot, with a loss the coverage report spells out.
    input The exporter reads the slot, but no coverage row names it: it feeds a value described under another slot or a pattern (a Radix ramp, a PrimeNG surface, a Bootstrap chained variable).
    (empty) The target never reads the slot. Authoring it changes nothing there.

    A read is counted whether or not the value ends up in the output, so the matrix errs on the safe side: an empty cell is a guarantee, a filled one is a dependency.

    1 slot is read by all 11 targets (semantic.color.elevation.0.surface), 7 slots only by CSS variables (the reference dump, which emits every semantic slot), and every slot is read by at least one target.

    Color: primary#

    Each slot below is semantic.color.primary.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 9/11 derived derived derived native native native native native native
    on-tint 5/11 derived input approx. input native
    outline 7/11 derived native native input native native native
    outline-hover 5/11 native input input native native
    solid 10/11 native native native native native native native native native native
    solid-active 5/11 derived native input input native
    solid-hover 7/11 derived approx. approx. native native approx. native
    solid-selected 2/11 input native
    text 6/11 native native native native native native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 5/11 native input input input native
    tint 7/11 derived native native native native approx. native
    tint-active 6/11 native native input native input native
    tint-hover 6/11 native input native native input native
    tint-selected 2/11 input native

    Color: secondary#

    Each slot below is semantic.color.secondary.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 8/11 derived derived native native native native native native
    on-tint 4/11 derived approx. input native
    outline 7/11 derived native native input native native native
    outline-hover 4/11 native input native native
    solid 8/11 derived derived native native native native native native
    solid-active 5/11 derived native input input native
    solid-hover 6/11 derived native native native native native
    solid-selected 2/11 input native
    text 6/11 native native native native native native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 4/11 native input input native
    tint 7/11 derived native native native native approx. native
    tint-active 6/11 native native input native input native
    tint-hover 5/11 native native native input native
    tint-selected 2/11 input native

    Color: accent#

    Each slot below is semantic.color.accent.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 6/11 derived native native native native native
    on-tint 4/11 derived approx. input native
    outline 5/11 native input native native native
    outline-hover 4/11 native input native native
    solid 7/11 derived derived native native native native native
    solid-active 3/11 input input native
    solid-hover 4/11 approx. native approx. native
    solid-selected 2/11 input native
    text 5/11 native native native native native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 4/11 native input input native
    tint 6/11 derived native native native approx. native
    tint-active 5/11 native input native input native
    tint-hover 5/11 native native native input native
    tint-selected 2/11 input native

    Color: success#

    Each slot below is semantic.color.success.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 8/11 derived derived native native native native native native
    on-tint 4/11 derived approx. native native
    outline 7/11 derived native native input native native native
    outline-hover 4/11 native input native native
    solid 8/11 derived derived native native native native native native
    solid-active 5/11 derived native input input native
    solid-hover 6/11 derived native native native native native
    solid-selected 2/11 input native
    text 6/11 native native native native native native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 4/11 native input input native
    tint 7/11 derived native native native native native native
    tint-active 6/11 native native input native input native
    tint-hover 5/11 native native native input native
    tint-selected 2/11 input native

    Color: warning#

    Each slot below is semantic.color.warning.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 8/11 derived derived native native native native native native
    on-tint 4/11 approx. approx. approx. native
    outline 7/11 derived native native input native native native
    outline-hover 4/11 native input native native
    solid 8/11 derived derived native native native native native native
    solid-active 5/11 derived native input input native
    solid-hover 6/11 derived native native native native native
    solid-selected 2/11 input native
    text 6/11 approx. native native native approx. native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 4/11 native input input native
    tint 7/11 derived native native native native native native
    tint-active 6/11 native native input native input native
    tint-hover 5/11 native native native input native
    tint-selected 2/11 input native

    Color: danger#

    Each slot below is semantic.color.danger.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 9/11 derived derived derived native native native native native native
    on-tint 4/11 derived approx. native native
    outline 7/11 derived native native input native native native
    outline-hover 4/11 native input native native
    solid 9/11 derived derived derived native native native native native native
    solid-active 5/11 derived native input input native
    solid-hover 6/11 derived native native native native native
    solid-selected 2/11 input native
    text 6/11 native native native native native native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 4/11 native input input native
    tint 7/11 derived native native native native native native
    tint-active 6/11 native native input native input native
    tint-hover 5/11 native native native input native
    tint-selected 2/11 input native

    Color: info#

    Each slot below is semantic.color.info.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 8/11 derived derived native native native native native native
    on-tint 4/11 approx. approx. approx. native
    outline 7/11 derived native native input native native native
    outline-hover 4/11 native input native native
    solid 8/11 derived derived approx. native native native approx. native
    solid-active 5/11 derived native input input native
    solid-hover 6/11 derived approx. native native approx. native
    solid-selected 2/11 input native
    text 6/11 approx. native native native approx. native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 4/11 native input input native
    tint 7/11 derived native native native native native native
    tint-active 6/11 native native input native input native
    tint-hover 5/11 native native native input native
    tint-selected 2/11 input native

    Color: neutral#

    Each slot below is semantic.color.neutral.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    on-solid 6/11 derived native native native native native
    on-tint 5/11 derived input approx. input native
    outline 7/11 input native input input native native native
    outline-hover 5/11 native input input native native
    solid 7/11 derived native input native native native native
    solid-active 4/11 input input input native
    solid-hover 5/11 native input native native native
    solid-selected 2/11 input native
    text 5/11 native native native native native
    text-active 2/11 input native
    text-hover 2/11 input native
    text-strong 6/11 derived native input input input native
    tint 9/11 derived derived derived native input native native approx. native
    tint-active 6/11 native input approx. native input native
    tint-hover 6/11 native input native native approx. native
    tint-selected 2/11 approx. native

    Color: ring, scrim#

    Each slot below is semantic.color.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    ring 6/11 derived derived derived approx. native native
    scrim 5/11 derived native native native native

    Color: border#

    Each slot below is semantic.color.border.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    base 10/11 native approx. native native native native native native native native
    field 4/11 derived derived input native
    strong 1/11 native
    subtle 2/11 native native

    Color: elevation#

    Each slot below is semantic.color.elevation.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    0.surface 11/11 native native native native native native native native native native native
    1.shadow 4/11 native approx. approx. native
    1.surface 10/11 native native native native native native native native native native
    2.shadow 5/11 input native approx. approx. native
    2.surface 4/11 derived input approx. native
    3.shadow 5/11 input native approx. approx. native
    3.surface 5/11 derived derived input approx. native
    4.shadow 4/11 native approx. approx. native
    4.surface 1/11 native
    5.surface 1/11 native

    Color: inverse#

    Each slot below is semantic.color.inverse.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    surface 4/11 derived native native native
    text 4/11 derived native native native

    Each slot below is semantic.color.link.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    base 2/11 native native
    hover 1/11 native
    visited 1/11 native

    Color: text#

    Each slot below is semantic.color.text.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    base 10/11 native native native native native native native native native native
    disabled 4/11 input native native native
    muted 9/11 native native native native native native native native native
    strong 3/11 native approx. native
    subtle 3/11 native native native

    Border-width#

    Each slot below is semantic.border-width.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    medium 5/11 approx. input input input native
    thick 1/11 native
    thin 1/11 native

    Breakpoint#

    Each slot below is semantic.breakpoint.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    2xl 4/11 input native input native
    lg 4/11 native native input native
    md 4/11 native native input native
    sm 4/11 native native input native
    xl 4/11 native native input native
    xs 4/11 native input input native

    Duration#

    Each slot below is semantic.duration.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    fast 5/11 approx. input native approx. native
    instant 3/11 input approx. native
    normal 5/11 approx. approx. native approx. native
    slow 4/11 input native approx. native
    slower 3/11 derived native native

    Easing#

    Each slot below is semantic.easing.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    emphasized 3/11 native approx. native
    enter 4/11 approx. native native native
    exit 3/11 native native native
    spring 2/11 native native
    standard 4/11 approx. native native native

    Font#

    Each slot below is semantic.font.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    sans 9/11 native native native native native native native native native

    Opacity#

    Each slot below is semantic.opacity.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    disabled 5/11 approx. native native native native

    Palette#

    Each slot below is semantic.palette.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    categorical.1 3/11 derived derived native
    categorical.2 3/11 derived derived native
    categorical.3 3/11 derived derived native
    categorical.4 3/11 derived derived native
    categorical.5 3/11 derived derived native
    categorical.6 2/11 approx. native
    categorical.7 2/11 derived native
    categorical.8 2/11 derived native

    Radius#

    Each slot below is semantic.radius.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    container 5/11 input native native native native
    control 5/11 input native approx. native native
    field 2/11 input native
    full 3/11 approx. native native
    lg 4/11 derived native native native
    md 8/11 native approx. approx. native approx. native native native
    none 2/11 native native
    sm 5/11 derived approx. native native native
    xl 4/11 derived native native native

    Ring#

    Each slot below is semantic.ring.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    offset 4/11 input input input native
    width 5/11 input input input input native

    Size#

    Each slot below is semantic.size.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    control.lg 3/11 input input native
    control.md 3/11 input input native
    control.sm 4/11 input input input native

    Space#

    Each slot below is semantic.space.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    0 4/11 native input native native
    1 5/11 native input native input native
    10 2/11 native native
    12 3/11 native native native
    16 2/11 native native
    2 6/11 native input approx. native native native
    20 2/11 native native
    24 2/11 native native
    3 6/11 native input native native input native
    4 5/11 native native native input native
    5 5/11 native input native native native
    6 4/11 native input native native
    8 4/11 native native input native

    Type#

    Each slot below is semantic.type.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    leading.loose 3/11 native approx. native
    leading.normal 5/11 derived native native approx. native
    leading.tight 4/11 derived native approx. native
    role.body.lg 2/11 input native
    role.body.md 3/11 input native native
    role.body.sm 3/11 input approx. native
    role.code.lg 2/11 input native
    role.code.md 2/11 input native
    role.code.sm 2/11 input native
    role.display.lg 4/11 input input approx. native
    role.display.md 3/11 input approx. native
    role.display.sm 3/11 input approx. native
    role.heading.lg 4/11 native input approx. native
    role.heading.md 4/11 native input approx. native
    role.heading.sm 4/11 native input approx. native
    role.label.lg 3/11 input approx. native
    role.label.md 4/11 derived input approx. native
    role.label.sm 3/11 input approx. native
    role.title.lg 3/11 native input native
    role.title.md 4/11 derived native input native
    role.title.sm 4/11 native input approx. native
    size.2xl 3/11 derived native native
    size.3xl 3/11 derived native native
    size.4xl 3/11 derived native native
    size.lg 4/11 derived native native native
    size.md 5/11 derived native native native native
    size.sm 4/11 approx. native native native
    size.xl 4/11 derived native native native
    size.xs 4/11 approx. native native native
    tracking.normal 2/11 native native
    tracking.tight 2/11 native native
    tracking.wide 2/11 native native
    weight.bold 4/11 native native native native
    weight.medium 4/11 native native native native
    weight.regular 5/11 native native native native native
    weight.semibold 3/11 input native native

    Z#

    Each slot below is semantic.z.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    banner 2/11 native native
    base 2/11 native native
    dropdown 2/11 native native
    hide 2/11 native native
    modal 3/11 native native native
    overlay 3/11 native native native
    popover 2/11 native native
    sticky 3/11 native native native
    toast 3/11 native native native
    tooltip 3/11 native native native

    Component: button#

    Each slot below is component.button.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    padding-x 5/11 native native native approx. input
    padding-y 3/11 native native input
    radius 5/11 native native native native native

    Component: control#

    Each slot below is component.control.<slot>.

    Slot Read by shadcn daisyUI ECharts Bootstrap Storybook Radix PrimeNG Mantine Chakra UI Material UI CSS vars
    padding-x 5/11 derived native input input input
    padding-y 4/11 derived native input input
    radius 5/11 derived native native input input