[Font styles] Quieter paragraph text + tighter EuiTitle tracking

[ryankeairns]

Summary

Typography quick wins for the Kibana visual refresh. Closes #9901 (sub-task of epic #9893). Does not close the broader token-updates track (surfaces, radii, borders, semantic spacing).

• Paragraph / body color (theme): Borealis colors.textParagraph (and legacy colors.text) softened toward subdued — light shade110 (#384861), dark shade40 (#B4C1D5). Root/html, ThemeProvider body, and anything that inherits (including bare EuiText) pick this up. textSubdued and textHeading are unchanged, so headings/labels stay punchier than body copy
• EuiText: keeps color: inherit (no component-level subdued paint). Pass color / use EuiTextColor when you need a named or custom color
• EuiTitle: tighter tracking via font.title.letterSpacing: -0.2px (Emotion + Sass)
• EuiText size: default size is now s to match font.body.scale / unstyled html; pass size="m" for the previous ~16px default

Commits (separable if blast radius is high)

1. Title letter-spacing
2. Soften textParagraph at the theme (replaces earlier EuiText-only subdued default)
3. Align default EuiText size with theme body (+ Jest snapshots/docs)

Color: theme token (not EuiText-only)

Earlier approach painted bare EuiText with textSubdued while leaving root/html on full paragraph. That broke inherit and made color="default" mean “not the default.”

This PR instead tones down textParagraph itself, so:

• html / ThemeProvider body use the quieter paragraph color
• Bare EuiText inherits that quieter base
• EuiTextColor / color="default" map to the same (now quieter) paragraph token
• textHeading remains the darker emphasis step for titles, tabs, labels, table headers, etc.

Size / body alignment — shipped

Concept	Actual
euiTheme.base	16 — spacing/grid unit, not body text (left alone)
Unstyled html / <p>	Already ~14px via font.body.scale: 's'
Prior default EuiText	~16px via size="m"

Mismatch was EuiText’s default vs theme body, not “base isn’t 14.” Aligning them means default size="s". Future global body bumps should change font.body.scale and keep EuiText’s default on that same scale step.

EUI-internal blast radius for size: small (few components omit size; many already use s). Consumer blast radius: intentional — bare <EuiText> in Kibana becomes 14px; use size="m" for the previous default.

Blast radius (honest)

• Global quieter body wherever textParagraph / root inherit is used (most UI copy, tables, forms, links with color="text", etc.)
• Global smaller body wherever bare EuiText omits size
• Title tracking slightly tighter everywhere euiTitle() / EuiTitle is used
• Out of scope: surfaces, borders, radii, tabs chrome, buttons, panels (beyond inherited text color)

Test plan

• Storybook: body / EuiText (no color) — quieter paragraph; still darker than textSubdued
• Storybook: EuiTitle / tabs / form labels — still use textHeading (darker than paragraph)
• Storybook: EuiTitle sizes — tighter tracking
• Storybook: EuiText default size matches unstyled body (~14px); size="m" restores ~16px
• Spot-check EmptyPrompt / ConfirmModal / page header description / tables
• Jest snapshots updated where needed
• Update VRT baselines after PR Storybook deploys

Screenshots

Before/after for titles + body text — add from Storybook once the PR preview is up (or local Storybook).

[Copilot]

Pull request overview

Typography-focused refinements to support the Kibana visual refresh by adjusting title tracking and aligning EuiText defaults (size + color) with the theme’s intended body typography.

Changes:

• Added a theme token for title letterSpacing and applied it to euiTitle()/EuiTitle (Emotion + Sass).
• Updated EuiText defaults: size="s" (~14px) and (when color is omitted) subdued body text color, with docs/story updates to explain opt-ins (size="m", color="default").
• Updated Jest snapshots for components impacted by the new defaults.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/website/docs/components/display/text.mdx	Docs updated to explain new EuiText default size and default subdued color behavior.
packages/eui/src/components/title/title.styles.ts	euiTitle() now includes theme-driven letterSpacing.
packages/eui/src/components/title/snapshots/title.styles.test.ts.snap	Snapshot updates for added letterSpacing in euiTitle() output.
packages/eui/src/components/text/types.ts	Updated color prop JSDoc to describe subdued default behavior.
packages/eui/src/components/text/text.tsx	Default size changed from m to s.
packages/eui/src/components/text/text.styles.ts	Base .euiText now sets subdued text color by default.
packages/eui/src/components/text/text.stories.tsx	Story defaults aligned with new EuiText default size/color behavior.
packages/eui/src/components/text/snapshots/text.test.tsx.snap	Snapshot updates for new default size="s" classnames.
packages/eui/src/components/selectable/selectable_list/snapshots/selectable_list.test.tsx.snap	Snapshot hash updates due to downstream style changes.
packages/eui/src/components/page/page_header/snapshots/page_header.test.tsx.snap	Snapshot updates reflecting EuiText default size change.
packages/eui/src/components/page/page_header/snapshots/page_header_content.test.tsx.snap	Snapshot updates reflecting EuiText default size change.
packages/eui/src/components/empty_prompt/snapshots/empty_prompt.test.tsx.snap	Snapshot updates reflecting EuiText default size change.
packages/eui/src/components/datagrid/body/cell/snapshots/data_grid_cell.test.tsx.snap	Snapshot updates reflecting EuiText default size change.
packages/eui/src/components/banner/snapshots/banner.test.tsx.snap	Snapshot hash updates due to title style changes.
packages/eui-theme-common/src/global_styling/variables/typography.ts	Theme typing extended to include optional title letterSpacing.
packages/eui-theme-borealis/src/variables/_typography.ts	Borealis theme sets font.title.letterSpacing: '-0.2px'.
packages/eui-theme-borealis/src/variables/_typography.scss	Borealis Sass title map now includes letter-spacing: -0.2px.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[weronikaolejniczak]

I have one blocking doubt regarding the change. If we call the prop value default but then we change it to not be the default, that's confusing. Should we rename it to "paragraph" or "fullContrast" or whatever instead?

Also, did we check the contrast in different scenarios? Changing to subdued could potentially cause contrast that doesn't match accessibility requirement in some cases, no?

[ryankeairns]

I have one blocking doubt regarding the change. If we call the prop value default but then we change it to not be the default, that's confusing. Should we rename it to "paragraph" or "fullContrast" or whatever instead?

Also, did we check the contrast in different scenarios? Changing to subdued could potentially cause contrast that doesn't match accessibility requirement in some cases, no?

Good catch — I pivoted away from the EuiText change for exactly that reason. EuiText inherits again, as it did before.

Quieter body text now comes from softening Borealis textParagraph. In short, I chose a color between the old textParagraph and textSubdued.

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 4c74c61

Failed CI Steps

• 🔨 EUI pull request test

History

• 💔 Build #7437 failed a66582b
• 💔 Build #7416 failed c81986a

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 4c74c61

Failed CI Steps

• 📷 Test visual regression

History

• 💔 Build #4761 failed 4c74c61
• 💔 Build #4743 failed a66582b
• 💔 Build #4705 failed c81986a
• 💔 Build #4704 failed c81986a