Foundations

Theming and styling channels

Token overrides, className, and xstyle

Layer	Owns	Mechanism
Base UI and `@shadcn/react`	Interaction, focus, ARIA, data attributes	Components and scroll/form controllers
`@nyte-ai/ui`	Reusable component styling	StyleX `stylex.create` reading tokens
The app	Layout, typography, product identity, composites	Token overrides, `className`, `xstyle`, own components

Colour scopes

Pass a scope such as surfaceTheme.blue to props(), and components inside read that hue's colour roles. See Tokens.

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

const styles = create({
  panel: { backgroundColor: role.bgInteractiveSecondaryTranslucent },
});

<section {...props(surfaceTheme.blue, styles.panel)}>Preview</section>

Use intent scopes for meaning and surfaceTheme scopes for category hues.

Measurements

Read control geometry from handles in @nyte-ai/ui/styles/schema.stylex, such as button, input, and row. They grow under (pointer: coarse). Use a scale literal when no handle exists.

Styling a component

Each prop below overrides component styles. Chat layout parts accept only native className and style.

Prop	Takes
`xstyle`	Styles from your `create()`
`className`	Any class, such as a Tailwind utility
`style`	Inline values, which beat both

Set a property through xstyle or className, not both. Button and Toggle take only placement properties in xstyle, typed as ButtonLayout.

Data attributes

Component	Attributes
`Avatar`	`data-slot="avatar"`, `data-size`, `data-tone`
`AvatarImage`	`data-slot="avatar-image"`
`AvatarFallback`	`data-slot="avatar-fallback"`
`Input`	`data-slot="input"`
`Textarea`	`data-slot="textarea"`

Base UI also sets state attributes such as data-disabled, data-popup-open, data-highlighted, and data-checked.

Dark mode

Tokens follow the active color-scheme through light-dark(), not a .dark class. An app that toggles .dark sets color-scheme: dark under it.