From e830ca00d90bff4370211031c49441bd30da9f78 Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Mon, 28 Apr 2025 17:11:29 +0200 Subject: [PATCH 1/5] Update EUI packages --- package.json | 4 ++-- src/dev/license_checker/config.ts | 4 ++-- yarn.lock | 26 +++++++++++++------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index cff17e63f574b..b6f950455a6f7 100644 --- a/package.json +++ b/package.json @@ -125,8 +125,8 @@ "@elastic/ecs": "^8.11.5", "@elastic/elasticsearch": "9.0.0-alpha.4", "@elastic/ems-client": "8.6.3", - "@elastic/eui": "101.4.0", - "@elastic/eui-theme-borealis": "0.2.0", + "@elastic/eui": "102.0.0", + "@elastic/eui-theme-borealis": "1.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "^1.2.3", "@elastic/numeral": "^2.5.1", diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 26464260f1723..e164fb82f2c03 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -88,8 +88,8 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.6.3': ['Elastic License 2.0'], - '@elastic/eui@101.4.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], - '@elastic/eui-theme-borealis@0.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui@102.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui-theme-borealis@1.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/yarn.lock b/yarn.lock index 42cd844898b9b..71ee15002c0db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2167,26 +2167,26 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.2.0.tgz#0f32724e394f3bfa35d18ef8fa2e79da47191779" integrity sha512-EDp5FP8nbzGXwAMWM2xo6SL2LdsUwEVrt6idE8AoW45KybuJZ9Dr8IB8z6+wCr7Jxrg+nwdst039LpaslDur+g== -"@elastic/eui-theme-borealis@0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-0.2.0.tgz#abfe2776778be05d65a60ba02e936c2203bb1549" - integrity sha512-3gD60+QR4cWeCqC8OG6hXyO3xeagQ0chMBe+zZJE7qBcYXuPqGhaFb78rEI1BNniEm+pyUiGN88FQtLaoHInNw== +"@elastic/eui-theme-borealis@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841" + integrity sha512-Zf3ZX5siUhF+TNOdP0FZ3PNEpVmfe3DDXFm5biAKFlGp4e5yrR1FKPYOzkOdJtPWlOoNaedawnALXNVjp1UH8w== -"@elastic/eui-theme-common@0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-0.2.0.tgz#570a988f58c24076c6f867475e70930769f3cff5" - integrity sha512-g2n38Uk4G9UqQU/wim+ZKWusWtO1bdudvDy/7+sdCYaxtgbINT5hhMHoU9M49D+7FJSsPuHn7gVfdYKMN9bTdQ== +"@elastic/eui-theme-common@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.0.0.tgz#c5e7b7597c4ebe71fc533b18458415a14a93794d" + integrity sha512-9+P21npVm05OmFr0OPkA5DSdts9teOo/OEotbJFAVkqBLkNf+Eevv6q89B8eQ6r383RnVwTl7vBzb6M9PnULJg== dependencies: "@types/lodash" "^4.14.202" chroma-js "^2.4.2" lodash "^4.17.21" -"@elastic/eui@101.4.0": - version "101.4.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-101.4.0.tgz#2db2d7163e2a317b514b6308197173655ff2ac4b" - integrity sha512-oKmlsjBMp4DSdu34YUqQD821Fov46mJ4nPHkWAUIHCv3+5PfAeK7NpVBEnyVZW5LTo+sAANqLN5mJFsovR8NZg== +"@elastic/eui@102.0.0": + version "102.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.0.0.tgz#dda965d92eb46bf061aac8d0219218779aea28bb" + integrity sha512-o4BuXdyGLTAJOBMIUVovDaDmmW+RJgKG6XdIDds7aJyQFlcqIOHgM59yCorzEHhpPAuaYparShJE/vug2dJAIQ== dependencies: - "@elastic/eui-theme-common" "0.2.0" + "@elastic/eui-theme-common" "1.0.0" "@elastic/prismjs-esql" "^1.1.0" "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202" From ac74c704905833b6263d0570e14409af85121892 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 17 Apr 2025 16:36:19 +0200 Subject: [PATCH 2/5] refactor: update severity color token usages --- .../cases/public/components/severity/config.tsx | 12 ++++-------- .../cases_webhook/severity_filter.tsx | 12 ++++-------- .../plugins/apm/common/service_health_status.ts | 16 ++++++---------- 3 files changed, 14 insertions(+), 26 deletions(-) diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx index dd95baa5668e3..8216625f6110c 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx @@ -36,23 +36,19 @@ export const SeverityHealth: React.FC = ({ severity }) => { const severityData = { low: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.neutral, label: LOW, }, medium: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning, label: MEDIUM, }, high: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis7 - : euiTheme.colors.vis.euiColorSeverity10, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.severity.risk, label: HIGH, }, critical: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorSeverity14, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger, label: CRITICAL, }, }; diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index aefdd895a5b02..a8f7b7739bf65 100644 --- a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -35,23 +35,19 @@ export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityCh const severities = { [CaseSeverity.LOW]: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.neutral, label: i18n.SEVERITY_LOW_LABEL, }, [CaseSeverity.MEDIUM]: { - color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning, label: i18n.SEVERITY_MEDIUM_LABEL, }, [CaseSeverity.HIGH]: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis7 - : euiTheme.colors.vis.euiColorSeverity10, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.severity.risk, label: i18n.SEVERITY_HIGH_LABEL, }, [CaseSeverity.CRITICAL]: { - color: isAmsterdam - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorSeverity14, + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger, label: i18n.SEVERITY_CRITICAL_LABEL, }, }; diff --git a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts index f9b960693e391..d90090b5697fa 100644 --- a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts +++ b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts @@ -42,15 +42,11 @@ export function getServiceHealthStatusColor( switch (status) { case ServiceHealthStatus.healthy: - return isAmsterdam - ? euiTheme.colors.vis.euiColorVis0 - : euiTheme.colors.vis.euiColorVisSuccess0; + return isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.success; case ServiceHealthStatus.warning: - return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorVis9; + return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning; case ServiceHealthStatus.critical: - return isAmsterdam - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorSeverity14; + return isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger; case ServiceHealthStatus.unknown: return euiTheme.colors.mediumShade; } @@ -66,15 +62,15 @@ export function getServiceHealthStatusBadgeColor( case ServiceHealthStatus.healthy: return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 - : euiTheme.colors.vis.euiColorVisSuccess0; + : euiTheme.colors.severity.success; case ServiceHealthStatus.warning: return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText5 - : euiTheme.colors.vis.euiColorVis9; + : euiTheme.colors.severity.warning; case ServiceHealthStatus.critical: return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText9 - : euiTheme.colors.vis.euiColorSeverity12; + : euiTheme.colors.severity.risk; case ServiceHealthStatus.unknown: return euiTheme.colors.mediumShade; } From ddc8d2d79c86c14fdc8a02a7bf4607edccf04b6e Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Tue, 29 Apr 2025 07:35:50 +0200 Subject: [PATCH 3/5] Fix types tentatively e.g. in euiTheme.colors[key] --- .../config_panel/layer_actions/layer_actions.tsx | 7 +++++-- .../public/components/rca/rca_panel/index.tsx | 9 +++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx index 9140c90f67d60..b4176911a3f2d 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx @@ -20,6 +20,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiToolTip, + EuiButtonIconProps, } from '@elastic/eui'; import type { CoreStart } from '@kbn/core/public'; import { css } from '@emotion/react'; @@ -144,9 +145,11 @@ const InContextMenuActions = (props: LayerActionsProps) => { {...(i.color ? { css: css` - color: ${euiTheme.colors[i.color]}; + color: ${euiTheme.colors[i.color as keyof EuiButtonIconProps['color']]}; &:hover { - text-decoration-color: ${euiTheme.colors[i.color]} !important; + text-decoration-color: ${euiTheme.colors[ + i.color as keyof EuiButtonIconProps['color'] + ]} !important; } `, size: 's', // need to be explicit here as css prop will disable the default small size diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx index 173bf8a2c96a0..3e1467932c376 100644 --- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx @@ -5,12 +5,17 @@ * 2.0. */ -import { EuiPanel } from '@elastic/eui'; +import { EuiPanel, UseEuiTheme } from '@elastic/eui'; import { css } from '@emotion/css'; import { rgba } from 'polished'; import React from 'react'; import { useTheme } from '../../../hooks/use_theme'; +type EuiBackgroundColor = Pick< + UseEuiTheme['euiTheme']['colors'], + 'accent' | 'accentSecondary' | 'primary' | 'success' | 'warning' | 'danger' +>; + export function RootCauseAnalysisPanel({ children, color, @@ -28,7 +33,7 @@ export function RootCauseAnalysisPanel({ color !== 'highlighted' ? css` border: 1px solid; - border-color: ${rgba(theme.colors[color], 0.25)}; + border-color: ${rgba(theme.colors[color as keyof EuiBackgroundColor], 0.25)}; ` : undefined; From ba7ec4f18ee154279fbd46dc604bf720f980d832 Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Tue, 29 Apr 2025 14:48:57 +0200 Subject: [PATCH 4/5] Improve types (hopefully) --- .../layer_actions/layer_actions.tsx | 61 +++++++++++-------- .../public/components/rca/rca_panel/index.tsx | 18 +++--- 2 files changed, 41 insertions(+), 38 deletions(-) diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx index b4176911a3f2d..04656b8d1386d 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx @@ -20,7 +20,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiToolTip, - EuiButtonIconProps, } from '@elastic/eui'; import type { CoreStart } from '@kbn/core/public'; import { css } from '@emotion/react'; @@ -63,25 +62,25 @@ export const getSharedActions = ({ core: Pick; customRemoveModalText?: { title?: string; description?: string }; }) => [ - getOpenLayerSettingsAction({ - hasLayerSettings, - openLayerSettings, - }), - getCloneLayerAction({ - execute: onCloneLayer, - layerIndex, - activeVisualization, - isTextBasedLanguage, - }), - getRemoveLayerAction({ - execute: onRemoveLayer, - layerIndex, - layerType, - isOnlyLayer, - core, - customModalText: customRemoveModalText, - }), -]; + getOpenLayerSettingsAction({ + hasLayerSettings, + openLayerSettings, + }), + getCloneLayerAction({ + execute: onCloneLayer, + layerIndex, + activeVisualization, + isTextBasedLanguage, + }), + getRemoveLayerAction({ + execute: onRemoveLayer, + layerIndex, + layerType, + isOnlyLayer, + core, + customModalText: customRemoveModalText, + }), + ]; /** @internal **/ const InContextMenuActions = (props: LayerActionsProps) => { @@ -102,6 +101,16 @@ const InContextMenuActions = (props: LayerActionsProps) => { } }, [isPopoverOpen]); + // `neutral` and `risk` variants belong to `severity` so they're not + // available in `euiTheme.colors` directly + const getColorFromTheme = useCallback( + (color: LayerAction['color']) => + color === 'risk' || color === 'neutral' + ? euiTheme.colors.severity[color] + : euiTheme.colors[color!], + [euiTheme] + ); + return ( { }} {...(i.color ? { - css: css` - color: ${euiTheme.colors[i.color as keyof EuiButtonIconProps['color']]}; + css: css` + color: ${getColorFromTheme(i.color)}; &:hover { - text-decoration-color: ${euiTheme.colors[ - i.color as keyof EuiButtonIconProps['color'] - ]} !important; + text-decoration-color: ${getColorFromTheme(i.color)} !important; } `, - size: 's', // need to be explicit here as css prop will disable the default small size - } + size: 's', // need to be explicit here as css prop will disable the default small size + } : {})} > diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx index 3e1467932c376..6bf905b22cecf 100644 --- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx @@ -5,17 +5,12 @@ * 2.0. */ -import { EuiPanel, UseEuiTheme } from '@elastic/eui'; +import { EuiPanel } from '@elastic/eui'; import { css } from '@emotion/css'; import { rgba } from 'polished'; import React from 'react'; import { useTheme } from '../../../hooks/use_theme'; -type EuiBackgroundColor = Pick< - UseEuiTheme['euiTheme']['colors'], - 'accent' | 'accentSecondary' | 'primary' | 'success' | 'warning' | 'danger' ->; - export function RootCauseAnalysisPanel({ children, color, @@ -25,15 +20,16 @@ export function RootCauseAnalysisPanel({ }) { const theme = useTheme(); + const isSeverityColor = color === 'risk' || color === 'neutral'; const panelClassName = color && - color !== 'transparent' && - color !== 'plain' && - color !== 'subdued' && - color !== 'highlighted' + color !== 'transparent' && + color !== 'plain' && + color !== 'subdued' && + color !== 'highlighted' ? css` border: 1px solid; - border-color: ${rgba(theme.colors[color as keyof EuiBackgroundColor], 0.25)}; + border-color: ${rgba(isSeverityColor ? theme.colors.severity[color] : theme.colors[color], 0.25)}; ` : undefined; From df4e8d700bfe327a3bee3c7b0e6025324712142e Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 29 Apr 2025 13:14:25 +0000 Subject: [PATCH 5/5] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../layer_actions/layer_actions.tsx | 44 +++++++++---------- .../public/components/rca/rca_panel/index.tsx | 13 +++--- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx index 04656b8d1386d..067fa2f3aae3d 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx @@ -62,25 +62,25 @@ export const getSharedActions = ({ core: Pick; customRemoveModalText?: { title?: string; description?: string }; }) => [ - getOpenLayerSettingsAction({ - hasLayerSettings, - openLayerSettings, - }), - getCloneLayerAction({ - execute: onCloneLayer, - layerIndex, - activeVisualization, - isTextBasedLanguage, - }), - getRemoveLayerAction({ - execute: onRemoveLayer, - layerIndex, - layerType, - isOnlyLayer, - core, - customModalText: customRemoveModalText, - }), - ]; + getOpenLayerSettingsAction({ + hasLayerSettings, + openLayerSettings, + }), + getCloneLayerAction({ + execute: onCloneLayer, + layerIndex, + activeVisualization, + isTextBasedLanguage, + }), + getRemoveLayerAction({ + execute: onRemoveLayer, + layerIndex, + layerType, + isOnlyLayer, + core, + customModalText: customRemoveModalText, + }), +]; /** @internal **/ const InContextMenuActions = (props: LayerActionsProps) => { @@ -153,14 +153,14 @@ const InContextMenuActions = (props: LayerActionsProps) => { }} {...(i.color ? { - css: css` + css: css` color: ${getColorFromTheme(i.color)}; &:hover { text-decoration-color: ${getColorFromTheme(i.color)} !important; } `, - size: 's', // need to be explicit here as css prop will disable the default small size - } + size: 's', // need to be explicit here as css prop will disable the default small size + } : {})} > diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx index 6bf905b22cecf..89e673d82590f 100644 --- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx @@ -23,13 +23,16 @@ export function RootCauseAnalysisPanel({ const isSeverityColor = color === 'risk' || color === 'neutral'; const panelClassName = color && - color !== 'transparent' && - color !== 'plain' && - color !== 'subdued' && - color !== 'highlighted' + color !== 'transparent' && + color !== 'plain' && + color !== 'subdued' && + color !== 'highlighted' ? css` border: 1px solid; - border-color: ${rgba(isSeverityColor ? theme.colors.severity[color] : theme.colors[color], 0.25)}; + border-color: ${rgba( + isSeverityColor ? theme.colors.severity[color] : theme.colors[color], + 0.25 + )}; ` : undefined;