Fork Tab color tokens only

microsoft · Dec 13, 2023 · 4974b9f · 4974b9f
1 parent 29cbfe4
commit 4974b9f
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 190 deletions.
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/...mental/TabList/src/Tab/TabTokens.win32.ts → ...l/TabList/src/Tab/TabColorTokens.win32.ts b/...mental/TabList/src/Tab/TabTokens.win32.ts → ...l/TabList/src/Tab/TabColorTokens.win32.ts
@@ -1,7 +1,6 @@
-import { buildUseTokens } from '@fluentui-react-native/framework';
 import type { Theme } from '@fluentui-react-native/framework';
 import { isHighContrast } from '@fluentui-react-native/theming-utils';
-import type { TokensFromTheme } from '@fluentui-react-native/use-styling';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
 import type { TabTokens } from '..';
 
@@ -20,72 +19,12 @@ export const tabStates: (keyof TabTokens)[] = [
   'hasIcon',
 ];
 
-export const defaultTabTokens: TokensFromTheme<TabTokens, Theme> = (t: Theme) =>
+export const defaultTabColorTokens: TokenSettings<TabTokens, Theme> = (t: Theme) =>
   ({
-    indicatorOrientation: 'horizontal',
-    indicatorThickness: 2,
-    borderWidth: 2,
-    borderRadius: 4,
-    contentMarginStart: 2,
-    contentMarginEnd: 2,
-    flexDirection: 'column',
     borderColor: t.colors.transparentBackground,
     color: t.colors.neutralForeground2,
     iconColor: t.colors.neutralForeground2,
     indicatorColor: t.colors.transparentBackground,
-    indicatorRadius: 99,
-    small: {
-      iconSize: 20,
-      iconMargin: 2,
-      indicatorMargin: 8,
-      stackMarginHorizontal: 6,
-      stackMarginVertical: 8,
-      variant: 'body1',
-      selected: {
-        variant: 'body1Strong',
-      },
-    },
-    medium: {
-      iconSize: 20,
-      iconMargin: 6,
-      indicatorMargin: 12,
-      stackMarginHorizontal: 10,
-      stackMarginVertical: 12,
-      variant: 'body1',
-      selected: {
-        variant: 'body1Strong',
-      },
-    },
-    large: {
-      iconSize: 24,
-      iconMargin: 6,
-      indicatorMargin: 12,
-      stackMarginHorizontal: 10,
-      stackMarginVertical: 16,
-      variant: 'body2',
-      selected: {
-        variant: 'subtitle2',
-      },
-    },
-    vertical: {
-      flexDirection: 'row-reverse',
-      indicatorOrientation: 'vertical',
-      small: {
-        indicatorMargin: 4,
-        stackMarginHorizontal: 6,
-        stackMarginVertical: 2,
-      },
-      medium: {
-        indicatorMargin: 8,
-        stackMarginHorizontal: 10,
-        stackMarginVertical: 6,
-      },
-      large: {
-        indicatorMargin: 10,
-        stackMarginHorizontal: 10,
-        stackMarginVertical: 8,
-      },
-    },
     transparent: {
       backgroundColor: t.colors.transparentBackground,
     },
@@ -145,9 +84,4 @@ export const defaultTabTokens: TokensFromTheme<TabTokens, Theme> = (t: Theme) =>
     focused: {
       borderColor: isHighContrast(t) ? t.colors.compoundBrandStroke1 : t.colors.neutralForeground1,
     },
-    hasIcon: {
-      contentMarginStart: 8,
-    },
   } as TabTokens);
-
-export const useTabTokens = buildUseTokens(defaultTabTokens);
diff --git a/packages/experimental/TabList/src/Tab/TabTokens.ts b/packages/experimental/TabList/src/Tab/TabTokens.ts
@@ -1,8 +1,10 @@
 import { buildUseTokens } from '@fluentui-react-native/framework';
 import type { Theme } from '@fluentui-react-native/framework';
