[Theme] Redesign: Implement color, border-radius and text tokens updates - #9968
[Theme] Redesign: Implement color, border-radius and text tokens updates#9968mgadewoll wants to merge 21 commits into
Conversation
github-actions
Bot
added
the
community contribution
mgadewoll
removed
the
community contribution
da3c200 to
c20d9d8
Compare
📷 1075 visual difference(s) foundLook 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 revieweuiaccordion (2 differences)
euiaspectratio (2 differences)
euiautorefresh (4 differences)
euiautosizer (2 differences)
euiavatar (2 differences)
euibadge (12 differences)
euibanner (12 differences)
euibasictable (22 differences)
euibeacon (2 differences)
euibetabadge (4 differences)
euibottombar (2 differences)
euibreadcrumbs (12 differences)
euibutton (2 differences)
euibuttonempty (2 differences)
euibuttongroup (38 differences)
Table truncated - see the Buildkite annotation for the full diff. |
7e0c2c9 to
745e6da
Compare
- sets text tokens to previous value to ensure stronger contrast in HCM mode
… instead of app level
Co-authored-by: Cursor <cursoragent@cursor.com>
…y/font-settings.mdx
745e6da to
4599139
Compare
📷 1071 visual difference(s) foundLook 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 revieweuiaccordion (2 differences)
euiaspectratio (2 differences)
euiautorefresh (4 differences)
euiautosizer (2 differences)
euiavatar (2 differences)
euibadge (12 differences)
euibanner (12 differences)
euibasictable (22 differences)
euibeacon (2 differences)
euibetabadge (4 differences)
euibottombar (2 differences)
euibreadcrumbs (12 differences)
euibutton (2 differences)
euibuttonempty (2 differences)
euibuttongroup (38 differences)
Table truncated - see the Buildkite annotation for the full diff. |
|
buildkite test this |
📷 1071 visual difference(s) foundLook 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 revieweuiaccordion (2 differences)
euiaspectratio (2 differences)
euiautorefresh (4 differences)
euiautosizer (2 differences)
euiavatar (2 differences)
euibadge (12 differences)
euibanner (12 differences)
euibasictable (22 differences)
euibeacon (2 differences)
euibetabadge (4 differences)
euibottombar (2 differences)
euibreadcrumbs (12 differences)
euibutton (2 differences)
euibuttonempty (2 differences)
euibuttongroup (38 differences)
Table truncated - see the Buildkite annotation for the full diff. |
There was a problem hiding this comment.
🟡 Changes recommended
The new font.title.letterSpacing token is documented as a title default but is not currently applied by EuiTitle’s Emotion styling and is typed as optional, creating inconsistent/undefined behavior.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR is part of the calm-down redesign feature work and updates EUI’s theme token foundation (primarily Borealis) by introducing a recessed surface token, adding semantic border radius tiers, and adjusting key text/background color tokens (with HCM overrides), along with associated docs, snapshots, and changelogs.
Changes:
- Added
colors.backgroundBaseRecessedand documented it in token tables. - Added semantic
border.radius.{inline,control,panel,frame}tokens and deprecated legacysmall/medium. - Added
font.title.letterSpacingand updated text/background token values (incl. HCM overrides to retain prior contrast).
File summaries
| File | Description |
|---|---|
| packages/website/docs/getting-started/theming/tokens/typography/preview_font_settings.tsx | Adds previews for title weight and letter-spacing tokens |
| packages/website/docs/getting-started/theming/tokens/typography/font-settings.mdx | Documents new title-related typography tokens |
| packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx | Adds backgroundBaseRecessed to docs table; fixes a token label |
| packages/website/docs/getting-started/theming/tokens/borders/index.mdx | Updates border radius guidance toward semantic tokens |
| packages/website/docs/getting-started/theming/tokens/borders/border_radii_table.tsx | Adds semantic radius tokens to the radii table |
| packages/release-cli/kibana-prep-commits | Adds Kibana prep commit references for integration |
| packages/eui/src/services/theme/snapshots/provider.test.tsx.snap | Updates snapshots impacted by theme/CSS output changes |
| packages/eui/src/global_styling/mixins/snapshots/_button.test.ts.snap | Updates button mixin snapshots for new text colors |
| packages/eui/src/components/text/snapshots/text.styles.test.ts.snap | Updates text style snapshots for new text token values |
| packages/eui/src/components/form/form.styles.test.tsx | Updates form style expectations for new colors/backgrounds |
| packages/eui/src/components/collapsible_nav/collapsible_nav_group/snapshots/collapsible_nav_group.test.tsx.snap | Updates snapshots impacted by styling output changes |
| packages/eui/changelogs/upcoming/9968.md | Adds changelog entry for the token updates and deprecations |
| packages/eui/.storybook/decorator.tsx | Aligns Storybook iframe background with theme surface tokens |
| packages/eui-theme-common/src/global_styling/variables/typography.ts | Extends theme typings with title letter-spacing |
| packages/eui-theme-common/src/global_styling/variables/colors.ts | Adds backgroundBaseRecessed to background color typings |
| packages/eui-theme-common/src/global_styling/variables/borders.ts | Adds semantic radius typings; marks small/medium deprecated |
| packages/eui-theme-common/changelogs/upcoming/9968.md | Changelog for new theme-common typings and deprecations |
| packages/eui-theme-borealis/src/variables/colors/_colors_light.ts | Updates light mode text/body/background tokens; adds recessed surface |
| packages/eui-theme-borealis/src/variables/colors/_colors_light.scss | Updates SCSS variables for light mode (incl. recessed + body) |
| packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts | Updates dark mode text/background tokens; adds recessed surface |
| packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss | Updates SCSS variables for dark mode (incl. recessed + emptyShade) |
| packages/eui-theme-borealis/src/variables/_typography.ts | Adds font.title.letterSpacing to Borealis theme |
| packages/eui-theme-borealis/src/variables/_typography.scss | Adds letter-spacing into SCSS title maps across sizes |
| packages/eui-theme-borealis/src/variables/_overrides.ts | Adds HCM overrides for text and textParagraph contrast |
| packages/eui-theme-borealis/src/variables/_borders.ts | Adds semantic radii values to Borealis theme |
| packages/eui-theme-borealis/src/variables/_borders.scss | Adds SCSS semantic radius variables |
| packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts | Updates generated JSON typings for new tokens |
| packages/eui-theme-borealis/src/eui_theme_borealis_light.json | Updates generated light JSON tokens (colors/radii) |
| packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts | Updates generated JSON typings for new tokens |
| packages/eui-theme-borealis/src/eui_theme_borealis_dark.json | Updates generated dark JSON tokens (colors/radii) |
| packages/eui-theme-borealis/changelogs/upcoming/9968.md | Adds Borealis changelog entry for token updates/deprecations |
Review details
- Files reviewed: 17/1102 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
💚 Build Succeeded
History
cc @mgadewoll |
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
There was a problem hiding this comment.
Found some blocking changes as well as some nits but overall tested and it looks good 👍🏻
It is a good battle test for the VRT 😄 (which they failed)
nit:
I think this needs changing, right? packages/website/docs/getting-started/theming/tokens/colors/special_colors_table.tsx
There was a problem hiding this comment.
blocking: I think we're missing an update to shade130 -> euiColorShade110 (light) and shade30 -> euiColorShade40 (dark)? Only in the Sass files, JS layer is 🆗
Maybe semi-blocking because who gives a.. about Sass
There was a problem hiding this comment.
Good catch, I missed those. This manual workflow is really error prone 🫠
Updated in 2d76cc3
| https://github.com/elastic/kibana/pull/288032/commits/8ce9406a13f21821ae7c74ab48bc798299a242a4 | ||
| https://github.com/elastic/kibana/pull/288032/commits/5a4fbee09edf651ff604ed961198a1addeb302a2 |
There was a problem hiding this comment.
no action required: thanks for running this against Kibana already and prepping the changes 😄
There was a problem hiding this comment.
nit: I don't think we need to wrap with Global, do we? It just needs to be under the provider. So this could be simplified to:
<EuiProvider>
<Global />
<div id="story-wrapper" ref={setPortalSibling} css={writingModeCss}>
{portalInsert && children}
</div>
</EuiProvider>This way is also okay, it's just slightly more verbose for no value?
There was a problem hiding this comment.
Sure we can make it a bit simpler by not wrapping the content 👍
Updated in 0fd90d3
| "euiPanelBorderRadiusModifiers": { | ||
| "borderRadiusNone": 0, | ||
| "borderRadiusMedium": "4px" | ||
| "borderRadiusMedium": "12px" | ||
| }, |
There was a problem hiding this comment.
blocking: Hmmm TS and Sass add the tokens but JSON also changes the old tokens on top of that. I don't think this is expected, right?
euiFormControlBorderRadius as well.
There was a problem hiding this comment.
You're right, I merged too many things too early 🫠 We're not actually using the new tokens yet so the inherited values shouldn't be updated yet.
Reverted in 2d76cc3
There was a problem hiding this comment.
blocking: We need to apply the letter spacing change to JSON as well, no?
There was a problem hiding this comment.
Yes, absolutely. Thanks for the catch!
Added in 2d76cc3
There was a problem hiding this comment.
doubt: Should we mention the HCM override?
There was a problem hiding this comment.
My thinking here was that HCM keeps the previous state so it wouldn't be a change that needs mentioning? 🤔
But I don't mind adding it if you think it's valueable.
There was a problem hiding this comment.
Hmmmm I guess you're right, nothing changes in that regard, I was just thinking this might influence the contrast and for consumers to be aware 🤔
Let's leave it as is
|
|
||
| export interface _EuiThemeBorderRadiusValues { | ||
| /** | ||
| * @deprecated - use a semantic token instead (e.g. `inline`, `control` or `panel`) |
There was a problem hiding this comment.
nit: Missing frame? Same below.
There was a problem hiding this comment.
I kinda did it on purpose because frame is the one that should be used the least. But I guess for correctness we should add it anyway.
Updated in fd60056
Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>
💚 Build Succeeded
History
cc @mgadewoll |
Summary
Important
This PR merges into a feature branch.
Note
This PR is the part 1 of implementing changes for a redesign as part of #9893.
It combines token specific changes from the following poc PRs:
euiTheme.colors.backgroundBaseRecessedtoken (to be used as intermediate layer between page layer and raised surfaces)euiTheme.border.radius.inlineeuiTheme.border.radius.controleuiTheme.border.radius.paneleuiTheme.border.radius.frameeuiTheme.border.radius.smallandeuiTheme.border.radius.mediumeuiTheme.font.title.letterSpacingtokeneuiTheme.colors.backgroundBaseSubduedeuiTheme.colors.backgroundBasePlaineuiTheme.colors.bodyeuiTheme.colors.textParagrapheuiTheme.colors.texteuiTheme.colors.emptyShade(legacy value, aligned withbackgroundBasePlain)euiTheme.colors.textParagraphandeuiTheme.colors.textto use the previous more contrasted color valueAPI Changes
Added
colors.backgroundBaseRecessed#F6F9FC(shade10), Dark:#07101F(plainDark)border.radius.inline4pxborder.radius.control8pxborder.radius.panel12pxborder.radius.frame16pxfont.title.letterSpacing-0.2pxUpdated
after)colors.body#F6F9FC(shade10)#ECF1F9(shade15)#07101F(plainDark)#07101F(plainDark)colors.backgroundBaseSubdued#F6F9FC(shade10)#F6F9FC(shade10)#07101F(plainDark)#0B1628(shade145)colors.backgroundBasePlain#FFFFFF(plainLight)#FFFFFF(plainLight)#0B1628(shade145)#111C2C(shade140)euiTheme.colors.emptyShade#FFFFFF(plainLight)#FFFFFF(plainLight)#0B1628(shade145)#111C2C(shade140)euiTheme.colors.text,euiTheme.colors.textParagraph#1D2A3E(shade130)#384861(shade110)#CAD3E2(shade30)#B4C1D5(shade40)Screenshots
Impact Assessment
Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.
Impact level: 🟢 Low
🧪 The changes have been run in Kibana CI (⏳ build)
Required Kibana changes: commits added here. (test/snapshot updates)
Release Readiness
QA instructions for reviewer
Checklist before marking Ready for Review
breaking changelabel (if applicable)Reviewer checklist