@fluentui-react-native/tester 0.71.1 → 0.71.2

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui-react-native/tester",
   "entries": [
     {
-      "date": "Fri, 08 Jul 2022 17:53:15 GMT",
+      "date": "Fri, 08 Jul 2022 18:26:38 GMT",
+      "tag": "@fluentui-react-native/tester_v0.71.2",
+      "version": "0.71.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "78454019+lyzhan7@users.noreply.github.com",
+            "package": "@fluentui-react-native/tester",
+            "commit": "ef2a18b53bbc59178c30d1250ff89e64bb2ca5be",
+            "comment": "Change shadowDepth type from '2' to 'shadow2'"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.1",
+            "commit": "ef2a18b53bbc59178c30d1250ff89e64bb2ca5be"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 08 Jul 2022 17:53:30 GMT",
       "tag": "@fluentui-react-native/tester_v0.71.1",
       "version": "0.71.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-react-native/tester
 
-This log was last generated on Fri, 08 Jul 2022 17:53:15 GMT and should not be manually modified.
+This log was last generated on Fri, 08 Jul 2022 18:26:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.71.2
+
+Fri, 08 Jul 2022 18:26:38 GMT
+
+### Patches
+
+- Change shadowDepth type from '2' to 'shadow2' (78454019+lyzhan7@users.noreply.github.com)
+- Bump @fluentui-react-native/experimental-shadow to v0.2.1
+
 ## 0.71.1
 
-Fri, 08 Jul 2022 17:53:15 GMT
+Fri, 08 Jul 2022 17:53:30 GMT
 
 ### Patches
 

package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map

@@ -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"}
+{"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

@@ -2,22 +2,23 @@ import * as React from 'react';
 import { commonTestStyles } from '../Common/styles';
 import { View } from 'react-native';
 import { Text } from '@fluentui/react-native';
-import { Shadow } from '@fluentui-react-native/experimental-shadow';
+import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-var getThemedStyles = themedStyleSheet(function (t) {
+import { useFluentTheme } from '@fluentui-react-native/framework';
+var getThemedStyles = themedStyleSheet(function () {
     return {
         effectBox: {
             width: 366,
             minHeight: 64,
-            backgroundColor: t.colors.background,
         },
         padding: {
             padding: 20,
             paddingHorizontal: 24,
         },
         vmargin: {
-            marginVertical: 32,
+            marginVertical: 16,
+            marginHorizontal: 32,
         },
     };
 });
@@ -25,17 +26,37 @@ var ShadowTestBox = function (props) {
     var theme = useTheme();
     var themedStyles = getThemedStyles(theme);
     return (React.createElement(Shadow, { depth: props.depth },
-        React.createElement(Text, { style: [commonTestStyles.view, themedStyles.effectBox, themedStyles.vmargin, themedStyles.padding], variant: "bodySemibold" },
-            "Shadow Depth: ",
-            props.depth)));
+        React.createElement(View, { style: [
+                commonTestStyles.view,
+                themedStyles.effectBox,
+                themedStyles.vmargin,
+                themedStyles.padding,
+                { backgroundColor: props.backgroundColor },
+            ] },
+            React.createElement(Text, { variant: "bodySemibold" }, props.depth),
+            React.createElement(Text, null, getShadowDescription(props.depth, theme)))));
 };
 export var ShadowDepthTestSection = function () {
-    return (React.createElement(View, { style: { padding: 20 } },
-        React.createElement(ShadowTestBox, { depth: "2" }),
-        React.createElement(ShadowTestBox, { depth: "4" }),
-        React.createElement(ShadowTestBox, { depth: "8" }),
-        React.createElement(ShadowTestBox, { depth: "16" }),
-        React.createElement(ShadowTestBox, { depth: "28" }),
-        React.createElement(ShadowTestBox, { depth: "64" })));
+    var theme = useFluentTheme();
+    return (React.createElement(View, null,
+        React.createElement(ShadowTestBox, { depth: "shadow2", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow4", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow8", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow16", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow28", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow64", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow2brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow4brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow8brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow16brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow28brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow64brand", backgroundColor: theme.colors.brandBackground })));
 };
+function getShadowDescription(depth, t) {
+    var shadowStyle = getShadowTokenStyleSet(t, depth);
+    return ('\nAmbient: ' +
+        JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
+        '\n\nKey: ' +
+        JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, ''));
+}
 //# sourceMappingURL=ShadowDepthTestSection.js.map

package/lib/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map

@@ -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"}
+{"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

@@ -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"}
+{"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

@@ -9,19 +9,20 @@ var react_native_2 = require("@fluentui/react-native");
 var experimental_shadow_1 = require("@fluentui-react-native/experimental-shadow");
 var theme_types_1 = require("@fluentui-react-native/theme-types");
 var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
-var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
+var framework_1 = require("@fluentui-react-native/framework");
+var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function () {
     return {
         effectBox: {
             width: 366,
             minHeight: 64,
-            backgroundColor: t.colors.background,
         },
         padding: {
             padding: 20,
             paddingHorizontal: 24,
         },
         vmargin: {
-            marginVertical: 32,
+            marginVertical: 16,
+            marginHorizontal: 32,
         },
     };
 });
@@ -29,18 +30,38 @@ var ShadowTestBox = function (props) {
     var theme = (0, theme_types_1.useTheme)();
     var themedStyles = getThemedStyles(theme);
     return (React.createElement(experimental_shadow_1.Shadow, { depth: props.depth },
-        React.createElement(react_native_2.Text, { style: [styles_1.commonTestStyles.view, themedStyles.effectBox, themedStyles.vmargin, themedStyles.padding], variant: "bodySemibold" },
-            "Shadow Depth: ",
-            props.depth)));
+        React.createElement(react_native_1.View, { style: [
+                styles_1.commonTestStyles.view,
+                themedStyles.effectBox,
+                themedStyles.vmargin,
+                themedStyles.padding,
+                { backgroundColor: props.backgroundColor },
+            ] },
+            React.createElement(react_native_2.Text, { variant: "bodySemibold" }, props.depth),
+            React.createElement(react_native_2.Text, null, getShadowDescription(props.depth, theme)))));
 };
 var ShadowDepthTestSection = function () {
-    return (React.createElement(react_native_1.View, { style: { padding: 20 } },
-        React.createElement(ShadowTestBox, { depth: "2" }),
-        React.createElement(ShadowTestBox, { depth: "4" }),
-        React.createElement(ShadowTestBox, { depth: "8" }),
-        React.createElement(ShadowTestBox, { depth: "16" }),
-        React.createElement(ShadowTestBox, { depth: "28" }),
-        React.createElement(ShadowTestBox, { depth: "64" })));
+    var theme = (0, framework_1.useFluentTheme)();
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(ShadowTestBox, { depth: "shadow2", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow4", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow8", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow16", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow28", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow64", backgroundColor: theme.colors.background }),
+        React.createElement(ShadowTestBox, { depth: "shadow2brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow4brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow8brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow16brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow28brand", backgroundColor: theme.colors.brandBackground }),
+        React.createElement(ShadowTestBox, { depth: "shadow64brand", backgroundColor: theme.colors.brandBackground })));
 };
 exports.ShadowDepthTestSection = ShadowDepthTestSection;
+function getShadowDescription(depth, t) {
+    var shadowStyle = (0, experimental_shadow_1.getShadowTokenStyleSet)(t, depth);
+    return ('\nAmbient: ' +
+        JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
+        '\n\nKey: ' +
+        JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, ''));
+}
 //# sourceMappingURL=ShadowDepthTestSection.js.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.js.map

