VACMS-15308: update color variables in css (includes VACMS-14268). (#…

…19520) * Adds color variable modifications as specified by UX. * updates .storybook/cssVariables.json * trimmed storybook color variables; updated theme scss in accordance with trimmed storybook color variables * fixes typo on --va-mint * updates alert component colors * updates button component colors * updates announcement, input, and sitewide-alert components * scrubs --*mint, --*sky, --*blush, --*sand * VACMS-15308: initial updates to colors * VACMS-15308: updated colors in css * VACMS-15308: Removing duplicate overrides. * VACMS-15308: Changing references for the button on kb pages. * VACMS-15308: Removing proofing class, linting, changing out removed color variables. --------- Co-authored-by: Tony Taylor <[email protected]> Co-authored-by: Edmund Dunn <[email protected]>
department-of-veterans-affairs · Oct 23, 2024 · 002edcf · 002edcf
1 parent a6b896a
commit 002edcf
Show file tree

Hide file tree

Showing 52 changed files with 1,654 additions and 1,539 deletions.
diff --git a/docroot/design-system/.storybook/cssVariables.js b/docroot/design-system/.storybook/cssVariables.js
@@ -6,12 +6,15 @@
  */
 const postcss = require('postcss');
 const postcssExtract = require('@csstools/postcss-extract');
