[Bug] Update colors for Status indicators (#3346)

* update colors on Status indicators

* update colors 2

* update green 40

* update icon colors

* fix(color): update status-success to new values

* update images from Jeannie

---------

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

src/components/ColorGrid/ColorGrid.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   colors,
   black100,
-  green60,
+  green50,
   orange40,
   red60,
   white0,
@@ -34,7 +34,7 @@ export default function ColorGrid({ colorFamily, ...rest }) {
         <ColorSwatch hex={red60} />
         <ColorSwatch hex={orange40} />
         <ColorSwatch hex={yellow20} />
-        <ColorSwatch hex={green60} />
+        <ColorSwatch hex={green50} />
       </div>
     );
   }

src/data/guidelines/color-tokens.js

@@ -1922,12 +1922,12 @@ const colorTokens = {
       role: ['Success', 'On'],
       value: {
         white: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Green 50',
+          hex: '#24a148',
         },
         g10: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Green 50',
+          hex: '#24a148',
         },
         g90: {
           name: 'Green 40',

src/data/status-indicators/palettes.js

@@ -5,21 +5,32 @@ export const statusLight = [
     light: true,
   },
   {
-    name: 'Green 60',
-    hex: '198038',
+    name: 'Green 50',
+    hex: '24A148',
     light: true,
   },
   {
-    name: 'Orange 50',
-    hex: 'eb6200',
+    name: 'Orange 40',
+    hex: 'ff832b',
     light: false,
   },
-  { name: 'Blue 60', hex: '0f62fe', light: true },
+  {
+    name: 'Orange 60 (outline)',
+    hex: 'ba4e00',
+    light: true,
+  },
+
   {
     name: 'Yellow 30',
     hex: 'f1c21b',
     light: false,
   },
+  {
+    name: 'Yellow 60 (outline)',
+    hex: '8e6a00',
+    light: true,
+  },
+  { name: 'Blue 70', hex: '0043ce', light: true },
   { name: 'Purple 60', hex: '8a3ffc', light: true },
   {
     name: 'Gray 60',
@@ -35,8 +46,8 @@ export const statusDark = [
     light: false,
   },
   {
-    name: 'Green 50',
-    hex: '24a148',
+    name: 'Green 40',
+    hex: '42be65',
     light: false,
   },
   {

src/data/status-indicators/status-indicators.yaml

@@ -1,6 +1,6 @@
 high:
   - name: Failure
-    token: $support-01
+    token: $support-error
     description: Indicates a process failure that needs immediate attention
     usage: failed processes, emergencies, urgent alerts
     fileNames:
@@ -10,21 +10,21 @@ high:
     fileNames:
       - warning-filled
       - warning-outline
-    token: $support-01
+    token: $support-error
     description:
       Indicates an error (often inline) that needs immediate attention
     usage: warnings, errors, alerts, failure
   - name: Warning alt
     fileNames:
       - warning-hex-filled
       - warning-hex-outline
-    token: $support-01
+    token: $support-error
     description: Carries the same meaning as ‘Warning’
   - name: Misuse
     fileNames:
       - misuse-filled
       - misuse-outline
-    token: $support-01
+    token: $support-error
     description:
       Indicates unavailability, an incorrect use case (especially in usage
       guidance), or a run that has been cancelled
@@ -42,7 +42,7 @@ high:
     fileNames:
       - caution-filled
       - caution-outline
-    token: $support-03/Yellow 60 outline, $support-03
+    token: $support-warning/Yellow 60 outline, $support-warning
     description:
       Indicates the existence of a non-service affecting fault condition
       requiring corrective action to prevent a more serious fault
@@ -61,31 +61,31 @@ medium:
     fileNames:
       - checkmark-circle-green-filled
       - checkmark-circle-green-outline
-    token: $support-02
+    token: $support-success
     description:
       Indicates stability or the clearing of one or more reported alarms;
       implies no issues are present
     usage: success, completion, stability, active states
   - name: Normal alt
     fileNames:
       - checkmark
-    token: $support-02
+    token: $support-success
     description:
       Carries the same meaning as ‘Normal’ but is more often used in data tables
       and confined spaces
   - name: Success
     fileNames:
       - checkmark-circle-blue-filled
       - checkmark-circle-blue-outline
-    token: $support-04
+    token: $support-info
     description:
       Indicates success at the end of a process (usually used as an interactive
       state within Carbon components, hence the color change)
     usage: success, completion
   - name: In progress
     fileNames:
       - inprogress
-    token: $support-04
+    token: $support-info
     description:
       Indicates a process has started but has not finished running (icon will be
       replaced by ‘checkmark’ or ‘warning’ icon when the status of the job
@@ -94,15 +94,15 @@ medium:
   - name: Incomplete
     fileNames:
       - incomplete
-    token: $support-04
+    token: $support-info
     description:
       Indicates a stepped process has begun but is not yet finished (icon
       appears in Carbon’s Progress Indicator component)
     usage: incomplete tasks
   - name: Not started
     fileNames:
       - circle-dash
-    token: $support-04
+    token: $support-info
     description:
       Indicates that a job or step (in Carbon’s Progress Indicator) has not yet
       been started
@@ -132,37 +132,37 @@ low:
       - help-filled
       - help-outline
   - name: Information
-    token: $support-04
+    token: $support-info
     description: Indicates additional (non-essential) information is available
     usage: additional information, exceptions
     fileNames:
       - information-circle-filled
       - information-circle-outline
   - name: Information alt
-    token: $support-04
+    token: $support-info
     description: Carries the same meaning as ‘Information’
     fileNames:
       - information-square-filled
       - information-square-outline
 glyph:
   - name: Failure
-    token: $support-01
+    token: $support-error
     description:
       Indicates a severe process failure or error that needs immediate attention
     usage:
       critical failures, emergencies urgent alerts, deprecation and cancellation
     fileNames:
       - failure
   - name: Critical severity
-    token: $support-01
+    token: $support-error
     description:
       Indicates critical severity threat, critical severity object (like an IP),
       or critical 
risk of a data breach; based on a 1–10 scale
     usage: critical (10) threat, critical risk, critical severity warnings
     fileNames:
       - critical-severity
   - name: High severity
-    token: $support-01
+    token: $support-error
     description:
       Indicates high severity threat, high severity object (like an IP), or high
       risk of a data breach; based on a 1–10 scale
@@ -178,15 +178,15 @@ glyph:
     fileNames:
       - medium-severity
   - name: Low severity
-    token: $support-03/Yellow 60 stroke, $support-03
+    token: $support-warning/Yellow 60 stroke, $support-warning
     description:
       Indicates low severity threat, low severity object (like an IP), or low
       risk of a data breach; based on a 1–10 scale
     usage: low threat (0–3), low risk, low severity warnings
     fileNames:
       - low-severity
   - name: Caution
-    token: $support-03/Yellow 60 stroke, $support-03
+    token: $support-warning/Yellow 60 stroke, $support-warning
     description:
       When not using the Security risk/severity scale, this can be used to
       indicate 
the existence of a non-service affecting fault condition
@@ -202,29 +202,29 @@ glyph:
     fileNames:
       - undefined
   - name: Stable
-    token: $support-02
+    token: $support-success
     description:
       Indicates stability or the clearing of one or more reported alarms;
       implies no issues are present
     usage: success, completion, stability, active states
     fileNames:
       - circle-fill
   - name: New
-    token: $support-04
+    token: $support-info
     description: Indicates a new components, features or pieces of content
     usage: new items, additional information
     fileNames:
       - new
   - name: Information
-    token: $support-04
+    token: $support-info
     description:
       Indicates additional information is available (can be used adaptively for
       statuses not taken into account by this table)
     usage: additional information, wild card
     fileNames:
       - square-fill
   - name: Incomplete
-    token: $support-04
+    token: $support-info
     description:
       Indicates a process has started but not finished running or a user task is
       unfinished