@hero-design/rn 8.91.3 → 8.91.5

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

@@ -38,6 +38,18 @@ exports[`theme returns correct theme object 1`] = `
       "radii": {
         "default": 16,
       },
+      "shadows": {
+        "wrapper": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
+        },
+      },
       "sizes": {
         "height": 48,
       },
@@ -183,18 +195,25 @@ exports[`theme returns correct theme object 1`] = `
       },
     },
     "bottomNavigation": {
+      "borderWidths": {
+        "borderTop": 1,
+      },
       "colors": {
         "background": "#ffffff",
+        "borderTop": "#e8e9ea",
         "shadow": "#401960",
       },
       "shadows": {
-        "elevation": 10,
-        "offset": {
-          "height": 3,
-          "width": 0,
+        "wrapper": {
+          "elevation": 10,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": -4,
+            "width": 0,
+          },
+          "shadowOpacity": 0.04,
+          "shadowRadius": 6,
         },
-        "opacity": 0.27,
-        "radius": 4.65,
       },
       "sizes": {
         "height": 72,
@@ -215,15 +234,6 @@ exports[`theme returns correct theme object 1`] = `
         "floating": 32,
         "floatingHeaderIcon": 999,
       },
-      "shadows": {
-        "elevation": 10,
-        "offset": {
-          "height": 3,
-          "width": 0,
-        },
-        "opacity": 0.4,
-        "radius": 16,
-      },
       "sizes": {
         "closeIcon": 48,
         "floatingCloseIcon": 12,
@@ -445,7 +455,7 @@ exports[`theme returns correct theme object 1`] = `
         "outlinedDefaultBorder": "#bfc1c5",
         "outlinedSelectedBackground": "#e8e9ea",
         "outlinedSelectedBorder": "#001f23",
-        "secondaryBackground": "#ece8ef",
+        "secondaryBackground": undefined,
         "wrapperSelectedBorder": "transparent",
       },
       "fontSizes": {
@@ -456,14 +466,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "filledWrapper": {
-          "elevation": 3,
-          "shadowColor": "#121214",
+          "elevation": 6,
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
         },
       },
       "space": {
@@ -590,7 +600,7 @@ exports[`theme returns correct theme object 1`] = `
         "actionItemBackground": "#000000",
         "actionItemPressedBackground": "#000000",
         "actionItemText": "#ffffff",
-        "backdropBackground": "#f6f6f7",
+        "backdropBackground": "#000000",
         "buttonActiveBackground": "#000000",
         "buttonBackground": "#000000",
         "buttonPressedBackground": "#000000",
@@ -614,14 +624,16 @@ exports[`theme returns correct theme object 1`] = `
         "actionItem": 999,
       },
       "shadows": {
-        "color": "#121214",
-        "elevation": 3,
-        "offset": {
-          "height": 2,
-          "width": 0,
+        "default": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
-        "opacity": 0.12,
-        "radius": 4,
       },
       "sizes": {
         "fabPairHeight": 48,
@@ -655,14 +667,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "wrapper": {
-          "elevation": 3,
-          "shadowColor": "#121214",
+          "elevation": 6,
+          "shadowColor": "#001f23",
           "shadowOffset": {
             "height": 2,
             "width": 0,
           },
           "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+          "shadowRadius": 2,
         },
       },
       "space": {
@@ -724,14 +736,14 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "card": {
-          "color": "#121214",
-          "elevation": 3,
-          "offset": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
             "height": 2,
             "width": 0,
           },
-          "opacity": 0.12,
-          "radius": 4,
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
       },
       "space": {
@@ -752,16 +764,19 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "background": "#ffffff",
         "badge": "#795e90",
+        "badgeIcon": "#ffffff",
         "border": {
           "applied": "#795e90",
           "idle": "#ffffff",
           "selected": "#795e90",
         },
+        "icon": "#000000",
       },
       "fontSizes": {
         "icon": 42,
       },
       "radii": {
+        "badge": 999,
         "default": 12,
       },
       "shadows": {
@@ -775,6 +790,7 @@ exports[`theme returns correct theme object 1`] = `
         "radius": 4,
       },
       "sizes": {
+        "badge": 24,
         "default": 42,
       },
       "space": {
@@ -988,14 +1004,16 @@ exports[`theme returns correct theme object 1`] = `
         "surfix": 999,
       },
       "shadows": {
-        "color": "#121214",
-        "elevation": 3,
-        "offset": {
-          "height": 2,
-          "width": 0,
+        "container": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
-        "opacity": 0.12,
-        "radius": 4,
       },
       "sizes": {
         "surfixSize": 40,
@@ -1166,7 +1184,7 @@ exports[`theme returns correct theme object 1`] = `
           "background": "#f6f6f7",
           "textBackground": "#ccd2d3",
         },
-        "thumb": undefined,
+        "thumb": "#ffffff",
       },
       "radii": {
         "rounded": 999,
@@ -1373,14 +1391,16 @@ exports[`theme returns correct theme object 1`] = `
         "default": 16,
       },
       "shadows": {
-        "color": "#121214",
-        "elevation": 3,
-        "offset": {
-          "height": 2,
-          "width": 0,
+        "wrapper": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
-        "opacity": 0.12,
-        "radius": 4,
       },
       "sizes": {
         "height": 48,
@@ -1620,6 +1640,7 @@ exports[`theme returns correct theme object 1`] = `
   "colors": {
     "archived": "#abacaf",
     "archivedSurface": "#dadbde",
+    "black": "#000000",
     "darkGlobalSurface": "#001f23",
     "decorativePrimary": "#ffffff",
     "decorativePrimarySurface": "#ccd2d3",
@@ -1660,6 +1681,7 @@ exports[`theme returns correct theme object 1`] = `
     "successSurface": "#f0fef4",
     "warning": "#ffbe71",
     "warningSurface": "#fff6eb",
+    "white": "#ffffff",
   },
   "fontSizes": {
     "6xlarge": 36,

package/src/theme/components/alert.ts

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

package/src/theme/components/avatar.ts

@@ -7,7 +7,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    text: theme.colors.onDarkGlobalSurface,
+    text: theme.colors.white,
   };
 
   const sizes = {

package/src/theme/components/bottomNavigation.ts

@@ -4,6 +4,11 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.primary,
     background: theme.colors.defaultGlobalSurface,
+    borderTop: theme.colors.secondaryOutline,
+  };
+
+  const borderWidths = {
+    borderTop: theme.borderWidths.base,
   };
 
   const sizes = {
@@ -11,17 +16,14 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: { width: 0, height: 3 },
-    opacity: 0.27,
-    radius: 4.65,
-    elevation: 10,
+    wrapper: theme.shadows.tabBar,
   };
 
   const space = {
     titleMarginTop: theme.space.xsmall,
   };
 
-  return { colors, shadows, sizes, space };
+  return { colors, borderWidths, shadows, sizes, space };
 };
 
 export default getBottomNavigationTheme;

package/src/theme/components/bottomSheet.ts

@@ -4,7 +4,7 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.overlayGlobalSurface,
+    backdrop: theme.colors.black,
     floatingHeaderIconBackground: theme.colors.archivedSurface,
   };
 
@@ -24,20 +24,13 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     floatingHeaderIconPadding: theme.space.small,
   };
 
-  const shadows = {
-    offset: { width: 0, height: 3 },
-    opacity: 0.4,
-    radius: theme.radii.xlarge,
-    elevation: 10,
-  };
-
   const radii = {
     default: theme.radii.xlarge,
     floating: theme.radii['5xlarge'],
     floatingHeaderIcon: theme.radii.rounded,
   };
 
-  return { colors, shadows, radii, sizes, space };
+  return { colors, radii, sizes, space };
 };
 
 export default getBottomSheetTheme;

