kibana-cloud-security-posture owned UX udjustment for borealis #205136

maxcold · 2024-12-24T10:52:33Z

Summary

This PR covers the changes required for the new Borealis theme https://github.com/elastic/security-team/issues/11230

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

elasticmachine · 2024-12-24T10:52:51Z

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

Click to trigger kibana-pull-request for this PR!
Click to trigger kibana-deploy-project-from-pr for this PR!

maxcold · 2024-12-27T16:37:32Z

...tions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts

 import { CSSObject } from '@emotion/react';
 import { useEuiTheme } from '../../hooks';

 export const useButtonStyles = () => {
-  const { euiTheme, euiVars } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();


in this file I tried replacing vis colors with color tokens, but it requires alignment with designers as there is no match to the old vis colors

maxcold · 2024-12-27T16:37:56Z

x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts

@@ -37,7 +37,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
      padding: `${size.m} ${size.base}`,
    };

-    const windowBoundsColor = transparentize(colors.ghost, 0.6);
+    const windowBoundsColor = transparentize(colors.ghost, 0.6); // TODO: replace transparentize with color token


not sure how to test tty_player

maxcold · 2024-12-27T16:46:10Z

...ins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts

@@ -11,8 +11,13 @@ import { useEuiTheme } from '../../../hooks';



don't how to test tty player

maxcold · 2024-12-27T16:46:41Z

...ins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts

