@hero-design/rn 7.1.3-alpha2 → 7.1.3-alpha3

package/es/index.js

@@ -9898,6 +9898,11 @@ var space = {
 };
 
 var BASE = 16;
+var fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold'
+};
 var fontSizes = {
   xxxxxlarge: scale(BASE * 2),
   xxxxlarge: scale(BASE * 1.75),
@@ -9910,12 +9915,6 @@ var fontSizes = {
   xsmall: scale(BASE * 0.625) //      10
 
 };
-var fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700
-};
 var lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -9935,8 +9934,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9958,12 +9957,12 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var padding = {
     "default": "".concat(theme.space.xsmall, "px ").concat(theme.space.small, "px")
   };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
   var fontSizes = {
     "default": "".concat(theme.fontSizes.small, "px")
   };
-  var fontWeights = {
-    "default": theme.fontWeights.semiBold
-  };
   var radii = {
     "default": "4px"
   };
@@ -9971,8 +9970,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10060,17 +10059,17 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary
   };
+  var fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold
+  };
   var fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge
   };
-  var fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold
-  };
   var lineHeights = {
     small: "".concat(theme.lineHeights.small, "px"),
     medium: "".concat(theme.lineHeights.medium, "px"),
@@ -10079,8 +10078,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10097,15 +10096,15 @@ var getFABTheme = function getFABTheme(theme) {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
     header: "".concat(theme.fontSizes.xxxlarge, "px"),
     buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
     actionItemText: "".concat(theme.fontSizes.medium, "px")
   };
-  var fontWeights = {
-    header: "".concat(theme.fontWeights.semiBold),
-    actionItemText: "".concat(theme.fontWeights.regular)
-  };
   var lineHeights = {
     header: "".concat(theme.lineHeights.xxxlarge, "px"),
     actionItemText: "".concat(theme.lineHeights.medium, "px")
@@ -10126,11 +10125,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
-    fontWeights: fontWeights,
     space: space
   };
 };
@@ -10178,9 +10177,9 @@ var StyledView = styled(View)(_templateObject$9 || (_templateObject$9 = _taggedT
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.__hd__.badge.fontWeights["default"];
+  return theme.__hd__.badge.fonts["default"];
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.__hd__.badge.fontSizes["default"];
@@ -19900,13 +19899,13 @@ var StyledText = styled(Text$1)(_templateObject$7 || (_templateObject$7 = _tagge
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
 
     case 'regular':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
 
     case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -20269,7 +20268,7 @@ var StyledActionItem = styled(TouchableOpacity)(_templateObject$1 || (_templateO
   var theme = _ref8.theme;
   return theme.__hd__.fab.radii.actionItem;
 });
-var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_ref9) {
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.__hd__.fab.space.actionItemTextPaddingLeft;
 }, function (_ref10) {
@@ -20280,7 +20279,7 @@ var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templ
   return theme.__hd__.fab.lineHeights.actionItemText;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.__hd__.fab.fontWeights.actionItemText;
+  return theme.__hd__.fab.fonts.actionItemText;
 });
 
 var ActionItem = function ActionItem(_ref) {
@@ -20312,7 +20311,7 @@ var StyledBackdrop = styled(Animated.View)(_templateObject4 || (_templateObject4
   var theme = _ref3.theme;
   return theme.__hd__.fab.colors.backdropBackground;
 });
-var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.__hd__.fab.fontSizes.header;
 }, function (_ref5) {
@@ -20320,7 +20319,7 @@ var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObj
   return theme.__hd__.fab.lineHeights.header;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.__hd__.fab.fontWeights.header;
+  return theme.__hd__.fab.fonts.header;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.fab.space.headerTextMarginRight;
@@ -20362,7 +20361,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5]
+    outputRange: [0, 0.9]
   });
   return /*#__PURE__*/React.createElement(StyledContainer, {
     testID: testID,

package/lib/index.js

@@ -9907,6 +9907,11 @@ var space = {
 };
 
 var BASE = 16;
+var fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold'
+};
 var fontSizes = {
   xxxxxlarge: scale(BASE * 2),
   xxxxlarge: scale(BASE * 1.75),
@@ -9919,12 +9924,6 @@ var fontSizes = {
   xsmall: scale(BASE * 0.625) //      10
 
 };
-var fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700
-};
 var lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -9944,8 +9943,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9967,12 +9966,12 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var padding = {
     "default": "".concat(theme.space.xsmall, "px ").concat(theme.space.small, "px")
   };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
   var fontSizes = {
     "default": "".concat(theme.fontSizes.small, "px")
   };
-  var fontWeights = {
-    "default": theme.fontWeights.semiBold
-  };
   var radii = {
     "default": "4px"
   };
@@ -9980,8 +9979,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10069,17 +10068,17 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary
   };
+  var fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold
+  };
   var fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge
   };
