diff --git a/packages/components/package.json b/packages/components/package.json index 769ed7ea..3e422b9e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -40,7 +40,7 @@ "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library", "dependencies": { "@department-of-veterans-affairs/mobile-assets": "0.11.0", - "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.4", + "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.6", "@os-team/i18next-react-native-language-detector": "^1.0.31", "i18next": "^23.8.2", "react-i18next": "^14.0.5", diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 0609d94d..3965bb8d 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -1,4 +1,3 @@ -import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { Pressable, PressableStateCallbackType, @@ -6,6 +5,7 @@ import { TextStyle, ViewStyle, } from 'react-native' +import { colors } from '@department-of-veterans-affairs/mobile-tokens' import React from 'react' import { useColorScheme } from '../../utils' @@ -58,80 +58,80 @@ export const Button: React.FC = ({ switch (buttonType) { case ButtonVariants.Base: - bgColor = Colors.vadsColorActionSurfaceBaseOnLight - bgColorPressed = Colors.vadsColorActionSurfaceBaseActiveOnLight - textColor = Colors.vadsColorForegroundInverseOnLight - textColorPressed = Colors.vadsColorForegroundInverseOnLight + 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 = colors.vadsColorActionSurfaceBaseOnDark + bgColorPressed = colors.vadsColorActionSurfaceBaseActiveOnDark + textColor = colors.vadsColorForegroundInverseOnDark + textColorPressed = colors.vadsColorForegroundInverseOnDark } break case ButtonVariants.BaseSecondary: bgColor = 'transparent' bgColorPressed = 'transparent' - borderColor = Colors.vadsColorActionBorderBaseOnLight - borderColorPressed = Colors.vadsColorActionBorderBaseActiveOnLight - textColor = Colors.vadsColorActionForegroundBaseOnLight - textColorPressed = Colors.vadsColorActionForegroundBaseActiveOnLight + borderColor = colors.vadsColorActionBorderBaseOnLight + borderColorPressed = colors.vadsColorActionBorderBaseActiveOnLight + textColor = colors.vadsColorActionForegroundBaseOnLight + textColorPressed = colors.vadsColorActionForegroundBaseActiveOnLight borderWidth = 2 if (isDarkMode) { - borderColor = Colors.vadsColorActionBorderBaseOnDark - borderColorPressed = Colors.vadsColorActionBorderBaseActiveOnDark - textColor = Colors.vadsColorActionForegroundBaseOnDark - textColorPressed = Colors.vadsColorActionForegroundBaseActiveOnDark + 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 + 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 = colors.vadsColorActionSurfaceDestructiveOnDark + bgColorPressed = colors.vadsColorActionSurfaceDestructiveActiveOnDark + textColor = colors.vadsColorForegroundInverseOnDark + textColorPressed = colors.vadsColorForegroundInverseOnDark } break case ButtonVariants.Secondary: bgColor = 'transparent' bgColorPressed = 'transparent' - borderColor = Colors.vadsColorActionBorderDefaultOnLight - borderColorPressed = Colors.vadsColorActionBorderDefaultActiveOnLight - textColor = Colors.vadsColorActionForegroundDefaultOnLight - textColorPressed = Colors.vadsColorActionForegroundDefaultActiveOnLight + borderColor = colors.vadsColorActionBorderDefaultOnLight + borderColorPressed = colors.vadsColorActionBorderDefaultActiveOnLight + textColor = colors.vadsColorActionForegroundDefaultOnLight + textColorPressed = colors.vadsColorActionForegroundDefaultActiveOnLight borderWidth = 2 if (isDarkMode) { - borderColor = Colors.vadsColorActionBorderDefaultOnDark - borderColorPressed = Colors.vadsColorActionBorderDefaultActiveOnDark - textColor = Colors.vadsColorActionForegroundDefaultOnDark - textColorPressed = Colors.vadsColorActionForegroundDefaultActiveOnDark + 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 = colors.vadsColorBaseLightest + bgColorPressed = colors.uswdsSystemColorGray30 + textColor = colors.vadsColorBlack + textColorPressed = colors.vadsColorBlack break default: - bgColor = Colors.vadsColorActionSurfaceDefaultOnLight - bgColorPressed = Colors.vadsColorActionSurfaceDefaultActiveOnLight - textColor = Colors.vadsColorForegroundInverseOnLight - textColorPressed = Colors.vadsColorForegroundInverseOnLight + 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 = colors.vadsColorActionSurfaceDefaultOnDark + bgColorPressed = colors.vadsColorActionSurfaceDefaultActiveOnDark + textColor = colors.vadsColorForegroundInverseOnDark + textColorPressed = colors.vadsColorForegroundInverseOnDark } } diff --git a/packages/components/src/components/Icon/Icon.tsx b/packages/components/src/components/Icon/Icon.tsx index a24b4082..e8896fd7 100644 --- a/packages/components/src/components/Icon/Icon.tsx +++ b/packages/components/src/components/Icon/Icon.tsx @@ -1,6 +1,6 @@ import { ColorValue, useWindowDimensions } from 'react-native' -import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { SvgProps } from 'react-native-svg' +import { colors } from '@department-of-veterans-affairs/mobile-tokens' import React, { FC } from 'react' import { IconMap } from './iconList' @@ -80,9 +80,13 @@ export const Icon: FC = ({ if (typeof fill === 'object') { fill = isDarkMode ? fill.dark : fill.light } else if (fill === 'default') { - fill = isDarkMode ? Colors.vadsColorActionForegroundDefaultOnDark : Colors.vadsColorActionForegroundDefaultOnLight + fill = isDarkMode + ? colors.vadsColorActionForegroundDefaultOnDark + : colors.vadsColorActionForegroundDefaultOnLight } else if (fill === 'base') { - fill = isDarkMode ? Colors.vadsColorForegroundDefaultOnDark : Colors.vadsColorForegroundDefaultOnLight + fill = isDarkMode + ? colors.vadsColorForegroundDefaultOnDark + : colors.vadsColorForegroundDefaultOnLight } let iconProps: SvgProps = { fill } diff --git a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx index 6c013d9c..e1515182 100644 --- a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx +++ b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx @@ -8,9 +8,9 @@ import { } from 'react-native' import React, { useEffect } from 'react' -import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { Icon, IconProps } from '../Icon/Icon' import { Spacer } from '../Spacer/Spacer' +import { colors } from '@department-of-veterans-affairs/mobile-tokens' import { useColorScheme } from '../../utils' export type LoadingIndicatorProps = { @@ -68,8 +68,8 @@ export const LoadingIndicator: React.FC = ({ width: 50, height: 50, fill: isDarkMode - ? Colors.vadsColorActionForegroundDefaultOnDark - : Colors.vadsColorActionForegroundDefaultOnLight, + ? colors.vadsColorActionForegroundDefaultOnDark + : colors.vadsColorActionForegroundDefaultOnLight, } const textStyle: TextStyle = { @@ -78,8 +78,8 @@ export const LoadingIndicator: React.FC = ({ lineHeight: 30, textAlign: 'center', color: isDarkMode - ? Colors.vadsColorForegroundDefaultOnDark - : Colors.vadsColorForegroundDefaultOnLight, + ? colors.vadsColorForegroundDefaultOnDark + : colors.vadsColorForegroundDefaultOnLight, } return ( diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index 166c5ba7..b057214a 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx @@ -1,5 +1,5 @@ -import { Colors } from '@department-of-veterans-affairs/mobile-tokens' 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' @@ -60,13 +60,13 @@ export const SegmentedControl: FC = ({ let textColor: string, activeBgColor: string, inactiveBgColor: string if (colorScheme === 'light') { - textColor = Colors.vadsColorForegroundDefaultOnLight - activeBgColor = Colors.vadsSegmentedControlColorSurfaceSelectedOnLight - inactiveBgColor = Colors.vadsColorSurfaceSecondaryOnLight + textColor = colors.vadsColorForegroundDefaultOnLight + activeBgColor = colors.vadsSegmentedControlColorSurfaceSelectedOnLight + inactiveBgColor = colors.vadsColorSurfaceSecondaryOnLight } else { - textColor = Colors.vadsColorForegroundDefaultOnDark - activeBgColor = Colors.vadsSegmentedControlColorSurfaceSelectedOnDark - inactiveBgColor = Colors.vadsColorSurfaceSecondaryOnDark + textColor = colors.vadsColorForegroundDefaultOnDark + activeBgColor = colors.vadsSegmentedControlColorSurfaceSelectedOnDark + inactiveBgColor = colors.vadsColorSurfaceSecondaryOnDark } const viewStyle: ViewStyle = { diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 091733bd..d2ed6544 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -7,9 +7,9 @@ Direct consumption of the tokens package is optional, but recommended. The token To use the tokens, simply: 1. Add `@department-of-veterans-affairs/mobile-tokens` to your project via your package manager (e.g. yarn) -2. Add `import { Colors } from '@department-of-veterans-affairs/mobile-tokens` to files you wish to use them in. - - Note: `Colors` are the only tokens available for now. -3. Reference colors in your code: e.g. `buttonColor = Colors.grayMedium` +2. Add `import { colors } from '@department-of-veterans-affairs/mobile-tokens` to files you wish to use them in. + - Note: `colors` are the only tokens available for now. +3. Reference colors in your code: e.g. `buttonColor = colors.grayMedium` ## For contributors Depending on what is being contributed, the recommendation for how to proceed differs. diff --git a/yarn.lock b/yarn.lock index 69f2f442..2d739ea1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2141,7 +2141,7 @@ __metadata: "@babel/preset-env": "npm:^7.23.9" "@babel/preset-typescript": "npm:^7.23.3" "@department-of-veterans-affairs/mobile-assets": "npm:0.11.0" - "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.4" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.6" "@expo/metro-runtime": "npm:~3.2.1" "@expo/webpack-config": "npm:~19.0.1" "@os-team/i18next-react-native-language-detector": "npm:^1.0.31" @@ -2209,10 +2209,10 @@ __metadata: languageName: unknown linkType: soft -"@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.4": - version: 0.12.1-alpha.4 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.4" - checksum: 5a8faa8076a98b0a6e38cd495b63f02aee004305e6eced608ab82e210b7a0a32a70ddad0854f3cf8540eb131692cef747075afe2299163a13c4bc7a2dddad57f +"@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.6": + version: 0.12.1-alpha.6 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.6" + checksum: 188adfe006165d4bdb197447b6370b475c52e5bf2fc98cd3b6ba016eb182106f3b9b25568c14cc2e848e56b5db7010106c4e18b303248c9fb5766dd8fd01e10c languageName: node linkType: hard