Color

Color System은 색상을 체계적으로 표현하고 관리하는 방법입니다.
Color System에는 Primary, Grayscale, Meaningful color로 나눠져 있습니다.

Primary
Grayscale
Meaningful

 
    colors: {
        transparent: "transparent",
        current: "currentColor",
        white: "#ffffff",
        Primary: {
          5: "#F5F8FF",
          10: "#E5EEFF",
          20: "#CCDEFF",
          30: "#B2CDFF",
          40: "#99BDFF",
          50: "#7FACFF",
          60: "#669BFF",
          70: "#4C8BFF",
          80: "#337AFF",
          90: "#196AFF",
          100: "#0059FF",
        },
        Grayscale: {
          5: "#F3F3F3",
          10: "#E6E6E6",
          20: "#CCCCCC",
          30: "#B3B3B3",
          40: "#999999",
          50: "#808080",
          60: "#666666",
          70: "#4D4D4D",
          80: "#333333",
          90: "#1A1A1A",
          100: "#030303",
        },
        Meaningful: {
          red: "#FF0000",
          green: "#07A320",
        },
      },

Usage example

text색상 변경 예시
Meaningful 색상 사용시에는 정의 되어있는 red, green으로만 사용 가능합니다.

 
    <Text size={"base"} weight={"medium"} className="text-Grayscale-100" >
      content
    </Text>
 
    <Text size={"base"} weight={"medium"} className="text-Meaningful-red" >
      content
    </Text>

background색상 변경 예시
className에 Colors를 추가하여 사용

 
    <div className="bg-Primary-100" >
      <Text size={"base"} weight={"medium"} className="text-Meaningful-red" >
        content
      </Text>
    </div>

Installation Icon