package/src/theme/components/chip.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getChipTheme = (theme: GlobalTheme) => {
   const colors = {
-    secondaryBackground: theme.colors.highlightedSurface,
+    secondaryBackground: theme.colors.decorativeSecondarySurface,
     filledBackground: theme.colors.defaultGlobalSurface,
     wrapperSelectedBorder: 'transparent',
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
@@ -30,7 +30,7 @@ const getChipTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    filledWrapper: theme.shadows.default,
+    filledWrapper: theme.shadows.cardDrawer,
   };
 
   const fontSizes = {

package/src/theme/components/fab.ts

@@ -5,12 +5,12 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonBackground: theme.colors.overlayGlobalSurface,
     buttonPressedBackground: theme.colors.overlayGlobalSurface,
     buttonActiveBackground: theme.colors.overlayGlobalSurface,
-    icon: theme.colors.onPrimary,
+    icon: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
-    titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary,
+    backdropBackground: theme.colors.black,
+    titleText: theme.colors.onDarkGlobalSurface,
+    actionItemText: theme.colors.onDarkGlobalSurface,
   };
 
   const sizes = {
@@ -39,11 +39,7 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const 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,
+    default: theme.shadows.cardDrawer,
   };
 
   const space = {

package/src/theme/components/floatingIsland.ts

@@ -10,7 +10,7 @@ const getFloatingIslandTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    wrapper: theme.shadows.default,
+    wrapper: theme.shadows.cardDrawer,
   };
 
   const space = {

package/src/theme/components/list.ts

@@ -28,13 +28,7 @@ const getListTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    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,
-    },
+    card: theme.shadows.cardDrawer,
   };
 
   const widths = {

package/src/theme/components/mapPin.ts

@@ -3,6 +3,7 @@ import type { GlobalTheme } from '../global';
 const getMapPinTheme = (theme: GlobalTheme) => {
   const sizes = {
     default: 42,
+    badge: theme.sizes.large,
   };
 
   const fontSizes = {
@@ -15,16 +16,19 @@ const getMapPinTheme = (theme: GlobalTheme) => {
 
   const colors = {
     border: {
-      idle: theme.colors.defaultGlobalSurface,
+      idle: theme.colors.white,
       selected: theme.colors.secondary,
       applied: theme.colors.secondary,
     },
+    icon: theme.colors.black,
     badge: theme.colors.secondary,
-    background: theme.colors.defaultGlobalSurface,
+    badgeIcon: theme.colors.onSecondary,
+    background: theme.colors.white,
   };
 
   const radii = {
     default: theme.radii.large,
+    badge: theme.radii.rounded,
   };
 
   const space = {

package/src/theme/components/search.ts

@@ -18,11 +18,7 @@ const getSearchTheme = (theme: GlobalTheme) => {
   };
 
   const 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,
+    container: theme.shadows.cardDrawer,
   };
 
   const space = {

package/src/theme/components/toast.ts

@@ -43,11 +43,7 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const 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,
+    wrapper: theme.shadows.cardDrawer,
   };
 
   return { colors, radii, sizes, space, borderWidths, shadows };

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

@@ -4,6 +4,7 @@ exports[`eBens returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#c38cee",
   "decorativePrimarySurface": "#f3e8fc",
@@ -44,5 +45,6 @@ exports[`eBens returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`global returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "defaultGlobalSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
@@ -35,5 +36,6 @@ exports[`global returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`jobs returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffad79",
   "decorativePrimarySurface": "#ffefe4",
@@ -44,5 +45,6 @@ exports[`jobs returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`swag returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffffff",
   "decorativePrimarySurface": "#ccd2d3",
@@ -44,5 +45,6 @@ exports[`swag returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`swagDark returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#fdfbff",
   "decorativePrimarySurface": "#dacce4",
@@ -47,5 +48,6 @@ exports[`swagDark returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`swagLightGlobal returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "defaultGlobalSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
@@ -35,5 +36,6 @@ exports[`swagLightGlobal returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`swagLightJobs returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#fdfbff",
   "decorativePrimarySurface": "#dacce4",
@@ -48,5 +49,6 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`wallet returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#8999ff",
   "decorativePrimarySurface": "#e7ebff",
@@ -44,5 +45,6 @@ exports[`wallet returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`work returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffd500",
   "decorativePrimarySurface": "#fff7cc",
@@ -44,5 +45,6 @@ exports[`work returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -15,6 +15,9 @@ const eBensBrandSystemPallete: BrandSystemPalette = {
   decorativePrimarySurface: palette.mauveLight80,
 };
 
+/**
+ * @deprecated This palette is deprecated and will be removed in the next major release.
+ */
 const eBensSystemPalette: SystemPalette = {
   ...swag,
   ...eBensBrandSystemPallete,

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

@@ -46,6 +46,9 @@ const globalPalette: GlobalSystemPalette = {
   archivedSurface: palette.cumberlandFog,
   onArchivedSurface: palette.windsorGrey,
   // End of Updated 21 / Nov / 22
+
+  black: '#000000',
+  white: '#ffffff',
 };
 
 export default globalPalette;

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

@@ -15,6 +15,9 @@ const jobsBrandSystemPallete: BrandSystemPalette = {
   decorativePrimarySurface: palette.hitPinkLight80,
 };
 
+/**
+ * @deprecated This palette is deprecated and will be removed in the next major release.
+ */
 const jobsSystemPalette: SystemPalette = {
   ...swag,
   ...jobsBrandSystemPallete,

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

@@ -15,6 +15,9 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   decorativePrimarySurface: palette.maasstrichtBlueLight80,
 };
 
+/**
+ * @deprecated This palette is deprecated and will be removed in the next major release.
+ */
 const swagSystemPalette: SystemPalette = {
   // Global
   ...globalPalette,