@fluentui-react-native/tester 0.71.0 → 0.71.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 (10) hide show
  1. package/CHANGELOG.json +198 -21
  2. package/CHANGELOG.md +48 -2
  3. package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map +1 -1
  4. package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js +35 -14
  5. package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map +1 -1
  6. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map +1 -1
  7. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js +34 -13
  8. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map +1 -1
  9. package/package.json +22 -22
  10. package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx +46 -15
package/CHANGELOG.json CHANGED
@@ -2,7 +2,184 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 07 Jul 2022 21:22:09 GMT",
5
+ "date": "Fri, 08 Jul 2022 21:22:05 GMT",
6
+ "tag": "@fluentui-react-native/tester_v0.71.3",
7
+ "version": "0.71.3",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui-react-native/tester",
13
+ "comment": "Bump @fluentui-react-native/avatar to v1.1.8",
14
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui-react-native/tester",
19
+ "comment": "Bump @fluentui-react-native/badge to v0.0.48",
20
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui-react-native/tester",
25
+ "comment": "Bump @fluentui-react-native/button to v0.22.31",
26
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui-react-native/tester",
31
+ "comment": "Bump @fluentui-react-native/experimental-activity-indicator to v0.5.31",
32
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui-react-native/tester",
37
+ "comment": "Bump @fluentui-react-native/experimental-avatar to v0.15.3",
38
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui-react-native/tester",
43
+ "comment": "Bump @fluentui-react-native/experimental-button to v0.15.32",
44
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui-react-native/tester",
49
+ "comment": "Bump @fluentui-react-native/experimental-checkbox to v0.11.16",
50
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui-react-native/tester",
55
+ "comment": "Bump @fluentui-react-native/experimental-drawer to v0.1.15",
56
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui-react-native/tester",
61
+ "comment": "Bump @fluentui-react-native/experimental-expander to v0.3.35",
62
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui-react-native/tester",
67
+ "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.3.53",
68
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
69
+ },
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui-react-native/tester",
73
+ "comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.2",
74
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
75
+ },
76
+ {
77
+ "author": "beachball",
78
+ "package": "@fluentui-react-native/tester",
79
+ "comment": "Bump @fluentui-react-native/experimental-shimmer to v0.6.35",
80
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
81
+ },
82
+ {
83
+ "author": "beachball",
84
+ "package": "@fluentui-react-native/tester",
85
+ "comment": "Bump @fluentui-react-native/experimental-tabs to v0.4.54",
86
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
87
+ },
88
+ {
89
+ "author": "beachball",
90
+ "package": "@fluentui-react-native/tester",
91
+ "comment": "Bump @fluentui-react-native/experimental-text to v0.9.2",
92
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
93
+ },
94
+ {
95
+ "author": "beachball",
96
+ "package": "@fluentui-react-native/tester",
97
+ "comment": "Bump @fluentui-react-native/framework to v0.7.32",
98
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
99
+ },
100
+ {
101
+ "author": "beachball",
102
+ "package": "@fluentui-react-native/tester",
103
+ "comment": "Bump @fluentui-react-native/icon to v0.12.3",
104
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
105
+ },
106
+ {
107
+ "author": "beachball",
108
+ "package": "@fluentui-react-native/tester",
109
+ "comment": "Bump @fluentui-react-native/interactive-hooks to v0.16.5",
110
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
111
+ },
112
+ {
113
+ "author": "beachball",
114
+ "package": "@fluentui-react-native/tester",
115
+ "comment": "Bump @fluentui-react-native/menu to v1.0.4",
116
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
117
+ },
118
+ {
119
+ "author": "beachball",
120
+ "package": "@fluentui-react-native/tester",
121
+ "comment": "Bump @fluentui-react-native/notification to v0.4.1",
122
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
123
+ },
124
+ {
125
+ "author": "beachball",
126
+ "package": "@fluentui-react-native/tester",
127
+ "comment": "Bump @fluentui-react-native/stack to v0.6.31",
128
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
129
+ },
130
+ {
131
+ "author": "beachball",
132
+ "package": "@fluentui-react-native/tester",
133
+ "comment": "Bump @fluentui/react-native to v0.30.7",
134
+ "commit": "c489bb685c8dbe94b7b6fe88957e7ce4d3c2d000"
135
+ }
136
+ ]
137
+ }
138
+ },
139
+ {
140
+ "date": "Fri, 08 Jul 2022 18:26:51 GMT",
141
+ "tag": "@fluentui-react-native/tester_v0.71.2",
142
+ "version": "0.71.2",
143
+ "comments": {
144
+ "patch": [
145
+ {
146
+ "author": "78454019+lyzhan7@users.noreply.github.com",
147
+ "package": "@fluentui-react-native/tester",
148
+ "commit": "ef2a18b53bbc59178c30d1250ff89e64bb2ca5be",
149
+ "comment": "Change shadowDepth type from '2' to 'shadow2'"
150
+ },
151
+ {
152
+ "author": "beachball",
153
+ "package": "@fluentui-react-native/tester",
154
+ "comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.1",
155
+ "commit": "ef2a18b53bbc59178c30d1250ff89e64bb2ca5be"
156
+ }
157
+ ]
158
+ }
159
+ },
160
+ {
161
+ "date": "Fri, 08 Jul 2022 17:53:30 GMT",
162
+ "tag": "@fluentui-react-native/tester_v0.71.1",
163
+ "version": "0.71.1",
164
+ "comments": {
165
+ "patch": [
166
+ {
167
+ "author": "beachball",
168
+ "package": "@fluentui-react-native/tester",
169
+ "comment": "Bump @fluentui-react-native/avatar to v1.1.7",
170
+ "commit": "46386028c3e78892915d3c41b275ee7e788d3f2e"
171
+ },
172
+ {
173
+ "author": "beachball",
174
+ "package": "@fluentui-react-native/tester",
175
+ "comment": "Bump @fluentui-react-native/badge to v0.0.47",
176
+ "commit": "46386028c3e78892915d3c41b275ee7e788d3f2e"
177
+ }
178
+ ]
179
+ }
180
+ },
181
+ {
182
+ "date": "Thu, 07 Jul 2022 21:24:07 GMT",
6
183
  "tag": "@fluentui-react-native/tester_v0.71.0",
7
184
  "version": "0.71.0",
8
185
  "comments": {
@@ -17,121 +194,121 @@
17
194
  "author": "beachball",
18
195
  "package": "@fluentui-react-native/tester",
19
196
  "comment": "Bump @fluentui-react-native/avatar to v1.1.6",
20
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
197
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
21
198
  },
22
199
  {
23
200
  "author": "beachball",
24
201
  "package": "@fluentui-react-native/tester",
25
202
  "comment": "Bump @fluentui-react-native/badge to v0.0.46",
26
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
203
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
27
204
  },
28
205
  {
29
206
  "author": "beachball",
30
207
  "package": "@fluentui-react-native/tester",
31
208
  "comment": "Bump @fluentui-react-native/button to v0.22.30",
32
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
209
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
33
210
  },
34
211
  {
35
212
  "author": "beachball",
36
213
  "package": "@fluentui-react-native/tester",
37
214
  "comment": "Bump @fluentui-react-native/experimental-activity-indicator to v0.5.30",
38
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
215
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
39
216
  },
40
217
  {
41
218
  "author": "beachball",
42
219
  "package": "@fluentui-react-native/tester",
43
220
  "comment": "Bump @fluentui-react-native/experimental-avatar to v0.15.2",
44
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
221
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
45
222
  },
46
223
  {
47
224
  "author": "beachball",
48
225
  "package": "@fluentui-react-native/tester",
49
226
  "comment": "Bump @fluentui-react-native/experimental-button to v0.15.31",
50
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
227
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
51
228
  },
52
229
  {
53
230
  "author": "beachball",
54
231
  "package": "@fluentui-react-native/tester",
55
232
  "comment": "Bump @fluentui-react-native/experimental-checkbox to v0.11.15",
56
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
233
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
57
234
  },
58
235
  {
59
236
  "author": "beachball",
60
237
  "package": "@fluentui-react-native/tester",
61
238
  "comment": "Bump @fluentui-react-native/experimental-drawer to v0.1.14",
62
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
239
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
63
240
  },
64
241
  {
65
242
  "author": "beachball",
66
243
  "package": "@fluentui-react-native/tester",
67
244
  "comment": "Bump @fluentui-react-native/experimental-expander to v0.3.34",
68
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
245
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
69
246
  },
70
247
  {
71
248
  "author": "beachball",
72
249
  "package": "@fluentui-react-native/tester",
73
250
  "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.3.52",
74
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
251
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
75
252
  },
76
253
  {
77
254
  "author": "beachball",
78
255
  "package": "@fluentui-react-native/tester",
79
256
  "comment": "Bump @fluentui-react-native/experimental-shimmer to v0.6.34",
80
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
257
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
81
258
  },
82
259
  {
83
260
  "author": "beachball",
84
261
  "package": "@fluentui-react-native/tester",
85
262
  "comment": "Bump @fluentui-react-native/experimental-tabs to v0.4.53",
86
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
263
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
87
264
  },
88
265
  {
89
266
  "author": "beachball",
90
267
  "package": "@fluentui-react-native/tester",
91
268
  "comment": "Bump @fluentui-react-native/experimental-text to v0.9.1",
92
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
269
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
93
270
  },
94
271
  {
95
272
  "author": "beachball",
96
273
  "package": "@fluentui-react-native/tester",
97
274
  "comment": "Bump @fluentui-react-native/framework to v0.7.31",
98
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
275
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
99
276
  },
100
277
  {
101
278
  "author": "beachball",
102
279
  "package": "@fluentui-react-native/tester",
103
280
  "comment": "Bump @fluentui-react-native/icon to v0.12.2",
104
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
281
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
105
282
  },
106
283
  {
107
284
  "author": "beachball",
108
285
  "package": "@fluentui-react-native/tester",
109
286
  "comment": "Bump @fluentui-react-native/interactive-hooks to v0.16.4",
110
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
287
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
111
288
  },
112
289
  {
113
290
  "author": "beachball",
114
291
  "package": "@fluentui-react-native/tester",
115
292
  "comment": "Bump @fluentui-react-native/menu to v1.0.3",
116
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
293
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
117
294
  },
118
295
  {
119
296
  "author": "beachball",
120
297
  "package": "@fluentui-react-native/tester",
121
298
  "comment": "Bump @fluentui-react-native/notification to v0.4.0",
122
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
299
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
123
300
  },
124
301
  {
125
302
  "author": "beachball",
126
303
  "package": "@fluentui-react-native/tester",
127
304
  "comment": "Bump @fluentui-react-native/stack to v0.6.30",
128
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
305
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
129
306
  },
130
307
  {
131
308
  "author": "beachball",
132
309
  "package": "@fluentui-react-native/tester",
133
310
  "comment": "Bump @fluentui/react-native to v0.30.6",
134
- "commit": "f10be0c3afa914ad42fcb639dc4d0a65a87c6425"
311
+ "commit": "b4030a050a2c7223f45f498f3ab8cfc7f87059d9"
135
312
  }
136
313
  ]
