Fix win32 high contrast appearance of TabList (#3298)

* Fix win32 tablist high contrast appearance * Change files * Add missing dependency * Fix yarn.lock * Fork Tab color tokens only
microsoft · Dec 14, 2023 · d596477 · d596477
1 parent db07bc9
commit d596477
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 123 deletions.
diff --git a/change/@fluentui-react-native-tablist-0db269b9-89dd-43a1-8e69-60dda8782c85.json b/change/@fluentui-react-native-tablist-0db269b9-89dd-43a1-8e69-60dda8782c85.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix win32 high contrast theming for TabList",
+  "packageName": "@fluentui-react-native/tablist",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/experimental/TabList/package.json b/packages/experimental/TabList/package.json
@@ -32,6 +32,7 @@
     "@fluentui-react-native/icon": "0.20.1",
     "@fluentui-react-native/interactive-hooks": ">=0.25.0 <1.0.0",
     "@fluentui-react-native/text": ">=0.22.0 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.25.0 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.22.0 <1.0.0",
     "@fluentui-react-native/use-styling": ">=0.12.0 <1.0.0",
     "tslib": "^2.3.1"

diff --git a/packages/experimental/TabList/src/Tab/Tab.styling.ts b/packages/experimental/TabList/src/Tab/Tab.styling.ts
@@ -108,7 +108,7 @@ export const useTabSlotProps = (props: TabProps, tokens: TabTokens, theme: Theme
         style: {
           flex: 1,
           borderRadius: tokens.indicatorRadius,
-          backgroundColor: hideStaticIndicator ? theme.colors.transparentStroke : tokens.indicatorColor,
+          backgroundColor: hideStaticIndicator ? theme.colors.transparentBackground : tokens.indicatorColor,
         },
       };
     },

