[Theme tokens] Recessed/subdued surfaces + control/panel/frame radii

[ryankeairns]

Summary

Related to #9894 — token foundation for surfaces and radii only (borders and semantic spacing deferred).

Surfaces

Token	Light (this branch)	Light (main)	Dark (this branch)	Dark (main)
colors.body	#ECF1F9 (shade15)	#F6F9FC (shade10)	#07101F (plainDark)	#07101F (plainDark)
colors.backgroundBaseRecessed	#F6F9FC (shade10)	—	#07101F (plainDark)	—
colors.backgroundBaseSubdued	#F6F9FC (shade10)	#F6F9FC (shade10)	#0B1628 (shade145)	#07101F (plainDark)
colors.backgroundBasePlain	#FFFFFF (plainLight)	#FFFFFF (plainLight)	#111C2C (shade140)	#0B1628 (shade145)

Why backgroundBaseRecessed (vs subdued)

Recessed has a few specific use cases as a layout well in apps such as Dashboards and Workflows in dark mode. Recessed is not a strong light mode visual need today. Using it in both places keeps one semantic token for that well so dark can sit on plainDark (with body) while light can stay on shade10 with Subdued — same values for now, separate tokens if they need to diverge later.

• Dark: Recessed = plainDark; Subdued = shade145. Using Subdued for the well collapses the stack (weaker sunken panel). Remapping Subdued to plainDark would flatten all secondary UI into chrome.
• Light: Recessed and Subdued both use shade10 for now — same value, different intent — so light can diverge later without migrating consumers.

Light surfaces	Dark surfaces

Radii (additive; legacy small/medium stay 4px)

• border.radius.inline — 4px
• border.radius.control — 8px
• border.radius.panel — 12px
• border.radius.frame — 16px (app/layout chrome; e.g. framed shell)

No component default flips in this PR — consumers / follow-ups wire to the new tokens.

Out of scope (parked on #9894)

• Border color / hairline
• Semantic spacing aliases
• Exploration overrides (borderSubdued / textSubdued alpha, textNav, shellShadow)

Test plan

• Docs token tables show recessed + radius tiers (inline / control / panel / frame)
• Light/dark: body / recessed / subdued / plain match table above
• Existing border.radius.small/medium still 4px
• Changelog packages/eui/changelogs/upcoming/9903.md

[Copilot]

Pull request overview

Adds new theme foundation tokens for Borealis surfaces (canvas/subdued/plain) and new radius tiers (control/panel/container), plus docs updates so consumers can discover and start using the new tokens without changing component defaults.

Changes:

• Introduces colors.backgroundBaseCanvas and updates Borealis light/dark background + colors.body mappings accordingly.
• Adds border.radius.control|panel|container tokens (8/12/16px) to Borealis + docs tables.
• Extends Borealis primitive/semantic color palettes with new shade steps used by the new background tokens.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx	Updates docs deprecation guidance for colors.body to reference the new canvas/surface tokens.
packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx	Adds backgroundBaseCanvas to the background token table.
packages/website/docs/getting-started/theming/tokens/borders/border_radii_table.tsx	Adds new radius tiers to the border radii token table.
packages/eui-theme-common/src/global_styling/variables/colors.ts	Extends the shared background token type with backgroundBaseCanvas.
packages/eui-theme-common/src/global_styling/variables/borders.ts	Extends the shared border radius type with control, panel, and container.
packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts	Adds new semantic shade keys used by the updated background tokens.
packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss	Adds corresponding Sass semantic shade variables and new dark surface Sass variables.
packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts	Adds new primitive palette entries for canvas/sub-surface/raised dark surfaces and new light shade steps.
packages/eui-theme-borealis/src/variables/colors/_colors_light.ts	Wires new light-mode backgroundBaseCanvas/backgroundBaseSubdued and updates colors.body.
packages/eui-theme-borealis/src/variables/colors/_colors_light.scss	Wires new light-mode Sass background variables for canvas/subdued and updates deprecated page background var.
packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts	Wires new dark-mode backgroundBaseCanvas/backgroundBaseSubdued/backgroundBasePlain and updates colors.body.
packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss	Wires new dark-mode Sass background variables for canvas/subdued/plain and updates deprecated page background var.
packages/eui-theme-borealis/src/variables/_borders.ts	Adds new computed radius tiers (8/12/16px) to the Borealis theme object.
packages/eui-theme-borealis/src/variables/_borders.scss	Adds Sass variables for the new radius tiers.

---

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

[Copilot]

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated no new comments.

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 48795cc

History

• 💚 Build #7591 succeeded 598f2c5
• 💚 Build #7590 succeeded 4a08970
• 💚 Build #7539 succeeded 2233740
• 💔 Build #7511 failed 4c75500
• 💔 Build #7502 failed 2b0f27c
• 💚 Build #7457 succeeded 7e0d553

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 48795cc

Failed CI Steps

• 📷 Test visual regression

History

• 💔 Build #4954 failed 598f2c5
• 💔 Build #4952 failed 4a08970
• 💔 Build #4887 failed 2233740
• 💔 Build #4886 failed 2233740
• 💔 Build #4855 failed 4c75500