@fluentui-react-native/win32-theme 0.16.4 → 0.19.0

package/lib-commonjs/getOfficeTokens.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOfficeShadowTokens = exports.getOfficeAliasTokens = void 0;
+var tslib_1 = require("tslib");
+var tokens_aliases_json_1 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json"));
+var tokens_aliases_json_2 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json"));
+var tokens_aliases_json_3 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json"));
+var tokens_alias_1 = require("./highContrast/tokens-alias");
+var tokens_shadow_json_1 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/colorful/tokens-shadow.json"));
+var tokens_shadow_json_2 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/darkgray/tokens-shadow.json"));
+var tokens_shadow_json_3 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/black/tokens-shadow.json"));
+var tokens_shadow_json_4 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json"));
+function getOfficeAliasTokens(officeTheme) {
+    if (officeTheme === 'White' || officeTheme === 'Colorful') {
+        return tokens_aliases_json_1.default;
+    }
+    else if (officeTheme === 'DarkGray') {
+        return tokens_aliases_json_2.default;
+    }
+    else if (officeTheme === 'Black') {
+        return tokens_aliases_json_3.default;
+    }
+    else if (officeTheme === 'HighContrast') {
+        return tokens_alias_1.hcAliasTokens;
+    }
+    return tokens_aliases_json_1.default;
+}
+exports.getOfficeAliasTokens = getOfficeAliasTokens;
+function getOfficeShadowTokens(officeTheme) {
+    if (officeTheme === 'White' || officeTheme === 'Colorful') {
+        return tokens_shadow_json_1.default.shadow;
+    }
+    else if (officeTheme === 'DarkGray') {
+        return tokens_shadow_json_2.default.shadow;
+    }
+    else if (officeTheme === 'Black') {
+        return tokens_shadow_json_3.default.shadow;
+    }
+    else if (officeTheme === 'HighContrast') {
+        return tokens_shadow_json_4.default.shadow;
+    }
+    return tokens_aliases_json_1.default;
+}
+exports.getOfficeShadowTokens = getOfficeShadowTokens;
+//# sourceMappingURL=getOfficeTokens.js.map

package/lib-commonjs/getOfficeTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOfficeTokens.js","sourceRoot":"","sources":["../src/getOfficeTokens.ts"],"names":[],"mappings":";;;;AAAA,6IAA0G;AAC1G,6IAA0G;AAC1G,0IAAoG;AACpG,4DAA4D;AAC5D,2IAA0G;AAC1G,2IAA0G;AAC1G,wIAAoG;AACpG,qIAA8F;AAE9F,SAAgB,oBAAoB,CAAC,WAAmB;IACtD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE;QACzD,OAAO,6BAAmB,CAAC;KAC5B;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE;QACrC,OAAO,6BAAmB,CAAC;KAC5B;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE;QAClC,OAAO,6BAAgB,CAAC;KACzB;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE;QACzC,OAAO,4BAAa,CAAC;KACtB;IAED,OAAO,6BAAmB,CAAC;AAC7B,CAAC;AAZD,oDAYC;AAED,SAAgB,qBAAqB,CAAC,WAAmB;IACvD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE;QACzD,OAAO,4BAAoB,CAAC,MAAM,CAAC;KACpC;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE;QACrC,OAAO,4BAAoB,CAAC,MAAM,CAAC;KACpC;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE;QAClC,OAAO,4BAAiB,CAAC,MAAM,CAAC;KACjC;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE;QACzC,OAAO,4BAAc,CAAC,MAAM,CAAC;KAC9B;IAED,OAAO,6BAAmB,CAAC;AAC7B,CAAC;AAZD,sDAYC"}

package/lib-commonjs/getThemeTypography.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"getThemeTypography.d.ts","sourceRoot":"","sources":["../src/getThemeTypography.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAY,MAAM,oCAAoC,CAAC;AAI1E,wBAAgB,eAAe,IAAI,UAAU,CAiC5C"}

