Merge pull request #484 from department-of-veterans-affairs/tokens/47…

…3-AddCheckboxColorTokensToComponents [Tokens] Add Checkbox color tokens to components
department-of-veterans-affairs · Sep 18, 2024 · 5d74d83 · 5d74d83
2 parents 0693a46 + 3a01754
commit 5d74d83
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -58,7 +58,7 @@ Code reviewer validation:
 
 ## Publish
 <!-- Most changes entail a version increment; section can be removed for PRs exclusively within non-ship-relevant files (e.g. unit tests, Storybook stories) -->
-If changes warrant a new version [per the versioning guidelines](https://github.com/department-of-veterans-affairs/va-mobile-library#versioning-policy) and the PR is approved and ready to merge:
+If changes warrant a new version [per the versioning guidelines](https://github.com/department-of-veterans-affairs/va-mobile-library/blob/main/documentation/versioning.md) and the PR is approved and ready to merge:
 - [ ] Merge `main` into branch
 - [ ] Merge branch to `main`
 - [ ] Verify that [Check Component Integrations](https://github.com/department-of-veterans-affairs/va-mobile-library/actions/workflows/check-component-integrations.yml) workflow ran successfully

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.16.0",
+    "@department-of-veterans-affairs/mobile-tokens": "^0.17.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.13.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.16.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.17.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
@@ -4,11 +4,13 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
 <Meta title="Design Tokens/Colors" />
 
 # Colors
+
 Our color palette is organized into semantic color tokens, which have specific meaning within the system, and primitive color tokens, which establish a subset of colors that the VA uses from the U.S. Web Design System.
 
 ## Primitive
 
 ### Gray
+
 <ColorPalette>
   <ColorItem
     title="Black & White"
@@ -55,14 +57,15 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 ### Blue
+
 <ColorPalette>
   <ColorItem
     title="Primary"
     subtitle="vadsColorPrimary"
     colors={{
       Darker: colors.vadsColorPrimaryDarker,
       Dark: colors.vadsColorPrimaryDark,
-      "—": colors.vadsColorPrimary,
+      '—': colors.vadsColorPrimary,
       Light: colors.vadsColorPrimaryLight,
       Lighter: colors.vadsColorPrimaryLighter,
     }}
@@ -73,7 +76,7 @@ Our color palette is organized into semantic color tokens, which have specific m
     colors={{
       Darkest: colors.vadsColorPrimaryAltDarkest,
       Dark: colors.vadsColorPrimaryAltDark,
-      "—": colors.vadsColorPrimaryAlt,
+      '—': colors.vadsColorPrimaryAlt,
       Light: colors.vadsColorPrimaryAltLight,
       Lightest: colors.vadsColorPrimaryAltLightest,
     }}
@@ -82,7 +85,7 @@ Our color palette is organized into semantic color tokens, which have specific m
     title="Cool"
     subtitle="vadsColorBlueCool"
     colors={{
-      "—": colors.vadsColorBlueCool,
+      '—': colors.vadsColorBlueCool,
       Light: colors.vadsColorBlueCoolLight,
       Lightest: colors.vadsColorBlueCoolLightest,
     }}
@@ -93,19 +96,22 @@ Our color palette is organized into semantic color tokens, which have specific m
     colors={{
       BlueVivid80: colors.uswdsSystemColorBlueVivid80,
       BlueVivid30: colors.uswdsSystemColorBlueVivid30,
+      BlueWarm80: colors.uswdsSystemColorBlueWarm80,
+      BlueWarm5: colors.uswdsSystemColorBlueWarm5,
     }}
   />
 </ColorPalette>
 
 ### Red
+
 <ColorPalette>
   <ColorItem
     title="Secondary"
     subtitle="vadsColorSecondary"
     colors={{
       Darkest: colors.vadsColorSecondaryDarkest,
       Dark: colors.vadsColorSecondaryDark,
-      "—": colors.vadsColorSecondary,
+      '—': colors.vadsColorSecondary,
       Light: colors.vadsColorSecondaryLight,
       Lightest: colors.vadsColorSecondaryLightest,
     }}
@@ -121,6 +127,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 ### Yellow
+
 <ColorPalette>
   <ColorItem
     title="Gold"
@@ -141,6 +148,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 ### Green
+
 <ColorPalette>
   <ColorItem
     title="Green"
@@ -162,18 +170,20 @@ Our color palette is organized into semantic color tokens, which have specific m
 ## Semantic
 
 ### Background
+
 <ColorPalette>
   <ColorItem
     title="Default"
     subtitle="vadsColorBackgroundDefault"
     colors={{
       OnLight: colors.vadsColorBackgroundDefaultOnLight,
-      OnDark: colors.vadsColorBgDefaultOnDark,
+      OnDark: colors.vadsColorBackgroundDefaultOnDark,
     }}
   />
 </ColorPalette>
 
 ### Foreground
+
 <ColorPalette>
   <ColorItem
     title="Default"
@@ -210,6 +220,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 ### Surface
+
 <ColorPalette>
   <ColorItem
     title="Default"
@@ -238,6 +249,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 ### Action
+
 <ColorPalette>
   <ColorItem
     title=""
@@ -258,6 +270,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Default
+
 <ColorPalette>
   <ColorItem
     title="Foreground"
@@ -310,6 +323,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Base
+
 <ColorPalette>
   <ColorItem
     title="Foreground"
@@ -362,6 +376,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Destructive
+
 <ColorPalette>
   <ColorItem
     title="Surface"
@@ -384,6 +399,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 ### Feedback
 
 #### Informational
+
 <ColorPalette>
   <ColorItem
     title="Border"
@@ -404,6 +420,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Success
+
 <ColorPalette>
   <ColorItem
     title="Border"
@@ -424,6 +441,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Warning
+
 <ColorPalette>
   <ColorItem
     title="Border"
@@ -444,6 +462,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Error
+
 <ColorPalette>
   <ColorItem
     title="Border"
@@ -466,6 +485,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 ### Forms
 
 #### Foreground
+
 <ColorPalette>
   <ColorItem
     title="Active"
@@ -478,6 +498,7 @@ Our color palette is organized into semantic color tokens, which have specific m
 </ColorPalette>
 
 #### Border
+
 <ColorPalette>
   <ColorItem
     title="Default"
@@ -513,9 +534,23 @@ Our color palette is organized into semantic color tokens, which have specific m
   />
 </ColorPalette>
 
+#### Surface
+
+<ColorPalette>
+  <ColorItem
+    title="Active"
+    subtitle="vadsColorFormsSurfaceActive"
+    colors={{
+      OnLight: colors.vadsColorFormsSurfaceActiveOnLight,
+      OnDark: colors.vadsColorFormsSurfaceActiveOnDark,
+    }}
+  />
+</ColorPalette>
+
 ## Component
 
 ### Segmented Control
+
 <ColorPalette>
   <ColorItem
     title="Surface (selected)"
@@ -525,4 +560,4 @@ Our color palette is organized into semantic color tokens, which have specific m
       OnDark: colors.vadsSegmentedControlColorSurfaceSelectedOnDark,
     }}
   />
-</ColorPalette>
+</ColorPalette>
diff --git a/yarn.lock b/yarn.lock
@@ -3128,7 +3128,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.8"
     "@babel/preset-typescript": "npm:^7.24.7"
     "@department-of-veterans-affairs/mobile-assets": "npm:0.13.0"
-    "@department-of-veterans-affairs/mobile-tokens": "npm:0.16.0"
+    "@department-of-veterans-affairs/mobile-tokens": "npm:0.17.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"
@@ -3191,18 +3191,18 @@ __metadata:
     typescript: "npm:~5.3.3"
   peerDependencies:
     "@department-of-veterans-affairs/mobile-assets": ^0.12.0
-    "@department-of-veterans-affairs/mobile-tokens": ^0.16.0
+    "@department-of-veterans-affairs/mobile-tokens": ^0.17.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.16.0":
-  version: 0.16.0
-  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.16.0"
-  checksum: 3f70ecd0142eb6eea109c203e5895fdf81ddaa710b683db927ccbf421e263f139b63db1cd5c6d0502408152a8b91a45baeeabcc1687b868c886448c393c0ff57
+"@department-of-veterans-affairs/mobile-tokens@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.17.0"
+  checksum: b043f9962f07b14a28d85ae9dab0a954da025b7c9fb948ed1711c861837f299fa70a4f25902bba20857f45d49f8b588f5f33275b5ddb62fdbac96db9de23d516
   languageName: node
   linkType: hard