typographyStyle

Typography 스타일을 유틸리티로 제공해주는 함수입니다.

Introduce

Typography 컴포넌트를 스타일 유틸리티 함수로 제공합니다.

typographyStyle(variant, weight) 로 사용합니다.

Usage

Sx prop

import { Box, css, typographyStyle } from '@wanteddev/wds';

import type { Theme } from '@wanteddev/wds';

const Component = () => {
  return (
    <Box
      sx={typographyStyle('title1', 'bold')}
    />
  )
}

Css function

import { css, typographyStyle } from '@wanteddev/wds';

import type { Theme } from '@wanteddev/wds';

export const exampleStyle = (theme: Theme) => css`
  ${typographyStyle('title1', 'bold')}
`;

Variants

아래 variant를 사용할 수 있습니다.

명칭	크기	행간	자간
Display 1	56px	72px (1.286)	-0.0319em
Display 2	40px	52px (1.3)	-0.0282em
Display 3	36px	48px (1.334)	-0.027em
Title 1	32px	44px (1.375)	-0.0253em
Title 2	28px	38px (1.358)	-0.0236em
Title 3	24px	32px (1.334)	-0.023em
Heading 1	22px	30px (1.364)	-0.0194em
Heading 2	20px	28px (1.4)	-0.012em
Headline 1	18px	26px (1.444)	-0.002em
Headline 2	17px	26px (1.412)	0em
Body 1/Normal	16px	24px (1.5)	0.0057em
Body 1/Reading	16px	26px (1.625)	0.0057em
Body 2/Normal	15px	22px (1.467)	0.0096em
Body 2/Reading	15px	24px (1.6)	0.0096em
Label 1/Normal	14px	20px (1.429)	0.0145em
Label 1/Reading	14px	22px (1.571)	0.0145em
Label 2	13px	18px (1.385)	0.0194em
Caption 1	12px	16px (1.334)	0.0252em
Caption 2	11px	14px (1.273)	0.0311em