@teamsparta/design-system v2.6.1
추가/변경 후 배포 방법
- 추가 및 변경
- package.json version 올리기
- 패치 변경 시:
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 branch 이동
- npm run build
- npm publish
사용설명서
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>
)
}
5 days ago
6 days ago
15 days ago
22 days ago
23 days ago
26 days ago
26 days ago
26 days ago
29 days ago
30 days ago
30 days ago
30 days ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
7 months ago
8 months ago
9 months ago
9 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago