@hero-design/rn 8.68.0-alpha.1 → 8.69.0

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

@@ -19,12 +19,21 @@ exports[`theme returns correct theme object 1`] = `
         "base": 1,
       },
       "colors": {
+        "backgrounds": {
+          "error": "#fcebe7",
+          "info": "#ecf0ff",
+          "notification": "#ffffff",
+          "success": "#f0fef4",
+          "warning": "#fff6eb",
+        },
         "divider": "#e8e9ea",
-        "error": "#f46363",
-        "info": "#b5c3fd",
-        "notification": "#ffffff",
-        "success": "#5ace7d",
-        "warning": "#ffbe71",
+        "texts": {
+          "error": "#cb300a",
+          "info": "#355bfb",
+          "notification": "#001f23",
+          "success": "#017d6d",
+          "warning": "#ac5d00",
+        },
       },
       "radii": {
         "default": 16,
@@ -41,7 +50,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "attachment": {
       "colors": {
-        "highlightedBackground": "#F1E9FB",
+        "highlightedBackground": "#ece8ef",
       },
       "radii": {
         "container": 8,
@@ -62,7 +71,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "info": "#b5c3fd",
-        "primary": "#7622d7",
+        "primary": "#401960",
         "success": "#5ace7d",
         "text": "#ffffff",
         "warning": "#ffbe71",
@@ -111,28 +120,42 @@ exports[`theme returns correct theme object 1`] = `
         "archived": "#606065",
         "danger": "#cb300a",
         "info": "#355bfb",
-        "primary": "#7622d7",
+        "primary": "#401960",
         "success": "#017d6d",
         "text": "#ffffff",
         "warning": "#ac5d00",
       },
       "fontSizes": {
-        "default": 12,
+        "medium": 12,
+        "small": 8,
       },
       "fonts": {
-        "default": "BeVietnamPro-SemiBold",
+        "medium": "BeVietnamPro-Regular",
+        "small": "BeVietnamPro-SemiBold",
       },
       "lineHeights": {
-        "default": 16,
+        "medium": 16,
+        "small": 10,
       },
       "sizes": {
-        "height": 20,
-        "minWidth": 20,
+        "medium": {
+          "height": 24,
+          "minWidth": 24,
+        },
+        "small": {
+          "height": 16,
+          "minWidth": 16,
+        },
         "statusHeight": 8,
         "statusWidth": 8,
       },
       "space": {
-        "horizontalPadding": 8,
+        "medium": {
+          "horizontalPadding": 8,
+        },
+        "small": {
+          "horizontalPadding": 4,
+        },
         "statusPositionRight": -2,
         "statusPositionTop": -2,
       },
@@ -140,7 +163,7 @@ exports[`theme returns correct theme object 1`] = `
     "bottomNavigation": {
       "colors": {
         "background": "#ffffff",
-        "shadow": "#7622d7",
+        "shadow": "#401960",
       },
       "shadows": {
         "elevation": 10,
@@ -162,10 +185,13 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "backdrop": "#000000",
         "background": "#ffffff",
+        "floatingHeaderIconBackground": "#dadbde",
         "shadow": "#001f23",
       },
       "radii": {
         "default": 16,
+        "floating": 32,
+        "floatingHeaderIcon": 999,
       },
       "shadows": {
         "elevation": 10,
@@ -178,9 +204,13 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "closeIcon": 48,
+        "floatingCloseIcon": 12,
       },
       "space": {
         "closeIconMargin": 12,
+        "floatingContentMargin": 16,
+        "floatingHeaderIconPadding": 8,
+        "floatingInnerPadding": 8,
         "footerHorizontalPadding": 12,
         "footerVerticalPadding": 2,
         "headerWrapperHorizontalPadding": 16,
@@ -200,18 +230,18 @@ exports[`theme returns correct theme object 1`] = `
         "invertedText": "#ffffff",
         "pressedBackground": {
           "filledDanger": "#fcebe7",
-          "filledPrimary": "#380060",
-          "filledSecondary": "#380060",
+          "filledPrimary": "#33144d",
+          "filledSecondary": "#33144d",
           "outlineDanger": "#fcebe7",
-          "outlinedPrimary": "#F1E9FB",
-          "outlinedSecondary": "#F1E9FB",
+          "outlinedPrimary": "#ece8ef",
+          "outlinedSecondary": "#ece8ef",
           "textDanger": "#fcebe7",
-          "textPrimary": "#F1E9FB",
-          "textSecondary": "#F1E9FB",
+          "textPrimary": "#ece8ef",
+          "textSecondary": "#ece8ef",
         },
