@seongtaek/design-system v1.4.4

사용설명서

Color

1. 변수명

• 흑백: grayScale
• 메인: sparta
• 내일배움단: nbd
• 창: chang
• 항해99: hanghae
• 인텔리픽: intellipick
• SW캠프: swc

2. 사용방법 (auto import)

color: ${sparta.red100};

Font

1. 변수명 예시

• Figma Ag: Web/Header1_700 => wHeader1
• Figma Ag: Mobile/Title1_600 => mTitle1

2. 사용방법 (auto import)

import {wTitle1} from "./font.style";
import {sparta} from "./sparta";

export const Title = styled.h1`
  ${wTitle1};
  color: ${sparta.red100};
`

Icon

1. 변수명 예시

• Figma Ag: arrow_drop_down, line, 16 => ArrowDropDownLine16
• Figma Ag: close_circle_fill, 16 => CloseCircleFill16

2. Props

• 배경색이 있는 경우: fillColor
• 배경색과 선색이 있는 경우: fillColor & strokeColor
• 둘 다 없고 기본색만 있는 경우: color
• props 작성 안할 시, 기본색 제공

export type Icon = {
  color?: string;
  fillColor?: string;
  strokeColor?: string;
};

3. 사용방법 (auto import)

export const LoginPage = () => {
  return (
    <S.Wrapper>
      <ArrowDropDownLine16 color={"red"}/>
    </S.Wrapper>
  )
}