Bump tokens version. Update "Colors" to "colors". Fix import sorts

department-of-veterans-affairs · Jun 26, 2024 · ceb72e5 · ceb72e5
1 parent 723d7b4
commit ceb72e5
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 69 deletions.
diff --git 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
@@ -1,11 +1,11 @@
-import { Colors } from '@department-of-veterans-affairs/mobile-tokens'
 import {
   Pressable,
   PressableStateCallbackType,
   Text,
   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<ButtonProps> = ({
 
   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
@@ -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<IconProps> = ({
   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
@@ -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<LoadingIndicatorProps> = ({
     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<LoadingIndicatorProps> = ({
     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
@@ -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<SegmentedControlProps> = ({
   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
@@ -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
@@ -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