Merge pull request #475 from department-of-veterans-affairs/feature/4…

…24-jessica-add-checkbox-tokens-to-storybook [Feature] Add Checkbox tokens to Storybook
department-of-veterans-affairs · Sep 11, 2024 · dfff561 · dfff561
2 parents 443d4d1 + 6aae235
commit dfff561
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 8 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "@department-of-veterans-affairs/mobile-assets": "^0.12.0",
-    "@department-of-veterans-affairs/mobile-tokens": "^0.14.0",
+    "@department-of-veterans-affairs/mobile-tokens": "^0.15.0",
     "react": "^18.2.0",
     "react-native": ">=0.71.7",
     "react-native-gesture-handler": "^2.12.0",
@@ -60,7 +60,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
     "@department-of-veterans-affairs/mobile-assets": "0.12.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.14.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.15.0",
     "@expo/metro-runtime": "~3.2.1",
     "@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
@@ -47,7 +47,9 @@ Our color palette is organized into semantic color tokens, which have specific m
     colors={{
       Gray90: colors.uswdsSystemColorGray90,
       Gray80: colors.uswdsSystemColorGray80,
+      Gray60: colors.uswdsSystemColorGray60,
       Gray30: colors.uswdsSystemColorGray30,
+      Gray2: colors.uswdsSystemColorGray2,
     }}
   />
 </ColorPalette>
@@ -181,6 +183,14 @@ Our color palette is organized into semantic color tokens, which have specific m
       OnDark: colors.vadsColorForegroundDefaultOnDark,
     }}
   />
+  <ColorItem
+    title="Subtle"
+    subtitle="vadsColorForegroundSubtle"
+    colors={{
+      OnLight: colors.vadsColorForegroundSubtleOnLight,
+      OnDark: colors.vadsColorForegroundSubtleOnDark,
+    }}
+  />
   <ColorItem
     title="Inverse"
     subtitle="vadsColorForegroundInverse"
@@ -189,6 +199,14 @@ Our color palette is organized into semantic color tokens, which have specific m
       OnDark: colors.vadsColorForegroundInverseOnDark,
     }}
   />
+  <ColorItem
+    title="Error"
+    subtitle="vadsColorForegroundError"
+    colors={{
+      OnLight: colors.vadsColorForegroundErrorOnLight,
+      OnDark: colors.vadsColorForegroundErrorOnDark,
+    }}
+  />
 </ColorPalette>
 
 ### Surface
@@ -445,6 +463,55 @@ Our color palette is organized into semantic color tokens, which have specific m
   />
 </ColorPalette>
 
+### Forms
+
+#### Foreground
+<ColorPalette>
+  <ColorItem
+    title="Active"
+    subtitle="vadsColorFormsForegroundActive"
+    colors={{
+      OnLight: colors.vadsColorFormsForegroundActiveOnLight,
+      OnDark: colors.vadsColorFormsForegroundActiveOnDark,
+    }}
+  />
+</ColorPalette>
+
+#### Border
+<ColorPalette>
+  <ColorItem
+    title="Default"
+    subtitle="vadsColorFormsBorderDefault"
+    colors={{
+      OnLight: colors.vadsColorFormsBorderDefaultOnLight,
+      OnDark: colors.vadsColorFormsBorderDefaultOnDark,
+    }}
+  />
+  <ColorItem
+    title="Subtle"
+    subtitle="vadsColorFormsBorderSubtle"
+    colors={{
+      OnLight: colors.vadsColorFormsBorderSubtleOnLight,
+      OnDark: colors.vadsColorFormsBorderSubtleOnDark,
+    }}
+  />
+  <ColorItem
+    title="Active"
+    subtitle="vadsColorFormsBorderActive"
+    colors={{
+      OnLight: colors.vadsColorFormsBorderActiveOnLight,
+      OnDark: colors.vadsColorFormsBorderActiveOnDark,
+    }}
+  />
+  <ColorItem
+    title="Error"
+    subtitle="vadsColorFormsBorderError"
+    colors={{
+      OnLight: colors.vadsColorFormsBorderErrorOnLight,
+      OnDark: colors.vadsColorFormsBorderErrorOnDark,
+    }}
+  />
+</ColorPalette>
 
 ## Component
 

diff --git a/yarn.lock b/yarn.lock
@@ -3139,7 +3139,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.8"
     "@babel/preset-typescript": "npm:^7.24.7"
     "@department-of-veterans-affairs/mobile-assets": "npm:0.12.0"
-    "@department-of-veterans-affairs/mobile-tokens": "npm:0.14.0"
+    "@department-of-veterans-affairs/mobile-tokens": "npm:0.15.0"
     "@expo/metro-runtime": "npm:~3.2.1"
     "@expo/webpack-config": "npm:~19.0.1"
     "@os-team/i18next-react-native-language-detector": "npm:^1.0.34"
@@ -3202,18 +3202,18 @@ __metadata:
     typescript: "npm:~5.3.3"
   peerDependencies:
     "@department-of-veterans-affairs/mobile-assets": ^0.12.0
-    "@department-of-veterans-affairs/mobile-tokens": ^0.14.0
+    "@department-of-veterans-affairs/mobile-tokens": ^0.15.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.14.0":
-  version: 0.14.0
-  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.14.0"
-  checksum: 0b9d1b2d3da1a5a57cf677bf973eef6f2d69dacd8898add5d92d75418907f120bf09680ab573b6d1f3f2c1fb9589e95f5057e5c980f4eac2dd3000ff7ede9805
+"@department-of-veterans-affairs/mobile-tokens@npm:0.15.0":
+  version: 0.15.0
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.15.0"
+  checksum: fa19aafb4006fbbec9c2bc8cee23bb2f907f83c3cdd60124e81f3b1686d2473a832b65dd03fdb1efb624c6c35dc7878b470eb738cb2641848257d6a8a08e0596
   languageName: node
   linkType: hard