From 7c2ff200f7a369e7c47d58e38a69de335c8a136b Mon Sep 17 00:00:00 2001 From: Tim R Date: Mon, 1 Jul 2024 12:51:02 -0500 Subject: [PATCH] Update Button, Icon, LoadingIndicator, and SegmentedControl to use useTheme hook --- .../components/src/assets/svgs/custom.svg | 6 +- .../src/components/Button/Button.tsx | 89 ++++++------------- .../components/src/components/Icon/Icon.tsx | 15 ++-- .../LoadingIndicator/LoadingIndicator.tsx | 14 +-- .../SegmentedControl/SegmentedControl.tsx | 20 ++--- 5 files changed, 44 insertions(+), 100 deletions(-) diff --git a/packages/components/src/assets/svgs/custom.svg b/packages/components/src/assets/svgs/custom.svg index d141f35c..ce20bd1a 100644 --- a/packages/components/src/assets/svgs/custom.svg +++ b/packages/components/src/assets/svgs/custom.svg @@ -1,4 +1,6 @@ - + + - + \ No newline at end of file diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 3965bb8d..01a14f16 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/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 = ({ 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 = ({ 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 } /** diff --git a/packages/components/src/components/Icon/Icon.tsx b/packages/components/src/components/Icon/Icon.tsx index e8896fd7..ad28b260 100644 --- a/packages/components/src/components/Icon/Icon.tsx +++ b/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,8 +68,8 @@ export const Icon: FC = ({ preventScaling, testID, }) => { + const theme = useTheme() const colorScheme = useColorScheme() - const isDarkMode = colorScheme === 'dark' const fontScale = useWindowDimensions().fontScale const fs = (val: number) => fontScale * val @@ -78,15 +77,11 @@ export const Icon: FC = ({ const _Icon: FC = 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 } diff --git a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx index e1515182..bd140b43 100644 --- a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx +++ b/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 = ({ a11yLabel, children, }) => { - const colorScheme = useColorScheme() - const isDarkMode = colorScheme === 'dark' + const theme = useTheme() const rotation = new Animated.Value(0) useEffect(() => { @@ -67,9 +65,7 @@ export const LoadingIndicator: React.FC = ({ name: 'LoadingIndicator', width: 50, height: 50, - fill: isDarkMode - ? colors.vadsColorActionForegroundDefaultOnDark - : colors.vadsColorActionForegroundDefaultOnLight, + fill: theme.vadsColorActionForegroundDefault, } const textStyle: TextStyle = { @@ -77,9 +73,7 @@ export const LoadingIndicator: React.FC = ({ fontSize: 20, lineHeight: 30, textAlign: 'center', - color: isDarkMode - ? colors.vadsColorForegroundDefaultOnDark - : colors.vadsColorForegroundDefaultOnLight, + color: theme.vadsColorForegroundDefault, } return ( diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index b057214a..4fbcda13 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/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 = ({ 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 = ({ const textStyle: TextStyle = { ...font, - color: textColor, + color: theme.vadsColorForegroundDefault, textAlign: 'center', }