Color
The Parity color system overrides TailwindCSS default colors to match brand identity and ensure a consistent user experience. Below are all system color tokens, grouped by category, with their values for both light and dark schemes.
Token Structure
Tokens follow the structure:
--{system}/{property}/{target}/{variant}/{state}/{inversion}
- system: The design system or namespace, e.g.
par - property: The CSS property or semantic role, e.g.
color,bg,border,text,icon - target: The UI element or context, e.g.
surface,field,button,item - variant: Variant or emphasis, e.g.
primary,secondary,accent,neutral,pronounced,subtle - state: UI state, e.g.
enabled,hovered,pressed,disabled,readonly,invalid,focused - inversion: Inverse or alternative mode, e.g.
inverse
Example:
--par-color-bg-surface-item-accent-pronounced-selected-hovered
→ system: par, property: color-bg, target: surface-item, variant: accent-pronounced, state: selected-hovered
Default Neutral & Accent Colors
| Role | Token/Color | Color |
|---|---|---|
| Neutral | --par-___-neutral-___ | gray |
| Accent | --par-___-accent-___ | blue |
Note: These are the main neutral and accent tokens used throughout the system. See the palette section for all available shades.
Background Tokens
| Token Name | Light Value | Dark Value | Description |
|---|---|---|---|
| --par-color-bg | var(--par-neutral-0) | var(--par-neutral-950) | Main background |
| --par-color-bg-alternative | var(--par-neutral-50) | var(--par-neutral-900) | Alternative background |
| --par-color-bg-surface | var(--par-neutral-50) | var(--par-neutral-900) | Surface background |
| --par-color-bg-surface-inverse | var(--par-neutral-950) | var(--par-neutral-0) | Inverse surface background |
| --par-color-bg-surface-alternative | var(--par-neutral-0) | var(--par-neutral-800) | Alternative surface background |
| --par-color-bg-surface-indicator-neutral | var(--par-neutral-500) | var(--par-neutral-500) | Neutral indicator background |
| --par-color-bg-surface-indicator-accent | var(--par-accent-500) | var(--par-accent-500) | Accent indicator background |
| --par-color-bg-surface-item-enabled | transparent | transparent | Enabled item background |
| --par-color-bg-surface-item-hovered | rgb(from var(--par-neutral-200) r g b / 0.5) | rgb(from var(--par-neutral-700) r g b / 0.5) | Hovered item background |
| --par-color-bg-surface-item-neutral-subtle-selected | var(--par-neutral-200) | rgb(from var(--par-neutral-200) r g b / 0.5) | Subtle selected neutral item |
| --par-color-bg-surface-item-neutral-subtle-selected-hovered | var(--par-neutral-300) | rgb(from var(--par-neutral-300) r g b / 0.5) | Subtle selected neutral hovered |
| --par-color-bg-surface-item-neutral-pronounced-selected | var(--par-neutral-900) | var(--par-neutral-100) | Pronounced selected neutral item |
| --par-color-bg-surface-item-neutral-pronounced-selected-hovered | var(--par-neutral-800) | var(--par-neutral-200) | Pronounced selected neutral hovered |
| --par-color-bg-surface-item-accent-subtle-selected | var(--par-accent-100) | rgb(from var(--par-neutral-200) r g b / 0.5) | Subtle selected accent item |
| --par-color-bg-surface-item-accent-subtle-selected-hovered | var(--par-accent-200) | rgb(from var(--par-neutral-300) r g b / 0.5) | Subtle selected accent hovered |
| --par-color-bg-surface-item-accent-pronounced-selected | var(--par-accent-600) | var(--par-accent-600) | Pronounced selected accent item |
| --par-color-bg-surface-item-accent-pronounced-selected-hovered | var(--par-accent-700) | var(--par-accent-700) | Pronounced selected accent hovered |
| --par-color-bg-field-enabled | var(--par-neutral-50) | var(--par-neutral-900) | Enabled field background |
| --par-color-bg-field-alternative-enabled | var(--par-neutral-0) | var(--par-neutral-800) | Alternative enabled field bg |
| --par-color-bg-field-hovered | var(--par-neutral-100) | var(--par-neutral-800) | Hovered field background |
| --par-color-bg-field-alternative-hovered | var(--par-neutral-100) | var(--par-neutral-700) | Alternative hovered field bg |
| --par-color-bg-field-disabled | rgb(from var(--par-neutral-50) r g b / 0.5) | rgb(from var(--par-neutral-900) r g b / 0.5) | Disabled field background |
| --par-color-bg-field-alternative-disabled | rgb(from var(--par-neutral-0) r g b / 0.5) | rgb(from var(--par-neutral-800) r g b / 0.5) | Alt disabled field background |
| --par-color-bg-field-readonly | var(--par-neutral-100) | var(--par-neutral-800) | Readonly field background |
| --par-color-bg-field-invalid | var(--par-adverse-50) | var(--par-adverse-900) | Invalid field background |
| --par-color-bg-field-button-enabled | transparent | transparent | Enabled field button background |
| --par-color-bg-field-button-hovered | rgb(from var(--par-neutral-200) r g b / 0.5) | rgb(from var(--par-neutral-700) r g b / 0.5) | Hovered field button background |
| --par-color-bg-field-button-pressed | rgb(from var(--par-neutral-300) r g b / 0.5) | rgb(from var(--par-neutral-600) r g b / 0.5) | Pressed field button background |
| --par-color-bg-field-button-disabled | transparent | transparent | Disabled field button background |
Border Tokens
| Token | Light Value | Dark Value | Description |
|---|---|---|---|
| --par-color-focus-ring | var(--par-neutral-950) | var(--par-neutral-0) | Focus ring |
| --par-color-border-surface | var(--par-neutral-200) | var(--par-neutral-700) | Surface border |
| --par-color-border-surface-inverse | var(--par-neutral-700) | var(--par-neutral-200) | Inverse surface border |
| --par-color-border-field-enabled | var(--par-neutral-200) | var(--par-neutral-700) | Enabled field border |
| --par-color-border-field-alpha-enabled | var(--par-neutral-200-a50) | var(--par-neutral-700-a50) | Alpha enabled field border |
| --par-color-border-field-hovered | var(--par-neutral-300) | var(--par-neutral-600) | Hovered field border |
| --par-color-border-field-readonly | var(--par-neutral-200) | var(--par-neutral-700) | Readonly field border |
| --par-color-border-field-invalid | var(--par-adverse-500) | var(--par-adverse-100) | Invalid field border |
| --par-color-border-field-disabled | var(--par-neutral-200-a50) | var(--par-neutral-700-a50) | Disabled field border |
| --par-color-border-field-focused | var(--par-neutral-950) | var(--par-neutral-0) | Focused field border |
| --par-outlined-surface-item-focused | var(--par-neutral-950) | var(--par-neutral-0) | Outlined surface focus |
Text & Icon Tokens
| Token | Light Value | Dark Value | Description |
|---|---|---|---|
| --par-color-text-primary | var(--par-gray-950) | var(--par-white) | Primary text |
| --par-color-text-primary-disabled | rgb(from var(--par-gray-950) r g b / 0.5) | rgb(from var(--par-white) r g b / 0.5) | Disabled primary text |
| --par-color-text-primary-inverse | var(--par-white) | var(--par-gray-950) | Inverse primary text |
| --par-color-text-secondary | var(--par-gray-700) | var(--par-gray-200) | Secondary text |
| --par-color-text-secondary-inverse | var(--par-gray-200) | var(--par-gray-700) | Inverse secondary text |
| --par-color-text-helper-neutral | var(--par-gray-550) | var(--par-gray-200) | Neutral helper text |
| --par-color-text-helper-neutral-disabled | rgb(from var(--par-gray-550) r g b / 0.5) | rgb(from var(--par-gray-200) r g b / 0.5) | Disabled neutral helper text |
| --par-color-text-helper-adverse | var(--par-red-550) | var(--par-red-200) | Adverse helper text |
| --par-color-text-helper-cautionary | var(--par-yellow-550) | var(--par-yellow-200) | Cautionary helper text |
| --par-color-text-helper-affirmative | var(--par-green-550) | var(--par-green-200) | Affirmative helper text |
| --par-color-text-helper-info | var(--par-blue-550) | var(--par-blue-200) | Info helper text |
| --par-color-text-surface-item-enabled | var(--par-color-text-primary) | var(--par-color-text-primary) | Enabled surface item text |
| --par-color-text-surface-item-neutral-subtle-selected | var(--par-color-text-primary) | var(--par-color-text-primary) | Neutral subtle selected text |
| --par-color-text-surface-item-neutral-pronounced-selected | var(--par-white) | var(--par-gray-950) | Neutral pronounced selected |
| --par-color-text-surface-item-accent-subtle-selected | var(--par-color-text-primary) | var(--par-accent-200) | Accent subtle selected text |
| --par-color-text-surface-item-accent-pronounced-selected | var(--par-white) | var(--par-white) | Accent pronounced selected |
| --par-color-text-surface-item-disabled | var(--par-color-text-primary-disabled) | var(--par-color-text-primary-disabled) | Disabled surface item text |
| --par-color-text-field-placeholder | var(--par-gray-600) | var(--par-gray-200) | Field placeholder text |
| --par-color-text-field-alpha-placeholder | rgb(from var(--par-gray-600) r g b / 0.5) | rgb(from var(--par-gray-200) r g b / 0.5) | Alpha placeholder text |
| --par-color-text-field-alternative-placeholder | var(--par-gray-550) | var(--par-gray-200) | Alt placeholder text |
| --par-color-text-field-filled | var(--par-color-text-primary) | var(--par-color-text-primary) | Filled field text |
| --par-color-text-field-label | var(--par-color-text-secondary) | var(--par-color-text-secondary) | Field label text |
| --par-color-text-field-disabled | rgb(from var(--par-color-text-field-placeholder) r g b / 0.5) | rgb(from var(--par-color-text-field-placeholder) r g b / 0.5) | Disabled field text |
| --par-color-text-field-readonly | var(--par-color-text-primary) | var(--par-color-text-primary) | Readonly field text |
| --par-color-text-field-invalid | var(--par-color-text-primary) | var(--par-color-text-primary) | Invalid field text |
| --par-color-text-button | var(--par-gray-550) | var(--par-gray-200) | Button text |
| --par-color-icon-field-button-enabled | var(--par-gray-500) | var(--par-gray-200) | Enabled field button icon |
| --par-color-icon-field-button-hovered | var(--par-gray-600) | var(--par-gray-100) | Hovered field button icon |
| --par-color-icon-field-button-pressed | var(--par-gray-700) | var(--par-gray-100) | Pressed field button icon |
| --par-color-icon-field-button-disabled | rgb(from var(--par-gray-500) r g b / 0.5) | rgb(from var(--par-gray-200) r g b / 0.5) | Disabled field button icon |
Effect Tokens
| Token | Light Value | Dark Value | Description |
|---|---|---|---|
| --par-color-ring-visible-focused | var(--par-gray-950) | var(--par-white) | Focus ring outline |
| --par-color-effect-shadow | rgba(0,0,0,0.1) | rgba(255,255,255,0.1) | Shadow effect |
Palette (Core Colors)
Below is the full palette used for overrides (see colorPalette.ts):
| Name | Tokens (Light) |
|---|---|
| gray | --par-gray-0, --par-gray-50, --par-gray-100, --par-gray-200, --par-gray-300, --par-gray-400, --par-gray-500, --par-gray-550, --par-gray-600, --par-gray-700, --par-gray-800, --par-gray-900, --par-gray-950 |
| orange | --par-orange-0, --par-orange-50, --par-orange-100, --par-orange-200, --par-orange-300, --par-orange-400, --par-orange-500, --par-orange-600, --par-orange-700, --par-orange-800, --par-orange-900, --par-orange-950 |
| blue | --par-blue-0, --par-blue-50, --par-blue-100, --par-blue-200, --par-blue-300, --par-blue-400, --par-blue-500, --par-blue-600, --par-blue-700, --par-blue-800, --par-blue-900, --par-blue-950 |
| lime | --par-lime-0, --par-lime-50, --par-lime-100, --par-lime-200, --par-lime-300, --par-lime-400, --par-lime-500, --par-lime-600, --par-lime-700, --par-lime-800, --par-lime-900, --par-lime-950 |
| violet | --par-violet-0, --par-violet-50, --par-violet-100, --par-violet-200, --par-violet-300, --par-violet-400, --par-violet-500, --par-violet-600, --par-violet-700, --par-violet-800, --par-violet-900, --par-violet-950 |
| cyan | --par-cyan-0, --par-cyan-50, --par-cyan-100, --par-cyan-200, --par-cyan-300, --par-cyan-400, --par-cyan-500, --par-cyan-600, --par-cyan-700, --par-cyan-800, --par-cyan-900, --par-cyan-950 |
| red | --par-red-0, --par-red-50, --par-red-100, --par-red-200, --par-red-300, --par-red-400, --par-red-500, --par-red-600, --par-red-700, --par-red-800, --par-red-900, --par-red-950 |
| yellow | --par-yellow-0, --par-yellow-50, --par-yellow-100, --par-yellow-200, --par-yellow-300, --par-yellow-400, --par-yellow-500, --par-yellow-600, --par-yellow-700, --par-yellow-800, --par-yellow-900, --par-yellow-950 |
| green | --par-green-0, --par-green-50, --par-green-100, --par-green-200, --par-green-300, --par-green-400, --par-green-500, --par-green-600, --par-green-700, --par-green-800, --par-green-900, --par-green-950 |
References
Usage Example
<div
style={{
background: 'var(--par-color-bg)',
color: 'var(--par-color-text-primary)',
border: '1px solid var(--par-color-border-surface)'
}}
>
Example text with system colors
</div>