Tokens and theming

Components only read tokens. Override the palette and a few dials after the import, and every component follows without a single file edit. Dark mode is one class.

@import './comwit-tokens.css';

:root {
  --brand: #0b68ba;        /* buttons, links, focus, selection */
  --brand-strong: #08528f;
  --radius-scale: 0.6;     /* every corner, one dial */
  --pill-radius: 12px;     /* buttons and chips stop being pills */
}

Try it

All tokens

Palette

--canvas

#ffffffApp shell App screen Pull to refresh Chat Chip Checkbox Radio group Button+1 more

--canvas-raised

#ffffffAlert Segmented control Data table Card

--canvas-overlay

#ffffffAutocomplete Select

--surface-subtle

#f4f5f7Chip Data table Button Badge Chat Empty state Segmented control Pager+4 more

--fill

#e9ebefApp bar Bottom nav Toast Date picker Time picker Month picker Calendar Autocomplete+4 more

--fill-strong

#dfe2e7Calendar

--ink

#0a0a0aApp bar Bottom nav Bottom sheet Chat Glass Toast Empty state Date picker+24 more

--ink-soft

#484848Bottom sheet Toast Empty state Accordion Dialog Sheet Card Table

--ink-muted

#6b6b6bChat Dropdown menu Toast Empty state Date picker Time picker Month picker Calendar+12 more

--ink-subtle

#9ca3afPull to refresh Date picker Time picker Month picker Calendar Pager Autocomplete Select+2 more

--ink-disabled

#999999Date picker Month picker Calendar Autocomplete

--brand

#3182f6Pull to refresh Chat Toast Date picker Time picker Month picker Calendar Segmented control+12 more

--brand-foreground

#ffffffChat Date picker Time picker Month picker Calendar Chip Checkbox Pager+6 more

--brand-strong

#1b64daDate picker Month picker Calendar Pager Button

--brand-ink

#0b2e6b

--brand-surface

#eff5ffToast Chip Table

--line

#e8e8e5Pull to refresh Chat Dropdown menu Alert Date picker Month picker Chip Autocomplete+7 more

--line-strong

#d8dadeChat Date picker Time picker Month picker Checkbox Radio group Autocomplete Select+6 more

Semantic

--background

var(--canvas)App shell App screen Pull to refresh Chat Chip Checkbox Radio group Button+1 more

--foreground

var(--ink)App bar Bottom nav Bottom sheet Chat Glass Toast Empty state Date picker+17 more

--card

var(--canvas-raised)Alert Segmented control Data table Card

--card-foreground

var(--ink)Alert Card

--popover

var(--canvas-overlay)Autocomplete Select

--popover-foreground

var(--ink)Bottom sheet Dropdown menu Popover Toast Popup Autocomplete Select Dialog+1 more

--primary

var(--brand)Pull to refresh Chat Toast Date picker Time picker Month picker Calendar Segmented control+12 more

--primary-foreground

var(--brand-foreground)Chat Date picker Time picker Month picker Calendar Chip Checkbox Pager+6 more

--primary-strong

var(--brand-strong)Date picker Month picker Calendar Pager Button

--primary-ink

var(--brand-ink)

--primary-surface

var(--brand-surface)Toast Chip Table

--secondary

var(--surface-subtle)Chip Data table Button Badge

--secondary-foreground

var(--ink)Chip Button Badge

--muted

var(--surface-subtle)Chat Empty state Segmented control Pager Tabs Table Avatar Skeleton

--muted-foreground

var(--ink-muted)Chat Dropdown menu Toast Empty state Date picker Time picker Month picker Calendar+12 more

--soft-foreground

var(--ink-soft)Bottom sheet Toast Empty state Accordion Dialog Sheet Card Table

--subtle-foreground

var(--ink-subtle)Pull to refresh Date picker Time picker Month picker Calendar Pager Autocomplete Select+2 more

--disabled-foreground

var(--ink-disabled)Date picker Month picker Calendar Autocomplete

--accent

var(--fill)App bar Bottom nav Toast Date picker Time picker Month picker Calendar Autocomplete+4 more

--accent-foreground

var(--ink)Autocomplete Select Button

--selected

var(--fill-strong)Calendar

--skeleton

var(--surface-subtle)Data table

--border

var(--line)Pull to refresh Chat Dropdown menu Alert Date picker Month picker Chip Autocomplete+7 more

