@fluentui-react-native/apple-theme 0.15.4 → 0.16.0
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.json +55 -1
- package/CHANGELOG.md +22 -2
- package/lib/appleShadows.ios.d.ts +3 -0
- package/lib/appleShadows.ios.d.ts.map +1 -0
- package/lib/appleShadows.ios.js +9 -0
- package/lib/appleShadows.ios.js.map +1 -0
- package/lib/appleTheme.ios.d.ts.map +1 -1
- package/lib/appleTheme.ios.js +16 -54
- package/lib/appleTheme.ios.js.map +1 -1
- package/lib/createiOSAliasTokens.d.ts +6 -0
- package/lib/createiOSAliasTokens.d.ts.map +1 -0
- package/lib/createiOSAliasTokens.js +9 -0
- package/lib/createiOSAliasTokens.js.map +1 -0
- package/lib/getiOSTokens.d.ts +78 -0
- package/lib/getiOSTokens.d.ts.map +1 -0
- package/lib/getiOSTokens.js +18 -0
- package/lib/getiOSTokens.js.map +1 -0
- package/lib-commonjs/appleShadows.ios.d.ts +3 -0
- package/lib-commonjs/appleShadows.ios.d.ts.map +1 -0
- package/lib-commonjs/appleShadows.ios.js +13 -0
- package/lib-commonjs/appleShadows.ios.js.map +1 -0
- package/lib-commonjs/appleTheme.ios.d.ts.map +1 -1
- package/lib-commonjs/appleTheme.ios.js +19 -54
- package/lib-commonjs/appleTheme.ios.js.map +1 -1
- package/lib-commonjs/createiOSAliasTokens.d.ts +6 -0
- package/lib-commonjs/createiOSAliasTokens.d.ts.map +1 -0
- package/lib-commonjs/createiOSAliasTokens.js +12 -0
- package/lib-commonjs/createiOSAliasTokens.js.map +1 -0
- package/lib-commonjs/getiOSTokens.d.ts +78 -0
- package/lib-commonjs/getiOSTokens.d.ts.map +1 -0
- package/lib-commonjs/getiOSTokens.js +25 -0
- package/lib-commonjs/getiOSTokens.js.map +1 -0
- package/package.json +6 -6
- package/src/appleShadows.ios.ts +10 -0
- package/src/appleTheme.ios.ts +13 -55
- package/src/createiOSAliasTokens.ts +12 -0
- package/src/getiOSTokens.ts +16 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/apple-theme",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 11 Oct 2022 22:39:43 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/apple-theme_v0.16.0",
|
|
7
|
+
"version": "0.16.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "adam.gleitman@gmail.com",
|
|
12
|
+
"package": "@fluentui-react-native/apple-theme",
|
|
13
|
+
"commit": "3547a335f47efb90f52c10443dc85f755046a324",
|
|
14
|
+
"comment": "Add new spacing tokens"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/apple-theme",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/default-theme to v0.16.3",
|
|
20
|
+
"commit": "3547a335f47efb90f52c10443dc85f755046a324"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/apple-theme",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/theme to v0.7.5",
|
|
26
|
+
"commit": "3547a335f47efb90f52c10443dc85f755046a324"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui-react-native/apple-theme",
|
|
31
|
+
"comment": "Bump @fluentui-react-native/theme-types to v0.21.0",
|
|
32
|
+
"commit": "3547a335f47efb90f52c10443dc85f755046a324"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui-react-native/apple-theme",
|
|
37
|
+
"comment": "Bump @fluentui-react-native/theming-utils to v0.16.1",
|
|
38
|
+
"commit": "3547a335f47efb90f52c10443dc85f755046a324"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Fri, 07 Oct 2022 20:30:16 GMT",
|
|
45
|
+
"tag": "@fluentui-react-native/apple-theme_v0.15.5",
|
|
46
|
+
"version": "0.15.5",
|
|
47
|
+
"comments": {
|
|
48
|
+
"patch": [
|
|
49
|
+
{
|
|
50
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
51
|
+
"package": "@fluentui-react-native/apple-theme",
|
|
52
|
+
"commit": "6bdf75b9ef629d801683883b31fc59c399d7a516",
|
|
53
|
+
"comment": "Remove hardcoded tokens, use shadow tokens from pipeline"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Thu, 06 Oct 2022 17:24:49 GMT",
|
|
6
60
|
"tag": "@fluentui-react-native/apple-theme_v0.15.4",
|
|
7
61
|
"version": "0.15.4",
|
|
8
62
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/apple-theme
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Oct 2022 22:39:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.16.0
|
|
8
|
+
|
|
9
|
+
Tue, 11 Oct 2022 22:39:43 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- Add new spacing tokens (adam.gleitman@gmail.com)
|
|
14
|
+
- Bump @fluentui-react-native/default-theme to v0.16.3
|
|
15
|
+
- Bump @fluentui-react-native/theme to v0.7.5
|
|
16
|
+
- Bump @fluentui-react-native/theme-types to v0.21.0
|
|
17
|
+
- Bump @fluentui-react-native/theming-utils to v0.16.1
|
|
18
|
+
|
|
19
|
+
## 0.15.5
|
|
20
|
+
|
|
21
|
+
Fri, 07 Oct 2022 20:30:16 GMT
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Remove hardcoded tokens, use shadow tokens from pipeline (78454019+lyzhan7@users.noreply.github.com)
|
|
26
|
+
|
|
7
27
|
## 0.15.4
|
|
8
28
|
|
|
9
|
-
Thu, 06 Oct 2022 17:
|
|
29
|
+
Thu, 06 Oct 2022 17:24:49 GMT
|
|
10
30
|
|
|
11
31
|
### Patches
|
|
12
32
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"appleShadows.ios.d.ts","sourceRoot":"","sources":["../src/appleShadows.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAK3E,wBAAgB,UAAU,IAAI,qBAAqB,CAIlD"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
|
|
2
|
+
import { Appearance } from 'react-native';
|
|
3
|
+
import { createiOSShadowAliasTokens } from './createiOSAliasTokens';
|
|
4
|
+
export function iOSShadows() {
|
|
5
|
+
var appearance = Appearance.getColorScheme();
|
|
6
|
+
var mode = getCurrentAppearance(appearance, 'light');
|
|
7
|
+
return createiOSShadowAliasTokens(mode);
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=appleShadows.ios.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"appleShadows.ios.js","sourceRoot":"","sources":["../src/appleShadows.ios.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,UAAU,UAAU;IACxB,IAAM,UAAU,GAAG,UAAU,CAAC,cAAc,EAAE,CAAC;IAC/C,IAAM,IAAI,GAAG,oBAAoB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACvD,OAAO,0BAA0B,CAAC,IAAI,CAAC,CAAC;AAC1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appleTheme.ios.d.ts","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"appleTheme.ios.d.ts","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAW,MAAM,oCAAoC,CAAC;AAmIpE,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC"}
|
package/lib/appleTheme.ios.js
CHANGED
|
@@ -1,7 +1,20 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import globalTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-global.json';
|
|
1
13
|
import { paletteFromAppleColors } from './appleColors.ios';
|
|
2
14
|
import { appleTypography } from './appleTypography.ios';
|
|
15
|
+
import { iOSShadows } from './appleShadows.ios';
|
|
3
16
|
function appleSpacing() {
|
|
4
|
-
return { s2: '4px', s1: '8px',
|
|
17
|
+
return __assign({ s2: '4px', s1: '8px', l1: '20px', l2: '32px' }, globalTokens.spacing);
|
|
5
18
|
}
|
|
6
19
|
var appleComponents = {
|
|
7
20
|
// The Default Button corresponds to the "secondary outline" button style on iOS
|
|
@@ -113,61 +126,10 @@ var appleComponents = {
|
|
|
113
126
|
},
|
|
114
127
|
},
|
|
115
128
|
};
|
|
116
|
-
// mocked out
|
|
117
|
-
var iOSShadows = {
|
|
118
|
-
shadow2: {
|
|
119
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
120
|
-
key: { x: 0, y: 1, blur: 2, color: '#00000024' },
|
|
121
|
-
},
|
|
122
|
-
shadow4: {
|
|
123
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
124
|
-
key: { x: 0, y: 2, blur: 4, color: '#00000024' },
|
|
125
|
-
},
|
|
126
|
-
shadow8: {
|
|
127
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
128
|
-
key: { x: 0, y: 4, blur: 8, color: '#00000024' },
|
|
129
|
-
},
|
|
130
|
-
shadow16: {
|
|
131
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
132
|
-
key: { x: 0, y: 8, blur: 16, color: '#00000024' },
|
|
133
|
-
},
|
|
134
|
-
shadow28: {
|
|
135
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#00000033' },
|
|
136
|
-
key: { x: 0, y: 14, blur: 28, color: '#0000003d' },
|
|
137
|
-
},
|
|
138
|
-
shadow64: {
|
|
139
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#00000033' },
|
|
140
|
-
key: { x: 0, y: 32, blur: 64, color: '#0000003d' },
|
|
141
|
-
},
|
|
142
|
-
shadow2brand: {
|
|
143
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
144
|
-
key: { x: 0, y: 1, blur: 2, color: '#00000040' },
|
|
145
|
-
},
|
|
146
|
-
shadow4brand: {
|
|
147
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
148
|
-
key: { x: 0, y: 2, blur: 4, color: '#00000040' },
|
|
149
|
-
},
|
|
150
|
-
shadow8brand: {
|
|
151
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
152
|
-
key: { x: 0, y: 4, blur: 8, color: '#00000040' },
|
|
153
|
-
},
|
|
154
|
-
shadow16brand: {
|
|
155
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
156
|
-
key: { x: 0, y: 8, blur: 16, color: '#00000040' },
|
|
157
|
-
},
|
|
158
|
-
shadow28brand: {
|
|
159
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#0000004d' },
|
|
160
|
-
key: { x: 0, y: 14, blur: 28, color: '#00000040' },
|
|
161
|
-
},
|
|
162
|
-
shadow64brand: {
|
|
163
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#0000004d' },
|
|
164
|
-
key: { x: 0, y: 32, blur: 64, color: '#00000040' },
|
|
165
|
-
},
|
|
166
|
-
};
|
|
167
129
|
export var BaseAppleLightThemeIOS = {
|
|
168
130
|
colors: paletteFromAppleColors(false),
|
|
169
131
|
typography: appleTypography(),
|
|
170
|
-
shadows: iOSShadows,
|
|
132
|
+
shadows: iOSShadows(),
|
|
171
133
|
spacing: appleSpacing(),
|
|
172
134
|
components: appleComponents,
|
|
173
135
|
host: { appearance: 'light' },
|
|
@@ -175,7 +137,7 @@ export var BaseAppleLightThemeIOS = {
|
|
|
175
137
|
export var BaseAppleDarkThemeIOS = {
|
|
176
138
|
colors: paletteFromAppleColors(true),
|
|
177
139
|
typography: appleTypography(),
|
|
178
|
-
shadows: iOSShadows,
|
|
140
|
+
shadows: iOSShadows(),
|
|
179
141
|
spacing: appleSpacing(),
|
|
180
142
|
components: appleComponents,
|
|
181
143
|
host: { appearance: 'dark' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appleTheme.ios.js","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"appleTheme.ios.js","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,YAAY,MAAM,mEAAmE,CAAC;AAG7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,SAAS,YAAY;IACnB,kBACE,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,IAEP,YAAY,CAAC,OAAO,EACvB;AACJ,CAAC;AAED,IAAM,eAAe,GAAG;IACtB,gFAAgF;IAChF,MAAM,EAAE;QACN,MAAM,EAAE;YACN,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,CAAC;SACf;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC,EAAE,2CAA2C;aACvD;SACF;QACD,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,eAAe,EAAE,EAAE;gBACnB,iBAAiB,EAAE,EAAE;aACtB;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,SAAS,EAAE,CAAC;aACb;SACF;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;SACX;KACF;IAED,aAAa,EAAE;QACb,MAAM,EAAE;YACN,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,CAAC;SACf;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC,EAAE,2CAA2C;aACvD;SACF;QACD,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,eAAe,EAAE,EAAE;gBACnB,iBAAiB,EAAE,EAAE;aACtB;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE;aACd;SACF;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;SACX;KACF;IAED,aAAa,EAAE;QACb,MAAM,EAAE;YACN,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,CAAC;SACf;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC,EAAE,2CAA2C;aACvD;SACF;QACD,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,eAAe,EAAE,CAAC;gBAClB,iBAAiB,EAAE,EAAE;aACtB;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;aAChB;SACF;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;SACX;KACF;IAED,OAAO,EAAE;QACP,MAAM,EAAE;YACN,OAAO,EAAE,cAAc;SACxB;KACF;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE;gBACb,cAAc,EAAE,CAAC;aAClB;SACF;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,YAAY,EAAE,GAAG;gBACjB,SAAS,EAAE,EAAE;gBACb,QAAQ,EAAE,EAAE;aACb;SACF;QACD,aAAa,EAAE;YACb,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,KAAK,EAAE;gBACL,cAAc,EAAE,GAAG;gBACnB,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,CAAC;aACf;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAU;IAC3C,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACrC,UAAU,EAAE,eAAe,EAAE;IAC7B,OAAO,EAAE,UAAU,EAAE;IACrB,OAAO,EAAE,YAAY,EAAE;IACvB,UAAU,EAAE,eAAe;IAC3B,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE;CAC9B,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAU;IAC1C,MAAM,EAAE,sBAAsB,CAAC,IAAI,CAAC;IACpC,UAAU,EAAE,eAAe,EAAE;IAC7B,OAAO,EAAE,UAAU,EAAE;IACrB,OAAO,EAAE,YAAY,EAAE;IACvB,UAAU,EAAE,eAAe;IAC3B,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;CAC7B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
2
|
+
import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types';
|
|
3
|
+
declare function createiOSShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition;
|
|
4
|
+
export declare const createiOSShadowAliasTokens: typeof createiOSShadowAliasTokensWorker;
|
|
5
|
+
export {};
|
|
6
|
+
//# sourceMappingURL=createiOSAliasTokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createiOSAliasTokens.d.ts","sourceRoot":"","sources":["../src/createiOSAliasTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAE5F,iBAAS,gCAAgC,CAAC,IAAI,EAAE,iBAAiB,GAAG,qBAAqB,CAGxF;AAED,eAAO,MAAM,0BAA0B,yCAA4C,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { getiOSShadowTokens } from './getiOSTokens';
|
|
2
|
+
import { mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
|
|
3
|
+
import { memoize } from '@fluentui-react-native/memo-cache';
|
|
4
|
+
function createiOSShadowAliasTokensWorker(mode) {
|
|
5
|
+
var aliasTokens = getiOSShadowTokens(mode);
|
|
6
|
+
return mapPipelineToShadow(aliasTokens);
|
|
7
|
+
}
|
|
8
|
+
export var createiOSShadowAliasTokens = memoize(createiOSShadowAliasTokensWorker);
|
|
9
|
+
//# sourceMappingURL=createiOSAliasTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createiOSAliasTokens.js","sourceRoot":"","sources":["../src/createiOSAliasTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAG5D,SAAS,gCAAgC,CAAC,IAAuB;IAC/D,IAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,mBAAmB,CAAC,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,CAAC,IAAM,0BAA0B,GAAG,OAAO,CAAC,gCAAgC,CAAC,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
2
|
+
export declare function getiOSShadowTokens(mode: AppearanceOptions): {
|
|
3
|
+
"2": {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
blur: number;
|
|
7
|
+
color: string;
|
|
8
|
+
}[];
|
|
9
|
+
"4": {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
blur: number;
|
|
13
|
+
color: string;
|
|
14
|
+
}[];
|
|
15
|
+
"8": {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
blur: number;
|
|
19
|
+
color: string;
|
|
20
|
+
}[];
|
|
21
|
+
"16": {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
24
|
+
blur: number;
|
|
25
|
+
color: string;
|
|
26
|
+
}[];
|
|
27
|
+
"28": {
|
|
28
|
+
x: number;
|
|
29
|
+
y: number;
|
|
30
|
+
blur: number;
|
|
31
|
+
color: string;
|
|
32
|
+
}[];
|
|
33
|
+
"64": {
|
|
34
|
+
x: number;
|
|
35
|
+
y: number;
|
|
36
|
+
blur: number;
|
|
37
|
+
color: string;
|
|
38
|
+
}[];
|
|
39
|
+
brand: {
|
|
40
|
+
"2": {
|
|
41
|
+
x: number;
|
|
42
|
+
y: number;
|
|
43
|
+
blur: number;
|
|
44
|
+
color: string;
|
|
45
|
+
}[];
|
|
46
|
+
"4": {
|
|
47
|
+
x: number;
|
|
48
|
+
y: number;
|
|
49
|
+
blur: number;
|
|
50
|
+
color: string;
|
|
51
|
+
}[];
|
|
52
|
+
"8": {
|
|
53
|
+
x: number;
|
|
54
|
+
y: number;
|
|
55
|
+
blur: number;
|
|
56
|
+
color: string;
|
|
57
|
+
}[];
|
|
58
|
+
"16": {
|
|
59
|
+
x: number;
|
|
60
|
+
y: number;
|
|
61
|
+
blur: number;
|
|
62
|
+
color: string;
|
|
63
|
+
}[];
|
|
64
|
+
"28": {
|
|
65
|
+
x: number;
|
|
66
|
+
y: number;
|
|
67
|
+
blur: number;
|
|
68
|
+
color: string;
|
|
69
|
+
}[];
|
|
70
|
+
"64": {
|
|
71
|
+
x: number;
|
|
72
|
+
y: number;
|
|
73
|
+
blur: number;
|
|
74
|
+
color: string;
|
|
75
|
+
}[];
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=getiOSTokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json';
|
|
2
|
+
import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json';
|
|
3
|
+
import { assertNever } from 'assert-never';
|
|
4
|
+
export function getiOSShadowTokens(mode) {
|
|
5
|
+
if (mode === 'light') {
|
|
6
|
+
return iOSLightShadowTokens.shadow;
|
|
7
|
+
}
|
|
8
|
+
else if (mode === 'dark') {
|
|
9
|
+
return iOSDarkShadowTokens.shadow;
|
|
10
|
+
}
|
|
11
|
+
else if (mode === 'highContrast') {
|
|
12
|
+
throw new Error('highContrast is not a valid AppearanceOptions on iOS');
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
assertNever(mode);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=getiOSTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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,MAAM,CAAC;KACpC;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,mBAAmB,CAAC,MAAM,CAAC;KACnC;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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"appleShadows.ios.d.ts","sourceRoot":"","sources":["../src/appleShadows.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAK3E,wBAAgB,UAAU,IAAI,qBAAqB,CAIlD"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.iOSShadows = void 0;
|
|
4
|
+
var theming_utils_1 = require("@fluentui-react-native/theming-utils");
|
|
5
|
+
var react_native_1 = require("react-native");
|
|
6
|
+
var createiOSAliasTokens_1 = require("./createiOSAliasTokens");
|
|
7
|
+
function iOSShadows() {
|
|
8
|
+
var appearance = react_native_1.Appearance.getColorScheme();
|
|
9
|
+
var mode = (0, theming_utils_1.getCurrentAppearance)(appearance, 'light');
|
|
10
|
+
return (0, createiOSAliasTokens_1.createiOSShadowAliasTokens)(mode);
|
|
11
|
+
}
|
|
12
|
+
exports.iOSShadows = iOSShadows;
|
|
13
|
+
//# sourceMappingURL=appleShadows.ios.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"appleShadows.ios.js","sourceRoot":"","sources":["../src/appleShadows.ios.ts"],"names":[],"mappings":";;;AACA,sEAA4E;AAC5E,6CAA0C;AAC1C,+DAAoE;AAEpE,SAAgB,UAAU;IACxB,IAAM,UAAU,GAAG,yBAAU,CAAC,cAAc,EAAE,CAAC;IAC/C,IAAM,IAAI,GAAG,IAAA,oCAAoB,EAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACvD,OAAO,IAAA,iDAA0B,EAAC,IAAI,CAAC,CAAC;AAC1C,CAAC;AAJD,gCAIC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appleTheme.ios.d.ts","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"appleTheme.ios.d.ts","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAW,MAAM,oCAAoC,CAAC;AAmIpE,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC"}
|
|
@@ -1,10 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
2
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
17
|
exports.BaseAppleDarkThemeIOS = exports.BaseAppleLightThemeIOS = void 0;
|
|
18
|
+
var tokens_global_json_1 = __importDefault(require("@fluentui-react-native/design-tokens-ios/light/tokens-global.json"));
|
|
4
19
|
var appleColors_ios_1 = require("./appleColors.ios");
|
|
5
20
|
var appleTypography_ios_1 = require("./appleTypography.ios");
|
|
21
|
+
var appleShadows_ios_1 = require("./appleShadows.ios");
|
|
6
22
|
function appleSpacing() {
|
|
7
|
-
return { s2: '4px', s1: '8px',
|
|
23
|
+
return __assign({ s2: '4px', s1: '8px', l1: '20px', l2: '32px' }, tokens_global_json_1.default.spacing);
|
|
8
24
|
}
|
|
9
25
|
var appleComponents = {
|
|
10
26
|
// The Default Button corresponds to the "secondary outline" button style on iOS
|
|
@@ -116,61 +132,10 @@ var appleComponents = {
|
|
|
116
132
|
},
|
|
117
133
|
},
|
|
118
134
|
};
|
|
119
|
-
// mocked out
|
|
120
|
-
var iOSShadows = {
|
|
121
|
-
shadow2: {
|
|
122
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
123
|
-
key: { x: 0, y: 1, blur: 2, color: '#00000024' },
|
|
124
|
-
},
|
|
125
|
-
shadow4: {
|
|
126
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
127
|
-
key: { x: 0, y: 2, blur: 4, color: '#00000024' },
|
|
128
|
-
},
|
|
129
|
-
shadow8: {
|
|
130
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
131
|
-
key: { x: 0, y: 4, blur: 8, color: '#00000024' },
|
|
132
|
-
},
|
|
133
|
-
shadow16: {
|
|
134
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
135
|
-
key: { x: 0, y: 8, blur: 16, color: '#00000024' },
|
|
136
|
-
},
|
|
137
|
-
shadow28: {
|
|
138
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#00000033' },
|
|
139
|
-
key: { x: 0, y: 14, blur: 28, color: '#0000003d' },
|
|
140
|
-
},
|
|
141
|
-
shadow64: {
|
|
142
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#00000033' },
|
|
143
|
-
key: { x: 0, y: 32, blur: 64, color: '#0000003d' },
|
|
144
|
-
},
|
|
145
|
-
shadow2brand: {
|
|
146
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
147
|
-
key: { x: 0, y: 1, blur: 2, color: '#00000040' },
|
|
148
|
-
},
|
|
149
|
-
shadow4brand: {
|
|
150
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
151
|
-
key: { x: 0, y: 2, blur: 4, color: '#00000040' },
|
|
152
|
-
},
|
|
153
|
-
shadow8brand: {
|
|
154
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
155
|
-
key: { x: 0, y: 4, blur: 8, color: '#00000040' },
|
|
156
|
-
},
|
|
157
|
-
shadow16brand: {
|
|
158
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
159
|
-
key: { x: 0, y: 8, blur: 16, color: '#00000040' },
|
|
160
|
-
},
|
|
161
|
-
shadow28brand: {
|
|
162
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#0000004d' },
|
|
163
|
-
key: { x: 0, y: 14, blur: 28, color: '#00000040' },
|
|
164
|
-
},
|
|
165
|
-
shadow64brand: {
|
|
166
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#0000004d' },
|
|
167
|
-
key: { x: 0, y: 32, blur: 64, color: '#00000040' },
|
|
168
|
-
},
|
|
169
|
-
};
|
|
170
135
|
exports.BaseAppleLightThemeIOS = {
|
|
171
136
|
colors: (0, appleColors_ios_1.paletteFromAppleColors)(false),
|
|
172
137
|
typography: (0, appleTypography_ios_1.appleTypography)(),
|
|
173
|
-
shadows: iOSShadows,
|
|
138
|
+
shadows: (0, appleShadows_ios_1.iOSShadows)(),
|
|
174
139
|
spacing: appleSpacing(),
|
|
175
140
|
components: appleComponents,
|
|
176
141
|
host: { appearance: 'light' },
|
|
@@ -178,7 +143,7 @@ exports.BaseAppleLightThemeIOS = {
|
|
|
178
143
|
exports.BaseAppleDarkThemeIOS = {
|
|
179
144
|
colors: (0, appleColors_ios_1.paletteFromAppleColors)(true),
|
|
180
145
|
typography: (0, appleTypography_ios_1.appleTypography)(),
|
|
181
|
-
shadows: iOSShadows,
|
|
146
|
+
shadows: (0, appleShadows_ios_1.iOSShadows)(),
|
|
182
147
|
spacing: appleSpacing(),
|
|
183
148
|
components: appleComponents,
|
|
184
149
|
host: { appearance: 'dark' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appleTheme.ios.js","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"appleTheme.ios.js","sourceRoot":"","sources":["../src/appleTheme.ios.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
2
|
+
import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types';
|
|
3
|
+
declare function createiOSShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition;
|
|
4
|
+
export declare const createiOSShadowAliasTokens: typeof createiOSShadowAliasTokensWorker;
|
|
5
|
+
export {};
|
|
6
|
+
//# sourceMappingURL=createiOSAliasTokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createiOSAliasTokens.d.ts","sourceRoot":"","sources":["../src/createiOSAliasTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAE5F,iBAAS,gCAAgC,CAAC,IAAI,EAAE,iBAAiB,GAAG,qBAAqB,CAGxF;AAED,eAAO,MAAM,0BAA0B,yCAA4C,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.createiOSShadowAliasTokens = void 0;
|
|
4
|
+
var getiOSTokens_1 = require("./getiOSTokens");
|
|
5
|
+
var theming_utils_1 = require("@fluentui-react-native/theming-utils");
|
|
6
|
+
var memo_cache_1 = require("@fluentui-react-native/memo-cache");
|
|
7
|
+
function createiOSShadowAliasTokensWorker(mode) {
|
|
8
|
+
var aliasTokens = (0, getiOSTokens_1.getiOSShadowTokens)(mode);
|
|
9
|
+
return (0, theming_utils_1.mapPipelineToShadow)(aliasTokens);
|
|
10
|
+
}
|
|
11
|
+
exports.createiOSShadowAliasTokens = (0, memo_cache_1.memoize)(createiOSShadowAliasTokensWorker);
|
|
12
|
+
//# sourceMappingURL=createiOSAliasTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createiOSAliasTokens.js","sourceRoot":"","sources":["../src/createiOSAliasTokens.ts"],"names":[],"mappings":";;;AAAA,+CAAoD;AAEpD,sEAA2E;AAC3E,gEAA4D;AAG5D,SAAS,gCAAgC,CAAC,IAAuB;IAC/D,IAAM,WAAW,GAAG,IAAA,iCAAkB,EAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,IAAA,mCAAmB,EAAC,WAAW,CAAC,CAAC;AAC1C,CAAC;AAEY,QAAA,0BAA0B,GAAG,IAAA,oBAAO,EAAC,gCAAgC,CAAC,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
2
|
+
export declare function getiOSShadowTokens(mode: AppearanceOptions): {
|
|
3
|
+
"2": {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
blur: number;
|
|
7
|
+
color: string;
|
|
8
|
+
}[];
|
|
9
|
+
"4": {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
blur: number;
|
|
13
|
+
color: string;
|
|
14
|
+
}[];
|
|
15
|
+
"8": {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
blur: number;
|
|
19
|
+
color: string;
|
|
20
|
+
}[];
|
|
21
|
+
"16": {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
24
|
+
blur: number;
|
|
25
|
+
color: string;
|
|
26
|
+
}[];
|
|
27
|
+
"28": {
|
|
28
|
+
x: number;
|
|
29
|
+
y: number;
|
|
30
|
+
blur: number;
|
|
31
|
+
color: string;
|
|
32
|
+
}[];
|
|
33
|
+
"64": {
|
|
34
|
+
x: number;
|
|
35
|
+
y: number;
|
|
36
|
+
blur: number;
|
|
37
|
+
color: string;
|
|
38
|
+
}[];
|
|
39
|
+
brand: {
|
|
40
|
+
"2": {
|
|
41
|
+
x: number;
|
|
42
|
+
y: number;
|
|
43
|
+
blur: number;
|
|
44
|
+
color: string;
|
|
45
|
+
}[];
|
|
46
|
+
"4": {
|
|
47
|
+
x: number;
|
|
48
|
+
y: number;
|
|
49
|
+
blur: number;
|
|
50
|
+
color: string;
|
|
51
|
+
}[];
|
|
52
|
+
"8": {
|
|
53
|
+
x: number;
|
|
54
|
+
y: number;
|
|
55
|
+
blur: number;
|
|
56
|
+
color: string;
|
|
57
|
+
}[];
|
|
58
|
+
"16": {
|
|
59
|
+
x: number;
|
|
60
|
+
y: number;
|
|
61
|
+
blur: number;
|
|
62
|
+
color: string;
|
|
63
|
+
}[];
|
|
64
|
+
"28": {
|
|
65
|
+
x: number;
|
|
66
|
+
y: number;
|
|
67
|
+
blur: number;
|
|
68
|
+
color: string;
|
|
69
|
+
}[];
|
|
70
|
+
"64": {
|
|
71
|
+
x: number;
|
|
72
|
+
y: number;
|
|
73
|
+
blur: number;
|
|
74
|
+
color: string;
|
|
75
|
+
}[];
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=getiOSTokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.getiOSShadowTokens = void 0;
|
|
7
|
+
var tokens_shadow_json_1 = __importDefault(require("@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json"));
|
|
8
|
+
var tokens_shadow_json_2 = __importDefault(require("@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json"));
|
|
9
|
+
var assert_never_1 = require("assert-never");
|
|
10
|
+
function getiOSShadowTokens(mode) {
|
|
11
|
+
if (mode === 'light') {
|
|
12
|
+
return tokens_shadow_json_1.default.shadow;
|
|
13
|
+
}
|
|
14
|
+
else if (mode === 'dark') {
|
|
15
|
+
return tokens_shadow_json_2.default.shadow;
|
|
16
|
+
}
|
|
17
|
+
else if (mode === 'highContrast') {
|
|
18
|
+
throw new Error('highContrast is not a valid AppearanceOptions on iOS');
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
(0, assert_never_1.assertNever)(mode);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
exports.getiOSShadowTokens = getiOSShadowTokens;
|
|
25
|
+
//# sourceMappingURL=getiOSTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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,MAAM,CAAC;KACpC;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,4BAAmB,CAAC,MAAM,CAAC;KACnC;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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/apple-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "A FluentUI React Native theme that pulls constants from FluentUI Apple",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Microsoft <fluentuinativeowners@microsoft.com>",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
"directory": "packages/theming/apple-theme"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@fluentui-react-native/default-theme": ">=0.16.
|
|
31
|
-
"@fluentui-react-native/design-tokens-ios": "^0.
|
|
30
|
+
"@fluentui-react-native/default-theme": ">=0.16.3 <1.0.0",
|
|
31
|
+
"@fluentui-react-native/design-tokens-ios": "^0.23.0",
|
|
32
32
|
"@fluentui-react-native/design-tokens-macos": "^0.13.0",
|
|
33
33
|
"@fluentui-react-native/memo-cache": "^1.1.7",
|
|
34
|
-
"@fluentui-react-native/theme": ">=0.7.
|
|
35
|
-
"@fluentui-react-native/theme-types": ">=0.
|
|
36
|
-
"@fluentui-react-native/theming-utils": "^0.16.
|
|
34
|
+
"@fluentui-react-native/theme": ">=0.7.5 <1.0.0",
|
|
35
|
+
"@fluentui-react-native/theme-types": ">=0.21.0 <1.0.0",
|
|
36
|
+
"@fluentui-react-native/theming-utils": "^0.16.1",
|
|
37
37
|
"assert-never": "^1.2.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types';
|
|
2
|
+
import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
|
|
3
|
+
import { Appearance } from 'react-native';
|
|
4
|
+
import { createiOSShadowAliasTokens } from './createiOSAliasTokens';
|
|
5
|
+
|
|
6
|
+
export function iOSShadows(): ThemeShadowDefinition {
|
|
7
|
+
const appearance = Appearance.getColorScheme();
|
|
8
|
+
const mode = getCurrentAppearance(appearance, 'light');
|
|
9
|
+
return createiOSShadowAliasTokens(mode);
|
|
10
|
+
}
|
package/src/appleTheme.ios.ts
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
|
+
import globalTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-global.json';
|
|
2
|
+
|
|
1
3
|
import { Theme, Spacing } from '@fluentui-react-native/theme-types';
|
|
2
4
|
import { paletteFromAppleColors } from './appleColors.ios';
|
|
3
5
|
import { appleTypography } from './appleTypography.ios';
|
|
6
|
+
import { iOSShadows } from './appleShadows.ios';
|
|
4
7
|
|
|
5
8
|
function appleSpacing(): Spacing {
|
|
6
|
-
return {
|
|
9
|
+
return {
|
|
10
|
+
s2: '4px',
|
|
11
|
+
s1: '8px',
|
|
12
|
+
l1: '20px',
|
|
13
|
+
l2: '32px',
|
|
14
|
+
// v2 types
|
|
15
|
+
...globalTokens.spacing,
|
|
16
|
+
};
|
|
7
17
|
}
|
|
8
18
|
|
|
9
19
|
const appleComponents = {
|
|
@@ -121,62 +131,10 @@ const appleComponents = {
|
|
|
121
131
|
},
|
|
122
132
|
};
|
|
123
133
|
|
|
124
|
-
// mocked out
|
|
125
|
-
const iOSShadows = {
|
|
126
|
-
shadow2: {
|
|
127
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
128
|
-
key: { x: 0, y: 1, blur: 2, color: '#00000024' },
|
|
129
|
-
},
|
|
130
|
-
shadow4: {
|
|
131
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
132
|
-
key: { x: 0, y: 2, blur: 4, color: '#00000024' },
|
|
133
|
-
},
|
|
134
|
-
shadow8: {
|
|
135
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
136
|
-
key: { x: 0, y: 4, blur: 8, color: '#00000024' },
|
|
137
|
-
},
|
|
138
|
-
shadow16: {
|
|
139
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000001f' },
|
|
140
|
-
key: { x: 0, y: 8, blur: 16, color: '#00000024' },
|
|
141
|
-
},
|
|
142
|
-
shadow28: {
|
|
143
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#00000033' },
|
|
144
|
-
key: { x: 0, y: 14, blur: 28, color: '#0000003d' },
|
|
145
|
-
},
|
|
146
|
-
shadow64: {
|
|
147
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#00000033' },
|
|
148
|
-
key: { x: 0, y: 32, blur: 64, color: '#0000003d' },
|
|
149
|
-
},
|
|
150
|
-
shadow2brand: {
|
|
151
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
152
|
-
key: { x: 0, y: 1, blur: 2, color: '#00000040' },
|
|
153
|
-
},
|
|
154
|
-
shadow4brand: {
|
|
155
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
156
|
-
key: { x: 0, y: 2, blur: 4, color: '#00000040' },
|
|
157
|
-
},
|
|
158
|
-
shadow8brand: {
|
|
159
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
160
|
-
key: { x: 0, y: 4, blur: 8, color: '#00000040' },
|
|
161
|
-
},
|
|
162
|
-
shadow16brand: {
|
|
163
|
-
ambient: { x: 0, y: 0, blur: 2, color: '#0000004d' },
|
|
164
|
-
key: { x: 0, y: 8, blur: 16, color: '#00000040' },
|
|
165
|
-
},
|
|
166
|
-
shadow28brand: {
|
|
167
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#0000004d' },
|
|
168
|
-
key: { x: 0, y: 14, blur: 28, color: '#00000040' },
|
|
169
|
-
},
|
|
170
|
-
shadow64brand: {
|
|
171
|
-
ambient: { x: 0, y: 0, blur: 8, color: '#0000004d' },
|
|
172
|
-
key: { x: 0, y: 32, blur: 64, color: '#00000040' },
|
|
173
|
-
},
|
|
174
|
-
};
|
|
175
|
-
|
|
176
134
|
export const BaseAppleLightThemeIOS: Theme = {
|
|
177
135
|
colors: paletteFromAppleColors(false),
|
|
178
136
|
typography: appleTypography(),
|
|
179
|
-
shadows: iOSShadows,
|
|
137
|
+
shadows: iOSShadows(),
|
|
180
138
|
spacing: appleSpacing(),
|
|
181
139
|
components: appleComponents,
|
|
182
140
|
host: { appearance: 'light' },
|
|
@@ -185,7 +143,7 @@ export const BaseAppleLightThemeIOS: Theme = {
|
|
|
185
143
|
export const BaseAppleDarkThemeIOS: Theme = {
|
|
186
144
|
colors: paletteFromAppleColors(true),
|
|
187
145
|
typography: appleTypography(),
|
|
188
|
-
shadows: iOSShadows,
|
|
146
|
+
shadows: iOSShadows(),
|
|
189
147
|
spacing: appleSpacing(),
|
|
190
148
|
components: appleComponents,
|
|
191
149
|
host: { appearance: 'dark' },
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { getiOSShadowTokens } from './getiOSTokens';
|
|
2
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
3
|
+
import { mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
|
|
4
|
+
import { memoize } from '@fluentui-react-native/memo-cache';
|
|
5
|
+
import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types';
|
|
6
|
+
|
|
7
|
+
function createiOSShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition {
|
|
8
|
+
const aliasTokens = getiOSShadowTokens(mode);
|
|
9
|
+
return mapPipelineToShadow(aliasTokens);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const createiOSShadowAliasTokens = memoize(createiOSShadowAliasTokensWorker);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json';
|
|
2
|
+
import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json';
|
|
3
|
+
import { AppearanceOptions } from '@fluentui-react-native/theme-types';
|
|
4
|
+
import { assertNever } from 'assert-never';
|
|
5
|
+
|
|
6
|
+
export function getiOSShadowTokens(mode: AppearanceOptions) {
|
|
7
|
+
if (mode === 'light') {
|
|
8
|
+
return iOSLightShadowTokens.shadow;
|
|
9
|
+
} else if (mode === 'dark') {
|
|
10
|
+
return iOSDarkShadowTokens.shadow;
|
|
11
|
+
} else if (mode === 'highContrast') {
|
|
12
|
+
throw new Error('highContrast is not a valid AppearanceOptions on iOS');
|
|
13
|
+
} else {
|
|
14
|
+
assertNever(mode);
|
|
15
|
+
}
|
|
16
|
+
}
|