Skip to content
MLformby eshkra

Tokens and host styling

Every color, size, radius, shadow, and timing in the built-in UI is a CSS custom property named --mlf-*. Themes and recipes set them; you can override any of them.

Override tokens

Section titled “Override tokens”
mountForm(container, {
  schema,
  transport,
  designSystem: {
    theme: "eshkra",
    overrides: {
      tokens: { "--mlf-radius-md": "6px" },
      components: {
        submit: { tokens: { "--mlf-submit-radius": "999px" } },
        report: { tokens: { "--mlf-report-border": "1px solid var(--mlf-color-border-strong)" } },
      },
    },
  },
});
  • Global tokens (overrides.tokens) are the shared palette and scale: colors, radii, spacing, shadows, fonts, and motion. Prefer them for brand color and spacing.
  • Component tokens (overrides.components.<key>.tokens) style one family of controls and usually default to a global token. The keys are shell, hero, field, report, input, submit, error, toggle, status, and chart.

Resolution order, last wins: built-in defaults, the theme’s shared tokens, the theme’s scheme tokens (light or dark), the recipe’s tokens and component tokens, and finally overrides. A theme without dark tokens uses its light tokens in dark mode and reports theme-fallback as the mode source.

Style from host CSS

Section titled “Style from host CSS”

When your application already owns its tokens, point MLForm’s tokens at them in CSS:

#forecast-form mlf-form {
  --mlf-color-accent: var(--brand-action);
  --mlf-color-text: var(--app-text);
}

For forms embedded in an existing dashboard, mode: "inherit" follows the host’s light or dark scheme (Modes), and the minimal recipe avoids duplicating card chrome.

Without the kit

Section titled “Without the kit”

mlform/design works on any element, for example a host rendered with createFormView or createPrimitiveAdapter:

import { attachDesignSystem, resolveDesignSystem, writeDesignSystemTokenDeclarations } from "mlform/design";


// Live: watches the system scheme and updates the element.
const design = attachDesignSystem(host, { config: { theme: "eshkra", mode: "auto" } });
design.update({ mode: "dark" });
design.disconnect(); // when the host goes away


// One-off: resolve once and write the declarations yourself.
const resolved = resolveDesignSystem({ theme: "eshkra", recipe: "minimal" });
writeDesignSystemTokenDeclarations(host.style, resolved);

Prefer writeDesignSystemTokenDeclarations when you have an element. createDesignSystemStylesheet(resolved, selector) produces CSS text for a stylesheet; use it only with trusted configuration.

attachDesignSystem and mountForm copy the registry they receive when they attach. Registering a theme in the original registry later does not affect mounted forms; register before mounting, or register on attached.registry and refresh with update({}).

Token reference

Section titled “Token reference”

These are the defaults, read from the library. Themes and recipes replace many of them.

Global tokens
TokenDefault
--mlf-font-family-body"Aptos", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif
--mlf-font-family-heading"Aptos Display", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif
--mlf-font-family-uiui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
--mlf-font-family-monoui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace
--mlf-font-size-xs0.72rem
--mlf-font-size-sm0.84rem
--mlf-font-size-md1rem
--mlf-font-size-lg1.125rem
--mlf-font-size-xl1.55rem
--mlf-font-size-2xl2.15rem
--mlf-line-height-tight1.12
--mlf-line-height-normal1.5
--mlf-space-10.25rem
--mlf-space-20.5rem
--mlf-space-30.75rem
--mlf-space-41rem
--mlf-space-51.25rem
--mlf-space-61.5rem
--mlf-space-72rem
--mlf-space-83rem
--mlf-radius-sm6px
--mlf-radius-md8px
--mlf-radius-lg10px
--mlf-radius-xl14px
--mlf-radius-pill999px
--mlf-border-width1px
--mlf-ring-width4px
--mlf-shadow-sm0 1px 2px rgba(23, 35, 48, 0.04)
--mlf-shadow-md0 8px 24px rgba(23, 35, 48, 0.06)
--mlf-shadow-lg0 18px 40px rgba(23, 35, 48, 0.09)
--mlf-motion-fast140ms ease
--mlf-motion-base180ms ease
--mlf-motion-slow260ms ease
--mlf-transition-duration200ms
--mlf-transition-easingease-in-out
--mlf-layout-gap1rem
--mlf-section-gap1rem
--mlf-pane-gap1rem
--mlf-shell-gap1.2rem
--mlf-control-height3rem
--mlf-control-padding-inline0.92rem
--mlf-control-padding-block0.78rem
--mlf-pane-min-width20rem
--mlf-color-bg#f4f6f8
--mlf-color-surface#ffffff
--mlf-color-surface-muted#f0f3f6
--mlf-color-surface-elevated#ffffff
--mlf-color-text#172330
--mlf-color-text-muted#526170
--mlf-color-text-inverse#ffffff
--mlf-color-border#d9e1e7
--mlf-color-border-strong#b9c5cf
--mlf-color-accent#2456c7
--mlf-color-accent-hover#1b46a8
--mlf-color-accent-softrgba(36, 86, 199, 0.09)
--mlf-color-success#16704f
--mlf-color-warning#9a640e
--mlf-color-danger#b93636
--mlf-color-danger-softrgba(185, 54, 54, 0.08)
--mlf-color-focus-ringrgba(36, 86, 199, 0.18)
--mlf-color-overlayrgba(255, 255, 255, 0.88)
--mlf-color-hover-surface#e8edf2
--mlf-color-chart-trackrgba(23, 35, 48, 0.11)

mlfTokenKeys lists every key, and defineGlobalTokens and defineComponentTokens type-check token maps when you write custom themes and recipes.

MLForm is part of eshkra, open-source tools for models people can use.GitHubnpmMIT license