elastic / elastic/eui

[EuiLink][EuiBasicTable][EuiDataGrid] Quieter interactive elements

Open
#9,899 0 comments 0 reactions 1 assignee Claimed by @mgadewoll View on GitHub
visual refresh
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

Part of #9893

Related interaction pattern: #9898 (EuiTab)

## Goal

Make interactive text read closer to body copy by default — less “everything is a blue link” — so **primary CTAs stand out**. Affordance stays clear on hover/focus. This is a **global** treatment (not table-scoped); denser surfaces like tables and grids benefit as a side effect.

Same idea as the tabs refresh: dark `textParagraph` at rest; primary blue when the control is “on” (tabs: selected; links: hover/focus).

## Scope

### EuiLink — default interaction
- **At rest** — `textParagraph` (dark body text), not solid primary blue
- **Underline** — dotted at rest
- **Hover / focus** — primary blue (`textPrimary`); keep accessible focus ring
- **Semantic colors** — `subdued`, `danger`, `success`, etc. stay as intentional variants

### Simplify `color` API
Today `primary` (always blue) and `text` (always paragraph) are two static paints. After this change they describe the **same** interactive default:

- Combine `text` and `primary` into **one default `color` value** whose behavior is paragraph at rest → primary on hover/focus
- Deprecate or alias the redundant name so consumers aren’t choosing between two options that mean the same thing
- Open: keep the prop named `primary` (familiar) vs rename the default (e.g. `default` / omit) — pick one; don’t leave both as distinct looks

### Related / follow-ons (optional slices)
- **Transparent / quieter row backgrounds** in BasicTable / DataGrid — still open (default flip vs `hasBackground` opt-in); not blocked on the link restyle
- Other “looks like a link but isn’t `EuiLink`” surfaces — audit as they show up; prefer `EuiLink` or shared link CSS

## Already shipped
- [#9902](https://github.com/elastic/eui/pull/9902) — quieter default **row action / cell action icons** (BasicTable + DataGrid); does not close this issue

## Out of scope
- Token foundation (surfaces, radii, borders) — #9894 / #9903
- Typography body/title defaults — #9901 / #9900
- Button pill / control radius wiring — #9896
- Tab label colors themselves — #9898 (shared principle, separate PR)

## Notes
- High consumer blast radius: default `EuiLink` is `color="primary"` everywhere. One deliberate default + VRT; not per-app forks.
- Tables no longer need a special “cell link” exception if global `EuiLink` matches the desired look.
- Quieter links reserve blue for real CTAs and rare always-emphasized links (if we still need an always-blue escape hatch, make it explicit — not the default `primary`/`text` split).

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.