@hero-design/rn 8.36.1 → 8.36.3

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

@@ -19,7 +19,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -29,7 +29,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       Array [
         Object {
@@ -87,7 +87,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -97,7 +97,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       Array [
         Object {
@@ -185,7 +185,7 @@ exports[`FAB when title has value renders correctly 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -195,7 +195,7 @@ exports[`FAB when title has value renders correctly 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       Array [
         Object {

package/src/components/List/StyledListItem.tsx

@@ -29,11 +29,11 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       return {
         ...sharedStyles,
         alignItems: 'center',
-        shadowColor: theme.colors.secondaryOutline,
-        shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.shadows.cardOffset,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
-        elevation: theme.__hd__.list.shadows.cardElevation,
+        shadowColor: theme.__hd__.list.shadows.card.color,
+        shadowRadius: theme.__hd__.list.shadows.card.radius,
+        shadowOffset: theme.__hd__.list.shadows.card.offset,
+        shadowOpacity: theme.__hd__.list.shadows.card.opacity,
+        elevation: theme.__hd__.list.shadows.card.elevation,
       };
     default:
       return sharedStyles;

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -102,15 +102,15 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
         "alignItems": "center",
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
-        "elevation": 10,
+        "elevation": 3,
         "flexDirection": "row",
         "padding": 16,
-        "shadowColor": "#e8e9ea",
+        "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 1,
+        "shadowOpacity": 0.12,
         "shadowRadius": 4,
       },
       undefined,
@@ -203,15 +203,15 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
         "alignItems": "center",
         "backgroundColor": "#ece8ef",
         "borderRadius": 8,
-        "elevation": 10,
+        "elevation": 3,
         "flexDirection": "row",
         "padding": 16,
-        "shadowColor": "#e8e9ea",
+        "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 1,
+        "shadowOpacity": 0.12,
         "shadowRadius": 4,
       },
       undefined,

package/src/components/Toast/StyledToast.tsx

@@ -22,7 +22,7 @@ const Container = styled(Animated.View)<{
   backgroundColor: theme.__hd__.toast.colors[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
-  shadowColor: theme.__hd__.toast.colors.shadow,
+  shadowColor: theme.__hd__.toast.shadows.color,
   shadowOffset: theme.__hd__.toast.shadows.offset,
   shadowRadius: theme.__hd__.toast.shadows.radius,
   shadowOpacity: theme.__hd__.toast.shadows.opacity,

package/src/components/Toast/__tests__/__snapshots__/Toast.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     Object {
       "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -113,7 +113,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     Object {
       "backgroundColor": "#f46363",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -260,7 +260,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     Object {
       "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -407,7 +407,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
     Object {
       "backgroundColor": "#ffffff",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -527,7 +527,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
     Object {
       "backgroundColor": "#001f23",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -647,7 +647,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     Object {
       "backgroundColor": "#5ace7d",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -794,7 +794,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     Object {
       "backgroundColor": "#ffbe71",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,

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

@@ -288,19 +288,19 @@ Object {
     "cardCarousel": Object {
       "colors": Object {
         "carouselItemBackground": "#f6f6f7",
-        "shadow": "#001f23",
       },
       "radii": Object {
         "card": 8,
       },
       "shadows": Object {
-        "elevation": 4,
+        "color": "#001f23",
+        "elevation": 3,
         "offset": Object {
           "height": 2,
           "width": 0,
         },
         "opacity": 0.12,
-        "radius": 8,
+        "radius": 4,
       },
       "space": Object {
         "carouselItemSpacing": 8,
@@ -475,7 +475,6 @@ Object {
         "buttonPressedBackground": "#33144d",
         "headerText": "#001f23",
         "icon": "#ffffff",
-        "shadow": "#001f23",
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
@@ -498,13 +497,14 @@ Object {
         "actionItem": 999,
       },
       "shadows": Object {
-        "elevation": 2,
+        "color": "#001f23",
+        "elevation": 3,
         "offset": Object {
           "height": 2,
           "width": 0,
         },
         "opacity": 0.12,
-        "radius": 8,
+        "radius": 4,
       },
       "sizes": Object {
         "height": 64,
@@ -564,21 +564,24 @@ Object {
         "listItemContainerBackground": "#ffffff",
       },
       "opacity": Object {
-        "cardShadow": 1,
         "disabled": 0.38,
         "enabled": 1,
       },
       "radii": Object {
         "basicItem": 4,
-        "cardShadow": 4,
         "item": 8,
         "leadingStatus": 999,
       },
       "shadows": Object {
-        "cardElevation": 10,
-        "cardOffset": Object {
-          "height": 2,
-          "width": 0,
+        "card": Object {
+          "color": "#001f23",
+          "elevation": 3,
+          "offset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "opacity": 0.12,
+          "radius": 4,
         },
       },
       "space": Object {
@@ -1053,7 +1056,6 @@ Object {
         "error": "#f46363",
         "info": "#b5c3fd",
         "notification": "#ffffff",
-        "shadow": "#001f23",
         "snackbar": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
@@ -1062,7 +1064,8 @@ Object {
         "default": 16,
       },
       "shadows": Object {
-        "elevation": 4,
+        "color": "#001f23",
+        "elevation": 3,
         "offset": Object {
           "height": 2,
           "width": 0,
@@ -1381,6 +1384,18 @@ Object {
     "xxlarge": 20,
     "xxxlarge": 24,
   },
+  "shadows": Object {
+    "default": Object {
+      "elevation": 3,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+    },
+  },
   "sizes": Object {
     "14xlarge": 136,
     "15xlarge": 144,

package/src/theme/components/cardCarousel.ts

@@ -8,14 +8,14 @@ const getCardCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    shadow: theme.colors.primaryOutline,
     carouselItemBackground: theme.colors.defaultSurface,
   };
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 4,
+    color: theme.shadows.default.shadowColor,
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
   };
 
   const radii = {

package/src/theme/components/fab.ts

@@ -12,7 +12,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
-    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -42,10 +41,11 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 2,
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
+    color: theme.shadows.default.shadowColor,
   };
 
   const space = {

package/src/theme/components/list.ts

@@ -23,13 +23,17 @@ const getListTheme = (theme: GlobalTheme) => {
   const radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,
   };
 
   const shadows = {
-    cardOffset: { width: 0, height: 2 },
-    cardElevation: 10,
+    card: {
+      offset: theme.shadows.default.shadowOffset,
+      elevation: theme.shadows.default.elevation,
+      color: theme.shadows.default.shadowColor,
+      radius: theme.shadows.default.shadowRadius,
+      opacity: theme.shadows.default.shadowOpacity,
+    },
   };
 
   const widths = {
@@ -39,7 +43,6 @@ const getListTheme = (theme: GlobalTheme) => {
   const opacity = {
     disabled: 0.38,
     enabled: 1,
-    cardShadow: 1,
   };
 
   return { colors, space, radii, widths, opacity, shadows };

package/src/theme/components/toast.ts

@@ -9,7 +9,6 @@ const getToastTheme = (theme: GlobalTheme) => {
     notification: theme.colors.defaultGlobalSurface,
     snackbar: theme.colors.darkGlobalSurface,
     divider: theme.colors.secondaryOutline,
-    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -34,10 +33,11 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: 4,
-    elevation: 4,
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
+    color: theme.shadows.default.shadowColor,
   };
 
   return { colors, radii, sizes, space, borderWidths, shadows };

package/src/theme/global/index.ts

@@ -12,6 +12,7 @@ import { getSizes } from './sizes';
 import { getBorderWidths, getRadii } from './borders';
 import type { Scale } from './scale';
 import type { SystemPalette } from './colors/types';
+import { getShadows } from './shadows';
 
 const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const fonts = getFonts(scale.font);
@@ -21,6 +22,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const space = getSpace(scale.space);
   const sizes = getSizes(scale.size);
   const radii = getRadii(scale.radius);
+  const shadows = getShadows(systemPalette);
 
   return {
     colors: {
@@ -33,6 +35,7 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
     space,
     sizes,
     radii,
+    shadows,
   };
 };
 

package/src/theme/global/shadows.ts

@@ -0,0 +1,19 @@
+import type { SystemPalette } from '.';
+
+const getShadows = (systemPalette: SystemPalette) => ({
+  default: {
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowColor: systemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+});
+
+type Shadows = ReturnType<typeof getShadows>;
+
+export { getShadows };
+export type { Shadows };

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -5,7 +5,6 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeWithBorder: boolean;
     themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;

package/types/components/Checkbox/index.d.ts

@@ -9,6 +9,7 @@ export interface CheckboxProps {
      */
     description?: string;
     /**
+     * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
      * Whether the border is shown.
      */
     withBorder?: boolean;

package/types/theme/components/cardCarousel.d.ts

@@ -1,6 +1,7 @@
 import type { GlobalTheme } from '../global';
 declare const getCardCarouselTheme: (theme: GlobalTheme) => {
     shadows: {
+        color: string;
         offset: {
             width: number;
             height: number;
@@ -10,7 +11,6 @@ declare const getCardCarouselTheme: (theme: GlobalTheme) => {
         elevation: number;
     };
     colors: {
-        shadow: string;
         carouselItemBackground: string;
     };
     space: {

package/types/theme/components/fab.d.ts

@@ -24,7 +24,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         backdropBackground: string;
         titleText: string;
         actionItemText: string;
-        shadow: string;
     };
     sizes: {
         width: number;
@@ -46,6 +45,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         opacity: number;
         radius: number;
         elevation: number;
+        color: string;
     };
     space: {
         actionItemPadding: number;

package/types/theme/components/list.d.ts

@@ -20,7 +20,6 @@ declare const getListTheme: (theme: GlobalTheme) => {
     radii: {
         item: number;
         basicItem: number;
-        cardShadow: number;
         leadingStatus: number;
     };
     widths: {
@@ -29,14 +28,18 @@ declare const getListTheme: (theme: GlobalTheme) => {
     opacity: {
         disabled: number;
         enabled: number;
-        cardShadow: number;
     };
     shadows: {
-        cardOffset: {
-            width: number;
-            height: number;
+        card: {
+            offset: {
+                width: number;
+                height: number;
+            };
+            elevation: number;
+            color: string;
+            radius: number;
+            opacity: number;
         };
-        cardElevation: number;
     };
 };
 export default getListTheme;

package/types/theme/components/toast.d.ts

@@ -8,7 +8,6 @@ declare const getToastTheme: (theme: GlobalTheme) => {
         notification: string;
         snackbar: string;
         divider: string;
-        shadow: string;
     };
     radii: {
         default: number;
@@ -35,6 +34,7 @@ declare const getToastTheme: (theme: GlobalTheme) => {
         opacity: number;
         radius: number;
         elevation: number;
+        color: string;
     };
 };
 export default getToastTheme;

package/types/theme/global/index.d.ts

@@ -59,6 +59,18 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     space: import("./space").Space;
     sizes: import("./sizes").Sizes;
     radii: import("./borders").Radii;
+    shadows: {
+        default: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
+    };
 };
 type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 export type { GlobalTheme, Scale, SystemPalette };

package/types/theme/global/shadows.d.ts

@@ -0,0 +1,16 @@
+import type { SystemPalette } from '.';
+declare const getShadows: (systemPalette: SystemPalette) => {
+    default: {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+type Shadows = ReturnType<typeof getShadows>;
+export { getShadows };
+export type { Shadows };