fix lineHeight

intermine · Nov 8, 2021 · cbbd177 · cbbd177
1 parent f7a5943
commit cbbd177
Show file tree

Hide file tree

Showing 15 changed files with 15 additions and 5 deletions.
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
@@ -397,6 +397,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
                                 return {
                                     color: getColorForComponent({ theme }),
                                     marginTop: '0.25rem',
+                                    lineHeight: 1.2,
                                     ...getThemeCSSObject(csx.message, theme)
                                 }
                             }

diff --git a/src/button-base/button-base.tsx b/src/button-base/button-base.tsx
@@ -296,7 +296,6 @@ const ButtonBaseRoot = createStyledComponent<'button', ButtonBaseCommonProps>(
             display: 'inline-flex',
             fill: calculatedColor,
             justifyContent: 'center',
-            margin: 0,
             outline: 0,
             position: 'relative',
             textDecoration: 'none',

diff --git a/src/button/button.tsx b/src/button/button.tsx
@@ -230,6 +230,7 @@ const ButtonRoot = createStyledComponent<
         transition: '0.130s',
         ...getColor(),
         ...getFontProperties(),
+        lineHeight: 1,
         fontWeight: 700,
         textAlign: 'center',
         textTransform: isTextUppercase ? 'uppercase' : undefined,

diff --git a/src/card-action/card-action.tsx b/src/card-action/card-action.tsx
@@ -43,6 +43,8 @@ const CardActionRoot = createStyledComponent<'div', CardActionProps>(
         return {
             padding: '1rem 0.5rem',
             ...body,
+            lineHeight: 1.3,
+
             ...(isExtendStyleFromThemeVars &&
                 themeVars.cardAction(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/card-content/card-content.tsx b/src/card-content/card-content.tsx
@@ -51,7 +51,7 @@ const CardContentRoot = createStyledComponent<'div', CardContentProps>(
             flex: '1',
             padding: '1.2rem',
             ...body,
-            lineHeight: 1.5,
+            lineHeight: 1.3,
             ...(isExtendStyleFromThemeVars &&
                 themeVars.cardContent(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/card-header/card-header.tsx b/src/card-header/card-header.tsx
@@ -51,6 +51,7 @@ const CardHeaderRoot = createStyledComponent<'div', CardHeaderProps>(
             display: 'flex',
             padding: '1rem 1.2rem',
             ...h4,
+            lineHeight: 1.5,
             ...(isExtendStyleFromThemeVars &&
                 themeVars.cardHeader(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/card/card.tsx b/src/card/card.tsx
@@ -96,6 +96,7 @@ const CardRoot = createStyledComponent<'div', CardProps>(
             flexDirection: 'column',
             '&:hover': getHoverProperties(),
             ...body,
+            lineHeight: 1.3,
             ...(isExtendStyleFromThemeVars &&
                 themeVars.card(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -190,6 +190,7 @@ const InputRoot = createStyledComponent<typeof InputBase, InputProps>(
             transition: '0.13s',
             width: '100%',
             ...getTypographyProperties(),
+            lineHeight: 1.2,
             ...getBorderRadius(),
             ...(isExtendStyleFromThemeVars &&
                 themeVars.input(themePropsForThemeVarFn, props)),

diff --git a/src/label/label.tsx b/src/label/label.tsx
@@ -47,6 +47,7 @@ const LabelRoot = createStyledComponent<'label', LabelProps>(
             color: _color,
             fill: _color,
             ...body,
+            lineHeight: 1.2,
             ...(isExtendStyleFromThemeVars &&
                 themeVars.label(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/list-heading/list-heading.tsx b/src/list-heading/list-heading.tsx
@@ -85,6 +85,7 @@ const ListHeadingRoot = createStyledComponent<'li', ListHeadingProps>(
             top: 0,
             zIndex: 1,
             ...(headingType === 'sub' ? caption : title),
+            lineHeight: 1.2,
             ...(isExtendStyleFromThemeVars &&
                 themeVars.listHeading(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/list-item/list-item.tsx b/src/list-item/list-item.tsx
@@ -106,6 +106,7 @@ const ListItemRoot = createStyledComponent<typeof Button, ListItemProps>(
             padding: getPadding(),
             textTransform: 'none',
             ...body,
+            lineHeight: 1.2,
             ...(isExtendStyleFromThemeVars &&
                 themeVars.listItem(themePropsForThemeVarFn, props)),
             ...getThemeCSSObject(csx.root, theme)

diff --git a/src/modal/modal.stories.tsx b/src/modal/modal.stories.tsx
@@ -39,7 +39,6 @@ const Template: Story = (args) => {
                         This is a modal
                     </Typography>
                     <Button
-                        csx
                         onClick={toggleModal}
                         color="error"
                         variant="outlined"

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -90,7 +90,8 @@ const buildStyle = <
 
 const useStyles = createStyle(({ typography }) => ({
     root: {
-        ...typography.body
+        ...typography.body,
+        lineHeight: 1.2
     }
 }))
 

diff --git a/src/stepper/stepper.tsx b/src/stepper/stepper.tsx
@@ -271,6 +271,7 @@ const DescriptionContainer = createStyledComponent<
                 alignment === 'vt' && !isLast
                     ? `0.0625rem solid ${_border}`
                     : '0',
+            lineHeight: 1.2,
             marginLeft: alignment === 'vt' ? '1.5rem' : '0',
             paddingLeft: alignment === 'vt' ? '2.5rem' : '0',
             textAlign: alignment === 'hr' ? 'center' : undefined,

diff --git a/src/styles/typography/constants.ts b/src/styles/typography/constants.ts
@@ -33,7 +33,7 @@ export const defaultFontFamily = 'Arial'
 export const defaultBoldFontWeight = 700
 export const defaultRegularFontWeight = 500
 export const defaultLightFontWeight = 100
-export const defaultLineHeight = 1
+export const defaultLineHeight = 1.5
 
 export const defaultThemeTypography = {
     h1: fontMixin(