Colors
The colours are CSS variables that change value with the theme. Components only use these variables.
The variables live on :root only, and
data-theme goes on <html>, not
on a child element. So the two swatch columns are drawn from the
hex values of both themes for comparison. Every Preview uses the
current theme.
Surfaces
The page, and the panels that sit on it.
Light
--bg#fcfcfc
--surface#fff
--subtle#f4f6f7
--overlayrgb(18 25 29 / 0.4)
Dark
--bg#0d1316
--surface#12191d
--subtle#182126
--overlayrgb(0 0 0 / 0.6)
Actions and emphasis
Main and secondary text, and the one accent for links, the primary button and focus only. The default button is an outline with no fill of its own.
Light
--fg#12191d
--muted#5f6e75
--accent#2b7f93
--on-accent#fff
Dark
--fg#e7eef0
--muted#8b9ba2
--accent#6cc0d3
--on-accent#0d1316
Status
Each status is a -bg and -fg pair. Use
them together for a light fill with dark text (badge, alert), or
use -fg alone for text, icons and bars. progress Each
status is a soft fill and a dark text pair.
<div class="stack" data-direction="row" data-gap="sm">
<span class="badge" data-variant="ok">Paid</span>
<span class="badge" data-variant="warning">Review</span>
<span class="badge" data-variant="danger">Cancelled</span>
<span class="badge" data-variant="info">Shipping</span>
<span class="badge">Draft</span>
</div>Light
--ok-bg#e4f5ec
--ok-fg#17724a
--warning-bg#fdf3dc
--warning-fg#8a5a00
--danger-bg#fde8e8
--danger-fg#b42323
--info-bg#e3f0fb
--info-fg#1f5f99
--neutral-bg#eceff1
--neutral-fg#4a585e
Dark
--ok-bg#12301f
--ok-fg#6fd3a0
--warning-bg#33270f
--warning-fg#f0c060
--danger-bg#3a1717
--danger-fg#f08a8a
--info-bg#12263a
--info-fg#7fb8ea
--neutral-bg#1e292f
--neutral-fg#a9b8be
Lines and fields
Form fields have no colour variables of their own. They use
--line for the border, --surface for the
fill and a 2px --accent focus ring, like every
element.
Light
--lineField border#e3e8ea
--surfaceField fill#fff
--accentFocus border and ring#2b7f93
--danger-fgInvalid border#b42323
--subtleDisabled fill#f4f6f7
Dark
--lineField border#25333a
--surfaceField fill#12191d
--accentFocus border and ring#6cc0d3
--danger-fgInvalid border#f08a8a
--subtleDisabled fill#182126
Charts
Tsunami has no chart colour variables of its own. A
chart takes the accent and the status
-fg colours in turn. For simple comparison bars, use
progress with --fg and the status
-fg colours.
<div class="stack" data-gap="sm">
<label for="ch-1">Storefront $18,240</label>
<progress id="ch-1" class="progress" value="182400" max="250000">73%</progress>
<label for="ch-2">Marketplace $9,625</label>
<progress id="ch-2" class="progress" data-variant="ok" value="96250" max="250000">39%</progress>
<label for="ch-3">Refunds $1,290</label>
<progress id="ch-3" class="progress" data-variant="danger" value="12900" max="250000">5%</progress>
</div>Sidebar
The sidebar and subnav reuse the page variables:
--subtle for the fill and
--neutral-bg for the current and hovered items.
Light
--subtleSidebar fill#f4f6f7
--neutral-bgCurrent and hover#eceff1
--lineRight border#e3e8ea
--mutedGroup labels, icons#5f6e75
--accentfocus ring#2b7f93
Dark
--subtleSidebar fill#182126
--neutral-bgCurrent and hover#1e292f
--lineRight border#25333a
--mutedGroup labels, icons#8b9ba2
--accentfocus ring#6cc0d3
States of each colour
Each state as the components draw it. There is no separate
:active colour; it uses the hover colour. Hover and
press Tab in the Preview to try it.
<div class="stack">
<div class="stack" data-direction="row" data-gap="sm">
<button type="button" class="btn" data-variant="primary">Save</button>
<button type="button" class="btn">Export</button>
<button type="button" class="btn" data-variant="ghost">Cancel</button>
<button type="button" class="btn" data-variant="danger">Delete</button>
<button type="button" class="btn" disabled>Disabled</button>
</div>
<div class="stack" data-direction="row">
<a href="#">View order</a>
<a class="link" data-variant="muted" href="#">History</a>
</div>
<div class="stack docs-narrow" data-gap="sm">
<div class="field">
<label for="st-1">SKU</label>
<input id="st-1" type="text" value="TS-1042" />
</div>
<div class="field">
<label for="st-2">Price</label>
<input id="st-2" type="text" value="-$90" aria-invalid="true" aria-describedby="st-2-hint" />
<small id="st-2-hint">Price must be above 0</small>
</div>
<div class="field">
<label for="st-3">Store ID</label>
<input id="st-3" type="text" value="emma-01" disabled />
</div>
</div>
</div>| Colour · state | Value | Used in |
|---|---|---|
| Accent · Rest | --accent + --on-accent |
Primary button |
| Accent · Hover | filter: brightness(0.94) |
Primary button |
| Accent · Text | --accent, underline on hover |
Links |
| Accent · Focus | outline 2px --accent |
Every focusable element, field border |
| Outline · Rest |
--surface + --line border +
--fg
|
Default button |
| Outline · Hover | --subtle |
Default and ghost buttons |
| Muted · Hover | --muted → --fg |
Muted link |
| Neutral · Hover / current | --neutral-bg |
Sidebar and subnav items |
| Danger · Rest | --danger-fg |
Danger button, invalid field border |
| Danger · Hover | --danger-bg |
Danger button |
| Ok / warning / info / danger · Soft | --*-bg + --*-fg |
badge, alert |
| Ok / warning / info / danger · Text | --*-fg |
Stat, progress, icons |
| All · Disabled |
opacity: 0.5 (buttons),
--subtle (field)
|
Buttons, fields |
CSS variables
| Variable | Light / Dark | Used for |
|---|---|---|
--bg |
#fcfcfc / #0d1316 |
Page background |
--surface |
#fff / #12191d |
Cards, inputs, dialogs, popovers, dropdowns |
--subtle |
#f4f6f7 / #182126 |
Quiet fills: sidebar, button hover, code, disabled fields |
--fg |
#12191d / #e7eef0 |
Main text, default progress bar |
--muted |
#5f6e75 / #8b9ba2 |
Secondary text, labels, table headers |
--line |
#e3e8ea / #25333a |
1px borders and dividers |
--accent |
#2b7f93 / #6cc0d3 |
Links, primary buttons, focus ring, checked checkboxes |
--on-accent |
#fff / #0d1316 |
Text on an accent fill |
--ok-bg |
#e4f5ec / #12301f |
Success fill |
--ok-fg |
#17724a / #6fd3a0 |
Success text and icons |
--warning-bg |
#fdf3dc / #33270f |
Warning fill |
--warning-fg |
#8a5a00 / #f0c060 |
Warning text |
--danger-bg |
#fde8e8 / #3a1717 |
Error fill, danger button hover |
--danger-fg |
#b42323 / #f08a8a |
Error text, invalid field border |
--info-bg |
#e3f0fb / #12263a |
Info fill |
--info-fg |
#1f5f99 / #7fb8ea |
Info text |
--neutral-bg |
#eceff1 / #1e292f |
Neutral fill: default badge, active sidebar item |
--neutral-fg |
#4a585e / #a9b8be |
Neutral text: default badge |
--overlay |
rgb(18 25 29 / 0.4) / rgb(0 0 0 / 0.6) |
Backdrop behind dialogs and drawers |