-  var fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold
-  };
   var lineHeights = {
     small: "".concat(theme.lineHeights.small, "px"),
     medium: "".concat(theme.lineHeights.medium, "px"),
@@ -10088,8 +10087,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10106,15 +10105,15 @@ var getFABTheme = function getFABTheme(theme) {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
     header: "".concat(theme.fontSizes.xxxlarge, "px"),
     buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
     actionItemText: "".concat(theme.fontSizes.medium, "px")
   };
-  var fontWeights = {
-    header: "".concat(theme.fontWeights.semiBold),
-    actionItemText: "".concat(theme.fontWeights.regular)
-  };
   var lineHeights = {
     header: "".concat(theme.lineHeights.xxxlarge, "px"),
     actionItemText: "".concat(theme.lineHeights.medium, "px")
@@ -10135,11 +10134,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
-    fontWeights: fontWeights,
     space: space
   };
 };
@@ -10187,9 +10186,9 @@ var StyledView = styled(require$$0$1.View)(_templateObject$9 || (_templateObject
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.__hd__.badge.fontWeights["default"];
+  return theme.__hd__.badge.fonts["default"];
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.__hd__.badge.fontSizes["default"];
@@ -19909,13 +19908,13 @@ var StyledText = styled(require$$0$1.Text)(_templateObject$7 || (_templateObject
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
 
     case 'regular':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
 
     case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -20278,7 +20277,7 @@ var StyledActionItem = styled(require$$0$1.TouchableOpacity)(_templateObject$1 |
   var theme = _ref8.theme;
   return theme.__hd__.fab.radii.actionItem;
 });
-var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_ref9) {
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.__hd__.fab.space.actionItemTextPaddingLeft;
 }, function (_ref10) {
@@ -20289,7 +20288,7 @@ var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templ
   return theme.__hd__.fab.lineHeights.actionItemText;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.__hd__.fab.fontWeights.actionItemText;
+  return theme.__hd__.fab.fonts.actionItemText;
 });
 
 var ActionItem = function ActionItem(_ref) {
@@ -20321,7 +20320,7 @@ var StyledBackdrop = styled(require$$0$1.Animated.View)(_templateObject4 || (_te
   var theme = _ref3.theme;
   return theme.__hd__.fab.colors.backdropBackground;
 });
-var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.__hd__.fab.fontSizes.header;
 }, function (_ref5) {
@@ -20329,7 +20328,7 @@ var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObj
   return theme.__hd__.fab.lineHeights.header;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.__hd__.fab.fontWeights.header;
+  return theme.__hd__.fab.fonts.header;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.fab.space.headerTextMarginRight;
@@ -20371,7 +20370,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5]
+    outputRange: [0, 0.9]
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
     testID: testID,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha2",
+  "version": "7.1.3-alpha3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/types/src/theme/components/badge.d.ts

@@ -16,11 +16,11 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
     padding: {
         default: string;
     };
-    fontSizes: {
+    fonts: {
         default: string;
     };
-    fontWeights: {
-        default: number;
+    fontSizes: {
+        default: string;
     };
     radii: {
         default: string;

package/types/src/theme/components/fab.d.ts

@@ -3,6 +3,10 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     radii: {
         actionItem: string;
     };
+    fonts: {
+        header: string;
+        actionItemText: string;
+    };
     fontSizes: {
         header: string;
         buttonIcon: string;
@@ -23,10 +27,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         header: string;
         actionItemText: string;
     };
-    fontWeights: {
-        header: string;
-        actionItemText: string;
-    };
     space: {
         actionItemPaddingLeft: string;
         actionItemPaddingRight: string;

package/types/src/theme/components/typography.d.ts

@@ -5,17 +5,17 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         subdued: string;
         primary: string;
     };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
     fontSizes: {
         small: number;
         medium: number;
         large: number;
         xlarge: number;
     };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-    };
     lineHeights: {
         small: string;
         medium: string;

package/types/src/theme/global/index.d.ts

@@ -34,6 +34,11 @@ declare const globalTheme: {
         xxxlarge: number;
         xxxxlarge: number;
     };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
     fontSizes: {
         xxxxxlarge: number;
         xxxxlarge: number;
@@ -45,12 +50,6 @@ declare const globalTheme: {
         small: number;
         xsmall: number;
     };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-        bold: number;
-    };
     lineHeights: {
         xxxxxlarge: number;
         xxxxlarge: number;

package/types/src/theme/global/typography.d.ts

@@ -1,3 +1,8 @@
+declare const fonts: {
+    light: string;
+    regular: string;
+    semiBold: string;
+};
 declare const fontSizes: {
     xxxxxlarge: number;
     xxxxlarge: number;
@@ -9,12 +14,6 @@ declare const fontSizes: {
     small: number;
     xsmall: number;
 };
-declare const fontWeights: {
-    light: number;
-    regular: number;
-    semiBold: number;
-    bold: number;
-};
 declare const lineHeights: {
     xxxxxlarge: number;
     xxxxlarge: number;
@@ -26,4 +25,4 @@ declare const lineHeights: {
     small: number;
     xsmall: number;
 };
-export { fontSizes, fontWeights, lineHeights };
+export { fonts, fontSizes, lineHeights };