137
314
  }
package/CHANGELOG.md CHANGED
@@ -1,12 +1,58 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Thu, 07 Jul 2022 21:22:09 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 08 Jul 2022 21:22:05 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.71.3
8
+
9
+ Fri, 08 Jul 2022 21:22:05 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @fluentui-react-native/avatar to v1.1.8
14
+ - Bump @fluentui-react-native/badge to v0.0.48
15
+ - Bump @fluentui-react-native/button to v0.22.31
16
+ - Bump @fluentui-react-native/experimental-activity-indicator to v0.5.31
17
+ - Bump @fluentui-react-native/experimental-avatar to v0.15.3
18
+ - Bump @fluentui-react-native/experimental-button to v0.15.32
19
+ - Bump @fluentui-react-native/experimental-checkbox to v0.11.16
20
+ - Bump @fluentui-react-native/experimental-drawer to v0.1.15
21
+ - Bump @fluentui-react-native/experimental-expander to v0.3.35
22
+ - Bump @fluentui-react-native/experimental-menu-button to v0.3.53
23
+ - Bump @fluentui-react-native/experimental-shadow to v0.2.2
24
+ - Bump @fluentui-react-native/experimental-shimmer to v0.6.35
25
+ - Bump @fluentui-react-native/experimental-tabs to v0.4.54
26
+ - Bump @fluentui-react-native/experimental-text to v0.9.2
27
+ - Bump @fluentui-react-native/framework to v0.7.32
28
+ - Bump @fluentui-react-native/icon to v0.12.3
29
+ - Bump @fluentui-react-native/interactive-hooks to v0.16.5
30
+ - Bump @fluentui-react-native/menu to v1.0.4
31
+ - Bump @fluentui-react-native/notification to v0.4.1
32
+ - Bump @fluentui-react-native/stack to v0.6.31
33
+ - Bump @fluentui/react-native to v0.30.7
34
+
35
+ ## 0.71.2
36
+
37
+ Fri, 08 Jul 2022 18:26:51 GMT
38
+
39
+ ### Patches
40
+
41
+ - Change shadowDepth type from '2' to 'shadow2' (78454019+lyzhan7@users.noreply.github.com)
42
+ - Bump @fluentui-react-native/experimental-shadow to v0.2.1
43
+
44
+ ## 0.71.1
45
+
46
+ Fri, 08 Jul 2022 17:53:30 GMT
47
+
48
+ ### Patches
49
+
50
+ - Bump @fluentui-react-native/avatar to v1.1.7
51
+ - Bump @fluentui-react-native/badge to v0.0.47
52
+
7
53
  ## 0.71.0
