@fluentui-react-native/default-theme 0.27.4 → 0.27.6

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

@@ -1,4 +1,4 @@
-import type { ThemeOptions, AppearanceOptions } from '@fluentui-react-native/theme-types';
+import type { ThemeOptions, AppearanceOptions } from '@fluentui-react-native/design/theming';
 
 import { createColorAliasTokens, createShadowAliasTokens } from '../createAliasTokens';
 import { createDefaultTheme } from '../createDefaultTheme';

package/src/__tests__/defaultThemes.test.android.ts

@@ -0,0 +1,13 @@
+import { defaultFluentTheme, defaultFluentDarkTheme, defaultFluentHighConstrastTheme } from '../defaultTheme';
+
+it('defaultFluentTheme', () => {
+  expect(defaultFluentTheme).toMatchSnapshot();
+});
+
+it('defaultFluentDarkTheme', () => {
+  expect(defaultFluentDarkTheme).toMatchSnapshot();
+});
+
+it('defaultFluentHighConstrastTheme', () => {
+  expect(defaultFluentHighConstrastTheme).toMatchSnapshot();
+});

package/src/__tests__/defaultThemes.test.ios.ts

@@ -0,0 +1,13 @@
+import { defaultFluentTheme, defaultFluentDarkTheme, defaultFluentHighConstrastTheme } from '../defaultTheme';
+
+it('defaultFluentTheme', () => {
+  expect(defaultFluentTheme).toMatchSnapshot();
+});
+
+it('defaultFluentDarkTheme', () => {
+  expect(defaultFluentDarkTheme).toMatchSnapshot();
+});
+
+it('defaultFluentHighConstrastTheme', () => {
+  expect(defaultFluentHighConstrastTheme).toMatchSnapshot();
+});

package/src/__tests__/defaultThemes.test.macos.ts

@@ -0,0 +1,13 @@
+import { defaultFluentTheme, defaultFluentDarkTheme, defaultFluentHighConstrastTheme } from '../defaultTheme';
+
+it('defaultFluentTheme', () => {
+  expect(defaultFluentTheme).toMatchSnapshot();
+});
+
+it('defaultFluentDarkTheme', () => {
+  expect(defaultFluentDarkTheme).toMatchSnapshot();
+});
+
+it('defaultFluentHighConstrastTheme', () => {
+  expect(defaultFluentHighConstrastTheme).toMatchSnapshot();
+});

package/src/__tests__/defaultThemes.test.win32.ts

@@ -0,0 +1,13 @@
+import { defaultFluentTheme, defaultFluentDarkTheme, defaultFluentHighConstrastTheme } from '../defaultTheme';
+
+it('defaultFluentTheme', () => {
+  expect(defaultFluentTheme).toMatchSnapshot();
+});
+
+it('defaultFluentDarkTheme', () => {
+  expect(defaultFluentDarkTheme).toMatchSnapshot();
+});
+
+it('defaultFluentHighConstrastTheme', () => {
+  expect(defaultFluentHighConstrastTheme).toMatchSnapshot();
+});

package/src/__tests__/defaultThemes.test.windows.ts

@@ -0,0 +1,13 @@
+import { defaultFluentTheme, defaultFluentDarkTheme, defaultFluentHighConstrastTheme } from '../defaultTheme';
+
+it('defaultFluentTheme', () => {
+  expect(defaultFluentTheme).toMatchSnapshot();
+});
+
+it('defaultFluentDarkTheme', () => {
+  expect(defaultFluentDarkTheme).toMatchSnapshot();
+});
+
+it('defaultFluentHighConstrastTheme', () => {
+  expect(defaultFluentHighConstrastTheme).toMatchSnapshot();
+});

package/src/createAliasTokens.ts

@@ -1,6 +1,6 @@
 import { memoize } from '@fluentui-react-native/framework-base';
 import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens';
