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: { typography: {
display1: { fontSize: '5.625rem', lineHeight: '6.125rem' }, display1: {
display2: { fontSize: '3.5625rem', lineHeight: '4rem' }, fontSize: '5.625rem',
h1: { fontSize: '2.875rem', lineHeight: '3.25rem' }, fontWeight: 'normal',
h2: { fontSize: '2.25rem', lineHeight: '2.75rem' }, lineHeight: '6.125rem',
h3: { fontSize: '2rem', lineHeight: '2.5rem' }, },
h4: { fontSize: '1.75rem', lineHeight: '2.25rem' }, display2: {
h5: { fontSize: '1.5rem', lineHeight: '2rem' }, fontSize: '3.5625rem',
h6: { fontSize: '1.375rem', lineHeight: '1.75rem' }, fontWeight: 'normal',
subtitle1: { fontSize: '1rem', lineHeight: '1.5rem' }, lineHeight: '4rem',
subtitle2: { fontSize: '0.875rem', lineHeight: '1.25rem' }, },
body1: { fontSize: '1rem', lineHeight: '1.5rem' }, h1: { fontSize: '2.875rem', fontWeight: 'normal', lineHeight: '3.25rem' },
body2: { fontSize: '0.875rem', lineHeight: '1.25rem' }, h2: { fontSize: '2.25rem', fontWeight: 'normal', lineHeight: '2.75rem' },
body3: { fontSize: '0.75rem', lineHeight: '1rem' }, h3: { fontSize: '2rem', fontWeight: 'normal', lineHeight: '2.5rem' },
label1: { fontSize: '0.875rem', lineHeight: '1.25rem' }, h4: { fontSize: '1.75rem', fontWeight: 'normal', lineHeight: '2.25rem' },
label2: { fontSize: '0.75rem', lineHeight: '1rem' }, 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: { typographyGlobal: {
genericFontFamily: 'sans-serif', 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 = [ export const THEME_TYPOGRAPHY_PROPERTIES = [
'fontSize', 'fontSize',
'fontWeight',
'lineHeight', 'lineHeight',
] as TypographyProperties[] ] 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< export type TypographyStyles = Pick<
CSSProperties, CSSProperties,
'fontSize' | 'lineHeight' 'fontSize' | 'fontWeight' | 'lineHeight'
> & { fontFamily?: string } > & { fontFamily?: string }
export type GlobalTypographyStyles = { export type GlobalTypographyStyles = {
genericFontFamily: TypographyGenericFontFamily genericFontFamily: TypographyGenericFontFamily

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

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