@teamsparta/design-system
v2.8.0
Published
팀스파르타의 디자인 시스템
Downloads
892
Readme
추가/변경 후 배포 방법
배포는 자동화되어 있습니다.
- pnpm changeset
- 추가 및 변경한 내용을 토대로 major, minor, patch 버전 업데이트
- 패치 변경 시:
1.0.0
->1.0.1
(ex. components/icon/foundation/font 등 무엇을 수정했을 때) - 마이너 변경 시:
1.0.0
->1.1.0
(ex. components/icon/foundation/font 등 무엇을 추가 및 삭제 했을 때) - 메이저 변경 시:
1.0.0
->2.0.0
(ex. 시스템 변경 시)
- 패치 변경 시:
- git push
- pr review -> merge
- main에 merge된 후 changeset pr 생성
- 해당 pr 다시 main에 merge 하면 자동으로 배포
사용설명서
Foundation/Color
- 변수명
- 흑백:
neutralDay
- 다크모드 흑백:
neutralDark
- 메인:
scc
- 창:
chang
- 항해99:
hanghae
- 인텔리픽:
intellipick
- 기타:
additional
- 사용방법 (auto complete)
color: ${scc.red100};
Font
- 변수명 예시
- Figma Ag: Web/Header1_700 =>
wHeader1
- Figma Ag: Mobile/Title1_600 =>
mTitle1
- 사용방법 (auto complete/import)
import { scc, wTitle1 } from "@teamsparta/design-system";
export const Title = styled.h1`
${wTitle1};
color: ${scc.red100};
`
Icon
- 변수명 예시
- v1
- Figma Ag: arrow_drop_down, line, 16:
<ArrowDropDownLine size={16} color={"red"}/>
- Figma Ag: close_circle_fill, 20 =>
<CloseCircleFill size={20} primaryColor={"red"} secondaryColor={"blue"}/>
- Figma Ag: arrow_drop_down, line, 16:
- v2
- Figma 상 명시된 Icon Props들 중 ${Category}${Name}의 조합
- 위 이미지에서의 아이콘 이름은
ArrowChevronRightCircle
- Props
- v1
- 아이콘 이름에
line
이 있는 경우:color
- 아이콘 이름에
fill
이 있는 경우:primaryColor & secondaryColor
- 색 관련 props 작성 안할 시, 기본색 (neutralDay.gray100) 제공
- 아이콘 이름에
- v2
- Figma에서 Style 존재 시, style ('line' | 'fill') & size (16 | 20 | 24) 필수
- Figma에서 Style 없을 시, size 필수
- color props 작성 안할 시, 기본색 (neutralDay.gray90) 제공
- 사용 방법 (auto complete)
export const LoginPage = () => {
return (
<S.Wrapper>
<ArrowChevronRightCircle size={16} style={"line"} color={"red"}/>
</S.Wrapper>
)
}