Foundations

Tokens

Roles, scoped colours, and component measurements

import { role, type, motion, shadow, appearance } from "@nyte-ai/ui/styles/vars.stylex";
import { button, radius } from "@nyte-ai/ui/styles/schema.stylex";
import { surfaceTheme, intent } from "@nyte-ai/ui/surface-theme";

Use colour roles inside scopes, component handles for controls, and radius names for rounded containers. Ramps, theme mappings, and size values are private.

Usage

import { create, props } from "@stylexjs/stylex";
import { role, type } from "@nyte-ai/ui/styles/vars.stylex";
import { radius } from "@nyte-ai/ui/styles/schema.stylex";
import { intent } from "@nyte-ai/ui/surface-theme";

const styles = create({
  status: {
    color: role.contentSecondary,
    backgroundColor: role.bgInteractiveSecondaryTranslucent,
    borderRadius: radius.control,
    fontSize: type.fontBase,
  },
});

export function Status() {
  return <span {...props(intent.success, styles.status)}>Saved</span>;
}

The default scope is neutral gray. surfaceTheme.gray applies tinted roles over gray, and surfaceTheme.custom takes its hue from --nyte-custom-hue and --nyte-custom-chroma-scale. Other scopes are brown, orange, yellow, green, blue, purple, pink, red, and teal.

Colour use	Scope	Role
Status text	`intent.success`, `intent.warning`, or `intent.danger`	`contentSecondary`
Filled action	`intent.primary`	`buttonFill` and `contentOnInteractiveStrong`
Syntax token	A hue per token kind	`contentSecondary`
Dot, file glyph, chart series	A hue per category	`contentInteractiveTertiary`
Added diff line or word	`surfaceTheme.green`	`bgInteractiveSecondaryTranslucent` or `bgInteractivePrimaryTranslucent`
Removed diff line or word	`surfaceTheme.red`	The same background roles
Avatar	A hue per avatar	`bgInteractiveSecondaryTranslucent` and `contentInteractivePrimary`

Apply a scope with props(surfaceTheme.blue, styles.item). Scope the list when every item shares a hue.

Layers

Kind	Order	Consumer API
Colour	Ramps → theme → neutral or tinted roles	`role`
Size	Values → components → app layout	`button`, `input`, `switchControl`, `checkbox`, `row`, `menu`, `dialog`, `toast`, `glyph`, `clipboardPreview`, `radius`
Type	Font inputs and derived type scale	`type`
Motion	Durations and easing	`motion`
Shadow	Size values and shadow inks → elevation	`shadow`
Appearance	Display, pointer, transparency, and focus inputs	`appearance`

radius has five names: indicator, control, card, surface, and pill. Component radii stay on their component handles. Component sizes grow under (pointer: coarse).

Roles resolve through light-dark(), so color-scheme on an ancestor picks the appearance. The focus ring ignores hue scopes.

Readable text uses contentPrimary or contentSecondary. contentTertiary is for placeholders, disabled hints, and decoration. Glyphs use contentInteractiveTertiary or a stronger role.

Import handles instead of writing var(--nyte-…). Use a design-scale literal when no handle exists.

Native colours

import { platformColors, platformScopes } from "@nyte-ai/ui/platform-colors";

const page = platformColors.light.bgBase;
const status = platformScopes.light.green.contentSecondary;

Native colours contain resolved values for each appearance. Use a scope and role instead of a fixed status or syntax colour.

Compiled styles

Without a StyleX compiler, load the package stylesheet.

@import "@nyte-ai/ui/ui.css";