8
54
 
9
- Thu, 07 Jul 2022 21:22:09 GMT
55
+ Thu, 07 Jul 2022 21:24:07 GMT
10
56
 
11
57
  ### Minor changes
12
58
 
package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyC/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAW1C,CAAC"}
1
+ {"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAmB1C,CAAC"}
package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js CHANGED
@@ -2,22 +2,23 @@ import * as React from 'react';
2
2
  import { commonTestStyles } from '../Common/styles';
3
3
  import { View } from 'react-native';
4
4
  import { Text } from '@fluentui/react-native';
5
- import { Shadow } from '@fluentui-react-native/experimental-shadow';
5
+ import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
6
6
  import { useTheme } from '@fluentui-react-native/theme-types';
7
7
  import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
8
- var getThemedStyles = themedStyleSheet(function (t) {
8
+ import { useFluentTheme } from '@fluentui-react-native/framework';
9
+ var getThemedStyles = themedStyleSheet(function () {
9
10
  return {
10
11
  effectBox: {
11
12
  width: 366,
12
13
  minHeight: 64,
13
- backgroundColor: t.colors.background,
14
14
  },
15
15
  padding: {
16
16
  padding: 20,
17
17
  paddingHorizontal: 24,
18
18
  },
19
19
  vmargin: {
20
- marginVertical: 32,
20
+ marginVertical: 16,
21
+ marginHorizontal: 32,
21
22
  },
22
23
  };
23
24
  });
@@ -25,17 +26,37 @@ var ShadowTestBox = function (props) {
25
26
  var theme = useTheme();
26
27
  var themedStyles = getThemedStyles(theme);
27
28
  return (React.createElement(Shadow, { depth: props.depth },
28
- React.createElement(Text, { style: [commonTestStyles.view, themedStyles.effectBox, themedStyles.vmargin, themedStyles.padding], variant: "bodySemibold" },
29
- "Shadow Depth: ",
30
- props.depth)));
29
+ React.createElement(View, { style: [
30
+ commonTestStyles.view,
31
+ themedStyles.effectBox,
32
+ themedStyles.vmargin,
33
+ themedStyles.padding,
34
+ { backgroundColor: props.backgroundColor },
35
+ ] },
36
+ React.createElement(Text, { variant: "bodySemibold" }, props.depth),
37
+ React.createElement(Text, null, getShadowDescription(props.depth, theme)))));
31
38
  };