@@ -36,7 +41,7 @@ export const useStyles = (progress: number) => {
      if (selected) {
        return euiVars.terminalOutputMarkerAccent;
      }
-      return euiVars.euiColorVis1;
+      return isAmsterdam(themeName) ? euiVars.euiColorVis1 : euiVars.euiColorVis2;


check color palette matching table in https://docs.google.com/document/d/1IAKbasq1nDfqd2IU3KdP8cwD3uCCAwkIekKRq7zgyWg/edit?tab=t.0#heading=h.u0vaano75gy0

maxcold · 2024-12-27T16:47:10Z

...ins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts

@@ -84,16 +89,24 @@ export const useStyles = (progress: number) => {
      "input[type='range']::-webkit-slider-thumb": customThumb,
      "input[type='range']::-moz-range-thumb": customThumb,
      '.euiRangeHighlight__progress': {
-        backgroundColor: euiVars.euiColorVis0_behindText,
+        backgroundColor: isAmsterdam(themeName)


_behindText won't be available in Borealis, advice is to use the normal color

maxcold · 2024-12-27T16:48:46Z

x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts

@@ -33,10 +33,10 @@ export const useEuiTheme = (...props: EuiThemeProps): EuiThemeReturn => {

    const extraEuiVars: ExtraEuiVars = {
      // eslint-disable-next-line @typescript-eslint/naming-convention
-      euiColorVis6_asText: shade(themeVars.euiColorVis6, 0.335),
-      buttonsBackgroundNormalDefaultPrimary: '#006DE4',
+      euiColorVis6_asText: shade(themeVars.euiColorVis6, 0.335), // TODO: check in Borealis. Replce with proper color token and remove shade


euiColorVis6 becomes pink in Borealis and there is no matching color to the Amsterdam color in the new palette. requires discussion with designers

maxcold · 2024-12-27T17:11:03Z

...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts

+  severity: VulnSeverity,
+  euiTheme: EuiThemeComputed
+): string => {
+  // TOOD: remove old mapping when severity palette is fixed (atm it is inverted)


we should be able to just use the new severity color palette for both Amsterdam and Borealis, but currently there is a bug in elastic/eui#8247 that the severity colors for Amsterdam are inverted. Keeping the old mapping until the severity color palette is fixed

maxcold · 2024-12-27T17:11:30Z

...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts

+  return euiThemeName?.toLowerCase().includes('amsterdam');
+};
+
+// TODO: replace with severity color palette


all these todos should go away when we use only the severity palette for both themes

maxcold · 2024-12-27T17:13:29Z

...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts

+
+  switch (severity) {
+    case VULNERABILITIES_SEVERITY.LOW:
+      return euiTheme.colors.vis.euiColorVis0; // TODO: use color from the severity palette?


severity paletter introduced in elastic/eui#8247 is missing green color which is used for low severity alerts and vulnerabilities. There is a discussion between EUI team and security designers on how to go about it. The workaround is to use euiColorVis0 which is green in both themes. But if security designers agree to switch to blue info color for low severity signales, this line should be changed to euiTheme.colors.vis.euiColorSeverity1

maxcold · 2024-12-27T17:13:50Z

...olutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts

+// TODO: replace with severity color palette
+// TODO: replace with euiTheme.colors.vis.* from useEuiTheme hook
+export const getCvsScoreColor = (score: number, euiTheme: EuiThemeComputed): string | undefined => {
+  // TOOD: remove old mapping when severity palette is fixed (atm it is inverted)


same as for getSeverityStatusColor

maxcold · 2024-12-27T17:15:37Z

...ions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx

@@ -61,7 +60,6 @@ export const ControlGeneralViewResponse = ({
  const [isPopoverOpen, setPopoverOpen] = useState(false);
  const styles = useStyles();
  const selectorStyles = useSelectorStyles();
-  const visColorsBehindText = euiPaletteColorBlindBehindText();


behind text colors won't be available in Borealis. Even though cloud_defend is being deprecated, replacing for safety to a similar semantic tokens

maxcold · 2024-12-27T17:17:52Z

x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx

+      version="1.1"
+    >
+      <path
+        fill={euiTheme.colors.fullShade}


shade colors are recommended to be replaced too, but there is no clear guidance yet on what to replace them with.

maxcold · 2024-12-27T17:19:31Z

...e/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx

  const { score, vector, version } = vectorScore;
  return (
    <>
      <EuiFlexGroup
        alignItems="center"
        css={css`
-          background: ${euiThemeVars.euiColorLightestShade};
-          padding: ${euiThemeVars.euiSizeXS} ${euiThemeVars.euiSizeS};
+          background: ${euiTheme.colors.backgroundLightText};


as shade colors should be replaced and shouldn't be used for background, replacing with more suitable token. But the color is slightly different

maxcold · 2024-12-27T17:20:53Z

...tions/security/plugins/kubernetes_security/public/components/container_name_widget/styles.ts

@@ -44,7 +44,7 @@ export const useStyles = () => {
      borderRadius: euiTheme.border.radius.small,
      border: euiTheme.border.thin,
      bottom: '-25px',
-      boxShadow: `0 ${size.xs} ${size.xs} ${transparentize(euiTheme.colors.shadow, 0.04)}`,
+      boxShadow: `0 ${size.xs} ${size.xs} ${transparentize(euiTheme.colors.shadow, 0.04)}`, // TODO: replace transparentize with color token


k8s_security should be decommissioned in 9.0 and serverless, therefore not touching, but leaving a comment in case the dashboard will be revived in the future

maxcold · 2024-12-27T17:21:15Z

...utions/security/plugins/kubernetes_security/public/components/tree_view_container/helpers.ts

@@ -30,6 +30,7 @@ export const KUBERNETES_COLLECTION_FIELDS: KubernetesCollectionMap = {
  containerImage: CONTAINER_IMAGE_NAME,
 };

+// TODO: update color scheme for Borealis


k8s_security should be decommissioned in 9.0 and serverless, therefore not touching, but leaving a comment in case the dashboard will be revived in the future

maxcold · 2024-12-27T17:23:59Z

...ic/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx

@@ -68,7 +68,7 @@ const getFindingsStats = (
        }
      ),
      count: failedFindingsStats,
-      color: euiThemeVars.euiColorVis9,


euiColorVis9 became yellow in Borealis. vis colors shouldn't be used for semantic purposes exactly for this reason - the vis color can change to pretty much anything. Changing to danger, while it is a different color, brighter one, and it will also change for Amsterdam. need confirmation from designers

maxcold · 2024-12-27T17:24:48Z

...lutions/security/plugins/session_view/public/components/detail_panel_alert_actions/styles.ts

-  isInvestigated?: boolean;
-}
-
-export const useStyles = ({ minimal = false, isInvestigated = false }: StylesDeps) => {


these styles were not used. Removing so that we don't need to think about color palette

maxcold · 2024-12-27T17:26:26Z

...tions/security/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts

@@ -15,8 +15,8 @@ export const useStyles = (minimal = false, isInvestigated = false) => {
  const cached = useMemo(() => {
    const { colors, font, size, border } = euiTheme;

-    const dangerBorder = transparentize(colors.danger, 0.2);
-    const dangerBackground = transparentize(colors.danger, 0.08);
+    const dangerBorder = transparentize(colors.danger, 0.2); // TODO: replace transparentize with color token


here and in pretty much every place in session_view we need to replace transparentize and other color functions with color tokens. But it requires input from designers, on which tokens to use exactly

maxcold added 5 commits December 19, 2024 18:01

review the use of success colors

7fdda71

mark euiColorVis usage with TODOs

76c495a

add todo for replacing hardcoded color

0461c8d

update comments

081b0fb

add TODO regarding discontinue of euiThemeVars

534662a

maxcold added 13 commits December 24, 2024 11:54

Merge branch 'main' into csp-update-to-borealis

73e762f

implement vuln severity color utils for borealis

324d4b2

replace border color with color token for cvss badge

58f7c58

replace misconfig colors with color tokens from euiTheme

4dc1687

remove euiPaletteColorBlindBehindText usage from cloud_defend

723fc89

replace euiThemeVars for nvd logo

4da5c31

replace euiThemeVars with euiTheme in findings flyout

d058d36

replace EuiThemeVars with euiTheme in vulnerability flyout

4331c44

replace euiThemeVars in vulnerability overview tab

23123f0

replace euiThemeVars in k8s_security routes

a9fcb94

replace euiThemeVars with euiTheme for misconfig details table

55f8ab4

remove unused hook in session_view

693d6f4

replace vis colors with color tokens for tree node buttons

5405bd1

maxcold commented Dec 27, 2024

View reviewed changes

use matching color from Borealis for tty control markers

42816c6

maxcold commented Dec 27, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

kibana-cloud-security-posture owned UX udjustment for borealis #205136

kibana-cloud-security-posture owned UX udjustment for borealis #205136

maxcold commented Dec 24, 2024

elasticmachine commented Dec 24, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

maxcold Dec 27, 2024

		@@ -11,8 +11,13 @@ import { useEuiTheme } from '../../../hooks';

kibana-cloud-security-posture owned UX udjustment for borealis #205136

Are you sure you want to change the base?

kibana-cloud-security-posture owned UX udjustment for borealis #205136

Conversation

maxcold commented Dec 24, 2024

Summary

Checklist

elasticmachine commented Dec 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment