[Security team] Update components for EUI visual refresh #201795

SiddharthMantri · 2024-11-26T14:08:25Z

Closes #200005

Summary

Integrate changes from the Borealis theme to components owned by @elastic/kibana-security team.

Notes

There are no visual changes in this PR. However:

Switch from using success to accentSecondary where needed
Switched from 'colors.disabledtocolors.textDisabled`

Screenshots

There isn't much to add but adding a few before/after screenshots of the changes made

Usage	Before	After
API Key token field
User profile page
Copy SO to space counter
Space listing

How to test

Start ES and KIB as:

yarn es snapshot --license trial
KBN_OPTIMIZER_THEMES=experimental yarn start --no-base-path

Navigate to Stack Management > Advance Setting and change the theme to Borealis.
Verify the different screens as seen in the screenshots to see if they render correctly with no visual regression

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Release notes

Update Kibana Security components to use new EUI Borealis theme.

SiddharthMantri · 2024-11-26T14:11:11Z

Hi @elastic/eui-team There are a few places we use the following hard coded colors:

Color code
`#00bfb3`
`#d3dae6`
`#dddddd`
`#dddddd`
`#ffffff`
`#d3dae6`
`#09e8ca`
`#09e8ca`

Do you have any recommended color tokens for these? I couldn't find exact matches in the palettes or sass variables. Any suggestions?

SiddharthMantri · 2024-11-26T14:12:22Z

@elasticmachine merge upstream

mgadewoll · 2024-11-27T10:21:02Z

Hi @elastic/eui-team There are a few places we use the following hard coded colors:

Color code
#00bfb3
#d3dae6
#dddddd
#dddddd
#ffffff
#d3dae6
#09e8ca
#09e8ca
Do you have any recommended color tokens for these? I couldn't find exact matches in the palettes or sass variables. Any suggestions?

@SiddharthMantri Could you provide us with a context of where/for what these colors are used for? And in which color mode are those used, light or dark mode? Because e.g. a light grey might be a background or a text color or something else 🙂

SiddharthMantri · 2024-11-27T10:49:57Z

@mgadewoll Of course! Adding some context here:

#00bfb3	Space color
#d3dae6	Space color
#ddd	Badge color
#ddd	Badge color
#ffffff	`<meta name="theme-color" content="#ffffff" />`
#d3dae6	Space color
#09e8ca	user profile color
#09e8ca	user profile color

mgadewoll · 2024-11-28T09:02:23Z

@mgadewoll Of course! Adding some context here:

#00bfb3 Space color
#d3dae6 Space color
#ddd Badge color
#ddd Badge color
#ffffff <meta name="theme-color" content="#ffffff" />
#d3dae6 Space color
#09e8ca user profile color
#09e8ca user profile color

@SiddharthMantri Here is the mapping we're recommending based on the usage.
These are now dynamic tokens, meaning they'll adjust properly to light/dark mode as well.

old hex value	new token
`#00bfb3`	`colors.vis.euiColorVis0`
`#d3dae6`	`colors.vis.euiColorVis3`
`#ddd`	`colors.backgroundLightText` // if this badge is an `EuiBadge`, we can instead just remove the custom hex color and the `color` prop entirely, as the default is `color="default"` which results in the same grey color mapping
`#ffffff`	`colors.backgroundBasePlain`
`#09e8ca`	`colors.vis.euiColorVis1`

andreadelrio · 2024-12-02T19:58:12Z

examples/feature_control_examples/public/app.tsx

