borders #
Border variables integrate with the theme system and adapt to color scheme. Alpha borders are tuned for visual balance -- dark mode uses higher alpha because light-on-dark has lower perceived contrast.
Tinted alpha borders #
The border_color_NN variables provide tinted alpha borders that integrate with
the theme. They use tint_hue for cohesion.
Opaque borders with shades #
For opaque borders, use shade variables directly. This avoids alpha transparency but requires inline styles or custom classes:
/* inline style */
border-color: var(--shade_30);
/* or set the contextual variable */
--border_color: var(--shade_30);Border colors #
Use color variables like color_a_50 for colored borders. The intensity
controls the color's prominence.
Border widths #
Outlines #
Each border utility class has a corresponding outline variant using the same border variables
(like outline_color_b, outline_width_4, and outline-style:solid), and there are also two special outline variables:
Border radius #
Border variables with token classes:
Custom values #
Border literal classes for open-ended values: