From 9284c101270da4716d242cd89ad9a3d4cace86fd Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 24 Jun 2024 12:14:54 -0700 Subject: [PATCH 01/15] Create ThemeContext --- packages/components/package.json | 2 +- packages/components/src/themes/ThemeContext.ts | 4 ++++ yarn.lock | 10 +++++----- 3 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 packages/components/src/themes/ThemeContext.ts diff --git a/packages/components/package.json b/packages/components/package.json index d93afcf4..74f04fd3 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.0", + "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.0", "@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/themes/ThemeContext.ts b/packages/components/src/themes/ThemeContext.ts new file mode 100644 index 00000000..454d4599 --- /dev/null +++ b/packages/components/src/themes/ThemeContext.ts @@ -0,0 +1,4 @@ +import { + DarkTheme, + LightTheme, +} from '@department-of-veterans-affairs/mobile-tokens' diff --git a/yarn.lock b/yarn.lock index 09bf9086..6d13ea54 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.0" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.0" "@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.0": - version: 0.12.0 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.0" - checksum: ec146ef6f9ce0b87b055b12ee66474192df9102a38ceb56944f0d49c959bf4cbe02054847d9916a2b6c69e5438898857545d3efdda85023ea95a6eaf043ed429 +"@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.0": + version: 0.12.1-alpha.0 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.0" + checksum: 8e35f18d1b0db136058037381d7f9de418c6bcdc5b990a36aa81af8fccbbd947b5783f0d040bde3a7bb1096692a458c6dc1cb18113cb3f458ddb36f9ba29870a languageName: node linkType: hard From 290182103afcd5a59646df6ad4f17a30714c182e Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 24 Jun 2024 12:33:20 -0700 Subject: [PATCH 02/15] Bump mobile-tokens version --- packages/components/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 74f04fd3..2b4d5b33 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.0", + "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.1", "@os-team/i18next-react-native-language-detector": "^1.0.31", "i18next": "^23.8.2", "react-i18next": "^14.0.5", diff --git a/yarn.lock b/yarn.lock index 6d13ea54..aa7e1a6e 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.0" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.1" "@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.0": - version: 0.12.1-alpha.0 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.0" - checksum: 8e35f18d1b0db136058037381d7f9de418c6bcdc5b990a36aa81af8fccbbd947b5783f0d040bde3a7bb1096692a458c6dc1cb18113cb3f458ddb36f9ba29870a +"@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.1": + version: 0.12.1-alpha.1 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.1" + checksum: 2791d643d45e4575d1c2ef2c24690b8613611f6a55c53c9e4cd722e964e1798a201d931ccf22a6a3138cdd4166ff5b417d119656b2e67bb8d78b23ee4608edd7 languageName: node linkType: hard From 2e2cdab5af8f765007eb97f9b74a6253e7d5eccd Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 24 Jun 2024 21:52:00 -0700 Subject: [PATCH 03/15] Create useTheme hook. Remove ThemeProvider code --- packages/components/package.json | 2 +- .../components/src/components/Link/Link.tsx | 17 +++++---------- .../components/src/themes/ThemeContext.ts | 4 ---- packages/components/src/utils/index.tsx | 21 ++++++++++++++----- yarn.lock | 10 ++++----- 5 files changed, 27 insertions(+), 27 deletions(-) delete mode 100644 packages/components/src/themes/ThemeContext.ts diff --git a/packages/components/package.json b/packages/components/package.json index 2b4d5b33..399eda71 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.1", + "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.2", "@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/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx index b4574c80..e9d15d3e 100644 --- a/packages/components/src/components/Link/Link.tsx +++ b/packages/components/src/components/Link/Link.tsx @@ -20,7 +20,7 @@ import { } from '../../utils/OSfunctions' import { Icon, IconProps } from '../Icon/Icon' import { t } from 'i18next' -import { useColorScheme } from '../../utils' +import { useColorScheme, useTheme } from '../../utils' // Convenience type to default type-specific props to not existing/being optional type nullTypeSpecifics = { @@ -141,9 +141,8 @@ export const Link: FC = ({ TTYnumber, url, }) => { - const colorScheme = useColorScheme() + const theme = useTheme() const fontScale = useWindowDimensions().fontScale - const isDarkMode = colorScheme === 'dark' const launchExternalLink = useExternalLink() let _icon: IconProps | 'no icon' @@ -225,14 +224,10 @@ export const Link: FC = ({ switch (variant) { case 'base': - linkColor = isDarkMode - ? Colors.vadsColorForegroundDefaultOnDark - : Colors.vadsColorForegroundDefaultOnLight + linkColor = theme.vadsColorForegroundDefault break default: - linkColor = isDarkMode - ? Colors.vadsColorActionForegroundDefaultOnDark - : Colors.vadsColorActionForegroundDefaultOnLight + linkColor = theme.vadsColorActionForegroundDefault } const iconViewStyle: ViewStyle = { @@ -277,9 +272,7 @@ export const Link: FC = ({ flexDirection: 'row', alignItems: 'center', backgroundColor: pressed - ? isDarkMode - ? Colors.vadsColorSurfaceSecondaryOnDark - : Colors.vadsColorSurfaceSecondaryOnLight + ? theme.vadsColorSurfaceSecondary : 'transparent', }), testOnly_pressed: testOnlyPressed, diff --git a/packages/components/src/themes/ThemeContext.ts b/packages/components/src/themes/ThemeContext.ts deleted file mode 100644 index 454d4599..00000000 --- a/packages/components/src/themes/ThemeContext.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { - DarkTheme, - LightTheme, -} from '@department-of-veterans-affairs/mobile-tokens' diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx index cc2e427e..5da98b5d 100644 --- a/packages/components/src/utils/index.tsx +++ b/packages/components/src/utils/index.tsx @@ -6,14 +6,21 @@ import { StyleProp, ViewStyle, } from 'react-native' -import { Colors as TokenColors } from '@department-of-veterans-affairs/mobile-tokens' +import { + DarkTheme, + LightTheme, + Theme, + Colors as TokenColors, +} from '@department-of-veterans-affairs/mobile-tokens' import { useEffect, useState } from 'react' /** Function to prefill base gray colors */ export function BaseColor() { const colorScheme = useColorScheme() - return colorScheme === 'dark' ? TokenColors.vadsColorForegroundDefaultOnDark : TokenColors.vadsColorForegroundDefaultOnLight + return colorScheme === 'dark' + ? TokenColors.vadsColorForegroundDefaultOnDark + : TokenColors.vadsColorForegroundDefaultOnLight } /** Handles return of color scheme based on platform */ @@ -32,6 +39,10 @@ export function useColorScheme(): ColorSchemeName { } } +export function useTheme(): Theme { + return useColorScheme() == 'dark' ? DarkTheme : LightTheme +} + /** * Hook to monitor screen reader status * @returns True when the screen reader is on, else false @@ -42,8 +53,8 @@ export function useIsScreenReaderEnabled(): boolean { useEffect(() => { // Function to update state based on the screen reader status const updateScreenReaderStatus = (isEnabled: boolean) => { - setScreenReaderEnabled(isEnabled); - }; + setScreenReaderEnabled(isEnabled) + } // Initiate with current screen reader status AccessibilityInfo.isScreenReaderEnabled().then(updateScreenReaderStatus) @@ -51,7 +62,7 @@ export function useIsScreenReaderEnabled(): boolean { // Subscribe to screen reader status changes const subscription = AccessibilityInfo.addEventListener( 'screenReaderChanged', - updateScreenReaderStatus + updateScreenReaderStatus, ) // Cleanup subscription on component unmount diff --git a/yarn.lock b/yarn.lock index aa7e1a6e..60d00520 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.1" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.2" "@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.1": - version: 0.12.1-alpha.1 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.1" - checksum: 2791d643d45e4575d1c2ef2c24690b8613611f6a55c53c9e4cd722e964e1798a201d931ccf22a6a3138cdd4166ff5b417d119656b2e67bb8d78b23ee4608edd7 +"@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.2": + version: 0.12.1-alpha.2 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.2" + checksum: e91e3dc6df9b2ae55a48dc31680ce97e385638d9ebad676bd7f12fdbe306ce54ba551d637ca0e9f5412faf0aae18856446f8429c26970ccee6669956efccdd23 languageName: node linkType: hard From f801f1f1ae49c441dda1c0df95a6192d75e736c2 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 10:50:55 -0700 Subject: [PATCH 04/15] Implement theme in Alert --- packages/components/package.json | 2 +- .../components/src/components/Alert/Alert.tsx | 39 +++++-------------- packages/components/src/utils/index.tsx | 18 +++------ yarn.lock | 10 ++--- 4 files changed, 22 insertions(+), 47 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 399eda71..46cc385c 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.2", + "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.3", "@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/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx index 6e3b6836..ffb1d939 100644 --- a/packages/components/src/components/Alert/Alert.tsx +++ b/packages/components/src/components/Alert/Alert.tsx @@ -10,7 +10,7 @@ import { } from 'react-native' import React, { FC, useState } from 'react' -import { BaseColor, useColorScheme } from '../../utils' +import { BaseColor, useColorScheme, useTheme } from '../../utils' import { Button, ButtonProps, ButtonVariants } from '../Button/Button' import { Icon, IconProps } from '../Icon/Icon' import { Spacer } from '../Spacer/Spacer' @@ -76,6 +76,7 @@ export const Alert: FC = ({ testID, }) => { const colorScheme = useColorScheme() + const theme = useTheme() const fontScale = useWindowDimensions().fontScale const isDarkMode = colorScheme === 'dark' const [expanded, setExpanded] = useState( @@ -103,44 +104,24 @@ export const Alert: FC = ({ switch (variant) { case 'info': - backgroundColor = Colors.vadsColorFeedbackSurfaceInfoOnLight - borderColor = Colors.vadsColorFeedbackBorderInfoOnLight + backgroundColor = theme.vadsColorFeedbackSurfaceInfo + borderColor = theme.vadsColorFeedbackBorderInfo iconName = 'Info' - - if (isDarkMode) { - backgroundColor = Colors.vadsColorFeedbackSurfaceInfoOnDark - borderColor = Colors.vadsColorFeedbackBorderInfoOnDark - } break case 'success': - backgroundColor = Colors.vadsColorFeedbackSurfaceSuccessOnLight - borderColor = Colors.vadsColorFeedbackBorderSuccessOnLight + backgroundColor = theme.vadsColorFeedbackSurfaceSuccess + borderColor = theme.vadsColorFeedbackBorderSuccess iconName = 'CheckCircle' - - if (isDarkMode) { - backgroundColor = Colors.vadsColorFeedbackSurfaceSuccessOnDark - borderColor = Colors.vadsColorFeedbackBorderSuccessOnDark - } break case 'warning': - backgroundColor = Colors.vadsColorFeedbackSurfaceWarningOnLight - borderColor = Colors.vadsColorFeedbackBorderWarningOnLight + backgroundColor = theme.vadsColorFeedbackSurfaceWarning + borderColor = theme.vadsColorFeedbackBorderWarning iconName = 'Warning' - - if (isDarkMode) { - backgroundColor = Colors.vadsColorFeedbackSurfaceWarningOnDark - borderColor = Colors.vadsColorFeedbackBorderWarningOnDark - } break case 'error': - backgroundColor = Colors.vadsColorFeedbackSurfaceErrorOnLight - borderColor = Colors.vadsColorFeedbackBorderErrorOnLight + backgroundColor = theme.vadsColorFeedbackSurfaceError + borderColor = theme.vadsColorFeedbackBorderError iconName = 'Error' - - if (isDarkMode) { - backgroundColor = Colors.vadsColorFeedbackSurfaceErrorOnDark - borderColor = Colors.vadsColorFeedbackBorderErrorOnDark - } break } diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx index 5da98b5d..e2e6f2d3 100644 --- a/packages/components/src/utils/index.tsx +++ b/packages/components/src/utils/index.tsx @@ -6,21 +6,13 @@ import { StyleProp, ViewStyle, } from 'react-native' -import { - DarkTheme, - LightTheme, - Theme, - Colors as TokenColors, -} from '@department-of-veterans-affairs/mobile-tokens' +import { themes, Theme } from '@department-of-veterans-affairs/mobile-tokens' import { useEffect, useState } from 'react' /** Function to prefill base gray colors */ export function BaseColor() { - const colorScheme = useColorScheme() - - return colorScheme === 'dark' - ? TokenColors.vadsColorForegroundDefaultOnDark - : TokenColors.vadsColorForegroundDefaultOnLight + const theme = useTheme() + return theme.vadsColorForegroundDefault } /** Handles return of color scheme based on platform */ @@ -39,8 +31,10 @@ export function useColorScheme(): ColorSchemeName { } } +/** Returns light/dark theme based on useColorScheme */ export function useTheme(): Theme { - return useColorScheme() == 'dark' ? DarkTheme : LightTheme + const themeName: ColorSchemeName = useColorScheme() || 'light' + return themes[themeName] } /** diff --git a/yarn.lock b/yarn.lock index 60d00520..9b038c65 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.2" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.3" "@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.2": - version: 0.12.1-alpha.2 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.2" - checksum: e91e3dc6df9b2ae55a48dc31680ce97e385638d9ebad676bd7f12fdbe306ce54ba551d637ca0e9f5412faf0aae18856446f8429c26970ccee6669956efccdd23 +"@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.3": + version: 0.12.1-alpha.3 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.3" + checksum: 574a92f58b25ae03f26f2fed588a63e93be772ffbc5eb0da06eda1692a9f1cddc6d0789294fa764c2de790a1dc0d7facb9aa9c90a7c6b79842c915f869aad877 languageName: node linkType: hard From 0485b7a2bd2bc7c600573167de587caf6b0906a6 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 13:14:37 -0700 Subject: [PATCH 05/15] Bump alpha version --- packages/components/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 0ef10f43..769ed7ea 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.3", + "@department-of-veterans-affairs/mobile-tokens": "0.12.1-alpha.4", "@os-team/i18next-react-native-language-detector": "^1.0.31", "i18next": "^23.8.2", "react-i18next": "^14.0.5", diff --git a/yarn.lock b/yarn.lock index 4a716317..69f2f442 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.3" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.12.1-alpha.4" "@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.3": - version: 0.12.1-alpha.3 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.3" - checksum: 574a92f58b25ae03f26f2fed588a63e93be772ffbc5eb0da06eda1692a9f1cddc6d0789294fa764c2de790a1dc0d7facb9aa9c90a7c6b79842c915f869aad877 +"@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 languageName: node linkType: hard From 723d7b482a0c9c51c7954d8de04d873dae8cab8c Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 13:18:13 -0700 Subject: [PATCH 06/15] Remove unused imports --- packages/components/src/components/Alert/Alert.tsx | 1 - packages/components/src/components/Link/Link.tsx | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx index ffb1d939..e47b1e55 100644 --- a/packages/components/src/components/Alert/Alert.tsx +++ b/packages/components/src/components/Alert/Alert.tsx @@ -1,4 +1,3 @@ -import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { Insets, Pressable, diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx index e9d15d3e..77f8f599 100644 --- a/packages/components/src/components/Link/Link.tsx +++ b/packages/components/src/components/Link/Link.tsx @@ -1,4 +1,3 @@ -import { Colors } from '@department-of-veterans-affairs/mobile-tokens' import { Pressable, PressableProps, @@ -20,7 +19,7 @@ import { } from '../../utils/OSfunctions' import { Icon, IconProps } from '../Icon/Icon' import { t } from 'i18next' -import { useColorScheme, useTheme } from '../../utils' +import { useTheme } from '../../utils' // Convenience type to default type-specific props to not existing/being optional type nullTypeSpecifics = { From ceb72e5989e4ae4f4ea21196fe6e609519e70df5 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 26 Jun 2024 12:12:20 -0700 Subject: [PATCH 07/15] Bump tokens version. Update "Colors" to "colors". Fix import sorts --- packages/components/package.json | 2 +- .../src/components/Button/Button.tsx | 90 +++++++++---------- .../components/src/components/Icon/Icon.tsx | 10 ++- .../LoadingIndicator/LoadingIndicator.tsx | 10 +-- .../SegmentedControl/SegmentedControl.tsx | 14 +-- packages/tokens/README.md | 6 +- yarn.lock | 10 +-- 7 files changed, 73 insertions(+), 69 deletions(-) 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 From e1183f2967afc3643d40d3bce81838d009e1c299 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 26 Jun 2024 12:20:55 -0700 Subject: [PATCH 08/15] Update to tokens v0.13.0 --- packages/components/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 3e422b9e..13d58604 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.6", + "@department-of-veterans-affairs/mobile-tokens": "0.13.0", "@os-team/i18next-react-native-language-detector": "^1.0.31", "i18next": "^23.8.2", "react-i18next": "^14.0.5", diff --git a/yarn.lock b/yarn.lock index 2d739ea1..64cbfd94 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.6" + "@department-of-veterans-affairs/mobile-tokens": "npm:0.13.0" "@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.6": - version: 0.12.1-alpha.6 - resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.12.1-alpha.6" - checksum: 188adfe006165d4bdb197447b6370b475c52e5bf2fc98cd3b6ba016eb182106f3b9b25568c14cc2e848e56b5db7010106c4e18b303248c9fb5766dd8fd01e10c +"@department-of-veterans-affairs/mobile-tokens@npm:0.13.0": + version: 0.13.0 + resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.13.0" + checksum: a2866cbbec0b851e0bf45400683917dc59483d36a5a53cfe117c7ec785f3818d430a48af5a7d3f6cc99c0bae50784b9b1668560716f3ccaf9818038470d9e158 languageName: node linkType: hard From b5c543247bc45b5787d43ace04a370e63aac6782 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 26 Jun 2024 12:23:49 -0700 Subject: [PATCH 09/15] Fix import linting error --- packages/components/src/utils/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx index e2e6f2d3..53e9f7bd 100644 --- a/packages/components/src/utils/index.tsx +++ b/packages/components/src/utils/index.tsx @@ -6,7 +6,7 @@ import { StyleProp, ViewStyle, } from 'react-native' -import { themes, Theme } from '@department-of-veterans-affairs/mobile-tokens' +import { Theme, themes } from '@department-of-veterans-affairs/mobile-tokens' import { useEffect, useState } from 'react' /** Function to prefill base gray colors */ From 71c34d3def855cc53d1d554ed1175d9724f0f321 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 28 Jun 2024 11:20:46 -0700 Subject: [PATCH 10/15] Remove duplicate logic for button types --- packages/components/src/components/Alert/Alert.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx index e47b1e55..0ef1e651 100644 --- a/packages/components/src/components/Alert/Alert.tsx +++ b/packages/components/src/components/Alert/Alert.tsx @@ -124,15 +124,6 @@ export const Alert: FC = ({ break } - if (primaryButton && isDarkMode) { - primaryButton.buttonType = ButtonVariants.Base - } - if (secondaryButton) { - secondaryButton.buttonType = isDarkMode - ? ButtonVariants.BaseSecondary - : ButtonVariants.Secondary - } - const contentBox: ViewStyle = { backgroundColor: backgroundColor, borderLeftColor: borderColor, From 5f4e6cf25685e9e413da2cdf469be25ff1246a66 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 28 Jun 2024 11:20:56 -0700 Subject: [PATCH 11/15] Clean up and add tokens section for README --- packages/tokens/README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/tokens/README.md b/packages/tokens/README.md index d2ed6544..a00b76fe 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -5,12 +5,26 @@ The Tokens package contains the design tokens for the VA Mobile Design Library. ## For consumers Direct consumption of the tokens package is optional, but recommended. The tokens package contains the same building blocks used to build the design system components which will more easily allow screen content and app-level custom components to follow design system conventions, helping maintain consistency in experience for users. It is also recommended to match the tokens package version to the version of tokens used by the components package you are leveraging, to ensure consistency. +### Token Usage + 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` +### Themes + +The tokens package also has light and dark themes available. These themes are a subset of the `colors` tokens above, containing primitive colors, semantic tokens without an `OnLight` or `OnDark` mode specified, and the colors for only the light or dark themes respectively. The `OnLight` and `OnDark` mode suffixes are also removed. + +The purpose of themes is to allow for assignment of color tokens without the need to specify the light or dark mode, and let your theme provider or handler return the correct theme. For example: instead of having a conditional where you'd assign either the `colors.vadsColorForegroundDefaultOnLight` or `colors.vadsColorForegroundDefaultOnDark` token, you could instead use `theme.vadsColorForegroundDefault` if your app already knows which color scheme it wants to use. + +To use the themes: +1. Add `@department-of-veterans-affairs/mobile-tokens` to your project via your package manager (e.g. yarn) +2. Add `import { themes } from '@department-of-veterans-affairs/mobile-tokens` to files you wish to use them in. +3. Reference the theme in your code using either `themes.light` or `themes.dark` + +We will potentially be making hook available in the future that will auto-detect the theme based on the device's dark mode setting and return the appropriate theme. + ## For contributors Depending on what is being contributed, the recommendation for how to proceed differs. From b0005ebc8f4ffd391e91e319885d2fcae3a3e960 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 28 Jun 2024 11:34:58 -0700 Subject: [PATCH 12/15] Export useTheme --- packages/components/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 87c8b779..bc8e7fe4 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -14,3 +14,4 @@ export { Link } from './components/Link/Link' export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator' export { SegmentedControl } from './components/SegmentedControl/SegmentedControl' export { Spacer } from './components/Spacer/Spacer' +export { useTheme } from './utils' From 7d022209add0f67fd49f37d209d78b8df7a66efc Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Fri, 28 Jun 2024 18:36:18 +0000 Subject: [PATCH 13/15] Version bump: components-v0.19.1-alpha.1 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 886555e3..e2462cb7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.19.0", + "version": "0.19.1-alpha.1", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From e9a85e0eec80d22cb26f5deef3cd6c2e0d48657c Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 1 Jul 2024 09:21:10 -0700 Subject: [PATCH 14/15] Remove useTheme export --- packages/components/src/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index bc8e7fe4..87c8b779 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -14,4 +14,3 @@ export { Link } from './components/Link/Link' export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator' export { SegmentedControl } from './components/SegmentedControl/SegmentedControl' export { Spacer } from './components/Spacer/Spacer' -export { useTheme } from './utils' From 4f9a1b2cce3a25b0a219dca86bd6680acd82d05f Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 1 Jul 2024 09:41:46 -0700 Subject: [PATCH 15/15] Update packages/tokens/README.md Co-authored-by: Tim R --- packages/tokens/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/README.md b/packages/tokens/README.md index a00b76fe..bb864e7f 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -10,7 +10,7 @@ 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. -3. Reference colors in your code: e.g. `buttonColor = colors.grayMedium` +3. Reference colors in your code: e.g. `buttonColor = colors.vadsColorGrayMedium` ### Themes