acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add fontWeight to typography properties

This commit is contained in:
Hossein Mehrabi 2023-07-17 17:58:58 +03:30
parent 2e1cd5a68b
commit 22804a4e10
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
4 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/lsd-react/src/components/Theme/baseTheme.ts
View File

@ -107,21 +107,41 @@ export const baseTheme: Theme = {
},
},
typography: {
display1: { fontSize: '5.625rem', lineHeight: '6.125rem' },
display2: { fontSize: '3.5625rem', lineHeight: '4rem' },
h1: { fontSize: '2.875rem', lineHeight: '3.25rem' },
h2: { fontSize: '2.25rem', lineHeight: '2.75rem' },
h3: { fontSize: '2rem', lineHeight: '2.5rem' },
h4: { fontSize: '1.75rem', lineHeight: '2.25rem' },
h5: { fontSize: '1.5rem', lineHeight: '2rem' },
h6: { fontSize: '1.375rem', lineHeight: '1.75rem' },
subtitle1: { fontSize: '1rem', lineHeight: '1.5rem' },
subtitle2: { fontSize: '0.875rem', lineHeight: '1.25rem' },
body1: { fontSize: '1rem', lineHeight: '1.5rem' },
body2: { fontSize: '0.875rem', lineHeight: '1.25rem' },
body3: { fontSize: '0.75rem', lineHeight: '1rem' },
label1: { fontSize: '0.875rem', lineHeight: '1.25rem' },
label2: { fontSize: '0.75rem', lineHeight: '1rem' },
display1: {
fontSize: '5.625rem',
fontWeight: 'normal',
lineHeight: '6.125rem',
},
display2: {
fontSize: '3.5625rem',
fontWeight: 'normal',
lineHeight: '4rem',
},
h1: { fontSize: '2.875rem', fontWeight: 'normal', lineHeight: '3.25rem' },
h2: { fontSize: '2.25rem', fontWeight: 'normal', lineHeight: '2.75rem' },
h3: { fontSize: '2rem', fontWeight: 'normal', lineHeight: '2.5rem' },
h4: { fontSize: '1.75rem', fontWeight: 'normal', lineHeight: '2.25rem' },
h5: { fontSize: '1.5rem', fontWeight: 'normal', lineHeight: '2rem' },
h6: { fontSize: '1.375rem', fontWeight: 'normal', lineHeight: '1.75rem' },
subtitle1: { fontSize: '1rem', fontWeight: 'normal', lineHeight: '1.5rem' },
subtitle2: {
fontSize: '0.875rem',
fontWeight: 'normal',
lineHeight: '1.25rem',
},
body1: { fontSize: '1rem', fontWeight: 'normal', lineHeight: '1.5rem' },
body2: {
fontSize: '0.875rem',
fontWeight: 'normal',
lineHeight: '1.25rem',
},
body3: { fontSize: '0.75rem', fontWeight: 'normal', lineHeight: '1rem' },
label1: {
fontSize: '0.875rem',
fontWeight: 'normal',
lineHeight: '1.25rem',
},
label2: { fontSize: '0.75rem', fontWeight: 'normal', lineHeight: '1rem' },
},
typographyGlobal: {
genericFontFamily: 'sans-serif',

1
packages/lsd-react/src/components/Theme/constants.ts
View File

@ -43,6 +43,7 @@ export const THEME_TYPOGRAPHY_ELEMENTS: Partial<
export const THEME_TYPOGRAPHY_PROPERTIES = [
'fontSize',
'fontWeight',
'lineHeight',
] as TypographyProperties[]

2
packages/lsd-react/src/components/Theme/types.ts
View File

@ -25,7 +25,7 @@ export type VariantThemeProperties = keyof Pick<Theme, 'typography'>
export type TypographyStyles = Pick<
CSSProperties,
'fontSize' | 'lineHeight'
'fontSize' | 'fontWeight' | 'lineHeight'
> & { fontFamily?: string }
export type GlobalTypographyStyles = {
genericFontFamily: TypographyGenericFontFamily

4
packages/lsd-react/src/components/Typography/Typography.styles.ts
View File

@ -50,7 +50,7 @@ export const TypographyStyles = css`
(variant) => css`
${selectors(variant)} {
color: rgb(var(--lsd-text-primary));
font-weight: normal;
font-weight: var(--lsd-${variant}-fontWeight);
font-size: var(--lsd-${variant}-fontSize);
line-height: var(--lsd-${variant}-lineHeight);
}
@ -60,7 +60,7 @@ export const TypographyStyles = css`
input {
color: rgb(var(--lsd-text-primary));
font-size: var(--lsd-body1-fontSize);
font-weight: normal;
font-weight: var(--lsd-body1-fontWeight);
}
h1,