---
title: "@pitlane/theme"
description: "Type-safe styling with design tokens for Remix 3."
url: "https://pitlane.tools/package/theme/"
---

# @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](https://pitlane.tools/guides/theme.md)

## Classes

- [ThemeError](https://pitlane.tools/package/theme/class/ThemeError.md). The error [createTheme](https://pitlane.tools/package/theme/function/createTheme.md) throws for every structural failure: one problem, one sentence.

## Interfaces

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

## Type Aliases

- [AnyToken](https://pitlane.tools/package/theme/type/AnyToken.md). The union of all twelve token brands. Brands are compile-time tags naming each token's type; they let [css](https://pitlane.tools/package/theme/function/css.md) 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](https://pitlane.tools/package/theme/function/createTheme.md) calls mix freely in one [css](https://pitlane.tools/package/theme/function/css.md) call.
- [BorderToken](https://pitlane.tools/package/theme/type/BorderToken.md). Compile-time brand for a `border` token.
- [ClassValue](https://pitlane.tools/package/theme/type/ClassValue.md). A value [cx](https://pitlane.tools/package/theme/function/cx.md) 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](https://pitlane.tools/package/theme/type/ColorToken.md). Compile-time brand for a `color` token.
- [CubicBezierToken](https://pitlane.tools/package/theme/type/CubicBezierToken.md). Compile-time brand for a `cubicBezier` token.
- [DeepPartialTokens](https://pitlane.tools/package/theme/type/DeepPartialTokens.md). The mode-override shape for a token tree: every group optional, every leaf a value. A mode overrides values, never structure or types.
- [DimensionToken](https://pitlane.tools/package/theme/type/DimensionToken.md). Compile-time brand for a `dimension` token.
- [DurationToken](https://pitlane.tools/package/theme/type/DurationToken.md). Compile-time brand for a `duration` token.
- [FontFamilyToken](https://pitlane.tools/package/theme/type/FontFamilyToken.md). Compile-time brand for a `fontFamily` token.
- [FontWeightToken](https://pitlane.tools/package/theme/type/FontWeightToken.md). Compile-time brand for a `fontWeight` token.
- [GradientToken](https://pitlane.tools/package/theme/type/GradientToken.md). Compile-time brand for a `gradient` token.
- [NumberToken](https://pitlane.tools/package/theme/type/NumberToken.md). Compile-time brand for a `number` token.
- [ShadowToken](https://pitlane.tools/package/theme/type/ShadowToken.md). Compile-time brand for a `shadow` token.
- [StrokeStyleToken](https://pitlane.tools/package/theme/type/StrokeStyleToken.md). Compile-time brand for a `strokeStyle` token.
- [ThemedCSSMixin](https://pitlane.tools/package/theme/type/ThemedCSSMixin.md). The descriptor [css](https://pitlane.tools/package/theme/function/css.md) 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](https://pitlane.tools/package/theme/type/ThemeProps.md). Props for the [ThemeComponent](https://pitlane.tools/package/theme/interface/ThemeComponent.md). `nonce` sets the `nonce` attribute on the emitted `<style>` element for Content Security Policy setups.
- [TokenTree](https://pitlane.tools/package/theme/type/TokenTree.md). 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](https://pitlane.tools/package/theme/type/TokenType.md). The twelve DTCG token `$type` values.
- [TokenValue](https://pitlane.tools/package/theme/type/TokenValue.md). A token value: the CSS it becomes. A string, a number, or an array of either. Anything else is a group.
- [TransitionToken](https://pitlane.tools/package/theme/type/TransitionToken.md). Compile-time brand for a `transition` token.
- [TVAProps](https://pitlane.tools/package/theme/type/TVAProps.md). Extracts a [tva](https://pitlane.tools/package/theme/function/tva.md) component's variant props, like cva's `VariantProps`. All props are optional; wrap the component to require one.
- [UntypedToken](https://pitlane.tools/package/theme/type/UntypedToken.md). 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](https://pitlane.tools/package/theme/function/combine.md). Composes [tva](https://pitlane.tools/package/theme/function/tva.md) components, like cva's `compose`. Each input resolves independently against the shared props, the results deep-merge in argument order, and one [css](https://pitlane.tools/package/theme/function/css.md) call produces the descriptor. The result accepts the union of the inputs' props and honors each input's own defaults.
- [createTheme](https://pitlane.tools/package/theme/function/createTheme.md). Compiles a theme from a schema tree and the token tree it describes.
- [css](https://pitlane.tools/package/theme/function/css.md). 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](https://pitlane.tools/package/theme/function/cx.md). 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](https://pitlane.tools/package/theme/function/lightDark.md). 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](https://pitlane.tools/package/theme/function/scale.md). 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](https://pitlane.tools/package/theme/function/tva.md). Builds a variant resolver modeled on [cva](https://cva.style). Where cva composes class strings, `tva` composes brand-enforced style objects into a `mix`-ready descriptor.