Token updates: surfaces, radii, borders, semantic spacing
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
Part of #9893
## Goal
Theme/token work only — no component behavior changes yet (except where a token change is the whole deliverable).
## Surfaces
Darken the main background for clearer contrast under the workspace, and add one optional secondary surface for inner steps (dashboard, secondary nav).
- **Change** main/canvas background — stronger contrast under the workspace (POC light: Borealis `#F6F9FC` → ~`#EAEDF5`; dark TBD)
- **No change** to plain, raised app/workspace (`#FFFFFF` / plain)
- **Add** secondary surface token for inner steps (e.g. dashboard, secondary nav) — POC ~`#F8F9FB`, or reuse subdued
## Borders & elevation
Prefer flat surfaces with gaps and quieter edges over heavy dividers and drop shadows; soft elevation only where needed (e.g. app workspace).
- **Quieter edges (open)** — keep real `1px` borders (optionally quieter color on `borderBaseSubdued` / `borderBasePlain`), **or** move edged surfaces to a **faux border** (`box-shadow: 0 0 0 1px …`). Pick one system; don’t ship both as parallel tracks. See epic #9893 open decision.
- **Use borders and dividers more sparingly** — fewer internal dividers is usage/guidance, not a new token; keep dividers in redesigned input controls (appends/prepends)
## Radii
Move off Borealis’s near-uniform ~4px toward clearer tiers — sharper on controls, softer on containers.
- **Control / form** — 8
- **Panel** — 12
- **Container** — 16
- **Full/pill** — TBD for filled/primary CTAs; probably not a general radius token
## Semantic spacing
Add intentional `spacing.*` aliases that map to existing `size.*` values — so usage says what the space is for, not a generic value. Keep raw `size.*` as the scale.
- **Stay on-scale** — prefer 8 / 12 / 16 / 24; avoid off-scale values like ~20 unless intentional
| Token | Maps to (propose) | Notes |
| --- | --- | --- |
| `spacing.panelInset` | `size.base` | EuiPanel / container padding |
| `spacing.pageInset` | `size.l` | Page / header padding |
| `spacing.controlsGap` | `size.s` | Space between related controls |
Dashboard / layout grid gaps stay product-side (not an EUI `gutter.*` token).
## Typography
Moved to #9901 (component defaults + title letter-spacing).
## Out of scope
Component default flips (panels, buttons, forms, tabs, tables) — see sibling issues.
## Open
See epic #9893 open decisions (theme vehicle, quieter edges / faux border, third surface name).
Contributor guide
Assessment
This issue has not been assessed yet.