-        "primary": "#7622d7",
-        "secondary": "#460078",
-        "textLoadingBackground": "#F1E9FB",
+        "primary": "#401960",
+        "secondary": "#795e90",
+        "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#ffffff",
       },
       "fontSize": {
@@ -246,7 +276,7 @@ exports[`theme returns correct theme object 1`] = `
         "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
+        "primary": "#401960",
       },
       "radii": {
         "default": 999,
@@ -271,10 +301,10 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#abacaf",
         "danger": "#f46363",
-        "dataCardIndicator": "#7622d7",
+        "dataCardIndicator": "#401960",
         "info": "#b5c3fd",
         "neutral": "#f6f6f7",
-        "primary": "#7622d7",
+        "primary": "#401960",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -287,7 +317,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "cardCarousel": {
       "colors": {
-        "carouselItemBackground": "#FDFBFF",
+        "carouselItemBackground": "#f6f6f7",
       },
       "radii": {
         "card": 8,
@@ -351,7 +381,7 @@ exports[`theme returns correct theme object 1`] = `
         "filledBackground": "#ffffff",
         "outlinedBackground": "transparent",
         "primaryBackground": "#001f23",
-        "secondaryBackground": "#F1E9FB",
+        "secondaryBackground": "#ece8ef",
         "selectedPrimaryText": "#ffffff",
         "wrapperBorder": "#001f23",
         "wrapperSelectedBorder": "transparent",
@@ -460,7 +490,7 @@ exports[`theme returns correct theme object 1`] = `
     "error": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#B382FD",
+        "fullScreenBackground": "#ccd2d3",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -493,15 +523,15 @@ exports[`theme returns correct theme object 1`] = `
     },
     "fab": {
       "colors": {
-        "actionItemBackground": "#460078",
-        "actionItemPressedBackground": "#380060",
-        "actionItemText": "#FDFBFF",
+        "actionItemBackground": "#795e90",
+        "actionItemPressedBackground": "#33144d",
+        "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
-        "buttonActiveBackground": "#380060",
-        "buttonBackground": "#7622d7",
-        "buttonPressedBackground": "#380060",
-        "icon": "#FDFBFF",
-        "titleText": "#FDFBFF",
+        "buttonActiveBackground": "#33144d",
+        "buttonBackground": "#401960",
+        "buttonPressedBackground": "#33144d",
+        "icon": "#ffffff",
+        "titleText": "#ffffff",
       },
       "fontSizes": {
         "actionItemText": 16,
@@ -552,8 +582,8 @@ exports[`theme returns correct theme object 1`] = `
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
-        "primary": "#7622d7",
-        "secondary": "#460078",
+        "primary": "#401960",
+        "secondary": "#795e90",
         "success": "#5ace7d",
         "text": "#001f23",
         "warning": "#ffbe71",
@@ -574,7 +604,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "list": {
       "colors": {
-        "checkedListItemContainerBackground": "#F1E9FB",
+        "checkedListItemContainerBackground": "#ece8ef",
         "leadingStatus": {
           "archived": "#abacaf",
           "danger": "#f46363",
@@ -618,7 +648,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "pageControl": {
       "colors": {
-        "paginatorBackgroundColor": "#7622d7",
+        "paginatorBackgroundColor": "#401960",
       },
       "radii": {
         "paginatorBorderRadius": 999,
@@ -681,7 +711,7 @@ exports[`theme returns correct theme object 1`] = `
           "dangerInverted": "#ffffff",
           "info": "#b5c3fd",
           "infoInverted": "#ffffff",
-          "primary": "#7622d7",
+          "primary": "#401960",
           "primaryInverted": "#ffffff",
           "success": "#5ace7d",
           "successInverted": "#ffffff",
@@ -696,12 +726,17 @@ exports[`theme returns correct theme object 1`] = `
           "info": "#e8e9ea",
           "infoInverted": "#c4cffd",
           "primary": "#e8e9ea",
-          "primaryInverted": "#914edf",
+          "primaryInverted": "#664780",
           "success": "#e8e9ea",
           "successInverted": "#7bd897",
           "warning": "#e8e9ea",
           "warningInverted": "#ffcb8d",
         },
+        "step": {
+          "complete": "#401960",
+          "current": "#DACCE4",
+          "incomplete": "#dadbde",
+        },
       },
       "radii": {
         "default": 999,
@@ -710,6 +745,10 @@ exports[`theme returns correct theme object 1`] = `
         "barHeight": 8,
         "circleCompletenessHeight": 8,
         "circleDiameter": 72,
+        "stepHeight": 8,
+      },
+      "space": {
+        "stepGap": 4,
       },
     },
     "radio": {
@@ -717,8 +756,8 @@ exports[`theme returns correct theme object 1`] = `
         "circle": 2,
       },
       "colors": {
-        "checked": "#F1E9FB",
-        "circle": "#7622d7",
+        "checked": "#ece8ef",
+        "circle": "#401960",
         "intents": {
           "dark": "#f6f6f7",
           "light": "#ffffff",
@@ -736,7 +775,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "rate": {
       "colors": {
-        "iconStroke": "#7622d7",
+        "iconStroke": "#401960",
       },
       "spaces": {
         "iconWrapperMarginRight": 4,
@@ -745,7 +784,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "refreshControl": {
       "colors": {
-        "indicator": "#7622d7",
+        "indicator": "#401960",
       },
     },
     "richTextEditor": {
@@ -753,7 +792,7 @@ exports[`theme returns correct theme object 1`] = `
         "text": "#001f23",
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
-        "toolbarButtonSelectedBackground": "#F1E9FB",
+        "toolbarButtonSelectedBackground": "#ece8ef",
       },
       "fontSizes": {
         "editor": 14,
@@ -774,10 +813,46 @@ exports[`theme returns correct theme object 1`] = `
         "wrapperMarginBottom": 16,
       },
     },
+    "search": {
+      "borderWidths": {
+        "container": {
+          "focused": 2,
+          "normal": 1,
+        },
+      },
+      "colors": {
+        "borders": "#001f23",
+        "containerBackground": "#f6f6f7",
+        "surfixBackground": "#ffffff",
+        "text": "#001f23",
+      },
+      "fontSizes": {
+        "text": 16,
+      },
+      "fonts": {
+        "text": "BeVietnamPro-Regular",
+      },
+      "radii": {
+        "container": 999,
+        "surfix": 999,
+      },
+      "sizes": {
+        "surfixSize": 40,
+      },
+      "space": {
+        "badgeRight": -2,
+        "badgeTop": -2,
+        "containerHorizontalPadding": 8,
+        "containerVerticalPadding": 8,
+        "inputHorizontalMargin": 8,
+        "prefixHorizontalPadding": 4,
+        "surfixPadding": 8,
+      },
+    },
     "sectionHeading": {
       "colors": {
         "background": "#f6f6f7",
-        "backgroundSmall": "#B382FD",
+        "backgroundSmall": "#ccd2d3",
       },
       "space": {
         "headingHorizontalPadding": 16,
@@ -819,16 +894,16 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
-        "maximumTrackTint": "#F1E9FB",
-        "minimumTrackTint": "#7622d7",
-        "thumbTint": "#7622d7",
+        "maximumTrackTint": "#ece8ef",
+        "minimumTrackTint": "#401960",
+        "thumbTint": "#401960",
       },
     },
     "spinner": {
       "colors": {
         "dot": {
-          "inverted": "#FDFBFF",
-          "primary": "#7622d7",
+          "inverted": "#ffffff",
+          "primary": "#401960",
         },
       },
       "radii": {
@@ -852,7 +927,7 @@ exports[`theme returns correct theme object 1`] = `
     "success": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#B382FD",
+        "fullScreenBackground": "#ccd2d3",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -883,7 +958,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "defaultContainerBackground": "#ffffff",
-        "primary": "#7622d7",
+        "primary": "#401960",
         "success": "#5ace7d",
       },
       "radii": {
@@ -896,14 +971,14 @@ exports[`theme returns correct theme object 1`] = `
     "switch": {
       "colors": {
         "backgroundColors": {
-          "checked": "#7622d7",
-          "disabled-checked": "#F1E9FB",
+          "checked": "#401960",
+          "disabled-checked": "#ece8ef",
           "disabled-unchecked": "#bfc1c5",
           "unchecked": "#808f91",
         },
         "selector": {
           "background": "#ffffff",
-          "textBackground": "#B382FD",
+          "textBackground": "#ccd2d3",
         },
         "thumb": "#ffffff",
       },
@@ -935,10 +1010,10 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "active": "#001f23",
-        "activeBackground": "#B382FD",
+        "activeBackground": "#ccd2d3",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
-        "indicator": "#7622d7",
+        "indicator": "#401960",
         "text": "#001f23",
       },
       "radii": {
@@ -968,8 +1043,8 @@ exports[`theme returns correct theme object 1`] = `
         "dangerBackground": "#fcebe7",
         "info": "#355bfb",
         "infoBackground": "#ecf0ff",
-        "primary": "#7622d7",
-        "primaryBackground": "#F1E9FB",
+        "primary": "#401960",
+        "primaryBackground": "#ece8ef",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "text": "#001f23",
@@ -1131,10 +1206,10 @@ exports[`theme returns correct theme object 1`] = `
         "danger": "#ffbe71",
         "disabled": "#bfc1c5",
         "error": "#f46363",
-        "iconButtonBackground": "#F1E9FB",
+        "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
-        "primary": "#7622d7",
-        "secondary": "#460078",
+        "primary": "#401960",
+        "secondary": "#795e90",
         "success": "#5ace7d",
       },
       "radii": {
@@ -1158,8 +1233,8 @@ exports[`theme returns correct theme object 1`] = `
         "disabled": "#bfc1c5",
         "info": "#355bfb",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
-        "secondary": "#460078",
+        "primary": "#401960",
+        "secondary": "#795e90",
         "subdued": "#4d6265",
         "success": "#5ace7d",
         "warning": "#ffbe71",
@@ -1332,15 +1407,15 @@ exports[`theme returns correct theme object 1`] = `
     "archived": "#abacaf",
     "archivedSurface": "#dadbde",
     "darkGlobalSurface": "#001f23",
-    "decorativePrimary": "#FDFBFF",
-    "decorativePrimarySurface": "#B382FD",
+    "decorativePrimary": "#ffffff",
+    "decorativePrimarySurface": "#ccd2d3",
     "defaultGlobalSurface": "#ffffff",
-    "defaultSurface": "#FDFBFF",
+    "defaultSurface": "#f6f6f7",
     "disabledOnDefaultGlobalSurface": "#bfc1c5",
     "disabledOutline": "#bfc1c5",
     "error": "#f46363",
     "errorSurface": "#fcebe7",
-    "highlightedSurface": "#F1E9FB",
+    "highlightedSurface": "#ece8ef",
     "inactiveOnDefaultGlobalSurface": "#808f91",
     "inactiveOutline": "#808f91",
     "info": "#b5c3fd",
@@ -1357,15 +1432,15 @@ exports[`theme returns correct theme object 1`] = `
     "onDefaultGlobalSurface": "#001f23",
     "onErrorSurface": "#cb300a",
     "onInfoSurface": "#355bfb",
-    "onPrimary": "#FDFBFF",
+    "onPrimary": "#ffffff",
     "onSecondary": "#ffffff",
     "onSuccessSurface": "#017d6d",
     "onWarningSurface": "#ac5d00",
     "overlayGlobalSurface": "#000000",
-    "pressedSurface": "#380060",
-    "primary": "#7622d7",
+    "pressedSurface": "#33144d",
+    "primary": "#401960",
     "primaryOutline": "#001f23",
-    "secondary": "#460078",
+    "secondary": "#795e90",
     "secondaryOutline": "#e8e9ea",
     "success": "#5ace7d",
     "successSurface": "#f0fef4",

package/src/theme/components/alert.ts

@@ -2,11 +2,20 @@ import type { GlobalTheme } from '../global';
 
 const getAlertTheme = (theme: GlobalTheme) => {
   const colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+    },
     divider: theme.colors.secondaryOutline,
   };
 

