🎄디자인 시스템 활용 방법

설정된 디자인 시스템을 tailwindCSS로 활용하는 방법에 관한 Wiki입니다.

Color

• Color는 semantic 안에 light와 dark로 나뉨

Color 용례

• figma : semantic/feedback/negative
  • styled-component : ${({ theme }) => theme.colors?.light["feedback-negative"]}
  • light 객체 안에서 semantic을 없앤 색이름으로 접근

Alpha

• Alpha 값은 그림자색으로 사용됨

Alpha 용례

• figma : alpha/08
  • styled-component : ${({ theme }) => theme.colors?.alpha[8]}

Typography

Typography 용례

• figma : typography/body/2xs
  • styled-component : ${({ theme }) => theme.typography?.body["2xs"]}

Iconography

Iconography 용례

• figma : size : 2xs
  • styled-component : ${({ theme }) => theme.iconSize?.["2xs"]}

Scheme

Gap 용례

• figma : gap/2xl
  • styled-component : ${({ theme }) => theme.gap?.["2xl"]}

Radius 용례

• figma : radius/circle
  • styled-component : ${({ theme }) => theme.radius?.circle}

Stroke 용례

• figma : stroke/none
  • styled-component : ${({ theme }) => theme.stroke?.none}

Opacity 용례

• figma : opacity/08
  • styled-component : ${({ theme }) => theme.opacity?.[8]}

Environment

Shadow 용례

box-shadow : ${({ theme }) => theme.shadow.overlay}

Interaction

hover, active, focus-visible시에 opacity또는 border가 적용됩니다.

Interaction 용례

${({ theme }) => theme.interaction.normal}