package/lib-commonjs/getThemeTypography.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.win32Typography = void 0;
+var tslib_1 = require("tslib");
+var default_theme_1 = require("@fluentui-react-native/default-theme");
+var createFontAliasTokens_1 = require("./createFontAliasTokens");
+function win32Typography() {
+    var win32Dict = {
+        sizes: default_theme_1.defaultFluentTheme.typography.sizes,
+        weights: default_theme_1.defaultFluentTheme.typography.weights,
+        // hard coded until we support new fontFamily format
+        families: {
+            primary: 'Segoe UI',
+            secondary: 'Segoe UI Semibold',
+            cursive: 'System',
+            monospace: 'Consolas',
+            sansSerif: 'System',
+            serif: 'System',
+            numeric: 'Bahnschrift',
+        },
+        variants: (0, tslib_1.__assign)({ captionStandard: { face: 'primary', size: 'caption', weight: 'regular' }, secondaryStandard: { face: 'primary', size: 'secondary', weight: 'regular' }, secondarySemibold: { face: 'primary', size: 'secondary', weight: 'semiBold' }, bodyStandard: { face: 'primary', size: 'body', weight: 'regular' }, bodySemibold: { face: 'primary', size: 'body', weight: 'semiBold' }, subheaderStandard: { face: 'primary', size: 'subheader', weight: 'regular' }, subheaderSemibold: { face: 'primary', size: 'subheader', weight: 'semiBold' }, headerStandard: { face: 'primary', size: 'header', weight: 'regular' }, headerSemibold: { face: 'primary', size: 'header', weight: 'semiBold' }, heroStandard: { face: 'primary', size: 'hero', weight: 'regular' }, heroSemibold: { face: 'primary', size: 'hero', weight: 'semiBold' }, heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: 'regular' }, heroLargeSemibold: { face: 'primary', size: 'heroLarge', weight: 'semiBold' } }, (0, createFontAliasTokens_1.createFontAliasTokens)()),
+    };
+    return win32Dict;
+}
+exports.win32Typography = win32Typography;
+//# sourceMappingURL=getThemeTypography.js.map

package/lib-commonjs/getThemeTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThemeTypography.js","sourceRoot":"","sources":["../src/getThemeTypography.ts"],"names":[],"mappings":";;;;AACA,sEAA0E;AAC1E,iEAAgE;AAEhE,SAAgB,eAAe;IAC7B,IAAM,SAAS,GAAG;QAChB,KAAK,EAAE,kCAAkB,CAAC,UAAU,CAAC,KAAK;QAC1C,OAAO,EAAE,kCAAkB,CAAC,UAAU,CAAC,OAAO;QAC9C,oDAAoD;QACpD,QAAQ,EAAE;YACR,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,mBAAmB;YAC9B,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,UAAU;YACrB,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE,aAAa;SACvB;QACD,QAAQ,EAAE,wBACR,eAAe,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EACxE,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5E,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,EAC7E,YAAY,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAClE,YAAY,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,EACnE,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5E,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,EAC7E,cAAc,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EACtE,cAAc,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,EACvE,YAAY,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAClE,YAAY,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,EACnE,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5E,iBAAiB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,IAC1E,IAAA,6CAAqB,GAAE,CACf;KACd,CAAC;IAEF,OAAO,SAAS,CAAC;AACnB,CAAC;AAjCD,0CAiCC"}

package/lib-commonjs/index.d.ts

@@ -3,6 +3,8 @@ export { createPartialOfficeTheme } from './createPartialOfficeTheme';
 export { fallbackGetPalette, fallbackOfficeModule, getThemingModule } from './NativeModule/index';
 export type { CxxException, IEventEmitter, NativeColorNames, NativeColorRamps, OfficeThemingModule, PlatformDefaultsChangedArgs, PlatformDefaultsChangedCallback, } from './NativeModule/index';
 export { paletteFromOfficeColors } from './paletteFromOfficeColors';
-export { createOfficeAliasTokens } from './createOfficeAliasTokens';
+export { createOfficeColorAliasTokens as createOfficeAliasTokens } from './createOfficeAliasTokens';
+export { createFontAliasTokens } from './createFontAliasTokens';
 export { createBrandedThemeWithAlias, getCurrentBrandAliasTokens } from './createBrandedThemeWithAlias';
