diff --git a/packages/components/package.json b/packages/components/package.json index 0d30a49e..f47c21e3 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.4", "@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..0347f6d1 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.4 "@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.4": + version: 0.0.4 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.0.4" + checksum: a3455980b9733d7c3102824cb7f9531abcc0e3084ed2f265442ccd4bf15b3a4538cbc4796c58c347aa3dab0d0130a8989f9da628a3fc0726fdcedd8a7187c423 + 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/yarn.lock b/yarn.lock index e7ea741b..cf3cc803 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": "file:../tokens" "@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,6 +2209,13 @@ __metadata: languageName: unknown linkType: soft +"@department-of-veterans-affairs/mobile-tokens@file:../tokens::locator=%40department-of-veterans-affairs%2Fmobile-component-library%40workspace%3Apackages%2Fcomponents": + version: 0.0.3 + resolution: "@department-of-veterans-affairs/mobile-tokens@file:../tokens#../tokens::hash=01cfe1&locator=%40department-of-veterans-affairs%2Fmobile-component-library%40workspace%3Apackages%2Fcomponents" + checksum: be7f4cc339214a42252c41e7e176abe64ee8c6745ff2d1bfb48744ef0fb5eaa485ce7bbafed1d6bf6373376bae396f19eeb912c9cf9ae241864ebc3baab7e97c + languageName: node + linkType: hard + "@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"