@fluentui-react-native/apple-theme 0.29.0 → 0.29.1
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.
- package/CHANGELOG.md +16 -0
- package/README.md +1 -1
- package/lib/__tests__/apple-theme.test.d.ts +1 -1
- package/lib/__tests__/apple-theme.test.js +41 -42
- package/lib/appleColors.ios.d.ts +1 -1
- package/lib/appleColors.ios.js +174 -174
- package/lib/appleColors.macos.d.ts +1 -1
- package/lib/appleColors.macos.js +367 -367
- package/lib/appleColors.types.ios.d.ts +15 -15
- package/lib/appleColors.types.ios.js +1 -1
- package/lib/appleColors.types.macos.d.ts +146 -146
- package/lib/appleColors.types.macos.js +1 -1
- package/lib/appleHighContrast.macos.d.ts +1 -1
- package/lib/appleHighContrast.macos.js +3 -3
- package/lib/appleShadows.ios.d.ts +1 -1
- package/lib/appleShadows.ios.js +4 -4
- package/lib/appleShadows.macos.d.ts +1 -1
- package/lib/appleShadows.macos.js +2 -2
- package/lib/appleTheme.ios.d.ts +1 -1
- package/lib/appleTheme.ios.js +122 -122
- package/lib/appleTheme.macos.d.ts +53 -53
- package/lib/appleTheme.macos.js +68 -68
- package/lib/appleTypography.ios.d.ts +1 -1
- package/lib/appleTypography.ios.js +50 -50
- package/lib/appleTypography.macos.d.ts +2 -2
- package/lib/appleTypography.macos.js +63 -63
- package/lib/createAppleTheme.d.ts +1 -1
- package/lib/createAppleTheme.ios.d.ts +1 -1
- package/lib/createAppleTheme.ios.js +14 -14
- package/lib/createAppleTheme.js +3 -3
- package/lib/createAppleTheme.macos.d.ts +1 -1
- package/lib/createAppleTheme.macos.js +23 -23
- package/lib/createFontAliasTokens.ios.d.ts +1 -1
- package/lib/createFontAliasTokens.ios.js +2 -2
- package/lib/createMacOSAliasTokens.d.ts +1 -1
- package/lib/createMacOSAliasTokens.js +5 -5
- package/lib/createiOSAliasTokens.d.ts +1 -1
- package/lib/createiOSAliasTokens.js +5 -5
- package/lib/getMacOSTokens.d.ts +435 -443
- package/lib/getMacOSTokens.js +45 -35
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib-commonjs/__tests__/apple-theme.test.d.ts +1 -1
- package/lib-commonjs/__tests__/apple-theme.test.js +46 -47
- package/lib-commonjs/appleColors.ios.d.ts +1 -1
- package/lib-commonjs/appleColors.ios.js +180 -180
- package/lib-commonjs/appleColors.macos.d.ts +1 -1
- package/lib-commonjs/appleColors.macos.js +372 -378
- package/lib-commonjs/appleColors.types.ios.d.ts +15 -15
- package/lib-commonjs/appleColors.types.ios.js +3 -3
- package/lib-commonjs/appleColors.types.macos.d.ts +146 -146
- package/lib-commonjs/appleColors.types.macos.js +3 -3
- package/lib-commonjs/appleHighContrast.macos.d.ts +1 -1
- package/lib-commonjs/appleHighContrast.macos.js +6 -6
- package/lib-commonjs/appleShadows.ios.d.ts +1 -1
- package/lib-commonjs/appleShadows.ios.js +9 -9
- package/lib-commonjs/appleShadows.macos.d.ts +1 -1
- package/lib-commonjs/appleShadows.macos.js +6 -6
- package/lib-commonjs/appleTheme.ios.d.ts +1 -1
- package/lib-commonjs/appleTheme.ios.js +128 -128
- package/lib-commonjs/appleTheme.macos.d.ts +53 -53
- package/lib-commonjs/appleTheme.macos.js +74 -74
- package/lib-commonjs/appleTypography.ios.d.ts +1 -1
- package/lib-commonjs/appleTypography.ios.js +53 -53
- package/lib-commonjs/appleTypography.macos.d.ts +2 -2
- package/lib-commonjs/appleTypography.macos.js +65 -65
- package/lib-commonjs/createAppleTheme.d.ts +1 -1
- package/lib-commonjs/createAppleTheme.ios.d.ts +1 -1
- package/lib-commonjs/createAppleTheme.ios.js +20 -20
- package/lib-commonjs/createAppleTheme.js +7 -7
- package/lib-commonjs/createAppleTheme.macos.d.ts +1 -1
- package/lib-commonjs/createAppleTheme.macos.js +31 -31
- package/lib-commonjs/createFontAliasTokens.ios.d.ts +1 -1
- package/lib-commonjs/createFontAliasTokens.ios.js +10 -12
- package/lib-commonjs/createMacOSAliasTokens.d.ts +1 -1
- package/lib-commonjs/createMacOSAliasTokens.js +10 -10
- package/lib-commonjs/createiOSAliasTokens.d.ts +1 -1
- package/lib-commonjs/createiOSAliasTokens.js +10 -10
- package/lib-commonjs/getMacOSTokens.d.ts +435 -443
- package/lib-commonjs/getMacOSTokens.js +59 -51
- package/lib-commonjs/index.d.ts +1 -1
- package/lib-commonjs/index.js +10 -30
- package/package.json +20 -19
- package/src/appleTypography.macos.ts +1 -1
|
@@ -1,137 +1,137 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getBaseAppleThemeIOS = void 0;
|
|
4
|
-
const framework_base_1 = require(
|
|
5
|
-
const appleColors_ios_1 = require(
|
|
6
|
-
const appleShadows_ios_1 = require(
|
|
7
|
-
const appleTypography_ios_1 = require(
|
|
4
|
+
const framework_base_1 = require("@fluentui-react-native/framework-base");
|
|
5
|
+
const appleColors_ios_1 = require("./appleColors.ios");
|
|
6
|
+
const appleShadows_ios_1 = require("./appleShadows.ios");
|
|
7
|
+
const appleTypography_ios_1 = require("./appleTypography.ios");
|
|
8
8
|
function appleSpacing() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
return {
|
|
10
|
+
s2: '4px',
|
|
11
|
+
s1: '8px',
|
|
12
|
+
l1: '20px',
|
|
13
|
+
l2: '32px',
|
|
14
|
+
};
|
|
15
15
|
}
|
|
16
16
|
const appleComponents = {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
// The Default Button corresponds to the "secondary outline" button style on iOS
|
|
18
|
+
Button: {
|
|
19
|
+
tokens: {
|
|
20
|
+
borderRadius: 8,
|
|
21
|
+
borderWidth: 1,
|
|
22
|
+
},
|
|
23
|
+
root: {
|
|
24
|
+
style: {
|
|
25
|
+
margin: 8, // Padding around the outside of the button
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
stack: {
|
|
29
|
+
style: {
|
|
30
|
+
paddingVertical: 10,
|
|
31
|
+
paddingHorizontal: 14,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
icon: {
|
|
35
|
+
style: {
|
|
36
|
+
marginEnd: 8,
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
content: {
|
|
40
|
+
fontSize: 12,
|
|
41
|
+
height: 18,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
PrimaryButton: {
|
|
45
|
+
tokens: {
|
|
46
|
+
borderRadius: 8,
|
|
47
|
+
borderWidth: 1,
|
|
48
|
+
},
|
|
49
|
+
root: {
|
|
50
|
+
style: {
|
|
51
|
+
margin: 8, // Padding around the outside of the button
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
stack: {
|
|
55
|
+
style: {
|
|
56
|
+
paddingVertical: 16,
|
|
57
|
+
paddingHorizontal: 20,
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
icon: {
|
|
61
|
+
style: {
|
|
62
|
+
marginEnd: 10,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
content: {
|
|
66
|
+
fontSize: 15,
|
|
67
|
+
height: 20,
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
StealthButton: {
|
|
71
|
+
tokens: {
|
|
72
|
+
borderRadius: 8,
|
|
73
|
+
borderWidth: 1,
|
|
74
|
+
},
|
|
75
|
+
root: {
|
|
76
|
+
style: {
|
|
77
|
+
margin: 8, // Padding around the outside of the button
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
stack: {
|
|
81
|
+
style: {
|
|
82
|
+
paddingVertical: 7,
|
|
83
|
+
paddingHorizontal: 12,
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
icon: {
|
|
87
|
+
style: {
|
|
88
|
+
display: 'none',
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
content: {
|
|
92
|
+
fontSize: 15,
|
|
93
|
+
height: 20,
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
RNFText: {
|
|
97
|
+
tokens: {
|
|
98
|
+
variant: 'bodyStandard',
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
Checkbox: {
|
|
102
|
+
root: {
|
|
103
|
+
style: {
|
|
104
|
+
minHeight: 20,
|
|
105
|
+
marginVertical: 2,
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
checkbox: {
|
|
109
|
+
style: {
|
|
110
|
+
borderRadius: 100,
|
|
111
|
+
minHeight: 24,
|
|
112
|
+
minWidth: 24,
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
checkmarkIcon: {
|
|
116
|
+
width: 8.5,
|
|
117
|
+
height: 7,
|
|
118
|
+
style: {
|
|
119
|
+
marginVertical: 8.5,
|
|
120
|
+
marginLeft: 8,
|
|
121
|
+
marginRight: 7,
|
|
122
|
+
},
|
|
123
|
+
},
|
|
22
124
|
},
|
|
23
|
-
root: {
|
|
24
|
-
style: {
|
|
25
|
-
margin: 8, // Padding around the outside of the button
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
stack: {
|
|
29
|
-
style: {
|
|
30
|
-
paddingVertical: 10,
|
|
31
|
-
paddingHorizontal: 14,
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
icon: {
|
|
35
|
-
style: {
|
|
36
|
-
marginEnd: 8,
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
content: {
|
|
40
|
-
fontSize: 12,
|
|
41
|
-
height: 18,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
PrimaryButton: {
|
|
45
|
-
tokens: {
|
|
46
|
-
borderRadius: 8,
|
|
47
|
-
borderWidth: 1,
|
|
48
|
-
},
|
|
49
|
-
root: {
|
|
50
|
-
style: {
|
|
51
|
-
margin: 8, // Padding around the outside of the button
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
stack: {
|
|
55
|
-
style: {
|
|
56
|
-
paddingVertical: 16,
|
|
57
|
-
paddingHorizontal: 20,
|
|
58
|
-
},
|
|
59
|
-
},
|
|
60
|
-
icon: {
|
|
61
|
-
style: {
|
|
62
|
-
marginEnd: 10,
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
content: {
|
|
66
|
-
fontSize: 15,
|
|
67
|
-
height: 20,
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
StealthButton: {
|
|
71
|
-
tokens: {
|
|
72
|
-
borderRadius: 8,
|
|
73
|
-
borderWidth: 1,
|
|
74
|
-
},
|
|
75
|
-
root: {
|
|
76
|
-
style: {
|
|
77
|
-
margin: 8, // Padding around the outside of the button
|
|
78
|
-
},
|
|
79
|
-
},
|
|
80
|
-
stack: {
|
|
81
|
-
style: {
|
|
82
|
-
paddingVertical: 7,
|
|
83
|
-
paddingHorizontal: 12,
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
icon: {
|
|
87
|
-
style: {
|
|
88
|
-
display: 'none',
|
|
89
|
-
},
|
|
90
|
-
},
|
|
91
|
-
content: {
|
|
92
|
-
fontSize: 15,
|
|
93
|
-
height: 20,
|
|
94
|
-
},
|
|
95
|
-
},
|
|
96
|
-
RNFText: {
|
|
97
|
-
tokens: {
|
|
98
|
-
variant: 'bodyStandard',
|
|
99
|
-
},
|
|
100
|
-
},
|
|
101
|
-
Checkbox: {
|
|
102
|
-
root: {
|
|
103
|
-
style: {
|
|
104
|
-
minHeight: 20,
|
|
105
|
-
marginVertical: 2,
|
|
106
|
-
},
|
|
107
|
-
},
|
|
108
|
-
checkbox: {
|
|
109
|
-
style: {
|
|
110
|
-
borderRadius: 100,
|
|
111
|
-
minHeight: 24,
|
|
112
|
-
minWidth: 24,
|
|
113
|
-
},
|
|
114
|
-
},
|
|
115
|
-
checkmarkIcon: {
|
|
116
|
-
width: 8.5,
|
|
117
|
-
height: 7,
|
|
118
|
-
style: {
|
|
119
|
-
marginVertical: 8.5,
|
|
120
|
-
marginLeft: 8,
|
|
121
|
-
marginRight: 7,
|
|
122
|
-
},
|
|
123
|
-
},
|
|
124
|
-
},
|
|
125
125
|
};
|
|
126
126
|
function getBaseAppleThemeIOSWorker(isLightMode, isElevated) {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
return {
|
|
128
|
+
colors: (0, appleColors_ios_1.paletteFromAppleColors)(isLightMode, isElevated),
|
|
129
|
+
typography: (0, appleTypography_ios_1.appleTypography)(),
|
|
130
|
+
shadows: (0, appleShadows_ios_1.iOSShadows)(),
|
|
131
|
+
spacing: appleSpacing(),
|
|
132
|
+
components: appleComponents,
|
|
133
|
+
host: { appearance: isLightMode ? 'light' : 'dark' },
|
|
134
|
+
};
|
|
135
135
|
}
|
|
136
136
|
exports.getBaseAppleThemeIOS = (0, framework_base_1.memoize)(getBaseAppleThemeIOSWorker);
|
|
137
|
-
//# sourceMappingURL=appleTheme.ios.js.map
|
|
137
|
+
//# sourceMappingURL=appleTheme.ios.js.map
|
|
@@ -1,61 +1,61 @@
|
|
|
1
1
|
import type { Spacing, Theme, AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
2
2
|
export declare function appleSpacing(): Spacing;
|
|
3
3
|
export declare const appleComponents: {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
Button: {
|
|
5
|
+
tokens: {
|
|
6
|
+
borderRadius: number;
|
|
7
|
+
borderWidth: number;
|
|
8
|
+
minHeight: number;
|
|
9
|
+
minWidth: number;
|
|
10
|
+
};
|
|
11
|
+
root: {
|
|
12
|
+
style: {
|
|
13
|
+
margin: number;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
stack: {
|
|
17
|
+
style: {
|
|
18
|
+
paddingVertical: number;
|
|
19
|
+
minHeight: number;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
icon: {
|
|
23
|
+
style: {
|
|
24
|
+
marginEnd: number;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
content: {
|
|
28
|
+
fontSize: number;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
RNFText: {
|
|
32
|
+
tokens: {
|
|
33
|
+
variant: string;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
Checkbox: {
|
|
37
|
+
checkbox: {
|
|
38
|
+
style: {
|
|
39
|
+
borderStyle: string;
|
|
40
|
+
borderWidth: number;
|
|
41
|
+
borderRadius: number;
|
|
42
|
+
minHeight: number;
|
|
43
|
+
minWidth: number;
|
|
44
|
+
marginEnd: number;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
checkmarkIcon: {
|
|
48
|
+
width: number;
|
|
49
|
+
height: number;
|
|
50
|
+
style: {
|
|
51
|
+
marginVertical: number;
|
|
52
|
+
marginHorizontal: number;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
_precedence: string[];
|
|
10
56
|
};
|
|
11
|
-
root: {
|
|
12
|
-
style: {
|
|
13
|
-
margin: number;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
stack: {
|
|
17
|
-
style: {
|
|
18
|
-
paddingVertical: number;
|
|
19
|
-
minHeight: number;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
icon: {
|
|
23
|
-
style: {
|
|
24
|
-
marginEnd: number;
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
content: {
|
|
28
|
-
fontSize: number;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
RNFText: {
|
|
32
|
-
tokens: {
|
|
33
|
-
variant: string;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
Checkbox: {
|
|
37
|
-
checkbox: {
|
|
38
|
-
style: {
|
|
39
|
-
borderStyle: string;
|
|
40
|
-
borderWidth: number;
|
|
41
|
-
borderRadius: number;
|
|
42
|
-
minHeight: number;
|
|
43
|
-
minWidth: number;
|
|
44
|
-
marginEnd: number;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
checkmarkIcon: {
|
|
48
|
-
width: number;
|
|
49
|
-
height: number;
|
|
50
|
-
style: {
|
|
51
|
-
marginVertical: number;
|
|
52
|
-
marginHorizontal: number;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
_precedence: string[];
|
|
56
|
-
};
|
|
57
57
|
};
|
|
58
58
|
declare function getBaseAppleThemeMacOSWorker(mode: AppearanceOptions): Theme;
|
|
59
59
|
export declare const getBaseAppleThemeMacOS: typeof getBaseAppleThemeMacOSWorker;
|
|
60
60
|
export {};
|
|
61
|
-
//# sourceMappingURL=appleTheme.macos.d.ts.map
|
|
61
|
+
//# sourceMappingURL=appleTheme.macos.d.ts.map
|
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getBaseAppleThemeMacOS = exports.appleComponents = void 0;
|
|
4
4
|
exports.appleSpacing = appleSpacing;
|
|
5
|
-
const framework_base_1 = require(
|
|
6
|
-
const appleColors_macos_1 = require(
|
|
7
|
-
const appleShadows_macos_1 = require(
|
|
8
|
-
const appleTypography_macos_1 = require(
|
|
5
|
+
const framework_base_1 = require("@fluentui-react-native/framework-base");
|
|
6
|
+
const appleColors_macos_1 = require("./appleColors.macos");
|
|
7
|
+
const appleShadows_macos_1 = require("./appleShadows.macos");
|
|
8
|
+
const appleTypography_macos_1 = require("./appleTypography.macos");
|
|
9
9
|
function appleSpacing() {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
return {
|
|
11
|
+
s2: '8px',
|
|
12
|
+
s1: '12px',
|
|
13
|
+
m: '16px',
|
|
14
|
+
l1: '20px',
|
|
15
|
+
l2: '24px',
|
|
16
|
+
};
|
|
17
17
|
}
|
|
18
18
|
exports.appleComponents = {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
// These values correspond to the "Large" Button Size values of the FluentUI Apple Button
|
|
20
|
+
Button: {
|
|
21
|
+
tokens: {
|
|
22
|
+
borderRadius: 6,
|
|
23
|
+
borderWidth: 1,
|
|
24
|
+
minHeight: 28,
|
|
25
|
+
minWidth: 72,
|
|
26
|
+
},
|
|
27
|
+
root: {
|
|
28
|
+
style: {
|
|
29
|
+
margin: 8, // Padding around the outside of the button
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
stack: {
|
|
33
|
+
style: {
|
|
34
|
+
paddingVertical: 4.5,
|
|
35
|
+
minHeight: 28,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
icon: {
|
|
39
|
+
style: {
|
|
40
|
+
marginEnd: 10,
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
content: {
|
|
44
|
+
fontSize: 15,
|
|
45
|
+
},
|
|
26
46
|
},
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
47
|
+
RNFText: {
|
|
48
|
+
tokens: {
|
|
49
|
+
variant: 'bodyStandard',
|
|
50
|
+
},
|
|
31
51
|
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
52
|
+
Checkbox: {
|
|
53
|
+
checkbox: {
|
|
54
|
+
style: {
|
|
55
|
+
borderStyle: 'solid',
|
|
56
|
+
borderWidth: 0.5,
|
|
57
|
+
borderRadius: 3,
|
|
58
|
+
minHeight: 14,
|
|
59
|
+
minWidth: 14,
|
|
60
|
+
marginEnd: 5,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
checkmarkIcon: {
|
|
64
|
+
width: 10,
|
|
65
|
+
height: 10,
|
|
66
|
+
style: {
|
|
67
|
+
marginVertical: 2,
|
|
68
|
+
marginHorizontal: 2,
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
// This disables other available states like: hovered, focused, pressed.
|
|
72
|
+
_precedence: ['disabled', 'boxAtEnd', 'checked'],
|
|
37
73
|
},
|
|
38
|
-
icon: {
|
|
39
|
-
style: {
|
|
40
|
-
marginEnd: 10,
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
content: {
|
|
44
|
-
fontSize: 15,
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
RNFText: {
|
|
48
|
-
tokens: {
|
|
49
|
-
variant: 'bodyStandard',
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
Checkbox: {
|
|
53
|
-
checkbox: {
|
|
54
|
-
style: {
|
|
55
|
-
borderStyle: 'solid',
|
|
56
|
-
borderWidth: 0.5,
|
|
57
|
-
borderRadius: 3,
|
|
58
|
-
minHeight: 14,
|
|
59
|
-
minWidth: 14,
|
|
60
|
-
marginEnd: 5,
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
checkmarkIcon: {
|
|
64
|
-
width: 10,
|
|
65
|
-
height: 10,
|
|
66
|
-
style: {
|
|
67
|
-
marginVertical: 2,
|
|
68
|
-
marginHorizontal: 2,
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
// This disables other available states like: hovered, focused, pressed.
|
|
72
|
-
_precedence: ['disabled', 'boxAtEnd', 'checked'],
|
|
73
|
-
},
|
|
74
74
|
};
|
|
75
75
|
function getBaseAppleThemeMacOSWorker(mode) {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
76
|
+
return {
|
|
77
|
+
colors: (0, appleColors_macos_1.fallbackApplePalette)(mode),
|
|
78
|
+
typography: (0, appleTypography_macos_1.fallbackAppleTypography)(),
|
|
79
|
+
shadows: (0, appleShadows_macos_1.fallbackAppleShadows)(mode),
|
|
80
|
+
spacing: appleSpacing(),
|
|
81
|
+
components: exports.appleComponents,
|
|
82
|
+
host: { appearance: 'dynamic' },
|
|
83
|
+
};
|
|
84
84
|
}
|
|
85
85
|
exports.getBaseAppleThemeMacOS = (0, framework_base_1.memoize)(getBaseAppleThemeMacOSWorker);
|
|
86
|
-
//# sourceMappingURL=appleTheme.macos.js.map
|
|
86
|
+
//# sourceMappingURL=appleTheme.macos.js.map
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.appleTypography = appleTypography;
|
|
4
|
-
const createFontAliasTokens_ios_1 = require(
|
|
4
|
+
const createFontAliasTokens_ios_1 = require("./createFontAliasTokens.ios");
|
|
5
5
|
// The sizes are taken for the Dynamic Type Size "Large", which is the system default
|
|
6
6
|
function appleTypography() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
7
|
+
const appleDict = {
|
|
8
|
+
sizes: {
|
|
9
|
+
caption: 12, // Caption 2
|
|
10
|
+
secondary: 16, // Caption 1
|
|
11
|
+
body: 17, // Body
|
|
12
|
+
subheader: 15, // Subhead
|
|
13
|
+
header: 17, // Headline
|
|
14
|
+
hero: 26, /// Title 1
|
|
15
|
+
heroLarge: 30, // Large Title,
|
|
16
|
+
},
|
|
17
|
+
weights: {
|
|
18
|
+
ultralight: '100',
|
|
19
|
+
thin: '200',
|
|
20
|
+
light: '300',
|
|
21
|
+
regular: '400',
|
|
22
|
+
medium: '500',
|
|
23
|
+
semiBold: '600',
|
|
24
|
+
bold: '700',
|
|
25
|
+
heavy: '800',
|
|
26
|
+
black: '900',
|
|
27
|
+
},
|
|
28
|
+
families: {
|
|
29
|
+
primary: 'System',
|
|
30
|
+
secondary: 'System',
|
|
31
|
+
cursive: 'System',
|
|
32
|
+
monospace: 'System',
|
|
33
|
+
numeric: 'System',
|
|
34
|
+
sansSerif: 'System',
|
|
35
|
+
serif: 'System',
|
|
36
|
+
},
|
|
37
|
+
variants: {
|
|
38
|
+
captionStandard: { face: 'primary', size: 'caption', weight: '400' },
|
|
39
|
+
secondaryStandard: { face: 'primary', size: 'secondary', weight: '400' },
|
|
40
|
+
secondarySemibold: { face: 'primary', size: 'secondary', weight: '600' },
|
|
41
|
+
bodyStandard: { face: 'primary', size: 'body', weight: '400' },
|
|
42
|
+
bodySemibold: { face: 'primary', size: 'body', weight: '600' },
|
|
43
|
+
subheaderStandard: { face: 'primary', size: 'subheader', weight: '400' },
|
|
44
|
+
subheaderSemibold: { face: 'primary', size: 'subheader', weight: '600' },
|
|
45
|
+
headerStandard: { face: 'primary', size: 'header', weight: '600' },
|
|
46
|
+
headerSemibold: { face: 'primary', size: 'header', weight: '800' },
|
|
47
|
+
heroStandard: { face: 'primary', size: 'hero', weight: '400' },
|
|
48
|
+
heroSemibold: { face: 'primary', size: 'hero', weight: '600' },
|
|
49
|
+
heroLargeStandard: { face: 'primary', size: 'heroLarge', weight: '400' },
|
|
50
|
+
heroLargeSemibold: { face: 'primary', size: 'heroLarge', weight: '600' },
|
|
51
|
+
// iOS styles
|
|
52
|
+
...(0, createFontAliasTokens_ios_1.createFontAliasTokens)(),
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
return appleDict;
|
|
56
56
|
}
|
|
57
|
-
//# sourceMappingURL=appleTypography.ios.js.map
|
|
57
|
+
//# sourceMappingURL=appleTypography.ios.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Typography } from '@fluentui-react-native/theme-types';
|
|
2
2
|
/**
|
|
3
3
|
* The Typography is designed to match the styles defined in the Apple HIG:
|
|
4
|
-
* https://developer.apple.com/design/human-interface-guidelines/
|
|
4
|
+
* https://developer.apple.com/design/human-interface-guidelines/typography
|
|
5
5
|
* These mappings and variants are subject to change as we moved to a unified cross platform Fluent typography ramp
|
|
6
6
|
* Github #598 also tracks pulling these values from a Native Module rather than hardcoding the numbers in JS.
|
|
7
7
|
*/
|
|
8
8
|
export declare function fallbackAppleTypography(): Typography;
|
|
9
|
-
//# sourceMappingURL=appleTypography.macos.d.ts.map
|
|
9
|
+
//# sourceMappingURL=appleTypography.macos.d.ts.map
|