package/src/theme/components/badge.ts

@@ -12,26 +12,40 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    default: theme.fonts.neutral.semiBold,
+    medium: theme.fonts.neutral.regular,
+    small: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {
-    default: theme.fontSizes.small,
+    medium: theme.fontSizes.small,
+    small: 8,
   };
 
   const lineHeights = {
-    default: theme.lineHeights.small,
+    medium: theme.lineHeights.small,
+    small: 10,
   };
 
   const sizes = {
-    height: theme.fontSizes.small + theme.sizes.small,
-    minWidth: theme.fontSizes.small + theme.sizes.small,
+    medium: {
+      height: theme.sizes.large,
+      minWidth: theme.sizes.large,
+    },
+    small: {
+      height: theme.sizes.medium,
+      minWidth: theme.sizes.medium,
+    },
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
   };
 
   const space = {
-    horizontalPadding: theme.space.small,
+    medium: {
+      horizontalPadding: theme.space.small,
+    },
+    small: {
+      horizontalPadding: theme.space.xsmall,
+    },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall,
   };
@@ -39,19 +53,5 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   return { colors, fonts, fontSizes, sizes, space, lineHeights };
 };
 
-type GetBadgeThemeReturnType = ReturnType<typeof getBadgeTheme>;
-export interface BadgeThemeType extends GetBadgeThemeReturnType {
-  /**
-   * @deprecated will be removed in v9
-   * */
-  fonts: GetBadgeThemeReturnType['fonts'];
-  /**
-   * @deprecated will be removed in v9
-   * */
-  fontSizes: GetBadgeThemeReturnType['fontSizes'];
-  /**
-   * @deprecated will be removed in v9
-   * */
-  lineHeights: GetBadgeThemeReturnType['lineHeights'];
-}
+export type BadgeThemeType = ReturnType<typeof getBadgeTheme>;
 export default getBadgeTheme;