-import type { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/theme-types';
+import type { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/design/theming';
 import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
 
 function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {

package/src/createDefaultTheme.ts

@@ -1,8 +1,8 @@
 import { Appearance } from 'react-native';
 
-import { ThemeReference } from '@fluentui-react-native/theme';
-import type { Theme, ThemeOptions } from '@fluentui-react-native/theme-types';
-import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+import { ThemeReference } from '@fluentui-react-native/design/theming';
+import type { Theme, ThemeOptions } from '@fluentui-react-native/design/theming';
+import { getCurrentAppearance } from '@fluentui-react-native/design/theming';
 import assertNever from 'assert-never';
 
 import { defaultFluentDarkTheme, defaultFluentHighConstrastTheme, defaultFluentTheme } from './defaultTheme';

package/src/defaultColors.ts

@@ -1,4 +1,4 @@
-import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/design/theming';
 
 import { createColorAliasTokens } from './createAliasTokens';
 

package/src/defaultTheme.ts

@@ -1,7 +1,8 @@
 import { Platform } from 'react-native';
 
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import type { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } from '@fluentui-react-native/theme-types';
+import type { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } from '@fluentui-react-native/design/theming';
+import { fontWeightRegular, fontWeightSemibold } from '@fluentui-react-native/design/tokens/global';
 
 import { createShadowAliasTokens } from './createAliasTokens';
 import { getStockWebHCPalette } from './defaultColors';
@@ -19,8 +20,8 @@ function _defaultTypography(): Typography {
       heroLarge: globalTokens.font.size900 as FontSize,
     } as FontSizes,
     weights: {
-      regular: globalTokens.font.weight.regular as FontWeightValue,
-      semiBold: globalTokens.font.weight.semibold as FontWeightValue,
+      regular: fontWeightRegular as FontWeightValue,
+      semiBold: fontWeightSemibold as FontWeightValue,
     },
     families: {
       primary: 'Segoe UI',

package/src/stockWebPalette.macos.ts

@@ -1,5 +1,6 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import type { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import type { ThemeColorDefinition } from '@fluentui-react-native/design/theming';
+import { colorBlack, colorBurgundyPrimary, colorRedPrimary, colorWhite } from '@fluentui-react-native/design/tokens/global';
 
 import { createColorAliasTokens } from './createAliasTokens';
 import { paletteFromFabricColors } from './defaultColors';
@@ -7,7 +8,7 @@ import { paletteFromFabricColors } from './defaultColors';
 export function getStockWebPalette(): ThemeColorDefinition {
   return {
     ...paletteFromFabricColors({
-      black: globalTokens.color.black,
+      black: colorBlack,
       neutralDark: '#201f1e',
       neutralPrimary: '#323130',
       neutralPrimaryAlt: '#3b3a39',
@@ -20,10 +21,10 @@ export function getStockWebPalette(): ThemeColorDefinition {
       neutralLight: '#edebe9',
       neutralLighter: '#f3f2f1',
       neutralLighterAlt: '#faf9f8',
-      white: globalTokens.color.white,
+      white: colorWhite,
       // Shared Colors
-      red: globalTokens.color.red.primary,
-      redDark: globalTokens.color.burgundy.primary,
+      red: colorRedPrimary,
+      redDark: colorBurgundyPrimary,
 
       themeDarker: globalTokens.color.brand.shade40,
       themeDark: globalTokens.color.brand.shade20,
@@ -55,7 +56,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
         themeLight: globalTokens.color.brand.shade30,
         themeLighter: globalTokens.color.brand.shade50,
         themeLighterAlt: globalTokens.color.brand.shade60,
-        black: globalTokens.color.white,
+        black: colorWhite,
         neutralDark: '#faf9f8',
         neutralPrimary: '#f3f2f1',
         neutralPrimaryAlt: '#c8c6c4',
@@ -69,7 +70,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
         neutralLighter: '#252423',
         neutralLighterAlt: '#201f1e',
         white: '#1b1a19',
-        red: globalTokens.color.red.primary,
+        red: colorRedPrimary,
         accent: globalTokens.color.brand.primary,
         redDark: '#f1707b',
         blackTranslucent40: 'rgba(0,0,0,.4)',

package/src/stockWebPalette.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import type { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import type { ThemeColorDefinition } from '@fluentui-react-native/design/theming';
+import { colorBlack, colorBurgundyPrimary, colorRedPrimary, colorWhite } from '@fluentui-react-native/design/tokens/global';
 
 import { createColorAliasTokens } from './createAliasTokens';
 import { paletteFromFabricColors } from './defaultColors';
@@ -8,7 +9,7 @@ import { paletteFromFabricColors } from './defaultColors';
 export function getStockWebPalette(): ThemeColorDefinition {
   return {
     ...paletteFromFabricColors({
-      black: globalTokens.color.black,
+      black: colorBlack,
       neutralDark: '#201f1e',
       neutralPrimary: '#323130',
       neutralPrimaryAlt: '#3b3a39',
@@ -21,10 +22,10 @@ export function getStockWebPalette(): ThemeColorDefinition {
       neutralLight: '#edebe9',
       neutralLighter: '#f3f2f1',
       neutralLighterAlt: '#faf9f8',
-      white: globalTokens.color.white,
+      white: colorWhite,
       // Shared Colors
-      red: globalTokens.color.red.primary,
-      redDark: globalTokens.color.burgundy.primary,
+      red: colorRedPrimary,
+      redDark: colorBurgundyPrimary,
 
       // @ts-expect-error
       accent: globalTokens.color.brand80,
@@ -59,7 +60,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
     ...paletteFromFabricColors(
       {
         // colors taken from fluentui DarkCustomizations.ts
-        black: globalTokens.color.white,
+        black: colorWhite,
         neutralDark: '#faf9f8',
         neutralPrimary: '#f3f2f1',
         neutralPrimaryAlt: '#c8c6c4',
@@ -73,7 +74,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
         neutralLighter: '#252423',
         neutralLighterAlt: '#201f1e',
         white: '#1b1a19',
-        red: globalTokens.color.red.primary,
+        red: colorRedPrimary,
         // @ts-expect-error
         accent: globalTokens.color.brand40,
         redDark: '#f1707b',

package/src/stockWebPalette.win32.ts

@@ -1,5 +1,6 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import type { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import type { ThemeColorDefinition } from '@fluentui-react-native/design/theming';
+import { colorBlack, colorBurgundyPrimary, colorRedPrimary, colorWhite } from '@fluentui-react-native/design/tokens/global';
 
 import { createColorAliasTokens } from './createAliasTokens';
 import { paletteFromFabricColors } from './defaultColors';
@@ -7,7 +8,7 @@ import { paletteFromFabricColors } from './defaultColors';
 export function getStockWebPalette(): ThemeColorDefinition {
   return {
     ...paletteFromFabricColors({
-      black: globalTokens.color.black,
+      black: colorBlack,
       neutralDark: '#201f1e',
       neutralPrimary: '#323130',
       neutralPrimaryAlt: '#3b3a39',
@@ -20,10 +21,10 @@ export function getStockWebPalette(): ThemeColorDefinition {
       neutralLight: '#edebe9',
       neutralLighter: '#f3f2f1',
       neutralLighterAlt: '#faf9f8',
-      white: globalTokens.color.white,
+      white: colorWhite,
       // Shared Colors
-      red: globalTokens.color.red.primary,
-      redDark: globalTokens.color.burgundy.primary,
+      red: colorRedPrimary,
+      redDark: colorBurgundyPrimary,
 
       themeDarker: globalTokens.color.brand.shade40,
       themeDark: globalTokens.color.brand.shade20,
@@ -55,7 +56,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
         themeLight: globalTokens.color.brand.shade30,
         themeLighter: globalTokens.color.brand.shade50,
         themeLighterAlt: globalTokens.color.brand.shade60,
-        black: globalTokens.color.white,
+        black: colorWhite,
         neutralDark: '#faf9f8',
         neutralPrimary: '#f3f2f1',
         neutralPrimaryAlt: '#c8c6c4',
@@ -69,7 +70,7 @@ export function getStockWebDarkPalette(): ThemeColorDefinition {
         neutralLighter: '#252423',
         neutralLighterAlt: '#201f1e',
         white: '#1b1a19',
-        red: globalTokens.color.red.primary,
+        red: colorRedPrimary,
         accent: globalTokens.color.brand.primary,
         redDark: '#f1707b',
         blackTranslucent40: 'rgba(0,0,0,.4)',