@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/theme/components/badge.ts

@@ -39,4 +39,19 @@ 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 default getBadgeTheme;

package/src/theme/components/button.ts

@@ -42,7 +42,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    utilityBackground: theme.colors.neutralGlobalSurface,
+    utilityBackground: theme.colors.defaultGlobalSurface,
     textLoadingBackground: theme.colors.highlightedSurface,
     pressedBackground: {
       filledPrimary: theme.colors.pressedSurface,
@@ -57,7 +57,12 @@ const getButtonTheme = (theme: GlobalTheme) => {
     },
   };
 
+  const lineHeights = {
+    titleOfTextVariant: theme.lineHeights.medium,
+  };
+
   return {
+    lineHeights,
     borderWidth,
     fonts,
     fontSize,
@@ -68,4 +73,15 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 };
 
+type GetButtonThemeReturnType = ReturnType<typeof getButtonTheme>;
+export interface ButtonThemeType extends GetButtonThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetButtonThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSize: GetButtonThemeReturnType['fontSize'];
+}
 export default getButtonTheme;

package/src/theme/components/calendar.ts

@@ -24,6 +24,8 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     rowVerticalPadding: theme.space.medium,
     headerVerticalPadding: theme.space.medium,
     headerHorizontalPadding: theme.space.smallMedium,
+    headerMarginRight: theme.space.small,
+    iosPickerMarginVertical: theme.space['5xlarge'],
   };
 
   const radii = {

package/src/theme/components/cardCarousel.ts

@@ -8,21 +8,14 @@ const getCardCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    shadow: theme.colors.primaryOutline,
     carouselItemBackground: theme.colors.defaultSurface,
   };
-  const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 4,
-  };
 
   const radii = {
     card: theme.radii.medium,
   };
 
-  return { shadows, colors, space, radii };
+  return { colors, space, radii };
 };
 
 export default getCardCarouselTheme;

package/src/theme/components/carousel.ts

@@ -3,7 +3,6 @@ import type { GlobalTheme } from '../global';
 
 const getCarouselTheme = (theme: GlobalTheme) => {
   const space = {
-    headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
@@ -27,4 +26,19 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   return { space, fonts, fontSizes, lineHeights };
 };
 
+type GetCarouselThemeReturnType = ReturnType<typeof getCarouselTheme>;
+export interface CarouselThemeType extends GetCarouselThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetCarouselThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetCarouselThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetCarouselThemeReturnType['lineHeights'];
+}
 export default getCarouselTheme;

package/src/theme/components/checkbox.ts

@@ -2,8 +2,11 @@ import type { GlobalTheme } from '../global';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
-    default: theme.colors.primaryOutline,
-    disabledBorder: theme.colors.disabledOutline,
+    borders: {
+      default: theme.colors.primaryOutline,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.inactiveOutline,
+    },
   };
 
   const space = {

package/src/theme/components/chip.ts

@@ -0,0 +1,47 @@
+import type { GlobalTheme } from '../global';
+
+const getChipTheme = (theme: GlobalTheme) => {
+  const colors = {
+    primaryBackground: theme.colors.darkGlobalSurface,
+    secondaryBackground: theme.colors.highlightedSurface,
+    filledBackground: theme.colors.defaultGlobalSurface,
+    outlinedBackground: 'transparent',
+    wrapperBorder: theme.colors.primaryOutline,
+    wrapperSelectedBorder: 'transparent',
+    selectedPrimaryText: theme.colors.defaultGlobalSurface,
+  };
+
+  const space = {
+    wrapperHorizontalPadding: theme.space.smallMedium,
+    wrapperVerticalPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.small,
+  };
+
+  const sizes = {
+    wrapperBorder: theme.borderWidths.base,
+  };
+
+  const radii = {
+    wrapper: theme.radii.rounded,
+  };
+
+  const borderWidths = {
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium,
+  };
+
+  const shadows = {
+    filledWrapper: theme.shadows.default,
+  };
+
+  return {
+    colors,
+    space,
+    sizes,
+    radii,
+    borderWidths,
+    shadows,
+  };
+};
+
+export default getChipTheme;

package/src/theme/components/empty.ts

@@ -31,4 +31,16 @@ const getEmptyTheme = (theme: GlobalTheme) => {
   return { fontSizes, colors, sizes, space, fonts };
 };
 
+type GetEmptyThemeReturnType = ReturnType<typeof getEmptyTheme>;
+export interface EmptyThemeType extends GetEmptyThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetEmptyThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetEmptyThemeReturnType['fontSizes'];
+}
+
 export default getEmptyTheme;

