@fluentui-react-native/apple-theme 0.29.0 → 0.29.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/README.md +1 -1
  3. package/lib/__tests__/apple-theme.test.d.ts +1 -1
  4. package/lib/__tests__/apple-theme.test.js +41 -42
  5. package/lib/appleColors.ios.d.ts +1 -1
  6. package/lib/appleColors.ios.js +174 -174
  7. package/lib/appleColors.macos.d.ts +1 -1
  8. package/lib/appleColors.macos.d.ts.map +1 -1
  9. package/lib/appleColors.macos.js +367 -369
  10. package/lib/appleColors.macos.js.map +1 -1
  11. package/lib/appleColors.types.ios.d.ts +15 -15
  12. package/lib/appleColors.types.ios.js +1 -1
  13. package/lib/appleColors.types.macos.d.ts +146 -146
  14. package/lib/appleColors.types.macos.js +1 -1
  15. package/lib/appleHighContrast.macos.d.ts +1 -1
  16. package/lib/appleHighContrast.macos.js +3 -3
  17. package/lib/appleShadows.ios.d.ts +1 -1
  18. package/lib/appleShadows.ios.js +4 -4
  19. package/lib/appleShadows.macos.d.ts +1 -1
  20. package/lib/appleShadows.macos.js +2 -2
  21. package/lib/appleTheme.ios.d.ts +1 -1
  22. package/lib/appleTheme.ios.js +122 -122
  23. package/lib/appleTheme.macos.d.ts +53 -53
  24. package/lib/appleTheme.macos.js +68 -68
  25. package/lib/appleTypography.ios.d.ts +1 -1
  26. package/lib/appleTypography.ios.js +50 -50
  27. package/lib/appleTypography.macos.d.ts +2 -2
  28. package/lib/appleTypography.macos.js +63 -63
  29. package/lib/createAppleTheme.d.ts +1 -1
  30. package/lib/createAppleTheme.ios.d.ts +1 -1
  31. package/lib/createAppleTheme.ios.js +14 -14
  32. package/lib/createAppleTheme.js +3 -3
  33. package/lib/createAppleTheme.macos.d.ts +1 -1
  34. package/lib/createAppleTheme.macos.d.ts.map +1 -1
  35. package/lib/createAppleTheme.macos.js +19 -23
  36. package/lib/createAppleTheme.macos.js.map +1 -1
  37. package/lib/createFontAliasTokens.ios.d.ts +1 -1
  38. package/lib/createFontAliasTokens.ios.js +2 -2
  39. package/lib/createMacOSAliasTokens.d.ts +1 -1
  40. package/lib/createMacOSAliasTokens.js +5 -5
  41. package/lib/createiOSAliasTokens.d.ts +1 -1
  42. package/lib/createiOSAliasTokens.js +5 -5
  43. package/lib/getMacOSTokens.d.ts +435 -443
  44. package/lib/getMacOSTokens.js +45 -35
  45. package/lib/index.d.ts +1 -1
  46. package/lib/index.js +1 -1
  47. package/lib-commonjs/__tests__/apple-theme.test.d.ts +1 -1
  48. package/lib-commonjs/__tests__/apple-theme.test.js +46 -47
  49. package/lib-commonjs/appleColors.ios.d.ts +1 -1
  50. package/lib-commonjs/appleColors.ios.js +180 -180
  51. package/lib-commonjs/appleColors.macos.d.ts +1 -1
  52. package/lib-commonjs/appleColors.macos.d.ts.map +1 -1
  53. package/lib-commonjs/appleColors.macos.js +372 -380
  54. package/lib-commonjs/appleColors.macos.js.map +1 -1
  55. package/lib-commonjs/appleColors.types.ios.d.ts +15 -15
  56. package/lib-commonjs/appleColors.types.ios.js +3 -3
  57. package/lib-commonjs/appleColors.types.macos.d.ts +146 -146
  58. package/lib-commonjs/appleColors.types.macos.js +3 -3
  59. package/lib-commonjs/appleHighContrast.macos.d.ts +1 -1
  60. package/lib-commonjs/appleHighContrast.macos.js +6 -6
  61. package/lib-commonjs/appleShadows.ios.d.ts +1 -1
  62. package/lib-commonjs/appleShadows.ios.js +9 -9
  63. package/lib-commonjs/appleShadows.macos.d.ts +1 -1
  64. package/lib-commonjs/appleShadows.macos.js +6 -6
  65. package/lib-commonjs/appleTheme.ios.d.ts +1 -1
  66. package/lib-commonjs/appleTheme.ios.js +128 -128
  67. package/lib-commonjs/appleTheme.macos.d.ts +53 -53
  68. package/lib-commonjs/appleTheme.macos.js +74 -74
  69. package/lib-commonjs/appleTypography.ios.d.ts +1 -1
  70. package/lib-commonjs/appleTypography.ios.js +53 -53
  71. package/lib-commonjs/appleTypography.macos.d.ts +2 -2
  72. package/lib-commonjs/appleTypography.macos.js +65 -65
  73. package/lib-commonjs/createAppleTheme.d.ts +1 -1
  74. package/lib-commonjs/createAppleTheme.ios.d.ts +1 -1
  75. package/lib-commonjs/createAppleTheme.ios.js +20 -20
  76. package/lib-commonjs/createAppleTheme.js +7 -7
  77. package/lib-commonjs/createAppleTheme.macos.d.ts +1 -1
  78. package/lib-commonjs/createAppleTheme.macos.d.ts.map +1 -1
  79. package/lib-commonjs/createAppleTheme.macos.js +27 -31
  80. package/lib-commonjs/createAppleTheme.macos.js.map +1 -1
  81. package/lib-commonjs/createFontAliasTokens.ios.d.ts +1 -1
  82. package/lib-commonjs/createFontAliasTokens.ios.js +10 -12
  83. package/lib-commonjs/createMacOSAliasTokens.d.ts +1 -1
  84. package/lib-commonjs/createMacOSAliasTokens.js +10 -10
  85. package/lib-commonjs/createiOSAliasTokens.d.ts +1 -1
  86. package/lib-commonjs/createiOSAliasTokens.js +10 -10
  87. package/lib-commonjs/getMacOSTokens.d.ts +435 -443
  88. package/lib-commonjs/getMacOSTokens.js +59 -51
  89. package/lib-commonjs/index.d.ts +1 -1
  90. package/lib-commonjs/index.js +10 -30
  91. package/package.json +27 -26
  92. package/src/appleColors.macos.ts +0 -2
  93. package/src/appleTypography.macos.ts +1 -1
  94. package/src/createAppleTheme.macos.ts +0 -4
  95. package/eslint.config.js +0 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,49 @@
