From 5f0566c22fe2b909c42987f285e529887f40ab6f Mon Sep 17 00:00:00 2001 From: Alex Taker Date: Tue, 29 Aug 2023 16:26:19 -0400 Subject: [PATCH] Update Colors based on feedback (#818) * Color feedback * re-add warning-message until ready for removal --- .../css-library/dist/tokens/css/variables.css | 39 +- .../dist/tokens/figma/colors/variables.json | 7 +- .../dist/tokens/json/variables.json | 539 +++++++++++++++++- .../dist/tokens/scss/variables.scss | 39 +- packages/css-library/tokens/color.json | 3 +- .../storybook/stories/styles/va-icon.scss | 4 + packages/storybook/stories/wc-helpers.jsx | 2 +- 7 files changed, 596 insertions(+), 37 deletions(-) diff --git a/packages/css-library/dist/tokens/css/variables.css b/packages/css-library/dist/tokens/css/variables.css index c9df75905..dae03ed00 100644 --- a/packages/css-library/dist/tokens/css/variables.css +++ b/packages/css-library/dist/tokens/css/variables.css @@ -1,17 +1,16 @@ /** * Do not edit directly - * Generated on Wed, 23 Aug 2023 14:46:33 GMT + * Generated on Tue, 29 Aug 2023 17:17:03 GMT */ :root { --color-base: #212121; --color-white: #ffffff; --color-black: #000000; - --color-orange: #eb7f29; --color-link-default: #004795; --color-link-visited: #4c2c92; --color-warning-message: #fac922; - --color-gibill-accent: #fff1d2; + --color-feedback-warning-background: #fac922; --color-primary: #0071bb; --color-primary-darker: #003e73; --color-primary-darkest: #112e51; @@ -114,15 +113,24 @@ --uswds-system-color-blue-90: #11181d; --uswds-system-color-blue-vivid-50: #0076d6; --uswds-system-color-blue-vivid-60: #005ea2; + --uswds-system-color-blue-cool-60: #2e6276; --uswds-system-color-blue-cool-vivid-5: #e1f3f8; --uswds-system-color-blue-cool-vivid-20: #97d4ea; --uswds-system-color-blue-cool-vivid-40: #28a0cb; --uswds-system-color-blue-cool-vivid-60: #07648d; + --uswds-system-color-blue-warm-10: #e1e7f1; --uswds-system-color-blue-warm-vivid-60: #0050d8; --uswds-system-color-blue-warm-vivid-70: #1a4480; --uswds-system-color-blue-warm-vivid-80: #162e51; + --uswds-system-color-cyan-5: #e7f6f8; + --uswds-system-color-cyan-20: #99deea; --uswds-system-color-cyan-vivid-30: #00bde3; + --uswds-system-color-cyan-vivid-40: #009ec1; --uswds-system-color-gold-vivid-5: #fef0c8; + --uswds-system-color-gold-vivid-10: #ffe396; + --uswds-system-color-gold-vivid-20: #ffbe2e; + --uswds-system-color-gold-vivid-30: #e5a000; + --uswds-system-color-gold-vivid-50: #936f38; --uswds-system-color-gray-1: #fcfcfc; --uswds-system-color-gray-2: #f9f9f9; --uswds-system-color-gray-3: #f6f6f6; @@ -152,7 +160,32 @@ --uswds-system-color-gray-cool-70: #3d4551; --uswds-system-color-gray-cool-80: #2d2e2f; --uswds-system-color-gray-cool-90: #1c1d1f; + --uswds-system-color-gray-warm-10: #e6e6e2; + --uswds-system-color-gray-warm-70: #454540; + --uswds-system-color-green-cool-5: #ecf3ec; + --uswds-system-color-green-cool-20: #b4d0b9; + --uswds-system-color-green-cool-40: #5e9f69; + --uswds-system-color-green-cool-vivid-20: #70e17b; + --uswds-system-color-green-cool-vivid-40: #00a91c; + --uswds-system-color-green-cool-vivid-50: #008817; + --uswds-system-color-green-cool-vivid-60: #216e1f; --uswds-system-color-orange-40: #dd7533; + --uswds-system-color-red-30: #f2938c; + --uswds-system-color-red-50: #d83933; + --uswds-system-color-red-70: #6f3331; + --uswds-system-color-red-vivid-60: #b50909; + --uswds-system-color-red-vivid-70: #8b0a03; + --uswds-system-color-red-cool-vivid-10: #f8dfe2; + --uswds-system-color-red-cool-vivid-50: #e41d3d; + --uswds-system-color-red-cool-vivid-60: #b21d38; + --uswds-system-color-red-cool-vivid-70: #822133; + --uswds-system-color-red-warm-10: #f4e3db; + --uswds-system-color-red-warm-80: #332d29; + --uswds-system-color-red-warm-vivid-30: #f39268; + --uswds-system-color-red-warm-vivid-50: #d54309; + --uswds-system-color-red-warm-vivid-60: #9c3d10; --uswds-system-color-violet-vivid-70: #54278f; --uswds-system-color-yellow-5: #faf3d1; + --uswds-system-color-yellow-vivid-10: #fee685; + --uswds-system-color-yellow-vivid-20: #face00; } diff --git a/packages/css-library/dist/tokens/figma/colors/variables.json b/packages/css-library/dist/tokens/figma/colors/variables.json index 8dc398d90..a3bb78cd4 100644 --- a/packages/css-library/dist/tokens/figma/colors/variables.json +++ b/packages/css-library/dist/tokens/figma/colors/variables.json @@ -9,9 +9,6 @@ "black": { "value": "{uswds-system-color-gray-100}" }, - "orange": { - "value": "#eb7f29" - }, "link-default": { "value": "#004795" }, @@ -21,8 +18,8 @@ "warning-message": { "value": "#fac922" }, - "gibill-accent": { - "value": "#fff1d2" + "feedback-warning-background": { + "value": "#fac922" }, "primary": { "*": { diff --git a/packages/css-library/dist/tokens/json/variables.json b/packages/css-library/dist/tokens/json/variables.json index 36573fec4..ff5e204e0 100644 --- a/packages/css-library/dist/tokens/json/variables.json +++ b/packages/css-library/dist/tokens/json/variables.json @@ -51,23 +51,6 @@ "black" ] }, - "orange": { - "value": "#eb7f29", - "filePath": "tokens/color.json", - "isSource": true, - "original": { - "value": "#eb7f29" - }, - "name": "color-orange", - "attributes": { - "category": "color", - "type": "orange" - }, - "path": [ - "color", - "orange" - ] - }, "link-default": { "value": "#004795", "filePath": "tokens/color.json", @@ -119,21 +102,21 @@ "warning-message" ] }, - "gibill-accent": { - "value": "#fff1d2", + "feedback-warning-background": { + "value": "#fac922", "filePath": "tokens/color.json", "isSource": true, "original": { - "value": "#fff1d2" + "value": "#fac922" }, - "name": "color-gibill-accent", + "name": "color-feedback-warning-background", "attributes": { "category": "color", - "type": "gibill-accent" + "type": "feedback-warning-background" }, "path": [ "color", - "gibill-accent" + "feedback-warning-background" ] }, "primary": { @@ -2005,6 +1988,21 @@ "uswds-system-color-blue-vivid-60" ] }, + "uswds-system-color-blue-cool-60": { + "value": "#2e6276", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#2e6276" + }, + "name": "uswds-system-color-blue-cool-60", + "attributes": { + "category": "uswds-system-color-blue-cool-60" + }, + "path": [ + "uswds-system-color-blue-cool-60" + ] + }, "uswds-system-color-blue-cool-vivid-5": { "value": "#e1f3f8", "filePath": "tokens/uswds.json", @@ -2065,6 +2063,21 @@ "uswds-system-color-blue-cool-vivid-60" ] }, + "uswds-system-color-blue-warm-10": { + "value": "#e1e7f1", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#e1e7f1" + }, + "name": "uswds-system-color-blue-warm-10", + "attributes": { + "category": "uswds-system-color-blue-warm-10" + }, + "path": [ + "uswds-system-color-blue-warm-10" + ] + }, "uswds-system-color-blue-warm-vivid-60": { "value": "#0050d8", "filePath": "tokens/uswds.json", @@ -2110,6 +2123,36 @@ "uswds-system-color-blue-warm-vivid-80" ] }, + "uswds-system-color-cyan-5": { + "value": "#e7f6f8", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#e7f6f8" + }, + "name": "uswds-system-color-cyan-5", + "attributes": { + "category": "uswds-system-color-cyan-5" + }, + "path": [ + "uswds-system-color-cyan-5" + ] + }, + "uswds-system-color-cyan-20": { + "value": "#99deea", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#99deea" + }, + "name": "uswds-system-color-cyan-20", + "attributes": { + "category": "uswds-system-color-cyan-20" + }, + "path": [ + "uswds-system-color-cyan-20" + ] + }, "uswds-system-color-cyan-vivid-30": { "value": "#00bde3", "filePath": "tokens/uswds.json", @@ -2125,6 +2168,21 @@ "uswds-system-color-cyan-vivid-30" ] }, + "uswds-system-color-cyan-vivid-40": { + "value": "#009ec1", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#009ec1" + }, + "name": "uswds-system-color-cyan-vivid-40", + "attributes": { + "category": "uswds-system-color-cyan-vivid-40" + }, + "path": [ + "uswds-system-color-cyan-vivid-40" + ] + }, "uswds-system-color-gold-vivid-5": { "value": "#fef0c8", "filePath": "tokens/uswds.json", @@ -2140,6 +2198,66 @@ "uswds-system-color-gold-vivid-5" ] }, + "uswds-system-color-gold-vivid-10": { + "value": "#ffe396", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#ffe396" + }, + "name": "uswds-system-color-gold-vivid-10", + "attributes": { + "category": "uswds-system-color-gold-vivid-10" + }, + "path": [ + "uswds-system-color-gold-vivid-10" + ] + }, + "uswds-system-color-gold-vivid-20": { + "value": "#ffbe2e", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#ffbe2e" + }, + "name": "uswds-system-color-gold-vivid-20", + "attributes": { + "category": "uswds-system-color-gold-vivid-20" + }, + "path": [ + "uswds-system-color-gold-vivid-20" + ] + }, + "uswds-system-color-gold-vivid-30": { + "value": "#e5a000", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#e5a000" + }, + "name": "uswds-system-color-gold-vivid-30", + "attributes": { + "category": "uswds-system-color-gold-vivid-30" + }, + "path": [ + "uswds-system-color-gold-vivid-30" + ] + }, + "uswds-system-color-gold-vivid-50": { + "value": "#936f38", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#936f38" + }, + "name": "uswds-system-color-gold-vivid-50", + "attributes": { + "category": "uswds-system-color-gold-vivid-50" + }, + "path": [ + "uswds-system-color-gold-vivid-50" + ] + }, "uswds-system-color-gray-1": { "value": "#fcfcfc", "filePath": "tokens/uswds.json", @@ -2575,6 +2693,141 @@ "uswds-system-color-gray-cool-90" ] }, + "uswds-system-color-gray-warm-10": { + "value": "#e6e6e2", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#e6e6e2" + }, + "name": "uswds-system-color-gray-warm-10", + "attributes": { + "category": "uswds-system-color-gray-warm-10" + }, + "path": [ + "uswds-system-color-gray-warm-10" + ] + }, + "uswds-system-color-gray-warm-70": { + "value": "#454540", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#454540" + }, + "name": "uswds-system-color-gray-warm-70", + "attributes": { + "category": "uswds-system-color-gray-warm-70" + }, + "path": [ + "uswds-system-color-gray-warm-70" + ] + }, + "uswds-system-color-green-cool-5": { + "value": "#ecf3ec", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#ecf3ec" + }, + "name": "uswds-system-color-green-cool-5", + "attributes": { + "category": "uswds-system-color-green-cool-5" + }, + "path": [ + "uswds-system-color-green-cool-5" + ] + }, + "uswds-system-color-green-cool-20": { + "value": "#b4d0b9", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#b4d0b9" + }, + "name": "uswds-system-color-green-cool-20", + "attributes": { + "category": "uswds-system-color-green-cool-20" + }, + "path": [ + "uswds-system-color-green-cool-20" + ] + }, + "uswds-system-color-green-cool-40": { + "value": "#5e9f69", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#5e9f69" + }, + "name": "uswds-system-color-green-cool-40", + "attributes": { + "category": "uswds-system-color-green-cool-40" + }, + "path": [ + "uswds-system-color-green-cool-40" + ] + }, + "uswds-system-color-green-cool-vivid-20": { + "value": "#70e17b", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#70e17b" + }, + "name": "uswds-system-color-green-cool-vivid-20", + "attributes": { + "category": "uswds-system-color-green-cool-vivid-20" + }, + "path": [ + "uswds-system-color-green-cool-vivid-20" + ] + }, + "uswds-system-color-green-cool-vivid-40": { + "value": "#00a91c", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#00a91c" + }, + "name": "uswds-system-color-green-cool-vivid-40", + "attributes": { + "category": "uswds-system-color-green-cool-vivid-40" + }, + "path": [ + "uswds-system-color-green-cool-vivid-40" + ] + }, + "uswds-system-color-green-cool-vivid-50": { + "value": "#008817", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#008817" + }, + "name": "uswds-system-color-green-cool-vivid-50", + "attributes": { + "category": "uswds-system-color-green-cool-vivid-50" + }, + "path": [ + "uswds-system-color-green-cool-vivid-50" + ] + }, + "uswds-system-color-green-cool-vivid-60": { + "value": "#216e1f", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#216e1f" + }, + "name": "uswds-system-color-green-cool-vivid-60", + "attributes": { + "category": "uswds-system-color-green-cool-vivid-60" + }, + "path": [ + "uswds-system-color-green-cool-vivid-60" + ] + }, "uswds-system-color-orange-40": { "value": "#dd7533", "filePath": "tokens/uswds.json", @@ -2590,6 +2843,216 @@ "uswds-system-color-orange-40" ] }, + "uswds-system-color-red-30": { + "value": "#f2938c", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#f2938c" + }, + "name": "uswds-system-color-red-30", + "attributes": { + "category": "uswds-system-color-red-30" + }, + "path": [ + "uswds-system-color-red-30" + ] + }, + "uswds-system-color-red-50": { + "value": "#d83933", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#d83933" + }, + "name": "uswds-system-color-red-50", + "attributes": { + "category": "uswds-system-color-red-50" + }, + "path": [ + "uswds-system-color-red-50" + ] + }, + "uswds-system-color-red-70": { + "value": "#6f3331", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#6f3331" + }, + "name": "uswds-system-color-red-70", + "attributes": { + "category": "uswds-system-color-red-70" + }, + "path": [ + "uswds-system-color-red-70" + ] + }, + "uswds-system-color-red-vivid-60": { + "value": "#b50909", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#b50909" + }, + "name": "uswds-system-color-red-vivid-60", + "attributes": { + "category": "uswds-system-color-red-vivid-60" + }, + "path": [ + "uswds-system-color-red-vivid-60" + ] + }, + "uswds-system-color-red-vivid-70": { + "value": "#8b0a03", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#8b0a03" + }, + "name": "uswds-system-color-red-vivid-70", + "attributes": { + "category": "uswds-system-color-red-vivid-70" + }, + "path": [ + "uswds-system-color-red-vivid-70" + ] + }, + "uswds-system-color-red-cool-vivid-10": { + "value": "#f8dfe2", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#f8dfe2" + }, + "name": "uswds-system-color-red-cool-vivid-10", + "attributes": { + "category": "uswds-system-color-red-cool-vivid-10" + }, + "path": [ + "uswds-system-color-red-cool-vivid-10" + ] + }, + "uswds-system-color-red-cool-vivid-50": { + "value": "#e41d3d", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#e41d3d" + }, + "name": "uswds-system-color-red-cool-vivid-50", + "attributes": { + "category": "uswds-system-color-red-cool-vivid-50" + }, + "path": [ + "uswds-system-color-red-cool-vivid-50" + ] + }, + "uswds-system-color-red-cool-vivid-60": { + "value": "#b21d38", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#b21d38" + }, + "name": "uswds-system-color-red-cool-vivid-60", + "attributes": { + "category": "uswds-system-color-red-cool-vivid-60" + }, + "path": [ + "uswds-system-color-red-cool-vivid-60" + ] + }, + "uswds-system-color-red-cool-vivid-70": { + "value": "#822133", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#822133" + }, + "name": "uswds-system-color-red-cool-vivid-70", + "attributes": { + "category": "uswds-system-color-red-cool-vivid-70" + }, + "path": [ + "uswds-system-color-red-cool-vivid-70" + ] + }, + "uswds-system-color-red-warm-10": { + "value": "#f4e3db", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#f4e3db" + }, + "name": "uswds-system-color-red-warm-10", + "attributes": { + "category": "uswds-system-color-red-warm-10" + }, + "path": [ + "uswds-system-color-red-warm-10" + ] + }, + "uswds-system-color-red-warm-80": { + "value": "#332d29", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#332d29" + }, + "name": "uswds-system-color-red-warm-80", + "attributes": { + "category": "uswds-system-color-red-warm-80" + }, + "path": [ + "uswds-system-color-red-warm-80" + ] + }, + "uswds-system-color-red-warm-vivid-30": { + "value": "#f39268", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#f39268" + }, + "name": "uswds-system-color-red-warm-vivid-30", + "attributes": { + "category": "uswds-system-color-red-warm-vivid-30" + }, + "path": [ + "uswds-system-color-red-warm-vivid-30" + ] + }, + "uswds-system-color-red-warm-vivid-50": { + "value": "#d54309", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#d54309" + }, + "name": "uswds-system-color-red-warm-vivid-50", + "attributes": { + "category": "uswds-system-color-red-warm-vivid-50" + }, + "path": [ + "uswds-system-color-red-warm-vivid-50" + ] + }, + "uswds-system-color-red-warm-vivid-60": { + "value": "#9c3d10", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#9c3d10" + }, + "name": "uswds-system-color-red-warm-vivid-60", + "attributes": { + "category": "uswds-system-color-red-warm-vivid-60" + }, + "path": [ + "uswds-system-color-red-warm-vivid-60" + ] + }, "uswds-system-color-violet-vivid-70": { "value": "#54278f", "filePath": "tokens/uswds.json", @@ -2619,5 +3082,35 @@ "path": [ "uswds-system-color-yellow-5" ] + }, + "uswds-system-color-yellow-vivid-10": { + "value": "#fee685", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#fee685" + }, + "name": "uswds-system-color-yellow-vivid-10", + "attributes": { + "category": "uswds-system-color-yellow-vivid-10" + }, + "path": [ + "uswds-system-color-yellow-vivid-10" + ] + }, + "uswds-system-color-yellow-vivid-20": { + "value": "#face00", + "filePath": "tokens/uswds.json", + "isSource": true, + "original": { + "value": "#face00" + }, + "name": "uswds-system-color-yellow-vivid-20", + "attributes": { + "category": "uswds-system-color-yellow-vivid-20" + }, + "path": [ + "uswds-system-color-yellow-vivid-20" + ] } } diff --git a/packages/css-library/dist/tokens/scss/variables.scss b/packages/css-library/dist/tokens/scss/variables.scss index 0e742cf2f..2168c761d 100644 --- a/packages/css-library/dist/tokens/scss/variables.scss +++ b/packages/css-library/dist/tokens/scss/variables.scss @@ -1,15 +1,14 @@ // Do not edit directly -// Generated on Wed, 23 Aug 2023 14:46:33 GMT +// Generated on Tue, 29 Aug 2023 17:17:03 GMT $color-base: #212121; $color-white: #ffffff; $color-black: #000000; -$color-orange: #eb7f29; $color-link-default: #004795; $color-link-visited: #4c2c92; $color-warning-message: #fac922; -$color-gibill-accent: #fff1d2; +$color-feedback-warning-background: #fac922; $color-primary: #0071bb; $color-primary-darker: #003e73; $color-primary-darkest: #112e51; @@ -112,15 +111,24 @@ $uswds-system-color-blue-80: #1f303e; $uswds-system-color-blue-90: #11181d; $uswds-system-color-blue-vivid-50: #0076d6; $uswds-system-color-blue-vivid-60: #005ea2; +$uswds-system-color-blue-cool-60: #2e6276; $uswds-system-color-blue-cool-vivid-5: #e1f3f8; $uswds-system-color-blue-cool-vivid-20: #97d4ea; $uswds-system-color-blue-cool-vivid-40: #28a0cb; $uswds-system-color-blue-cool-vivid-60: #07648d; +$uswds-system-color-blue-warm-10: #e1e7f1; $uswds-system-color-blue-warm-vivid-60: #0050d8; $uswds-system-color-blue-warm-vivid-70: #1a4480; $uswds-system-color-blue-warm-vivid-80: #162e51; +$uswds-system-color-cyan-5: #e7f6f8; +$uswds-system-color-cyan-20: #99deea; $uswds-system-color-cyan-vivid-30: #00bde3; +$uswds-system-color-cyan-vivid-40: #009ec1; $uswds-system-color-gold-vivid-5: #fef0c8; +$uswds-system-color-gold-vivid-10: #ffe396; +$uswds-system-color-gold-vivid-20: #ffbe2e; +$uswds-system-color-gold-vivid-30: #e5a000; +$uswds-system-color-gold-vivid-50: #936f38; $uswds-system-color-gray-1: #fcfcfc; $uswds-system-color-gray-2: #f9f9f9; $uswds-system-color-gray-3: #f6f6f6; @@ -150,6 +158,31 @@ $uswds-system-color-gray-cool-60: #565c65; $uswds-system-color-gray-cool-70: #3d4551; $uswds-system-color-gray-cool-80: #2d2e2f; $uswds-system-color-gray-cool-90: #1c1d1f; +$uswds-system-color-gray-warm-10: #e6e6e2; +$uswds-system-color-gray-warm-70: #454540; +$uswds-system-color-green-cool-5: #ecf3ec; +$uswds-system-color-green-cool-20: #b4d0b9; +$uswds-system-color-green-cool-40: #5e9f69; +$uswds-system-color-green-cool-vivid-20: #70e17b; +$uswds-system-color-green-cool-vivid-40: #00a91c; +$uswds-system-color-green-cool-vivid-50: #008817; +$uswds-system-color-green-cool-vivid-60: #216e1f; $uswds-system-color-orange-40: #dd7533; +$uswds-system-color-red-30: #f2938c; +$uswds-system-color-red-50: #d83933; +$uswds-system-color-red-70: #6f3331; +$uswds-system-color-red-vivid-60: #b50909; +$uswds-system-color-red-vivid-70: #8b0a03; +$uswds-system-color-red-cool-vivid-10: #f8dfe2; +$uswds-system-color-red-cool-vivid-50: #e41d3d; +$uswds-system-color-red-cool-vivid-60: #b21d38; +$uswds-system-color-red-cool-vivid-70: #822133; +$uswds-system-color-red-warm-10: #f4e3db; +$uswds-system-color-red-warm-80: #332d29; +$uswds-system-color-red-warm-vivid-30: #f39268; +$uswds-system-color-red-warm-vivid-50: #d54309; +$uswds-system-color-red-warm-vivid-60: #9c3d10; $uswds-system-color-violet-vivid-70: #54278f; $uswds-system-color-yellow-5: #faf3d1; +$uswds-system-color-yellow-vivid-10: #fee685; +$uswds-system-color-yellow-vivid-20: #face00; diff --git a/packages/css-library/tokens/color.json b/packages/css-library/tokens/color.json index 588f2ae1d..9934ee832 100644 --- a/packages/css-library/tokens/color.json +++ b/packages/css-library/tokens/color.json @@ -3,11 +3,10 @@ "base": { "value": "#212121"}, "white": { "value": "#ffffff"}, "black": { "value": "{uswds-system-color-gray-100}"}, - "orange": { "value": "#eb7f29"}, "link-default": { "value": "#004795"}, "link-visited": { "value": "#4c2c92"}, "warning-message": { "value": "#fac922"}, - "gibill-accent": { "value": "#fff1d2"}, + "feedback-warning-background": { "value": "#fac922"}, "primary": { "*": { "value": "#0071bb"}, "darker": { "value": "#003e73"}, diff --git a/packages/storybook/stories/styles/va-icon.scss b/packages/storybook/stories/styles/va-icon.scss index 8bfafe95f..cd33d7eb0 100644 --- a/packages/storybook/stories/styles/va-icon.scss +++ b/packages/storybook/stories/styles/va-icon.scss @@ -13,3 +13,7 @@ height: 200px; border: 1px solid lightgray } + +.storybook-background-color-orange { + background-color: #eb7f29; +} \ No newline at end of file diff --git a/packages/storybook/stories/wc-helpers.jsx b/packages/storybook/stories/wc-helpers.jsx index 5ab413d98..821e0a241 100644 --- a/packages/storybook/stories/wc-helpers.jsx +++ b/packages/storybook/stories/wc-helpers.jsx @@ -154,7 +154,7 @@ export function MaturityScale({ category, level }) { colors = 'vads-u-background-color--green-darker'; break; case 'USE WITH CAUTION': - colors = 'vads-u-background-color--orange vads-u-color--base'; + colors = 'storybook-background-color-orange vads-u-color--base'; break; case "DON'T USE": colors = 'vads-u-background-color--secondary-darkest';