@fluentui-react-native/default-theme 0.9.15 → 0.10.2

package/src/defaultTheme.ts

@@ -1,4 +1,4 @@
-import { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } from '@fluentui-react-native/theme-types';
+import { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants, FontFamily } from '@fluentui-react-native/theme-types';
 import { Platform } from 'react-native';
 import { getStockWebPalette, getStockWebDarkPalette, getStockWebHCPalette } from './defaultColors';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
@@ -40,6 +40,72 @@ function _defaultTypography(): Typography {
       heroSemibold: { face: 'primary', size: 'hero', weight: 'semiBold' },
       heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: 'regular' },
       heroLargeSemibold: { face: 'primary', size: 'heroLarge', weight: 'semiBold' },
+      //v1 text variants
+      caption1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['100'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      body1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['200'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      body1Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['200'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      body2: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['300'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      body2Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['300'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      subtitle2: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['400'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      subtitle2Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['400'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      subtitle1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['500'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      subtitle1Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['500'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      title1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['700'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      title1Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['700'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      largeTitle: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['900'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      display: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['900'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
     } as Variants,
   };
 
@@ -81,6 +147,72 @@ function _defaultTypography(): Typography {
       heroSemibold: { face: 'secondary', size: 'hero', weight: 'semiBold' },
       heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: 'regular' },
       heroLargeSemibold: { face: 'secondary', size: 'heroLarge', weight: 'semiBold' },
+      //v2 text variants
+      caption1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['100'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      body1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['200'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      body1Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['200'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      body2: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['300'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      body2Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['300'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      subtitle2: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['400'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      subtitle2Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['400'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      subtitle1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['500'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      subtitle1Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['500'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      title1: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['700'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      title1Strong: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['700'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
+      largeTitle: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['900'] as FontSize,
+        weight: globalTokens.font.weight.regular as FontWeightValue,
+      },
+      display: {
+        face: globalTokens.font.family['base'] as FontFamily,
+        size: globalTokens.font.size['900'] as FontSize,
+        weight: globalTokens.font.weight.semibold as FontWeightValue,
+      },
     } as Variants;
     defaultsDict.variants = variantsDictWin32;
   }

package/src/getAliasTokens.ts

@@ -0,0 +1,19 @@
+import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json';
+import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json';
+import { hcAliasTokens } from './highContrast/tokens-alias';
+import { AppearanceOptions } from '@fluentui-react-native/theme-types';
+import { assertNever } from 'assert-never';
+
+export function getAliasTokens(mode: AppearanceOptions) {
+  if (mode === 'light') {
+    return lightAliasTokens;
+  } else if (mode === 'dark') {
+    return darkAliasTokens;
+  } else if (mode === 'highContrast') {
+    return hcAliasTokens;
+  } else {
+    assertNever(mode);
+  }
+
+  return lightAliasTokens;
+}

package/src/highContrast/tokens-alias.ts

@@ -0,0 +1,18 @@
+import { PlatformColor } from 'react-native';
+import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json';
+
+export const hcAliasTokens = processAliasTokens(aliasTokens);
+
+function processAliasTokens(aliasTokens: any) {
+  for (const key in aliasTokens) {
+    for (const innerKey in aliasTokens[key]) {
+      const entry = aliasTokens[key][innerKey];
+      if (typeof entry === 'string' && entry.includes('PlatformColor')) {
+        const color = 'SystemColor' + entry.substring(14, entry.length - 1) + 'Color';
+        aliasTokens[key][innerKey] = PlatformColor(color);
+      }
+    }
+  }
+
+  return aliasTokens;
+}

package/src/highContrast/tokens-alias.win32.ts

@@ -0,0 +1,18 @@
+import { PlatformColor } from 'react-native';
+import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json';
+
+export const hcAliasTokens = processAliasTokens(aliasTokens);
+
+function processAliasTokens(aliasTokens: any) {
+  for (const key in aliasTokens) {
+    for (const innerKey in aliasTokens[key]) {
+      const entry = aliasTokens[key][innerKey];
+      if (typeof entry === 'string' && entry.includes('PlatformColor')) {
+        const color = entry.substring(14, entry.length - 1);
+        aliasTokens[key][innerKey] = PlatformColor(color);
+      }
+    }
+  }
+
+  return aliasTokens;
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export { defaultFluentTheme, defaultFluentDarkTheme } from './defaultTheme';
 export { createDefaultTheme } from './createDefaultTheme';
+export { createAliasTokens } from './createAliasTokens';