+const postcssSass = require('@csstools/postcss-sass');
 const fs = require('fs');
 const path = require('path');
 
 fs.readFile(path.resolve(__dirname,'../components/tokens/_variables.scss'), (err, css) => {
   postcss({
+    syntax: require('postcss-scss'),
     plugins: [
+      postcssSass(),
       postcssExtract({
         queries: {
           'custom-properties': 'rule[selector*=":root" i] > decl[variable]'
@@ -37,6 +40,7 @@ fs.readFile(path.resolve(__dirname,'../components/tokens/_variables.scss'), (err
       })
     ]
   }).process(css, {
+    syntax: require('postcss-scss'),
     from: path.resolve(__dirname, '../components/tokens/_variables.scss'),
     to: '' // don't need a css file here, just want the .json output frm above
   }).then(result => {

diff --git a/docroot/design-system/.storybook/cssVariables.json b/docroot/design-system/.storybook/cssVariables.json
@@ -1,69 +1,54 @@
 {
   "custom-properties": {
-    "--va-gray-lightest": "#e5e3e1",
-    "--va-gray-lighter": "#e4e2e0",
-    "--va-gray-light": "#d3d3d3",
-    "--va-gray-med": "#757576",
-    "--va-gray-dark": "#595959",
-    "--va-gray-darker": "#494440",
+    "--va-gray-lightest": "#f1f1f1",
+    "--va-gray-med": "#aeb0b5",
     "--va-gray-darkest": "#212121",
-    "--va-gray-cool-lightest": "#f1f4f9",
-    "--va-gray-cool-lighter": "#e7ecf4",
-    "--va-gray-cool-light": "#dce4ef",
-    "--va-gray-cool": "#d1d9e3",
-    "--va-gray-cool-med": "#aeb0b5",
-    "--va-gray-cool-dark": "#5b616b",
-    "--va-gray-cool-darker": "#323a45",
-    "--va-gray-button-hover": "#c1c2c7",
     "--va-blue-lightest": "#f0f6fb",
-    "--va-blue-lighter": "#e4eff9",
-    "--va-blue-light": "#d9e8f6",
-    "--va-blue": "#3e94cf",
-    "--va-blue-med": "#0071bb",
     "--va-blue-dark": "#004795",
-    "--va-blue-darker": "#003e73",
     "--va-blue-darkest": "#112e51",
-    "--va-blue-bright": "#9bdaf1",
-    "--va-blue-bright-med": "#02bfe7",
-    "--va-blue-bright-med-dark": "#00a6d2",
-    "--va-blue-bright-dark": "#046b99",
     "--va-gold-lightest": "#fff1d2",
-    "--va-gold-lighter": "#fad980",
-    "--va-gold": "#f9c642",
     "--va-gold-med": "#fdb81e",
-    "--va-green-lightest": "#d5e7d9",
-    "--va-green-light": "#4aa564",
+    "--va-gold-dark": "#c58702",
+    "--va-green-lightest": "#e7f4e4",
     "--va-green": "#2e8540",
     "--va-green-dark": "#195c27",
-    "--va-green-alt": "#0fa56f",
-    "--va-green-alt-bright": "#1bc47d",
     "--va-red-lightest": "#f9dede",
-    "--va-red": "#f24f44",
-    "--va-red-alt-dark": "#d04037",
-    "--va-red-bright": "#e31c3d",
     "--va-red-dark": "#cd2026",
     "--va-red-darker": "#981b1e",
-    "--va-sky": "#f0f6fb",
-    "--va-sand": "#fdf5e3",
-    "--va-blush": "#fbf0ec",
-    "--va-mint": "#f6fdf4",
-    "--color-white": "#fff",
-    "--color-black": "#000",
-    "--color-textfield-counter-warning": "#C58702",
-    "--color-textfield-counter-over": "#B20D01",
-    "--color-sky": "#f0f6fb",
-    "--color-sand": "#fdf5e3",
-    "--color-blush": "#fbf0Ec",
-    "--color-mint": "#f6fdf4",
+    "--va-white": "#ffffff",
+    "--va-black": "#212121",
+    "--color-textfield-counter-warning": "var(--va-gold-dark)",
+    "--color-textfield-counter-over": "var(--va-red-dark)",
+    "--color-absolutezero": "var(--va-blue-dark)",
+    "--color-absolutezero-hover": "var(--va-blue-dark)",
+    "--color-absolutezero-active": "var(--va-blue-darkest)",
+    "--color-sunglow": "var(--va-gold-med)",
+    "--color-maximumred": "var(--va-red-dark)",
+    "--color-lightninggreen": "var(--va-green-dark)",
+    "--color-lightgray": "var(--va-gray-lightest)",
+    "--color-whitesmoke": "var(--va-gray-lightest)",
+    "--color-text": "var(--va-gray-darkest)",
+    "--color-grayblue": "var(--va-gray-lightest)",
+    "--color-davysgray": "var(--va-gray-darkest)",
+    "--color-bgblue-hover": "var(--va-blue-lightest)",
+    "--color-bgblue-active": "var(--va-blue-lightest)",
+    "--button-fg-color--primary": "var(--va-white)",
+    "--button--hover-bg-color--primary": "#002f62",
+    "--button-bg-color--primary": "var(--va-blue-dark)",
+    "--button-bg-color": "var(--va-gray-med)",
+    "--button--hover-bg-color": "#93969d",
+    "--input-fg-color-description--alt": "var(--va-gray-darkest)",
+    "--input--hover-border-color": "var(--va-blue-darkest)",
+    "--input--disabled-fg-color": "var(--va-gray-darkest)",
     "--spacing-xxs": "0.25rem",
     "--spacing-xs": "0.5rem",
     "--spacing-s": "0.75rem",
     "--spacing-m": "1rem",
     "--spacing-l": "1.5rem",
     "--spacing-ll": "2rem",
     "--spacing-xl": "3rem",
-    "--font-family-sans": "'Source Sans Pro', sans-serif",
-    "--font-family-serif": "'Bitter', serif",
+    "--font-family-sans": "\"Source Sans Pro\", sans-serif",
+    "--font-family-serif": "\"Bitter\", serif",
     "--va-display-xl": "48px",
     "--va-display-l": "40px",
     "--va-display-m": "32px",
@@ -72,24 +57,8 @@
     "--va-subsection-xs": "15px",
     "--va-text": "18px",
     "--va-helptext": "14px",
-    "--color-absolutezero": "var(--va-blue-med)",
-    "--color-absolutezero-hover": "var(--va-blue-dark)",
-    "--color-absolutezero-active": "var(--va-blue-darker)",
-    "--color-sunglow": "var(--va-gold-med)",
-    "--color-maximumred": "var(--va-red-bright)",
-    "--color-lightninggreen": "var(--va-green)",
-    "--color-lightgray": "var(--va-gray-lighter)",
-    "--color-whitesmoke": "var(--va-gray-lightest)",
-    "--color-text": "var(--va-gray-darkest)",
-    "--color-grayblue": "var(--va-gray-cool-med)",
-    "--color-davysgray": "var(--va-gray-med)",
-    "--color-bgblue-hover": "var(--va-blue-light)",
-    "--color-bgblue-active": "var(--va-blue-light)",
     "--messages__text-margin": "0",
-    "--input-fg-color-description--alt": "var(--va-gray-dark)",
-    "--input--hover-border-color": "var(--va-blue-darker)",
-    "--input--disabled-fg-color": "var(--va-gray-darkest)",
     "--focus-outline": "2px dotted transparent",
-    "--focus-box-shadow": "0 0 0 2px #fff, 0 0 0 5px #26a769"
+    "--focus-box-shadow": "0 0 0 2px #fff, 0 0 0 5px var(--va-green)"
   }
 }
diff --git a/docroot/design-system/.storybook/storybook-styles.scss b/docroot/design-system/.storybook/storybook-styles.scss
@@ -2,14 +2,14 @@
  * This file is solely for extra styles needed by various sb-*.twig files.
  * It is not included in the output bundle for Drupal.
  */
-@import './claro.scss';
+@import "./claro.scss";
 
 .swatch-color {
   padding: 2rem;
 }
 
 .spacer {
-  background-color: var(--va-blue-light);
+  background-color: var(--va-blue-lightest);
 
   p {
     margin: var(--spacing-xxs);
@@ -18,7 +18,7 @@
 
 code {
   color: var(--va-gray-darkest);
-  background-color: var(--va-gray-cool-light);
+  background-color: var(--va-gray-lightest);
   font-size: var(--va-text);
   padding: var(--spacing-l);
   display: inline-block;

diff --git a/docroot/design-system/components/alert/alert.scss b/docroot/design-system/components/alert/alert.scss
@@ -36,10 +36,10 @@
 .va-alert.messages--success,
 .va-alert.messages--status {
   background-color: var(--va-green-lightest);
-  border-color: var(--va-green);
+  border-color: var(--va-green-dark);
 
   svg {
-    color: var(--va-green);
+    color: var(--va-green-dark);
   }
 }
 
@@ -63,13 +63,13 @@
 
 .va-alert.messages--error {
   background-color: var(--va-red-lightest);
-  border-color: var(--va-red-bright);
+  border-color: var(--va-red-dark);
 
   svg {
-    color: var(--va-red-bright);
+    color: var(--va-red-dark);
   }
 }
 
 .va-alert.messages--error a {
   background-color: var(--va-red-lightest);
-}
+}
diff --git a/docroot/design-system/components/announcement-block/announcement.scss b/docroot/design-system/components/announcement-block/announcement.scss
@@ -10,34 +10,34 @@
   width: 100%;
 
   &.information {
-    background: var(--va-sky);
+    background: var(--va-blue-lightest);
 
     .title svg {
-      color: var(--va-blue-bright-med);
+      color: var(--va-blue-lightest);
     }
   }
 
   &.warning {
-    background: var(--va-sand);
+    background: var(--va-gold-lightest);
 
     .title svg {
       color: var(--va-gold-med);
     }
   }
 
   &.emergency {
-    background: var(--va-blush);
+    background: var(--va-red-lightest);
 
     .title svg {
-      color: var(--va-red);
+      color: var(--va-red-dark);
     }
   }
 
   &.new {
-    background: var(--va-mint);
+    background: var(--va-green-lightest);
 
     .title svg {
-      color: var(--va-green);
+      color: var(--va-green-dark);
     }
   }
 
@@ -61,7 +61,7 @@
       margin: 0;
 
       a {
-        color: var(--va-blue-darker);
+        color: var(--va-blue-darkest);
       }
     }
   }

diff --git a/docroot/design-system/components/button/button.scss b/docroot/design-system/components/button/button.scss
@@ -1,15 +1,15 @@
 a.button--outline,
 .button--outline {
-  background-color: var(--color-white);
-  border: 2px solid var(--va-blue-med) !important;
+  background-color: var(--va-white);
+  border: 2px solid var(--va-blue-dark) !important;
   box-shadow: none;
-  color: var(--va-blue-med);
+  color: var(--va-blue-dark);
   padding: calc(var(--space-m) - 2px) calc(var(--space-l) - 2px); //2px offset for border
 
   &:hover {
-    background-color: var(--va-blue-light);
-    border: 2px solid var(--va-blue-darker);
-    color: var(--va-blue-darker);
+    background-color: var(--va-blue-lightest);
+    border: 2px solid var(--va-blue-darkest);
+    color: var(--va-blue-darkest);
   }
 }
 

diff --git a/docroot/design-system/components/design-system.js b/docroot/design-system/components/design-system.js
@@ -5,15 +5,15 @@
  */
 
 // tokens
-import * as tokens from './tokens';
+import * as tokens from "./tokens";
 
 // components
-import * as alert from './alert';
-import * as button from './button';
-import * as icon from './icon';
-import * as input from './input';
-import * as announcementBlock from './announcement-block';
-import * as sitewideAlert from './sitewide-alert';
+import * as alert from "./alert";
+import * as button from "./button";
+import * as icon from "./icon";
+import * as input from "./input";
+import * as announcementBlock from "./announcement-block";
+import * as sitewideAlert from "./sitewide-alert";
 
 const components = {
   tokens,
@@ -22,7 +22,7 @@ const components = {
   icon,
   input,
   announcementBlock,
-  sitewideAlert
+  sitewideAlert,
 };
 
 /**
@@ -32,7 +32,7 @@ export default components;
 
 /**
  * All component names as an array
- * @returns {Array} List of components name strings
+ * @return {Array} List of components name strings
  */
 export const componentNames = () =>
   Object.values(components).map(({ name }) => name);

diff --git a/docroot/design-system/components/input/input.scss b/docroot/design-system/components/input/input.scss
@@ -3,23 +3,25 @@
 }
 
 .form-element:hover:focus {
-  box-shadow: 0 0 0 3px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
+  box-shadow: 0 0 0 3px var(--color-focus),
+    inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
 }
 
 // Update to checkbox colors
 .form-boolean:active,
 .form-boolean:hover {
-  box-shadow: inset 0 0 0 1px var(--va-blue-darker);
+  box-shadow: inset 0 0 0 1px var(--va-blue-darkest);
 }
 
 .form-boolean:focus:active,
 .form-boolean:focus:hover {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--va-blue-darker);
+  box-shadow: 0 0 0 2px var(--va-white), 0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--va-blue-darkest);
 }
 
 .form-boolean--type-checkbox:checked:active,
 .form-boolean--type-checkbox:checked:hover {
-  background-color: var(--va-blue-darker);
+  background-color: var(--va-blue-darkest);
 }
 
 .form-item--error-message {

diff --git a/docroot/design-system/components/sitewide-alert/sitewide-alert.scss b/docroot/design-system/components/sitewide-alert/sitewide-alert.scss
@@ -1,8 +1,8 @@
 .va-site-alert {
   padding: 32px 0;
-  background-color: var(--va-gray-cool-lightest);
-  color: var(--color-black);
-  border-top: 8px solid var(--va-gray-dark);
+  background-color: var(--va-gray-lightest);
+  color: var(--va-gray-darkest);
+  border-top: 8px solid var(--va-gray-darkest);
 
   h2 {
     font-size: var(--va-subsection-s);
@@ -35,7 +35,7 @@
 }
 
 .va-site-alert--info {
-  border-top-color: var(--va-blue-bright-med);
+  border-top-color: var(--va-blue-lightest);
 }
 
 .va-site-alert--warning,