From ffb16a97a0fc268c274afd2d670f3de446f48cc6 Mon Sep 17 00:00:00 2001 From: lyzhan7 <78454019+lyzhan7@users.noreply.github.com> Date: Wed, 9 Aug 2023 13:41:45 -0700 Subject: [PATCH 1/4] Show theme.colors tokens in the ColorTokensTest --- .../TestComponents/ColorTokens/ColorTokenTest.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx index bd33d9056b..87b5c97f86 100644 --- a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx @@ -3,14 +3,11 @@ import type { ViewStyle, ColorValue } from 'react-native'; import { View, StyleSheet, Platform } from 'react-native'; import { Text, ToggleButton } from '@fluentui/react-native'; -import { createAliasTokens } from '@fluentui-react-native/default-theme'; import type { SvgIconProps } from '@fluentui-react-native/icon'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; -import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; -import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme'; import type { SvgProps } from 'react-native-svg'; import Svg, { G, Path } from 'react-native-svg'; @@ -93,16 +90,7 @@ const getSwatch = (item) => { const AliasColorTokensSwatchList: React.FunctionComponent = () => { const theme = useTheme(); - const isOfficeTheme = - theme.name === 'White' || - theme.name === 'Colorful' || - theme.name === 'DarkGray' || - theme.name === 'Black' || - theme.name === 'HighContrast'; - - const aliasColorTokens = isOfficeTheme - ? createOfficeAliasTokens(theme.name) - : createAliasTokens(getCurrentAppearance(theme.host.appearance, 'light')); + const aliasColorTokens = theme.colors; const aggregator = React.useCallback( (colorName: string) => { From 8cd7d927d893d4280a13339e4e47512feff78b71 Mon Sep 17 00:00:00 2001 From: lyzhan7 <78454019+lyzhan7@users.noreply.github.com> Date: Wed, 9 Aug 2023 15:10:36 -0700 Subject: [PATCH 2/4] Fix switching light/dark mode issue --- .../src/TestComponents/ColorTokens/ColorTokenTest.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx index 87b5c97f86..4543d0b2a2 100644 --- a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx @@ -53,11 +53,6 @@ const styles = StyleSheet.create({ colorDescriptionNamePadding: { paddingRight: 5 }, }); -const getSwatchColorStyle = (colorName: string, colorValue: ColorValue): ViewStyle => { - styles[colorName] = styles[colorName] || { backgroundColor: colorValue }; - return styles[colorName]; -}; - type ColorTokenProps = { colorValue: ColorValue; colorName: string }; const ColorToken: React.FunctionComponent = (p: ColorTokenProps) => { if (p.colorValue === undefined) { @@ -68,7 +63,7 @@ const ColorToken: React.FunctionComponent = (p: ColorTokenProps return ( @@ -89,7 +84,6 @@ const getSwatch = (item) => { const AliasColorTokensSwatchList: React.FunctionComponent = () => { const theme = useTheme(); - const aliasColorTokens = theme.colors; const aggregator = React.useCallback( From 4c9fc043bae82cd113f9313360015d181fd32c84 Mon Sep 17 00:00:00 2001 From: lyzhan7 <78454019+lyzhan7@users.noreply.github.com> Date: Thu, 10 Aug 2023 11:15:45 -0700 Subject: [PATCH 3/4] Remove unused import --- .../src/TestComponents/ColorTokens/ColorTokenTest.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx index 4543d0b2a2..9714502e73 100644 --- a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ViewStyle, ColorValue } from 'react-native'; +import type { ColorValue } from 'react-native'; import { View, StyleSheet, Platform } from 'react-native'; import { Text, ToggleButton } from '@fluentui/react-native'; From a74ec7e9600fad30aeb70027c94971df85f716ec Mon Sep 17 00:00:00 2001 From: lyzhan7 <78454019+lyzhan7@users.noreply.github.com> Date: Thu, 10 Aug 2023 11:16:20 -0700 Subject: [PATCH 4/4] Change files --- ...native-tester-65ff602e-287a-4447-a531-dd27e008f12a.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-tester-65ff602e-287a-4447-a531-dd27e008f12a.json diff --git a/change/@fluentui-react-native-tester-65ff602e-287a-4447-a531-dd27e008f12a.json b/change/@fluentui-react-native-tester-65ff602e-287a-4447-a531-dd27e008f12a.json new file mode 100644 index 0000000000..fc6ede7535 --- /dev/null +++ b/change/@fluentui-react-native-tester-65ff602e-287a-4447-a531-dd27e008f12a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Color tokens test updates", + "packageName": "@fluentui-react-native/tester", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +}