@hero-design/rn 8.68.0-alpha.1 → 8.68.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,
@@ -200,18 +223,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 +269,7 @@ exports[`theme returns correct theme object 1`] = `
         "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
+        "primary": "#401960",
       },
       "radii": {
         "default": 999,
@@ -271,10 +294,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 +310,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "cardCarousel": {
       "colors": {
-        "carouselItemBackground": "#FDFBFF",
+        "carouselItemBackground": "#f6f6f7",
       },
       "radii": {
         "card": 8,
@@ -351,7 +374,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 +483,7 @@ exports[`theme returns correct theme object 1`] = `
     "error": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#B382FD",
+        "fullScreenBackground": "#ccd2d3",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -493,15 +516,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 +575,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 +597,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "list": {
       "colors": {
-        "checkedListItemContainerBackground": "#F1E9FB",
+        "checkedListItemContainerBackground": "#ece8ef",
         "leadingStatus": {
           "archived": "#abacaf",
           "danger": "#f46363",
@@ -618,7 +641,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "pageControl": {
       "colors": {
-        "paginatorBackgroundColor": "#7622d7",
+        "paginatorBackgroundColor": "#401960",
       },
       "radii": {
         "paginatorBorderRadius": 999,
@@ -681,7 +704,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,7 +719,7 @@ exports[`theme returns correct theme object 1`] = `
           "info": "#e8e9ea",
           "infoInverted": "#c4cffd",
           "primary": "#e8e9ea",
-          "primaryInverted": "#914edf",
+          "primaryInverted": "#664780",
           "success": "#e8e9ea",
           "successInverted": "#7bd897",
           "warning": "#e8e9ea",
@@ -717,8 +740,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 +759,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "rate": {
       "colors": {
-        "iconStroke": "#7622d7",
+        "iconStroke": "#401960",
       },
       "spaces": {
         "iconWrapperMarginRight": 4,
@@ -745,7 +768,7 @@ exports[`theme returns correct theme object 1`] = `
     },
     "refreshControl": {
       "colors": {
-        "indicator": "#7622d7",
+        "indicator": "#401960",
       },
     },
     "richTextEditor": {
@@ -753,7 +776,7 @@ exports[`theme returns correct theme object 1`] = `
         "text": "#001f23",
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
-        "toolbarButtonSelectedBackground": "#F1E9FB",
+        "toolbarButtonSelectedBackground": "#ece8ef",
       },
       "fontSizes": {
         "editor": 14,
@@ -774,10 +797,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 +878,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 +911,7 @@ exports[`theme returns correct theme object 1`] = `
     "success": {
       "colors": {
         "description": "#4d6265",
-        "fullScreenBackground": "#B382FD",
+        "fullScreenBackground": "#ccd2d3",
         "inPageBackground": "#f6f6f7",
         "title": "#001f23",
       },
@@ -883,7 +942,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "danger": "#f46363",
         "defaultContainerBackground": "#ffffff",
-        "primary": "#7622d7",
+        "primary": "#401960",
         "success": "#5ace7d",
       },
       "radii": {
@@ -896,14 +955,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 +994,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 +1027,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 +1190,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 +1217,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 +1391,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 +1416,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/search.ts

@@ -0,0 +1,56 @@
+import type { GlobalTheme } from '../global';
+
+const getSearchTheme = (theme: GlobalTheme) => {
+  const colors = {
+    containerBackground: theme.colors.neutralGlobalSurface,
+    surfixBackground: theme.colors.defaultGlobalSurface,
+    text: theme.colors.onDefaultGlobalSurface,
+    borders: theme.colors.primaryOutline,
+  };
+
+  const space = {
+    containerHorizontalPadding: theme.space.small,
+    containerVerticalPadding: theme.space.small,
+    inputHorizontalMargin: theme.space.small,
+    prefixHorizontalPadding: theme.space.xsmall,
+    surfixPadding: theme.space.small,
+    badgeTop: -theme.space.xxsmall,
+    badgeRight: -theme.space.xxsmall,
+  };
+
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const borderWidths = {
+    container: {
+      normal: theme.borderWidths.base,
+      focused: theme.borderWidths.medium,
+    },
+  };
+
+  const radii = {
+    container: theme.radii.rounded,
+    surfix: theme.radii.rounded,
+  };
+
+  const sizes = {
+    surfixSize: theme.sizes.xxlarge,
+  };
+
+  return {
+    colors,
+    space,
+    fonts,
+    fontSizes,
+    borderWidths,
+    radii,
+    sizes,
+  };
+};
+
+export default getSearchTheme;

package/src/theme/getTheme.ts

@@ -1,4 +1,4 @@
-import { getGlobalTheme, defaultScale, swagLightSystemPalette } from './global';
+import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
@@ -48,6 +48,7 @@ import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
 
 import type { GlobalTheme, Scale, SystemPalette } from './global';
+import getSearchTheme from './components/search';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -82,6 +83,7 @@ type Theme = GlobalTheme & {
     rate: ReturnType<typeof getRateTheme>;
     refreshControl: ReturnType<typeof getRefreshControlTheme>;
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
+    search: ReturnType<typeof getSearchTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
     skeleton: ReturnType<typeof getSkeletonTheme>;
@@ -102,7 +104,7 @@ type Theme = GlobalTheme & {
 
 const getTheme = (
   scale: Scale = defaultScale,
-  systemPallete: SystemPalette = swagLightSystemPalette
+  systemPallete: SystemPalette = swagSystemPalette
 ): Theme => {
   const globalTheme = getGlobalTheme(scale, systemPallete);
   return {
@@ -139,6 +141,7 @@ const getTheme = (
       rate: getRateTheme(globalTheme),
       refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
+      search: getSearchTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
       skeleton: getSkeletonTheme(globalTheme),

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

@@ -12,7 +12,7 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   pressedSurface: '#380060',
 
   decorativePrimary: '#FDFBFF',
-  decorativePrimarySurface: '#DDC8F5',
+  decorativePrimarySurface: '#B382FD',
 };
 
 const swagSystemPalette: SystemPalette = {