Merge branch 'main' into feature/541-narin-update-to-tokens-0.21.0

documentation/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [tokens-v0.23.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.23.0) (2024-12-12)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.22.0...tokens-v0.23.0)
+
+**Closed issues:**
+
+- DS - RadioButton Accessibility Review [\#524](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/524)
+
+**Merged pull requests:**
+
+- \[Tokens\] Add new tokens [\#610](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/610) ([jessicawoodin](https://github.com/jessicawoodin))
+
+## [tokens-v0.22.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.22.0) (2024-12-11)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/tokens-v0.21.0...tokens-v0.22.0)
+
+**Closed issues:**
+
+- DS - Typography - Apply tokens to components in Figma [\#558](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/558)
+- DS -Publish Text component to Figma & Doc Site [\#552](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/552)
+- \[Design Tokens\] Colors: Add new feedback tokens to VADS [\#541](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/541)
+- Radio Button - Publish component to Figma and Doc Site [\#195](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/195)
+
+**Merged pull requests:**
+
+- \[Bug\] Typography – Fix heading bottom margin [\#606](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/606) ([narin](https://github.com/narin))
+
 ## [tokens-v0.21.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/tokens-v0.21.0) (2024-12-09)
 
 [Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.28.0...tokens-v0.21.0)

packages/tokens/figma/dark.json

@@ -563,6 +563,10 @@
     "$value": "{uswds-system-color-blue-warm-30}",
     "$type": "color"
   },
+  "vads-color-border-focus-on-dark": {
+    "$value": "{uswds-system-color-yellow-vivid-20}",
+    "$type": "color"
+  },
   "vads-color-border-strong-on-dark": {
     "$value": "{vads-color-base-light}",
     "$type": "color"
@@ -615,6 +619,14 @@
     "$value": "{uswds-system-color-yellow-vivid-20}",
     "$type": "color"
   },
+  "vads-color-feedback-foreground-error-on-dark": {
+    "$value": "{uswds-system-color-red-vivid-40}",
+    "$type": "color"
+  },
+  "vads-color-feedback-foreground-info-on-dark": {
+    "$value": "{vads-color-primary-alt}",
+    "$type": "color"
+  },
   "vads-color-feedback-foreground-success-on-dark": {
     "$value": "{uswds-system-color-green-cool-vivid-30}",
     "$type": "color"
@@ -643,10 +655,6 @@
     "$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"
@@ -671,6 +679,10 @@
     "$value": "{vads-color-base-dark}",
     "$type": "color"
   },
+  "vads-color-forms-border-success-on-dark": {
+    "$value": "{vads-color-green-light}",
+    "$type": "color"
+  },
   "vads-color-forms-foreground-active-on-dark": {
     "$value": "{uswds-system-color-blue-vivid-30}",
     "$type": "color"

packages/tokens/figma/light.json

@@ -583,6 +583,10 @@
     "$value": "{uswds-system-color-blue-warm-30}",
     "$type": "color"
   },
+  "vads-color-border-focus-on-light": {
+    "$value": "{uswds-system-color-yellow-vivid-20}",
+    "$type": "color"
+  },
   "vads-color-border-strong-on-light": {
     "$value": "{vads-color-base-dark}",
     "$type": "color"
@@ -635,6 +639,14 @@
     "$value": "{vads-color-warning}",
     "$type": "color"
   },
+  "vads-color-feedback-foreground-error-on-light": {
+    "$value": "{vads-color-secondary-dark}",
+    "$type": "color"
+  },
+  "vads-color-feedback-foreground-info-on-light": {
+    "$value": "{uswds-system-color-cyan-vivid-40}",
+    "$type": "color"
+  },
   "vads-color-feedback-foreground-success-on-light": {
     "$value": "{uswds-system-color-green-cool-vivid-50}",
     "$type": "color"
@@ -663,10 +675,6 @@
     "$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"
@@ -691,6 +699,10 @@
     "$value": "{vads-color-base-light}",
     "$type": "color"
   },
+  "vads-color-forms-border-success-on-light": {
+    "$value": "{vads-color-success}",
+    "$type": "color"
+  },
   "vads-color-forms-foreground-active-on-light": {
     "$value": "{vads-color-primary}",
     "$type": "color"

packages/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.21.0",
+  "version": "0.23.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,13 @@
       "category": "color"
     }
   },
+  "vads-color-border-focus-on-dark": {
+    "name": "vads-color-border-focus-on-dark",
+    "value": "{uswds-system-color-yellow-vivid-20}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-foreground-default-on-dark": {
     "name": "vads-color-foreground-default-on-dark",
     "value": "{vads-color-base-lightest.*.value}",
@@ -41,13 +48,6 @@
       "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}",
@@ -174,6 +174,20 @@
       "category": "color"
     }
   },
+  "vads-color-feedback-foreground-info-on-dark": {
+    "name": "vads-color-feedback-foreground-info-on-dark",
+    "value": "{vads-color-primary-alt.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-feedback-foreground-error-on-dark": {
+    "name": "vads-color-feedback-foreground-error-on-dark",
+    "value": "{uswds-system-color-red-vivid-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}",
@@ -195,6 +209,13 @@
       "category": "color"
     }
   },
+  "vads-color-forms-border-success-on-dark": {
+    "name": "vads-color-forms-border-success-on-dark",
+    "value": "{vads-color-green-light.*.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}",

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

@@ -27,6 +27,13 @@
       "category": "color"
     }
   },
+  "vads-color-border-focus-on-light": {
+    "name": "vads-color-border-focus-on-light",
+    "value": "{uswds-system-color-yellow-vivid-20}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-foreground-default-on-light": {
     "name": "vads-color-foreground-default-on-light",
     "value": "{vads-color-base.*.value}",
@@ -48,13 +55,6 @@
       "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}",
@@ -194,14 +194,28 @@
     "attributes": {
       "category": "color"
     }
-  },  
+  },
   "vads-color-feedback-border-error-on-light": {
     "name": "vads-color-feedback-border-error-on-light",
     "value": "{vads-color-error.*.value}",
     "attributes": {
       "category": "color"
     }
   },
+  "vads-color-feedback-foreground-info-on-light": {
+    "name": "vads-color-feedback-foreground-info-on-light",
+    "value": "{uswds-system-color-cyan-vivid-40}",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "vads-color-feedback-foreground-error-on-light": {
+    "name": "vads-color-feedback-foreground-error-on-light",
+    "value": "{vads-color-secondary-dark.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-feedback-surface-info-on-light": {
     "name": "vads-color-feedback-surface-info-on-light",
     "value": "{vads-color-info-lighter.*.value}",
@@ -251,6 +265,13 @@
       "category": "color"
     }
   },
+  "vads-color-forms-border-success-on-light": {
+    "name": "vads-color-forms-border-success-on-light",
+    "value": "{vads-color-success.*.value}",
+    "attributes": {
+      "category": "color"
+    }
+  },
   "vads-color-forms-border-active-on-light": {
     "name": "vads-color-forms-border-active-on-light",
     "value": "{vads-color-primary.*.value}",

packages/tokens/src/tokens/font/typography.json

@@ -80,7 +80,7 @@
       "fontFamily": "{vads-font-family-serif-regular}",
       "fontSize": "{vads-font-size-heading-level-1}",
       "lineHeight": "{vads-font-line-height-heading-2xl}",
-      "marginBottom": "{vads-space-3xl}",
+      "marginBottom": "{vads-space-lg}",
       "letterSpacing": "{vads-font-letter-spacing-heading}"
     },
     "attributes": {
@@ -95,7 +95,7 @@
       "fontFamily": "{vads-font-family-serif-regular}",
       "fontSize": "{vads-font-size-heading-level-2}",
       "lineHeight": "{vads-font-line-height-heading-xl}",
-      "marginBottom": "{vads-space-2xl}",
+      "marginBottom": "{vads-space-md}",
       "letterSpacing": "{vads-font-letter-spacing-heading}"
     },
     "attributes": {
@@ -110,7 +110,7 @@
       "fontFamily": "{vads-font-family-sans-serif-bold}",
       "fontSize": "{vads-font-size-heading-level-3}",
       "lineHeight": "{vads-font-line-height-heading-lg}",
-      "marginBottom": "{vads-space-xl}",
+      "marginBottom": "{vads-space-sm}",
       "letterSpacing": "{vads-font-letter-spacing-heading}"
     },
     "attributes": {
@@ -125,7 +125,7 @@
       "fontFamily": "{vads-font-family-sans-serif-bold}",
       "fontSize": "{vads-font-size-heading-level-4}",
       "lineHeight": "{vads-font-line-height-heading-md}",
-      "marginBottom": "{vads-space-lg}",
+      "marginBottom": "{vads-space-xs}",
       "letterSpacing": "{vads-font-letter-spacing-heading}"
     },
     "attributes": {