package/src/theme/components/error.ts

@@ -42,4 +42,20 @@ const getErrorTheme = (theme: GlobalTheme) => {
   return { fontSizes, colors, sizes, space, fonts, lineHeight };
 };
 
+type GetErrorThemeReturnType = ReturnType<typeof getErrorTheme>;
+export interface ErrorThemeType extends GetErrorThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetErrorThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetErrorThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeight: GetErrorThemeReturnType['lineHeight'];
+}
+
 export default getErrorTheme;

package/src/theme/components/fab.ts

@@ -4,14 +4,13 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
     buttonPressedBackground: theme.colors.pressedSurface,
+    buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
-    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -22,29 +21,27 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large,
   };
 
   const lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large,
   };
 
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 2,
+    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 = {
@@ -54,8 +51,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
   };
@@ -75,5 +70,16 @@ const getFABTheme = (theme: GlobalTheme) => {
     space,
   };
 };
+type GetFABThemeReturnType = ReturnType<typeof getFABTheme>;
+export interface FABThemeType extends GetFABThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetFABThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetFABThemeReturnType['fontSizes'];
+}
 
 export default getFABTheme;

package/src/theme/components/list.ts

@@ -18,18 +18,23 @@ const getListTheme = (theme: GlobalTheme) => {
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
+    childrenContainerTopMargin: theme.space.small,
   };
 
   const radii = {
-    card: theme.radii.medium,
+    item: theme.radii.medium,
     basicItem: theme.radii.base,
-    cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,
   };
 
   const shadows = {
-    cardOffset: { width: 0, height: 2 },
-    cardElevation: 10,
+    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,
+    },
   };
 
   const widths = {
@@ -39,7 +44,6 @@ const getListTheme = (theme: GlobalTheme) => {
   const opacity = {
     disabled: 0.38,
     enabled: 1,
-    cardShadow: 1,
   };
 
   return { colors, space, radii, widths, opacity, shadows };

package/src/theme/components/pinInput.ts

@@ -54,5 +54,20 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     radii,
   };
 };
+type GetPinInputThemeReturnType = ReturnType<typeof getPinInputTheme>;
+export interface PinInputThemeType extends GetPinInputThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetPinInputThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetPinInputThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetPinInputThemeReturnType['lineHeights'];
+}
 
 export default getPinInputTheme;

package/src/theme/components/progress.ts

@@ -41,8 +41,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     circleDiameter: theme.sizes['6xlarge'],
-    circleCompletenessHeight: theme.sizes.xsmall,
-    barHeight: theme.sizes.xsmall,
+    circleCompletenessHeight: theme.sizes.small,
+    barHeight: theme.sizes.small,
   };
 
   const radii = {

package/src/theme/components/radio.ts

@@ -2,12 +2,18 @@ import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
   const colors = {
-    circle: theme.colors.onDefaultGlobalSurface,
+    circle: theme.colors.primary,
+    checked: theme.colors.highlightedSurface,
+    intents: {
+      light: theme.colors.defaultGlobalSurface,
+      dark: theme.colors.neutralGlobalSurface,
+    },
   };
 
   const space = {
     circleLeftMargin: theme.space.small,
-    groupTopMargin: theme.space.xsmall,
+    groupTopMarginSmall: theme.space.xsmall,
+    groupTopMarginMedium: theme.space.medium,
   };
 
   const boundingBoxSize = theme.sizes.large;

package/src/theme/components/rate.ts

@@ -0,0 +1,16 @@
+import type { GlobalTheme } from '../global';
+
+const getRateTheme = (theme: GlobalTheme) => {
+  const colors = {
+    iconStroke: theme.colors.primary,
+  };
+
+  const spaces = {
+    iconWrapperPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.xsmall,
+  };
+
+  return { colors, spaces };
+};
+
+export default getRateTheme;

package/src/theme/components/sectionHeading.ts

@@ -3,13 +3,14 @@ import type { GlobalTheme } from '../global';
 const getSectionHeadingTheme = (theme: GlobalTheme) => {
   const colors = {
     background: theme.colors.neutralGlobalSurface,
+    backgroundSmall: theme.colors.decorativePrimarySurface,
   };
 
   const space = {
     headingVerticalPadding: theme.space.small,
     headingHorizontalPadding: theme.space.medium,
     headingMarginBottom: theme.space.medium,
-    iconMarginRight: theme.space.small,
+    iconMarginRight: theme.space.smallMedium,
   };
 
   return { colors, space };

package/src/theme/components/success.ts

@@ -37,4 +37,16 @@ const getSuccessTheme = (theme: GlobalTheme) => {
   return { fontSizes, colors, sizes, space, fonts };
 };
 
+type GetSuccessThemeReturnType = ReturnType<typeof getSuccessTheme>;
+export interface SuccessThemeType extends GetSuccessThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetSuccessThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetSuccessThemeReturnType['fontSizes'];
+}
+
 export default getSuccessTheme;

package/src/theme/components/swipeable.ts

@@ -5,9 +5,18 @@ const getSwipeableTheme = (theme: GlobalTheme) => {
     success: theme.colors.success,
     danger: theme.colors.error,
     primary: theme.colors.primary,
+    defaultContainerBackground: theme.colors.defaultGlobalSurface,
   };
 
-  return { colors };
+  const radii = {
+    swipeableContainer: theme.radii.medium,
+  };
+
+  const space = {
+    containerExtraWidth: theme.space.xsmall,
+  };
+
+  return { colors, radii, space };
 };
 
 export default getSwipeableTheme;