@@ -52,7 +52,7 @@ export const MyPluginComponent: React.FC = () => {
        ).map(([capability, value]) => {
          return value === true ? (
            <div key={capability}>
-              <EuiHealth color="success">{capability}</EuiHealth>
+              <EuiHealth color="accentSecondary">{capability}</EuiHealth>


@SiddharthMantri Upon checking with the EUI team, it appears we won't have accentSecondary as an option for EuiHealth. Without having seen the screenshot for this I imagine this EuiHealth element is trying to convey something positive, so staying with the success color here would be the recommended course of action.

Thanks @andreadelrio! Fixed in 9ef4111

jeramysoucy

LGTM, pending update re: Andrea's comment

SiddharthMantri · 2024-12-09T08:52:03Z

@elasticmachine merge upstream

andreadelrio · 2024-12-09T17:22:29Z

x-pack/plugins/spaces/public/space_list/space_list_internal.tsx

@@ -76,7 +78,7 @@ export const SpaceListInternal = ({
          defaultMessage: `* All spaces`,
        }),
        initials: '*',
-        color: '#D3DAE6',
+        color: euiTheme.colors.vis.euiColorVis3,


@SiddharthMantri can you please provide us with a screenshot of this? cc @gvnmagni

@andreadelrio Of course! i just added the before and after to the description above.

@SiddharthMantri Thanks, it looks like the color before was this gray though (#D3DAE6), not the purple shown in your screenshot?

@andreadelrio Oops, you're right. I was using the recommendation from here: #201795 (comment) Happy to switch to whichever color is closest.

@SiddharthMantri thanks! I asked Lene a clarifying question regarding this.

andreadelrio · 2024-12-09T21:58:46Z

@SiddharthMantri Here is the mapping we're recommending based on the usage. These are now dynamic tokens, meaning they'll adjust properly to light/dark mode as well.

old hex value new token
#00bfb3 colors.vis.euiColorVis0
#d3dae6 colors.vis.euiColorVis3
#ddd colors.backgroundLightText // if this badge is an EuiBadge, we can instead just remove the custom hex color and the color prop entirely, as the default is color="default" which results in the same grey color mapping
#ffffff colors.backgroundBasePlain
#09e8ca colors.vis.euiColorVis1

@mgadewoll can I ask you why #d3dae6 (light gray) maps to vis3 which is a light blue?

mgadewoll · 2024-12-11T08:05:20Z

@SiddharthMantri Here is the mapping we're recommending based on the usage. These are now dynamic tokens, meaning they'll adjust properly to light/dark mode as well.
old hex value new token
#00bfb3 colors.vis.euiColorVis0
#d3dae6 colors.vis.euiColorVis3
#ddd colors.backgroundLightText // if this badge is an EuiBadge, we can instead just remove the custom hex color and the color prop entirely, as the default is color="default" which results in the same grey color mapping
#ffffff colors.backgroundBasePlain
#09e8ca colors.vis.euiColorVis1

@mgadewoll can I ask you why #d3dae6 (light gray) maps to vis3 which is a light blue?

@andreadelrio The recommendation was done without me fully knowing what it's used for, I thought it's part of the vis colors range somehow (used for badges and avatars etc). If it's used more generally, then it should not be changed, that's my bad!
Instead it can be euiColorVisGrey0 then 🙂

SiddharthMantri · 2024-12-11T09:39:16Z

Thanks @mgadewoll! Updated the color and the screenshots.

elasticmachine · 2024-12-11T11:14:14Z

💚 Build Succeeded

Buildkite Build
Commit: 7c85159

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`security`	540.9KB	540.9KB	+8.0B
`serverlessSearch`	367.7KB	367.7KB	+8.0B
`spaces`	256.9KB	256.9KB	+34.0B
total			+50.0B

History

💚 Build #258085 succeeded 1d41c55

andreadelrio

Style changes LGTM. Thanks!

SiddharthMantri · 2024-12-12T10:13:52Z

@elasticmachine merge upstream

[Security team] Update components for EUI visual refresh

8b85326

SiddharthMantri requested a review from a team as a code owner November 26, 2024 14:08

SiddharthMantri added Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! backport:skip This commit does not require backporting v9.0.0 EUI Visual Refresh labels Nov 26, 2024

Merge branch 'main' into security-team-eui-borealis-refresh

371e52e

update colors to dynamic tokens for public files

7ab1ed8

andreadelrio requested changes Dec 2, 2024

View reviewed changes

jeramysoucy approved these changes Dec 4, 2024

View reviewed changes

revert euihealth change

9ef4111

Merge branch 'main' into security-team-eui-borealis-refresh

1d41c55

SiddharthMantri requested a review from andreadelrio December 9, 2024 08:52

andreadelrio reviewed Dec 9, 2024

View reviewed changes

update grey

7c85159

SiddharthMantri requested a review from andreadelrio December 11, 2024 11:53

andreadelrio approved these changes Dec 11, 2024

View reviewed changes

SiddharthMantri enabled auto-merge (squash) December 12, 2024 10:13

Merge branch 'main' into security-team-eui-borealis-refresh

4ce6009

SiddharthMantri added the release_note:enhancement label Dec 12, 2024

SiddharthMantri merged commit bffd4e1 into elastic:main Dec 12, 2024
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security team] Update components for EUI visual refresh #201795

[Security team] Update components for EUI visual refresh #201795

SiddharthMantri commented Nov 26, 2024 •

edited

Loading

SiddharthMantri commented Nov 26, 2024 •

edited

Loading

SiddharthMantri commented Nov 26, 2024

mgadewoll commented Nov 27, 2024

SiddharthMantri commented Nov 27, 2024 •

edited

Loading

mgadewoll commented Nov 28, 2024 •

edited

Loading

andreadelrio Dec 2, 2024

SiddharthMantri Dec 9, 2024

jeramysoucy left a comment

SiddharthMantri commented Dec 9, 2024

andreadelrio Dec 9, 2024

SiddharthMantri Dec 9, 2024

andreadelrio Dec 9, 2024

SiddharthMantri Dec 9, 2024

andreadelrio Dec 9, 2024

andreadelrio commented Dec 9, 2024

mgadewoll commented Dec 11, 2024

SiddharthMantri commented Dec 11, 2024

elasticmachine commented Dec 11, 2024

andreadelrio left a comment

SiddharthMantri commented Dec 12, 2024

[Security team] Update components for EUI visual refresh #201795

[Security team] Update components for EUI visual refresh #201795

Conversation

SiddharthMantri commented Nov 26, 2024 • edited Loading

Summary

Notes

Screenshots

How to test

Checklist

Release notes

SiddharthMantri commented Nov 26, 2024 • edited Loading

SiddharthMantri commented Nov 26, 2024

mgadewoll commented Nov 27, 2024

SiddharthMantri commented Nov 27, 2024 • edited Loading

mgadewoll commented Nov 28, 2024 • edited Loading

andreadelrio Dec 2, 2024

Choose a reason for hiding this comment

SiddharthMantri Dec 9, 2024

Choose a reason for hiding this comment

jeramysoucy left a comment

Choose a reason for hiding this comment

SiddharthMantri commented Dec 9, 2024

andreadelrio Dec 9, 2024

Choose a reason for hiding this comment

SiddharthMantri Dec 9, 2024

Choose a reason for hiding this comment

andreadelrio Dec 9, 2024

Choose a reason for hiding this comment

SiddharthMantri Dec 9, 2024

Choose a reason for hiding this comment

andreadelrio Dec 9, 2024

Choose a reason for hiding this comment

andreadelrio commented Dec 9, 2024

mgadewoll commented Dec 11, 2024

SiddharthMantri commented Dec 11, 2024

elasticmachine commented Dec 11, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

History

andreadelrio left a comment

Choose a reason for hiding this comment

SiddharthMantri commented Dec 12, 2024

SiddharthMantri commented Nov 26, 2024 •

edited

Loading

SiddharthMantri commented Nov 26, 2024 •

edited

Loading

SiddharthMantri commented Nov 27, 2024 •

edited

Loading

mgadewoll commented Nov 28, 2024 •

edited

Loading