32
39
  export var ShadowDepthTestSection = function () {
33
- return (React.createElement(View, { style: { padding: 20 } },
34
- React.createElement(ShadowTestBox, { depth: "2" }),
35
- React.createElement(ShadowTestBox, { depth: "4" }),
36
- React.createElement(ShadowTestBox, { depth: "8" }),
37
- React.createElement(ShadowTestBox, { depth: "16" }),
38
- React.createElement(ShadowTestBox, { depth: "28" }),
39
- React.createElement(ShadowTestBox, { depth: "64" })));
40
+ var theme = useFluentTheme();
41
+ return (React.createElement(View, null,
42
+ React.createElement(ShadowTestBox, { depth: "shadow2", backgroundColor: theme.colors.background }),
43
+ React.createElement(ShadowTestBox, { depth: "shadow4", backgroundColor: theme.colors.background }),
44
+ React.createElement(ShadowTestBox, { depth: "shadow8", backgroundColor: theme.colors.background }),
45
+ React.createElement(ShadowTestBox, { depth: "shadow16", backgroundColor: theme.colors.background }),
46
+ React.createElement(ShadowTestBox, { depth: "shadow28", backgroundColor: theme.colors.background }),
47
+ React.createElement(ShadowTestBox, { depth: "shadow64", backgroundColor: theme.colors.background }),
48
+ React.createElement(ShadowTestBox, { depth: "shadow2brand", backgroundColor: theme.colors.brandBackground }),
49
+ React.createElement(ShadowTestBox, { depth: "shadow4brand", backgroundColor: theme.colors.brandBackground }),
50
+ React.createElement(ShadowTestBox, { depth: "shadow8brand", backgroundColor: theme.colors.brandBackground }),
51
+ React.createElement(ShadowTestBox, { depth: "shadow16brand", backgroundColor: theme.colors.brandBackground }),
52
+ React.createElement(ShadowTestBox, { depth: "shadow28brand", backgroundColor: theme.colors.brandBackground }),
53
+ React.createElement(ShadowTestBox, { depth: "shadow64brand", backgroundColor: theme.colors.brandBackground })));
40
54
  };
