Design: 디자인시스템(컬러&폰트)

[Eugene-A-01]

개요

• 디자인 시스템 중 폰트, 컬러hex값 적용해두었습니다.

스크린샷

리뷰어에게

• 폰트, 컬러 디자인시스템 적용해놓았습니다.
• src/styles 아래 Font.css.ts와 Theme.css.ts 파일에 적용해두었습니다.

사용하실때는 옛날과 같은 방식으로

• 색상은 : import { vars } from '@/styles/__theme.css'; 한 후 vars.color.skyblue
• 폰트는 : import * as fonts from '@/styles/__font.css'; 한 후 fonts.header 이런 식으로 사용하시면 됩니다.

그리고 색상의 경우, 피그마와 일치하는 색이 없을 수도 있습니다.

1. 비슷한 색이 있다면, Color.css.ts에 있는 색을 쓴다. (연한 하늘색이 이미 있네? hex값은 다르지만 color.css.ts에 이미 있는걸 쓰자.)
2. 아예 비슷한 색이 없다면, Color.css.ts에 색을 추가한 후 사용한다. (오잉 노란색은 없는데?? 추가해서 쓰자.)

ver2.0까지 사용하던 폰트파일과 색상파일은 __Color.css.ts, __Font.css.ts파일로 재명명 해두었으니 더이상 사용하지 말아주세요~!

[vercel]

@Eugene-A-01 is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Nahyun-Kang]

유진님 디자인 시스템 구축 감사합니다~🥰 LGTM!