From f3adeff05afbfc973679b9f63399d5c601ba7397 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 9 Dec 2024 15:01:22 -0800
Subject: [PATCH 1/3] Update to latest tokens package. Add feedback tokens to
 colors doc

---
 packages/components/package.json                 |  4 ++--
 packages/components/storybook/colors.stories.mdx | 16 ++++++++++++++++
 yarn.lock                                        | 12 ++++++------
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index c99831f4..ea773c8c 100644
--- 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
index 0331175e..4acaadd2 100644
--- a/packages/components/storybook/colors.stories.mdx
+++ b/packages/components/storybook/colors.stories.mdx
@@ -451,6 +451,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 +480,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
index f35263d2..3615b1e7 100644
--- 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,7 +3679,7 @@ __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
@@ -3687,10 +3687,10 @@ __metadata:
   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
 

From cf7eb7fb15475dbb70e69f03b352584b0f1162c2 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 9 Dec 2024 15:08:13 -0800
Subject: [PATCH 2/3] Add uswds colors to docs

---
 packages/components/storybook/colors.stories.mdx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/components/storybook/colors.stories.mdx b/packages/components/storybook/colors.stories.mdx
index 4acaadd2..40f33fcb 100644
--- a/packages/components/storybook/colors.stories.mdx
+++ b/packages/components/storybook/colors.stories.mdx
@@ -142,7 +142,19 @@ Our color palette is organized into semantic color tokens, which have specific m
     subtitle="uswdsSystemColor"
     colors={{
       YellowVivid80: colors.uswdsSystemColorYellowVivid80,
-      YellwoVivid20: colors.uswdsSystemColorYellowVivid20,
+      YellowVivid20: colors.uswdsSystemColorYellowVivid20,
+    }}
+  />
+</ColorPalette>
+
+### Gold
+
+<ColorPalette>
+  <ColorItem
+    title="USWDS"
+    subtitle="uswdsSystemColor"
+    colors={{
+      GoldVivid40: colors.uswdsSystemColorGoldVivid40,
     }}
   />
 </ColorPalette>
@@ -162,6 +174,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,
     }}
   />

From 287e5579b67cf1811a1b8f446f1a44505724aa9d Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Tue, 10 Dec 2024 12:59:52 -0800
Subject: [PATCH 3/3] Group uswds gold under yellow

---
 packages/components/storybook/colors.stories.mdx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/components/storybook/colors.stories.mdx b/packages/components/storybook/colors.stories.mdx
index 40f33fcb..eae6c795 100644
--- a/packages/components/storybook/colors.stories.mdx
+++ b/packages/components/storybook/colors.stories.mdx
@@ -141,20 +141,15 @@ Our color palette is organized into semantic color tokens, which have specific m
     title="USWDS"
     subtitle="uswdsSystemColor"
     colors={{
-      YellowVivid80: colors.uswdsSystemColorYellowVivid80,
-      YellowVivid20: colors.uswdsSystemColorYellowVivid20,
+      GoldVivid40: colors.uswdsSystemColorGoldVivid40,
     }}
   />
-</ColorPalette>
-
-### Gold
-
-<ColorPalette>
   <ColorItem
     title="USWDS"
     subtitle="uswdsSystemColor"
     colors={{
-      GoldVivid40: colors.uswdsSystemColorGoldVivid40,
+      YellowVivid80: colors.uswdsSystemColorYellowVivid80,
+      YellowVivid20: colors.uswdsSystemColorYellowVivid20,
     }}
   />
 </ColorPalette>