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

package/src/createAliasTokens.ts

@@ -1,11 +1,18 @@
-import { getAliasTokens } from './getAliasTokens';
-import { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types';
+import { getAliasTokens, getShadowTokens } from './getTokens';
+import { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/theme-types';
 import { memoize } from '@fluentui-react-native/memo-cache';
-import { mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
+import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
 
-function createAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
+function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
   const aliasTokens = getAliasTokens(mode);
   return mapPipelineToTheme(aliasTokens);
 }
 
-export const createAliasTokens = memoize(createAliasTokensWorker);
+export const createColorAliasTokens = memoize(createColorAliasTokensWorker);
+
+function createShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition {
+  const aliasTokens = getShadowTokens(mode);
+  return mapPipelineToShadow(aliasTokens);
+}
+
+export const createShadowAliasTokens = memoize(createShadowAliasTokensWorker);

package/src/defaultColors.ts

@@ -1,6 +1,6 @@
 import { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import { createAliasTokens } from './createAliasTokens';
+import { createColorAliasTokens } from './createAliasTokens';
 
 /**
  * Generate a palette from a set of fabric web colors, like those output from the theme designer.
@@ -253,7 +253,7 @@ export function getStockWebPalette(): ThemeColorDefinition {
       accent: globalTokens.color.brand.primary,
       blackTranslucent40: 'rgba(0,0,0,.4)',
     }),
-    ...createAliasTokens('light'),
+    ...createColorAliasTokens('light'),
   };
 }
 
@@ -292,7 +292,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
       },
       true,
     ),
-    ...createAliasTokens('dark'),
+    ...createColorAliasTokens('dark'),
   };
 }
 
@@ -505,6 +505,6 @@ export function getStockWebHCPalette(): ThemeColorDefinition {
 
     personaActivityRing: '#ffffff',
     personaActivityGlow: 'transparent', // glow probably doesn't make sense on HC
-    ...createAliasTokens('highContrast'),
+    ...createColorAliasTokens('highContrast'),
   };
 }

package/src/defaultTheme.ts

@@ -1,7 +1,8 @@
-import { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants, FontFamily } from '@fluentui-react-native/theme-types';
+import { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } 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';
+import { createShadowAliasTokens } from './createAliasTokens';
 
 function _defaultTypography(): Typography {
   const defaultsDict = {
@@ -12,7 +13,7 @@ function _defaultTypography(): Typography {
       subheader: globalTokens.font.size['400'] as FontSize,
       header: globalTokens.font.size['500'] as FontSize,
       hero: globalTokens.font.size['700'] as FontSize,
-      heroLarge: 42 as FontSize,
+      heroLarge: globalTokens.font.size['900'] as FontSize,
     } as FontSizes,
     weights: {
       regular: globalTokens.font.weight.regular as FontWeightValue,
@@ -40,72 +41,20 @@ 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,
-      },
+      // mocked out
+      caption1: { face: 'primary', size: 'caption', weight: 'regular' },
+      body1: { face: 'primary', size: 'secondary', weight: 'regular' },
+      body1Strong: { face: 'primary', size: 'secondary', weight: 'semiBold' },
+      body2: { face: 'primary', size: 'body', weight: 'regular' },
+      body2Strong: { face: 'primary', size: 'body', weight: 'semiBold' },
+      subtitle1: { face: 'primary', size: 'header', weight: 'regular' },
+      subtitle1Strong: { face: 'primary', size: 'header', weight: 'semiBold' },
+      subtitle2: { face: 'primary', size: 'subheader', weight: 'regular' },
+      subtitle2Strong: { face: 'primary', size: 'subheader', weight: 'semiBold' },
+      title1: { face: 'primary', size: 'hero', weight: 'regular' },
+      title1Strong: { face: 'primary', size: 'hero', weight: 'semiBold' },
+      largeTitle: { face: 'primary', size: 'heroLarge', weight: 'regular' },
+      display: { face: 'primary', size: 'heroLarge', weight: 'semiBold' },
     } as Variants,
   };
 
@@ -121,102 +70,6 @@ function _defaultTypography(): Typography {
     defaultsDict.families = familiesDictApple;
   }
 
-  // In certain cases on win32, semibold font renders incorrectly so 'Segoe UI Semibold' is used
-  if (Platform.OS === ('win32' as any)) {
-    const familiesDictWin32 = {
-      primary: 'Segoe UI',
-      secondary: 'Segoe UI Semibold',
-      cursive: 'System',
-      monospace: 'System',
-      sansSerif: 'System',
-      serif: 'System',
-    };
-    defaultsDict.families = familiesDictWin32;
-
-    const variantsDictWin32 = {
-      captionStandard: { face: 'primary', size: 'caption', weight: 'regular' },
-      secondaryStandard: { face: 'primary', size: 'secondary', weight: 'regular' },
-      secondarySemibold: { face: 'secondary', size: 'secondary', weight: 'semiBold' },
-      bodyStandard: { face: 'primary', size: 'body', weight: 'regular' },
-      bodySemibold: { face: 'secondary', size: 'body', weight: 'semiBold' },
-      subheaderStandard: { face: 'primary', size: 'subheader', weight: 'regular' },
-      subheaderSemibold: { face: 'secondary', size: 'subheader', weight: 'semiBold' },
-      headerStandard: { face: 'primary', size: 'header', weight: 'regular' },
-      headerSemibold: { face: 'secondary', size: 'header', weight: 'semiBold' },
-      heroStandard: { face: 'primary', size: 'hero', weight: 'regular' },
-      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;
-  }
-
   return defaultsDict;
 }
 
@@ -228,6 +81,7 @@ export const defaultFluentTheme: Theme = {
   colors: getStockWebPalette(),
   typography: _defaultTypography(),
   spacing: defaultSpacing(),
+  shadows: createShadowAliasTokens('light'),
   components: {},
   host: { appearance: 'light' },
 };
@@ -235,6 +89,7 @@ export const defaultFluentTheme: Theme = {
 export const defaultFluentDarkTheme: Theme = {
   colors: getStockWebDarkPalette(),
   typography: defaultFluentTheme.typography,
+  shadows: createShadowAliasTokens('dark'),
   spacing: defaultFluentTheme.spacing,
   components: {},
   host: { appearance: 'dark' },
@@ -243,6 +98,7 @@ export const defaultFluentDarkTheme: Theme = {
 export const defaultFluentHighConstrastTheme: Theme = {
   colors: getStockWebHCPalette(),
   typography: defaultFluentTheme.typography,
+  shadows: createShadowAliasTokens('highContrast'),
   spacing: defaultFluentTheme.spacing,
   components: {},
   host: { appearance: 'highContrast' },

package/src/{getAliasTokens.ts → getTokens.ts}

@@ -1,6 +1,9 @@
 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 lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json';
+import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json';
+import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json';
 import { AppearanceOptions } from '@fluentui-react-native/theme-types';
 import { assertNever } from 'assert-never';
 
@@ -17,3 +20,17 @@ export function getAliasTokens(mode: AppearanceOptions) {
 
   return lightAliasTokens;
 }
+
+export function getShadowTokens(mode: AppearanceOptions) {
+  if (mode === 'light') {
+    return lightShadowTokens.shadow;
+  } else if (mode === 'dark') {
+    return darkShadowTokens.shadow;
+  } else if (mode === 'highContrast') {
+    return hcShadowTokens.shadow;
+  } else {
+    assertNever(mode);
+  }
+
+  return lightAliasTokens;
+}

package/src/index.ts

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

package/lib/getAliasTokens.d.ts

@@ -1,3 +0,0 @@
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-export declare function getAliasTokens(mode: AppearanceOptions): any;
-//# sourceMappingURL=getAliasTokens.d.ts.map

package/lib/getAliasTokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getAliasTokens.d.ts","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,OAYrD"}

package/lib/getAliasTokens.js

@@ -1,20 +0,0 @@
-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 { assertNever } from 'assert-never';
-export function getAliasTokens(mode) {
-    if (mode === 'light') {
-        return lightAliasTokens;
-    }
-    else if (mode === 'dark') {
-        return darkAliasTokens;
-    }
-    else if (mode === 'highContrast') {
-        return hcAliasTokens;
-    }
-    else {
-        assertNever(mode);
-    }
-    return lightAliasTokens;
-}
-//# sourceMappingURL=getAliasTokens.js.map

package/lib/getAliasTokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getAliasTokens.js","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,wEAAwE,CAAC;AACtG,OAAO,eAAe,MAAM,uEAAuE,CAAC;AACpG,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,UAAU,cAAc,CAAC,IAAuB;IACpD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,gBAAgB,CAAC;KACzB;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,eAAe,CAAC;KACxB;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,OAAO,aAAa,CAAC;KACtB;SAAM;QACL,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC"}

package/lib-commonjs/getAliasTokens.d.ts

@@ -1,3 +0,0 @@
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-export declare function getAliasTokens(mode: AppearanceOptions): any;
-//# sourceMappingURL=getAliasTokens.d.ts.map

package/lib-commonjs/getAliasTokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getAliasTokens.d.ts","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,OAYrD"}

package/lib-commonjs/getAliasTokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getAliasTokens.js","sourceRoot":"","sources":["../src/getAliasTokens.ts"],"names":[],"mappings":";;;;;;AAAA,+HAAsG;AACtG,8HAAoG;AACpG,4DAA4D;AAE5D,6CAA2C;AAE3C,SAAgB,cAAc,CAAC,IAAuB;IACpD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,6BAAgB,CAAC;KACzB;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,6BAAe,CAAC;KACxB;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,OAAO,4BAAa,CAAC;KACtB;SAAM;QACL,IAAA,0BAAW,EAAC,IAAI,CAAC,CAAC;KACnB;IAED,OAAO,6BAAgB,CAAC;AAC1B,CAAC;AAZD,wCAYC"}