55
+ function getShadowDescription(depth, t) {
56
+ var shadowStyle = getShadowTokenStyleSet(t, depth);
57
+ return ('\nAmbient: ' +
58
+ JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
59
+ '\n\nKey: ' +
60
+ JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, ''));
61
+ }
41
62
  //# sourceMappingURL=ShadowDepthTestSection.js.map
package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAe,MAAM,4CAA4C,CAAC;AACjF,OAAO,EAAS,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,CAAQ;IAChD,OAAO;QACL,SAAS,EAAE;YACT,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,EAAE;YACb,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU;SACrC;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE;YACX,iBAAiB,EAAE,EAAE;SACtB;QACD,OAAO,EAAE;YACP,cAAc,EAAE,EAAE;SACnB;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAMH,IAAM,aAAa,GAAgD,UAAC,KAAyB;IAC3F,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,IAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,oBAAC,MAAM,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK;QACxB,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAC,cAAc;;YAC/G,KAAK,CAAC,KAAK,CACrB,CACA,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAA4B;IAC7D,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAC1B,oBAAC,aAAa,IAAC,KAAK,EAAC,GAAG,GAAG;QAC3B,oBAAC,aAAa,IAAC,KAAK,EAAC,GAAG,GAAG;QAC3B,oBAAC,aAAa,IAAC,KAAK,EAAC,GAAG,GAAG;QAC3B,oBAAC,aAAa,IAAC,KAAK,EAAC,IAAI,GAAG;QAC5B,oBAAC,aAAa,IAAC,KAAK,EAAC,IAAI,GAAG;QAC5B,oBAAC,aAAa,IAAC,KAAK,EAAC,IAAI,GAAG,CACvB,CACR,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"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"}
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyC/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAW1C,CAAC"}
1
+ {"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAmB1C,CAAC"}
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js CHANGED
@@ -9,19 +9,20 @@ var react_native_2 = require("@fluentui/react-native");
9
9
  var experimental_shadow_1 = require("@fluentui-react-native/experimental-shadow");
10
10
  var theme_types_1 = require("@fluentui-react-native/theme-types");
11
11
  var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
12
- var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
12
+ var framework_1 = require("@fluentui-react-native/framework");
13
+ var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function () {
13
14
  return {
14
15
  effectBox: {
15
16
  width: 366,
16
17
  minHeight: 64,
17
- backgroundColor: t.colors.background,
18
18
  },
19
19
  padding: {
20
20
  padding: 20,
21
21
  paddingHorizontal: 24,
22
22
  },
23
23
  vmargin: {
24
- marginVertical: 32,
24
+ marginVertical: 16,
25
+ marginHorizontal: 32,
25
26
  },
26
27
  };
27
28
  });
@@ -29,18 +30,38 @@ var ShadowTestBox = function (props) {
29
30
  var theme = (0, theme_types_1.useTheme)();
30
31
  var themedStyles = getThemedStyles(theme);
31
32
  return (React.createElement(experimental_shadow_1.Shadow, { depth: props.depth },
32
- React.createElement(react_native_2.Text, { style: [styles_1.commonTestStyles.view, themedStyles.effectBox, themedStyles.vmargin, themedStyles.padding], variant: "bodySemibold" },
33
- "Shadow Depth: ",
34
- props.depth)));
33
+ React.createElement(react_native_1.View, { style: [
34
+ styles_1.commonTestStyles.view,
35
+ themedStyles.effectBox,
36
+ themedStyles.vmargin,
37
+ themedStyles.padding,
38
+ { backgroundColor: props.backgroundColor },
39
+ ] },
40
+ React.createElement(react_native_2.Text, { variant: "bodySemibold" }, props.depth),
41
+ React.createElement(react_native_2.Text, null, getShadowDescription(props.depth, theme)))));
35
42
  };