package/src/theme/components/bottomSheet.ts

@@ -5,10 +5,12 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
     backdrop: theme.colors.overlayGlobalSurface,
+    floatingHeaderIconBackground: theme.colors.archivedSurface,
   };
 
   const sizes = {
     closeIcon: theme.sizes.xxxlarge,
+    floatingCloseIcon: theme.sizes.smallMedium,
   };
 
   const space = {
@@ -17,6 +19,9 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     closeIconMargin: theme.space.smallMedium,
     footerVerticalPadding: theme.space.xxsmall,
     footerHorizontalPadding: theme.space.smallMedium,
+    floatingContentMargin: theme.space.medium,
+    floatingInnerPadding: theme.space.small,
+    floatingHeaderIconPadding: theme.space.small,
   };
 
   const shadows = {
@@ -28,6 +33,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
 
   const radii = {
     default: theme.radii.xlarge,
+    floating: theme.radii['5xlarge'],
+    floatingHeaderIcon: theme.radii.rounded,
   };
 
   return { colors, shadows, radii, sizes, space };

package/src/theme/components/progress.ts

@@ -37,19 +37,29 @@ const getProgressTheme = (theme: GlobalTheme) => {
       infoInverted: theme.colors.mutedInfo,
       archivedInverted: theme.colors.mutedArchived,
     },
+    step: {
+      complete: theme.colors.primary,
+      incomplete: theme.colors.archivedSurface,
+      current: '#DACCE4',
+    },
   };
 
   const sizes = {
     circleDiameter: theme.sizes['6xlarge'],
     circleCompletenessHeight: theme.sizes.small,
     barHeight: theme.sizes.small,
+    stepHeight: theme.sizes.small,
   };
 
   const radii = {
     default: theme.radii.rounded,
   };
 
-  return { colors, sizes, radii };
+  const space = {
+    stepGap: theme.space.xsmall,
+  };
+
+  return { colors, sizes, radii, space };
 };
 
 export default getProgressTheme;