@hero-design/rn 8.91.6 → 8.91.7

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3010) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3034) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 53.8s
+created lib/index.js, es/index.js in 51.9s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.91.7
+
+### Patch Changes
+
+- [#3720](https://github.com/Thinkei/hero-design/pull/3720) [`c6acaedafaa8d246f2882a72234db93b3fff93d3`](https://github.com/Thinkei/hero-design/commit/c6acaedafaa8d246f2882a72234db93b3fff93d3) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Mobile] Update shadow naming
+
 ## 8.91.6
 
 ### Patch Changes

package/es/index.js

@@ -2316,16 +2316,6 @@ var getRadii = function getRadii(baseRadius) {
 
 var swagLightShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: swagSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2335,7 +2325,7 @@ var swagLightShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2344,6 +2334,16 @@ var swagLightShadowPalette = {
     shadowOpacity: 0.04,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2358,40 +2358,30 @@ var swagLightJobsShadowPalette = {
     shadowRadius: 4,
     elevation: 3
   },
-  cardDrawer: {
+  medium: {
     shadowOffset: {
       width: 0,
-      height: 2
+      height: -4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.12,
-    shadowRadius: 2,
-    elevation: 6
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
   },
-  tabBar: {
+  deep: {
     shadowOffset: {
       width: 0,
-      height: -4
+      height: 4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.04,
-    shadowRadius: 6,
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
     elevation: 10
   }
 };
 
 var ehWorkDarkShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2401,7 +2391,7 @@ var ehWorkDarkShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2410,6 +2400,16 @@ var ehWorkDarkShadowPalette = {
     shadowOpacity: 0.24,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.64,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2499,7 +2499,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -2670,7 +2670,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     height: theme.sizes['6xlarge']
   };
   var shadows = {
-    wrapper: theme.shadows.tabBar
+    wrapper: theme.shadows.medium
   };
   var space = {
     titleMarginTop: theme.space.xsmall
@@ -2985,7 +2985,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
-    filledWrapper: theme.shadows.cardDrawer
+    filledWrapper: theme.shadows["default"]
   };
   var fontSizes = {
     icon: theme.fontSizes.small
@@ -3184,7 +3184,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    "default": theme.shadows.cardDrawer
+    "default": theme.shadows["default"]
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3274,7 +3274,7 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    card: theme.shadows.cardDrawer
+    card: theme.shadows["default"]
   };
   var widths = {
     leadingStatus: 8
@@ -3961,7 +3961,7 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -4215,7 +4215,7 @@ var getSearchTheme = function getSearchTheme(theme) {
     shadow: theme.colors.primaryOutline
   };
   var shadows = {
-    container: theme.shadows.cardDrawer
+    container: theme.shadows["default"]
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
@@ -4295,11 +4295,11 @@ var getMapPinTheme = function getMapPinTheme(theme) {
     iconRight: -theme.space.small
   };
   var shadows = {
-    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
+    offset: theme.shadows.deep.shadowOffset,
+    opacity: theme.shadows.deep.shadowOpacity,
+    radius: theme.shadows.deep.shadowRadius,
+    elevation: theme.shadows.deep.elevation,
+    color: theme.shadows.deep.shadowColor
   };
   return {
     sizes: sizes,
@@ -4320,7 +4320,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
     wrapper: theme.radii.rounded
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   var space = {
     wrapperPadding: theme.space.small,

package/lib/index.js

@@ -2344,16 +2344,6 @@ var getRadii = function getRadii(baseRadius) {
 
 var swagLightShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: swagSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2363,7 +2353,7 @@ var swagLightShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2372,6 +2362,16 @@ var swagLightShadowPalette = {
     shadowOpacity: 0.04,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2386,40 +2386,30 @@ var swagLightJobsShadowPalette = {
     shadowRadius: 4,
     elevation: 3
   },
-  cardDrawer: {
+  medium: {
     shadowOffset: {
       width: 0,
-      height: 2
+      height: -4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.12,
-    shadowRadius: 2,
-    elevation: 6
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
   },
-  tabBar: {
+  deep: {
     shadowOffset: {
       width: 0,
-      height: -4
+      height: 4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.04,
-    shadowRadius: 6,
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
     elevation: 10
   }
 };
 
 var ehWorkDarkShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2429,7 +2419,7 @@ var ehWorkDarkShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2438,6 +2428,16 @@ var ehWorkDarkShadowPalette = {
     shadowOpacity: 0.24,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.64,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2527,7 +2527,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -2698,7 +2698,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     height: theme.sizes['6xlarge']
   };
   var shadows = {
-    wrapper: theme.shadows.tabBar
+    wrapper: theme.shadows.medium
   };
   var space = {
     titleMarginTop: theme.space.xsmall
@@ -3013,7 +3013,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
-    filledWrapper: theme.shadows.cardDrawer
+    filledWrapper: theme.shadows["default"]
   };
   var fontSizes = {
     icon: theme.fontSizes.small
@@ -3212,7 +3212,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    "default": theme.shadows.cardDrawer
+    "default": theme.shadows["default"]
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3302,7 +3302,7 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    card: theme.shadows.cardDrawer
+    card: theme.shadows["default"]
   };
   var widths = {
     leadingStatus: 8
@@ -3989,7 +3989,7 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -4243,7 +4243,7 @@ var getSearchTheme = function getSearchTheme(theme) {
     shadow: theme.colors.primaryOutline
   };
   var shadows = {
-    container: theme.shadows.cardDrawer
+    container: theme.shadows["default"]
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
@@ -4323,11 +4323,11 @@ var getMapPinTheme = function getMapPinTheme(theme) {
     iconRight: -theme.space.small
   };
   var shadows = {
-    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
+    offset: theme.shadows.deep.shadowOffset,
+    opacity: theme.shadows.deep.shadowOpacity,
+    radius: theme.shadows.deep.shadowRadius,
+    elevation: theme.shadows.deep.elevation,
+    color: theme.shadows.deep.shadowColor
   };
   return {
     sizes: sizes,
@@ -4348,7 +4348,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
     wrapper: theme.radii.rounded
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   var space = {
     wrapperPadding: theme.space.small,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.6",
+  "version": "8.91.7",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/MapPin/__tests__/__snapshots__/Focussed.spec.tsx.snap

@@ -33,12 +33,12 @@ exports[`MapPin.Focussed renders icon correctly 1`] = `
           [
             {
               "fontSize": 42,
-              "textShadowColor": "rgba(0,0,0,0.12)",
+              "textShadowColor": "rgba(0,0,0,0.28)",
               "textShadowOffset": {
-                "height": 2,
+                "height": 4,
                 "width": 0,
               },
-              "textShadowRadius": 4,
+              "textShadowRadius": 8,
             },
             undefined,
           ],

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

@@ -33,16 +33,16 @@ exports[`MapPin renders applied state correctly 1`] = `
             "borderRadius": 12,
             "borderWidth": 4,
             "display": "flex",
-            "elevation": 3,
+            "elevation": 10,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#121214",
+            "shadowColor": "#001f23",
             "shadowOffset": {
-              "height": 2,
+              "height": 4,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowOpacity": 0.28,
+            "shadowRadius": 8,
             "width": 42,
           },
           undefined,
@@ -168,16 +168,16 @@ exports[`MapPin renders icon correctly 1`] = `
             "borderRadius": 12,
             "borderWidth": 4,
             "display": "flex",
-            "elevation": 3,
+            "elevation": 10,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#121214",
+            "shadowColor": "#001f23",
             "shadowOffset": {
-              "height": 2,
+              "height": 4,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowOpacity": 0.28,
+            "shadowRadius": 8,
             "width": 42,
           },
           undefined,
@@ -263,16 +263,16 @@ exports[`MapPin renders image correctly 1`] = `
             "borderRadius": 12,
             "borderWidth": 4,
             "display": "flex",
-            "elevation": 3,
+            "elevation": 10,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#121214",
+            "shadowColor": "#001f23",
             "shadowOffset": {
-              "height": 2,
+              "height": 4,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowOpacity": 0.28,
+            "shadowRadius": 8,
             "width": 42,
           },
           undefined,
@@ -356,16 +356,16 @@ exports[`MapPin renders selected state correctly 1`] = `
             "borderRadius": 12,
             "borderWidth": 4,
             "display": "flex",
-            "elevation": 3,
+            "elevation": 10,
             "height": 42,
             "justifyContent": "center",
-            "shadowColor": "#121214",
+            "shadowColor": "#001f23",
             "shadowOffset": {
-              "height": 2,
+              "height": 4,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowOpacity": 0.28,
+            "shadowRadius": 8,
             "width": 42,
           },
           undefined,

package/src/components/Slider/__tests__/__snapshots__/RangeSlider.spec.tsx.snap

@@ -157,15 +157,15 @@ exports[`StyledMarker renders correctly when disabled is false 1`] = `
         {
           "backgroundColor": "#401960",
           "borderRadius": 999,
-          "elevation": 3,
+          "elevation": 6,
           "height": 24,
-          "shadowColor": "#121214",
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
           "width": 24,
         },
         undefined,
@@ -211,15 +211,15 @@ exports[`StyledMarker renders correctly when disabled is true 1`] = `
         {
           "backgroundColor": "#bfc1c5",
           "borderRadius": 999,
-          "elevation": 3,
+          "elevation": 6,
           "height": 24,
-          "shadowColor": "#121214",
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
           "width": 24,
         },
         undefined,

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

@@ -780,14 +780,14 @@ exports[`theme returns correct theme object 1`] = `
         "default": 12,
       },
       "shadows": {
-        "color": "#121214",
-        "elevation": 3,
+        "color": "#001f23",
+        "elevation": 10,
         "offset": {
-          "height": 2,
+          "height": 4,
           "width": 0,
         },
-        "opacity": 0.12,
-        "radius": 4,
+        "opacity": 0.28,
+        "radius": 8,
       },
       "sizes": {
         "badge": 24,
@@ -1086,14 +1086,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "marker": {
-          "elevation": 3,
-          "shadowColor": "#121214",
+          "elevation": 6,
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
         },
       },
       "sizes": {
@@ -1732,27 +1732,27 @@ exports[`theme returns correct theme object 1`] = `
     "xxxlarge": 24,
   },
   "shadows": {
-    "cardDrawer": {
-      "elevation": 6,
+    "deep": {
+      "elevation": 10,
       "shadowColor": "#001f23",
       "shadowOffset": {
-        "height": 2,
+        "height": 4,
         "width": 0,
       },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 2,
+      "shadowOpacity": 0.28,
+      "shadowRadius": 8,
     },
     "default": {
-      "elevation": 3,
-      "shadowColor": "#121214",
+      "elevation": 6,
+      "shadowColor": "#001f23",
       "shadowOffset": {
         "height": 2,
         "width": 0,
       },
       "shadowOpacity": 0.12,
-      "shadowRadius": 4,
+      "shadowRadius": 2,
     },
-    "tabBar": {
+    "medium": {
       "elevation": 10,
       "shadowColor": "#001f23",
       "shadowOffset": {

package/src/theme/components/alert.ts

@@ -39,7 +39,7 @@ const getAlertTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    wrapper: theme.shadows.cardDrawer,
+    wrapper: theme.shadows.default,
   };
 
   return { colors, radii, sizes, space, borderWidths, shadows };

package/src/theme/components/bottomNavigation.ts

@@ -16,7 +16,7 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    wrapper: theme.shadows.tabBar,
+    wrapper: theme.shadows.medium,
   };
 
   const space = {

package/src/theme/components/chip.ts

@@ -30,7 +30,7 @@ const getChipTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    filledWrapper: theme.shadows.cardDrawer,
+    filledWrapper: theme.shadows.default,
   };
 
   const fontSizes = {