elastic / elastic/eui

Token updates: surfaces, radii, borders, semantic spacing

Open
#9,894 2 comments 0 reactions 1 assignee Claimed by @mgadewoll View on GitHub
visual refresh
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.