1
1
  # Change Log - @fluentui-react-native/apple-theme
2
2
 
3
+ ## 0.29.3
4
+
5
+ ### Patch Changes
6
+
7
+ - 9cf4444: Migrate from ESLint to oxlint
8
+ - Updated dependencies [9cf4444]
9
+ - @fluentui-react-native/experimental-appearance-additions@0.8.3
10
+ - @fluentui-react-native/default-theme@0.27.3
11
+ - @fluentui-react-native/theming-utils@0.27.3
12
+ - @fluentui-react-native/theme-tokens@0.28.3
13
+ - @fluentui-react-native/theme-types@0.44.3
14
+ - @fluentui-react-native/theme@0.12.3
15
+ - @fluentui-react-native/framework-base@0.3.3
16
+
17
+ ## 0.29.2
18
+
19
+ ### Patch Changes
20
+
21
+ - 8a7b549: Update to the latest rnx-kit versions, fix some typing issues, and correct the vscode settings
22
+ - Updated dependencies [8a7b549]
23
+ - @fluentui-react-native/experimental-appearance-additions@0.8.2
24
+ - @fluentui-react-native/default-theme@0.27.2
25
+ - @fluentui-react-native/theming-utils@0.27.2
26
+ - @fluentui-react-native/theme-tokens@0.28.2
27
+ - @fluentui-react-native/theme-types@0.44.2
28
+ - @fluentui-react-native/theme@0.12.2
29
+ - @fluentui-react-native/framework-base@0.3.2
30
+
31
+ ## 0.29.1
32
+
33
+ ### Patch Changes
34
+
35
+ - 0d6e9c1: chore: migrate to `oxfmt`
36
+ - ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
37
+ - Updated dependencies [0d6e9c1]
38
+ - Updated dependencies [ac6e7af]
39
+ - @fluentui-react-native/experimental-appearance-additions@0.8.1
40
+ - @fluentui-react-native/default-theme@0.27.1
41
+ - @fluentui-react-native/theming-utils@0.27.1
42
+ - @fluentui-react-native/theme-tokens@0.28.1
43
+ - @fluentui-react-native/theme-types@0.44.1
44
+ - @fluentui-react-native/theme@0.12.1
45
+ - @fluentui-react-native/framework-base@0.3.1
46
+
3
47
  ## 0.29.0
4
48
 
5
49
  ### Minor Changes
package/README.md CHANGED
@@ -9,4 +9,4 @@ Some heuristics followed in this theme:
9
9
  - For most tokens, we default to prefer the apple system colors, using the FluentUI Apple Palette where it makes sense. These mappings are subject to change as we increment on the design.
10
10
  - On apple platforms, there tends to not be a "hover" state for components such as Button, so those tokens are mapped to be identical to the rest state (normal state) tokens.
11
11
  - Similarly, there is not a "checked" state for most components, so those tokens are mapped to the rest state tokens.
12
- - The typography is designed to match the variants provided by the [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/foundations/typography/) for regular and "emphasized". As such, the "Semibold" variants do not always map to the semibold weight, but whatever weight the Apple HIG specifies.
12
+ - The typography is designed to match the variants provided by the [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/typography/) for regular and "emphasized". As such, the "Semibold" variants do not always map to the semibold weight, but whatever weight the Apple HIG specifies.
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=apple-theme.test.d.ts.map
2
+ //# sourceMappingURL=apple-theme.test.d.ts.map
@@ -2,56 +2,55 @@ import { getIsHighContrast, setIsHighContrast } from '../appleHighContrast.macos
2
2
  import { createAppleTheme } from '../createAppleTheme';
