Color
Color in Tessera UI follows a three-tier architecture: reference palettes define raw values, semantic tokens assign purpose, and component tokens enable per-element overrides. This separation ensures painless theming and reliable dark mode support.
Reference Palettes
Section titled “Reference Palettes”Reference tokens (--ts-ref-*) are immutable raw color values. They never change between themes.
Primary — Vibrant Blue
Section titled “Primary — Vibrant Blue”Secondary — Neutral Teal
Section titled “Secondary — Neutral Teal”Neutral — Cool Blue Tint
Section titled “Neutral — Cool Blue Tint”Success
Section titled “Success”Warning
Section titled “Warning”Danger
Section titled “Danger”Info — Sky / Cyan
Section titled “Info — Sky / Cyan”Semantic Token Mapping
Section titled “Semantic Token Mapping”Semantic tokens (--ts-color-*) assign purpose to reference colors. Components consume only these tokens, never raw palette values.
Text Roles
Section titled “Text Roles”Primary Text
Primary text
—ts-color-text-primary → —ts-ref-neutral-900
Secondary Text
Secondary text
—ts-color-text-secondary → —ts-ref-neutral-700
Tertiary Text
Tertiary text
—ts-color-text-tertiary → —ts-ref-neutral-500
Disabled Text
Disabled text
—ts-color-text-disabled → —ts-ref-neutral-400
Inverse Text
Inverse text
—ts-color-text-inverse → —ts-ref-neutral-0
On Primary
Text on primary fills
—ts-color-text-on-primary → —ts-ref-white
Interactive Colors
Section titled “Interactive Colors”—ts-color-interactive-primary → —ts-ref-primary-600—ts-color-interactive-primary-hover → —ts-ref-primary-700—ts-color-interactive-secondary → —ts-ref-secondary-600—ts-color-interactive-danger → —ts-ref-danger-600Container Colors
Section titled “Container Colors”Containers use a subtle background paired with an accessible text color for the same hue.
State Layers
Section titled “State Layers”Semi-transparent overlays convey interaction state. Applied on top of a component’s base color.
Theme Preview
Section titled “Theme Preview”The same semantic tokens resolve to different values in light, dark, and high-contrast themes. Reference tokens remain unchanged.
Light vs. Dark
Section titled “Light vs. Dark”Light Theme
Dark Theme
High Contrast
Section titled “High Contrast”High Contrast
Key Differences
High contrast mode maximizes contrast ratios for WCAG AAA compliance. Borders become solid black, shadows are replaced with outlines, and interactive colors shift to darker shades for greater legibility.
Usage Guidelines
Section titled “Usage Guidelines”- Never use reference tokens directly in component CSS. Always go through semantic tokens.
- Use container pairs (
*-container+on-*-container) together to guarantee accessible text on colored backgrounds. - Test in all three themes (light, dark, high contrast) when creating custom styles.
- Respect state layers — use the opacity tokens for hover/focus/pressed overlays rather than hardcoding colors.