Merge branch 'main' into bug/550-narin-fix-bottom-margin-text-component

department-of-veterans-affairs · Dec 13, 2024 · e160f1a · e160f1a
2 parents f7a01b0 + d9bc60e
commit e160f1a
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 25 deletions.
diff --git a/documentation/CHANGELOG.md b/documentation/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## [tokens-v0.23.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.23.0) (2024-12-12)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.22.0...tokens-v0.23.0)
+
+**Closed issues:**
+
+- DS - RadioButton Accessibility Review [\#524](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/524)
+
+**Merged pull requests:**
+
+- \[Tokens\] Add new tokens [\#610](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/610) ([jessicawoodin](https://github.com/jessicawoodin))
+
 ## [tokens-v0.22.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.22.0) (2024-12-11)
 
 [Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.21.0...tokens-v0.22.0)

diff --git a/packages/components/storybook/colors.stories.mdx b/packages/components/storybook/colors.stories.mdx
@@ -137,12 +137,19 @@ Our color palette is organized into semantic color tokens, which have specific m
       Lightest: colors.vadsColorGoldLightest,
     }}
   />
+  <ColorItem
+    title="USWDS"
+    subtitle="uswdsSystemColor"
+    colors={{
+      GoldVivid40: colors.uswdsSystemColorGoldVivid40,
+    }}
+  />
   <ColorItem
     title="USWDS"
     subtitle="uswdsSystemColor"
     colors={{
       YellowVivid80: colors.uswdsSystemColorYellowVivid80,
-      YellwoVivid20: colors.uswdsSystemColorYellowVivid20,
+      YellowVivid20: colors.uswdsSystemColorYellowVivid20,
     }}
   />
 </ColorPalette>
@@ -162,6 +169,7 @@ Our color palette is organized into semantic color tokens, which have specific m
     title="USWDS"
     subtitle="uswdsSystemColor"
     colors={{
+      GreenCoolVivid30: colors.uswdsSystemColorGreenCoolVivid30,
       GreenCoolVivid80: colors.uswdsSystemColorGreenCoolVivid80,
     }}
   />
@@ -451,6 +459,14 @@ Our color palette is organized into semantic color tokens, which have specific m
       OnDark: colors.vadsColorFeedbackBorderSuccessOnDark,
     }}
   />
+  <ColorItem
+    title="Foreground"
+    subtitle="vadsColorFeedbackForegroundSuccess"
+    colors={{
+      OnLight: colors.vadsColorFeedbackForegroundSuccessOnLight,
+      OnDark: colors.vadsColorFeedbackForegroundSuccessOnDark,
+    }}
+  />
   <ColorItem
     title="Surface"
     subtitle="vadsColorFeedbackSurfaceSuccess"
@@ -472,6 +488,14 @@ Our color palette is organized into semantic color tokens, which have specific m
       OnDark: colors.vadsColorFeedbackBorderWarningOnDark,
     }}
   />
+  <ColorItem
+    title="Foreground"
+    subtitle="vadsColorFeedbackForegroundWarning"
+    colors={{
+      OnLight: colors.vadsColorFeedbackForegroundWarningOnLight,
+      OnDark: colors.vadsColorFeedbackForegroundWarningOnDark,
+    }}
+  />
   <ColorItem
     title="Surface"
     subtitle="vadsColorFeedbackSurfaceWarning"

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/package.json b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "VA Design System Mobile Token Library",
   "main": "dist/js/index.js",
   "types": "dist/index.d.ts",

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}",