elastic / elastic/eui

Add larger border radius tokens

Open
#9,807 7 comments 0 reactions 1 assignee Claimed by @acstll View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Requestor**
Agent Builder team (Kibana)

**Problem Statement**
The current `euiTheme.border.radius` scale only has two values — `small` and `medium`. This is insufficient for components that require larger border radii (12px, 16px), forcing plugin teams to maintain custom one-off constants outside of EUI.

**Proposed Solution**
Add two new tokens to the `euiTheme.border.radius` scale:

- `euiTheme.border.radius.l` → `12px`
- `euiTheme.border.radius.xl` → `16px`

This would extend the existing scale consistently:

| Token | Value |
|---|---|
| `euiTheme.border.radius.small` | `4px` ✅ exists |
| `euiTheme.border.radius.medium` | `6px` ✅ exists |
| `euiTheme.border.radius.l` | `12px` 🆕 |
| `euiTheme.border.radius.xl` | `16px` 🆕 |

**Use Case**
Agent Builder plugin in Kibana — specifically attachment panels in the chat sidebar, which use 12px and 16px corner radii per design specs.

**Value / Impact**
- Allows Kibana plugin teams to stay fully within the EUI design system instead of maintaining plugin-specific radius constants.
- Likely useful beyond Agent Builder — any component with cards, panels, or modals that follow modern rounded UI patterns would benefit.
- Reduces design inconsistency risk when EUI themes change, since hardcoded values don't update automatically.

**Urgency**
Medium. Not a hard blocker — a workaround exists (see below) — but the current approach creates tech debt we'd like to resolve as soon as the tokens are available.

**Do alternatives or workarounds exist?**
Yes. Currently using hardcoded pixel values (`12px`, `16px`) as local constants in the Agent Builder plugin. This works but ties the styling to values outside of EUI's token system, making theme alignment harder to maintain long-term.

**Related code or customizations**
- Kibana PR: https://github.com/elastic/kibana/pull/278196

**Additional context (Optional)**
This request came up during a PR review where the suggestion was raised to align border radius values with `euiTheme` constants rather than maintaining separate plugin-level constants.

**Designs or Specs (Optional)**

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.