Merge pull request #610 from department-of-veterans-affairs/feature/5…

…42-jessica-add-color-tokens [Tokens] Add new tokens
department-of-veterans-affairs · Dec 12, 2024 · a99e254 · a99e254
2 parents 851a200 + 035b3d5
commit a99e254
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 23 deletions.
diff --git a/packages/tokens/figma/dark.json b/packages/tokens/figma/dark.json
@@ -563,6 +563,10 @@
     "$value": "{uswds-system-color-blue-warm-30}",
     "$type": "color"
   },
+  "vads-color-border-focus-on-dark": {
+    "$value": "{uswds-system-color-yellow-vivid-20}",
+    "$type": "color"
+  },
   "vads-color-border-strong-on-dark": {
     "$value": "{vads-color-base-light}",
     "$type": "color"
@@ -615,6 +619,14 @@
     "$value": "{uswds-system-color-yellow-vivid-20}",
     "$type": "color"
   },
+  "vads-color-feedback-foreground-error-on-dark": {
+    "$value": "{uswds-system-color-red-vivid-40}",
+    "$type": "color"
+  },
+  "vads-color-feedback-foreground-info-on-dark": {
+    "$value": "{vads-color-primary-alt}",
+    "$type": "color"
+  },
   "vads-color-feedback-foreground-success-on-dark": {
     "$value": "{uswds-system-color-green-cool-vivid-30}",
     "$type": "color"
@@ -643,10 +655,6 @@
     "$value": "{vads-color-base-lightest}",
     "$type": "color"
   },
-  "vads-color-foreground-error-on-dark": {
-    "$value": "{uswds-system-color-red-vivid-40}",
-    "$type": "color"
-  },
   "vads-color-foreground-inverse-on-dark": {
     "$value": "{vads-color-base-darkest}",
     "$type": "color"
@@ -671,6 +679,10 @@
     "$value": "{vads-color-base-dark}",
     "$type": "color"
   },
+  "vads-color-forms-border-success-on-dark": {
+    "$value": "{vads-color-green-light}",
+    "$type": "color"
+  },
   "vads-color-forms-foreground-active-on-dark": {
     "$value": "{uswds-system-color-blue-vivid-30}",
     "$type": "color"

diff --git a/packages/tokens/figma/light.json b/packages/tokens/figma/light.json
@@ -583,6 +583,10 @@
     "$value": "{uswds-system-color-blue-warm-30}",
     "$type": "color"
   },
+  "vads-color-border-focus-on-light": {
+    "$value": "{uswds-system-color-yellow-vivid-20}",
+    "$type": "color"
+  },
   "vads-color-border-strong-on-light": {
     "$value": "{vads-color-base-dark}",
     "$type": "color"
@@ -635,6 +639,14 @@
     "$value": "{vads-color-warning}",
     "$type": "color"
   },
+  "vads-color-feedback-foreground-error-on-light": {
+    "$value": "{vads-color-secondary-dark}",
+    "$type": "color"
+  },
+  "vads-color-feedback-foreground-info-on-light": {
+    "$value": "{uswds-system-color-cyan-vivid-40}",
+    "$type": "color"
+  },
   "vads-color-feedback-foreground-success-on-light": {
     "$value": "{uswds-system-color-green-cool-vivid-50}",
     "$type": "color"
@@ -663,10 +675,6 @@
     "$value": "{vads-color-base}",
     "$type": "color"
   },
-  "vads-color-foreground-error-on-light": {
-    "$value": "{vads-color-secondary-dark}",
-    "$type": "color"
-  },
   "vads-color-foreground-inverse-on-light": {
     "$value": "{vads-color-base-lightest}",
     "$type": "color"
@@ -691,6 +699,10 @@
     "$value": "{vads-color-base-light}",
     "$type": "color"
   },
+  "vads-color-forms-border-success-on-light": {
+    "$value": "{vads-color-success}",
+    "$type": "color"
+  },
   "vads-color-forms-foreground-active-on-light": {
     "$value": "{vads-color-primary}",
     "$type": "color"

diff --git a/packages/tokens/src/tokens/color/semantic-dark.json b/packages/tokens/src/tokens/color/semantic-dark.json
@@ -20,6 +20,13 @@
       "category": "color"
     }
   },
