@hero-design/rn 7.2.2 → 7.3.0

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

@@ -3,32 +3,61 @@
 exports[`theme returns correct theme object 1`] = `
 Object {
   "__hd__": Object {
-    "badge": Object {
+    "avatar": Object {
       "borderWidths": Object {
         "default": 1,
       },
       "colors": Object {
         "danger": "#de350b",
-        "dangerBackground": "#fcebe7",
         "info": "#4568fb",
-        "infoBackground": "#ecf0ff",
+        "primary": "#7622d7",
+        "success": "#01b39c",
+        "warning": "#ffa234",
+      },
+      "fontSizes": Object {
+        "large": 20,
+        "medium": 18,
+        "small": 16,
+        "xlarge": 24,
+      },
+      "radii": Object {
+        "large": 24,
+        "medium": 20,
+        "small": 16,
+        "xlarge": 28,
+      },
+      "sizes": Object {
+        "large": 48,
+        "medium": 40,
+        "small": 32,
+        "xlarge": 56,
+      },
+    },
+    "badge": Object {
+      "colors": Object {
+        "archived": "#ccced1",
+        "danger": "#de350b",
+        "info": "#4568fb",
         "success": "#017d6d",
-        "successBackground": "#f0fef4",
+        "text": "#ffffff",
         "warning": "#d98a2c",
-        "warningBackground": "#fff6eb",
-      },
-      "font": Object {
-        "default": "BeVietnamPro-SemiBold",
       },
-      "fontSize": Object {
+      "fontSizes": Object {
         "default": 12,
       },
-      "radii": Object {
-        "default": 4,
+      "fonts": Object {
+        "default": "BeVietnamPro-SemiBold",
+      },
+      "sizes": Object {
+        "height": 20,
+        "minWidth": 20,
+        "statusHeight": 8,
+        "statusWidth": 8,
       },
       "space": Object {
         "horizontalPadding": 8,
-        "verticalPadding": 2,
+        "statusPositionRight": -2,
+        "statusPositionTop": -2,
       },
     },
     "bottomNavigation": Object {
@@ -52,7 +81,45 @@ Object {
         "titleMarginTop": 4,
       },
     },
+    "button": Object {
+      "borderWidth": Object {
+        "default": 2,
+      },
+      "colors": Object {
+        "defaultText": "#292a2b",
+        "disabledBackground": "#ccced1",
+        "disabledBorder": "#ccced1",
+        "disabledText": "#ccced1",
+        "invertedText": "#ffffff",
+        "pressedPrimary": "#c8a7ef",
+        "pressedSecondary": "#d1d9fe",
+        "primary": "#7622d7",
+        "secondary": "#4568fb",
+      },
+      "fontSize": Object {
+        "default": 18,
+      },
+      "fonts": Object {
+        "default": "BeVietnamPro-SemiBold",
+      },
+      "lineHeight": Object {
+        "default": 24,
+      },
+      "radii": Object {
+        "default": 32,
+      },
+      "sizes": Object {
+        "iconSize": 20,
+      },
+      "space": Object {
+        "buttonPadding": 16,
+        "iconPadding": 8,
+      },
+    },
     "card": Object {
+      "colors": Object {
+        "dataCardIndicator": "#a26fb0",
+      },
       "radii": Object {
         "default": 12,
       },
@@ -72,6 +139,25 @@ Object {
         "xsmall": 4,
       },
     },
+    "drawer": Object {
+      "colors": Object {
+        "backdrop": "#292a2b",
+        "background": "#ffffff",
+        "shadow": "#292a2b",
+      },
+      "radii": Object {
+        "default": 16,
+      },
+      "shadows": Object {
+        "elevation": 10,
+        "offset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "opacity": 0.27,
+        "radius": 4.65,
+      },
+    },
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#d1d9fe",
@@ -79,19 +165,23 @@ Object {
         "buttonBackground": "#292a2b",
         "headerText": "#292a2b",
         "icon": "#ffffff",
+        "titleText": "#ffffff",
       },
       "fontSizes": Object {
         "actionItemText": 14,
-        "buttonIcon": 24,
         "header": 24,
+        "title": 16,
       },
       "fonts": Object {
         "actionItemText": "BeVietnamPro-Regular",
         "header": "BeVietnamPro-SemiBold",
+        "title": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
         "actionItemText": 22,
         "header": 32,
+        "icon": 24,
+        "title": 24,
       },
       "radii": Object {
         "actionItem": 999,
@@ -110,8 +200,11 @@ Object {
         "actionItemTextPaddingLeft": 8,
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
+        "containerPaddingHorizontal": 16,
+        "containerPaddingVertical": 16,
         "headerTextMarginBottom": 24,
         "headerTextMarginRight": 24,
+        "titleMarginHorizontal": 8,
       },
     },
     "icon": Object {
@@ -131,17 +224,76 @@ Object {
         "xsmall": 16,
       },
     },
+    "progress": Object {
+      "colors": Object {
+        "background": "#dadbde",
+        "danger": "#de350b",
+        "info": "#4568fb",
+        "innerBackground": "#ffffff",
+        "primary": "#7622d7",
+        "success": "#01b39c",
+        "warning": "#ffa234",
+      },
+      "radii": Object {
+        "default": 999,
+      },
+      "sizes": Object {
+        "barHeight": 4,
+        "radius": 48,
+        "strokeWidth": 8,
+      },
+    },
     "tabs": Object {
+      "borderWidths": Object {
+        "headerBottom": 1,
+      },
       "colors": Object {
-        "active": "#ffffff",
-        "background": "#7622d7",
-        "inactive": "#ffffff50",
+        "active": "#7622d7",
+        "activeBackground": "#f1e9fb",
+        "headerBottom": "#dadbde",
+        "inactive": "#292a2b",
+        "text": "#292a2b",
+      },
+      "radii": Object {
+        "outline": 8,
+      },
+      "sizes": Object {
+        "indicator": 2,
       },
       "space": Object {
         "flatListHorizontalPadding": 8,
-        "itemHorizontalPadding": 16,
-        "itemVerticalPadding": 24,
-        "titleMarginLeft": 8,
+        "itemHorizontalPadding": 8,
+        "itemVerticalPadding": 8,
+        "outlineHorizontalPadding": 8,
+        "outlineVerticalPadding": 4,
+      },
+    },
+    "tag": Object {
+      "borderWidths": Object {
+        "default": 1,
+      },
+      "colors": Object {
+        "danger": "#de350b",
+        "dangerBackground": "#fcebe7",
+        "info": "#4568fb",
+        "infoBackground": "#ecf0ff",
+        "success": "#017d6d",
+        "successBackground": "#f0fef4",
+        "warning": "#d98a2c",
+        "warningBackground": "#fff6eb",
+      },
+      "fontSizes": Object {
+        "default": 12,
+      },
+      "fonts": Object {
+        "default": "BeVietnamPro-SemiBold",
+      },
+      "radii": Object {
+        "default": 4,
+      },
+      "space": Object {
+        "horizontalPadding": 8,
+        "verticalPadding": 2,
       },
     },
     "typography": Object {
@@ -173,11 +325,13 @@ Object {
     "base": 1,
   },
   "colors": Object {
+    "archived": "#ccced1",
     "backgroundDark": "#292a2b",
     "backgroundLight": "#fafbfb",
     "danger": "#de350b",
     "dangerBackground": "#fcebe7",
     "dangerLight": "#f2ae9d",
+    "disabledLightText": "#ccced1",
     "disabledText": "#8b8d92",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
@@ -186,11 +340,14 @@ Object {
     "outline": "#dadbde",
     "platformBackground": "#ffffff",
     "primary": "#7622d7",
+    "primaryBackground": "#f1e9fb",
+    "primaryDark": "#a26fb0",
     "primaryLight": "#c8a7ef",
+    "secondary": "#4568fb",
+    "secondaryLight": "#d1d9fe",
     "success": "#01b39c",
     "successBackground": "#f0fef4",
     "successDark": "#017d6d",
-    "successLight": "#002d27",
     "text": "#292a2b",
     "warning": "#ffa234",
     "warningBackground": "#fff6eb",
@@ -223,6 +380,11 @@ Object {
     "xxxxlarge": 36,
     "xxxxxlarge": 40,
   },
+  "radii": Object {
+    "base": 4,
+    "medium": 8,
+    "rounded": 999,
+  },
   "space": Object {
     "large": 24,
     "medium": 16,

package/src/theme/components/avatar.ts

@@ -0,0 +1,40 @@
+import { GlobalTheme } from '../global';
+
+const getAvatarTheme = (theme: GlobalTheme) => {
+  const colors = {
+    primary: theme.colors.primary,
+    info: theme.colors.info,
+    danger: theme.colors.danger,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+  };
+
+  const sizes = {
+    small: theme.space.xlarge,
+    medium: theme.space.xxlarge,
+    large: theme.space.xxxlarge,
+    xlarge: theme.space.xxxxlarge,
+  };
+
+  const fontSizes = {
+    small: theme.fontSizes.large,
+    medium: theme.fontSizes.xlarge,
+    large: theme.fontSizes.xxlarge,
+    xlarge: theme.fontSizes.xxxlarge,
+  };
+
+  const radii = {
+    small: theme.space.xlarge / 2,
+    medium: theme.space.xxlarge / 2,
+    large: theme.space.xxxlarge / 2,
+    xlarge: theme.space.xxxxlarge / 2,
+  };
+
+  const borderWidths = {
+    default: theme.borderWidths.base,
+  };
+
+  return { colors, sizes, radii, borderWidths, fontSizes };
+};
+
+export default getAvatarTheme;

package/src/theme/components/badge.ts

@@ -1,39 +1,37 @@
 import { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
-  const borderWidths = {
-    default: theme.borderWidths.base,
-  };
-
   const colors = {
     danger: theme.colors.danger,
-    dangerBackground: theme.colors.dangerBackground,
     info: theme.colors.info,
-    infoBackground: theme.colors.infoBackground,
     success: theme.colors.successDark,
-    successBackground: theme.colors.successBackground,
     warning: theme.colors.warningDark,
-    warningBackground: theme.colors.warningBackground,
+    archived: theme.colors.archived,
+    text: theme.colors.invertedText,
   };
 
-  const font = {
+  const fonts = {
     default: theme.fonts.semiBold,
   };
 
-  const fontSize = {
+  const fontSizes = {
     default: theme.fontSizes.small,
   };
 
-  const space = {
-    horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xxsmall,
+  const sizes = {
+    height: theme.fontSizes.small + theme.space.small,
+    minWidth: theme.fontSizes.small + theme.space.small,
+    statusHeight: theme.space.small,
+    statusWidth: theme.space.small,
   };
 
-  const radii = {
-    default: 4,
+  const space = {
+    horizontalPadding: theme.space.small,
+    statusPositionTop: -theme.space.xxsmall,
+    statusPositionRight: -theme.space.xxsmall,
   };
 
-  return { borderWidths, colors, font, fontSize, space, radii };
+  return { colors, fonts, fontSizes, sizes, space };
 };
 
 export default getBadgeTheme;

package/src/theme/components/button.ts

@@ -0,0 +1,57 @@
+import { GlobalTheme } from '../global';
+
+const getButtonTheme = (theme: GlobalTheme) => {
+  const fonts = {
+    default: theme.fonts.semiBold,
+  };
+
+  const fontSize = {
+    default: theme.fontSizes.xlarge,
+  };
+
+  const lineHeight = {
+    default: theme.lineHeights.large,
+  };
+
+  const borderWidth = {
+    default: theme.space.xxsmall,
+  };
+
+  const space = {
+    buttonPadding: theme.space.medium,
+    iconPadding: theme.space.small,
+  };
+
+  const sizes = {
+    iconSize: theme.fontSizes.xxlarge,
+  };
+
+  const radii = {
+    default: theme.space.xlarge,
+  };
+
+  const colors = {
+    primary: theme.colors.primary,
+    pressedPrimary: theme.colors.primaryLight,
+    secondary: theme.colors.secondary,
+    pressedSecondary: theme.colors.secondaryLight,
+    defaultText: theme.colors.text,
+    disabledText: theme.colors.disabledLightText,
+    disabledBorder: theme.colors.disabledLightText,
+    disabledBackground: theme.colors.disabledLightText,
+    invertedText: theme.colors.invertedText,
+  };
+
+  return {
+    borderWidth,
+    fonts,
+    fontSize,
+    sizes,
+    radii,
+    colors,
+    lineHeight,
+    space,
+  };
+};
+
+export default getButtonTheme;

package/src/theme/components/card.ts

@@ -1,9 +1,15 @@
-const getCardTheme = () => {
+import { GlobalTheme } from '../global';
+
+const getCardTheme = (theme: GlobalTheme) => {
+  const colors = {
+    dataCardIndicator: theme.colors.primaryDark,
+  };
+
   const radii = {
     default: 12,
   };
 
-  return { radii };
+  return { colors, radii };
 };
 
 export default getCardTheme;

package/src/theme/components/drawer.ts

@@ -0,0 +1,24 @@
+import { GlobalTheme } from '../global';
+
+const getDrawerTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+    backdrop: theme.colors.backgroundDark,
+  };
+
+  const radii = {
+    default: 16,
+  };
+
+  const shadows = {
+    offset: { width: 0, height: 3 },
+    opacity: 0.27,
+    radius: 4.65,
+    elevation: 10,
+  };
+
+  return { colors, radii, shadows };
+};
+
+export default getDrawerTheme;

package/src/theme/components/fab.ts

@@ -7,6 +7,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     headerText: theme.colors.text,
     actionItemBackground: theme.colors.infoLight,
     backdropBackground: theme.colors.platformBackground,
+    titleText: theme.colors.invertedText,
   };
 
   const sizes = {
@@ -17,17 +18,20 @@ const getFABTheme = (theme: GlobalTheme) => {
   const fonts = {
     header: theme.fonts.semiBold,
     actionItemText: theme.fonts.regular,
+    title: theme.fonts.semiBold,
   };
 
   const fontSizes = {
     header: theme.fontSizes.xxxlarge,
-    buttonIcon: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.medium,
+    title: theme.fontSizes.large,
   };
 
   const lineHeights = {
     header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
+    title: theme.lineHeights.large,
+    icon: theme.lineHeights.large,
   };
 
   const space = {
@@ -42,10 +46,13 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonMarginRight: theme.space.large,
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
+    containerPaddingHorizontal: theme.space.medium,
+    containerPaddingVertical: theme.space.medium,
+    titleMarginHorizontal: theme.space.small,
   };
 
   const radii = {
-    actionItem: 999,
+    actionItem: theme.radii.rounded,
   };
 
   return { radii, fonts, fontSizes, colors, sizes, lineHeights, space };

package/src/theme/components/progress.ts

@@ -0,0 +1,27 @@
+import { GlobalTheme } from '../global';
+
+const getProgressTheme = (theme: GlobalTheme) => {
+  const colors = {
+    primary: theme.colors.primary,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.danger,
+    info: theme.colors.info,
+    background: theme.colors.outline,
+    innerBackground: theme.colors.platformBackground,
+  };
+
+  const sizes = {
+    radius: theme.space.xxxlarge,
+    strokeWidth: theme.space.small,
+    barHeight: theme.space.xsmall,
+  };
+
+  const radii = {
+    default: theme.radii.rounded,
+  };
+
+  return { colors, sizes, radii };
+};
+
+export default getProgressTheme;

package/src/theme/components/tabs.ts

@@ -2,19 +2,34 @@ import { GlobalTheme } from '../global';
 
 const getTabsTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.primary,
-    active: theme.colors.invertedText,
-    inactive: `${theme.colors.invertedText}50`,
+    active: theme.colors.primary,
+    inactive: theme.colors.text,
+    activeBackground: theme.colors.primaryBackground,
+    headerBottom: theme.colors.outline,
+    text: theme.colors.text,
   };
 
   const space = {
     flatListHorizontalPadding: theme.space.small,
-    titleMarginLeft: theme.space.small,
-    itemHorizontalPadding: theme.space.medium,
-    itemVerticalPadding: theme.space.large,
+    itemHorizontalPadding: theme.space.small,
+    itemVerticalPadding: theme.space.small,
+    outlineHorizontalPadding: theme.space.small,
+    outlineVerticalPadding: theme.space.xsmall,
   };
 
-  return { colors, space };
+  const radii = {
+    outline: theme.radii.medium,
+  };
+
+  const borderWidths = {
+    headerBottom: theme.borderWidths.base,
+  };
+
+  const sizes = {
+    indicator: theme.space.xxsmall,
+  };
+
+  return { borderWidths, colors, space, radii, sizes };
 };
 
 export default getTabsTheme;

package/src/theme/components/tag.ts

@@ -0,0 +1,39 @@
+import { GlobalTheme } from '../global';
+
+const getTagTheme = (theme: GlobalTheme) => {
+  const borderWidths = {
+    default: theme.borderWidths.base,
+  };
+
+  const colors = {
+    danger: theme.colors.danger,
+    dangerBackground: theme.colors.dangerBackground,
+    info: theme.colors.info,
+    infoBackground: theme.colors.infoBackground,
+    success: theme.colors.successDark,
+    successBackground: theme.colors.successBackground,
+    warning: theme.colors.warningDark,
+    warningBackground: theme.colors.warningBackground,
+  };
+
+  const fonts = {
+    default: theme.fonts.semiBold,
+  };
+
+  const fontSizes = {
+    default: theme.fontSizes.small,
+  };
+
+  const space = {
+    horizontalPadding: theme.space.small,
+    verticalPadding: theme.space.xxsmall,
+  };
+
+  const radii = {
+    default: theme.radii.base,
+  };
+
+  return { borderWidths, colors, fonts, fontSizes, space, radii };
+};
+
+export default getTagTheme;

package/src/theme/global/borders.ts

@@ -2,8 +2,20 @@ interface BorderWidths {
   base: number;
 }
 
+interface Radii {
+  rounded: number;
+  base: number;
+  medium: number;
+}
+
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
   base: baseBorderWidth,
 });
 
-export { BorderWidths, getBorderWidths };
+const getRadii = (baseRadius: number): Radii => ({
+  rounded: 999,
+  base: baseRadius,
+  medium: baseRadius * 2,
+});
+
+export { BorderWidths, getBorderWidths, Radii, getRadii };