diff --git a/packages/experimental/TabList/src/Tab/TabColorTokens.ts b/packages/experimental/TabList/src/Tab/TabColorTokens.ts
@@ -0,0 +1,86 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { TabTokens } from '..';
+
+export const tabStates: (keyof TabTokens)[] = [
+  'small',
+  'medium',
+  'large',
+  'vertical',
+  'hovered',
+  'disabled',
+  'selected',
+  'focused',
+  'pressed',
+  'transparent',
+  'subtle',
+  'hasIcon',
+];
+
+export const defaultTabColorTokens: TokenSettings<TabTokens, Theme> = (t: Theme) =>
+  ({
+    borderColor: t.colors.transparentBackground,
+    color: t.colors.neutralForeground2,
+    iconColor: t.colors.neutralForeground2,
+    indicatorColor: t.colors.transparentBackground,
+    transparent: {
+      backgroundColor: t.colors.transparentBackground,
+    },
+    subtle: {
+      backgroundColor: t.colors.subtleBackground,
+    },
+    selected: {
+      color: t.colors.neutralForeground1,
+      iconColor: t.colors.compoundBrandForeground1,
+      indicatorColor: t.colors.compoundBrandStroke1,
+      pressed: {
+        color: t.colors.neutralForeground1Pressed,
+        iconColor: t.colors.compoundBrandForeground1Pressed,
+        indicatorColor: t.colors.compoundBrandStroke1Pressed,
+      },
+    },
+    disabled: {
+      color: t.colors.neutralForegroundDisabled,
+      iconColor: t.colors.neutralForegroundDisabled,
+      selected: {
+        color: t.colors.neutralForegroundDisabled,
+        iconColor: t.colors.neutralForegroundDisabled,
+        indicatorColor: t.colors.neutralForegroundDisabled,
+      },
+    },
+    hovered: {
+      color: t.colors.neutralForeground2Hover,
+      iconColor: t.colors.neutralForeground2Hover,
+      indicatorColor: t.colors.neutralStroke1Hover,
+      selected: {
+        color: t.colors.neutralForeground1Hover,
+        iconColor: t.colors.compoundBrandForeground1Hover,
+        indicatorColor: t.colors.compoundBrandStroke1Hover,
+      },
+      disabled: {
+        indicatorColor: t.colors.transparentBackground,
+      },
+      transparent: {
+        backgroundColor: t.colors.transparentBackgroundHover,
+      },
+      subtle: {
+        backgroundColor: t.colors.subtleBackgroundHover,
+        indicatorColor: t.colors.neutralStroke1Hover,
+      },
+    },
+    pressed: {
+      color: t.colors.neutralForeground2Pressed,
+      iconColor: t.colors.neutralForeground2Pressed,
+      indicatorColor: t.colors.neutralStroke1Pressed,
+      transparent: {
+        backgroundColor: t.colors.transparentBackgroundPressed,
+      },
+      subtle: {
+        backgroundColor: t.colors.subtleBackgroundPressed,
+      },
+    },
+    focused: {
+      borderColor: t.colors.neutralForeground1,
+    },
+  } as TabTokens);
diff --git a/packages/experimental/TabList/src/Tab/TabColorTokens.win32.ts b/packages/experimental/TabList/src/Tab/TabColorTokens.win32.ts
@@ -0,0 +1,87 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { isHighContrast } from '@fluentui-react-native/theming-utils';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { TabTokens } from '..';
+
+export const tabStates: (keyof TabTokens)[] = [
+  'small',
+  'medium',
+  'large',
+  'vertical',
+  'hovered',
+  'disabled',
+  'selected',
+  'focused',
+  'pressed',
+  'transparent',
+  'subtle',
+  'hasIcon',
+];
+
+export const defaultTabColorTokens: TokenSettings<TabTokens, Theme> = (t: Theme) =>
+  ({
+    borderColor: t.colors.transparentBackground,
+    color: t.colors.neutralForeground2,
+    iconColor: t.colors.neutralForeground2,
+    indicatorColor: t.colors.transparentBackground,
+    transparent: {
+      backgroundColor: t.colors.transparentBackground,
+    },
+    subtle: {
+      backgroundColor: t.colors.subtleBackground,
+    },
+    selected: {
+      color: t.colors.neutralForeground1,
+      iconColor: t.colors.compoundBrandForeground1,
+      indicatorColor: t.colors.compoundBrandStroke1,
+      pressed: {
+        color: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.neutralForeground1Pressed,
+        iconColor: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.compoundBrandForeground1Pressed,
+        indicatorColor: t.colors.compoundBrandStroke1Pressed,
+      },
+    },
+    disabled: {
+      color: isHighContrast(t) ? t.colors.neutralStrokeDisabled : t.colors.neutralForegroundDisabled,
+      iconColor: isHighContrast(t) ? t.colors.neutralStrokeDisabled : t.colors.neutralForegroundDisabled,
+      selected: {
+        color: isHighContrast(t) ? t.colors.neutralStrokeDisabled : t.colors.neutralForegroundDisabled,
+        iconColor: isHighContrast(t) ? t.colors.neutralStrokeDisabled : t.colors.neutralForegroundDisabled,
+        indicatorColor: isHighContrast(t) ? t.colors.neutralStrokeDisabled : t.colors.neutralForegroundDisabled,
+      },
+    },
+    hovered: {
+      color: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.neutralForeground2Hover,
+      iconColor: isHighContrast(t) ? t.colors.compoundBrandForeground1Hover : t.colors.neutralForeground2Hover,
+      indicatorColor: isHighContrast(t) ? t.colors.compoundBrandStroke1Hover : t.colors.neutralStroke1Hover,
+      selected: {
+        color: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.neutralForeground1Hover,
+        iconColor: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.compoundBrandForeground1Hover,
+        indicatorColor: t.colors.compoundBrandStroke1Hover,
+      },
+      disabled: {
+        indicatorColor: t.colors.transparentBackground,
+      },
+      transparent: {
+        backgroundColor: t.colors.transparentBackgroundHover,
+      },
+      subtle: {
+        backgroundColor: t.colors.subtleBackgroundHover,
+        indicatorColor: isHighContrast(t) ? t.colors.neutralStroke1 : t.colors.neutralStroke1Hover,
+      },
+    },
+    pressed: {
+      color: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.neutralForeground2Pressed,
+      iconColor: isHighContrast(t) ? t.colors.neutralForeground2 : t.colors.neutralForeground2Pressed,
+      indicatorColor: isHighContrast(t) ? t.colors.compoundBrandBackground1Pressed : t.colors.neutralStroke1Pressed,
+      transparent: {
+        backgroundColor: t.colors.transparentBackgroundPressed,
+      },
+      subtle: {
+        backgroundColor: t.colors.subtleBackgroundPressed,
+      },
+    },
+    focused: {
+      borderColor: isHighContrast(t) ? t.colors.compoundBrandStroke1 : t.colors.neutralForeground1,
+    },
+  } as TabTokens);