--border-strong

var(--line-strong)

--input

var(--line-strong)Chat Date picker Time picker Month picker Checkbox Radio group Autocomplete Select+6 more

--ring

var(--brand)Date picker Month picker Calendar

--switch-thumb

#ffffffSwitch

--overlay

rgba(0, 0, 0, 0.5)Bottom sheet Popup Dialog Sheet

--surface-glass

rgba(255, 255, 255, 0.72)Data table

--shadow-card

var(--elevation-2)Segmented control Data table Tabs Card

--shadow-card-hover

var(--elevation-3)Autocomplete Select

Status

--success

#30a46cToast Chip

--success-foreground

#ffffffToast Chip

--success-surface

#e6f6ebAlert Chip Badge

--success-surface-foreground

#1c7549Alert Chip Badge

--success-border

#8eceaaAlert Chip

--warning

#f76b15Toast Chip

--warning-foreground

#431407Toast Chip

--warning-surface

#ffefd6Alert Chip Badge

--warning-surface-foreground

#b54500Alert Chip Badge

--warning-border

#f5ae73Alert Chip

--destructive

#e5484dDropdown menu Toast Date picker Chip Text field Autocomplete Form Editor+2 more

--destructive-foreground

#ffffffToast Chip Button

--destructive-strong

#c62a2fButton

--destructive-surface

#feebecAlert Chip Badge

--destructive-surface-foreground

#c62a2fAlert Chip Badge

--destructive-border

#f4a9aaAlert Chip

--info

#0090ffToast Chip

--info-foreground

#ffffffToast Chip

--info-surface

#e6f4feAlert Chip Badge

--info-surface-foreground

#0b68baAlert Chip Badge

--info-border

#8ec8f6Alert Chip

Glass

--glass-tint

rgb(233 235 239)

--glass-opacity

0.38

--glass-veil

#ffffff

--glass-edge

rgba(255, 255, 255, 0.55)

--glass-sheen

rgba(255, 255, 255, 0.9)

--glass-glow

rgba(255, 255, 255, 0.42)

--glass-shade

rgba(10, 10, 10, 0.08)

--glass-shadow

0 2px 4px rgba(16, 24, 40, 0.09), 0 12px 28px rg…

Shape

--radius

10px

--card-radius

16px

--sheet-radius

20px

--pill-radius

9999px

--radius-scale

1

--border-width

1px

--border-width-strong

2px

--focus-ring-width

2px

--focus-ring-offset

2px

--field-ring-width

3px

--spacing

0.25rem

Type

--text-scale

1

--tracking-scale

1

--display-font

var(--font-sans)

--weight-normal

400

--weight-medium

500

--weight-semibold

600

--weight-bold

700

Motion

--duration-instant

75ms

--duration-fast

150msBottom sheet Chat Toast Date picker Time picker Month picker Calendar Chip

--duration-base

200msBottom nav Pull to refresh Chat Checkbox Radio group Switch Accordion

--duration-slow

300msApp bar Bottom sheet Pull to refresh Checkbox

--duration-slower

500msBottom sheet

--press-scale

0.98

--press-scale-thumb

1.1

--ripple-opacity

0.35

--state-hover

0.05

--state-selected

0.1

--state-disabled

0.5

--state-disabled-content

0.4

Elevation

--elevation-0

none

--elevation-1

0 1px 2px rgba(16, 24, 40, 0.04)

--elevation-2

0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba…Segmented control Data table Tabs Card

--elevation-3

0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 28px rg…Autocomplete Select

--elevation-4

0 4px 12px rgba(16, 24, 40, 0.1), 0 16px 40px rg…

--elevation-5

0 8px 24px rgba(16, 24, 40, 0.12), 0 24px 64px r…

--elevation-raised

0 1px 2px rgba(16, 24, 40, 0.1), 0 1px 3px rgba(…

--elevation-message

0 4px 20px rgba(11, 46, 107, 0.06)

--elevation-panel

0 10px 30px rgba(11, 46, 107, 0.08)

Layers

--z-raised

10

--z-sticky

20

--z-appbar

40

--z-overlay

1000

--z-modal

1100

--z-dropdown

1200

--z-toast

1300

Sizes

--page-gutter

1rem

--menu-min-width

8rem

--picker-width

320px

--appbar-height

56px

--bottom-nav-height

64px