+export { win32Typography } from './getThemeTypography';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClG,YAAY,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,2BAA2B,EAC3B,+BAA+B,GAChC,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClG,YAAY,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,2BAA2B,EAC3B,+BAA+B,GAChC,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,4BAA4B,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpG,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,2BAA2B,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACxG,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/lib-commonjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCurrentBrandAliasTokens = exports.createBrandedThemeWithAlias = exports.createOfficeAliasTokens = exports.paletteFromOfficeColors = exports.getThemingModule = exports.fallbackOfficeModule = exports.fallbackGetPalette = exports.createPartialOfficeTheme = exports.createOfficeTheme = void 0;
+exports.win32Typography = exports.getCurrentBrandAliasTokens = exports.createBrandedThemeWithAlias = exports.createFontAliasTokens = exports.createOfficeAliasTokens = exports.paletteFromOfficeColors = exports.getThemingModule = exports.fallbackOfficeModule = exports.fallbackGetPalette = exports.createPartialOfficeTheme = exports.createOfficeTheme = void 0;
 var createOfficeTheme_1 = require("./createOfficeTheme");
 Object.defineProperty(exports, "createOfficeTheme", { enumerable: true, get: function () { return createOfficeTheme_1.createOfficeTheme; } });
 var createPartialOfficeTheme_1 = require("./createPartialOfficeTheme");
