Semantic tokens
| Example | Token | Value (Default) | Value (Dark) |
|---|---|---|---|
color-accent | var(--accent) | var(--accent) | |
color-accent-foreground | var(--accent-foreground) | var(--accent-foreground) | |
color-background | var(--background) | var(--background) | |
color-body-bg | var(--background) | var(--background) | |
color-body-text | var(--foreground) | var(--foreground) | |
color-border | var(--border) | var(--border) | |
color-border-color | var(--border) | var(--border) | |
color-border-color-a11y | var(--border-a11y) | var(--border-a11y) | |
color-card | var(--card) | var(--card) | |
color-card-foreground | var(--card-foreground) | var(--card-foreground) | |
color-chart-1 | var(--chart-1) | var(--chart-1) | |
color-chart-2 | var(--chart-2) | var(--chart-2) | |
color-chart-3 | var(--chart-3) | var(--chart-3) | |
color-chart-4 | var(--chart-4) | var(--chart-4) | |
color-chart-5 | var(--chart-5) | var(--chart-5) | |
color-danger | var(--destructive) | var(--destructive) | |
color-danger-active | var(--destructive-active) | var(--destructive-active) | |
color-danger-bg | var(--destructive-background) | var(--destructive-background) | |
color-danger-bg-active | var(--destructive-background-active) | var(--destructive-background-active) | |
color-danger-fg | var(--destructive-foreground) | var(--destructive-foreground) | |
color-danger-hover | var(--destructive-hover) | var(--destructive-hover) | |
color-destructive | var(--destructive) | var(--destructive) | |
color-foreground | var(--foreground) | var(--foreground) | |
color-info | var(--info) | var(--info) | |
color-info-active | var(--info-active) | var(--info-active) | |
color-info-bg | var(--info-background) | var(--info-background) | |
color-info-bg-active | var(--info-background-active) | var(--info-background-active) | |
color-info-fg | var(--info-foreground) | var(--info-foreground) | |
color-info-hover | var(--info-hover) | var(--info-hover) | |
color-input | var(--placeholder) | var(--placeholder) | |
color-inverse-text | var(--inverse) | var(--inverse) | |
color-muted | var(--muted) | var(--muted) | |
color-muted-foreground | var(--muted-foreground) | var(--muted-foreground) | |
color-neutral | var(--neutral) | var(--neutral) | |
color-neutral-active | var(--neutral-active) | var(--neutral-active) | |
color-neutral-bg | var(--neutral-background) | var(--neutral-background) | |
color-neutral-bg-active | var(--neutral-background-active) | var(--neutral-background-active) | |
color-neutral-fg | var(--neutral-foreground) | var(--neutral-foreground) | |
color-neutral-hover | var(--neutral-hover) | var(--neutral-hover) | |
color-placeholder-color | var(--placeholder) | var(--placeholder) | |
color-popover | var(--popover) | var(--popover) | |
color-popover-foreground | var(--popover-foreground) | var(--popover-foreground) | |
color-primary | var(--primary) | var(--primary) | |
color-primary-active | var(--primary-active) | var(--primary-active) | |
color-primary-background | var(--primary-background) | var(--primary-background) | |
color-primary-bg | var(--primary-background) | var(--primary-background) | |
color-primary-bg-active | var(--primary-background-active) | var(--primary-background-active) | |
color-primary-fg | var(--primary-foreground) | var(--primary-foreground) | |
color-primary-foreground | var(--primary-foreground) | var(--primary-foreground) | |
color-primary-hover | var(--primary-hover) | var(--primary-hover) | |
color-ring | var(--ring) | var(--ring) | |
color-secondary | var(--secondary) | var(--secondary) | |
color-secondary-foreground | var(--secondary-foreground) | var(--secondary-foreground) | |
color-sidebar | var(--sidebar) | var(--sidebar) | |
color-sidebar-accent | var(--sidebar-accent) | var(--sidebar-accent) | |
color-sidebar-accent-foreground | var(--sidebar-accent-foreground) | var(--sidebar-accent-foreground) | |
color-sidebar-border | var(--sidebar-border) | var(--sidebar-border) | |
color-sidebar-foreground | var(--sidebar-foreground) | var(--sidebar-foreground) | |
color-sidebar-primary | var(--sidebar-primary) | var(--sidebar-primary) | |
color-sidebar-primary-foreground | var(--sidebar-primary-foreground) | var(--sidebar-primary-foreground) | |
color-sidebar-ring | var(--sidebar-ring) | var(--sidebar-ring) | |
color-sonner-error | var(--destructive-background) | var(--destructive-background) | |
color-subtle-bg | var(--muted) | var(--muted) | |
color-subtle-text | var(--muted-foreground) | var(--muted-foreground) | |
color-success | var(--success) | var(--success) | |
color-success-active | var(--success-active) | var(--success-active) | |
color-success-bg | var(--success-background) | var(--success-background) | |
color-success-bg-active | var(--success-background-active) | var(--success-background-active) | |
color-success-fg | var(--success-foreground) | var(--success-foreground) | |
color-success-hover | var(--success-hover) | var(--success-hover) | |
color-warning | var(--warning) | var(--warning) | |
color-warning-active | var(--warning-active) | var(--warning-active) | |
color-warning-bg | var(--warning-background) | var(--warning-background) | |
color-warning-bg-active | var(--warning-background-active) | var(--warning-background-active) | |
color-warning-fg | var(--warning-foreground) | var(--warning-foreground) | |
color-warning-hover | var(--warning-hover) | var(--warning-hover) |