Foundations
Colors
Primitive ramps and the shadcn bridge.
Primitives
Raw tokens from @sophic/portal-ui/tokens.css, split into color ramps
(neutral, brand, status, teal, violet) and other primitives (transparent
washes and base constants).
Color ramps
Mode-flipping color scales. Light and dark are shown side by side because the same token name resolves differently per mode.
Other primitives
Opacity washes (transparent/*) and mode constants (white / black / dimming). The transparent-swap/* variants also invert their base color in dark mode.
shadcn bridge
The tokens @sophic/portal-ui components consume, mapped onto the layers above.
Entries marked derived have no Figma counterpart yet.
| Token | Value |
|---|---|
| --background | var(--ivory) |
| --foreground | var(--soil) |
| --card | var(--neutral-0) |
| --glass | rgb(255 255 255 / 64%) |
| --glass-blur | 16px |
| --glass-saturate | 160% |
| --primary | var(--soil) |
| --primary-foreground | #ffffff |
| --secondary | var(--neutral-200) |
| --secondary-foreground | var(--foreground) |
| --hover | color-mix(in srgb, var(--foreground) 5%, transparent) |
| --selected | color-mix(in srgb, var(--foreground) 6%, transparent) |
| --selected-bar | var(--neutral-900) |
| --selected-bar-width | 2px |
| --track | var(--neutral-200) |
| --control-fill | var(--neutral-100) |
| --control-fill-hover | var(--neutral-200) |
| --progress-track | color-mix(in srgb, var(--limestone) 18%, var(--card)) |
| --progress | var(--limestone) |
| --logo-background | var(--deep-grove) |
| --activity-mark-maturity | var(--green-700) |
| --activity-mark-merger | var(--magenta-700) |
| --muted | var(--neutral-100)derived, pending Figma |
| --muted-foreground | var(--neutral-700)derived, pending Figma |
| --skeleton | var(--neutral-200)derived, pending Figma |
| --destructive | var(--red-700) |
| --destructive-foreground | var(--white-fixed) |
| --error | var(--red-100) |
| --error-foreground | var(--red-700) |
| --info | var(--blue-100) |
| --info-foreground | var(--blue-700) |
| --success | var(--green-100) |
| --success-foreground | var(--green-700) |
| --warning | var(--amber-100) |
| --warning-foreground | var(--amber-700) |
| --border-width | 1px |
| --border | color-mix(in srgb, var(--neutral-800) 9%, transparent) |
| --border-strong | color-mix(in srgb, var(--neutral-800) 13%, transparent) |
| --border-inner | color-mix(in srgb, var(--neutral-800) 6%, transparent) |
| --input | color-mix(in srgb, var(--neutral-800) 16%, transparent) |
| --input-hover | color-mix(in srgb, var(--neutral-800) 24%, transparent) |
| --focus | color-mix(in srgb, var(--neutral-800) 32%, transparent) |
| --focus-halo | color-mix(in srgb, var(--foreground) 5%, transparent) |
| --card-nested | var(--neutral-50) |
| --card-nested-border | transparent |
| --chart-1 | var(--blue-500) |
| --chart-2 | var(--amber-500) |
| --chart-3 | var(--magenta-500) |
| --chart-4 | var(--green-500) |
| --chart-5 | var(--red-500) |
| --chart-6 | #898d01 |
| --chart-7 | #ca653c |
| --chart-portfolio | var(--limestone) |
| --chart-scrub-dim | var(--neutral-200) |
| --chart-pill-highlight | #ede9fe |
| --greeting-day | #ca653c |
| --greeting-evening | #8b5cf6 |
| --greeting-night | #6d28d9 |
| --drawer-wash | rgb(255 255 255 / 20%) |
| --chart-line-positive | var(--green-500) |
| --chart-line-negative | var(--red-500) |
| --chart-area-fill | color-mix(in srgb, var(--limestone) 18%, transparent) |
| --chart-bar | #d0cab8 |
| --chart-bar-down | var(--red-300) |
| --chart-contributions | var(--neutral-500) |
| --chart-range-track | var(--neutral-100) |
| --chart-range-track-stacked | var(--neutral-100) |
| --chart-range-active | var(--card) |
| --chart-range-active-border | var(--border-strong) |
| --chart-range-active-border-width | var(--border-width) |
| --chart-range-expandable-radius | var(--radius-2xl) |
| --chart-panel-radius | var(--radius-2xl) |
| --chart-panel-border | var(--border) |
| --chart-value-muted | var(--neutral-500) |
| --chart-value-tracking | var(--tracking-tabular) |
| --chart-value-whole-size-xl | 3rem |
| --chart-value-fraction-size-xl | calc(3rem * 2 / 2.625) |
| --chart-value-whole-size-lg | 2.625rem |
| --chart-value-fraction-size-lg | 2rem |
| --chart-value-whole-size-md | calc(2.625rem * 0.8) |
| --chart-value-fraction-size-md | calc(2rem * 0.8) |
| --chart-value-whole-size-sm | calc(2.625rem * 0.7) |
| --chart-value-fraction-size-sm | calc(2rem * 0.7) |
| --chart-value-whole-size-xs | calc(2.625rem * 0.4) |
| --chart-value-fraction-size-xs | calc(2rem * 0.4) |
| --tabs-list-radius | var(--radius-full) |
| --tabs-trigger-radius | var(--radius-full) |
| --tabs-active-border | transparent |
| --tabs-active-border-width | var(--border-width) |
| --chart-grid-dot | color-mix(in oklab, var(--foreground) 14%, transparent) |
| --chart-grid-dot-radius | 0.5px |
| --chart-grid-size | 0.375rem |
| --chart-grid-opacity | 0.55 |
| --chart-edge-fade-inset | 7% |
| --chart-area-fill-top | 0.3 |
| --chart-area-fill-mid | 0.12 |
| --chart-area-fill-neutral-top | 0.26 |
| --chart-area-fill-neutral-mid | 0.1 |
| --radius | 0.5rem |
| --sidebar | var(--background)derived, pending Figma |
| --sidebar-foreground | var(--neutral-900) |
| --sidebar-primary | var(--neutral-900) |
| --sidebar-primary-foreground | var(--white) |
| --sidebar-accent | var(--neutral-100)derived, pending Figma |
| --sidebar-accent-foreground | var(--neutral-900) |
| --sidebar-ring | var(--neutral-400) |
| --header | var(--neutral-900)derived, pending Figma |
| --header-foreground | var(--neutral-0) |
| --main-background | var(--background)derived, pending Figma |