+  "vads-color-border-focus-on-dark": {
+    "name": "vads-color-border-focus-on-dark",
+    "value": "{uswds-system-color-yellow-vivid-20}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-foreground-default-on-dark": {
     "name": "vads-color-foreground-default-on-dark",
     "value": "{vads-color-base-lightest.*.value}",
@@ -41,13 +48,6 @@
       "category": "color"
     }
   },
-  "vads-color-foreground-error-on-dark": {
-    "name": "vads-color-foreground-error-on-dark",
-    "value": "{uswds-system-color-red-vivid-40}",
-    "attributes": {
-      "category": "color"
-    }
-  },
   "vads-color-surface-secondary-on-dark": {
     "name": "vads-color-surface-secondary-on-dark",
     "value": "{vads-color-base-darker.*.value}",
@@ -174,6 +174,20 @@
       "category": "color"
     }
   },
+  "vads-color-feedback-foreground-info-on-dark": {
+    "name": "vads-color-feedback-foreground-info-on-dark",
+    "value": "{vads-color-primary-alt.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-feedback-foreground-error-on-dark": {
+    "name": "vads-color-feedback-foreground-error-on-dark",
+    "value": "{uswds-system-color-red-vivid-40}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-forms-border-default-on-dark": {
     "name": "vads-color-forms-border-default-on-dark",
     "value": "{vads-color-base-light.*.value}",
@@ -195,6 +209,13 @@
       "category": "color"
     }
   },
+  "vads-color-forms-border-success-on-dark": {
+    "name": "vads-color-forms-border-success-on-dark",
+    "value": "{vads-color-green-light.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-forms-border-active-on-dark": {
     "name": "vads-color-forms-border-active-on-dark",
     "value": "{uswds-system-color-blue-vivid-30}",

diff --git a/packages/tokens/src/tokens/color/semantic-light.json b/packages/tokens/src/tokens/color/semantic-light.json
@@ -27,6 +27,13 @@
       "category": "color"
     }
   },
+  "vads-color-border-focus-on-light": {
+    "name": "vads-color-border-focus-on-light",
+    "value": "{uswds-system-color-yellow-vivid-20}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-foreground-default-on-light": {
     "name": "vads-color-foreground-default-on-light",
     "value": "{vads-color-base.*.value}",
@@ -48,13 +55,6 @@
       "category": "color"
     }
   },
-  "vads-color-foreground-error-on-light": {
-    "name": "vads-color-foreground-error-on-light",
-    "value": "{vads-color-secondary-dark.*.value}",
-    "attributes": {
-      "category": "color"
-    }
-  },
   "vads-color-surface-secondary-on-light": {
     "name": "vads-color-surface-secondary-on-light",
     "value": "{vads-color-base-lighter.*.value}",
@@ -194,14 +194,28 @@
     "attributes": {
       "category": "color"
     }
-  },  
+  },
   "vads-color-feedback-border-error-on-light": {
     "name": "vads-color-feedback-border-error-on-light",
     "value": "{vads-color-error.*.value}",
     "attributes": {
       "category": "color"
     }
   },
+  "vads-color-feedback-foreground-info-on-light": {
+    "name": "vads-color-feedback-foreground-info-on-light",
+    "value": "{uswds-system-color-cyan-vivid-40}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-feedback-foreground-error-on-light": {
+    "name": "vads-color-feedback-foreground-error-on-light",
+    "value": "{vads-color-secondary-dark.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-feedback-surface-info-on-light": {
     "name": "vads-color-feedback-surface-info-on-light",
     "value": "{vads-color-info-lighter.*.value}",
@@ -251,6 +265,13 @@
       "category": "color"
     }
   },
+  "vads-color-forms-border-success-on-light": {
+    "name": "vads-color-forms-border-success-on-light",
+    "value": "{vads-color-success.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-forms-border-active-on-light": {
     "name": "vads-color-forms-border-active-on-light",
     "value": "{vads-color-primary.*.value}",