Add style-dictionary and generate initial tokens

.gitignore

@@ -18,6 +18,7 @@ coverage
 .yarn/cache
 packages/components/.yarn/install-state.gz
 packages/components/.yarn/cache
+packages/tokens/dist/
 
 !.yarn/patches
 !.yarn/releases

packages/components/package.json

@@ -38,6 +38,7 @@
   },
   "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library",
   "dependencies": {
+    "@department-of-veterans-affairs/mobile-tokens": "0.0.7",
     "@os-team/i18next-react-native-language-detector": "^1.0.28",
     "i18next": "^23.4.3",
     "react-i18next": "^13.0.3",

packages/components/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,3 +1,4 @@
+import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import {
   Text,
   TextStyle,
@@ -59,27 +60,16 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
     onChange(selected)
   }, [selected, onChange, labels])
 
-  // Copied from DSVA color tokens in css-library
-  const colorTokens = {
-    white: '#FFFFFF',
-    gray: {
-      dark: '#323A45',
-      lighter: '#D6D7D9',
-      lightest: '#F1F1F1',
-      medium: '#757575',
-    },
-  }
-
   let textColor: string, activeBgColor: string, inactiveBgColor: string
 
   if (colorScheme === 'light') {
-    textColor = colorTokens.gray.dark
-    activeBgColor = colorTokens.white
-    inactiveBgColor = colorTokens.gray.lighter
+    textColor = Colors.grayDark
+    activeBgColor = Colors.white
+    inactiveBgColor = Colors.grayLighter
   } else {
-    textColor = colorTokens.gray.lightest
-    activeBgColor = colorTokens.gray.medium
-    inactiveBgColor = colorTokens.gray.dark
+    textColor = Colors.grayLightest
+    activeBgColor = Colors.grayMedium
+    inactiveBgColor = Colors.grayDark
   }
 
   const viewStyle: ViewStyle = {

packages/components/yarn.lock

@@ -2829,6 +2829,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.0
     "@babel/plugin-proposal-export-namespace-from": ^7.18.9
+    "@department-of-veterans-affairs/mobile-tokens": 0.0.7
     "@expo/webpack-config": ^18.1.2
     "@os-team/i18next-react-native-language-detector": ^1.0.28
     "@react-native-async-storage/async-storage": ^1.19.0
@@ -2881,6 +2882,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@department-of-veterans-affairs/mobile-tokens@npm:0.0.7":
+  version: 0.0.7
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.0.7"
+  checksum: eb1f4c756a3408a6219aaa8465aec5a2d1d926e1a49271574847c8668afe2082f8dafd21ee451becd12409262d7697c41a7ba61490a077662a14710218205b1e
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"

packages/tokens/README.md

@@ -0,0 +1,10 @@
+# VA Mobile Design Tokens
+
+This repo contains the design tokens for the VA Mobile Design Library. It uses [Style Dictionary](https://amzn.github.io/style-dictionary/#/) as a build system to define our styles in JSON and export them to different formats.
+
+## Commands
+
+| Command              | Description                                                                                                                       |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| yarn build           | Takes any JSON files in the `src/tokens` folder and transforms them according to the defined transformations in the `config.json` |
+| yarn publish-package | Publishes the packages to npm                                                                                                     |

packages/tokens/config.json

@@ -0,0 +1,23 @@
+{
+  "source": [
+    "./src/tokens/**/*.json"
+  ],
+  "platforms": {
+    "rn": {
+      "transformGroup": "react-native",
+      "buildPath": "./dist/",
+      "prefix": "",
+      "files": [
+        {
+          "destination": "js/colors.js",
+          "format": "javascript/es6",
+          "filter": {
+            "attributes": {
+              "category": "color"
+            }
+          }
+        }
+      ]
+    }
+  }
+}

packages/tokens/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.0.1",
+  "version": "0.0.7",
   "description": "VA Design System Mobile Token Library",
-  "main": "index.js",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "style-dictionary build",
+    "prepack": "style-dictionary build",
+    "publish-package": "npm publish --access public --tolerate-republish"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/department-of-veterans-affairs/va-mobile-library.git"
@@ -22,5 +27,8 @@
     "url": "https://github.com/department-of-veterans-affairs/va-mobile-library/issues"
   },
   "homepage": "https://github.com/department-of-veterans-affairs/va-mobile-library#readme",
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "style-dictionary": "^3.8.0"
+  }
 }

packages/tokens/src/index.ts

@@ -0,0 +1 @@
+export * as Colors from '../dist/js/colors'

packages/tokens/src/tokens/colors.json

@@ -0,0 +1,190 @@
+{
+  "white": {
+    "value": "#fff",
+    "attributes": {
+      "category": "color"
+    }
+  },
+  "gray": {
+    "*": {
+      "value": "#5b616b",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#5b616b"
+      },
+      "name": "color-gray",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "*"
+      },
+      "path": [
+        "gray",
+        "*"
+      ]
+    },
+    "dark": {
+      "value": "#323a45",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#323a45"
+      },
+      "name": "color-gray-dark",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "dark"
+      },
+      "path": [
+        "gray",
+        "dark"
+      ]
+    },
+    "medium": {
+      "value": "#757575",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#757575"
+      },
+      "name": "color-gray-medium",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "medium"
+      },
+      "path": [
+        "gray",
+        "medium"
+      ]
+    },
+    "light": {
+      "value": "#aeb0b5",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#aeb0b5"
+      },
+      "name": "color-gray-light",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "light"
+      },
+      "path": [
+        "gray",
+        "light"
+      ]
+    },
+    "light-alt": {
+      "value": "#eeeeee",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#eeeeee"
+      },
+      "name": "color-gray-light-alt",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "light-alt"
+      },
+      "path": [
+        "gray",
+        "light-alt"
+      ]
+    },
+    "lighter": {
+      "value": "#d6d7d9",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#d6d7d9"
+      },
+      "name": "color-gray-lighter",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "lighter"
+      },
+      "path": [
+        "gray",
+        "lighter"
+      ]
+    },
+    "lightest": {
+      "value": "#f1f1f1",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#f1f1f1"
+      },
+      "name": "color-gray-lightest",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "lightest"
+      },
+      "path": [
+        "gray",
+        "lightest"
+      ]
+    },
+    "warm-dark": {
+      "value": "#494440",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#494440"
+      },
+      "name": "color-gray-warm-dark",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "warm-dark"
+      },
+      "path": [
+        "gray",
+        "warm-dark"
+      ]
+    },
+    "warm-light": {
+      "value": "#e4e2e0",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#e4e2e0"
+      },
+      "name": "color-gray-warm-light",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "warm-light"
+      },
+      "path": [
+        "gray",
+        "warm-light"
+      ]
+    },
+    "cool-light": {
+      "value": "#dce4ef",
+      "filePath": "tokens/color.json",
+      "isSource": true,
+      "original": {
+        "value": "#dce4ef"
+      },
+      "name": "color-gray-cool-light",
+      "attributes": {
+        "category": "color",
+        "type": "gray",
+        "item": "cool-light"
+      },
+      "path": [
+        "gray",
+        "cool-light"
+      ]
+    }
+  }
+}