elastic / elastic/eui

[Draft][Epic] Modernize Kibana visual language — EUI tokens & component defaults

Open
#9,893 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

## Summary

Expanded change list from the design exploration POC for **scope discussion**. This epic covers **EUI-side** work only: Borealis-delta tokens, then light component default shifts.

**Not planned / prioritized yet.** Values and behaviors below are **illustrative** of the proposed direction; they are not locked.

Kibana chrome/layout (nav, app header, headerless global header, product spacing props) is **out of scope here** — Shared UX / apps separately.

## Dependency

1. **Token updates** first
2. Component issues can proceed in parallel once tokens exist

## Sub-tasks

See below

## Open decisions

1. **Theme / delivery vehicle** — new Borealis-derived theme vs iterate Borealis in place vs gated rollout (prefer token-driven usage; avoid long-lived `theme === …` forks)
2. **Quieter edges** — keep real `1px` borders (optionally quieter color), or move edged surfaces (esp. Panel / forms) to a **faux border** (`box-shadow: 0 0 0 1px …`) for a softer edge. Pick one edge system.
3. **`EuiText` default → subdued** — yes/no; EuiText only vs also `EuiTextColor`’s `default`
4. **Third surface token** — new semantic (e.g. `backgroundBaseRecessed` / `subtle`) vs reuse subdued
5. **One size of buttons/inputs (small)** — adopt or keep multiple sizes
6. **EUI spacing migration** — wire component padding/gaps to `spacing.*` aliases (e.g. `spacing.panelInset`, `spacing.pageInset`, `spacing.controlsGap`) and clean up legacy padding props in foundation vs follow-on

## Related (not EUI)

- Workspace on canvas, nav + side panel, app header, headerless primary nav
- Dashboard / Discover / query-bar spacing and surface tweaks

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.