@fluentui-react-native/tester 0.75.2 → 0.75.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 (17) hide show
  1. package/CHANGELOG.json +58 -1
  2. package/CHANGELOG.md +17 -2
  3. package/lib/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map +1 -1
  4. package/lib/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js +4 -2
  5. package/lib/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js.map +1 -1
  6. package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map +1 -1
  7. package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js +17 -17
  8. package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map +1 -1
  9. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map +1 -1
  10. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js +4 -2
  11. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js.map +1 -1
  12. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map +1 -1
  13. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js +17 -17
  14. package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map +1 -1
  15. package/package.json +8 -8
  16. package/src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx +4 -2
  17. package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx +45 -20
package/CHANGELOG.json CHANGED
@@ -2,7 +2,64 @@
2
2
  "name": "@fluentui-react-native/tester",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 15 Jul 2022 00:28:59 GMT",
5
+ "date": "Fri, 15 Jul 2022 01:22:26 GMT",
6
+ "tag": "@fluentui-react-native/tester_v0.75.3",
7
+ "version": "0.75.3",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "78454019+lyzhan7@users.noreply.github.com",
12
+ "package": "@fluentui-react-native/tester",
13
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141",
14
+ "comment": "Replace shadowDepth with shadowToken"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui-react-native/tester",
19
+ "comment": "Bump @fluentui-react-native/button to v0.24.3",
20
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui-react-native/tester",
25
+ "comment": "Bump @fluentui-react-native/experimental-button to v0.16.3",
26
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui-react-native/tester",
31
+ "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.4.3",
32
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui-react-native/tester",
37
+ "comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.7",
38
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui-react-native/tester",
43
+ "comment": "Bump @fluentui-react-native/menu to v1.0.12",
44
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui-react-native/tester",
49
+ "comment": "Bump @fluentui-react-native/notification to v0.6.7",
50
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui-react-native/tester",
55
+ "comment": "Bump @fluentui/react-native to v0.31.3",
56
+ "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Fri, 15 Jul 2022 00:29:27 GMT",
6
63
  "tag": "@fluentui-react-native/tester_v0.75.2",
7
64
  "version": "0.75.2",
8
65
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,27 @@
1
1
  # Change Log - @fluentui-react-native/tester
2
2
 
3
- This log was last generated on Fri, 15 Jul 2022 00:28:59 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 15 Jul 2022 01:22:26 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.75.3
8
+
9
+ Fri, 15 Jul 2022 01:22:26 GMT
10
+
11
+ ### Patches
12
+
13
+ - Replace shadowDepth with shadowToken (78454019+lyzhan7@users.noreply.github.com)
14
+ - Bump @fluentui-react-native/button to v0.24.3
15
+ - Bump @fluentui-react-native/experimental-button to v0.16.3
16
+ - Bump @fluentui-react-native/experimental-menu-button to v0.4.3
17
+ - Bump @fluentui-react-native/experimental-shadow to v0.2.7
18
+ - Bump @fluentui-react-native/menu to v1.0.12
19
+ - Bump @fluentui-react-native/notification to v0.6.7
20
+ - Bump @fluentui/react-native to v0.31.3
21
+
7
22
  ## 0.75.2
8
23
 
9
- Fri, 15 Jul 2022 00:28:59 GMT
24
+ Fri, 15 Jul 2022 00:29:27 GMT
10
25
 
11
26
  ### Patches
12
27
 
package/lib/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAgB3C,CAAC"}
1
+ {"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAgB3C,CAAC"}
package/lib/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js CHANGED
@@ -2,8 +2,10 @@ import * as React from 'react';
2
2
  import { Platform, View } from 'react-native';
3
3
  import { FAB, Text } from '@fluentui/react-native';
4
4
  import { commonTestStyles, stackStyle } from '../Common/styles';
