Staffbase

Foundation

Component tokens

Component tokens are design decisions scoped to a specific component. They sit above semantic tokens in the hierarchy, allowing per-component overrides without touching shared values.

Badge

Class Value Preview
text-badge-critical
var(--sb-text-color-critical-inverse)
var(--sb-color-red-50)
text-badge-primary
var(--sb-text-color-primary-inverse)
var(--sb-color-blue-50)
bg-badge-critical
var(--sb-background-color-critical-vivid)
var(--sb-color-red-800)
bg-badge-primary
var(--sb-background-color-primary-vivid)
var(--sb-color-blue-800)

Button

Class Value Preview
text-button-solid-primary
var(--sb-text-color-primary-inverse)
var(--sb-color-blue-50)
text-button-solid-neutral
var(--sb-text-color-neutral-strong)
var(--sb-color-grey-950)
text-button-solid-critical
var(--sb-text-color-critical-inverse)
var(--sb-color-red-50)
text-button-outline-primary
var(--sb-text-color-primary-vivid)
var(--sb-color-blue-700)
text-button-outline-neutral
var(--sb-text-color-neutral-strong)
var(--sb-color-grey-950)
text-button-outline-critical
var(--sb-text-color-critical-vivid)
var(--sb-color-red-700)
text-button-ghost-primary
var(--sb-text-color-primary-vivid)
var(--sb-color-blue-700)
text-button-ghost-neutral
var(--sb-text-color-neutral-strong)
var(--sb-color-grey-950)
text-button-ghost-critical
var(--sb-text-color-critical-vivid)
var(--sb-color-red-700)
bg-button-solid-primary
var(--sb-background-color-primary-vivid)
var(--sb-color-blue-800)
bg-button-solid-primary-hover
var(--sb-background-color-primary-vivid-hover)
var(--sb-color-blue-900)
bg-button-solid-primary-pressed
var(--sb-background-color-primary-vivid-pressed)
var(--sb-color-blue-950)
bg-button-solid-neutral
var(--sb-background-color-neutral-medium)
var(--sb-color-grey-100)
bg-button-solid-neutral-hover
var(--sb-background-color-neutral-medium-hover)
var(--sb-color-grey-200)
bg-button-solid-neutral-pressed
var(--sb-background-color-neutral-medium-pressed)
var(--sb-color-grey-300)
bg-button-solid-critical
var(--sb-background-color-critical-vivid)
var(--sb-color-red-800)
bg-button-solid-critical-hover
var(--sb-background-color-critical-vivid-hover)
var(--sb-color-red-900)
bg-button-solid-critical-pressed
var(--sb-background-color-critical-vivid-pressed)
var(--sb-color-red-950)
bg-button-outline-primary-hover
var(--sb-background-color-primary-inverse-hover)
var(--sb-color-blue-50)
bg-button-outline-primary-pressed
var(--sb-background-color-primary-inverse-pressed)
var(--sb-color-blue-100)
bg-button-outline-neutral-hover
var(--sb-background-color-neutral-surface-hover)
var(--sb-color-grey-50)
bg-button-outline-neutral-pressed
var(--sb-background-color-neutral-surface-pressed)
var(--sb-color-grey-100)
bg-button-outline-critical-hover
var(--sb-background-color-critical-inverse-hover)
var(--sb-color-red-50)
bg-button-outline-critical-pressed
var(--sb-background-color-critical-inverse-pressed)
var(--sb-color-red-100)
bg-button-ghost-primary-hover
var(--sb-background-color-primary-inverse-hover)
var(--sb-color-blue-50)
bg-button-ghost-primary-pressed
var(--sb-background-color-primary-inverse-pressed)
var(--sb-color-blue-100)
bg-button-ghost-neutral-hover
var(--sb-background-color-neutral-surface-hover)
var(--sb-color-grey-50)
bg-button-ghost-neutral-pressed
var(--sb-background-color-neutral-surface-pressed)
var(--sb-color-grey-100)
bg-button-ghost-critical-hover
var(--sb-background-color-critical-inverse-hover)
var(--sb-color-red-50)
bg-button-ghost-critical-pressed
var(--sb-background-color-critical-inverse-pressed)
var(--sb-color-red-100)
inset-ring-button-outline-primary
var(--sb-border-color-primary)
var(--sb-color-blue-600)
inset-ring-button-outline-neutral
var(--sb-border-color-neutral-medium)
var(--sb-color-grey-600)
inset-ring-button-outline-critical
var(--sb-border-color-critical)
var(--sb-color-red-600)
rounded-button-primary
var(--sb-radius-md)
rounded-button-neutral
var(--sb-radius-md)
rounded-button-critical
var(--sb-radius-md)

Link

Class Value Preview
text-link-primary
var(--sb-text-color-primary-vivid)
var(--sb-color-blue-700)