@hero-design/rn 8.33.1 → 8.34.0

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -24,18 +24,15 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#de350b",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -43,10 +40,8 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="filled"
   >
     DANGER
@@ -78,18 +73,15 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#4568fb",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -97,10 +89,8 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="filled"
   >
     INFO
@@ -132,18 +122,15 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -151,10 +138,8 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="filled"
   >
     PRIMARY
@@ -186,18 +171,15 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffa234",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -205,10 +187,8 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="filled"
   >
     WARNING
@@ -240,18 +220,15 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#de350b",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -259,10 +236,8 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="outlined"
   >
     DANGER
@@ -294,18 +269,15 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#4568fb",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -313,10 +285,8 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="outlined"
   >
     INFO
@@ -348,18 +318,15 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -367,10 +334,8 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="outlined"
   >
     PRIMARY
@@ -402,18 +367,15 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#017d6d",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -421,10 +383,8 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="outlined"
   >
     SUCCESS
@@ -456,18 +416,15 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffa234",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -475,10 +432,8 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
+    themeFontWeight="semi-bold"
     themeIntent="body"
-    themeTypeface="neutral"
     themeVariant="outlined"
   >
     WARNING
@@ -512,16 +467,15 @@ exports[`Tag renders correctly with custom content 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Custom Content
   </Text>

package/src/components/Tag/index.tsx

@@ -42,7 +42,11 @@ const Tag = ({
       testID={testID}
     >
       {typeof content === 'string' ? (
-        <StyledText themeIntent={intent} themeVariant={variant}>
+        <StyledText
+          themeIntent={intent}
+          themeVariant={variant}
+          fontWeight="semi-bold"
+        >
           {content}
         </StyledText>
       ) : (

package/src/components/TextInput/StyledTextInput.tsx

@@ -19,19 +19,17 @@ const StyledLabelContainer = styled(View)(({ theme }) => ({
   zIndex: 1,
   paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
 }));
-const StyledLabel = styled(Typography.Text)<{
+const StyledLabel = styled(Typography.Caption)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.labels[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.topLabel,
   lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
 }));
 
-const StyledAsteriskLabel = styled(Typography.Text)<{
+const StyledAsteriskLabel = styled(Typography.Caption)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.asterisks[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.topLabel,
   lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
 }));
 
@@ -44,22 +42,20 @@ const StyledLabelContainerInsideTextInput = styled(View)<{
   ...StyleSheet.absoluteFillObject,
 }));
 
-const StyledLabelInsideTextInput = styled(Typography.Text)<{
+const StyledLabelInsideTextInput = styled(Typography.Body)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   textAlignVertical: 'center',
   alignContent: 'center',
-  fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
   alignItems: 'center',
   color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
   marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
 }));
 
-const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
+const StyledAsteriskLabelInsideTextInput = styled(Typography.Body)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.asterisks[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
 }));
 
 const StyledErrorContainer = styled(View)(({ theme }) => ({
@@ -70,17 +66,15 @@ const StyledErrorContainer = styled(View)(({ theme }) => ({
   flexGrow: 4,
 }));
 
-const StyledError = styled(Typography.Text)(({ theme }) => ({
+const StyledError = styled(Typography.Caption)(({ theme }) => ({
   color: theme.__hd__.textInput.colors.error,
-  fontSize: theme.__hd__.textInput.fontSizes.error,
   marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
 }));
 
-const StyledMaxLengthMessage = styled(Typography.Text)<{
+const StyledMaxLengthMessage = styled(Typography.Caption)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.maxLength,
   marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
   alignSelf: 'flex-end',
   flex: 1,
@@ -88,10 +82,7 @@ const StyledMaxLengthMessage = styled(Typography.Text)<{
   textAlign: 'right',
 }));
 
-const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
-  fontSize: theme.__hd__.textInput.fontSizes.error,
-}));
-
+const StyledHelperText = Typography.Caption;
 const StyledTextInput = styled(TextInput)<{ themeVariant: Variant }>(
   ({ theme, themeVariant }) => ({
     textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
@@ -143,6 +134,7 @@ const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
   paddingLeft:
     theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
   minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+  paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop,
 }));
 
 const StyledErrorAndMaxLengthContainer = styled(View)(() => ({