@hero-design/rn 8.92.2 → 8.93.0

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1508,6 +1508,7 @@ exports[`rendering allows custom renderer 1`] = `
                           "flexShrink": 1,
                           "lineHeight": 22,
                           "textAlign": "center",
+                          "textAlignVertical": "center",
                         },
                         undefined,
                       ],
@@ -3250,6 +3251,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
                             "flexShrink": 1,
                             "lineHeight": 22,
                             "textAlign": "center",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ],
@@ -5315,6 +5317,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                           "flexShrink": 1,
                           "lineHeight": 22,
                           "textAlign": "center",
+                          "textAlignVertical": "center",
                         },
                         undefined,
                       ],
@@ -6972,6 +6975,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                           "flexShrink": 1,
                           "lineHeight": 22,
                           "textAlign": "center",
+                          "textAlignVertical": "center",
                         },
                         undefined,
                       ],
@@ -8281,6 +8285,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                           "flexShrink": 1,
                           "lineHeight": 22,
                           "textAlign": "center",
+                          "textAlignVertical": "center",
                         },
                         undefined,
                       ],

package/src/components/Tabs/TabWithBadge.tsx

@@ -41,7 +41,7 @@ const TabWithBadge = ({ config, tabItem }: TabWithBadgeProps) => {
         <Badge
           content={config.value}
           max={config.max}
-          intent="info"
+          intent="primary"
           style={{ marginLeft: theme.space.xsmall }}
         />
       </StyledBadgeWrapper>

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -100,7 +100,9 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
             [
               {
                 "flexShrink": 1,
+                "lineHeight": undefined,
                 "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
@@ -693,8 +695,8 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                       style={
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#355bfb",
-                          "borderColor": "#355bfb",
+                          "backgroundColor": "#401960",
+                          "borderColor": "#401960",
                           "borderRadius": 999,
                           "borderWidth": 2,
                           "height": 24,
@@ -710,7 +712,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                           ],
                         }
                       }
-                      themeIntent="info"
+                      themeIntent="primary"
                       themePadding="wideContent"
                       themeSize="medium"
                       themeVariant="filled"
@@ -1030,7 +1032,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
             [
               {
                 "flexShrink": 1,
+                "lineHeight": undefined,
                 "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
@@ -1623,8 +1627,8 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                       style={
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#355bfb",
-                          "borderColor": "#355bfb",
+                          "backgroundColor": "#401960",
+                          "borderColor": "#401960",
                           "borderRadius": 999,
                           "borderWidth": 2,
                           "height": 24,
@@ -1640,7 +1644,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           ],
                         }
                       }
-                      themeIntent="info"
+                      themeIntent="primary"
                       themePadding="wideContent"
                       themeSize="medium"
                       themeVariant="filled"
@@ -1960,7 +1964,9 @@ exports[`useIsFocused renders correctly 1`] = `
             [
               {
                 "flexShrink": 1,
+                "lineHeight": undefined,
                 "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
@@ -2553,8 +2559,8 @@ exports[`useIsFocused renders correctly 1`] = `
                       style={
                         {
                           "alignItems": "center",
-                          "backgroundColor": "#355bfb",
-                          "borderColor": "#355bfb",
+                          "backgroundColor": "#401960",
+                          "borderColor": "#401960",
                           "borderRadius": 999,
                           "borderWidth": 2,
                           "height": 24,
@@ -2570,7 +2576,7 @@ exports[`useIsFocused renders correctly 1`] = `
                           ],
                         }
                       }
-                      themeIntent="info"
+                      themeIntent="primary"
                       themePadding="wideContent"
                       themeSize="medium"
                       themeVariant="filled"

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -588,8 +588,8 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                     style={
                       {
                         "alignItems": "center",
-                        "backgroundColor": "#355bfb",
-                        "borderColor": "#355bfb",
+                        "backgroundColor": "#401960",
+                        "borderColor": "#401960",
                         "borderRadius": 999,
                         "borderWidth": 2,
                         "height": 24,
@@ -605,7 +605,7 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                         ],
                       }
                     }
-                    themeIntent="info"
+                    themeIntent="primary"
                     themePadding="wideContent"
                     themeSize="medium"
                     themeVariant="filled"
@@ -1190,8 +1190,8 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                     style={
                       {
                         "alignItems": "center",
-                        "backgroundColor": "#355bfb",
-                        "borderColor": "#355bfb",
+                        "backgroundColor": "#401960",
+                        "borderColor": "#401960",
                         "borderRadius": 999,
                         "borderWidth": 2,
                         "height": 24,
@@ -1207,7 +1207,7 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                         ],
                       }
                     }
