@fluentui-react-native/default-theme 0.10.3 → 0.11.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

@@ -2,6 +2,7 @@ import { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Varia
 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 = {
@@ -96,6 +97,7 @@ export const defaultFluentTheme: Theme = {
   colors: getStockWebPalette(),
   typography: _defaultTypography(),
   spacing: defaultSpacing(),
+  shadows: createShadowAliasTokens('light'),
   components: {},
   host: { appearance: 'light' },
 };
@@ -103,6 +105,7 @@ export const defaultFluentTheme: Theme = {
 export const defaultFluentDarkTheme: Theme = {
   colors: getStockWebDarkPalette(),
   typography: defaultFluentTheme.typography,
+  shadows: createShadowAliasTokens('dark'),
   spacing: defaultFluentTheme.spacing,
   components: {},
   host: { appearance: 'dark' },
@@ -111,6 +114,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"}