@hero-design/rn 8.70.0 → 8.72.0

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -187,7 +187,12 @@ exports[`ToolbarItems renders correctly when intent is danger, icon is undefined
             "letterSpacing": 0.24,
             "lineHeight": 24,
           },
-          undefined,
+          [
+            {
+              "color": "#f46363",
+            },
+            undefined,
+          ],
         ]
       }
       themeIntent="danger"
@@ -279,7 +284,12 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
             "letterSpacing": 0.24,
             "lineHeight": 24,
           },
-          undefined,
+          [
+            {
+              "color": "#355bfb",
+            },
+            undefined,
+          ],
         ]
       }
       themeIntent="info"
@@ -729,7 +739,12 @@ exports[`ToolbarItems renders correctly when intent is success, icon is undefine
             "letterSpacing": 0.24,
             "lineHeight": 24,
           },
-          undefined,
+          [
+            {
+              "color": "#5ace7d",
+            },
+            undefined,
+          ],
         ]
       }
       themeIntent="success"
@@ -821,7 +836,12 @@ exports[`ToolbarItems renders correctly when intent is warning, icon is undefine
             "letterSpacing": 0.24,
             "lineHeight": 24,
           },
-          undefined,
+          [
+            {
+              "color": "#ffbe71",
+            },
+            undefined,
+          ],
         ]
       }
       themeIntent="warning"

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

@@ -116,8 +116,12 @@ exports[`theme returns correct theme object 1`] = `
       },
     },
     "badge": {
+      "borderWidths": {
+        "default": 2,
+      },
       "colors": {
         "archived": "#606065",
+        "border": "#ffffff",
         "danger": "#cb300a",
         "info": "#355bfb",
         "primary": "#401960",
@@ -126,6 +130,10 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
       },
       "fontSizes": {
+        "icon": {
+          "medium": 12,
+          "small": 8,
+        },
         "medium": 12,
         "small": 8,
       },
@@ -237,10 +245,10 @@ exports[`theme returns correct theme object 1`] = `
           "outlinedSecondary": "#ece8ef",
           "textDanger": "#fcebe7",
           "textPrimary": "#ece8ef",
-          "textSecondary": "#ece8ef",
+          "textSecondary": "#f6f6f7",
         },
         "primary": "#401960",
-        "secondary": "#795e90",
+        "secondary": "#4d6265",
         "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#ffffff",
       },
@@ -379,6 +387,8 @@ exports[`theme returns correct theme object 1`] = `
         "wrapper": 1,
       },
       "colors": {
+        "compactDefaultBackground": "#ffffff",
+        "compactSelectedBackground": "#f6f6f7",
         "filledBackground": "#ffffff",
         "outlinedDefaultBackground": "#ffffff",
         "outlinedDefaultBorder": "#bfc1c5",
@@ -407,6 +417,8 @@ exports[`theme returns correct theme object 1`] = `
         "outlinedSelectedBorder": 2,
       },
       "space": {
+        "compactWrapperHorizontalPadding": 8,
+        "compactWrapperVerticalPadding": 4,
         "iconWrapperHorizontalMargin": 8,
         "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
@@ -563,6 +575,8 @@ exports[`theme returns correct theme object 1`] = `
         "radius": 4,
       },
       "sizes": {
+        "fabPairHeight": 48,
+        "fabPairIconOnlyWidth": 48,
         "height": 64,
         "iconContainerHeight": 24,
         "iconContainerWidth": 24,
@@ -576,6 +590,7 @@ exports[`theme returns correct theme object 1`] = `
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
         "containerPadding": 20,
+        "fabPairMarginRight": 8,
         "titleMarginHorizontal": 8,
       },
     },
@@ -819,14 +834,29 @@ exports[`theme returns correct theme object 1`] = `
     "search": {
       "borderWidths": {
         "container": {
-          "focused": 2,
-          "normal": 1,
+          "basic": {
+            "focused": 2,
+            "normal": 2,
+          },
+          "reversed": {
+            "focused": 2,
+            "normal": 1,
+          },
         },
       },
       "colors": {
-        "borders": "#001f23",
-        "containerBackground": "#f6f6f7",
-        "surfixBackground": "#ffffff",
+        "basic": {
+          "border": "#f6f6f7",
+          "containerBackground": "#f6f6f7",
+          "focusedBorder": "#001f23",
+        },
+        "reversed": {
+          "border": "#e8e9ea",
+          "containerBackground": "#ffffff",
+          "focusedBorder": "#001f23",
+        },
+        "shadow": "#001f23",
+        "suffixBackground": "#ffffff",
         "text": "#001f23",
       },
       "fontSizes": {
@@ -839,6 +869,16 @@ exports[`theme returns correct theme object 1`] = `
         "container": 999,
         "surfix": 999,
       },
+      "shadows": {
+        "color": "#001f23",
+        "elevation": 3,
+        "offset": {
+          "height": 2,
+          "width": 0,
+        },
+        "opacity": 0.12,
+        "radius": 4,
+      },
       "sizes": {
         "surfixSize": 40,
       },
@@ -848,6 +888,7 @@ exports[`theme returns correct theme object 1`] = `
         "containerHorizontalPadding": 8,
         "containerVerticalPadding": 8,
         "inputHorizontalMargin": 8,
+        "inputVerticalPadding": 2,
         "prefixHorizontalPadding": 4,
         "surfixPadding": 8,
       },
@@ -976,7 +1017,7 @@ exports[`theme returns correct theme object 1`] = `
         "backgroundColors": {
           "checked": "#401960",
           "disabled-checked": "#ece8ef",
-          "disabled-unchecked": "#bfc1c5",
+          "disabled-unchecked": "#4d6265",
           "unchecked": "#808f91",
         },
         "selector": {
@@ -1212,7 +1253,7 @@ exports[`theme returns correct theme object 1`] = `
         "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
         "primary": "#401960",
-        "secondary": "#795e90",
+        "secondary": "#4d6265",
         "success": "#5ace7d",
       },
       "radii": {

package/src/theme/components/badge.ts

@@ -9,6 +9,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
+    border: theme.colors.defaultGlobalSurface,
   };
 
   const fonts = {
@@ -19,6 +20,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   const fontSizes = {
     medium: theme.fontSizes.small,
     small: 8,
+    icon: {
+      medium: theme.fontSizes.small,
+      small: 8,
+    },
   };
 
   const lineHeights = {
@@ -39,6 +44,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusWidth: theme.sizes.small,
   };
 
+  const borderWidths = {
+    default: theme.borderWidths.medium,
+  };
+
   const space = {
     medium: {
       horizontalPadding: theme.space.small,
@@ -50,7 +59,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusPositionRight: -theme.space.xxsmall,
   };
 
-  return { colors, fonts, fontSizes, sizes, space, lineHeights };
+  return { colors, fonts, fontSizes, sizes, space, lineHeights, borderWidths };
 };
 
 export type BadgeThemeType = ReturnType<typeof getBadgeTheme>;

package/src/theme/components/button.ts

@@ -35,7 +35,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const colors = {
     primary: theme.colors.primary,
-    secondary: theme.colors.secondary,
+    secondary: theme.colors.mutedOnDefaultGlobalSurface,
     danger: theme.colors.onErrorSurface,
     defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
@@ -52,7 +52,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
       outlinedSecondary: theme.colors.highlightedSurface,
       outlineDanger: theme.colors.errorSurface,
       textPrimary: theme.colors.highlightedSurface,
-      textSecondary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.neutralGlobalSurface,
       textDanger: theme.colors.errorSurface,
     },
   };

package/src/theme/components/chip.ts

@@ -9,11 +9,15 @@ const getChipTheme = (theme: GlobalTheme) => {
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
     outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
+    compactDefaultBackground: theme.colors.defaultGlobalSurface,
+    compactSelectedBackground: theme.colors.neutralGlobalSurface,
   };
 
   const space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
+    compactWrapperHorizontalPadding: theme.space.small,
+    compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
     outlinedSelectedMarginTop: -theme.space.xxsmall,
   };