@@ -12,8 +12,12 @@ Object.defineProperty(exports, "getThemingModule", { enumerable: true, get: func
 var paletteFromOfficeColors_1 = require("./paletteFromOfficeColors");
 Object.defineProperty(exports, "paletteFromOfficeColors", { enumerable: true, get: function () { return paletteFromOfficeColors_1.paletteFromOfficeColors; } });
 var createOfficeAliasTokens_1 = require("./createOfficeAliasTokens");
-Object.defineProperty(exports, "createOfficeAliasTokens", { enumerable: true, get: function () { return createOfficeAliasTokens_1.createOfficeAliasTokens; } });
+Object.defineProperty(exports, "createOfficeAliasTokens", { enumerable: true, get: function () { return createOfficeAliasTokens_1.createOfficeColorAliasTokens; } });
+var createFontAliasTokens_1 = require("./createFontAliasTokens");
+Object.defineProperty(exports, "createFontAliasTokens", { enumerable: true, get: function () { return createFontAliasTokens_1.createFontAliasTokens; } });
 var createBrandedThemeWithAlias_1 = require("./createBrandedThemeWithAlias");
 Object.defineProperty(exports, "createBrandedThemeWithAlias", { enumerable: true, get: function () { return createBrandedThemeWithAlias_1.createBrandedThemeWithAlias; } });
 Object.defineProperty(exports, "getCurrentBrandAliasTokens", { enumerable: true, get: function () { return createBrandedThemeWithAlias_1.getCurrentBrandAliasTokens; } });
+var getThemeTypography_1 = require("./getThemeTypography");
+Object.defineProperty(exports, "win32Typography", { enumerable: true, get: function () { return getThemeTypography_1.win32Typography; } });
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA;AAC1B,uEAAsE;AAA7D,oIAAA,wBAAwB,OAAA;AACjC,8CAAkG;AAAzF,2GAAA,kBAAkB,OAAA;AAAE,6GAAA,oBAAoB,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AAUnE,qEAAoE;AAA3D,kIAAA,uBAAuB,OAAA;AAChC,qEAAoE;AAA3D,kIAAA,uBAAuB,OAAA;AAChC,6EAAwG;AAA/F,0IAAA,2BAA2B,OAAA;AAAE,yIAAA,0BAA0B,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA;AAC1B,uEAAsE;AAA7D,oIAAA,wBAAwB,OAAA;AACjC,8CAAkG;AAAzF,2GAAA,kBAAkB,OAAA;AAAE,6GAAA,oBAAoB,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AAUnE,qEAAoE;AAA3D,kIAAA,uBAAuB,OAAA;AAChC,qEAAoG;AAA3F,kIAAA,4BAA4B,OAA2B;AAChE,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA;AAC9B,6EAAwG;AAA/F,0IAAA,2BAA2B,OAAA;AAAE,yIAAA,0BAA0B,OAAA;AAChE,2DAAuD;AAA9C,qHAAA,eAAe,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/win32-theme",
-  "version": "0.16.4",
+  "version": "0.19.0",
   "description": "Win32 office theme that works with the theming native module",
   "repository": {
     "type": "git",
@@ -27,13 +27,13 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/default-theme": ">=0.10.3 <1.0.0",
-    "@fluentui-react-native/design-tokens-win32": "^0.8.0",
+    "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
+    "@fluentui-react-native/design-tokens-win32": "^0.13.0",
     "@fluentui-react-native/memo-cache": "^1.1.7",
-    "@fluentui-react-native/theme-tokens": ">=0.16.2 <1.0.0",
-    "@fluentui-react-native/theme-types": ">=0.14.3 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.6.8 <1.0.0",
-    "@fluentui-react-native/theming-utils": ">=0.10.2 <1.0.0",
+    "@fluentui-react-native/theme-tokens": ">=0.18.0 <1.0.0",
+    "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.13.0 <1.0.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

package/src/createFontAliasTokens.ts

@@ -0,0 +1,11 @@
+import { getOfficeAliasTokens } from './getOfficeTokens';
+import { Variants } from '@fluentui-react-native/theme-types';
+import { memoize } from '@fluentui-react-native/memo-cache';
+import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils';
+
+function createFontAliasTokensWorker(): Partial<Variants> {
+  const aliasTokens = getOfficeAliasTokens('Colorful');
+  return mapFontPipelineToTheme(aliasTokens);
+}
+
+export const createFontAliasTokens = memoize(createFontAliasTokensWorker);

package/src/createOfficeAliasTokens.ts

@@ -1,11 +1,18 @@
-import { getOfficeAliasTokens } from './getOfficeAliasTokens';
-import { AliasColorTokens } from '@fluentui-react-native/theme-types';
+import { getOfficeAliasTokens, getOfficeShadowTokens } from './getOfficeTokens';
+import { AliasColorTokens, 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 createOfficeAliasTokensWorker(officeTheme: string): AliasColorTokens {
+function createOfficeColorAliasTokensWorker(officeTheme: string): AliasColorTokens {
   const aliasTokens = getOfficeAliasTokens(officeTheme);
   return mapPipelineToTheme(aliasTokens);
 }
 
-export const createOfficeAliasTokens = memoize(createOfficeAliasTokensWorker);
+export const createOfficeColorAliasTokens = memoize(createOfficeColorAliasTokensWorker);
+
+function createOfficeShadowAliasTokensWorker(officeTheme: string): ThemeShadowDefinition {
+  const aliasTokens = getOfficeShadowTokens(officeTheme);
+  return mapPipelineToShadow(aliasTokens);
+}
+
+export const createOfficeShadowAliasTokens = memoize(createOfficeShadowAliasTokensWorker);

package/src/createOfficeTheme.ts

@@ -4,9 +4,10 @@ import { getThemingModule } from './NativeModule/getThemingModule';
 import { CxxException, PlatformDefaultsChangedArgs } from './NativeModule/officeThemingModule';
 import { OfficePalette, Theme, ThemeOptions } from '@fluentui-react-native/theme-types';
 import { createPartialOfficeTheme } from './createPartialOfficeTheme';
-import { createOfficeAliasTokens } from './createOfficeAliasTokens';
+import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from './createOfficeAliasTokens';
 import { createBrandedThemeWithAlias } from './createBrandedThemeWithAlias';
 import { createAliasesFromPalette } from './createAliasesFromPalette';
+import { win32Typography } from './getThemeTypography';
 
 function handlePaletteCall(palette: OfficePalette | CxxException): OfficePalette | undefined {
   const exception = palette as CxxException;
@@ -39,7 +40,20 @@ export function createOfficeTheme(options: ThemeOptions = {}): ThemeReference {
         return {};
       }
 
-      return { colors: { ...createOfficeAliasTokens(ref.themeName) } };
+      return {
+        shadows: { ...createOfficeShadowAliasTokens(ref.themeName) },
+        typography: win32Typography(),
+      };
+    },
+    () => {
+      if (!ref.themeName || ref.themeName === '') {
+        return {};
+      }
+
+      return {
+        colors: { ...createOfficeColorAliasTokens(ref.themeName) },
+        typography: win32Typography(),
+      };
     },
     (theme: Theme) => {
       return createBrandedThemeWithAlias(ref.themeName, theme);
@@ -49,7 +63,10 @@ export function createOfficeTheme(options: ThemeOptions = {}): ThemeReference {
         return {};
       }
 
-      return { colors: createAliasesFromPalette(theme.host.palette, ref.themeName === 'HighContrast') };
+      return {
+        colors: createAliasesFromPalette(theme.host.palette, ref.themeName === 'HighContrast'),
+        typography: win32Typography(),
+      };
     },
   );
 

package/src/getOfficeTokens.ts

@@ -0,0 +1,36 @@
+import colorfulAliasTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json';
+import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json';
+import blackAliasTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json';
+import { hcAliasTokens } from './highContrast/tokens-alias';
+import colorfulShadowTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-shadow.json';
+import darkGrayShadowTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-shadow.json';
+import blackShadowTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-shadow.json';
+import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json';
+
+export function getOfficeAliasTokens(officeTheme: string) {
+  if (officeTheme === 'White' || officeTheme === 'Colorful') {
+    return colorfulAliasTokens;
+  } else if (officeTheme === 'DarkGray') {
+    return darkGrayAliasTokens;
+  } else if (officeTheme === 'Black') {
+    return blackAliasTokens;
+  } else if (officeTheme === 'HighContrast') {
+    return hcAliasTokens;
+  }
+
+  return colorfulAliasTokens;
+}
+
+export function getOfficeShadowTokens(officeTheme: string) {
+  if (officeTheme === 'White' || officeTheme === 'Colorful') {
+    return colorfulShadowTokens.shadow;
+  } else if (officeTheme === 'DarkGray') {
+    return darkGrayShadowTokens.shadow;
+  } else if (officeTheme === 'Black') {
+    return blackShadowTokens.shadow;
+  } else if (officeTheme === 'HighContrast') {
+    return hcShadowTokens.shadow;
+  }
+
+  return colorfulAliasTokens;
+}

package/src/getThemeTypography.ts

@@ -0,0 +1,38 @@
+import { Typography, Variants } from '@fluentui-react-native/theme-types';
+import { defaultFluentTheme } from '@fluentui-react-native/default-theme';
+import { createFontAliasTokens } from './createFontAliasTokens';
+
+export function win32Typography(): Typography {
+  const win32Dict = {
+    sizes: defaultFluentTheme.typography.sizes,
+    weights: defaultFluentTheme.typography.weights,
+    // hard coded until we support new fontFamily format
+    families: {
+      primary: 'Segoe UI',
+      secondary: 'Segoe UI Semibold',
+      cursive: 'System',
+      monospace: 'Consolas',
+      sansSerif: 'System',
+      serif: 'System',
+      numeric: 'Bahnschrift',
+    },
+    variants: {
+      captionStandard: { face: 'primary', size: 'caption', weight: 'regular' },
+      secondaryStandard: { face: 'primary', size: 'secondary', weight: 'regular' },
+      secondarySemibold: { face: 'primary', size: 'secondary', weight: 'semiBold' },
+      bodyStandard: { face: 'primary', size: 'body', weight: 'regular' },
+      bodySemibold: { face: 'primary', size: 'body', weight: 'semiBold' },
+      subheaderStandard: { face: 'primary', size: 'subheader', weight: 'regular' },
+      subheaderSemibold: { face: 'primary', size: 'subheader', weight: 'semiBold' },
+      headerStandard: { face: 'primary', size: 'header', weight: 'regular' },
+      headerSemibold: { face: 'primary', size: 'header', weight: 'semiBold' },
+      heroStandard: { face: 'primary', size: 'hero', weight: 'regular' },
+      heroSemibold: { face: 'primary', size: 'hero', weight: 'semiBold' },
+      heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: 'regular' },
+      heroLargeSemibold: { face: 'primary', size: 'heroLarge', weight: 'semiBold' },
+      ...createFontAliasTokens(),
+    } as Variants,
+  };
+
+  return win32Dict;
+}

package/src/index.ts

@@ -11,5 +11,7 @@ export type {
   PlatformDefaultsChangedCallback,
 } from './NativeModule/index';
 export { paletteFromOfficeColors } from './paletteFromOfficeColors';
-export { createOfficeAliasTokens } from './createOfficeAliasTokens';
+export { createOfficeColorAliasTokens as createOfficeAliasTokens } from './createOfficeAliasTokens';
+export { createFontAliasTokens } from './createFontAliasTokens';
 export { createBrandedThemeWithAlias, getCurrentBrandAliasTokens } from './createBrandedThemeWithAlias';
+export { win32Typography } from './getThemeTypography';

package/lib/getOfficeAliasTokens.d.ts

@@ -1,2 +0,0 @@
-export declare function getOfficeAliasTokens(officeTheme: string): any;
-//# sourceMappingURL=getOfficeAliasTokens.d.ts.map

package/lib/getOfficeAliasTokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getOfficeAliasTokens.d.ts","sourceRoot":"","sources":["../src/getOfficeAliasTokens.ts"],"names":[],"mappings":"AAKA,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,OAYvD"}

package/lib/getOfficeAliasTokens.js

@@ -1,20 +0,0 @@
-import colorfulAliasTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json';
-import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json';
-import blackAliasTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json';
-import { hcAliasTokens } from './highContrast/tokens-alias';
-export function getOfficeAliasTokens(officeTheme) {
-    if (officeTheme === 'White' || officeTheme === 'Colorful') {
-        return colorfulAliasTokens;
-    }
-    else if (officeTheme === 'DarkGray') {
-        return darkGrayAliasTokens;
-    }
-    else if (officeTheme === 'Black') {
-        return blackAliasTokens;
-    }
-    else if (officeTheme === 'HighContrast') {
-        return hcAliasTokens;
-    }
-    return colorfulAliasTokens;
-}
-//# sourceMappingURL=getOfficeAliasTokens.js.map

package/lib/getOfficeAliasTokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getOfficeAliasTokens.js","sourceRoot":"","sources":["../src/getOfficeAliasTokens.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,yEAAyE,CAAC;AAC1G,OAAO,mBAAmB,MAAM,yEAAyE,CAAC;AAC1G,OAAO,gBAAgB,MAAM,sEAAsE,CAAC;AACpG,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,MAAM,UAAU,oBAAoB,CAAC,WAAmB;IACtD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE;QACzD,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE;QACrC,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE;QAClC,OAAO,gBAAgB,CAAC;KACzB;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE;QACzC,OAAO,aAAa,CAAC;KACtB;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC"}

package/lib-commonjs/getOfficeAliasTokens.d.ts

@@ -1,2 +0,0 @@
-export declare function getOfficeAliasTokens(officeTheme: string): any;
-//# sourceMappingURL=getOfficeAliasTokens.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"getOfficeAliasTokens.d.ts","sourceRoot":"","sources":["../src/getOfficeAliasTokens.ts"],"names":[],"mappings":"AAKA,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,OAYvD"}

package/lib-commonjs/getOfficeAliasTokens.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOfficeAliasTokens = void 0;
-var tslib_1 = require("tslib");
-var tokens_aliases_json_1 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json"));
-var tokens_aliases_json_2 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json"));
-var tokens_aliases_json_3 = (0, tslib_1.__importDefault)(require("@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json"));
-var tokens_alias_1 = require("./highContrast/tokens-alias");
-function getOfficeAliasTokens(officeTheme) {
-    if (officeTheme === 'White' || officeTheme === 'Colorful') {
-        return tokens_aliases_json_1.default;
-    }
-    else if (officeTheme === 'DarkGray') {
-        return tokens_aliases_json_2.default;
-    }
-    else if (officeTheme === 'Black') {
-        return tokens_aliases_json_3.default;
-    }
-    else if (officeTheme === 'HighContrast') {
-        return tokens_alias_1.hcAliasTokens;
-    }
-    return tokens_aliases_json_1.default;
-}
-exports.getOfficeAliasTokens = getOfficeAliasTokens;
-//# sourceMappingURL=getOfficeAliasTokens.js.map

package/lib-commonjs/getOfficeAliasTokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getOfficeAliasTokens.js","sourceRoot":"","sources":["../src/getOfficeAliasTokens.ts"],"names":[],"mappings":";;;;AAAA,6IAA0G;AAC1G,6IAA0G;AAC1G,0IAAoG;AACpG,4DAA4D;AAE5D,SAAgB,oBAAoB,CAAC,WAAmB;IACtD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE;QACzD,OAAO,6BAAmB,CAAC;KAC5B;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE;QACrC,OAAO,6BAAmB,CAAC;KAC5B;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE;QAClC,OAAO,6BAAgB,CAAC;KACzB;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE;QACzC,OAAO,4BAAa,CAAC;KACtB;IAED,OAAO,6BAAmB,CAAC;AAC7B,CAAC;AAZD,oDAYC"}

package/src/getOfficeAliasTokens.ts

@@ -1,18 +0,0 @@
-import colorfulAliasTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json';
-import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json';
-import blackAliasTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json';
-import { hcAliasTokens } from './highContrast/tokens-alias';
-
-export function getOfficeAliasTokens(officeTheme: string) {
-  if (officeTheme === 'White' || officeTheme === 'Colorful') {
-    return colorfulAliasTokens;
-  } else if (officeTheme === 'DarkGray') {
-    return darkGrayAliasTokens;
-  } else if (officeTheme === 'Black') {
-    return blackAliasTokens;
-  } else if (officeTheme === 'HighContrast') {
-    return hcAliasTokens;
-  }
-
-  return colorfulAliasTokens;
-}