36
43
  var ShadowDepthTestSection = function () {
37
- return (React.createElement(react_native_1.View, { style: { padding: 20 } },
38
- React.createElement(ShadowTestBox, { depth: "2" }),
39
- React.createElement(ShadowTestBox, { depth: "4" }),
40
- React.createElement(ShadowTestBox, { depth: "8" }),
41
- React.createElement(ShadowTestBox, { depth: "16" }),
42
- React.createElement(ShadowTestBox, { depth: "28" }),
43
- React.createElement(ShadowTestBox, { depth: "64" })));
44
+ var theme = (0, framework_1.useFluentTheme)();
45
+ return (React.createElement(react_native_1.View, null,
46
+ React.createElement(ShadowTestBox, { depth: "shadow2", backgroundColor: theme.colors.background }),
47
+ React.createElement(ShadowTestBox, { depth: "shadow4", backgroundColor: theme.colors.background }),
48
+ React.createElement(ShadowTestBox, { depth: "shadow8", backgroundColor: theme.colors.background }),
49
+ React.createElement(ShadowTestBox, { depth: "shadow16", backgroundColor: theme.colors.background }),
50
+ React.createElement(ShadowTestBox, { depth: "shadow28", backgroundColor: theme.colors.background }),
51
+ React.createElement(ShadowTestBox, { depth: "shadow64", backgroundColor: theme.colors.background }),
52
+ React.createElement(ShadowTestBox, { depth: "shadow2brand", backgroundColor: theme.colors.brandBackground }),
53
+ React.createElement(ShadowTestBox, { depth: "shadow4brand", backgroundColor: theme.colors.brandBackground }),
54
+ React.createElement(ShadowTestBox, { depth: "shadow8brand", backgroundColor: theme.colors.brandBackground }),
55
+ React.createElement(ShadowTestBox, { depth: "shadow16brand", backgroundColor: theme.colors.brandBackground }),
56
+ React.createElement(ShadowTestBox, { depth: "shadow28brand", backgroundColor: theme.colors.brandBackground }),
57
+ React.createElement(ShadowTestBox, { depth: "shadow64brand", backgroundColor: theme.colors.brandBackground })));
44
58
  };
45
59
  exports.ShadowDepthTestSection = ShadowDepthTestSection;
