Module token 

The design tokens the components read their colors and radius from.

The names and the light values follow shadcn/ui’s zinc theme. The values differ where shadcn/ui falls short of WCAG 2.2 AA: input is dark enough for the 3:1 contrast that a control’s boundary needs (1.4.11), muted_foreground keeps 4.5:1 on muted as well as on background, and ring is drawn as a solid outline rather than a translucent shadow (2.4.7).

Set a token for a whole page with a Theme, or for one element with Style::token.

use hypersig::style::Theme;
use hypersig::style::value::Color;
use hypersig_ui::token;

let brand = Theme::new().set(&token::primary(), Color::hex(0x0025_63eb));
assert!(brand.to_css().contains("--primary:#2563eb"));

Functions

accent

The fill under the pointer in a menu or a ghost button.

accent_foreground

Text on accent.

background

The page background.

border

The border of a card, a menu, and a separator, which mark no control.

card

The surface of a card.

card_foreground

Text on card.

chart_1

The first series of a chart. The five chart colors keep 3:1 or more on background, card, and muted in both themes.

chart_2

The second series of a chart.

chart_3

The third series of a chart.

chart_4

The fourth series of a chart.

chart_5

The fifth series of a chart.

destructive

The color of a destructive action and of an error message.

destructive_foreground

Text on destructive.

foreground

Text on background.

input

The border of a text field, a checkbox, a radio, and an off switch, at 3.3:1 or more on background and on card in both themes.

muted

A quiet fill, such as the track of a tab list.

muted_foreground

Secondary text, such as a description, at 4.8:1 or more on background and on muted in both themes.

popover

The surface of a menu or another popover.

popover_foreground

Text on popover.

primary

The fill of a default button, a checked box, and an on switch.

primary_foreground

Text and marks on primary.

radius

The corner radius of a card, a dialog, and a menu.

ring

The focus outline.

secondary

The fill of a secondary button.

secondary_foreground

Text on secondary.