diff --git a/.gitignore b/.gitignore index e9b719b4..95cd6c58 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/components/package.json b/packages/components/package.json index 624129c6..4e251e02 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index f742eaab..5e5a8855 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/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 = ({ 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 = { diff --git a/packages/components/yarn.lock b/packages/components/yarn.lock index a2a45622..5fc1e0fc 100644 --- a/packages/components/yarn.lock +++ b/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" diff --git a/packages/tokens/README.md b/packages/tokens/README.md new file mode 100644 index 00000000..1ebca16b --- /dev/null +++ b/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 | diff --git a/packages/tokens/config.json b/packages/tokens/config.json new file mode 100644 index 00000000..304c244c --- /dev/null +++ b/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" + } + } + } + ] + } + } +} diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 5acd5712..fe6a1449 100644 --- a/packages/tokens/package.json +++ b/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": "yarn@3.6.1" + "packageManager": "yarn@3.6.1", + "devDependencies": { + "style-dictionary": "^3.8.0" + } } diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts new file mode 100644 index 00000000..81630a8a --- /dev/null +++ b/packages/tokens/src/index.ts @@ -0,0 +1 @@ +export * as Colors from '../dist/js/colors' diff --git a/packages/tokens/src/tokens/.gitkeep b/packages/tokens/src/tokens/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/tokens/src/tokens/colors.json b/packages/tokens/src/tokens/colors.json new file mode 100644 index 00000000..b5d81e5e --- /dev/null +++ b/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" + ] + } + } +} diff --git a/yarn.lock b/yarn.lock index 8afc0612..a3b7e561 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2156,6 +2156,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 @@ -2208,9 +2209,11 @@ __metadata: languageName: unknown linkType: soft -"@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens": +"@department-of-veterans-affairs/mobile-tokens@0.0.7, @department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens": version: 0.0.0-use.local resolution: "@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens" + dependencies: + style-dictionary: ^3.8.0 languageName: unknown linkType: soft @@ -8024,6 +8027,17 @@ __metadata: languageName: node linkType: hard +"capital-case@npm:^1.0.4": + version: 1.0.4 + resolution: "capital-case@npm:1.0.4" + dependencies: + no-case: ^3.0.4 + tslib: ^2.0.3 + upper-case-first: ^2.0.2 + checksum: 41fa8fa87f6d24d0835a2b4a9341a3eaecb64ac29cd7c5391f35d6175a0fa98ab044e7f2602e1ec3afc886231462ed71b5b80c590b8b41af903ec2c15e5c5931 + languageName: node + linkType: hard + "capture-exit@npm:^2.0.0": version: 2.0.0 resolution: "capture-exit@npm:2.0.0" @@ -8068,6 +8082,26 @@ __metadata: languageName: node linkType: hard +"change-case@npm:^4.1.2": + version: 4.1.2 + resolution: "change-case@npm:4.1.2" + dependencies: + camel-case: ^4.1.2 + capital-case: ^1.0.4 + constant-case: ^3.0.4 + dot-case: ^3.0.4 + header-case: ^2.0.4 + no-case: ^3.0.4 + param-case: ^3.0.4 + pascal-case: ^3.1.2 + path-case: ^3.0.4 + sentence-case: ^3.0.4 + snake-case: ^3.0.4 + tslib: ^2.0.3 + checksum: e4bc4a093a1f7cce8b33896665cf9e456e3bc3cc0def2ad7691b1994cfca99b3188d0a513b16855b01a6bd20692fcde12a7d4d87a5615c4c515bbbf0e651f116 + languageName: node + linkType: hard + "char-regex@npm:^1.0.2": version: 1.0.2 resolution: "char-regex@npm:1.0.2" @@ -8631,6 +8665,17 @@ __metadata: languageName: node linkType: hard +"constant-case@npm:^3.0.4": + version: 3.0.4 + resolution: "constant-case@npm:3.0.4" + dependencies: + no-case: ^3.0.4 + tslib: ^2.0.3 + upper-case: ^2.0.2 + checksum: 6c3346d51afc28d9fae922e966c68eb77a19d94858dba230dd92d7b918b37d36db50f0311e9ecf6847e43e934b1c01406a0936973376ab17ec2c471fbcfb2cf3 + languageName: node + linkType: hard + "constants-browserify@npm:^1.0.0": version: 1.0.0 resolution: "constants-browserify@npm:1.0.0" @@ -11211,7 +11256,7 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:^10.1.0": +"fs-extra@npm:^10.0.0, fs-extra@npm:^10.1.0": version: 10.1.0 resolution: "fs-extra@npm:10.1.0" dependencies: @@ -12014,6 +12059,16 @@ __metadata: languageName: node linkType: hard +"header-case@npm:^2.0.4": + version: 2.0.4 + resolution: "header-case@npm:2.0.4" + dependencies: + capital-case: ^1.0.4 + tslib: ^2.0.3 + checksum: 571c83eeb25e8130d172218712f807c0b96d62b020981400bccc1503a7cf14b09b8b10498a962d2739eccf231d950e3848ba7d420b58a6acd2f9283439546cd9 + languageName: node + linkType: hard + "hermes-estree@npm:0.8.0": version: 0.8.0 resolution: "hermes-estree@npm:0.8.0" @@ -14228,6 +14283,13 @@ __metadata: languageName: node linkType: hard +"jsonc-parser@npm:^3.0.0": + version: 3.2.0 + resolution: "jsonc-parser@npm:3.2.0" + checksum: 946dd9a5f326b745aa326d48a7257e3f4a4b62c5e98ec8e49fa2bdd8d96cef7e6febf1399f5c7016114fd1f68a1c62c6138826d5d90bc650448e3cf0951c53c7 + languageName: node + linkType: hard + "jsonfile@npm:^4.0.0": version: 4.0.0 resolution: "jsonfile@npm:4.0.0" @@ -16820,6 +16882,16 @@ __metadata: languageName: node linkType: hard +"path-case@npm:^3.0.4": + version: 3.0.4 + resolution: "path-case@npm:3.0.4" + dependencies: + dot-case: ^3.0.4 + tslib: ^2.0.3 + checksum: 61de0526222629f65038a66f63330dd22d5b54014ded6636283e1d15364da38b3cf29e4433aa3f9d8b0dba407ae2b059c23b0104a34ee789944b1bc1c5c7e06d + languageName: node + linkType: hard + "path-dirname@npm:^1.0.0": version: 1.0.2 resolution: "path-dirname@npm:1.0.2" @@ -19253,6 +19325,17 @@ __metadata: languageName: node linkType: hard +"sentence-case@npm:^3.0.4": + version: 3.0.4 + resolution: "sentence-case@npm:3.0.4" + dependencies: + no-case: ^3.0.4 + tslib: ^2.0.3 + upper-case-first: ^2.0.2 + checksum: 3cfe6c0143e649132365695706702d7f729f484fa7b25f43435876efe7af2478243eefb052bacbcce10babf9319fd6b5b6bc59b94c80a1c819bcbb40651465d5 + languageName: node + linkType: hard + "serialize-error@npm:6.0.0": version: 6.0.0 resolution: "serialize-error@npm:6.0.0" @@ -19532,6 +19615,16 @@ __metadata: languageName: node linkType: hard +"snake-case@npm:^3.0.4": + version: 3.0.4 + resolution: "snake-case@npm:3.0.4" + dependencies: + dot-case: ^3.0.4 + tslib: ^2.0.3 + checksum: 0a7a79900bbb36f8aaa922cf111702a3647ac6165736d5dc96d3ef367efc50465cac70c53cd172c382b022dac72ec91710608e5393de71f76d7142e6fd80e8a3 + languageName: node + linkType: hard + "snapdragon-node@npm:^2.0.1": version: 2.1.1 resolution: "snapdragon-node@npm:2.1.1" @@ -20187,6 +20280,25 @@ __metadata: languageName: node linkType: hard +"style-dictionary@npm:^3.8.0": + version: 3.8.0 + resolution: "style-dictionary@npm:3.8.0" + dependencies: + chalk: ^4.0.0 + change-case: ^4.1.2 + commander: ^8.3.0 + fs-extra: ^10.0.0 + glob: ^7.2.0 + json5: ^2.2.2 + jsonc-parser: ^3.0.0 + lodash: ^4.17.15 + tinycolor2: ^1.4.1 + bin: + style-dictionary: bin/style-dictionary + checksum: ed2440c2d1bd84593f9f60ffbfbb7c85c9592d125e169ea63e2044fe681191e8c9c156853d82ae606f9adf6aacbaa162e03d5ef85b80be334d76e28a57bfc189 + languageName: node + linkType: hard + "style-loader@npm:^1.3.0": version: 1.3.0 resolution: "style-loader@npm:1.3.0" @@ -21398,6 +21510,24 @@ __metadata: languageName: node linkType: hard +"upper-case-first@npm:^2.0.2": + version: 2.0.2 + resolution: "upper-case-first@npm:2.0.2" + dependencies: + tslib: ^2.0.3 + checksum: 4487db4701effe3b54ced4b3e4aa4d9ab06c548f97244d04aafb642eedf96a76d5a03cf5f38f10f415531d5792d1ac6e1b50f2a76984dc6964ad530f12876409 + languageName: node + linkType: hard + +"upper-case@npm:^2.0.2": + version: 2.0.2 + resolution: "upper-case@npm:2.0.2" + dependencies: + tslib: ^2.0.3 + checksum: 508723a2b03ab90cf1d6b7e0397513980fab821cbe79c87341d0e96cedefadf0d85f9d71eac24ab23f526a041d585a575cfca120a9f920e44eb4f8a7cf89121c + languageName: node + linkType: hard + "uri-js@npm:^4.2.2": version: 4.4.1 resolution: "uri-js@npm:4.4.1"