Merge branch 'main' into chore/469-narin-vads-issue-templates

documentation/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [components-v0.23.1](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/components-v0.23.1) (2024-09-11)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.15.0...components-v0.23.1)
+
+**Closed issues:**
+
+- \[Design Tokens\] Checkbox: Create color tokens [\#424](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/424)
+
+**Merged pull requests:**
+
+- \[Feature\] Add Checkbox tokens to Storybook [\#475](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/475) ([jessicawoodin](https://github.com/jessicawoodin))
+
+## [tokens-v0.15.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.15.0) (2024-09-10)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.23.0...tokens-v0.15.0)
+
+**Closed issues:**
+
+- DS - Removed White Button Variant [\#454](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/454)
+- \[Design Tokens\] Spacing: Prep for handoff [\#445](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/445)
+- \[Design Tokens\] Checkbox: Add color tokens to VADS [\#441](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/441)
+- DS - SnackBar Component Flagship Work Setup [\#370](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/370)
+- DS - SnackBar Component Unit Tests [\#368](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/368)
+- Snackbar - Publish component to Figma and Doc Site [\#115](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/115)
+
+**Merged pull requests:**
+
+- \[Feature\] Add Checkbox tokens [\#472](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/472) ([jessicawoodin](https://github.com/jessicawoodin))
+
 ## [components-v0.23.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/components-v0.23.0) (2024-09-04)
 
 [Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.22.1...components-v0.23.0)

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -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",

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
 

packages/tokens/figma/dark.json

@@ -611,10 +611,38 @@
     "$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"
   },
+  "vads-color-foreground-subtle-on-dark": {
+    "$value": "{vads-color-base-light}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-active-on-dark": {
+    "$value": "{uswds-system-color-blue-vivid-30}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-default-on-dark": {
+    "$value": "{vads-color-base-light}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-error-on-dark": {
+    "$value": "{uswds-system-color-red-vivid-40}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-subtle-on-dark": {
+    "$value": "{vads-color-base-dark}",
+    "$type": "color"
+  },
+  "vads-color-forms-foreground-active-on-dark": {
+    "$value": "{uswds-system-color-blue-vivid-30}",
+    "$type": "color"
+  },
   "vads-color-gibill-accent": {
     "$value": "{uswds-system-color-gold-vivid-5}",
     "$type": "color"

packages/tokens/figma/light.json

@@ -631,10 +631,38 @@
     "$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"
   },
+  "vads-color-foreground-subtle-on-light": {
+    "$value": "{vads-color-base-dark}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-active-on-light": {
+    "$value": "{vads-color-primary}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-default-on-light": {
+    "$value": "{vads-color-base-dark}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-error-on-light": {
+    "$value": "{vads-color-secondary-dark}",
+    "$type": "color"
+  },
+  "vads-color-forms-border-subtle-on-light": {
+    "$value": "{vads-color-base-light}",
+    "$type": "color"
+  },
+  "vads-color-forms-foreground-active-on-light": {
+    "$value": "{vads-color-primary}",
+    "$type": "color"
+  },
   "vads-color-gibill-accent": {
     "$value": "{uswds-system-color-gold-vivid-5}",
     "$type": "color"

packages/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "VA Design System Mobile Token Library",
   "main": "dist/js/index.js",
   "types": "dist/index.d.ts",

packages/tokens/src/tokens/color/semantic-dark.json

@@ -20,6 +20,20 @@
       "category": "color"
     }
   },
+  "vads-color-foreground-subtle-on-dark": {
+    "name": "vads-color-foreground-subtle-on-dark",
+    "value": "{vads-color-base-light.*.value}",
+    "attributes": {
+      "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}",
@@ -145,5 +159,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}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-border-error-on-dark": {
+    "name": "vads-color-forms-border-error-on-dark",
+    "value": "{uswds-system-color-red-vivid-40}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-border-subtle-on-dark": {
+    "name": "vads-color-forms-border-subtle-on-dark",
+    "value": "{vads-color-base-dark.*.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}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-foreground-active-on-dark": {
+    "name": "vads-color-forms-foreground-active-on-dark",
+    "value": "{uswds-system-color-blue-vivid-30}",
+    "attributes": {
+      "category": "color"
+    }
   }
 }

packages/tokens/src/tokens/color/semantic-light.json

@@ -27,6 +27,20 @@
       "category": "color"
     }
   },
+  "vads-color-foreground-subtle-on-light": {
+    "name": "vads-color-foreground-subtle-on-light",
+    "value": "{vads-color-base-dark.*.value}",
+    "attributes": {
+      "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}",
@@ -201,5 +215,40 @@
     "attributes": {
       "category": "color"
     }
+  },
+  "vads-color-forms-border-default-on-light": {
+    "name": "vads-color-forms-border-default-on-light",
+    "value": "{vads-color-base-dark.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-border-error-on-light": {
+    "name": "vads-color-forms-border-error-on-light",
+    "value": "{vads-color-secondary-dark.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-border-subtle-on-light": {
+    "name": "vads-color-forms-border-subtle-on-light",
+    "value": "{vads-color-base-light.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-border-active-on-light": {
+    "name": "vads-color-forms-border-active-on-light",
+    "value": "{vads-color-primary.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-forms-foreground-active-on-light": {
+    "name": "vads-color-forms-foreground-active-on-light",
+    "value": "{vads-color-primary.*.value}",
+    "attributes": {
+      "category": "color"
+    }
   }
 }

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