CSS Library: Add semantic color tokens (#1334)

* Add semantic color tokens to css library

* version bump

* revert version change

---------

Co-authored-by: Jami Gibbs <[email protected]>

Author: ataker

packages/css-library/dist/stylesheets/utilities.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 14:14:51 GMT
+ * Generated on Mon, 16 Sep 2024 18:14:55 GMT
  */
 
 :root {

packages/css-library/dist/stylesheets/utilities.css.map

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Sep 2024 14:14:51 GMT
+// Generated on Mon, 16 Sep 2024 18:14:55 GMT
 
 $xsmall-screen: 320px;
 $small-screen: 481px;

packages/css-library/dist/tokens/css/variables.css

@@ -65,3 +65,54 @@ $tokens-color-hub: (
   "hub-service-member": $vads-color-hub-service-member,
   "hub-records": $vads-color-hub-records,
 );
+
+$tokens-color-semantic: (
+  "action-border-base-active-on-dark": $vads-color-action-border-base-active-on-dark,
+  "action-border-base-active-on-light": $vads-color-action-border-base-active-on-light,
+  "action-focus-on-light": $vads-color-action-focus-on-light,
+  "action-surface-default-on-dark": $vads-color-action-surface-default-on-dark,
+  "action-surface-destructive-on-dark": $vads-color-action-surface-destructive-on-dark,
+  "background-default-on-dark": $vads-color-background-default-on-dark,
+  "base-dark": $vads-color-base-dark,
+  "base-darker": $vads-color-base-darker,
+  "base-darkest": $vads-color-base-darkest,
+  "base-light": $vads-color-base-light,
+  "base-lighter": $vads-color-base-lighter,
+  "base-lightest": $vads-color-base-lightest,
+  "emergency": $vads-color-emergency,
+  "emergency-dark": $vads-color-emergency-dark,
+  "error": $vads-color-error,
+  "error-dark": $vads-color-error-dark,
+  "error-darker": $vads-color-error-darker,
+  "error-light": $vads-color-error-light,
+  "error-lighter": $vads-color-error-lighter,
+  "feedback-border-warning-on-dark": $vads-color-feedback-border-warning-on-dark,
+  "feedback-surface-error-on-dark": $vads-color-feedback-surface-error-on-dark,
+  "feedback-surface-info-on-dark": $vads-color-feedback-surface-info-on-dark,
+  "feedback-surface-success-on-dark": $vads-color-feedback-surface-success-on-dark,
+  "feedback-surface-warning-on-dark": $vads-color-feedback-surface-warning-on-dark,
+  "feedback-forms-active-on-dark": $vads-color-forms-surface-active-on-dark,
+  "feedback-forms-active-on-light": $vads-color-forms-surface-active-on-light,
+  "gibill-accent": $vads-color-gibill-accent,
+  "info": $vads-color-info,
+  "info-dark": $vads-color-info-dark,
+  "info-darker": $vads-color-info-darker,
+  "info-light": $vads-color-info-light,
+  "info-lighter": $vads-color-info-lighter,
+  "ink": $vads-color-ink,
+  "inset-bg": $vads-color-inset-bg,
+  "link": $vads-color-link,
+  "link-active": $vads-color-link-active,
+  "link-visited": $vads-color-link-visited,
+  "success": $vads-color-success,
+  "success-dark": $vads-color-success-dark,
+  "success-darker": $vads-color-success-darker,
+  "success-light": $vads-color-success-light,
+  "success-lighter": $vads-color-success-lighter,
+  "va-accent": $vads-color-va-accent,
+  "warning": $vads-color-warning,
+  "warning-dark": $vads-color-warning-dark,
+  "warning-darker": $vads-color-warning-darker,
+  "warning-light": $vads-color-warning-light,
+  "warning-lighter": $vads-color-warning-lighter,
+);

packages/css-library/dist/tokens/scss/variables.scss

@@ -12,7 +12,8 @@ $u-bg-color: (
         $tokens-color-basic,
         $tokens-color-grayscale,
         $tokens-color-tertiary,
-        $tokens-color-hub
+        $tokens-color-hub,
+        $tokens-color-semantic
       ),
     settings: $color-settings,
     property: "background-color",

packages/css-library/src/tokens/color.scss

@@ -40,7 +40,8 @@ $u-border-color: (
         $tokens-color-basic,
         $tokens-color-grayscale,
         $tokens-color-tertiary,
-        $tokens-color-hub
+        $tokens-color-hub,
+        $tokens-color-semantic
       ),
     settings: $border-other-settings,
     property: 'border-color',

packages/css-library/src/utilities/background-color.scss

@@ -12,7 +12,8 @@ $u-color: (
         $tokens-color-basic,
         $tokens-color-grayscale,
         $tokens-color-tertiary,
-        $tokens-color-hub
+        $tokens-color-hub,
+        $tokens-color-semantic
       ),
     settings: $color-settings,
     property: "color",