package/src/theme/components/switch.ts

@@ -10,8 +10,8 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     },
     thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.neutralGlobalSurface,
-      textBackground: theme.colors.decorativePrimary,
+      background: theme.colors.defaultGlobalSurface,
+      textBackground: theme.colors.decorativePrimarySurface,
     },
   };
 
@@ -20,7 +20,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     width: theme.sizes.xxxlarge,
     height: theme.sizes.large,
     selector: {
-      height: theme.sizes.xxxxlarge,
+      height: theme.sizes.xxlarge,
     },
   };
 
@@ -28,7 +28,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
-      wrapperPadding: theme.space.xsmall,
+      wrapperHorizontalPadding: theme.space.xsmall,
     },
   };
 

package/src/theme/components/tabs.ts

@@ -17,14 +17,15 @@ const getTabsTheme = (theme: GlobalTheme) => {
     itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
     outlineVerticalPadding: theme.space.xsmall,
+    tabIndicatorBottom: -theme.space.xxsmall,
   };
 
   const radii = {
-    outline: theme.radii.medium,
+    outline: theme.radii.xlarge,
   };
 
   const borderWidths = {
-    headerBottom: theme.borderWidths.base,
+    headerBottom: theme.borderWidths.medium,
   };
 
   const sizes = {

package/src/theme/components/tag.ts

@@ -6,8 +6,8 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.onDefaultGlobalSurface,
-    primaryBackground: undefined,
+    primary: theme.colors.primary,
+    primaryBackground: theme.colors.highlightedSurface,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,
     success: theme.colors.onSuccessSurface,
@@ -44,4 +44,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   return { borderWidths, colors, fonts, fontSizes, space, radii, lineHeights };
 };
 
+type GetTagThemeReturnType = ReturnType<typeof getTagTheme>;
+export interface TagThemeType extends GetTagThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetTagThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetTagThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetTagThemeReturnType['lineHeights'];
+}
+
 export default getTagTheme;

package/src/theme/components/textInput.ts

@@ -45,17 +45,17 @@ const getTextInputTheme = (theme: GlobalTheme) => {
 
   const space = {
     containerPadding: theme.space.medium,
-    labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -4,
+    labelLeft: theme.space.xlarge,
+    labelTop: theme.space.xlarge / 3,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
-    maxLengthLabelMarginLeft: theme.space.xsmall,
-    errorAndHelpTextContainerPaddingLeft: theme.space.medium,
+    errorAndHelpTextContainerHorizontalPadding: theme.space.medium,
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: -theme.space.xxsmall,
+    errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
   };
 
   const fonts = {

package/src/theme/components/toast.ts

@@ -9,7 +9,6 @@ const getToastTheme = (theme: GlobalTheme) => {
     notification: theme.colors.defaultGlobalSurface,
     snackbar: theme.colors.darkGlobalSurface,
     divider: theme.colors.secondaryOutline,
-    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -34,10 +33,11 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: 4,
-    elevation: 4,
+    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,
   };
 
   return { colors, radii, sizes, space, borderWidths, shadows };