Update SegmentedControl to import colors from token library

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",

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.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"

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"