@hero-design/rn 8.21.0 → 8.22.0

package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2,100 +2,52 @@
 
 exports[`FAB when animated is false renders StyledFABIcon 1`] = `
 <View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
-      },
-      Object {
-        "backgroundColor": "#001f23",
-      },
-    ]
-  }
->
-  <HeroIcon
-    name="add"
-    style={
+      Object {},
       Array [
         Object {
-          "color": "#001f23",
-          "fontSize": 24,
-        },
-        Array [
-          Object {
-            "color": "#ffffff",
-            "lineHeight": 24,
-            "textAlign": "center",
-            "textAlignVertical": "center",
+          "shadowColor": "#001f23",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
           },
-          undefined,
-        ],
-      ]
-    }
-    testID="styled-fab-icon"
-    themeIntent="text"
-    themeSize="medium"
-  />
-</View>
-`;
-
-exports[`FAB when animated is true renders animatedFABIcon 1`] = `
-<View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
-      },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 8,
+        },
+        Object {
+          "backgroundColor": "#001f23",
+        },
+      ],
     ]
   }
 >
   <View
-    collapsable={false}
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "transform": Array [
-          Object {
-            "rotate": "0deg",
-          },
-        ],
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "elevation": 2,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
     }
   >
     <HeroIcon
@@ -113,11 +65,11 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
               "textAlign": "center",
               "textAlignVertical": "center",
             },
-            Object {},
+            undefined,
           ],
         ]
       }
-      testID="animated-fab-icon"
+      testID="styled-fab-icon"
       themeIntent="text"
       themeSize="medium"
     />
@@ -125,90 +77,201 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
 </View>
 `;
 
-exports[`FAB when title has value renders correctly 1`] = `
+exports[`FAB when animated is true renders animatedFABIcon 1`] = `
 <View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
-      },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Object {},
+      Array [
+        Object {
+          "shadowColor": "#001f23",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 8,
+        },
+        Object {
+          "backgroundColor": "#001f23",
+        },
+      ],
     ]
   }
 >
-  <HeroIcon
-    name="pencil"
+  <View
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       Array [
         Object {
-          "color": "#001f23",
-          "fontSize": 16,
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "elevation": 2,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
         },
-        Array [
-          Object {
-            "color": "#ffffff",
-            "lineHeight": 24,
-            "textAlign": "center",
-            "textAlignVertical": "center",
-          },
-          undefined,
-        ],
+        undefined,
       ]
     }