60
+ function getShadowDescription(depth, t) {
61
+ var shadowStyle = (0, experimental_shadow_1.getShadowTokenStyleSet)(t, depth);
62
+ return ('\nAmbient: ' +
63
+ JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
64
+ '\n\nKey: ' +
65
+ JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, ''));
66
+ }
46
67
  //# sourceMappingURL=ShadowDepthTestSection.js.map
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,2CAAoD;AACpD,6CAAoC;AACpC,uDAA8C;AAC9C,kFAAiF;AACjF,kEAAqE;AACrE,8EAA4E;AAE5E,IAAM,eAAe,GAAG,IAAA,oCAAgB,EAAC,UAAC,CAAQ;IAChD,OAAO;QACL,SAAS,EAAE;YACT,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,EAAE;YACb,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU;SACrC;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE;YACX,iBAAiB,EAAE,EAAE;SACtB;QACD,OAAO,EAAE;YACP,cAAc,EAAE,EAAE;SACnB;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAMH,IAAM,aAAa,GAAgD,UAAC,KAAyB;IAC3F,IAAM,KAAK,GAAG,IAAA,sBAAQ,GAAE,CAAC;IACzB,IAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,oBAAC,4BAAM,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK;QACxB,oBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,yBAAgB,CAAC,IAAI,EAAE,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAC,cAAc;;YAC/G,KAAK,CAAC,KAAK,CACrB,CACA,CACV,CAAC;AACJ,CAAC,CAAC;AAEK,IAAM,sBAAsB,GAA4B;IAC7D,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAC1B,oBAAC,aAAa,IAAC,KAAK,EAAC,GAAG,GAAG;QAC3B,oBAAC,aAAa,IAAC,KAAK,EAAC,GAAG,GAAG;QAC3B,oBAAC,aAAa,IAAC,KAAK,EAAC,GAAG,GAAG;QAC3B,oBAAC,aAAa,IAAC,KAAK,EAAC,IAAI,GAAG;QAC5B,oBAAC,aAAa,IAAC,KAAK,EAAC,IAAI,GAAG;QAC5B,oBAAC,aAAa,IAAC,KAAK,EAAC,IAAI,GAAG,CACvB,CACR,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,sBAAsB,0BAWjC"}
1
+ {"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/tester",
3
- "version": "0.71.0",
3
+ "version": "0.71.3",
4
4
  "description": "A test app to test FluentUI React Native Components during development",
5
5
  "license": "MIT",
6
6
  "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,34 +27,34 @@
27
27
  "dependencies": {
28
28
  "@fluentui-react-native/android-theme": ">=0.10.0 <1.0.0",
29
29
  "@fluentui-react-native/apple-theme": ">=0.12.3 <1.0.0",
30
- "@fluentui-react-native/avatar": "^1.1.6",
31
- "@fluentui-react-native/badge": ">=0.0.46 <1.0.0",
32
- "@fluentui-react-native/button": ">=0.22.30 <1.0.0",
30
+ "@fluentui-react-native/avatar": "^1.1.8",
31
+ "@fluentui-react-native/badge": ">=0.0.48 <1.0.0",
32
+ "@fluentui-react-native/button": ">=0.22.31 <1.0.0",
33
33
  "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
34
- "@fluentui-react-native/experimental-activity-indicator": ">=0.5.30 <1.0.0",
35
- "@fluentui-react-native/experimental-avatar": ">=0.15.2 <1.0.0",
36
- "@fluentui-react-native/experimental-button": "0.15.31",
37
- "@fluentui-react-native/experimental-checkbox": "0.11.15",
38
- "@fluentui-react-native/experimental-drawer": ">=0.1.14 <1.0.0",
34
+ "@fluentui-react-native/experimental-activity-indicator": ">=0.5.31 <1.0.0",
35
+ "@fluentui-react-native/experimental-avatar": ">=0.15.3 <1.0.0",
36
+ "@fluentui-react-native/experimental-button": "0.15.32",
37
+ "@fluentui-react-native/experimental-checkbox": "0.11.16",
38
+ "@fluentui-react-native/experimental-drawer": ">=0.1.15 <1.0.0",
39
39
  "@fluentui-react-native/experimental-native-date-picker": ">=0.5.0 <1.0.0",
40
- "@fluentui-react-native/experimental-expander": "0.3.34",
41
- "@fluentui-react-native/experimental-menu-button": ">=0.3.52 <1.0.0",
42
- "@fluentui-react-native/experimental-shadow": "0.2.0",
43
- "@fluentui-react-native/experimental-shimmer": "0.6.34",
44
- "@fluentui-react-native/experimental-tabs": "0.4.53",
45
- "@fluentui-react-native/experimental-text": ">=0.9.1 <1.0.0",
46
- "@fluentui-react-native/framework": ">=0.7.31 <1.0.0",
47
- "@fluentui-react-native/icon": "0.12.2",
48
- "@fluentui-react-native/interactive-hooks": ">=0.16.4 <1.0.0",
49
- "@fluentui-react-native/menu": "^1.0.3",
50
- "@fluentui-react-native/notification": "0.4.0",
51
- "@fluentui-react-native/stack": ">=0.6.30 <1.0.0",
40
+ "@fluentui-react-native/experimental-expander": "0.3.35",
41
+ "@fluentui-react-native/experimental-menu-button": ">=0.3.53 <1.0.0",
42
+ "@fluentui-react-native/experimental-shadow": "0.2.2",
43
+ "@fluentui-react-native/experimental-shimmer": "0.6.35",
44
+ "@fluentui-react-native/experimental-tabs": "0.4.54",
45
+ "@fluentui-react-native/experimental-text": ">=0.9.2 <1.0.0",
46
+ "@fluentui-react-native/framework": ">=0.7.32 <1.0.0",
47
+ "@fluentui-react-native/icon": "0.12.3",
48
+ "@fluentui-react-native/interactive-hooks": ">=0.16.5 <1.0.0",
49
+ "@fluentui-react-native/menu": "^1.0.4",
50
+ "@fluentui-react-native/notification": "0.4.1",
51
+ "@fluentui-react-native/stack": ">=0.6.31 <1.0.0",
52
52
  "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
53
53
  "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0",
54
54
  "@fluentui-react-native/themed-stylesheet": "^1.3.3",
55
55
  "@fluentui-react-native/theming-utils": ">=0.13.0 <1.0.0",
56
56
  "@fluentui-react-native/win32-theme": ">=0.19.2 <1.0.0",
57
- "@fluentui/react-native": ">=0.30.6 <1.0.0",
57
+ "@fluentui/react-native": ">=0.30.7 <1.0.0",
58
58
  "@react-native-community/slider": "^4.2.0",
59
59
  "@react-native-menu/menu": "^0.1.2",
60
60
  "@react-native-picker/picker": "^2.2.1",
package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx CHANGED
@@ -1,53 +1,84 @@
1
1
  import * as React from 'react';
2
2
  import { commonTestStyles } from '../Common/styles';
3
- import { View } from 'react-native';
3
+ import { ColorValue, View } from 'react-native';
4
4
  import { Text } from '@fluentui/react-native';
5
- import { Shadow, ShadowDepth } from '@fluentui-react-native/experimental-shadow';
5
+ import { Shadow, ShadowDepth, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
6
6
  import { Theme, useTheme } from '@fluentui-react-native/theme-types';
7
7
  import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
8
+ import { useFluentTheme } from '@fluentui-react-native/framework';
8
9
 
9
- const getThemedStyles = themedStyleSheet((t: Theme) => {
10
+ const getThemedStyles = themedStyleSheet(() => {
10
11
  return {
11
12
  effectBox: {
12
13
  width: 366,
13
14
  minHeight: 64,
14
- backgroundColor: t.colors.background,
15
15
  },
16
16
  padding: {
17
17
  padding: 20,
18
18
  paddingHorizontal: 24,
19
19
  },
20
20
  vmargin: {
21
- marginVertical: 32,
21
+ marginVertical: 16,
22
+ marginHorizontal: 32,
22
23
  },
23
24
  };
24
25
  });
25
26
 
26
27
  interface ShadowTestBoxProps {
27
28
  depth: ShadowDepth;
29
+ backgroundColor: ColorValue;
28
30
  }
29
31
 
30
32
  const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: ShadowTestBoxProps) => {
31
33
  const theme = useTheme();
32
34
  const themedStyles = getThemedStyles(theme);
35
+
33
36
  return (
34
37
  <Shadow depth={props.depth}>
35
- <Text style={[commonTestStyles.view, themedStyles.effectBox, themedStyles.vmargin, themedStyles.padding]} variant="bodySemibold">
36
- Shadow Depth: {props.depth}
37
- </Text>
38
+ <View
39
+ style={[
40
+ commonTestStyles.view,
41
+ themedStyles.effectBox,
42
+ themedStyles.vmargin,
43
+ themedStyles.padding,
44
+ { backgroundColor: props.backgroundColor },
45
+ ]}
46
+ >
47
+ <Text variant="bodySemibold">{props.depth}</Text>
48
+ <Text>{getShadowDescription(props.depth, theme)}</Text>
49
+ </View>
38
50
  </Shadow>
39
51
  );
40
52
  };
41
53
 
42
54
  export const ShadowDepthTestSection: React.FunctionComponent = () => {
55
+ const theme = useFluentTheme();
56
+
43
57
  return (
44
- <View style={{ padding: 20 }}>
45
- <ShadowTestBox depth="2" />
46
- <ShadowTestBox depth="4" />
47
- <ShadowTestBox depth="8" />
48
- <ShadowTestBox depth="16" />
49
- <ShadowTestBox depth="28" />
50
- <ShadowTestBox depth="64" />
58
+ <View>
59
+ <ShadowTestBox depth="shadow2" backgroundColor={theme.colors.background} />
60
+ <ShadowTestBox depth="shadow4" backgroundColor={theme.colors.background} />
61
+ <ShadowTestBox depth="shadow8" backgroundColor={theme.colors.background} />
62
+ <ShadowTestBox depth="shadow16" backgroundColor={theme.colors.background} />
63
+ <ShadowTestBox depth="shadow28" backgroundColor={theme.colors.background} />
64
+ <ShadowTestBox depth="shadow64" backgroundColor={theme.colors.background} />
65
+ <ShadowTestBox depth="shadow2brand" backgroundColor={theme.colors.brandBackground} />
66
+ <ShadowTestBox depth="shadow4brand" backgroundColor={theme.colors.brandBackground} />
67
+ <ShadowTestBox depth="shadow8brand" backgroundColor={theme.colors.brandBackground} />
68
+ <ShadowTestBox depth="shadow16brand" backgroundColor={theme.colors.brandBackground} />
69
+ <ShadowTestBox depth="shadow28brand" backgroundColor={theme.colors.brandBackground} />
70
+ <ShadowTestBox depth="shadow64brand" backgroundColor={theme.colors.brandBackground} />
51
71
  </View>
52
72
  );
53
73
  };
74
+
75
+ function getShadowDescription(depth: ShadowDepth, t: Theme): string {
76
+ const shadowStyle = getShadowTokenStyleSet(t, depth);
77
+
78
+ return (
79
+ '\nAmbient: ' +
80
+ JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
81
+ '\n\nKey: ' +
82
+ JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, '')
83
+ );
84
+ }