3
3
  import { createMacOSColorAliasTokens, createMacOSShadowAliasTokens } from '../createMacOSAliasTokens';
4
4
  jest.mock('react-native-macos/Libraries/Components/AccessibilityInfo/AccessibilityInfo', () => ({
5
- __esModule: true,
6
- default: {
7
- addEventListener: jest.fn(),
8
- announceForAccessibility: jest.fn(),
9
- isAccessibilityServiceEnabled: jest.fn(),
10
- isBoldTextEnabled: jest.fn(),
11
- isGrayscaleEnabled: jest.fn(),
12
- isInvertColorsEnabled: jest.fn(),
13
- isReduceMotionEnabled: jest.fn(),
14
- prefersCrossFadeTransitions: jest.fn(),
15
- isReduceTransparencyEnabled: jest.fn(),
16
- isScreenReaderEnabled: jest.fn(() => Promise.resolve(false)),
17
- setAccessibilityFocus: jest.fn(),
18
- sendAccessibilityEvent: jest.fn(),
19
- getRecommendedTimeoutMillis: jest.fn(),
20
- isHighContrastEnabled: () => Promise.resolve(false),
21
- },
5
+ __esModule: true,
6
+ default: {
7
+ addEventListener: jest.fn(),
8
+ announceForAccessibility: jest.fn(),
9
+ isAccessibilityServiceEnabled: jest.fn(),
10
+ isBoldTextEnabled: jest.fn(),
11
+ isGrayscaleEnabled: jest.fn(),
12
+ isInvertColorsEnabled: jest.fn(),
13
+ isReduceMotionEnabled: jest.fn(),
14
+ prefersCrossFadeTransitions: jest.fn(),
15
+ isReduceTransparencyEnabled: jest.fn(),
16
+ isScreenReaderEnabled: jest.fn(() => Promise.resolve(false)),
17
+ setAccessibilityFocus: jest.fn(),
18
+ sendAccessibilityEvent: jest.fn(),
19
+ getRecommendedTimeoutMillis: jest.fn(),
20
+ isHighContrastEnabled: () => Promise.resolve(false),
21
+ },
22
22
  }));
23
23
  const macOSAliasTokensTable = [
24
- ['light', true],
25
- ['light', false],
26
- ['dark', true],
27
- ['dark', false],
28
- ['highContrast', null],
24
+ ['light', true],
25
+ ['light', false],
26
+ ['dark', true],
27
+ ['dark', false],
28
+ ['highContrast', null],
29
29
  ];
30
30
  it('createAppleTheme test', () => {
31
- const appleTheme = createAppleTheme().theme;
32
- expect(appleTheme).toMatchSnapshot();
31
+ const appleTheme = createAppleTheme().theme;
32
+ expect(appleTheme).toMatchSnapshot();
33
33
  });
34
34
  it('IsHighContrast test', () => {
35
- setIsHighContrast(false);
36
- expect(getIsHighContrast()).toBe(false);
37
- setIsHighContrast(true);
38
- expect(getIsHighContrast()).toBe(true);
35
+ setIsHighContrast(false);
36
+ expect(getIsHighContrast()).toBe(false);
37
+ setIsHighContrast(true);
38
+ expect(getIsHighContrast()).toBe(true);
39
39
  });
40
40
  it.concurrent.each(macOSAliasTokensTable)('createMacOSColorAliasTokens test mode: %s, isHighContrast: %p', async (mode, isHighContrast) => {
41
- if (mode === 'highContrast') {
42
- expect(() => createMacOSColorAliasTokens(mode, isHighContrast)).toThrow();
43
- } else {
44
- expect(createMacOSColorAliasTokens(mode, isHighContrast)).toMatchSnapshot();
45
- }
41
+ if (mode === 'highContrast') {
42
+ expect(() => createMacOSColorAliasTokens(mode, isHighContrast)).toThrow();
43
+ }
44
+ else {
45
+ expect(createMacOSColorAliasTokens(mode, isHighContrast)).toMatchSnapshot();
46
+ }
46
47
  });
