Add larger border radius tokens
- 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
Assessment
This issue has not been assessed yet.