@department-of-veterans-affairs/css-library 0.15.0 → 0.16.1

package/dist/stylesheets/formation-overrides/_variables.scss

@@ -108,7 +108,7 @@ $lead-max-width: scale-rem(77rem);
 $site-margins-mobile: scale-rem(1.5rem);
 $nav-width: 951px;
 $site-margins: scale-rem(3rem);
-$site-max-width: 1040px;
+$site-max-width: 1000px;
 
 $sidenav-current-border-width:  scale-rem(0.4rem);
 

package/dist/stylesheets/formation-overrides/core/base.css

@@ -44,21 +44,21 @@ input:not([disabled]):focus,
 select:not([disabled]):focus,
 textarea:not([disabled]):focus,
 button:not([disabled]):focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 iframe:focus,
 [href]:focus,
 [tabindex]:focus,
 [contentEditable=true]:focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 .usa-focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 /*# sourceMappingURL=base.css.map */

package/dist/stylesheets/formation-overrides/elements/buttons.css

@@ -47,7 +47,7 @@ button,
   color: #ffffff;
   cursor: pointer;
   display: inline-block;
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 16px;
   font-weight: 700;
   line-height: 1;

package/dist/stylesheets/formation-overrides/elements/inputs.css

@@ -160,7 +160,7 @@ legend {
 
 .usa-form-hint {
   color: #757575;
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   margin-bottom: 0;
 }
 
@@ -233,8 +233,8 @@ legend {
 }
 
 [type=radio]:focus + label::before {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 6px;
+  outline: 2px solid #face00;
+  outline-offset: 4px;
 }
 
 [type=checkbox]:disabled + label {
@@ -242,8 +242,8 @@ legend {
 }
 
 [type=checkbox]:focus + label::before {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 
 [type=checkbox]:disabled + label::before,

package/dist/stylesheets/formation-overrides/elements/typography.css

@@ -30,7 +30,7 @@
 }
 
 html {
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 16px;
 }
 
@@ -52,8 +52,8 @@ a:hover, a:active {
   color: #1a4480;
 }
 a:focus {
-  outline: 2px dotted #aeb0b5;
-  outline-offset: 3px;
+  outline: 2px solid #face00;
+  outline-offset: 2px;
 }
 a:visited {
   color: #54278f;
@@ -176,6 +176,10 @@ dfn {
   font-style: normal;
 }
 
+.usa-content {
+  max-width: 43.75rem;
+}
+
 .usa-content p,
 .usa-content ul:not(.usa-accordion):not(.usa-accordion-bordered),
 .usa-content ol:not(.usa-accordion):not(.usa-accordion-bordered) {
@@ -190,7 +194,7 @@ dfn {
 .usa-sans a,
 .usa-sans li,
 .usa-sans span {
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 }
 .usa-sans a {
   border-bottom: none;

package/dist/stylesheets/modules/m-alert.css

@@ -6,6 +6,10 @@
   Variables ported over from Formation so that we can keep those stylesheets
   working while we work on deprecation.
 **/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
 /**
   /uswds/dist/scss/lib/addons/_margin.scss
 **/
@@ -18,7 +22,7 @@
   border-left-style: solid;
   border-left-width: 10px;
   display: table;
-  padding: units(4) units(8) units(4) units(3);
+  padding: 2rem 4rem 2rem 1.5rem;
   width: 100%;
 }
 .usa-alert::before {
@@ -53,7 +57,7 @@
   padding-top: 0;
 }
 .usa-alert-text {
-  margin-top: units(2.5);
+  margin-top: 1.25rem;
 }
 .usa-alert-text:only-child {
   margin: 0;
@@ -66,10 +70,10 @@
   margin-bottom: 0;
 }
 .usa-alert-text .usa-alert-heading + p:only-of-type {
-  margin-top: units(2.5);
+  margin-top: 1.25rem;
 }
 .usa-alert-text ul {
-  padding-left: units(2.5);
+  padding-left: 1.25rem;
 }
 .usa-alert-info {
   border-left-color: #00a6d2;
@@ -124,7 +128,7 @@
   font-size: 1.40625rem;
   padding: 0;
   position: absolute;
-  margin: units(2);
+  margin: 1rem;
   right: 0;
   top: 0;
   width: auto;

package/dist/stylesheets/modules/m-emergency-banner.css

@@ -14,7 +14,7 @@
   margin-right: -22.5px;
 }
 .vads-c-emergency-banner .usa-alert .usa-alert-heading {
-  font-family: "Source Sans Pro";
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 1rem;
   margin-top: 4px;
   margin-left: 30.5px;

package/dist/stylesheets/modules/m-form-process.css

@@ -207,7 +207,7 @@
 }
 
 .schemaform-array-row-title:focus {
-  outline: 2px dotted #aeb0b5;
+  outline: 2px solid #face00;
   outline-offset: 2px;
   display: inline-block;
 }

package/dist/stylesheets/modules/m-loading-indicator.css

@@ -2,19 +2,23 @@
   Variables ported over from Formation so that we can keep those stylesheets
   working while we work on deprecation.
 **/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
 .loading-indicator-container {
   text-align: center;
 }
 .loading-indicator-container .loading-indicator {
   display: block;
-  height: units(8);
-  margin-top: units(2);
+  height: 4rem;
+  margin-top: 1rem;
 }
 .loading-indicator-container .loading-indicator:after {
   content: " ";
   display: inline-block;
-  width: units(7);
-  height: units(7);
+  width: 3.5rem;
+  height: 3.5rem;
   margin: 1px;
   border-radius: 50%;
   border: 8px solid #005ea2;
@@ -26,7 +30,7 @@
 }
 
 .async-loader {
-  padding-bottom: units(1);
+  padding-bottom: 0.5rem;
 }
 
 @keyframes spin {

package/dist/stylesheets/modules/m-maintenance-banner.css

@@ -14,7 +14,7 @@
   margin-right: -22.5px;
 }
 .vads-c-maintenance-banner .usa-alert .usa-alert-heading {
-  font-family: "Source Sans Pro";
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 1rem;
   margin-top: 4px;
   margin-left: 30.5px;

package/dist/stylesheets/modules/m-megamenu.css

@@ -108,7 +108,7 @@
   .mega-menu .vetnav-panel--submenu:not([hidden]) h3 {
     display: block;
     color: #000000;
-    font-family: Source Sans Pro, sans serif;
+    font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 16px;
     font-weight: bold;
     margin-top: 4px;
@@ -263,7 +263,7 @@
   }
   #mega-menu .vetnav-panel--submenu:not([hidden]) h3,
   .mega-menu .vetnav-panel--submenu:not([hidden]) h3 {
-    font-family: Source Sans Pro, sans serif;
+    font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 16px;
   }
 }

package/dist/stylesheets/modules/m-modal.css

@@ -6,6 +6,10 @@
   Variables ported over from Formation so that we can keep those stylesheets
   working while we work on deprecation.
 **/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
 /**
   /uswds/dist/scss/lib/addons/_margin.scss
 **/
@@ -33,14 +37,14 @@
   }
 }
 .va-modal .va-modal-body {
-  margin-right: units(2.5);
+  margin-right: 1.25rem;
 }
 .va-modal .va-modal-body p:first-of-type {
   margin-top: 0;
 }
 .va-modal-title {
   margin: 0;
-  margin-bottom: units(2);
+  margin-bottom: 1rem;
 }
 .va-modal-inner {
   background: #ffffff;
@@ -62,17 +66,17 @@
   max-width: 37.5rem;
 }
 .va-modal-alert .alert-actions {
-  margin-top: units(3);
+  margin-top: 1.5rem;
 }
 .va-modal-alert .alert-actions button {
   margin: 0;
 }
 .va-modal-alert .alert-actions button + button {
-  margin-left: units(2.5);
+  margin-left: 1.25rem;
 }
 .va-modal-body {
   overflow-wrap: break-word;
-  padding: units(2.5);
+  padding: 1.25rem;
   word-break: break-word;
   word-wrap: break-word;
 }
@@ -99,7 +103,7 @@ button.va-modal-close {
   font-size: 1.40625rem;
   padding: 0;
   position: absolute;
-  margin: units(2);
+  margin: 1rem;
   right: 0;
   top: 0;
   width: auto;

package/dist/stylesheets/modules/m-nav-sidebar.css

@@ -7,6 +7,10 @@
   Variables ported over from Formation so that we can keep those stylesheets
   working while we work on deprecation.
 **/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
 /**
   /uswds/dist/scss/lib/addons/_margin.scss
 **/
@@ -233,7 +237,7 @@
   font-size: 15px;
 }
 .va-sidebarnav .usa-sidenav-sub_list a:focus {
-  outline: 2px dotted #aeb0b5;
+  outline: 2px solid #face00;
   outline-offset: 0px;
 }
 .va-sidebarnav .usa-sidenav-sub_list a:hover, .va-sidebarnav .usa-sidenav-sub_list a:focus {
@@ -305,13 +309,13 @@
 .va-btn-sidebarnav-trigger .button-wrapper {
   position: absolute;
   width: 100%;
-  padding: units(1) units(1) units(2);
+  padding: 0.5rem 0.5rem 1rem;
 }
 .va-btn-sidebarnav-trigger button {
   background-color: #ffffff;
   color: #005ea2;
   margin: 0;
-  padding: units(1.5);
+  padding: 0.75rem;
   border: 1px solid #005ea2;
   border-radius: 4px;
   width: 100%;
@@ -320,7 +324,7 @@
   justify-content: space-between;
 }
 .va-btn-sidebarnav-trigger button strong {
-  line-height: units(2.5);
+  line-height: 1.25rem;
 }
 .va-btn-sidebarnav-trigger button svg {
   fill: #005ea2;

package/dist/stylesheets/shame.css

@@ -18,7 +18,7 @@
 **/
 @media screen and (min-width: 768px), print and (min-width: 768px) {
   [type=submit] {
-    margin-top: calc(3rem - 0.2em);
+    margin-top: calc(1.875rem - 0.2em);
   }
 }
 
@@ -30,7 +30,7 @@ fieldset {
 
 @media screen and (min-width: 768px), print and (min-width: 768px) {
   .usa-form {
-    max-width: 20rem;
+    max-width: 32rem;
   }
 }
 
@@ -48,7 +48,7 @@ fieldset {
 
 .usa-form-note {
   float: right;
-  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 0.9375rem;
   margin: 0 0 scale(1.5rem);
 }
@@ -152,6 +152,7 @@ fieldset {
 **/
 body .row {
   max-width: 62.5em;
+  margin: 0 auto;
 }
 body .row-padded {
   max-width: 62.5rem;
@@ -161,7 +162,7 @@ body .row-padded {
 
 @media screen and (min-width: 768px), print and (min-width: 768px) {
   .form-panel {
-    max-width: 20rem;
+    max-width: 32rem;
   }
 }
 

package/dist/stylesheets/utilities.css

@@ -5796,7 +5796,7 @@ through all possible variants
 }
 
 .vads-u-font-family--sans {
-  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
+  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
 }
 
 .vads-u-font-family--serif {

package/dist/tokens/css/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 18 Nov 2024 18:52:29 GMT
+ * Generated on Thu, 12 Dec 2024 18:40:51 GMT
  */
 
 :root {
@@ -103,6 +103,10 @@
   --vads-color-action-surface-destructive-on-dark: #fb5a47;
   --vads-color-action-border-base-active-on-light: #2e2e2e;
   --vads-color-action-border-base-active-on-dark: #adadad;
+  --vads-color-feedback-foreground-success-on-dark: #21c834;
+  --vads-color-feedback-foreground-success-on-light: #008817;
+  --vads-color-feedback-foreground-warning-on-dark: #e5a000;
+  --vads-color-feedback-foreground-warning-on-light: #c2850c;
   --vads-color-feedback-surface-info-on-dark: #112f4e;
   --vads-color-feedback-surface-success-on-dark: #19311e;
   --vads-color-feedback-surface-warning-on-dark: #422d19;
@@ -111,10 +115,10 @@
   --vads-color-background-default-on-dark: #171716;
   --vads-color-forms-surface-active-on-light: #ecf1f7;
   --vads-color-forms-surface-active-on-dark: #252f3e;
-  --font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  --font-family-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
   --font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
   --font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  --font-source-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
   --font-weight-normal: 400;
   --font-weight-bold: 700;
   --font-style-normal: normal;
@@ -226,6 +230,7 @@
   --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-40: #c2850c;
   --uswds-system-color-gold-vivid-50: #936f38;
   --uswds-system-color-gray-1: #fcfcfc;
   --uswds-system-color-gray-2: #f9f9f9;
@@ -265,6 +270,7 @@
   --uswds-system-color-green-cool-40: #5e9f69;
   --uswds-system-color-green-cool-50: #4d8055;
   --uswds-system-color-green-cool-vivid-20: #70e17b;
+  --uswds-system-color-green-cool-vivid-30: #21c834;
   --uswds-system-color-green-cool-vivid-40: #00a91c;
   --uswds-system-color-green-cool-vivid-50: #008817;
   --uswds-system-color-green-cool-vivid-60: #216e1f;

package/dist/tokens/json/variables.json

@@ -1838,6 +1838,82 @@
       ]
     }
   },
+  "vads-color-feedback-foreground-success-on-dark": {
+    "*": {
+      "value": "#21c834",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "{uswds-system-color-green-cool-vivid-30}"
+      },
+      "name": "vads-color-feedback-foreground-success-on-dark",
+      "attributes": {
+        "category": "vads-color-feedback-foreground-success-on-dark",
+        "type": "*"
+      },
+      "path": [
+        "vads-color-feedback-foreground-success-on-dark",
+        "*"
+      ]
+    }
+  },
+  "vads-color-feedback-foreground-success-on-light": {
+    "*": {
+      "value": "#008817",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "{uswds-system-color-green-cool-vivid-50}"
+      },
+      "name": "vads-color-feedback-foreground-success-on-light",
+      "attributes": {
+        "category": "vads-color-feedback-foreground-success-on-light",
+        "type": "*"
+      },
+      "path": [
+        "vads-color-feedback-foreground-success-on-light",
+        "*"
+      ]
+    }
+  },
+  "vads-color-feedback-foreground-warning-on-dark": {
+    "*": {
+      "value": "#e5a000",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "{uswds-system-color-gold-vivid-30}"
+      },
+      "name": "vads-color-feedback-foreground-warning-on-dark",
+      "attributes": {
+        "category": "vads-color-feedback-foreground-warning-on-dark",
+        "type": "*"
+      },
+      "path": [
+        "vads-color-feedback-foreground-warning-on-dark",
+        "*"
+      ]
+    }
+  },
+  "vads-color-feedback-foreground-warning-on-light": {
+    "*": {
+      "value": "#c2850c",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "{uswds-system-color-gold-vivid-40}"
+      },
+      "name": "vads-color-feedback-foreground-warning-on-light",
+      "attributes": {
+        "category": "vads-color-feedback-foreground-warning-on-light",
+        "type": "*"
+      },
+      "path": [
+        "vads-color-feedback-foreground-warning-on-light",
+        "*"
+      ]
+    }
+  },
   "vads-color-feedback-surface-info-on-dark": {
     "*": {
       "value": "#112f4e",
@@ -1993,11 +2069,11 @@
   "font": {
     "family": {
       "sans": {
-        "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
+        "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
         "filePath": "tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
+          "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
         },
         "name": "font-family-sans",
         "attributes": {
@@ -2050,11 +2126,11 @@
     },
     "source": {
       "sans": {
-        "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
+        "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif",
         "filePath": "tokens/fonts.json",
         "isSource": true,
         "original": {
-          "value": "'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
+          "value": "'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif"
         },
         "name": "font-source-sans",
         "attributes": {
@@ -4023,6 +4099,21 @@
       "uswds-system-color-gold-vivid-30"
     ]
   },
+  "uswds-system-color-gold-vivid-40": {
+    "value": "#c2850c",
+    "filePath": "tokens/uswds.json",
+    "isSource": true,
+    "original": {
+      "value": "#c2850c"
+    },
+    "name": "uswds-system-color-gold-vivid-40",
+    "attributes": {
+      "category": "uswds-system-color-gold-vivid-40"
+    },
+    "path": [
+      "uswds-system-color-gold-vivid-40"
+    ]
+  },
   "uswds-system-color-gold-vivid-50": {
     "value": "#936f38",
     "filePath": "tokens/uswds.json",
@@ -4608,6 +4699,21 @@
       "uswds-system-color-green-cool-vivid-20"
     ]
   },
+  "uswds-system-color-green-cool-vivid-30": {
+    "value": "#21c834",
+    "filePath": "tokens/uswds.json",
+    "isSource": true,
+    "original": {
+      "value": "#21c834"
+    },
+    "name": "uswds-system-color-green-cool-vivid-30",
+    "attributes": {
+      "category": "uswds-system-color-green-cool-vivid-30"
+    },
+    "path": [
+      "uswds-system-color-green-cool-vivid-30"
+    ]
+  },
   "uswds-system-color-green-cool-vivid-40": {
     "value": "#00a91c",
     "filePath": "tokens/uswds.json",

package/dist/tokens/scss/variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 18 Nov 2024 18:52:29 GMT
+// Generated on Thu, 12 Dec 2024 18:40:51 GMT
 
 $xsmall-screen: 320px;
 $small-screen: 481px;
@@ -101,6 +101,10 @@ $vads-color-action-surface-default-on-dark: #58b4ff;
 $vads-color-action-surface-destructive-on-dark: #fb5a47;
 $vads-color-action-border-base-active-on-light: #2e2e2e;
 $vads-color-action-border-base-active-on-dark: #adadad;
+$vads-color-feedback-foreground-success-on-dark: #21c834;
+$vads-color-feedback-foreground-success-on-light: #008817;
+$vads-color-feedback-foreground-warning-on-dark: #e5a000;
+$vads-color-feedback-foreground-warning-on-light: #c2850c;
 $vads-color-feedback-surface-info-on-dark: #112f4e;
 $vads-color-feedback-surface-success-on-dark: #19311e;
 $vads-color-feedback-surface-warning-on-dark: #422d19;
@@ -109,10 +113,10 @@ $vads-color-feedback-border-warning-on-dark: #face00;
 $vads-color-background-default-on-dark: #171716;
 $vads-color-forms-surface-active-on-light: #ecf1f7;
 $vads-color-forms-surface-active-on-dark: #252f3e;
-$font-family-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$font-family-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 $font-family-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
 $font-serif: Bitter, Georgia, Cambria, 'Times New Roman', Times, serif;
-$font-source-sans: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$font-source-sans: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 $font-weight-normal: 400;
 $font-weight-bold: 700;
 $font-style-normal: normal;
@@ -224,6 +228,7 @@ $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-40: #c2850c;
 $uswds-system-color-gold-vivid-50: #936f38;
 $uswds-system-color-gray-1: #fcfcfc;
 $uswds-system-color-gray-2: #f9f9f9;
@@ -263,6 +268,7 @@ $uswds-system-color-green-cool-20: #b4d0b9;
 $uswds-system-color-green-cool-40: #5e9f69;
 $uswds-system-color-green-cool-50: #4d8055;
 $uswds-system-color-green-cool-vivid-20: #70e17b;
+$uswds-system-color-green-cool-vivid-30: #21c834;
 $uswds-system-color-green-cool-vivid-40: #00a91c;
 $uswds-system-color-green-cool-vivid-50: #008817;
 $uswds-system-color-green-cool-vivid-60: #216e1f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "Department of Veterans Affairs stylesheets, tokens, and utilities",
   "packageManager": "yarn@3.2.0",
   "files": [