Skip to content

Search the guides, deployment pages, and API reference.

View as Markdown

@pitlane/theme

Type-safe styling with design tokens for Remix 3.

createTheme takes a schema tree and the token tree it describes, and returns a typed token accessor plus a <Theme /> component that installs the tokens as CSS custom properties. Token values are the CSS they become; the schema, built from @pitlane/theme/schema, names each token's type. The css, tva, combine, and cx helpers enforce the token palette at the type level on top of remix/component's css() mixin.

See

Theme guide

Classes

Interfaces

  • CombinedTVAFn. A component built by combine. Accepts the union of the input components' props and honors each input's own defaults.
  • ScaleFn. The accessor leaf for a token declared with s.scale(): callable for steps, with the base itself as .token.
  • ThemeComponent. The <Theme /> component createTheme returns. Render it once near the document root to install the custom properties.
  • ThemedCSSProps. The style-object type accepted by css and every tva slot.
  • ThemeInit. The argument createTheme accepts: a schema tree, the token tree it describes, and any modes.
  • ThemeMode. A theme's mode: a condition plus the values it overrides.
  • ThemePatch. The argument extend accepts. schema is optional, because a patch that only adds tokens to an existing namespace needs no new entry.
  • ThemeResult. The object createTheme returns: the typed token accessor, the raw resolver, the <Theme /> component, and the two derivation methods.
  • Tokens. The token tree createTheme accepts: nested records whose leaves are TokenValues. No reserved keys, so it is plain JSON and a designer can diff it.
  • TVAConfig. Configuration for tva. Every style slot is ThemedCSSProps, carrying the same brand enforcement as css.
  • TVAFn. A variant component built by tva. Call it with a variant selection to get a mix-ready descriptor; call resolve for the merged ThemedCSSProps without building a descriptor.

Type Aliases

  • AnyToken. The union of all twelve token brands. Brands are compile-time tags naming each token's type; they let css reject a dimension where a color belongs. They exist only in the type system — every ref is a plain string at runtime, so brands cost nothing — and they are theme-independent, so tokens minted by two different createTheme calls mix freely in one css call.
  • BorderToken. Compile-time brand for a border token.
  • ClassValue. A value cx accepts: a string, a number, a nested array of the same, or a record whose truthy keys are emitted. null, undefined, and false are dropped. Compatible with clsx.
  • ColorToken. Compile-time brand for a color token.
  • CubicBezierToken. Compile-time brand for a cubicBezier token.
  • DeepPartialTokens. The mode-override shape for a token tree: every group optional, every leaf a value. A mode overrides values, never structure or types.
  • DimensionToken. Compile-time brand for a dimension token.
  • DurationToken. Compile-time brand for a duration token.
  • FontFamilyToken. Compile-time brand for a fontFamily token.
  • FontWeightToken. Compile-time brand for a fontWeight token.
  • GradientToken. Compile-time brand for a gradient token.
  • NumberToken. Compile-time brand for a number token.
  • ShadowToken. Compile-time brand for a shadow token.
  • StrokeStyleToken. Compile-time brand for a strokeStyle token.
  • ThemedCSSMixin. The descriptor css produces. MixinDescriptor is invariant in its node type, so — exactly like remix/component's own css factory — the node binds per callsite through the generic parameter.
  • ThemeProps. Props for the ThemeComponent. nonce sets the nonce attribute on the emitted <style> element for Content Security Policy setups.
  • TokenTree. The accessor shape for an init T: the same nesting as its token tree, with every leaf replaced by the branded var(--…) reference its schema declares. Numeric keys index with brackets (t.color.gray[900]).
  • TokenType. The twelve DTCG token $type values.
  • TokenValue. A token value: the CSS it becomes. A string, a number, or an array of either. Anything else is a group.
  • TransitionToken. Compile-time brand for a transition token.
  • TVAProps. Extracts a tva component's variant props, like cva's VariantProps. All props are optional; wrap the component to require one.
  • UntypedToken. Compile-time brand for a token declared with s.any(). It carries no CSS type, so the open-grammar properties (animation, aspectRatio, background) accept it and the token-mapped longhands reject it.

Functions

  • combine. Composes tva components, like cva's compose. Each input resolves independently against the shared props, the results deep-merge in argument order, and one css call produces the descriptor. The result accepts the union of the inputs' props and honors each input's own defaults.
  • createTheme. Compiles a theme from a schema tree and the token tree it describes.
  • css. Brand-enforced wrapper over remix/component's css() mixin. Token-mapped longhands accept the matching token brand, CSS-wide keywords, property keywords, and 0; anything else — including a raw color: "#ff0000" — is a type error. Every other CSS property carries csstype's value union, so display, position, resize, and the rest of the closed-grammar properties accept only their real keywords. Nested selectors, at-rules, and custom properties recurse.
  • cx. clsx-compatible className joiner for interop with plain stylesheets, since mix and className compose on the same element. Strings and numbers join with spaces, falsy values drop, arrays flatten, and truthy object keys join.
  • lightDark. A light-dark() color, resolved by the browser against the color-scheme property. A subtree that sets color-scheme flips whatever the media query says, which is what a theme toggle needs.
  • scale. Turns one token into a multiplier, so a scale does not have to name every step. The returned function produces calc(<base> * <steps>), keeping whichever brand the base carried.
  • tva. Builds a variant resolver modeled on cva. Where cva composes class strings, tva composes brand-enforced style objects into a mix-ready descriptor.