feat(Signal): update component colors

Closes UXD-1662

src/components/Chip/Chip.tsx

@@ -18,7 +18,7 @@ function Chip({
 
   return (
     <ChipRoot {...props} style={{ ...props.style, ...chipStyles }}>
-      <Inline align="center" gap="1x">
+      <Inline align="center" className="sscds-chip-content" gap="1x">
         {children}
       </Inline>
     </ChipRoot>

src/components/Chip/InteractiveChip.tsx

@@ -33,7 +33,7 @@ function InteractiveChip<E extends ElementType = 'button'>({
 
   return (
     <ChipRoot as={Tag} style={chipStyles} {...dropStylingProps(props)}>
-      <Inline align="center" gap="1x">
+      <Inline align="center" className="sscds-chip-content" gap="1x">
         {children}
       </Inline>
     </ChipRoot>

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);
     }

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 (
-      <HorizontalBars
+      <Vertical3Bars
         criticality={criticalityLevels[kind]}
         title={title ?? `${kind} incident likelihood`}
         {...props}

src/components/Signal/Signal.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 
 import Signal from './Signal';
-import { Inline } from '../layout';
+import { Inline, Stack } from '../layout';
 
 export default {
   title: 'components/Signal',
@@ -125,3 +125,44 @@ export const SizedSignals: Story = () => (
     <Signal kind="info" size={128} />
   </Inline>
 );
+
+export const DarkMode: Story = (args) => (
+  <Stack gap="md">
+    <Inline gap="sm">
+      <Signal {...args} kind="high" variant="severity" />
+      <Signal {...args} kind="medium" variant="severity" />
+      <Signal {...args} kind="low" variant="severity" />
+      <Signal {...args} kind="none" variant="severity" />
+      <Signal {...args} kind="info" variant="severity" />
+      <Signal {...args} kind="positive" variant="severity" />
+    </Inline>
+    <Inline gap="sm">
+      <Signal {...args} kind="high" variant="breachRisk" />
+      <Signal {...args} kind="medium" variant="breachRisk" />
+      <Signal {...args} kind="low" variant="breachRisk" />
+      <Signal {...args} kind="none" variant="breachRisk" />
+    </Inline>
+    <Inline gap="sm">
+      <Signal {...args} kind="critical" variant="businessImpact" />
+      <Signal {...args} kind="high" variant="businessImpact" />
+      <Signal {...args} kind="medium" variant="businessImpact" />
+      <Signal {...args} kind="low" variant="businessImpact" />
+      <Signal {...args} kind="none" variant="businessImpact" />
+    </Inline>
+    <Inline gap="sm">
+      <Signal {...args} kind="critical" variant="incidentLikelihood" />
+      <Signal {...args} kind="high" variant="incidentLikelihood" />
+      <Signal {...args} kind="medium" variant="incidentLikelihood" />
+      <Signal {...args} kind="low" variant="incidentLikelihood" />
+      <Signal {...args} kind="none" variant="incidentLikelihood" />
+    </Inline>
+  </Stack>
+);
+DarkMode.args = {
+  size: 32,
+};
+DarkMode.parameters = {
+  themes: {
+    themeOverride: 'Dark',
+  },
+};

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 (
     <svg
       height={size}
-      style={{ color: 'var(--sscds-impact)' }}
+      style={{ color: 'var(--sscds-color-signal-business-impact)' }}
       viewBox="0 0 18 16"
       width={(size / 16) * 18}
       {...props}
@@ -134,7 +127,7 @@ export function HorizontalBars({
   return (
     <svg
       height={size}
-      style={{ color: criticalityColorsLikelihood[criticality] }}
+      style={{ color: criticalityColorsSeverity[criticality] }}
       viewBox="0 0 16 16"
       width={size}
       {...props}
@@ -143,7 +136,11 @@ export function HorizontalBars({
       {[0, 1, 2].map((v) => (
         <rect
           key={v}
-          fill={v < criticality ? 'currentColor' : 'rgb(0 0 0 / 0.1)'}
+          fill={
+            v < criticality
+              ? 'currentColor'
+              : 'var(--sscds-color-signal-inactive)'
+          }
           height="4"
           rx="2"
           width="16"
@@ -169,10 +166,10 @@ export const Icon = ({
       ...(props.style || {}),
       color:
         signal === 'info'
-          ? `var(--sscds-severity-informational)`
+          ? 'var(--sscds-color-signal-info)'
           : signal === 'positive'
-          ? `var(--sscds-severity-positive)`
-          : '#eb2f40', // we are using fixed color because it's not defined in DS
+          ? 'var(--sscds-color-signal-positive)'
+          : 'var(--sscds-color-signal-high)', // we are using fixed color because it's not defined in DS
     }}
   >
     <title>{title}</title>

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);