-                    themeIntent="info"
+                    themeIntent="primary"
                     themePadding="wideContent"
                     themeSize="medium"
                     themeVariant="filled"

package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap

@@ -25,8 +25,8 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
       style={
         {
           "alignItems": "center",
-          "backgroundColor": "#355bfb",
-          "borderColor": "#355bfb",
+          "backgroundColor": "#401960",
+          "borderColor": "#401960",
           "borderRadius": 999,
           "borderWidth": 2,
           "height": 24,
@@ -42,7 +42,7 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
           ],
         }
       }
-      themeIntent="info"
+      themeIntent="primary"
       themePadding="wideContent"
       themeSize="medium"
       themeVariant="filled"

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

@@ -100,7 +100,9 @@ exports[`Tabs renders correctly 1`] = `
             [
               {
                 "flexShrink": 1,
+                "lineHeight": undefined,
                 "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
@@ -421,8 +423,8 @@ exports[`Tabs renders correctly 1`] = `
                   style={
                     {
                       "alignItems": "center",
-                      "backgroundColor": "#355bfb",
-                      "borderColor": "#355bfb",
+                      "backgroundColor": "#401960",
+                      "borderColor": "#401960",
                       "borderRadius": 999,
                       "borderWidth": 2,
                       "height": 24,
@@ -438,7 +440,7 @@ exports[`Tabs renders correctly 1`] = `
                       ],
                     }
                   }
-                  themeIntent="info"
+                  themeIntent="primary"
                   themePadding="wideContent"
                   themeSize="medium"
                   themeVariant="filled"
@@ -774,7 +776,9 @@ exports[`useIsFocused renders correctly 1`] = `
             [
               {
                 "flexShrink": 1,
+                "lineHeight": undefined,
                 "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
@@ -1095,8 +1099,8 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     {
                       "alignItems": "center",
-                      "backgroundColor": "#355bfb",
-                      "borderColor": "#355bfb",
+                      "backgroundColor": "#401960",
+                      "borderColor": "#401960",
                       "borderRadius": 999,
                       "borderWidth": 2,
                       "height": 24,
@@ -1112,7 +1116,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       ],
                     }
                   }
-                  themeIntent="info"
+                  themeIntent="primary"
                   themePadding="wideContent"
                   themeSize="medium"
                   themeVariant="filled"
@@ -1448,7 +1452,9 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
             [
               {
                 "flexShrink": 1,
+                "lineHeight": undefined,
                 "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
@@ -1769,8 +1775,8 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                   style={
                     {
                       "alignItems": "center",
-                      "backgroundColor": "#355bfb",
-                      "borderColor": "#355bfb",
+                      "backgroundColor": "#401960",
+                      "borderColor": "#401960",
                       "borderRadius": 999,
                       "borderWidth": 2,
                       "height": 24,
@@ -1786,7 +1792,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       ],
                     }
                   }
-                  themeIntent="info"
+                  themeIntent="primary"
                   themePadding="wideContent"
                   themeSize="medium"
                   themeVariant="filled"

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -941,6 +941,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                                   "flexShrink": 1,
                                   "lineHeight": 22,
                                   "textAlign": "center",
+                                  "textAlignVertical": "center",
                                 },
                                 undefined,
                               ],

package/src/components/Toolbar/StyledToolbar.tsx

@@ -101,6 +101,7 @@ export const StyledInput = styled(TextInput)(({ theme }) => ({
   flexGrow: 1,
   flexShrink: 1,
   fontFamily: theme.__hd__.toolbar.fonts.text,
+  color: theme.__hd__.toolbar.colors.text,
 }));
 
 export const StyledPrefix = styled(View)(({ theme }) => ({

package/src/components/Toolbar/ToolbarMessage.tsx

@@ -16,6 +16,7 @@ import {
   ToolbarMessageState,
   ToolbarMessageWrapper,
 } from './StyledToolbar';
+import { useTheme } from '../../theme';
 
 export type ToolbarMessageHandles = Pick<
   RNTextInput,
@@ -105,6 +106,7 @@ const ToolbarMessage = forwardRef<ToolbarMessageHandles, ToolbarMessageProps>(
       textStyle,
       ...nativeProps
     } = props;
+    const theme = useTheme();
 
     const innerTextInput = React.useRef<RNTextInput | undefined | null>();
 
@@ -154,6 +156,7 @@ const ToolbarMessage = forwardRef<ToolbarMessageHandles, ToolbarMessageProps>(
               innerTextInput.current = rnTextInputRef;
             }}
             style={textStyle}
+            placeholderTextColor={theme.__hd__.toolbar.colors.placeholder}
           />
         </StyledInputContainer>
         {suffix && (

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

@@ -48,10 +48,12 @@ exports[`ToolbarMessage disabled renders correctly 1`] = `
         editable={true}
         onChangeText={[MockFunction]}
         placeholder="Message"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -136,10 +138,12 @@ exports[`ToolbarMessage filled renders correctly 1`] = `
       <TextInput
         editable={true}
         placeholder="Message"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -238,10 +242,12 @@ exports[`ToolbarMessage idle renders correctly 1`] = `
       <TextInput
         editable={true}
         placeholder="Message"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -340,10 +346,12 @@ exports[`ToolbarMessage readonly renders correctly 1`] = `
         editable={true}
         onChangeText={[MockFunction]}
         placeholder="Message"
+        placeholderTextColor="#4d6265"
         style={
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",

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

@@ -148,6 +148,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#606065",
         "border": "#ffffff",
+        "countText": "#ffffff",
         "danger": "#cb300a",
         "info": "#355bfb",
         "primary": "#401960",
@@ -156,6 +157,7 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
       },
       "fontSizes": {
+        "count": 6,
         "icon": {
           "medium": 12,
           "small": 8,
@@ -168,10 +170,18 @@ exports[`theme returns correct theme object 1`] = `
         "small": "BeVietnamPro-SemiBold",
       },
       "lineHeights": {
+        "count": 12,
         "medium": 16,
         "small": 10,
       },
+      "radii": {
+        "count": 999,
+      },
       "sizes": {
+        "count": {
+          "height": 12,
+          "width": 12,
+        },
         "medium": {
           "height": 24,
           "minWidth": 24,
@@ -184,6 +194,7 @@ exports[`theme returns correct theme object 1`] = `
         "statusWidth": 8,
       },
       "space": {
+        "countPaddingHorizontal": 2,
         "medium": {
           "horizontalPadding": 8,
         },
@@ -296,7 +307,10 @@ exports[`theme returns correct theme object 1`] = `
         "utility": "BeVietnamPro-Regular",
       },
       "lineHeights": {
+        "buttonText": undefined,
+        "compactButtonText": undefined,
         "titleOfTextVariant": 22,
+        "utilityButtonText": undefined,
       },
       "radii": {
         "default": 32,
@@ -871,22 +885,22 @@ exports[`theme returns correct theme object 1`] = `
           "warningInverted": "#ffffff",
         },
         "incompleteness": {
-          "archived": "#e8e9ea",
-          "archivedInverted": "#bcbdbf",
-          "danger": "#e8e9ea",
-          "dangerInverted": "#f68282",
-          "info": "#e8e9ea",
-          "infoInverted": "#c4cffd",
-          "primary": "#e8e9ea",
-          "primaryInverted": "#664780",
-          "success": "#e8e9ea",
-          "successInverted": "#7bd897",
-          "warning": "#e8e9ea",
-          "warningInverted": "#ffcb8d",
+          "archived": "#000000",
+          "archivedInverted": "#000000",
+          "danger": "#000000",
+          "dangerInverted": "#000000",
+          "info": "#000000",
+          "infoInverted": "#000000",
+          "primary": "#000000",
+          "primaryInverted": "#000000",
+          "success": "#000000",
+          "successInverted": "#000000",
+          "warning": "#000000",
+          "warningInverted": "#000000",
         },
         "step": {
           "complete": "#401960",
-          "current": "#DACCE4",
+          "current": "#ccd2d3",
           "incomplete": "#dadbde",
         },
       },
@@ -968,26 +982,18 @@ exports[`theme returns correct theme object 1`] = `
     "search": {
       "borderWidths": {
         "container": {
-          "basic": {
-            "focused": 2,
-            "normal": 2,
-          },
-          "reversed": {
-            "focused": 2,
-            "normal": 1,
-          },
+          "default": 1,
         },
       },
       "colors": {
         "basic": {
           "border": "#f6f6f7",
           "containerBackground": "#f6f6f7",
-          "focusedBorder": "#001f23",
         },
+        "placeholder": "#4d6265",
         "reversed": {
           "border": "#e8e9ea",
           "containerBackground": "#ffffff",
-          "focusedBorder": "#001f23",
         },
         "shadow": "#001f23",
         "suffixBackground": "#ffffff",
@@ -1426,9 +1432,11 @@ exports[`theme returns correct theme object 1`] = `
         "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
         "inputContainerBackground": "#f6f6f7",
+        "placeholder": "#4d6265",
         "primary": "#401960",
         "secondary": "#4d6265",
         "success": "#5ace7d",
+        "text": "#001f23",
       },
       "fontSizes": {
         "text": 16,

package/src/theme/components/badge.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import type { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
@@ -10,6 +11,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
+    countText: theme.colors.onDarkGlobalSurface,
   };
 
   const fonts = {
@@ -24,11 +26,20 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       medium: theme.fontSizes.small,
       small: 8,
     },
+    count: 6,
   };
 
   const lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
+    count: Platform.select({
+      android: 11, // vertical alignment
+      default: 12,
+    }),
+  };
+
+  const radii = {
+    count: theme.radii.rounded,
   };
 
   const sizes = {
@@ -42,6 +53,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     },
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
+    count: {
+      width: theme.sizes.smallMedium,
+      height: theme.sizes.smallMedium,
+    },
   };
 
   const borderWidths = {
@@ -57,9 +72,19 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall,
+    countPaddingHorizontal: theme.space.xxsmall,
   };
 
-  return { colors, fonts, fontSizes, sizes, space, lineHeights, borderWidths };
+  return {
+    colors,
+    fonts,
+    fontSizes,
+    sizes,
+    space,
+    lineHeights,
+    borderWidths,
+    radii,
+  };
 };
 
 export type BadgeThemeType = ReturnType<typeof getBadgeTheme>;

package/src/theme/components/button.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import type { GlobalTheme } from '../global';
 
 const getButtonTheme = (theme: GlobalTheme) => {
@@ -79,6 +80,15 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const lineHeights = {
     titleOfTextVariant: theme.lineHeights.medium,
+    buttonText: Platform.select({
+      android: theme.lineHeights.medium + theme.space.xxsmall,
+    }),
+    utilityButtonText: Platform.select({
+      android: theme.lineHeights.small + theme.space.xxsmall,
+    }),
+    compactButtonText: Platform.select({
+      android: theme.lineHeights.small + theme.space.xxsmall,
+    }),
   };
 
   return {

package/src/theme/components/progress.ts

@@ -1,46 +1,41 @@
-import { mixColor } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
-  const lightenScaleOnInverted = 20;
-
   const colors = {
     completeness: {
       primary: theme.colors.primary,
-      success: theme.colors.success, // should be emerald dark 15
+      success: theme.colors.success,
       warning: theme.colors.warning,
       danger: theme.colors.error,
       info: theme.colors.info,
       archived: theme.colors.onArchivedSurface,
 
-      primaryInverted: theme.colors.onDarkGlobalSurface,
-      successInverted: theme.colors.onDarkGlobalSurface,
-      warningInverted: theme.colors.onDarkGlobalSurface,
-      dangerInverted: theme.colors.onDarkGlobalSurface,
-      infoInverted: theme.colors.onDarkGlobalSurface,
-      archivedInverted: theme.colors.onDarkGlobalSurface,
+      primaryInverted: theme.colors.white,
+      successInverted: theme.colors.white,
+      warningInverted: theme.colors.white,
+      dangerInverted: theme.colors.white,
+      infoInverted: theme.colors.white,
+      archivedInverted: theme.colors.white,
     },
     incompleteness: {
-      primary: theme.colors.secondaryOutline,
-      success: theme.colors.secondaryOutline,
-      warning: theme.colors.secondaryOutline,
-      danger: theme.colors.secondaryOutline,
-      info: theme.colors.secondaryOutline,
-      archived: theme.colors.secondaryOutline,
-
-      primaryInverted: mixColor(theme.colors.primary).tint(
-        lightenScaleOnInverted
-      ),
-      successInverted: theme.colors.mutedSuccess,
-      warningInverted: theme.colors.mutedWarning,
-      dangerInverted: theme.colors.mutedError,
-      infoInverted: theme.colors.mutedInfo,
-      archivedInverted: theme.colors.mutedArchived,
+      primary: theme.colors.overlayGlobalSurface,
+      success: theme.colors.overlayGlobalSurface,
+      warning: theme.colors.overlayGlobalSurface,
+      danger: theme.colors.overlayGlobalSurface,
+      info: theme.colors.overlayGlobalSurface,
+      archived: theme.colors.overlayGlobalSurface,
+
+      primaryInverted: theme.colors.overlayGlobalSurface,
+      successInverted: theme.colors.overlayGlobalSurface,
+      warningInverted: theme.colors.overlayGlobalSurface,
+      dangerInverted: theme.colors.overlayGlobalSurface,
+      infoInverted: theme.colors.overlayGlobalSurface,
+      archivedInverted: theme.colors.overlayGlobalSurface,
     },
     step: {
       complete: theme.colors.primary,
       incomplete: theme.colors.archivedSurface,
-      current: '#DACCE4',
+      current: theme.colors.decorativePrimarySurface,
     },
   };