@@ -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"}
+{"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.71.1",
+  "version": "0.71.2",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -39,7 +39,7 @@
     "@fluentui-react-native/experimental-native-date-picker": ">=0.5.0 <1.0.0",
     "@fluentui-react-native/experimental-expander": "0.3.34",
     "@fluentui-react-native/experimental-menu-button": ">=0.3.52 <1.0.0",
-    "@fluentui-react-native/experimental-shadow": "0.2.0",
+    "@fluentui-react-native/experimental-shadow": "0.2.1",
     "@fluentui-react-native/experimental-shimmer": "0.6.34",
     "@fluentui-react-native/experimental-tabs": "0.4.53",
     "@fluentui-react-native/experimental-text": ">=0.9.1 <1.0.0",

package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -1,53 +1,84 @@
 import * as React from 'react';
 import { commonTestStyles } from '../Common/styles';
-import { View } from 'react-native';
+import { ColorValue, View } from 'react-native';
 import { Text } from '@fluentui/react-native';
-import { Shadow, ShadowDepth } from '@fluentui-react-native/experimental-shadow';
+import { Shadow, ShadowDepth, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
 import { Theme, useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 
-const getThemedStyles = themedStyleSheet((t: Theme) => {
+const getThemedStyles = themedStyleSheet(() => {
   return {
     effectBox: {
       width: 366,
       minHeight: 64,
-      backgroundColor: t.colors.background,
     },
     padding: {
       padding: 20,
       paddingHorizontal: 24,
     },
     vmargin: {
-      marginVertical: 32,
+      marginVertical: 16,
+      marginHorizontal: 32,
     },
   };
 });
 
 interface ShadowTestBoxProps {
   depth: ShadowDepth;
+  backgroundColor: ColorValue;
 }
 
 const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: ShadowTestBoxProps) => {
   const theme = useTheme();
   const themedStyles = getThemedStyles(theme);
+
   return (
     <Shadow depth={props.depth}>
-      <Text style={[commonTestStyles.view, themedStyles.effectBox, themedStyles.vmargin, themedStyles.padding]} variant="bodySemibold">
-        Shadow Depth: {props.depth}
-      </Text>
+      <View
+        style={[
+          commonTestStyles.view,
+          themedStyles.effectBox,
+          themedStyles.vmargin,
+          themedStyles.padding,
+          { backgroundColor: props.backgroundColor },
+        ]}
+      >
+        <Text variant="bodySemibold">{props.depth}</Text>
+        <Text>{getShadowDescription(props.depth, theme)}</Text>
+      </View>
     </Shadow>
   );
 };
 
 export const ShadowDepthTestSection: React.FunctionComponent = () => {
+  const theme = useFluentTheme();
+
   return (
-    <View style={{ padding: 20 }}>
-      <ShadowTestBox depth="2" />
-      <ShadowTestBox depth="4" />
-      <ShadowTestBox depth="8" />
-      <ShadowTestBox depth="16" />
-      <ShadowTestBox depth="28" />
-      <ShadowTestBox depth="64" />
+    <View>
+      <ShadowTestBox depth="shadow2" backgroundColor={theme.colors.background} />
+      <ShadowTestBox depth="shadow4" backgroundColor={theme.colors.background} />
+      <ShadowTestBox depth="shadow8" backgroundColor={theme.colors.background} />
+      <ShadowTestBox depth="shadow16" backgroundColor={theme.colors.background} />
+      <ShadowTestBox depth="shadow28" backgroundColor={theme.colors.background} />
+      <ShadowTestBox depth="shadow64" backgroundColor={theme.colors.background} />
+      <ShadowTestBox depth="shadow2brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox depth="shadow4brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox depth="shadow8brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox depth="shadow16brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox depth="shadow28brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox depth="shadow64brand" backgroundColor={theme.colors.brandBackground} />
     </View>
   );
 };
+
+function getShadowDescription(depth: ShadowDepth, t: Theme): string {
+  const shadowStyle = getShadowTokenStyleSet(t, depth);
+
+  return (
+    '\nAmbient: ' +
+    JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
+    '\n\nKey: ' +
+    JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, '')
+  );
+}