package/src/theme/components/fab.ts

@@ -18,6 +18,8 @@ const getFABTheme = (theme: GlobalTheme) => {
     height: theme.sizes.xxxxxlarge,
     iconContainerWidth: theme.sizes.large,
     iconContainerHeight: theme.sizes.large,
+    fabPairHeight: theme.sizes.xxxlarge,
+    fabPairIconOnlyWidth: theme.sizes.xxxlarge,
   };
 
   const fonts = {
@@ -53,6 +55,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonMarginRight: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
+    fabPairMarginRight: theme.space.small,
   };
 
   const radii = {

package/src/theme/components/search.ts

@@ -2,16 +2,34 @@ import type { GlobalTheme } from '../global';
 
 const getSearchTheme = (theme: GlobalTheme) => {
   const colors = {
-    containerBackground: theme.colors.neutralGlobalSurface,
-    surfixBackground: theme.colors.defaultGlobalSurface,
+    basic: {
+      containerBackground: theme.colors.neutralGlobalSurface,
+      border: theme.colors.neutralGlobalSurface,
+      focusedBorder: theme.colors.primaryOutline,
+    },
+    reversed: {
+      containerBackground: theme.colors.defaultGlobalSurface,
+      border: theme.colors.secondaryOutline,
+      focusedBorder: theme.colors.primaryOutline,
+    },
+    suffixBackground: theme.colors.defaultGlobalSurface,
     text: theme.colors.onDefaultGlobalSurface,
-    borders: theme.colors.primaryOutline,
+    shadow: theme.colors.primaryOutline,
+  };
+
+  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,
   };
 
   const space = {
     containerHorizontalPadding: theme.space.small,
     containerVerticalPadding: theme.space.small,
     inputHorizontalMargin: theme.space.small,
+    inputVerticalPadding: theme.space.xxsmall,
     prefixHorizontalPadding: theme.space.xsmall,
     surfixPadding: theme.space.small,
     badgeTop: -theme.space.xxsmall,
@@ -28,8 +46,14 @@ const getSearchTheme = (theme: GlobalTheme) => {
 
   const borderWidths = {
     container: {
-      normal: theme.borderWidths.base,
-      focused: theme.borderWidths.medium,
+      basic: {
+        normal: theme.borderWidths.medium,
+        focused: theme.borderWidths.medium,
+      },
+      reversed: {
+        normal: theme.borderWidths.base,
+        focused: theme.borderWidths.medium,
+      },
     },
   };
 
@@ -50,6 +74,7 @@ const getSearchTheme = (theme: GlobalTheme) => {
     borderWidths,
     radii,
     sizes,
+    shadows,
   };
 };
 

package/src/theme/components/switch.ts

@@ -6,9 +6,9 @@ const getSwitchTheme = (theme: GlobalTheme) => {
       checked: theme.colors.primary,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
       'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.disabledOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface,
     },
-    thumb: theme.colors.onSecondary,
+    thumb: theme.colors.onDarkGlobalSurface,
     selector: {
       background: theme.colors.defaultGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface,

package/src/theme/components/toolbar.ts

@@ -6,7 +6,7 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     background: theme.colors.defaultGlobalSurface,
     border: theme.colors.secondaryOutline,
     primary: theme.colors.primary,
-    secondary: theme.colors.secondary,
+    secondary: theme.colors.mutedOnDefaultGlobalSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     danger: theme.colors.warning,