5
- var CustomFABNoShadow = FAB.customize({ shadowDepth: undefined });
6
- var CustomFABShadow64 = FAB.customize({ shadowDepth: 'shadow64' });
5
+ var CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
6
+ var CustomFABShadow64 = FAB.customize({
7
+ shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
8
+ });
7
9
  export var ShadowButtonTestSection = function () {
8
10
  if (Platform.OS === 'ios') {
9
11
  return (React.createElement(View, { style: stackStyle },
package/lib/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEhE,IAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,IAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,IAAM,uBAAuB,GAA4B;IAC9D,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;YACrB,oBAAC,GAAG,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,8BAA+B;YACnE,oBAAC,iBAAiB,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,+BAA8C;YAChG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,gCAA+C,CAC5F,CACR,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;YACrB,oBAAC,IAAI,wDAAqD,CACrD,CACR,CAAC;KACH;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEhE,IAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,IAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;CAC1H,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,uBAAuB,GAA4B;IAC9D,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;YACrB,oBAAC,GAAG,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,8BAA+B;YACnE,oBAAC,iBAAiB,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,+BAA8C;YAChG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,gCAA+C,CAC5F,CACR,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;YACrB,oBAAC,IAAI,wDAAqD,CACrD,CACR,CAAC;KACH;AACH,CAAC,CAAC"}
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;AAqD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAmB1C,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;AAsD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBA2C1C,CAAC"}
package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js CHANGED
@@ -25,7 +25,7 @@ var getThemedStyles = themedStyleSheet(function () {
25
25
  var ShadowTestBox = function (props) {
26
26
  var theme = useTheme();
27
27
  var themedStyles = getThemedStyles(theme);
28
- return (React.createElement(Shadow, { depth: props.depth },
28
+ return (React.createElement(Shadow, { shadowToken: props.shadowToken },
29
29
  React.createElement(View, { style: [
30
30
  commonTestStyles.view,
31
31
  themedStyles.effectBox,
@@ -33,27 +33,27 @@ var ShadowTestBox = function (props) {
33
33
  themedStyles.padding,
34
34
  { backgroundColor: props.backgroundColor },
35
35
  ] },
36
- React.createElement(Text, { variant: "bodySemibold" }, props.depth),
37
- React.createElement(Text, null, getShadowDescription(props.depth, theme)))));
36
+ React.createElement(Text, { variant: "bodySemibold" }, props.shadowDepthText),
37
+ React.createElement(Text, null, getShadowDescription(props.shadowToken)))));
38
38
  };
39
39
  export var ShadowDepthTestSection = function () {
40
40
  var theme = useFluentTheme();
41
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 })));
42
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 2", shadowToken: theme.shadows.shadow2, backgroundColor: theme.colors.background }),
43
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 4", shadowToken: theme.shadows.shadow4, backgroundColor: theme.colors.background }),
44
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 8", shadowToken: theme.shadows.shadow8, backgroundColor: theme.colors.background }),
45
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 16", shadowToken: theme.shadows.shadow16, backgroundColor: theme.colors.background }),
46
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 28", shadowToken: theme.shadows.shadow28, backgroundColor: theme.colors.background }),
47
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 64", shadowToken: theme.shadows.shadow64, backgroundColor: theme.colors.background }),
48
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 2", shadowToken: theme.shadows.shadow2brand, backgroundColor: theme.colors.brandBackground }),
49
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 4", shadowToken: theme.shadows.shadow4brand, backgroundColor: theme.colors.brandBackground }),
50
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 8", shadowToken: theme.shadows.shadow8brand, backgroundColor: theme.colors.brandBackground }),
51
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 16", shadowToken: theme.shadows.shadow16brand, backgroundColor: theme.colors.brandBackground }),
52
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 28", shadowToken: theme.shadows.shadow28brand, backgroundColor: theme.colors.brandBackground }),
53
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 64", shadowToken: theme.shadows.shadow64brand, backgroundColor: theme.colors.brandBackground })));
54
54
  };
55
- function getShadowDescription(depth, t) {
56
- var shadowStyle = getShadowTokenStyleSet(t, depth);
55
+ function getShadowDescription(shadowToken) {
56
+ var shadowStyle = getShadowTokenStyleSet(shadowToken);
57
57
  return ('\nAmbient: ' +
58
58
  JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
59
59
  '\n\nKey: ' +
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":"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"}
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,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAC5F,OAAO,EAAe,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,IAAM,eAAe,GAAG,gBAAgB,CAAC;IACvC,OAAO;QACL,SAAS,EAAE;YACT,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,EAAE;SACd;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE;YACX,iBAAiB,EAAE,EAAE;SACtB;QACD,OAAO,EAAE;YACP,cAAc,EAAE,EAAE;YAClB,gBAAgB,EAAE,EAAE;SACrB;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAQH,IAAM,aAAa,GAAgD,UAAC,KAAyB;IAC3F,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,IAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAE,KAAK,CAAC,WAAW;QACpC,oBAAC,IAAI,IACH,KAAK,EAAE;gBACL,gBAAgB,CAAC,IAAI;gBACrB,YAAY,CAAC,SAAS;gBACtB,YAAY,CAAC,OAAO;gBACpB,YAAY,CAAC,OAAO;gBACpB,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE;aAC3C;YAED,oBAAC,IAAI,IAAC,OAAO,EAAC,cAAc,IAAE,KAAK,CAAC,eAAe,CAAQ;YAC3D,oBAAC,IAAI,QAAE,oBAAoB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAQ,CACjD,CACA,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAA4B;IAC7D,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,aAAa,IAAC,eAAe,EAAC,UAAU,EAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAAI;QAC1H,oBAAC,aAAa,IAAC,eAAe,EAAC,UAAU,EAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAAI;QAC1H,oBAAC,aAAa,IAAC,eAAe,EAAC,UAAU,EAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAAI;QAC1H,oBAAC,aAAa,IAAC,eAAe,EAAC,WAAW,EAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAAI;QAC5H,oBAAC,aAAa,IAAC,eAAe,EAAC,WAAW,EAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAAI;QAC5H,oBAAC,aAAa,IAAC,eAAe,EAAC,WAAW,EAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,GAAI;QAC5H,oBAAC,aAAa,IACZ,eAAe,EAAC,gBAAgB,EAChC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EACvC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,GAC7C;QACF,oBAAC,aAAa,IACZ,eAAe,EAAC,gBAAgB,EAChC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EACvC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,GAC7C;QACF,oBAAC,aAAa,IACZ,eAAe,EAAC,gBAAgB,EAChC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EACvC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,GAC7C;QACF,oBAAC,aAAa,IACZ,eAAe,EAAC,iBAAiB,EACjC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,EACxC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,GAC7C;QACF,oBAAC,aAAa,IACZ,eAAe,EAAC,iBAAiB,EACjC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,EACxC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,GAC7C;QACF,oBAAC,aAAa,IACZ,eAAe,EAAC,iBAAiB,EACjC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,EACxC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,GAC7C,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,oBAAoB,CAAC,WAAwB;IACpD,IAAM,WAAW,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAExD,OAAO,CACL,aAAa;QACb,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC9F,WAAW;QACX,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3F,CAAC;AACJ,CAAC"}
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAgB3C,CAAC"}
1
+ {"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAgB3C,CAAC"}
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js CHANGED
@@ -6,8 +6,10 @@ var React = (0, tslib_1.__importStar)(require("react"));
6
6
  var react_native_1 = require("react-native");
7
7
  var react_native_2 = require("@fluentui/react-native");
8
8
  var styles_1 = require("../Common/styles");
9
- var CustomFABNoShadow = react_native_2.FAB.customize({ shadowDepth: undefined });
10
- var CustomFABShadow64 = react_native_2.FAB.customize({ shadowDepth: 'shadow64' });
9
+ var CustomFABNoShadow = react_native_2.FAB.customize({ shadowToken: undefined });
10
+ var CustomFABShadow64 = react_native_2.FAB.customize({
11
+ shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
12
+ });
11
13
  var ShadowButtonTestSection = function () {
12
14
  if (react_native_1.Platform.OS === 'ios') {
13
15
  return (React.createElement(react_native_1.View, { style: styles_1.stackStyle },
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAA8C;AAC9C,uDAAmD;AACnD,2CAAgE;AAEhE,IAAM,iBAAiB,GAAG,kBAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,IAAM,iBAAiB,GAAG,kBAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,CAAC;AAE9D,IAAM,uBAAuB,GAA4B;IAC9D,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAU;YACrB,oBAAC,kBAAG,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,8BAA+B;YACnE,oBAAC,iBAAiB,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,+BAA8C;YAChG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,gCAA+C,CAC5F,CACR,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAU;YACrB,oBAAC,mBAAI,wDAAqD,CACrD,CACR,CAAC;KACH;AACH,CAAC,CAAC;AAhBW,QAAA,uBAAuB,2BAgBlC"}
1
+ {"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAA8C;AAC9C,uDAAmD;AACnD,2CAAgE;AAEhE,IAAM,iBAAiB,GAAG,kBAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,IAAM,iBAAiB,GAAG,kBAAG,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;CAC1H,CAAC,CAAC;AAEI,IAAM,uBAAuB,GAA4B;IAC9D,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAU;YACrB,oBAAC,kBAAG,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,8BAA+B;YACnE,oBAAC,iBAAiB,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,+BAA8C;YAChG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,gCAA+C,CAC5F,CACR,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAU;YACrB,oBAAC,mBAAI,wDAAqD,CACrD,CACR,CAAC;KACH;AACH,CAAC,CAAC;AAhBW,QAAA,uBAAuB,2BAgBlC"}
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;AAqD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAmB1C,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;AAsD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBA2C1C,CAAC"}
package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js CHANGED
@@ -29,7 +29,7 @@ var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function () {
29
29
  var ShadowTestBox = function (props) {
30
30
  var theme = (0, theme_types_1.useTheme)();
31
31
  var themedStyles = getThemedStyles(theme);
32
- return (React.createElement(experimental_shadow_1.Shadow, { depth: props.depth },
32
+ return (React.createElement(experimental_shadow_1.Shadow, { shadowToken: props.shadowToken },
33
33
  React.createElement(react_native_1.View, { style: [
34
34
  styles_1.commonTestStyles.view,
35
35
  themedStyles.effectBox,
@@ -37,28 +37,28 @@ var ShadowTestBox = function (props) {
37
37
  themedStyles.padding,
38
38
  { backgroundColor: props.backgroundColor },
39
39
  ] },
40
- React.createElement(react_native_2.Text, { variant: "bodySemibold" }, props.depth),
41
- React.createElement(react_native_2.Text, null, getShadowDescription(props.depth, theme)))));
40
+ React.createElement(react_native_2.Text, { variant: "bodySemibold" }, props.shadowDepthText),
41
+ React.createElement(react_native_2.Text, null, getShadowDescription(props.shadowToken)))));
42
42
  };
43
43
  var ShadowDepthTestSection = function () {
44
44
  var theme = (0, framework_1.useFluentTheme)();
45
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 })));
46
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 2", shadowToken: theme.shadows.shadow2, backgroundColor: theme.colors.background }),
47
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 4", shadowToken: theme.shadows.shadow4, backgroundColor: theme.colors.background }),
48
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 8", shadowToken: theme.shadows.shadow8, backgroundColor: theme.colors.background }),
49
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 16", shadowToken: theme.shadows.shadow16, backgroundColor: theme.colors.background }),
50
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 28", shadowToken: theme.shadows.shadow28, backgroundColor: theme.colors.background }),
51
+ React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 64", shadowToken: theme.shadows.shadow64, backgroundColor: theme.colors.background }),
52
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 2", shadowToken: theme.shadows.shadow2brand, backgroundColor: theme.colors.brandBackground }),
53
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 4", shadowToken: theme.shadows.shadow4brand, backgroundColor: theme.colors.brandBackground }),
54
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 8", shadowToken: theme.shadows.shadow8brand, backgroundColor: theme.colors.brandBackground }),
55
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 16", shadowToken: theme.shadows.shadow16brand, backgroundColor: theme.colors.brandBackground }),
56
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 28", shadowToken: theme.shadows.shadow28brand, backgroundColor: theme.colors.brandBackground }),
57
+ React.createElement(ShadowTestBox, { shadowDepthText: "Brand Shadow 64", shadowToken: theme.shadows.shadow64brand, backgroundColor: theme.colors.brandBackground })));
58
58
  };
59
59
  exports.ShadowDepthTestSection = ShadowDepthTestSection;
60
- function getShadowDescription(depth, t) {
61
- var shadowStyle = (0, experimental_shadow_1.getShadowTokenStyleSet)(t, depth);
60
+ function getShadowDescription(shadowToken) {
61
+ var shadowStyle = (0, experimental_shadow_1.getShadowTokenStyleSet)(shadowToken);
62
62
  return ('\nAmbient: ' +
63
63
  JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
64
64
  '\n\nKey: ' +
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":"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"}
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.75.2",
3
+ "version": "0.75.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>",
@@ -29,32 +29,32 @@
29
29
  "@fluentui-react-native/apple-theme": ">=0.13.0 <1.0.0",
30
30
  "@fluentui-react-native/avatar": "^1.1.13",
31
31
  "@fluentui-react-native/badge": ">=0.1.1 <1.0.0",
32
- "@fluentui-react-native/button": ">=0.24.2 <1.0.0",
32
+ "@fluentui-react-native/button": ">=0.24.3 <1.0.0",
33
33
  "@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
34
34
  "@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
35
35
  "@fluentui-react-native/experimental-avatar": ">=0.16.0 <1.0.0",
36
- "@fluentui-react-native/experimental-button": "0.16.2",
36
+ "@fluentui-react-native/experimental-button": "0.16.3",
37
37
  "@fluentui-react-native/experimental-checkbox": "0.12.1",
38
38
  "@fluentui-react-native/experimental-drawer": ">=0.2.0 <1.0.0",
39
39
  "@fluentui-react-native/experimental-native-date-picker": ">=0.6.0 <1.0.0",
40
40
  "@fluentui-react-native/experimental-expander": "0.4.0",
41
- "@fluentui-react-native/experimental-menu-button": ">=0.4.2 <1.0.0",
42
- "@fluentui-react-native/experimental-shadow": "0.2.6",
41
+ "@fluentui-react-native/experimental-menu-button": ">=0.4.3 <1.0.0",
42
+ "@fluentui-react-native/experimental-shadow": "0.2.7",
43
43
  "@fluentui-react-native/experimental-shimmer": "0.7.0",
44
44
  "@fluentui-react-native/experimental-tabs": "0.5.1",
45
45
  "@fluentui-react-native/experimental-text": ">=0.10.1 <1.0.0",
46
46
  "@fluentui-react-native/framework": ">=0.8.0 <1.0.0",
47
47
  "@fluentui-react-native/icon": "0.13.0",
48
48
  "@fluentui-react-native/interactive-hooks": ">=0.17.0 <1.0.0",
49
- "@fluentui-react-native/menu": "^1.0.11",
50
- "@fluentui-react-native/notification": "0.6.6",
49
+ "@fluentui-react-native/menu": "^1.0.12",
50
+ "@fluentui-react-native/notification": "0.6.7",
51
51
  "@fluentui-react-native/stack": ">=0.7.0 <1.0.0",
52
52
  "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
53
53
  "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",
54
54
  "@fluentui-react-native/themed-stylesheet": "^1.4.0",
55
55
  "@fluentui-react-native/theming-utils": ">=0.14.0 <1.0.0",
56
56
  "@fluentui-react-native/win32-theme": ">=0.20.0 <1.0.0",
57
- "@fluentui/react-native": ">=0.31.2 <1.0.0",
57
+ "@fluentui/react-native": ">=0.31.3 <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/ShadowButtonTestSection.tsx CHANGED
@@ -3,8 +3,10 @@ import { Platform, View } from 'react-native';
3
3
  import { FAB, Text } from '@fluentui/react-native';
4
4
  import { commonTestStyles, stackStyle } from '../Common/styles';
5
5
 
6
- const CustomFABNoShadow = FAB.customize({ shadowDepth: undefined });
7
- const CustomFABShadow64 = FAB.customize({ shadowDepth: 'shadow64' });
6
+ const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
7
+ const CustomFABShadow64 = FAB.customize({
8
+ shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
9
+ });
8
10
 
9
11
  export const ShadowButtonTestSection: React.FunctionComponent = () => {
10
12
  if (Platform.OS === 'ios') {
package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx CHANGED
@@ -2,8 +2,8 @@ import * as React from 'react';
2
2
  import { commonTestStyles } from '../Common/styles';
3
3
  import { ColorValue, View } from 'react-native';
4
4
  import { Text } from '@fluentui/react-native';
5
- import { Shadow, ShadowDepth, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
6
- import { Theme, useTheme } from '@fluentui-react-native/theme-types';
5
+ import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
6
+ import { ShadowToken, useTheme } from '@fluentui-react-native/theme-types';
7
7
  import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
8
8
  import { useFluentTheme } from '@fluentui-react-native/framework';
9
9
 
@@ -25,7 +25,8 @@ const getThemedStyles = themedStyleSheet(() => {
25
25
  });
26
26
 
27
27
  interface ShadowTestBoxProps {
28
- depth: ShadowDepth;
28
+ shadowDepthText: string;
29
+ shadowToken: ShadowToken;
29
30
  backgroundColor: ColorValue;
30
31
  }
31
32
 
@@ -34,7 +35,7 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
34
35
  const themedStyles = getThemedStyles(theme);
35
36
 
36
37
  return (
37
- <Shadow depth={props.depth}>
38
+ <Shadow shadowToken={props.shadowToken}>
38
39
  <View
39
40
  style={[
40
41
  commonTestStyles.view,
@@ -44,8 +45,8 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
44
45
  { backgroundColor: props.backgroundColor },
45
46
  ]}
46
47
  >
47
- <Text variant="bodySemibold">{props.depth}</Text>
48
- <Text>{getShadowDescription(props.depth, theme)}</Text>
48
+ <Text variant="bodySemibold">{props.shadowDepthText}</Text>
49
+ <Text>{getShadowDescription(props.shadowToken)}</Text>
49
50
  </View>
50
51
  </Shadow>
51
52
  );
@@ -56,24 +57,48 @@ export const ShadowDepthTestSection: React.FunctionComponent = () => {
56
57
 
57
58
  return (
58
59
  <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} />
60
+ <ShadowTestBox shadowDepthText="Shadow 2" shadowToken={theme.shadows.shadow2} backgroundColor={theme.colors.background} />
61
+ <ShadowTestBox shadowDepthText="Shadow 4" shadowToken={theme.shadows.shadow4} backgroundColor={theme.colors.background} />
62
+ <ShadowTestBox shadowDepthText="Shadow 8" shadowToken={theme.shadows.shadow8} backgroundColor={theme.colors.background} />
63
+ <ShadowTestBox shadowDepthText="Shadow 16" shadowToken={theme.shadows.shadow16} backgroundColor={theme.colors.background} />
64
+ <ShadowTestBox shadowDepthText="Shadow 28" shadowToken={theme.shadows.shadow28} backgroundColor={theme.colors.background} />
65
+ <ShadowTestBox shadowDepthText="Shadow 64" shadowToken={theme.shadows.shadow64} backgroundColor={theme.colors.background} />
66
+ <ShadowTestBox
67
+ shadowDepthText="Brand Shadow 2"
68
+ shadowToken={theme.shadows.shadow2brand}
69
+ backgroundColor={theme.colors.brandBackground}
70
+ />
71
+ <ShadowTestBox
72
+ shadowDepthText="Brand Shadow 4"
73
+ shadowToken={theme.shadows.shadow4brand}
74
+ backgroundColor={theme.colors.brandBackground}
75
+ />
76
+ <ShadowTestBox
77
+ shadowDepthText="Brand Shadow 8"
78
+ shadowToken={theme.shadows.shadow8brand}
79
+ backgroundColor={theme.colors.brandBackground}
80
+ />
81
+ <ShadowTestBox
82
+ shadowDepthText="Brand Shadow 16"
83
+ shadowToken={theme.shadows.shadow16brand}
84
+ backgroundColor={theme.colors.brandBackground}
85
+ />
86
+ <ShadowTestBox
87
+ shadowDepthText="Brand Shadow 28"
88
+ shadowToken={theme.shadows.shadow28brand}
89
+ backgroundColor={theme.colors.brandBackground}
90
+ />
91
+ <ShadowTestBox
92
+ shadowDepthText="Brand Shadow 64"
93
+ shadowToken={theme.shadows.shadow64brand}
94
+ backgroundColor={theme.colors.brandBackground}
95
+ />
71
96
  </View>
72
97
  );
73
98
  };
74
99
 
75
- function getShadowDescription(depth: ShadowDepth, t: Theme): string {
76
- const shadowStyle = getShadowTokenStyleSet(t, depth);
100
+ function getShadowDescription(shadowToken: ShadowToken): string {
101
+ const shadowStyle = getShadowTokenStyleSet(shadowToken);
77
102
 
78
103
  return (
79
104
  '\nAmbient: ' +