[Theme] Redesign: Implement component updates - part #1

[mgadewoll]

Summary

Important

This PR is based on #9968 which needs to merge frist.
This PR merges into a feature branch.

Note

This PR is the part 2 of implementing changes for a redesign as part of #9893.
It combines and adjusts changes from the following poc PRs:

• [EuiLink] Quieter default: paragraph text, dotted underline, primary on hover #9904
• [Font styles] Quieter paragraph text + tighter EuiTitle tracking #9900
• [EuiTab] Remove inline padding and update text colors #9878

• What: Updated styles and default prop values to implement redesign changes.
• Why: The updates are part of the redesign to modernize the UI. Implements [Typography] Quieter default text, tighter EuiTitle tracking, align EuiText size with body #9901.
• How:
  • Updated EUiLink's default color prop value to text and updated hover/focus styles
  • Updated EuiTitle to use euiTheme.font.title.letterSpacing
  • Updated EuiText's size default value to s
  • Updated Euitab's text color and font weight and removed inline padding

API Changes

component / parent	prop / child	change	description
EuiLink	color	updated	Changed the default value to text instead of primary
EuiText	size	updated	Changed the default value to s instead of m

Screenshots

Description	Before (production)	Before (feature branch)	After
EuiLink (default)
EuiLink (primary)
EuiLink (hover)
EuiLink (focus)
EuiText (default)
EuiTab

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None / 🟢 Low / 🟡 Moderate / 🔴 High

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

• verify the components apply the redesign as expected (design review)
• verify there are no unexpected regressions for the updated components

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: d9bcffe
• Documentation website
• Storybook
• ❌ Visual regression tests failed (view diff table)

Failed CI Steps

• 📷 Test visual regression #1
• 📷 Test visual regression #2
• 📷 Report visual regression

History

cc @mgadewoll

[elastic-vault-github-plugin-prod]

📷 390 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiautorefresh (2 differences)

Story	Diff %	Before	After	Diff
playground desktop	0.10%
playground mobile	0.41%

euibanner (12 differences)

Story	Diff %	Before	After	Diff
container sizes desktop	0.08%
filled primary action desktop	0.18%
kitchen sink custom children desktop	0.16%
playground desktop	0.18%
with actions desktop	0.18%
with children desktop	0.16%
container sizes mobile	0.33%
filled primary action mobile	0.27%
kitchen sink custom children mobile	0.42%
playground mobile	0.32%
with actions mobile	0.24%
with children mobile	0.28%

euibasictable (18 differences)

Story	Diff %	Before	After	Diff
dark mode desktop	0.04%
expanded nested table desktop	0.11%
expanded nested table without background desktop	0.12%
expanded row desktop	0.12%
high contrast mobile desktop	0.04%
large expanded row desktop	0.05%
marked row desktop	0.09%
panelled desktop	0.12%
playground desktop	0.09%
dark mode mobile	0.15%
expanded nested table mobile	0.15%
expanded nested table without background mobile	0.16%
expanded row mobile	0.17%
high contrast mobile mobile	0.16%
large expanded row mobile	0.12%
marked row mobile	0.14%
panelled mobile	0.17%
playground mobile	0.14%

euibetabadge (2 differences)

Story	Diff %	Before	After	Diff
title alignment desktop	5.26%
title alignment mobile	10.02%

euibreadcrumbs (8 differences)

Story	Diff %	Before	After	Diff
application dark mode desktop	0.36%
application desktop	0.36%
application high contrast dark desktop	0.33%
application high contrast desktop	0.33%
application dark mode mobile	0.07%
application high contrast dark mobile	0.06%
application high contrast mobile	0.06%
application mobile	0.07%

euicallout (18 differences)

Story	Diff %	Before	After	Diff
kitchen sink custom children desktop	0.14%
kitchen sink desktop	n/a
kitchen sink high contrast desktop	n/a
playground desktop	0.27%
with actions desktop	0.27%
with custom children desktop	0.22%
with popover desktop	0.34%
with tooltips desktop	0.34%
wrapper kitchen sink desktop	0.25%
kitchen sink custom children mobile	0.37%
kitchen sink high contrast mobile	n/a
kitchen sink mobile	n/a
playground mobile	1.06%
with actions mobile	0.52%
with custom children mobile	0.85%
with popover mobile	0.85%
with tooltips mobile	0.61%
wrapper kitchen sink mobile	0.46%

euicard (2 differences)

Story	Diff %	Before	After	Diff
playground desktop	0.08%
playground mobile	0.30%

euicheckboxgroup (4 differences)

Story	Diff %	Before	After	Diff
high contrast desktop	0.11%
playground desktop	0.11%
high contrast mobile	0.44%
playground mobile	0.44%

euicollapsiblenav (4 differences)

Story	Diff %	Before	After	Diff
full header pattern desktop	1.11%
accordion desktop	0.50%
full header pattern mobile	0.64%
accordion mobile	1.93%

euicolorpicker (6 differences)

Story	Diff %	Before	After	Diff
high contrast dark mode desktop	0.16%
high contrast desktop	0.09%
inline with all elements desktop	0.06%
high contrast dark mode mobile	0.16%
high contrast mobile	0.09%
inline with all elements mobile	0.06%

euicombobox (4 differences)

Story	Diff %	Before	After	Diff
groups desktop	0.05%
nested options groups desktop	0.05%
groups mobile	0.19%
nested options groups mobile	0.19%

euiconfirmmodal (2 differences)

Story	Diff %	Before	After	Diff
playground desktop	0.38%
playground mobile	1.31%

euicontextmenu (10 differences)

Story	Diff %	Before	After	Diff
in popover desktop	0.05%
in scrollable popover desktop	0.05%
playground desktop	0.78%
scrollable list desktop	0.09%
playground desktop	0.35%
in popover mobile	0.18%
in scrollable popover mobile	0.18%
playground mobile	0.78%
scrollable list mobile	0.36%

Table truncated - see the Buildkite annotation for the full diff.

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: d9bcffe

Failed CI Steps

• 🔨 EUI pull request test

History

cc @mgadewoll