Merge pull request #601 from department-of-veterans-affairs/feature/1…

…417-narin-update-css-library

[Tokens] Update css-library to 0.16.0 to get feedback tokens

packages/tokens/build.js

@@ -43,10 +43,9 @@ const stripModeReducer = (result, token) => {
   return result
 }
 
-/** Filter function to return tokens of category 'font', type from filter, and npm true */
+/** Filter function to return tokens of category 'font', type from filter, and npm true. Exclude web font tokens */
 const filterFont = (token, fontType) => {
   const { category, type, npm } = token.attributes
-
   return category === 'font' && type === fontType && npm === true
 }
 
@@ -115,6 +114,12 @@ StyleDictionary.registerFilter({
   matcher: (token) => token.attributes.category.includes('spacing'),
 })
 
+/** Remove VADS web font tokens */
+StyleDictionary.registerFilter({
+  name: 'filter/fonts/is-mobile-font',
+  matcher: (token) => token.attributes.category !== 'vads-font',
+})
+
 /**
  * Formats
  */
@@ -404,6 +409,9 @@ StyleDictionary.registerFormat({
 StyleDictionary.registerTransformGroup({
   name: 'rn',
   transforms: ['name/cti/camel', 'color/hex'],
+  filter: (token) => {
+    console.log(`FILTERING ${token}`)
+  },
 })
 
 /** Registering transform group to massage output as desired for figma */

packages/tokens/config.js

@@ -13,18 +13,22 @@ module.exports = {
         {
           destination: 'index.d.ts',
           format: 'typescript/es6-declarations/module',
+          filter: 'filter/fonts/is-mobile-font',
         },
         {
           destination: 'js/index.js',
           format: 'javascript/es6/vads-module-export',
+          filter: 'filter/fonts/is-mobile-font',
         },
         {
           destination: 'js/font/index.js',
           format: 'javascript/es6/fontIndex',
+          filter: 'filter/fonts/is-mobile-font',
         },
         {
           destination: 'types/font/index.d.ts',
           format: 'typescript/es6-declarations/fontIndex',
+          filter: 'filter/fonts/is-mobile-font',
         },
         // JS defs
         {
@@ -90,6 +94,7 @@ module.exports = {
         {
           destination: 'js/themes.js',
           format: 'javascript/es6/vads-colors-themes',
+          filter: 'filter/fonts/is-mobile-font',
         },
         // TS defs
         {

packages/tokens/figma/dark.json

@@ -151,6 +151,10 @@
     "$value": "#e5a000",
     "$type": "color"
   },
+  "uswds-system-color-gold-vivid-40": {
+    "$value": "#c2850c",
+    "$type": "color"
+  },
   "uswds-system-color-gold-vivid-5": {
     "$value": "#fef0c8",
     "$type": "color"
@@ -307,6 +311,10 @@
     "$value": "#70e17b",
     "$type": "color"
   },
+  "uswds-system-color-green-cool-vivid-30": {
+    "$value": "#21c834",
+    "$type": "color"
+  },
   "uswds-system-color-green-cool-vivid-40": {
     "$value": "#00a91c",
     "$type": "color"
@@ -607,6 +615,14 @@
     "$value": "{uswds-system-color-yellow-vivid-20}",
     "$type": "color"
   },
+  "vads-color-feedback-foreground-success-on-dark": {
+    "$value": "{uswds-system-color-green-cool-vivid-30}",
+    "$type": "color"
+  },
+  "vads-color-feedback-foreground-warning-on-dark": {
+    "$value": "{uswds-system-color-gold-vivid-30}",
+    "$type": "color"
+  },
   "vads-color-feedback-surface-error-on-dark": {
     "$value": "{uswds-system-color-red-vivid-80}",
     "$type": "color"

packages/tokens/figma/light.json

@@ -151,6 +151,10 @@
     "$value": "#e5a000",
     "$type": "color"
   },
+  "uswds-system-color-gold-vivid-40": {
+    "$value": "#c2850c",
+    "$type": "color"
+  },
   "uswds-system-color-gold-vivid-5": {
     "$value": "#fef0c8",
     "$type": "color"
@@ -307,6 +311,10 @@
     "$value": "#70e17b",
     "$type": "color"
   },
+  "uswds-system-color-green-cool-vivid-30": {
+    "$value": "#21c834",
+    "$type": "color"
+  },
   "uswds-system-color-green-cool-vivid-40": {
     "$value": "#00a91c",
     "$type": "color"
@@ -627,6 +635,14 @@
     "$value": "{vads-color-warning}",
     "$type": "color"
   },
+  "vads-color-feedback-foreground-success-on-light": {
+    "$value": "{uswds-system-color-green-cool-vivid-50}",
+    "$type": "color"
+  },
+  "vads-color-feedback-foreground-warning-on-light": {
+    "$value": "{uswds-system-color-gold-vivid-40}",
+    "$type": "color"
+  },
   "vads-color-feedback-surface-error-on-light": {
     "$value": "{vads-color-error-lighter}",
     "$type": "color"

packages/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.20.0",
+  "version": "0.20.1-alpha.0",
   "description": "VA Design System Mobile Token Library",
   "main": "dist/js/index.js",
   "types": "dist/index.d.ts",
@@ -30,7 +30,7 @@
   "homepage": "https://github.com/department-of-veterans-affairs/va-mobile-library#readme",
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@department-of-veterans-affairs/css-library": "^0.11.0",
+    "@department-of-veterans-affairs/css-library": "^0.16.0",
     "prettier": "^3.3.3",
     "style-dictionary": "^3.9.2"
   }

yarn.lock

@@ -3553,6 +3553,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@department-of-veterans-affairs/css-library@npm:^0.16.0":
+  version: 0.16.0
+  resolution: "@department-of-veterans-affairs/css-library@npm:0.16.0"
+  dependencies:
+    "@divriots/style-dictionary-to-figma": "npm:^0.4.0"
+    "@uswds/uswds": "npm:^3.9.0"
+    rimraf: "npm:^5.0.5"
+  checksum: 5d2fea38571bf0d2aea36d755f96df7314d9ad1ffb1022a8a038f2ef931e626689fd2304e3f62b5cea9a7679bcf28da7c38e5890836f9b44907ab3086ff90ccc
+  languageName: node
+  linkType: hard
+
 "@department-of-veterans-affairs/eslint-config-mobile@workspace:packages/linting":
   version: 0.0.0-use.local
   resolution: "@department-of-veterans-affairs/eslint-config-mobile@workspace:packages/linting"
@@ -3687,7 +3698,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens"
   dependencies:
-    "@department-of-veterans-affairs/css-library": "npm:^0.11.0"
+    "@department-of-veterans-affairs/css-library": "npm:^0.16.0"
     prettier: "npm:^3.3.3"
     style-dictionary: "npm:^3.9.2"
   languageName: unknown
@@ -8516,6 +8527,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@uswds/uswds@npm:^3.9.0":
+  version: 3.10.0
+  resolution: "@uswds/uswds@npm:3.10.0"
+  dependencies:
+    receptor: "npm:1.0.0"
+    resolve-id-refs: "npm:0.1.0"
+  checksum: c093efcc06f1687e1122c6b6caa9a22328b4434c252fe2414914c383f09083c0935779595b2c15c516ab08bca9fec0cd63d759daa99bd020a1d9a64912432266
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.6, @webassemblyjs/ast@npm:^1.11.5":
   version: 1.11.6
   resolution: "@webassemblyjs/ast@npm:1.11.6"