Skip to content

Token updates: surfaces, radii, borders, semantic spacing #9894

Description

@ryankeairns

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 [Draft][Epic] Modernize Kibana visual language — EUI tokens & component defaults #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).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions