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

…41-narin-update-to-tokens-0.21.0 [Tokens] Update components to use tokens package 0.21.0. Update Storybook color docs
department-of-veterans-affairs · Dec 13, 2024 · d9bc60e · d9bc60e
2 parents 93b8851 + 2c8c25f
commit d9bc60e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -47,7 +47,7 @@
   },
   "peerDependencies": {
     "@department-of-veterans-affairs/mobile-assets": "^0.14.0",
-    "@department-of-veterans-affairs/mobile-tokens": "^0.20.0",
+    "@department-of-veterans-affairs/mobile-tokens": "^0.21.0",
     "react": "^18.2.0",
     "react-native": ">=0.71.7",
     "react-native-gesture-handler": "^2.12.0",
@@ -59,7 +59,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
     "@department-of-veterans-affairs/mobile-assets": "0.14.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.20.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.21.0",
     "@expo/metro-runtime": "~4.0.0",
     "@expo/webpack-config": "~19.0.1",
     "@react-native-async-storage/async-storage": "1.23.1",

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/yarn.lock b/yarn.lock
@@ -3617,7 +3617,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.8"
     "@babel/preset-typescript": "npm:^7.24.7"
     "@department-of-veterans-affairs/mobile-assets": "npm:0.14.0"
-    "@department-of-veterans-affairs/mobile-tokens": "npm:0.20.0"
+    "@department-of-veterans-affairs/mobile-tokens": "npm:0.21.0"
     "@expo/metro-runtime": "npm:~4.0.0"
     "@expo/webpack-config": "npm:~19.0.1"
     "@react-native-async-storage/async-storage": "npm:1.23.1"
@@ -3679,18 +3679,18 @@ __metadata:
     typescript: "npm:~5.3.3"
   peerDependencies:
     "@department-of-veterans-affairs/mobile-assets": ^0.14.0
-    "@department-of-veterans-affairs/mobile-tokens": ^0.20.0
+    "@department-of-veterans-affairs/mobile-tokens": ^0.21.0
     react: ^18.2.0
     react-native: ">=0.71.7"
     react-native-gesture-handler: ^2.12.0
     react-native-safe-area-context: ^4.10.5
   languageName: unknown
   linkType: soft
 
-"@department-of-veterans-affairs/mobile-tokens@npm:0.20.0":
-  version: 0.20.0
-  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.20.0"
-  checksum: dab73c152a771b3b89ebcee1bdeb43781770c793c463a953eb507c1dc2001ee257bc54efd36b639e1b02ce1986831f112f5cb9e31fff40a8e512bdd1c0f67397
+"@department-of-veterans-affairs/mobile-tokens@npm:0.21.0":
+  version: 0.21.0
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.21.0"
+  checksum: ee67987582ab306ed012d8153ea97f2a19bcd1dd2cfd63c27f3713aefe372c3f28b078ac2e9298b6ffc415e7fb955c1b9f2e8efbace14f3df8fdf347f5e152e1
   languageName: node
   linkType: hard