Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Update colors for Status indicators #3346

Merged
merged 8 commits into from
Jan 30, 2023
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/ColorGrid/ColorGrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import {
colors,
black100,
green60,
green50,
orange40,
red60,
white0,
Expand Down Expand Up @@ -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>
);
}
Expand Down
8 changes: 4 additions & 4 deletions src/data/guidelines/color-tokens.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
25 changes: 18 additions & 7 deletions src/data/status-indicators/palettes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -35,8 +46,8 @@ export const statusDark = [
light: false,
},
{
name: 'Green 50',
hex: '24a148',
name: 'Green 40',
hex: '42be65',
light: false,
},
{
Expand Down
44 changes: 22 additions & 22 deletions src/data/status-indicators/status-indicators.yaml
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions static/status-icons/glyph/dark/circle-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 10 additions & 11 deletions static/status-icons/glyph/light/circle-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions static/status-icons/glyph/light/incomplete.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 10 additions & 11 deletions static/status-icons/glyph/light/new.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions static/status-icons/glyph/light/square-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading