Merge pull request #380 from department-of-veterans-affairs/feature/3…

…71-UpdateAdditionalComponentsToUseTheme

[Feature] Update additional components to useTheme hook

packages/components/src/components/Button/Button.tsx

@@ -5,10 +5,9 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import React from 'react'
 
-import { useColorScheme } from '../../utils'
+import { useTheme } from '../../utils'
 
 export enum ButtonVariants {
   Base = 'Base',
@@ -45,8 +44,7 @@ export const Button: React.FC<ButtonProps> = ({
   testID,
   testOnlyPressed,
 }) => {
-  const colorScheme = useColorScheme()
-  const isDarkMode = colorScheme === 'dark'
+  const theme = useTheme()
 
   let bgColor: string,
     bgColorPressed: string,
@@ -58,81 +56,46 @@ export const Button: React.FC<ButtonProps> = ({
 
   switch (buttonType) {
     case ButtonVariants.Base:
-      bgColor = colors.vadsColorActionSurfaceBaseOnLight
-      bgColorPressed = colors.vadsColorActionSurfaceBaseActiveOnLight
-      textColor = colors.vadsColorForegroundInverseOnLight
-      textColorPressed = colors.vadsColorForegroundInverseOnLight
-
-      if (isDarkMode) {
-        bgColor = colors.vadsColorActionSurfaceBaseOnDark
-        bgColorPressed = colors.vadsColorActionSurfaceBaseActiveOnDark
-        textColor = colors.vadsColorForegroundInverseOnDark
-        textColorPressed = colors.vadsColorForegroundInverseOnDark
-      }
+      bgColor = theme.vadsColorActionSurfaceBase
+      bgColorPressed = theme.vadsColorActionSurfaceBaseActive
+      textColor = theme.vadsColorForegroundInverse
+      textColorPressed = theme.vadsColorForegroundInverse
       break
     case ButtonVariants.BaseSecondary:
       bgColor = 'transparent'
       bgColorPressed = 'transparent'
-      borderColor = colors.vadsColorActionBorderBaseOnLight
-      borderColorPressed = colors.vadsColorActionBorderBaseActiveOnLight
-      textColor = colors.vadsColorActionForegroundBaseOnLight
-      textColorPressed = colors.vadsColorActionForegroundBaseActiveOnLight
+      borderColor = theme.vadsColorActionBorderBase
+      borderColorPressed = theme.vadsColorActionBorderBaseActive
+      textColor = theme.vadsColorActionForegroundBase
+      textColorPressed = theme.vadsColorActionForegroundBaseActive
       borderWidth = 2
-
-      if (isDarkMode) {
-        borderColor = colors.vadsColorActionBorderBaseOnDark
-        borderColorPressed = colors.vadsColorActionBorderBaseActiveOnDark
-        textColor = colors.vadsColorActionForegroundBaseOnDark
-        textColorPressed = colors.vadsColorActionForegroundBaseActiveOnDark
-      }
       break
     case ButtonVariants.Destructive:
-      bgColor = colors.vadsColorActionSurfaceDestructiveOnLight
-      bgColorPressed = colors.vadsColorActionSurfaceDestructiveActiveOnLight
-      textColor = colors.vadsColorForegroundInverseOnLight
-      textColorPressed = colors.vadsColorForegroundInverseOnLight
-
-      if (isDarkMode) {
-        bgColor = colors.vadsColorActionSurfaceDestructiveOnDark
-        bgColorPressed = colors.vadsColorActionSurfaceDestructiveActiveOnDark
-        textColor = colors.vadsColorForegroundInverseOnDark
-        textColorPressed = colors.vadsColorForegroundInverseOnDark
-      }
+      bgColor = theme.vadsColorActionSurfaceDestructive
+      bgColorPressed = theme.vadsColorActionSurfaceDestructiveActive
+      textColor = theme.vadsColorForegroundInverse
+      textColorPressed = theme.vadsColorForegroundInverse
       break
     case ButtonVariants.Secondary:
       bgColor = 'transparent'
       bgColorPressed = 'transparent'
-      borderColor = colors.vadsColorActionBorderDefaultOnLight
-      borderColorPressed = colors.vadsColorActionBorderDefaultActiveOnLight
-      textColor = colors.vadsColorActionForegroundDefaultOnLight
-      textColorPressed = colors.vadsColorActionForegroundDefaultActiveOnLight
+      borderColor = theme.vadsColorActionBorderDefault
+      borderColorPressed = theme.vadsColorActionBorderDefaultActive
+      textColor = theme.vadsColorActionForegroundDefault
+      textColorPressed = theme.vadsColorActionForegroundDefaultActive
       borderWidth = 2
-
-      if (isDarkMode) {
-        borderColor = colors.vadsColorActionBorderDefaultOnDark
-        borderColorPressed = colors.vadsColorActionBorderDefaultActiveOnDark
-        textColor = colors.vadsColorActionForegroundDefaultOnDark
-        textColorPressed = colors.vadsColorActionForegroundDefaultActiveOnDark
-      }
       break
     case ButtonVariants.White:
-      bgColor = colors.vadsColorBaseLightest
-      bgColorPressed = colors.uswdsSystemColorGray30
-      textColor = colors.vadsColorBlack
-      textColorPressed = colors.vadsColorBlack
+      bgColor = theme.vadsColorBaseLightest
+      bgColorPressed = theme.uswdsSystemColorGray30
+      textColor = theme.vadsColorBlack
+      textColorPressed = theme.vadsColorBlack
       break
     default:
-      bgColor = colors.vadsColorActionSurfaceDefaultOnLight
-      bgColorPressed = colors.vadsColorActionSurfaceDefaultActiveOnLight
-      textColor = colors.vadsColorForegroundInverseOnLight
-      textColorPressed = colors.vadsColorForegroundInverseOnLight
-
-      if (isDarkMode) {
-        bgColor = colors.vadsColorActionSurfaceDefaultOnDark
-        bgColorPressed = colors.vadsColorActionSurfaceDefaultActiveOnDark
-        textColor = colors.vadsColorForegroundInverseOnDark
-        textColorPressed = colors.vadsColorForegroundInverseOnDark
-      }
+      bgColor = theme.vadsColorActionSurfaceDefault
+      bgColorPressed = theme.vadsColorActionSurfaceDefaultActive
+      textColor = theme.vadsColorForegroundInverse
+      textColorPressed = theme.vadsColorForegroundInverse
   }
 
   /**

packages/components/src/components/Icon/Icon.tsx

@@ -1,10 +1,9 @@
 import { ColorValue, useWindowDimensions } from 'react-native'
 import { SvgProps } from 'react-native-svg'
-import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import React, { FC } from 'react'
 
 import { IconMap } from './iconList'
-import { useColorScheme } from '../../utils'
+import { useColorScheme, useTheme } from '../../utils'
 
 type nameOrSvg =
   | {
@@ -69,24 +68,20 @@ export const Icon: FC<IconProps> = ({
   preventScaling,
   testID,
 }) => {
+  const theme = useTheme()
   const colorScheme = useColorScheme()
-  const isDarkMode = colorScheme === 'dark'
   const fontScale = useWindowDimensions().fontScale
   const fs = (val: number) => fontScale * val
 
   // ! to override TS incorrectly thinking svg can be undefined after update
   const _Icon: FC<SvgProps> = name ? IconMap[name] : svg!
 
   if (typeof fill === 'object') {
-    fill = isDarkMode ? fill.dark : fill.light
+    fill = colorScheme === 'dark' ? fill.dark : fill.light
   } else if (fill === 'default') {
-    fill = isDarkMode
-      ? colors.vadsColorActionForegroundDefaultOnDark
-      : colors.vadsColorActionForegroundDefaultOnLight
+    fill = theme.vadsColorActionForegroundDefault
   } else if (fill === 'base') {
-    fill = isDarkMode
-      ? colors.vadsColorForegroundDefaultOnDark
-      : colors.vadsColorForegroundDefaultOnLight
+    fill = theme.vadsColorForegroundDefault
   }
 
   let iconProps: SvgProps = { fill }

packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -10,8 +10,7 @@ import React, { useEffect } from 'react'
 
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
-import { colors } from '@department-of-veterans-affairs/mobile-tokens'
-import { useColorScheme } from '../../utils'
+import { useTheme } from '../../utils'
 
 export type LoadingIndicatorProps = {
   /** AccessibilityLabel for the text */
@@ -36,8 +35,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   a11yLabel,
   children,
 }) => {
-  const colorScheme = useColorScheme()
-  const isDarkMode = colorScheme === 'dark'
+  const theme = useTheme()
   const rotation = new Animated.Value(0)
 
   useEffect(() => {
@@ -67,19 +65,15 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     name: 'LoadingIndicator',
     width: 50,
     height: 50,
-    fill: isDarkMode
-      ? colors.vadsColorActionForegroundDefaultOnDark
-      : colors.vadsColorActionForegroundDefaultOnLight,
+    fill: theme.vadsColorActionForegroundDefault,
   }
 
   const textStyle: TextStyle = {
     fontFamily: 'SourceSansPro-Regular',
     fontSize: 20,
     lineHeight: 30,
     textAlign: 'center',
-    color: isDarkMode
-      ? colors.vadsColorForegroundDefaultOnDark
-      : colors.vadsColorForegroundDefaultOnLight,
+    color: theme.vadsColorForegroundDefault,
   }
 
   return (

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

@@ -1,11 +1,10 @@
 import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
 import styled from 'styled-components/native'
 
 import { ComponentWrapper } from '../../wrapper'
-import { PressableOpacityStyle, useColorScheme } from '../../utils'
+import { PressableOpacityStyle, useTheme } from '../../utils'
 
 /**
  * Props for {@link SegmentedControl}
@@ -51,23 +50,14 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   testIDs,
 }) => {
   const { t } = useTranslation()
-  const colorScheme = useColorScheme()
+  const theme = useTheme()
 
   useEffect(() => {
     onChange(selected)
   }, [selected, onChange])
 
-  let textColor: string, activeBgColor: string, inactiveBgColor: string
-
-  if (colorScheme === 'light') {
-    textColor = colors.vadsColorForegroundDefaultOnLight
-    activeBgColor = colors.vadsSegmentedControlColorSurfaceSelectedOnLight
-    inactiveBgColor = colors.vadsColorSurfaceSecondaryOnLight
-  } else {
-    textColor = colors.vadsColorForegroundDefaultOnDark
-    activeBgColor = colors.vadsSegmentedControlColorSurfaceSelectedOnDark
-    inactiveBgColor = colors.vadsColorSurfaceSecondaryOnDark
-  }
+  const activeBgColor = theme.vadsSegmentedControlColorSurfaceSelected
+  const inactiveBgColor = theme.vadsColorSurfaceSecondary
 
   const viewStyle: ViewStyle = {
     alignSelf: 'stretch',
@@ -106,7 +96,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
 
     const textStyle: TextStyle = {
       ...font,
-      color: textColor,
+      color: theme.vadsColorForegroundDefault,
       textAlign: 'center',
     }