Colors

Tosui color props accept semantic tokens. Each token refers to a CSS custom property whose value changes with the active theme.

The three color props accept different token sets:

• color sets the text color.
• bg sets the background color.
• borderColor sets the border color.

Text color tokens

The color prop accepts the following groups.

Group	Tokens
Foreground	foreground, foreground-muted, foreground-subtle
Inverted foreground	foreground-inverted, foreground-inverted-muted, foreground-inverted-subtle
Brand	primary, primary-emphasis, accent, accent-emphasis
Feedback	success, success-emphasis, warning, warning-emphasis, error, error-emphasis, info, info-emphasis

Use an inverted foreground token on a solid brand or feedback background:

<Box bg="primary-default" color="foreground-inverted" p={4}>
  Primary action content
</Box>

Background color tokens

The bg prop accepts surface tokens and three states for each brand or feedback color.

Group	Tokens
Surfaces	background, surface, foreground, transparent
Brand	primary-default, primary-emphasis, primary-subtle, accent-default, accent-emphasis, accent-subtle
Feedback	success-*, warning-*, error-*, info-*

For each feedback group, * is default, emphasis, or subtle.

<Box bg="error-subtle" color="error" p={4} rounded="md">
  Correct the highlighted fields.
</Box>

Border color tokens

The borderColor prop accepts the following groups.

Group	Tokens
Neutral	border, border-muted
Brand	primary, primary-emphasis, accent, accent-emphasis
Feedback	success, success-emphasis, warning, warning-emphasis, error, error-emphasis, info, info-emphasis

<Box border="thin" borderColor="primary" p={4}>
  Bordered content
</Box>

The text and border props omit -default. For example, use color="error" and borderColor="error", not color="error-default".

Light and dark themes

Tosui follows the system color scheme unless the root html element has a data-theme override.

<!-- Follow the system preference. -->
<html>
<html data-theme="auto">

<!-- Use one color mode. -->
<html data-theme="light">
<html data-theme="dark">

The same component tokens work in each mode:

<Box bg="surface" color="foreground" border="thin" borderColor="border">
  Theme-aware content
</Box>

State and responsive colors

Color props accept responsive values and work inside state props.

<Box
  bg={{ base: "surface", md: "primary-subtle" }}
  color="foreground"
  _hover={{ bg: "primary-default", color: "foreground-inverted" }}
>
  Responsive, interactive content
</Box>

See Responsive styling and State styling for the object syntax and cascade rules.

CSS variables

Component tokens map to semantic CSS variables such as --t-color-foreground and --t-color-primary-default. Those variables select a light or dark primitive, such as --t-light-primary-default or --t-dark-primary-default.

To define both color modes, override the light and dark primitives. To override one subtree in its current mode, set a semantic variable on that subtree.

See Customize a theme for both patterns. The source of truth for token names and default values is packages/react/src/styles/_color-scheme.css.