47
- it.concurrent.each(macOSAliasTokensTable)(
48
- 'createMacOSShadowAliasTokens test mode: %s, isHighContrast: %p',
49
- async (mode, isHighContrast) => {
48
+ it.concurrent.each(macOSAliasTokensTable)('createMacOSShadowAliasTokens test mode: %s, isHighContrast: %p', async (mode, isHighContrast) => {
50
49
  if (mode === 'highContrast') {
51
- expect(() => createMacOSShadowAliasTokens(mode, isHighContrast)).toThrow();
52
- } else {
53
- expect(createMacOSShadowAliasTokens(mode, isHighContrast)).toMatchSnapshot();
50
+ expect(() => createMacOSShadowAliasTokens(mode, isHighContrast)).toThrow();
54
51
  }
55
- },
56
- );
57
- //# sourceMappingURL=apple-theme.test.js.map
52
+ else {
53
+ expect(createMacOSShadowAliasTokens(mode, isHighContrast)).toMatchSnapshot();
54
+ }
55
+ });
56
+ //# sourceMappingURL=apple-theme.test.js.map
@@ -1,4 +1,4 @@
1
1
  import type { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
2
2
  /** Creates a palette of colors for the apple theme, using the appropriate FluentUI Apple Palette based on appearance */
3
3
  export declare function paletteFromAppleColors(isLightMode: boolean, isElevated: boolean): ThemeColorDefinition;
4
- //# sourceMappingURL=appleColors.ios.d.ts.map
4
+ //# sourceMappingURL=appleColors.ios.d.ts.map
@@ -4,184 +4,184 @@ import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
4
4
  import { createiOSColorAliasTokens } from './createiOSAliasTokens';
5
5
  //TODO: remove and replace with Fluent 2 alias color tokens
6
6
  function getFluentUIAppleLightPalette() {
7
- return {
8
- communicationBlue: '#0078D4',
9
- communicationBlueTint10: '#2B88D8',
10
- communicationBlueTint20: '#C7E0F4',
11
- communicationBlueTint30: '#DEECF9',
12
- dangerPrimary: '#D92C2C',
13
- dangerTint10: '#DD4242',
14
- gray20: '#69797E',
15
- gray30: '#7A7574',
16
- gray40: '#393939',
17
- successTint10: '#27AC22',
18
- warningPrimary: '#FFD335',
19
- warningTint10: '#FFD94E',
20
- buttonBackgroundFilledPressed: '#2B88D8', //UIColor(light: Colors.primaryTint10(for: window), dark: Colors.primaryTint20(for: window))
21
- buttonTitleDisabled: '#ACACAC', //textDisabled
22
- };
7
+ return {
8
+ communicationBlue: '#0078D4',
9
+ communicationBlueTint10: '#2B88D8',
10
+ communicationBlueTint20: '#C7E0F4',
11
+ communicationBlueTint30: '#DEECF9',
12
+ dangerPrimary: '#D92C2C',
13
+ dangerTint10: '#DD4242',
14
+ gray20: '#69797E',
15
+ gray30: '#7A7574',
16
+ gray40: '#393939',
17
+ successTint10: '#27AC22',
18
+ warningPrimary: '#FFD335',
19
+ warningTint10: '#FFD94E',
20
+ buttonBackgroundFilledPressed: '#2B88D8', //UIColor(light: Colors.primaryTint10(for: window), dark: Colors.primaryTint20(for: window))
21
+ buttonTitleDisabled: '#ACACAC', //textDisabled
22
+ };
23
23
  }
24
24
  //TODO: remove and replace with Fluent 2 alias color tokens
25
25
  function getFluentUIAppleDarkPalette() {
26
- return {
27
- communicationBlue: '#0086F0',
28
- communicationBlueTint10: '#0078D4',
29
- communicationBlueTint20: '#004C87',
30
- communicationBlueTint30: '#043862',
31
- dangerPrimary: '#E83A3A',
32
- dangerTint10: '#CC3333',
33
- gray20: '#69797E',
34
- gray30: '#7A7574',
35
- gray40: '#393939',
36
- successTint10: '#0D9D3D',
37
- warningPrimary: '#FFC328',
38
- warningTint10: '#E0AB24',
39
- buttonBackgroundFilledPressed: '#004C87', //UIColor(light: Colors.primaryTint10(for: window), dark: Colors.primaryTint20(for: window))
40
- buttonTitleDisabled: '#404040', //textDisabled
41
- };
26
+ return {
27
+ communicationBlue: '#0086F0',
28
+ communicationBlueTint10: '#0078D4',
29
+ communicationBlueTint20: '#004C87',
30
+ communicationBlueTint30: '#043862',
31
+ dangerPrimary: '#E83A3A',
32
+ dangerTint10: '#CC3333',
33
+ gray20: '#69797E',
34
+ gray30: '#7A7574',
35
+ gray40: '#393939',
36
+ successTint10: '#0D9D3D',
37
+ warningPrimary: '#FFC328',
38
+ warningTint10: '#E0AB24',
39
+ buttonBackgroundFilledPressed: '#004C87', //UIColor(light: Colors.primaryTint10(for: window), dark: Colors.primaryTint20(for: window))
40
+ buttonTitleDisabled: '#404040', //textDisabled
41
+ };
42
42
  }
43
43
  /** Creates a palette of colors for the apple theme, using the appropriate FluentUI Apple Palette based on appearance */
44
44
  export function paletteFromAppleColors(isLightMode, isElevated) {
45
- const fluentApple = isLightMode ? getFluentUIAppleLightPalette() : getFluentUIAppleDarkPalette();
46
- const appearance = Appearance.getColorScheme();
47
- let mode = getCurrentAppearance(appearance, 'light');
48
- if (mode === 'dark' && isElevated) {
49
- mode = 'darkElevated';
50
- }
51
- const fluent2AliasColorTokens = createiOSColorAliasTokens(mode);
52
- return {
53
- /* Color Alias Tokens */
54
- ...fluent2AliasColorTokens,
55
- /* PaletteBackgroundColors & PaletteTextColors */
56
- background: fluent2AliasColorTokens.neutralBackground1,
57
- bodyStandoutBackground: fluent2AliasColorTokens.neutralBackground4,
58
- bodyFrameBackground: fluent2AliasColorTokens.neutralBackground1,
59
- bodyFrameDivider: fluent2AliasColorTokens.neutralStroke2,
60
- bodyText: fluent2AliasColorTokens.neutralForeground1,
61
- bodyTextChecked: fluent2AliasColorTokens.neutralForeground1,
62
- subText: fluent2AliasColorTokens.neutralForeground3,
63
- bodyDivider: fluent2AliasColorTokens.neutralStroke1,
64
- disabledBackground: fluent2AliasColorTokens.neutralBackgroundDisabled,
65
- disabledText: fluent2AliasColorTokens.neutralForegroundDisabled1,
66
- disabledBodyText: fluent2AliasColorTokens.neutralForegroundDisabled1,
67
- focusBorder: 'transparent',
68
- variantBorder: fluent2AliasColorTokens.neutralStroke2,
69
- errorText: fluentApple.dangerPrimary,
70
- inputBorder: fluent2AliasColorTokens.neutralStroke2,
71
- inputBackground: fluent2AliasColorTokens.neutralBackground1,
72
- inputFocusBorderAlt: fluent2AliasColorTokens.neutralStroke1,
73
- inputText: fluent2AliasColorTokens.neutralForeground1,
74
- inputPlaceholderText: fluent2AliasColorTokens.neutralForeground3,
75
- // Default values without any style
76
- // on FluentUI Apple iOS, this is the buttonStyle "Secondary Outline"
77
- buttonBackground: 'transparent',
78
- buttonBackgroundChecked: 'transparent',
79
- buttonBackgroundHovered: 'transparent',
80
- buttonBackgroundPressed: 'transparent',
81
- buttonBackgroundDisabled: 'transparent',
82
- buttonBorder: fluentApple.communicationBlueTint10,
83
- buttonText: fluentApple.communicationBlue,
84
- buttonTextHovered: fluentApple.communicationBlue,
85
- buttonTextChecked: fluentApple.communicationBlue,
86
- buttonTextPressed: fluentApple.communicationBlueTint20,
87
- buttonTextDisabled: fluentApple.buttonTitleDisabled,
88
- buttonBorderDisabled: fluent2AliasColorTokens.neutralBackgroundDisabled,
89
- buttonBorderFocused: fluentApple.communicationBlueTint10,
90
- primaryButtonBackground: fluentApple.communicationBlue,
91
- primaryButtonBackgroundHovered: fluentApple.communicationBlue,
92
- primaryButtonBackgroundPressed: fluentApple.buttonBackgroundFilledPressed,
93
- primaryButtonBackgroundDisabled: fluent2AliasColorTokens.neutralBackgroundDisabled,
94
- primaryButtonBorder: 'transparent',
95
- primaryButtonBorderFocused: 'transparent',
96
- primaryButtonText: fluent2AliasColorTokens.neutralForegroundOnColor,
97
- primaryButtonTextHovered: fluent2AliasColorTokens.neutralForegroundOnColor,
98
- primaryButtonTextPressed: fluent2AliasColorTokens.neutralForegroundOnColor,
99
- primaryButtonTextDisabled: fluent2AliasColorTokens.neutralForegroundOnColor,
100
- accentButtonBackground: fluentApple.communicationBlue,
101
- menuBackground: fluent2AliasColorTokens.neutralBackground1,
102
- menuDivider: fluent2AliasColorTokens.neutralStroke2,
103
- menuIcon: fluent2AliasColorTokens.neutralForeground3,
104
- menuItemBackgroundHovered: fluent2AliasColorTokens.neutralBackground1,
105
- menuItemBackgroundPressed: fluent2AliasColorTokens.neutralBackground1,
106
- menuItemText: fluent2AliasColorTokens.neutralForeground1,
107
- menuItemTextHovered: fluent2AliasColorTokens.neutralForeground1,
108
- listHeaderBackgroundHovered: fluent2AliasColorTokens.neutralForeground1,
109
- listHeaderBackgroundPressed: fluent2AliasColorTokens.neutralForeground1,
110
- actionLink: fluentApple.communicationBlue,
111
- link: fluentApple.communicationBlue,
112
- linkHovered: fluentApple.communicationBlue,
113
- linkPressed: fluentApple.communicationBlueTint10,
114
- /* ControlColorTokens */
115
- // Default values without any style
116
- // on FluentUI Apple iOS, this is the buttonStyle "Secondary Outline"
117
- defaultBackground: 'transparent',
118
- defaultBorder: fluentApple.communicationBlueTint10,
119
- defaultContent: fluentApple.communicationBlue,
120
- defaultIcon: fluentApple.communicationBlue,
121
- defaultHoveredBackground: 'transparent',
122
- defaultHoveredBorder: fluentApple.communicationBlueTint10,
123
- defaultHoveredContent: fluentApple.communicationBlue,
124
- defaultHoveredIcon: fluentApple.communicationBlue,
125
- defaultFocusedBackground: 'transparent',
126
- defaultFocusedBorder: fluentApple.communicationBlueTint10,
127
- defaultFocusedContent: fluentApple.communicationBlue,
128
- defaultFocusedIcon: fluentApple.communicationBlue,
129
- defaultPressedBackground: 'transparent',
130
- defaultPressedBorder: fluentApple.communicationBlueTint30,
131
- defaultPressedContent: fluentApple.communicationBlueTint20,
132
- defaultPressedIcon: fluentApple.communicationBlueTint20,
133
- defaultDisabledBackground: 'transparent',
134
- defaultDisabledBorder: fluent2AliasColorTokens.neutralBackgroundDisabled,
135
- defaultDisabledContent: fluentApple.buttonTitleDisabled,
136
- defaultDisabledIcon: fluentApple.buttonTitleDisabled,
137
- ghostBackground: 'transparent',
138
- ghostBorder: 'transparent',
139
- ghostContent: fluentApple.communicationBlue,
140
- ghostIcon: fluentApple.communicationBlue,
141
- ghostHoveredBackground: 'transparent',
142
- ghostHoveredBorder: 'transparent',
143
- ghostHoveredContent: fluentApple.communicationBlue,
144
- ghostHoveredIcon: fluentApple.communicationBlue,
145
- ghostFocusedBackground: 'transparent',
146
- ghostFocusedBorder: 'transparent',
147
- ghostFocusedContent: fluentApple.communicationBlue,
148
- ghostFocusedIcon: fluentApple.communicationBlue,
149
- ghostPressedBackground: 'transparent',
150
- ghostPressedBorder: 'transparent',
151
- ghostPressedContent: fluentApple.communicationBlueTint20,
152
- ghostPressedIcon: fluentApple.communicationBlueTint20,
153
- ghostDisabledBackground: 'transparent',
154
- ghostDisabledBorder: 'transparent',
155
- ghostDisabledContent: fluentApple.buttonTitleDisabled,
156
- ghostDisabledIcon: fluentApple.buttonTitleDisabled,
157
- brandedBackground: fluentApple.communicationBlue,
158
- brandedDisabledBorder: 'transparent',
159
- defaultCheckedBackground: 'transparent',
160
- defaultCheckedContent: fluentApple.communicationBlue,
161
- defaultCheckedHoveredBackground: 'transparent',
162
- defaultCheckedHoveredContent: fluentApple.communicationBlue,
163
- ghostCheckedBackground: 'transparent',
164
- ghostCheckedContent: fluentApple.communicationBlue,
165
- ghostCheckedHoveredBackground: 'transparent',
166
- ghostCheckedHoveredContent: fluentApple.communicationBlue,
167
- ghostCheckedHoveredBorder: 'transparent',
168
- // Buttons on iOS don't have secondary text, so map these to be the same as the normal content
169
- ghostSecondaryContent: fluentApple.communicationBlue,
170
- ghostFocusedSecondaryContent: fluentApple.communicationBlue,
171
- ghostHoveredSecondaryContent: fluentApple.communicationBlue,
172
- ghostPressedSecondaryContent: fluentApple.communicationBlueTint20,
173
- brandedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
174
- brandedFocusedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
175
- brandedHoveredSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
176
- brandedPressedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
177
- defaultHoveredSecondaryContent: fluentApple.communicationBlue,
178
- defaultPressedSecondaryContent: fluentApple.communicationBlueTint20,
179
- checkboxBackground: fluentApple.communicationBlue,
180
- checkboxBackgroundDisabled: fluent2AliasColorTokens.neutralBackground1,
181
- checkboxBorderColor: globalTokens.color.grey26,
182
- checkmarkColor: fluent2AliasColorTokens.neutralForegroundOnColor,
183
- personaActivityGlow: 'transparent',
184
- personaActivityRing: fluent2AliasColorTokens.neutralBackground1,
185
- };
45
+ const fluentApple = isLightMode ? getFluentUIAppleLightPalette() : getFluentUIAppleDarkPalette();
46
+ const appearance = Appearance.getColorScheme();
47
+ let mode = getCurrentAppearance(appearance, 'light');
48
+ if (mode === 'dark' && isElevated) {
49
+ mode = 'darkElevated';
50
+ }
51
+ const fluent2AliasColorTokens = createiOSColorAliasTokens(mode);
52
+ return {
53
+ /* Color Alias Tokens */
54
+ ...fluent2AliasColorTokens,
55
+ /* PaletteBackgroundColors & PaletteTextColors */
56
+ background: fluent2AliasColorTokens.neutralBackground1,
57
+ bodyStandoutBackground: fluent2AliasColorTokens.neutralBackground4,
58
+ bodyFrameBackground: fluent2AliasColorTokens.neutralBackground1,
59
+ bodyFrameDivider: fluent2AliasColorTokens.neutralStroke2,
60
+ bodyText: fluent2AliasColorTokens.neutralForeground1,
61
+ bodyTextChecked: fluent2AliasColorTokens.neutralForeground1,
62
+ subText: fluent2AliasColorTokens.neutralForeground3,
63
+ bodyDivider: fluent2AliasColorTokens.neutralStroke1,
64
+ disabledBackground: fluent2AliasColorTokens.neutralBackgroundDisabled,
65
+ disabledText: fluent2AliasColorTokens.neutralForegroundDisabled1,
66
+ disabledBodyText: fluent2AliasColorTokens.neutralForegroundDisabled1,
67
+ focusBorder: 'transparent',
68
+ variantBorder: fluent2AliasColorTokens.neutralStroke2,
69
+ errorText: fluentApple.dangerPrimary,
70
+ inputBorder: fluent2AliasColorTokens.neutralStroke2,
71
+ inputBackground: fluent2AliasColorTokens.neutralBackground1,
72
+ inputFocusBorderAlt: fluent2AliasColorTokens.neutralStroke1,
73
+ inputText: fluent2AliasColorTokens.neutralForeground1,
74
+ inputPlaceholderText: fluent2AliasColorTokens.neutralForeground3,
75
+ // Default values without any style
76
+ // on FluentUI Apple iOS, this is the buttonStyle "Secondary Outline"
77
+ buttonBackground: 'transparent',
78
+ buttonBackgroundChecked: 'transparent',
79
+ buttonBackgroundHovered: 'transparent',
80
+ buttonBackgroundPressed: 'transparent',
81
+ buttonBackgroundDisabled: 'transparent',
82
+ buttonBorder: fluentApple.communicationBlueTint10,
83
+ buttonText: fluentApple.communicationBlue,
84
+ buttonTextHovered: fluentApple.communicationBlue,
85
+ buttonTextChecked: fluentApple.communicationBlue,
86
+ buttonTextPressed: fluentApple.communicationBlueTint20,
87
+ buttonTextDisabled: fluentApple.buttonTitleDisabled,
88
+ buttonBorderDisabled: fluent2AliasColorTokens.neutralBackgroundDisabled,
89
+ buttonBorderFocused: fluentApple.communicationBlueTint10,
90
+ primaryButtonBackground: fluentApple.communicationBlue,
91
+ primaryButtonBackgroundHovered: fluentApple.communicationBlue,
92
+ primaryButtonBackgroundPressed: fluentApple.buttonBackgroundFilledPressed,
93
+ primaryButtonBackgroundDisabled: fluent2AliasColorTokens.neutralBackgroundDisabled,
94
+ primaryButtonBorder: 'transparent',
95
+ primaryButtonBorderFocused: 'transparent',
96
+ primaryButtonText: fluent2AliasColorTokens.neutralForegroundOnColor,
97
+ primaryButtonTextHovered: fluent2AliasColorTokens.neutralForegroundOnColor,
98
+ primaryButtonTextPressed: fluent2AliasColorTokens.neutralForegroundOnColor,
99
+ primaryButtonTextDisabled: fluent2AliasColorTokens.neutralForegroundOnColor,
100
+ accentButtonBackground: fluentApple.communicationBlue,
101
+ menuBackground: fluent2AliasColorTokens.neutralBackground1,
102
+ menuDivider: fluent2AliasColorTokens.neutralStroke2,
103
+ menuIcon: fluent2AliasColorTokens.neutralForeground3,
104
+ menuItemBackgroundHovered: fluent2AliasColorTokens.neutralBackground1,
105
+ menuItemBackgroundPressed: fluent2AliasColorTokens.neutralBackground1,
106
+ menuItemText: fluent2AliasColorTokens.neutralForeground1,
107
+ menuItemTextHovered: fluent2AliasColorTokens.neutralForeground1,
108
+ listHeaderBackgroundHovered: fluent2AliasColorTokens.neutralForeground1,
109
+ listHeaderBackgroundPressed: fluent2AliasColorTokens.neutralForeground1,
110
+ actionLink: fluentApple.communicationBlue,
111
+ link: fluentApple.communicationBlue,
112
+ linkHovered: fluentApple.communicationBlue,
113
+ linkPressed: fluentApple.communicationBlueTint10,
114
+ /* ControlColorTokens */
115
+ // Default values without any style
116
+ // on FluentUI Apple iOS, this is the buttonStyle "Secondary Outline"
117
+ defaultBackground: 'transparent',
118
+ defaultBorder: fluentApple.communicationBlueTint10,
119
+ defaultContent: fluentApple.communicationBlue,
120
+ defaultIcon: fluentApple.communicationBlue,
121
+ defaultHoveredBackground: 'transparent',
122
+ defaultHoveredBorder: fluentApple.communicationBlueTint10,
123
+ defaultHoveredContent: fluentApple.communicationBlue,
124
+ defaultHoveredIcon: fluentApple.communicationBlue,
125
+ defaultFocusedBackground: 'transparent',
126
+ defaultFocusedBorder: fluentApple.communicationBlueTint10,
127
+ defaultFocusedContent: fluentApple.communicationBlue,
128
+ defaultFocusedIcon: fluentApple.communicationBlue,
129
+ defaultPressedBackground: 'transparent',
130
+ defaultPressedBorder: fluentApple.communicationBlueTint30,
131
+ defaultPressedContent: fluentApple.communicationBlueTint20,
132
+ defaultPressedIcon: fluentApple.communicationBlueTint20,
133
+ defaultDisabledBackground: 'transparent',
134
+ defaultDisabledBorder: fluent2AliasColorTokens.neutralBackgroundDisabled,
135
+ defaultDisabledContent: fluentApple.buttonTitleDisabled,
136
+ defaultDisabledIcon: fluentApple.buttonTitleDisabled,
137
+ ghostBackground: 'transparent',
138
+ ghostBorder: 'transparent',
139
+ ghostContent: fluentApple.communicationBlue,
140
+ ghostIcon: fluentApple.communicationBlue,
141
+ ghostHoveredBackground: 'transparent',
142
+ ghostHoveredBorder: 'transparent',
143
+ ghostHoveredContent: fluentApple.communicationBlue,
144
+ ghostHoveredIcon: fluentApple.communicationBlue,
145
+ ghostFocusedBackground: 'transparent',
146
+ ghostFocusedBorder: 'transparent',
147
+ ghostFocusedContent: fluentApple.communicationBlue,
148
+ ghostFocusedIcon: fluentApple.communicationBlue,
149
+ ghostPressedBackground: 'transparent',
150
+ ghostPressedBorder: 'transparent',
151
+ ghostPressedContent: fluentApple.communicationBlueTint20,
152
+ ghostPressedIcon: fluentApple.communicationBlueTint20,
153
+ ghostDisabledBackground: 'transparent',
154
+ ghostDisabledBorder: 'transparent',
155
+ ghostDisabledContent: fluentApple.buttonTitleDisabled,
156
+ ghostDisabledIcon: fluentApple.buttonTitleDisabled,
157
+ brandedBackground: fluentApple.communicationBlue,
158
+ brandedDisabledBorder: 'transparent',
159
+ defaultCheckedBackground: 'transparent',
160
+ defaultCheckedContent: fluentApple.communicationBlue,
161
+ defaultCheckedHoveredBackground: 'transparent',
162
+ defaultCheckedHoveredContent: fluentApple.communicationBlue,
163
+ ghostCheckedBackground: 'transparent',
164
+ ghostCheckedContent: fluentApple.communicationBlue,
165
+ ghostCheckedHoveredBackground: 'transparent',
166
+ ghostCheckedHoveredContent: fluentApple.communicationBlue,
167
+ ghostCheckedHoveredBorder: 'transparent',
168
+ // Buttons on iOS don't have secondary text, so map these to be the same as the normal content
169
+ ghostSecondaryContent: fluentApple.communicationBlue,
170
+ ghostFocusedSecondaryContent: fluentApple.communicationBlue,
171
+ ghostHoveredSecondaryContent: fluentApple.communicationBlue,
172
+ ghostPressedSecondaryContent: fluentApple.communicationBlueTint20,
173
+ brandedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
174
+ brandedFocusedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
175
+ brandedHoveredSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
176
+ brandedPressedSecondaryContent: fluent2AliasColorTokens.neutralForegroundOnColor,
177
+ defaultHoveredSecondaryContent: fluentApple.communicationBlue,
178
+ defaultPressedSecondaryContent: fluentApple.communicationBlueTint20,
179
+ checkboxBackground: fluentApple.communicationBlue,
180
+ checkboxBackgroundDisabled: fluent2AliasColorTokens.neutralBackground1,
181
+ checkboxBorderColor: globalTokens.color.grey26,
182
+ checkmarkColor: fluent2AliasColorTokens.neutralForegroundOnColor,
183
+ personaActivityGlow: 'transparent',
184
+ personaActivityRing: fluent2AliasColorTokens.neutralBackground1,
185
+ };
186
186
  }
187
- //# sourceMappingURL=appleColors.ios.js.map
187
+ //# sourceMappingURL=appleColors.ios.js.map
@@ -3,4 +3,4 @@ import type { ThemeColorDefinition, AppearanceOptions } from '@fluentui-react-na
3
3
  * The fallback palette is loaded while we wait for the native theming module to load, or if the module is not found
4
4
  */
5
5
  export declare function fallbackApplePalette(mode: AppearanceOptions): ThemeColorDefinition;
6
- //# sourceMappingURL=appleColors.macos.d.ts.map
6
+ //# sourceMappingURL=appleColors.macos.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"appleColors.macos.d.ts","sourceRoot":"","sources":["../src/appleColors.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAkQlG;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,GAAG,oBAAoB,CAuKlF"}
1
+ {"version":3,"file":"appleColors.macos.d.ts","sourceRoot":"","sources":["../src/appleColors.macos.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAgQlG;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,GAAG,oBAAoB,CAuKlF"}