-    testID="styled-fab-icon"
-    themeIntent="text"
-    themeSize="xsmall"
-  />
-  <Text
-    allowFontScaling={false}
+  >
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+        }
+      }
+    >
+      <HeroIcon
+        name="add"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            Array [
+              Object {
+                "color": "#ffffff",
+                "lineHeight": 24,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              Object {},
+            ],
+          ]
+        }
+        testID="animated-fab-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FAB when title has value renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "shadowColor": "#001f23",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 8,
+        },
+        Object {
+          "backgroundColor": "#001f23",
+        },
+      ],
+    ]
+  }
+>
+  <View
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       Array [
         Object {
-          "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "elevation": 2,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
         },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="pencil"
+      style={
         Array [
           Object {
-            "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
+            "color": "#001f23",
             "fontSize": 16,
-            "lineHeight": 24,
-            "marginHorizontal": 8,
-            "textAlign": "center",
-            "textAlignVertical": "center",
           },
-          undefined,
-        ],
-      ]
-    }
-    themeFontSize="medium"
-    themeFontWeight="regular"
-    themeIntent="body"
-    themeTypeface="neutral"
-  >
-    Shout out
-  </Text>
+          Array [
+            Object {
+              "color": "#ffffff",
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="styled-fab-icon"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "lineHeight": 24,
+              "marginHorizontal": 8,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Shout out
+    </Text>
+  </View>
 </View>
 `;

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -461,6 +461,7 @@ Object {
         "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
         "icon": "#ffffff",
+        "shadow": "#001f23",
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
@@ -482,6 +483,15 @@ Object {
       "radii": Object {
         "actionItem": 999,
       },
+      "shadows": Object {
+        "elevation": 2,
+        "offset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "opacity": 0.12,
+        "radius": 8,
+      },
       "sizes": Object {
         "height": 64,
         "width": 64,

package/src/theme/components/fab.ts

@@ -11,6 +11,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
+    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -37,6 +38,13 @@ const getFABTheme = (theme: GlobalTheme) => {
     icon: theme.lineHeights.large,
   };
 
+  const shadows = {
+    offset: { width: 0, height: 2 },
+    opacity: 0.12,
+    radius: theme.radii.medium,
+    elevation: 2,
+  };
+
   const space = {
     actionItemPaddingLeft: theme.space.medium,
     actionItemPaddingRight: theme.space.medium,
@@ -58,7 +66,16 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItem: theme.radii.rounded,
   };
 
-  return { radii, fonts, fontSizes, colors, sizes, lineHeights, space };
+  return {
+    radii,
+    fonts,
+    fontSizes,
+    colors,
+    sizes,
+    lineHeights,
+    shadows,
+    space,
+  };
 };
 
 export default getFABTheme;

package/src/theme/global/colors/__tests__/__snapshots__/globalDark.spec.ts.snap

@@ -2,38 +2,38 @@
 
 exports[`globalDark returns correct theme object 1`] = `
 Object {
-  "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archived": "#68686d",
+  "archivedSurface": "#344348",
   "darkGlobalSurface": "#ffffff",
   "defaultGlobalSurface": "#001f23",
   "disabledOnDefaultGlobalSurface": "#82858a",
   "disabledOutline": "#82858a",
-  "error": "#f46363",
-  "errorSurface": "#fcebe7",
+  "error": "#c8300a",
+  "errorSurface": "#6f2a17",
   "inactiveOnDefaultGlobalSurface": "#99a5a7",
   "inactiveOutline": "#99a5a7",
-  "info": "#b5c3fd",
-  "infoSurface": "#ecf0ff",
-  "mutedArchived": "#bcbdbf",
-  "mutedError": "#f68282",
-  "mutedInfo": "#c4cffd",
+  "info": "#3e5ee2",
+  "infoSurface": "#23438f",
+  "mutedArchived": "#b2b3b5",
+  "mutedError": "#e55d3c",
+  "mutedInfo": "#6a86fc",
   "mutedOnDefaultGlobalSurface": "#b3bcbd",
-  "mutedSuccess": "#7bd897",
-  "mutedWarning": "#ffcb8d",
+  "mutedSuccess": "#34978a",
+  "mutedWarning": "#b7864e",
   "neutralGlobalSurface": "#264144",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#acacaf",
   "onDarkGlobalSurface": "#001f23",
   "onDefaultGlobalSurface": "#ffffff",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
-  "onSuccessSurface": "#017d6d",
+  "onErrorSurface": "#f89076",
+  "onInfoSurface": "#a1b5fc",
+  "onSuccessSurface": "#01cbb0",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#727478",
   "primaryOutline": "#ffffff",
   "secondaryOutline": "#193539",
-  "success": "#5ace7d",
-  "successSurface": "#f0fef4",
-  "warning": "#ffbe71",
-  "warningSurface": "#fff6eb",
+  "success": "#017162",
+  "successSurface": "#004e48",
+  "warning": "#a56822",
+  "warningSurface": "#4d4628",
 }
 `;

package/src/theme/global/colors/__tests__/__snapshots__/swagDark.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`swagDark returns correct theme object 1`] = `
 Object {
-  "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archived": "#68686d",
+  "archivedSurface": "#344348",
   "darkGlobalSurface": "#ffffff",
   "decorativePrimary": "#001f23",
   "decorativePrimarySurface": "#193539",
@@ -11,28 +11,28 @@ Object {
   "defaultSurface": "#001f23",
   "disabledOnDefaultGlobalSurface": "#82858a",
   "disabledOutline": "#82858a",
-  "error": "#f46363",
-  "errorSurface": "#fcebe7",
+  "error": "#c8300a",
+  "errorSurface": "#6f2a17",
   "highlightedSurface": "#443153",
   "inactiveOnDefaultGlobalSurface": "#99a5a7",
   "inactiveOutline": "#99a5a7",
-  "info": "#b5c3fd",
-  "infoSurface": "#ecf0ff",
-  "mutedArchived": "#bcbdbf",
-  "mutedError": "#f68282",
-  "mutedInfo": "#c4cffd",
+  "info": "#3e5ee2",
+  "infoSurface": "#23438f",
+  "mutedArchived": "#b2b3b5",
+  "mutedError": "#e55d3c",
+  "mutedInfo": "#6a86fc",
   "mutedOnDefaultGlobalSurface": "#b3bcbd",
-  "mutedSuccess": "#7bd897",
-  "mutedWarning": "#ffcb8d",
+  "mutedSuccess": "#34978a",
+  "mutedWarning": "#b7864e",
   "neutralGlobalSurface": "#264144",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#acacaf",
   "onDarkGlobalSurface": "#001f23",
   "onDefaultGlobalSurface": "#ffffff",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#f89076",
+  "onInfoSurface": "#a1b5fc",
   "onPrimary": "#001f23",
   "onSecondary": "#001f23",
-  "onSuccessSurface": "#017d6d",
+  "onSuccessSurface": "#01cbb0",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#727478",
   "pressedSurface": "#cc9df1",
@@ -40,9 +40,9 @@ Object {
   "primaryOutline": "#ffffff",
   "secondary": "#dbbaf5",
   "secondaryOutline": "#193539",
-  "success": "#5ace7d",
-  "successSurface": "#f0fef4",
-  "warning": "#ffbe71",
-  "warningSurface": "#fff6eb",
+  "success": "#017162",
+  "successSurface": "#004e48",
+  "warning": "#a56822",
+  "warningSurface": "#4d4628",
 }
 `;

package/src/theme/global/colors/globalDark.ts

@@ -21,30 +21,30 @@ const globalPalette: GlobalSystemPalette = {
   disabledOutline: palette.greyDark20,
 
   // Accents
-  error: palette.pastelRed,
-  mutedError: palette.pastelRedLight20,
-  errorSurface: palette.linen,
-  onErrorSurface: palette.vermilion,
-
-  warning: palette.mellowApricot,
-  mutedWarning: palette.mellowApricotLight20,
-  warningSurface: palette.seashell,
-  onWarningSurface: palette.deepSaffron,
-
-  success: palette.emerald,
-  mutedSuccess: palette.emeraldLight20,
-  successSurface: palette.honeydew,
-  onSuccessSurface: palette.pineGreen,
-
-  info: palette.vodka,
-  mutedInfo: palette.vodkaLight20,
-  infoSurface: palette.aliceBlue,
-  onInfoSurface: palette.ultramarineBlue,
-
-  archived: palette.silverChalice,
-  mutedArchived: palette.silverChaliceLight20,
-  archivedSurface: palette.antiFlashWhite,
-  onArchivedSurface: palette.sonicSilver,
+  error: palette.vermilionDark10,
+  mutedError: palette.vermilionLight20,
+  errorSurface: palette.moussaka,
+  onErrorSurface: palette.indianDance,
+
+  warning: palette.theatreGold,
+  mutedWarning: palette.theatreGoldLight20,
+  warningSurface: palette.uniformGreen,
+  onWarningSurface: palette.blazingBonfire,
+
+  success: palette.pineGreenDark10,
+  mutedSuccess: palette.pineGreenLight20,
+  successSurface: palette.deepIntoTheJungle,
+  onSuccessSurface: palette.mintLeaf,
+
+  info: palette.ultramarineBlueDark10,
+  mutedInfo: palette.ultramarineBlueLight20,
+  infoSurface: palette.blueOblivion,
+  onInfoSurface: palette.pastelBlue,
+
+  archived: palette.sonicSilverDark10,
+  mutedArchived: palette.sonicSilverLight50,
+  archivedSurface: palette.bigStone,
+  onArchivedSurface: palette.flagstone,
   // End of Updated 21 / Nov / 22
 };
 

package/types/components/FAB/StyledFAB.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { TouchableHighlight } from 'react-native';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import type { IconProps } from '../Icon';
-declare const StyledFABContainer: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
@@ -16,4 +16,8 @@ declare const StyledFABText: import("@emotion/native").StyledComponent<import(".
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TextProps, {}, {}>;
-export { StyledFABContainer, StyledFABIcon, StyledFABText };
+declare const StyledFABContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledFAB, StyledFABIcon, StyledFABText, StyledFABContainer };