-import type { TokensFromTheme } from '@fluentui-react-native/use-styling';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
-import type { TabTokens } from '..';
+import type { TabTokens } from './Tab.types';
+import { tabName } from './Tab.types';
+import { defaultTabColorTokens } from './TabColorTokens';
 
 export const tabStates: (keyof TabTokens)[] = [
   'small',
@@ -19,133 +21,70 @@ export const tabStates: (keyof TabTokens)[] = [
   'hasIcon',
 ];
 
-export const defaultTabTokens: TokensFromTheme<TabTokens, Theme> = (t: Theme) =>
-  ({
-    indicatorOrientation: 'horizontal',
-    indicatorThickness: 2,
-    borderWidth: 2,
-    borderRadius: 4,
-    contentMarginStart: 2,
-    contentMarginEnd: 2,
-    flexDirection: 'column',
-    borderColor: t.colors.transparentStroke,
-    color: t.colors.neutralForeground2,
-    iconColor: t.colors.neutralForeground2,
-    indicatorColor: t.colors.transparentStroke,
-    indicatorRadius: 99,
+export const defaultTabTokens: TokenSettings<TabTokens, Theme> = {
+  indicatorOrientation: 'horizontal',
+  indicatorThickness: 2,
+  borderWidth: 2,
+  borderRadius: 4,
+  contentMarginStart: 2,
+  contentMarginEnd: 2,
+  flexDirection: 'column',
+  indicatorRadius: 99,
+  small: {
+    iconSize: 20,
+    iconMargin: 2,
+    indicatorMargin: 8,
+    stackMarginHorizontal: 6,
+    stackMarginVertical: 8,
+    variant: 'body1',
+    selected: {
+      variant: 'body1Strong',
+    },
+  },
+  medium: {
+    iconSize: 20,
+    iconMargin: 6,
+    indicatorMargin: 12,
+    stackMarginHorizontal: 10,
+    stackMarginVertical: 12,
+    variant: 'body1',
+    selected: {
+      variant: 'body1Strong',
+    },
+  },
+  large: {
+    iconSize: 24,
+    iconMargin: 6,
+    indicatorMargin: 12,
+    stackMarginHorizontal: 10,
+    stackMarginVertical: 16,
+    variant: 'body2',
+    selected: {
+      variant: 'subtitle2',
+    },
+  },
+  vertical: {
+    flexDirection: 'row-reverse',
+    indicatorOrientation: 'vertical',
     small: {
-      iconSize: 20,
-      iconMargin: 2,
-      indicatorMargin: 8,
+      indicatorMargin: 4,
       stackMarginHorizontal: 6,
-      stackMarginVertical: 8,
-      variant: 'body1',
-      selected: {
-        variant: 'body1Strong',
-      },
+      stackMarginVertical: 2,
     },
     medium: {
-      iconSize: 20,
-      iconMargin: 6,
-      indicatorMargin: 12,
+      indicatorMargin: 8,
       stackMarginHorizontal: 10,
-      stackMarginVertical: 12,
-      variant: 'body1',
-      selected: {
-        variant: 'body1Strong',
-      },
+      stackMarginVertical: 6,
     },
     large: {
-      iconSize: 24,
-      iconMargin: 6,
-      indicatorMargin: 12,
+      indicatorMargin: 10,
       stackMarginHorizontal: 10,
-      stackMarginVertical: 16,
-      variant: 'body2',
-      selected: {
-        variant: 'subtitle2',
-      },
-    },
-    vertical: {
-      flexDirection: 'row-reverse',
-      indicatorOrientation: 'vertical',
-      small: {
-        indicatorMargin: 4,
-        stackMarginHorizontal: 6,
-        stackMarginVertical: 2,
-      },
-      medium: {
-        indicatorMargin: 8,
-        stackMarginHorizontal: 10,
-        stackMarginVertical: 6,
-      },
-      large: {
-        indicatorMargin: 10,
-        stackMarginHorizontal: 10,
-        stackMarginVertical: 8,
-      },
-    },
-    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.transparentStroke,
-      },
-      transparent: {
-        backgroundColor: t.colors.transparentBackgroundHover,
-      },
-      subtle: {
-        backgroundColor: t.colors.subtleBackgroundHover,
-      },
-    },
-    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,
-    },
-    hasIcon: {
-      contentMarginStart: 8,
+      stackMarginVertical: 8,
     },
-  } as TabTokens);
+  },
+  hasIcon: {
+    contentMarginStart: 8,
+  },
+} as TabTokens;
 
-export const useTabTokens = buildUseTokens(defaultTabTokens);
+export const useTabTokens = buildUseTokens(defaultTabTokens, defaultTabColorTokens, tabName);