diff --git a/.storybook/image-snapshots/expected/components_Signal_Breach Risk.png b/.storybook/image-snapshots/expected/components_Signal_Breach Risk.png index 724b049c8..4a6b9aae5 100644 Binary files a/.storybook/image-snapshots/expected/components_Signal_Breach Risk.png and b/.storybook/image-snapshots/expected/components_Signal_Breach Risk.png differ diff --git a/.storybook/image-snapshots/expected/components_Signal_Business Impact.png b/.storybook/image-snapshots/expected/components_Signal_Business Impact.png index 123d2098c..c46270ac7 100644 Binary files a/.storybook/image-snapshots/expected/components_Signal_Business Impact.png and b/.storybook/image-snapshots/expected/components_Signal_Business Impact.png differ diff --git a/.storybook/image-snapshots/expected/components_Signal_Dark Mode.png b/.storybook/image-snapshots/expected/components_Signal_Dark Mode.png new file mode 100644 index 000000000..0a8f46c86 Binary files /dev/null and b/.storybook/image-snapshots/expected/components_Signal_Dark Mode.png differ diff --git a/.storybook/image-snapshots/expected/components_Signal_Incident Likelihood.png b/.storybook/image-snapshots/expected/components_Signal_Incident Likelihood.png index 2ddc9b131..00cd2cef5 100644 Binary files a/.storybook/image-snapshots/expected/components_Signal_Incident Likelihood.png and b/.storybook/image-snapshots/expected/components_Signal_Incident Likelihood.png differ diff --git a/.storybook/image-snapshots/expected/components_Signal_Severity.png b/.storybook/image-snapshots/expected/components_Signal_Severity.png index 14ca5bf3e..a31df9da8 100644 Binary files a/.storybook/image-snapshots/expected/components_Signal_Severity.png and b/.storybook/image-snapshots/expected/components_Signal_Severity.png differ diff --git a/.storybook/image-snapshots/expected/components_Signal_Sized Signals.png b/.storybook/image-snapshots/expected/components_Signal_Sized Signals.png index 36e9c75eb..f5b769944 100644 Binary files a/.storybook/image-snapshots/expected/components_Signal_Sized Signals.png and b/.storybook/image-snapshots/expected/components_Signal_Sized Signals.png differ diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 18ab96aea..2bfc4603f 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -18,7 +18,7 @@ function Chip({ return ( - + {children} diff --git a/src/components/Chip/InteractiveChip.tsx b/src/components/Chip/InteractiveChip.tsx index d80816ed8..e1eceb049 100644 --- a/src/components/Chip/InteractiveChip.tsx +++ b/src/components/Chip/InteractiveChip.tsx @@ -33,7 +33,7 @@ function InteractiveChip({ return ( - + {children} diff --git a/src/components/Chip/components.tsx b/src/components/Chip/components.tsx index 5df06b049..49d4f94de 100644 --- a/src/components/Chip/components.tsx +++ b/src/components/Chip/components.tsx @@ -23,7 +23,7 @@ export const ChipRoot = styled.div` var(--sscds-interactivechip-color-border-hover, transparent); } - .sscds-chip-label { + .sscds-chip-content > *:not(.sscds-iconbox) { &:first-child { padding-inline-start: var(--sscds-space-1x); } diff --git a/src/components/Signal/IncidentLikelihoodSignal.tsx b/src/components/Signal/IncidentLikelihoodSignal.tsx index 60adb83ea..afec469a9 100644 --- a/src/components/Signal/IncidentLikelihoodSignal.tsx +++ b/src/components/Signal/IncidentLikelihoodSignal.tsx @@ -1,4 +1,4 @@ -import { HorizontalBars, Icon, criticalityLevels } from './common'; +import { Icon, Vertical3Bars, criticalityLevels } from './common'; import { BaseSignalProps, IncidentLikelihoodSignalKinds } from './Signal.types'; function hasValidKind(kind: string): kind is IncidentLikelihoodSignalKinds { @@ -16,7 +16,7 @@ export default function IncidentLikelihoodSignal({ if (kind !== 'critical') { return ( - ( ); + +export const DarkMode: Story = (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +DarkMode.args = { + size: 32, +}; +DarkMode.parameters = { + themes: { + themeOverride: 'Dark', + }, +}; diff --git a/src/components/Signal/common.tsx b/src/components/Signal/common.tsx index 89fed2566..80e014f60 100644 --- a/src/components/Signal/common.tsx +++ b/src/components/Signal/common.tsx @@ -17,16 +17,9 @@ export const criticalityLevels = { const criticalityColorsSeverity = [ undefined, - 'var(--sscds-severity-low)', - 'var(--sscds-severity-medium)', - 'var(--sscds-severity-high)', -]; - -const criticalityColorsLikelihood = [ - undefined, - 'var(--sscds-likelihood-low)', - 'var(--sscds-likelihood-medium)', - 'var(--sscds-likelihood-high)', + 'var(--sscds-color-signal-low)', + 'var(--sscds-color-signal-medium)', + 'var(--sscds-color-signal-high)', ]; function Svg({ @@ -53,7 +46,7 @@ function Svg({ function VerticalBar({ height, xPos, - fill = 'rgb(0 0 0 / 0.1)', + fill = 'var(--sscds-color-signal-inactive)', }: { height: number; xPos: number; @@ -107,7 +100,7 @@ export function Vertical4Bars({ return ( ( {title} diff --git a/src/tokens/color.css b/src/tokens/color.css index 1ce7c7421..86904c380 100644 --- a/src/tokens/color.css +++ b/src/tokens/color.css @@ -80,36 +80,6 @@ } .dark, .dark-theme { - --severity-green-10: #3A975E; - --severity-green-20: #4BBA76; - --severity-green-30: #94D6AE; - --severity-green-40: #BDE6CC; - --severity-green-50: #E9F7EE; - - --severity-yellow-10: #F58D00; - --severity-yellow-20: #FFB147; - --severity-yellow-30: #FFCE85; - --severity-yellow-40: #FFE2B8; - --severity-yellow-50: #FFF4E5; - - --severity-orange-10: #E03C05; - --severity-orange-20: #FB7A4F; - --severity-orange-30: #FCA88C; - --severity-orange-40: #FECEBE; - --severity-orange-50: #FFF0EB; - - --severity-red-10: #CB0C20; - --severity-red-20: #F32E43; - --severity-red-30: #F66979; - --severity-red-40: #F99AA4; - --severity-red-50: #FDDDE1; - - --severity-deepred-10: #9F0F3A; - --severity-deepred-20: #B81143; - --severity-deepred-30: #ED4074; - --severity-deepred-40: #F69DB8; - --severity-deepred-50: #FCDEE7; - --brand-050: #1B0471; --brand-100: #2C1193; --brand-200: #3B1AB7; @@ -212,12 +182,14 @@ --sscds-color-grade-D: var(--severity-red-40); --sscds-color-grade-F: var(--severity-deepred-40); - --sscds-color-severity-critical: var(--severity-deepred-40); - --sscds-color-severity-high: var(--severity-red-40); - --sscds-color-severity-medium: var(--severity-orange-40); - --sscds-color-severity-low: var(--severity-yellow-40); - --sscds-color-severity-info: var(--sscds-color-info-600); - --sscds-color-severity-positive: var(--severity-green-40); + --sscds-color-signal-inactive: var(--sscds-color-neutral-alpha-8); + --sscds-color-signal-critical: var(--severity-deepred-40); + --sscds-color-signal-high: var(--severity-red-40); + --sscds-color-signal-medium: var(--severity-orange-40); + --sscds-color-signal-low: var(--severity-yellow-40); + --sscds-color-signal-info: var(--sscds-color-info-500); + --sscds-color-signal-positive: var(--severity-green-40); + --sscds-color-signal-business-impact: var(--sscds-color-icon-default); --sscds-color-brand-050: var(--brand-050); --sscds-color-brand-100: var(--brand-100);