From faae3343937fa0c14d0f40b23b751adf483865ff Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 19 Dec 2024 10:35:31 +0000 Subject: [PATCH 01/12] rename --- .../attack_discovery_tab/attack/attack_chain/tactic/index.tsx | 2 +- .../attack_discovery_tab/attack/mini_attack_chain/index.tsx | 2 +- .../empty_states/empty_prompt/animated_counter/index.tsx | 4 ++-- .../common/components/navigation/nav_item_beta_badge.tsx | 2 +- .../entity_analytics/components/risk_information/index.tsx | 2 +- .../management/components/console/components/console_text.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx index 798c0f82fd030..2ca083a334fba 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx @@ -48,7 +48,7 @@ const TacticComponent: React.FC = ({ detected, rightJustify = false, tact [] ); - const color = detected ? euiTheme.colors.danger : euiTheme.colors.subduedText; + const color = detected ? euiTheme.colors.danger : euiTheme.colors.textSubdued; const innerCircleXOffset = rightJustify ? INNER_CIRCLE_RIGHT_JUSTIFY_X_OFFSET : INNER_CIRCLE_LEFT_JUSTIFY_X_OFFSET; diff --git a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx index f05c7bce564f9..1bfae4fabec92 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx @@ -50,7 +50,7 @@ const MiniAttackChainComponent: React.FC = ({ attackDiscovery }) => { = ({ animationDurationMs = 1000 .append('text') .attr('x', 3) .attr('y', 26) - .attr('fill', euiTheme.colors.text) + .attr('fill', euiTheme.colors.textParagraph) .text(zero); text @@ -45,7 +45,7 @@ const AnimatedCounterComponent: React.FC = ({ animationDurationMs = 1000 }) .duration(animationDurationMs); } - }, [animationDurationMs, count, euiTheme.colors.text]); + }, [animationDurationMs, count, euiTheme.colors.textParagraph]); return ( label={BETA} size="s" css={css` - color: ${euiTheme.colors.text}; + color: ${euiTheme.colors.textParagraph}; margin-top: ${euiTheme.size.xxs}; `} /> diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx index 22b0139af8920..aa5bd985b04ff 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx @@ -28,7 +28,7 @@ export const ConsoleText = memo( data-test-subj={dataTestSubj} className={`font-family-code ${className ?? ''}`} > - {children} + {children} ); } From 4d41ac87bc132691b314ad1b8017121e35fbcb31 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 19 Dec 2024 13:11:09 +0000 Subject: [PATCH 02/12] rename eui variables --- .../public/common/components/charts/donutchart.tsx | 4 ++-- .../common/components/empty_prompt/empty_prompt.tsx | 2 +- .../common/components/split_accordion/split_accordion.tsx | 2 +- .../public/onboarding/components/onboarding.tsx | 2 +- .../onboarding_body/cards/common/card_callout.styles.ts | 2 +- .../cards/common/connectors/connector_setup.tsx | 2 +- .../onboarding_body/onboarding_card_panel.styles.ts | 8 ++++---- .../onboarding_header/cards/common/link_card.styles.ts | 6 +++--- .../onboarding_header/onboarding_header.styles.ts | 2 +- 9 files changed, 15 insertions(+), 15 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx index ebfe06476620a..2d5dcafc77df5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx @@ -106,9 +106,9 @@ const DonutChartWrapperComponent: React.FC = ({ const { euiTheme } = useEuiTheme(); const emptyLabelStyle = useMemo( () => ({ - color: euiTheme.colors.darkShade, + color: euiTheme.colors.textSubdued, }), - [euiTheme.colors.darkShade] + [euiTheme.colors.textSubdued] ); const className = isChartEmbeddablesEnabled ? undefined : 'eui-textTruncate'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index 9c22ae2440737..c81093a8f6b0a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -47,7 +47,7 @@ const pageHeaderStyles = css` `; const getFlexItemStyles = (euiTheme: EuiThemeComputed) => css` - background: ${euiTheme.colors.lightestShade}; + background: ${euiTheme.colors.backgroundBaseSubdued}; padding: 20px; `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/split_accordion/split_accordion.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/split_accordion/split_accordion.tsx index 668473919b97b..bcac44b6feecd 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/split_accordion/split_accordion.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/split_accordion/split_accordion.tsx @@ -32,7 +32,7 @@ export const SplitAccordion = ({ initialIsOpen={initialIsOpen} css={css` .euiAccordion__triggerWrapper { - background: ${euiTheme.colors.lightestShade}; + background: ${euiTheme.colors.backgroundBaseSubdued}; padding: ${euiTheme.size.m}; } `} diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx index caa0d9f9b79d7..eb42d6fafc2f5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx @@ -46,7 +46,7 @@ export const OnboardingPage = React.memo(() => { restrictWidth={PAGE_CONTENT_WIDTH} paddingSize="xl" bottomBorder="extended" - style={{ backgroundColor: euiTheme.colors.body }} + style={{ backgroundColor: euiTheme.colors.backgroundBasePlain }} > { const { euiTheme } = useEuiTheme(); return css` padding: ${euiTheme.size.s}; - border: 1px solid ${euiTheme.colors.lightShade}; + border: 1px solid ${euiTheme.colors.backgroundBaseSubdued}; border-radius: ${euiTheme.size.s}; `; }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx index f41c77458edf9..96b4b9da4d6a5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx @@ -33,7 +33,7 @@ const usePanelCss = () => { .connectorSelectorPanel { height: 160px; &.euiPanel:hover { - background-color: ${euiTheme.colors.lightestShade}; + background-color: ${euiTheme.colors.backgroundBaseSubdued}; } } `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts index ca3e3e765b977..431fa99088466 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts @@ -24,14 +24,14 @@ export const useCardPanelStyles = () => { .onboardingCardIcon { padding: ${euiTheme.size.m}; border-radius: 50%; - background-color: ${isDarkMode ? euiTheme.colors.body : euiTheme.colors.lightestShade}; + background-color: ${isDarkMode ? euiTheme.colors.backgroundBasePlain : euiTheme.colors.backgroundBaseSubdued}; } .onboardingCardHeaderTitle { font-weight: ${euiTheme.font.weight.semiBold}; } .onboardingCardHeaderCompleteBadge { background-color: ${successBackgroundColor}; - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } .onboardingCardContentWrapper { display: grid; @@ -65,8 +65,8 @@ export const useCardPanelStyles = () => { export const useDarkPanelStyles = (isDarkMode: boolean) => { const { euiTheme } = useEuiTheme(); const darkPanelStyles = css` - background-color: ${euiTheme.colors.lightestShade}; - border-color: ${euiTheme.colors.mediumShade}; + background-color: ${euiTheme.colors.backgroundBaseSubdued}; + border-color: ${euiTheme.colors.borderBaseSubdued}; `; return isDarkMode ? darkPanelStyles : ''; }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts index 8643c3254a6ee..00572f7c1321b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts @@ -22,7 +22,7 @@ export const useCardStyles = () => { .headerCardLink, .headerCardLink * { text-decoration: underline; - text-decoration-color: ${euiTheme.colors.primaryText}; + text-decoration-color: ${euiTheme.colors.textPrimary}; } } @@ -32,9 +32,9 @@ export const useCardStyles = () => { ${isDarkMode ? ` - background-color: ${euiTheme.colors.lightestShade}; + background-color: ${euiTheme.colors.backgroundBaseSubdued}; box-shadow: none; - border: 1px solid ${euiTheme.colors.mediumShade}; + border: 1px solid ${euiTheme.colors.borderBaseFormsControl}; ` : ''} `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts index 40cfd7a5d9e1f..299fbdd158e03 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts @@ -16,7 +16,7 @@ export const useOnboardingHeaderStyles = () => { width: calc(${PAGE_CONTENT_WIDTH} / 2); } .onboardingHeaderGreetings { - color: ${euiTheme.colors.darkShade}; + color: ${euiTheme.colors.textSubdued}; } .onboardingHeaderTopicSelector { width: calc(${PAGE_CONTENT_WIDTH} / 3); From 5e040385b49bc18789f4f2ed926ef7a89889c24b Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 19 Dec 2024 17:05:39 +0000 Subject: [PATCH 03/12] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../onboarding_body/onboarding_card_panel.styles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts index 431fa99088466..de43287c72a5a 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts @@ -24,7 +24,9 @@ export const useCardPanelStyles = () => { .onboardingCardIcon { padding: ${euiTheme.size.m}; border-radius: 50%; - background-color: ${isDarkMode ? euiTheme.colors.backgroundBasePlain : euiTheme.colors.backgroundBaseSubdued}; + background-color: ${isDarkMode + ? euiTheme.colors.backgroundBasePlain + : euiTheme.colors.backgroundBaseSubdued}; } .onboardingCardHeaderTitle { font-weight: ${euiTheme.font.weight.semiBold}; From 55494b6ce0cc7e7b55ae3f1852b5037d3f8f9425 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 19 Dec 2024 18:13:42 +0000 Subject: [PATCH 04/12] update colors --- .../public/onboarding/components/onboarding.tsx | 2 +- .../onboarding_header/cards/common/link_card.styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx index eb42d6fafc2f5..79ea7792386d1 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx @@ -46,7 +46,7 @@ export const OnboardingPage = React.memo(() => { restrictWidth={PAGE_CONTENT_WIDTH} paddingSize="xl" bottomBorder="extended" - style={{ backgroundColor: euiTheme.colors.backgroundBasePlain }} + style={{ backgroundColor: euiTheme.colors.backgroundBaseSubdued }} > { ? ` background-color: ${euiTheme.colors.backgroundBaseSubdued}; box-shadow: none; - border: 1px solid ${euiTheme.colors.borderBaseFormsControl}; + border: ${euiTheme.border.thin}px solid ${euiTheme.colors.borderBaseFormsControl}; ` : ''} `; From 21e40daa3921d3379c8fe3ef7e1a023aa667cd82 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 19 Dec 2024 19:11:01 +0000 Subject: [PATCH 05/12] apply missing styles --- .../components/empty_prompt/empty_prompt.tsx | 92 ++++++++++--------- 1 file changed, 50 insertions(+), 42 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index c81093a8f6b0a..445e908fa483c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { memo, useCallback } from 'react'; +import React, { memo, useCallback, useMemo } from 'react'; import { EuiButton, EuiCard, @@ -13,10 +13,9 @@ import { EuiFlexItem, EuiPageHeader, useEuiTheme, - type EuiThemeComputed, EuiButtonEmpty, } from '@elastic/eui'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; import { OnboardingCardId } from '../../../onboarding/constants'; import { SecurityPageName } from '../../../../common'; @@ -33,44 +32,53 @@ const imgUrls = { endpoint: endpointSvg, }; -const headerCardStyles = css` - span.euiTitle { - font-size: 36px; - line-height: 100%; - } -`; +const useEmptyPromptStyles = () => { + const { euiTheme } = useEuiTheme(); -const pageHeaderStyles = css` - h1 { - font-size: 18px; - } -`; + const headerCardStyles = css` + span.euiTitle { + font-size: ${euiTheme.base * 2.25}px; + line-height: 100%; + } + `; -const getFlexItemStyles = (euiTheme: EuiThemeComputed) => css` - background: ${euiTheme.colors.backgroundBaseSubdued}; - padding: 20px; -`; + const pageHeaderStyles = css` + h1 { + font-size: ${euiTheme.base * 1.125}px; + } + `; -const cardStyles = css` - img { - margin-top: 20px; - max-width: 400px; - } -`; + const flexItemStyles = css` + background: ${euiTheme.colors.backgroundBaseSubdued}; + padding: 20px; + `; -const footerStyles = css` - span.euiTitle { - font-size: 36px; - line-height: 100%; - } - max-width: 600px; - display: block; - margin: 20px auto 0; -`; + const cardStyles = css` + img { + margin-top: 20px; + max-width: 400px; + } + `; -export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => { - const { euiTheme } = useEuiTheme(); + const footerStyles = css` + span.euiTitle { + font-size: ${euiTheme.base * 2.25}px; + line-height: 100%; + } + max-width: 600px; + display: block; + margin: 20px auto 0; + `; + return useMemo( + () => ({ headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles }), + [cardStyles, flexItemStyles, footerStyles, headerCardStyles, pageHeaderStyles] + ); +}; + +export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => { + const { headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles } = + useEmptyPromptStyles(); const { navigateTo } = useNavigateTo(); const navigateToAddIntegrations = useCallback(() => { @@ -92,7 +100,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = void }) = {i18n.SIEM_CTA} } - css={headerCardStyles} + className={headerCardStyles} /> @@ -123,7 +131,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = - + void }) = image={imgUrls.siem} textAlign="center" title={i18n.SIEM_CARD_TITLE} - css={cardStyles} + className={cardStyles} /> @@ -142,7 +150,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = image={imgUrls.endpoint} textAlign="center" title={i18n.ENDPOINT_TITLE} - css={cardStyles} + className={cardStyles} /> @@ -152,7 +160,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = image={imgUrls.cloud} textAlign="center" title={i18n.CLOUD_CARD_TITLE} - css={cardStyles} + className={cardStyles} /> @@ -180,7 +188,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = )} } - css={footerStyles} + className={footerStyles} /> From 97623adb5d392a425eae8745a960dd3fa94ff529 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Mon, 23 Dec 2024 11:04:05 +0000 Subject: [PATCH 06/12] border --- .../onboarding_header/cards/common/link_card.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts index 19dca8c3ca7db..526090336fc44 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts @@ -34,7 +34,7 @@ export const useCardStyles = () => { ? ` background-color: ${euiTheme.colors.backgroundBaseSubdued}; box-shadow: none; - border: ${euiTheme.border.thin}px solid ${euiTheme.colors.borderBaseFormsControl}; + border: ${euiTheme.border.thin}; ` : ''} `; From bff90d24b80c86d7171be674f27b84a743bcb769 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 31 Dec 2024 11:36:51 +0000 Subject: [PATCH 07/12] revert out of scope changes --- .../attack_discovery_tab/attack/attack_chain/tactic/index.tsx | 2 +- .../attack_discovery_tab/attack/mini_attack_chain/index.tsx | 2 +- .../empty_states/empty_prompt/animated_counter/index.tsx | 4 ++-- .../entity_analytics/components/risk_information/index.tsx | 2 +- .../management/components/console/components/console_text.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx index 2ca083a334fba..798c0f82fd030 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/attack_chain/tactic/index.tsx @@ -48,7 +48,7 @@ const TacticComponent: React.FC = ({ detected, rightJustify = false, tact [] ); - const color = detected ? euiTheme.colors.danger : euiTheme.colors.textSubdued; + const color = detected ? euiTheme.colors.danger : euiTheme.colors.subduedText; const innerCircleXOffset = rightJustify ? INNER_CIRCLE_RIGHT_JUSTIFY_X_OFFSET : INNER_CIRCLE_LEFT_JUSTIFY_X_OFFSET; diff --git a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx index 1bfae4fabec92..f05c7bce564f9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/attack/mini_attack_chain/index.tsx @@ -50,7 +50,7 @@ const MiniAttackChainComponent: React.FC = ({ attackDiscovery }) => { = ({ animationDurationMs = 1000 .append('text') .attr('x', 3) .attr('y', 26) - .attr('fill', euiTheme.colors.textParagraph) + .attr('fill', euiTheme.colors.text) .text(zero); text @@ -45,7 +45,7 @@ const AnimatedCounterComponent: React.FC = ({ animationDurationMs = 1000 }) .duration(animationDurationMs); } - }, [animationDurationMs, count, euiTheme.colors.textParagraph]); + }, [animationDurationMs, count, euiTheme.colors.text]); return ( label={BETA} size="s" css={css` - color: ${euiTheme.colors.textParagraph}; + color: ${euiTheme.colors.text}; margin-top: ${euiTheme.size.xxs}; `} /> diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx index aa5bd985b04ff..22b0139af8920 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/console_text.tsx @@ -28,7 +28,7 @@ export const ConsoleText = memo( data-test-subj={dataTestSubj} className={`font-family-code ${className ?? ''}`} > - {children} + {children} ); } From 86325464992a06986a19adccfc7de6c20c8f0a79 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 7 Jan 2025 15:51:22 +0000 Subject: [PATCH 08/12] update onboardung cards --- .../onboarding_body/onboarding_card_panel.styles.ts | 10 ++++------ .../onboarding_header/cards/common/link_card.styles.ts | 4 ++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts index 8481da1d95042..e613f0b2d7662 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts @@ -12,7 +12,7 @@ export const HEIGHT_ANIMATION_DURATION = 250; export const useCardPanelStyles = () => { const { euiTheme, colorMode } = useEuiTheme(); - const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess; + const successBackgroundColor = euiTheme.colors.backgroundLightSuccess; const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark; const darkModeStyles = useDarkPanelStyles(isDarkMode); @@ -24,9 +24,7 @@ export const useCardPanelStyles = () => { .onboardingCardIcon { padding: ${euiTheme.size.m}; border-radius: 50%; - background-color: ${isDarkMode - ? euiTheme.colors.backgroundBasePlain - : euiTheme.colors.backgroundBaseSubdued}; + background-color: ${euiTheme.colors.backgroundBaseSubdued}; } .onboardingCardHeaderTitle { font-weight: ${euiTheme.font.weight.semiBold}; @@ -67,8 +65,8 @@ export const useCardPanelStyles = () => { export const useDarkPanelStyles = (isDarkMode: boolean) => { const { euiTheme } = useEuiTheme(); const darkPanelStyles = css` - background-color: ${euiTheme.colors.backgroundBaseSubdued}; - border-color: ${euiTheme.colors.borderBaseSubdued}; + background-color: ${euiTheme.colors.backgroundBasePlain}; + border-color: ${euiTheme.colors.borderBasePlain}; `; return isDarkMode ? darkPanelStyles : ''; }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts index 526090336fc44..74243250c7678 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts @@ -32,9 +32,9 @@ export const useCardStyles = () => { ${isDarkMode ? ` - background-color: ${euiTheme.colors.backgroundBaseSubdued}; + background-color: ${euiTheme.colors.backgroundBasePlain}; box-shadow: none; - border: ${euiTheme.border.thin}; + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}; ` : ''} `; From 987b48e97774f66d57cfdfef909c351c38343747 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 7 Jan 2025 16:22:57 +0000 Subject: [PATCH 09/12] update empty prompt --- .../common/components/empty_prompt/empty_prompt.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index 445e908fa483c..616665c3592a9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -50,13 +50,13 @@ const useEmptyPromptStyles = () => { const flexItemStyles = css` background: ${euiTheme.colors.backgroundBaseSubdued}; - padding: 20px; + padding: ${euiTheme.base * 1.25}px; `; const cardStyles = css` img { - margin-top: 20px; - max-width: 400px; + margin-top: ${euiTheme.base * 1.25}px; + max-width: ${euiTheme.components.forms.maxWidth}; } `; @@ -67,7 +67,7 @@ const useEmptyPromptStyles = () => { } max-width: 600px; display: block; - margin: 20px auto 0; + margin: ${euiTheme.base * 1.25}px auto 0; `; return useMemo( From 5dfbfbde9f0c9e06225777dafebffb22a0cb9d14 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 8 Jan 2025 16:43:05 +0000 Subject: [PATCH 10/12] update import --- .../public/common/components/empty_prompt/empty_prompt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index 616665c3592a9..7690f950ea558 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -15,7 +15,7 @@ import { useEuiTheme, EuiButtonEmpty, } from '@elastic/eui'; -import { css } from '@emotion/css'; +import { css } from '@emotion/react'; import { OnboardingCardId } from '../../../onboarding/constants'; import { SecurityPageName } from '../../../../common'; From a1c402a213ce02ea7d35c634ebd910c6a7a4bec6 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 8 Jan 2025 16:57:55 +0000 Subject: [PATCH 11/12] apply styles with css props --- .../components/empty_prompt/empty_prompt.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index 7690f950ea558..d36a34534db59 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -100,7 +100,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = void }) = {i18n.SIEM_CTA} } - className={headerCardStyles} + css={headerCardStyles} /> @@ -131,7 +131,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = - + void }) = image={imgUrls.siem} textAlign="center" title={i18n.SIEM_CARD_TITLE} - className={cardStyles} + css={cardStyles} /> @@ -150,7 +150,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = image={imgUrls.endpoint} textAlign="center" title={i18n.ENDPOINT_TITLE} - className={cardStyles} + css={cardStyles} /> @@ -160,7 +160,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = image={imgUrls.cloud} textAlign="center" title={i18n.CLOUD_CARD_TITLE} - className={cardStyles} + css={cardStyles} /> @@ -188,7 +188,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) = )} } - className={footerStyles} + css={footerStyles} /> From 42d30cfd4f7236b81da84867a7111d9ac05b6a79 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 9 Jan 2025 11:00:55 +0000 Subject: [PATCH 12/12] use EUI token --- .../onboarding_body/cards/common/card_callout.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.styles.ts index d8c85cfaf7436..c8806a7ca669b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.styles.ts @@ -12,7 +12,7 @@ export const useCardCallOutStyles = () => { const { euiTheme } = useEuiTheme(); return css` padding: ${euiTheme.size.s}; - border: 1px solid ${euiTheme.colors.backgroundBaseSubdued}; + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.backgroundBaseSubdued}; border-radius: ${euiTheme.size.s}; `; };