feature/7573-UpdateAppColorsToComponentLibrary

VAMobile/src/components/ActivityButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react'
 import { Linking, Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
+
 import { Box, TextView, VAIcon } from 'components'
 import { useTheme } from 'utils/hooks'
 import { WaygateToggleType, waygateNativeAlert } from 'utils/waygateConfig'
 
-import colors from '../styles/themes/VAColors'
-
 interface ActivityButtonProps {
   /** Text for header */
   title: string
@@ -28,7 +28,7 @@ const ActivityButton: FC<ActivityButtonProps> = ({ title, subText, deepLink }: A
     backgroundColor: pressed
       ? theme.colors.buttonBackground.activityButtonActive
       : theme.colors.buttonBackground.activityButton,
-    shadowColor: colors.black,
+    shadowColor: colors.vadsColorBlack,
     ...Platform.select({
       ios: {
         shadowOffset: { width: 0, height: 6 },
@@ -80,7 +80,7 @@ const ActivityButton: FC<ActivityButtonProps> = ({ title, subText, deepLink }: A
               height={24}
               name="RightArrowInCircle"
               fill={theme.colors.icon.activityButton}
-              fill2={theme.colors.icon.transparent}
+              fill2={'transparent'}
               ml={theme.dimensions.listItemDecoratorMarginLeft}
               preventScaling={true}
             />

VAMobile/src/components/AnnouncementBanner.tsx

@@ -2,12 +2,11 @@ import React, { FC } from 'react'
 import { Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
 import { Icon } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/Icon'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 
 import { Box, TextView } from 'components'
 import { useExternalLink, useTheme } from 'utils/hooks'
 
-import colors from '../styles/themes/VAColors'
-
 interface AnnouncementBannerProps {
   /** Text for announcement title */
   title: string
@@ -26,7 +25,7 @@ const AnnouncementBanner: FC<AnnouncementBannerProps> = ({ title, link, a11yLabe
     paddingVertical: theme.dimensions.formMarginBetween,
     paddingHorizontal: theme.dimensions.cardPadding,
     backgroundColor: pressed ? theme.colors.background.listActive : theme.colors.buttonBackground.announcementBanner,
-    shadowColor: colors.black,
+    shadowColor: colors.vadsColorBlack,
     ...Platform.select({
       ios: {
         shadowOffset: { width: 0, height: 6 },

VAMobile/src/components/BackButton.tsx

@@ -81,7 +81,7 @@ export const BackButton: FC<BackButtonProps> = ({
         {chevron}
         <TextView
           variant="ActionBar"
-          color={webview ? 'footerButton' : undefined}
+          color={webview ? 'link' : undefined}
           ml={theme.dimensions.textIconMargin}
           allowFontScaling={false}
           accessible={false}>

VAMobile/src/components/Box.tsx

@@ -4,23 +4,14 @@ import { FlexAlignType, View, ViewProps } from 'react-native'
 import styled from 'styled-components'
 import _ from 'underscore'
 
-import {
-  VABackgroundColors,
-  VABorderColors,
-  VAButtonBackgroundColors,
-  VAButtonBorderColors,
-  VAListTagColors,
-  VATheme,
-} from 'styles/theme'
+import { VABackgroundColors, VABorderColors, VAButtonBackgroundColors, VATheme } from 'styles/theme'
 import { themeFn } from 'utils/theme'
 
 type VABackgroundColorsVariant = keyof VABackgroundColors
 type VAButtonBackgroundColorsVariant = keyof VAButtonBackgroundColors
-type VAListTagColorsVariant = keyof VAListTagColors
-export type BackgroundVariant = VABackgroundColorsVariant | VAButtonBackgroundColorsVariant | VAListTagColorsVariant
+export type BackgroundVariant = VABackgroundColorsVariant | VAButtonBackgroundColorsVariant
 
 type VABorderColorsVariant = keyof VABorderColors
-type VAButtonBorderColorsVariant = keyof VAButtonBorderColors
 export type BorderColorVariant = VABorderColorsVariant | VAButtonBackgroundColorsVariant
 export type BorderStyles = 'none' | 'dotted' | 'solid' | 'dashed'
 export type BorderWidths = 'default' | number
@@ -194,8 +185,7 @@ const getBackgroundColor = (theme: VATheme, bgVariant: BackgroundVariant | undef
   }
   return (
     theme.colors.background[bgVariant as VABackgroundColorsVariant] ||
-    theme.colors.buttonBackground[bgVariant as VAButtonBackgroundColorsVariant] ||
-    theme.colors.listTag[bgVariant as VAListTagColorsVariant]
+    theme.colors.buttonBackground[bgVariant as VAButtonBackgroundColorsVariant]
   )
 }
 
@@ -218,9 +208,7 @@ const generateBorderStyles = (
   }
 
   if (color) {
-    styles[`border${dir}-color`] =
-      theme.colors.border[color as VABorderColorsVariant] ||
-      theme.colors.buttonBorder[color as VAButtonBorderColorsVariant]
+    styles[`border${dir}-color`] = theme.colors.border[color as VABorderColorsVariant]
   }
   return styles
 }

VAMobile/src/components/DescriptiveBackButton.tsx

@@ -58,7 +58,7 @@ export const DescriptiveBackButton: FC<DescBackButtonProps> = ({
         <VAIcon mt={1} name={'ChevronLeft'} fill={theme.colors.icon.link} width={15} height={13} maxWidth={25} />
         <TextView
           variant="DescriptiveBackButton"
-          color="descriptiveBackButton"
+          color="link"
           ml={theme.dimensions.textIconMargin}
           allowFontScaling={false}
           accessible={false}>

VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx

@@ -41,9 +41,7 @@ const PickerList: FC<PickerListProps> = ({ items, title, titleA11yLabel }) => {
     // Move all of the properties except text lines to the standard list item object
     const { text, icon, testId, isSelected, detoxTestID, ...listItemObj } = item
 
-    const textLine = icon
-      ? [{ text, iconProps: icon, color: icon.fill } as TextLineWithIconProps]
-      : [{ text } as TextLine]
+    const textLine = icon ? [{ text, iconProps: icon } as TextLineWithIconProps] : [{ text } as TextLine]
     const content = <TextLines listOfText={textLine} />
 
     const backgroundColor = isSelected ? 'pickerSelectedItem' : 'list'

VAMobile/src/components/IconWithText/IconWithText.tsx

@@ -32,7 +32,7 @@ const IconWithText: FC<IconWithTextProps> = ({ label, labelColor, labelA11y, mt,
   const textProps: TextViewProps = {
     variant: 'textWithIconButton',
     mt: mt || 3, // 6px total combined with line height
-    color: labelColor || 'textWithIconButton',
+    color: labelColor || 'link',
     accessibilityLabel: labelA11y,
     allowFontScaling: false,
   }

VAMobile/src/components/LargeNavButton.tsx

@@ -3,13 +3,13 @@ import ContentLoader, { Rect } from 'react-content-loader/native'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
+
 import { Box, TextView, VAIcon } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yHintProp } from 'utils/accessibility'
 import { useTheme } from 'utils/hooks'
 
-import colors from '../styles/themes/VAColors'
-
 const SkeletonLoader = () => {
   const theme = useTheme()
   return (
@@ -62,7 +62,7 @@ const LargeNavButton: FC<HomeNavButtonProps> = ({
     paddingVertical: theme.dimensions.cardPadding,
     paddingHorizontal: theme.dimensions.buttonPadding,
     marginBottom: theme.dimensions.condensedMarginBetween,
-    shadowColor: colors.black,
+    shadowColor: colors.vadsColorBlack,
     ...Platform.select({
       ios: {
         shadowOffset: { width: 0, height: 2 },
@@ -107,7 +107,7 @@ const LargeNavButton: FC<HomeNavButtonProps> = ({
           height={24}
           name="RightArrowInCircle"
           fill={theme.colors.icon.largeNavButton}
-          fill2={theme.colors.icon.transparent}
+          fill2={'transparent'}
           ml={theme.dimensions.listItemDecoratorMarginLeft}
           preventScaling={true}
         />

VAMobile/src/components/LoadingComponent/LoadingComponent.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
 import { ViewStyle } from 'react-native'
 
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import LottieView from 'lottie-react-native'
 
 import { Box, TextView, VAScrollView } from 'components'
-import colors from 'styles/themes/VAColors'
 import { useTheme } from 'utils/hooks'
 
 export type LoadingComponentProps = {
@@ -51,6 +51,8 @@ const LoadingComponent: FC<LoadingComponentProps> = ({
     alignContent: 'center',
   }
 
+  const spinnerIconColor = spinnerColor || colors.vadsColorPrimary
+
   const getSpinner = () => {
     return (
       <LottieView
@@ -62,11 +64,11 @@ const LoadingComponent: FC<LoadingComponentProps> = ({
         colorFilters={[
           {
             keypath: 'Shape Layer 9',
-            color: spinnerColor || colors.primary,
+            color: spinnerIconColor,
           },
           {
             keypath: 'Shape Layer 11',
-            color: spinnerColor || colors.primary,
+            color: spinnerIconColor,
           },
         ]}
       />

VAMobile/src/components/Menu/Menu.tsx

@@ -16,8 +16,6 @@ import {
 
 import theme from 'styles/themes/standardTheme'
 
-import colors from '../../styles/themes/VAColors'
-
 export enum Position {
   TOP_LEFT,
   TOP_RIGHT,
@@ -414,14 +412,14 @@ const styles = StyleSheet.create({
     /* Shadow */
     ...Platform.select({
       ios: {
-        shadowColor: colors.black,
+        shadowColor: 'black',
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.6,
         shadowRadius: 4,
       },
       android: {
         elevation: 20,
-        shadowColor: colors.black,
+        shadowColor: 'black',
       },
     }),
   },

VAMobile/src/components/Nametag/Nametag.tsx

@@ -2,13 +2,14 @@ import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, PressableProps } from 'react-native'
 
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
+
 import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices'
 import { useServiceHistory } from 'api/militaryService'
 import { usePersonalInformation } from 'api/personalInformation/getPersonalInformation'
 import { BackgroundVariant, Box, MilitaryBranchEmblem, TextView, VAIcon } from 'components'
 import { UserAnalytics } from 'constants/analytics'
 import { NAMESPACE } from 'constants/namespaces'
-import colors from 'styles/themes/VAColors'
 import { setAnalyticsUserProperty } from 'utils/analytics'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 
@@ -58,7 +59,7 @@ export const Nametag = () => {
         marginBottom: theme.dimensions.standardMarginBetween,
         paddingRight: theme.dimensions.buttonPadding,
         marginHorizontal: theme.dimensions.condensedMarginBetween,
-        shadowColor: colors.black,
+        shadowColor: colors.vadsColorBlack,
         ...Platform.select({
           ios: {
             shadowOffset: { width: 0, height: 6 },

VAMobile/src/components/NavigationTabBar.tsx

@@ -109,7 +109,7 @@ const NavigationTabBar: FC<NavigationTabBarProps> = ({ state, navigation, transl
             name: 'Home',
             fill: isFocused ? theme.colors.icon.active : theme.colors.icon.inactive,
             label: routeName,
-            labelColor: isFocused ? 'textWithIconButton' : 'textWithIconButtonInactive',
+            labelColor: isFocused ? 'link' : 'textWithIconButtonInactive',
             height: 24,
             width: 24,
           }

VAMobile/src/components/PhotoAdd.tsx

@@ -40,7 +40,7 @@ const PhotoAdd: FC<PhotoAddProps> = ({ width, height, onPress }) => {
 
   const textProps: TextViewProps = {
     variant: 'HelperTextBold',
-    color: 'footerButton',
+    color: 'link',
     textAlign: 'center',
     width: width,
     maxFontSizeMultiplier: 2.5,
@@ -54,7 +54,7 @@ const PhotoAdd: FC<PhotoAddProps> = ({ width, height, onPress }) => {
           width={32}
           height={32}
           fill={themeColor.icon.photoAdd}
-          fill2={themeColor.icon.transparent}
+          fill2={'transparent'}
           maxWidth={70}
         />
       </Box>

VAMobile/src/components/SnackBar.tsx

@@ -12,7 +12,6 @@ import { NAMESPACE } from 'constants/namespaces'
 import { triggerHaptic } from 'utils/haptics'
 import { useAccessibilityFocus, useTheme } from 'utils/hooks'
 
-import colors from '../styles/themes/VAColors'
 import { BoxProps } from './Box'
 import TextView from './TextView'
 import VAIcon, { VAIconProps } from './VAIcon'
@@ -71,7 +70,7 @@ const SnackBar: FC<ToastProps> = (toast) => {
     flexWrap: 'wrap',
     display: 'flex',
     style: {
-      shadowColor: colors.black,
+      shadowColor: 'black',
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.6,
     },
@@ -86,7 +85,7 @@ const SnackBar: FC<ToastProps> = (toast) => {
 
   const messageProp: TextViewProps = {
     variant: 'HelperText',
-    color: 'snackBarTxt',
+    color: 'snackBar',
   }
 
   // adjust style depending on if there are 1 or 2 buttons
@@ -122,7 +121,7 @@ const SnackBar: FC<ToastProps> = (toast) => {
   const snackBarIconProps: VAIconProps = {
     name: isError ? 'ExclamationTriangle' : 'CircleCheckMark',
     fill: themeColor.icon.snackBarIcon,
-    fill2: themeColor.icon.transparent,
+    fill2: 'transparent',
     height: 18,
     width: 18,
   }

VAMobile/src/components/Templates/HeaderBanner.tsx

@@ -8,7 +8,6 @@ import { IconProps } from '@department-of-veterans-affairs/mobile-component-libr
 
 import { Box, BoxProps, DescriptiveBackButton, IconWithText, TextView, TextViewProps } from 'components'
 import MenuView, { MenuViewActionsType } from 'components/Menu'
-import colors from 'styles/themes/VAColors'
 import { useAccessibilityFocus, useIsScreenReaderEnabled, useTheme } from 'utils/hooks'
 
 export type HeaderLeftButtonProps = {
@@ -170,7 +169,7 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
     mb: !dividerMarginBypass && bannerDivider ? theme.dimensions.standardMarginBetween : 0,
     style: bannerShadow
       ? {
-          shadowColor: colors.black,
+          shadowColor: 'black',
           ...Platform.select({
             ios: {
               shadowOffset: { width: 0, height: 6 },
@@ -201,7 +200,7 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
   const constrainTitle = totalTextLength > TEXT_CONSTRAINT_THRESHOLD
   if (leftButton) {
     leftTextViewProps = {
-      color: 'footerButton',
+      color: 'link',
       variant: 'MobileBody',
       accessibilityLabel: leftButton.a11yLabel,
       allowFontScaling: false,
@@ -228,7 +227,7 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
 
   if (rightButton) {
     rightTextViewProps = {
-      color: 'footerButton',
+      color: 'link',
       variant: 'MobileBody',
       accessibilityLabel: rightButton.a11yLabel,
       allowFontScaling: false,