@fluentui-react-native/apple-theme 0.17.8 → 0.18.0

package/src/__tests__/apple-theme.test.ts

@@ -1,9 +1,14 @@
-import { createAppleTheme } from '../createAppleTheme';
 import { createMacOSColorAliasTokens, createMacOSShadowAliasTokens } from '../createMacOSAliasTokens';
 import { getIsHighContrast, setIsHighContrast } from '../appleHighContrast.macos';
 import { AppearanceOptions } from '@fluentui-react-native/theme-types';
+import { createAppleTheme } from '../createAppleTheme';
+
+// For some reason the automatically mocked AccessibilityInfo object is the react-native version, not the
+// react-native-macos version, which doesn't contain the isHighContrastEnabled function that is accessed in
+// createAppleTheme. Use the actual module instead
+jest.dontMock('react-native-macos/Libraries/Components/AccessibilityInfo/AccessibilityInfo');
 
-const macOsAliasTokensTable: [AppearanceOptions, boolean][] = [
+const macOSAliasTokensTable: [AppearanceOptions, boolean][] = [
   ['light', true],
   ['light', false],
   ['dark', true],
@@ -23,7 +28,7 @@ it('IsHighContrast test', () => {
   expect(getIsHighContrast()).toBe(true);
 });
 
-it.concurrent.each(macOsAliasTokensTable)(
+it.concurrent.each(macOSAliasTokensTable)(
   'createMacOSColorAliasTokens test mode: %s, isHighContrast: %p',
   async (mode: AppearanceOptions, isHighContrast: boolean) => {
     if (mode === 'highContrast') {
@@ -34,7 +39,7 @@ it.concurrent.each(macOsAliasTokensTable)(
   },
 );
 
-it.concurrent.each(macOsAliasTokensTable)(
+it.concurrent.each(macOSAliasTokensTable)(
   'createMacOSShadowAliasTokens test mode: %s, isHighContrast: %p',
   async (mode: AppearanceOptions, isHighContrast: boolean) => {
     if (mode === 'highContrast') {

package/src/appleColors.ios.ts

@@ -1,5 +1,8 @@
 import { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+import { Appearance } from 'react-native';
 import { ApplePalette } from './appleColors.types.ios';
+import { createiOSColorAliasTokens } from './createiOSAliasTokens';
 
 function getFluentUIAppleLightPalette(): ApplePalette {
   return {
@@ -215,7 +218,14 @@ function getFluentUIAppleDarkPalette(): ApplePalette {
 export function paletteFromAppleColors(isLightMode: boolean): ThemeColorDefinition {
   const fluentApple = isLightMode ? getFluentUIAppleLightPalette() : getFluentUIAppleDarkPalette();
 
+  const appearance = Appearance.getColorScheme();
+  const mode = getCurrentAppearance(appearance, 'light');
+
   return {
+    /* Color Alias Tokens */
+
+    ...createiOSColorAliasTokens(mode),
+
     /* PaletteBackgroundColors & PaletteTextColors */
 
     background: fluentApple.surfacePrimary,

package/src/createiOSAliasTokens.ts

@@ -1,11 +1,18 @@
-import { getiOSShadowTokens } from './getiOSTokens';
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-import { mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
+import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens';
+import { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types';
+import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
 import { memoize } from '@fluentui-react-native/memo-cache';
 import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types';
 
+function createiOSColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
+  const aliasTokens = getAliasTokens(mode);
+  return mapPipelineToTheme(aliasTokens);
+}
+
+export const createiOSColorAliasTokens = memoize(createiOSColorAliasTokensWorker);
+
 function createiOSShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition {
-  const aliasTokens = getiOSShadowTokens(mode);
+  const aliasTokens = getShadowTokens(mode);
   return mapPipelineToShadow(aliasTokens);
 }
 

package/lib/getiOSTokens.d.ts

@@ -1,76 +0,0 @@
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-export declare function getiOSShadowTokens(mode: AppearanceOptions): {
-    shadow16: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow2: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow28: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow4: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow64: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow8: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand16: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand2: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand28: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand4: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand64: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand8: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-};
-//# sourceMappingURL=getiOSTokens.d.ts.map

package/lib/getiOSTokens.d.ts.map

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

package/lib/getiOSTokens.js

@@ -1,18 +0,0 @@
-import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json';
-import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json';
-import { assertNever } from 'assert-never';
-export function getiOSShadowTokens(mode) {
-    if (mode === 'light') {
-        return iOSLightShadowTokens;
-    }
-    else if (mode === 'dark') {
-        return iOSDarkShadowTokens;
-    }
-    else if (mode === 'highContrast') {
-        throw new Error('highContrast is not a valid AppearanceOptions on iOS');
-    }
-    else {
-        assertNever(mode);
-    }
-}
-//# sourceMappingURL=getiOSTokens.js.map

package/lib/getiOSTokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getiOSTokens.js","sourceRoot":"","sources":["../src/getiOSTokens.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,MAAM,mEAAmE,CAAC;AACrG,OAAO,mBAAmB,MAAM,kEAAkE,CAAC;AAEnG,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,UAAU,kBAAkB,CAAC,IAAuB;IACxD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,oBAAoB,CAAC;KAC7B;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,mBAAmB,CAAC;KAC5B;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;KACzE;SAAM;QACL,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;AACH,CAAC"}

package/lib-commonjs/getiOSTokens.d.ts

@@ -1,76 +0,0 @@
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-export declare function getiOSShadowTokens(mode: AppearanceOptions): {
-    shadow16: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow2: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow28: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow4: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow64: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadow8: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand16: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand2: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand28: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand4: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand64: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-    shadowBrand8: {
-        x: number;
-        y: number;
-        blur: number;
-        color: string;
-    }[];
-};
-//# sourceMappingURL=getiOSTokens.d.ts.map

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

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

package/lib-commonjs/getiOSTokens.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getiOSShadowTokens = void 0;
-var tokens_shadow_json_1 = __importDefault(require("@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json"));
-var tokens_shadow_json_2 = __importDefault(require("@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json"));
-var assert_never_1 = require("assert-never");
-function getiOSShadowTokens(mode) {
-    if (mode === 'light') {
-        return tokens_shadow_json_1.default;
-    }
-    else if (mode === 'dark') {
-        return tokens_shadow_json_2.default;
-    }
-    else if (mode === 'highContrast') {
-        throw new Error('highContrast is not a valid AppearanceOptions on iOS');
-    }
-    else {
-        (0, assert_never_1.assertNever)(mode);
-    }
-}
-exports.getiOSShadowTokens = getiOSShadowTokens;
-//# sourceMappingURL=getiOSTokens.js.map

package/lib-commonjs/getiOSTokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getiOSTokens.js","sourceRoot":"","sources":["../src/getiOSTokens.ts"],"names":[],"mappings":";;;;;;AAAA,yHAAqG;AACrG,wHAAmG;AAEnG,6CAA2C;AAE3C,SAAgB,kBAAkB,CAAC,IAAuB;IACxD,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,OAAO,4BAAoB,CAAC;KAC7B;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,4BAAmB,CAAC;KAC5B;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE;QAClC,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;KACzE;SAAM;QACL,IAAA,0BAAW,EAAC,IAAI,CAAC,CAAC;KACnB;AACH,CAAC;AAVD,gDAUC"}

package/src/getiOSTokens.ts

@@ -1,16 +0,0 @@
-import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json';
-import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json';
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-import { assertNever } from 'assert-never';
-
-export function getiOSShadowTokens(mode: AppearanceOptions) {
-  if (mode === 'light') {
-    return iOSLightShadowTokens;
-  } else if (mode === 'dark') {
-    return iOSDarkShadowTokens;
-  } else if (mode === 'highContrast') {
-    throw new Error('highContrast is not a valid AppearanceOptions on iOS');
-  } else {
-    assertNever(mode);
-  }
-}