search

2-1. Primary & Secondary Colors

똑똑한 개발자 디자인 시스템에 의해 설정되어있는 기본 컬러 값들을 제외하고 Primary, Secondary에 대한 헥스 코드(Hex Color Code)만 프로젝트 컬러에 맞게 설정해주면 됩니다.

getColorSchema 함수에 Target Color를 인자로 전달하면 해당 컬러를 기준으로 [50,100,200,300,400,500,600,700,800,900] Key 값을 가지는 Color schema 형태로 반환됩니다.

디자인에 따라 생성된 Color가 다를시에는 정적으로 핵스코드(Hex Color Code)를 넣어주세요. (Pro Tips - Case 1)

hashtag
getColorSchema?

Target color를 기준으로 밝기를 조절하여 Chakra UI의 Color schema 형태로 반환하는 함수입니다.

@param color - 대상 색상

@param options.keys — 가져올 색상을 결정합니다. Default value: [50, 100, ...900].

@param options.percent — 기본컬러 부터(500)의 색상 밝기 간격을 결정합니다.

eg) percent 가 5% 일때 400 은 밝기가 500 에서 +5% 된 색상이고, 300 컬러는 +10% 색상입니다.

  // src/styles/theme/foundations/colors.ts
  const Light = {
    primary: getColorSchema('#4850FF'),
    secondary: getColorSchema('#7B61FF'),
    warning: getColorSchema('#FF6060'),
    success: getColorSchema('#4850FF'),
    gray: {
      50: '#FAFAFA',
      100: '#F7F7F7',
      200: '#F2F3F4',
      300: '#E5E7EC',
      400: '#D1D4DD',
      500: '#B8BCC8',
      600: '#8C919F',
      700: '#757983',
      800: '#4A4D55',
      900: '#292A2E',
    },
    black: '#1A1A1A',
    white: '#FFFFFF',
    background: {
      primary: '#FFFFFF',
      secondary: '#FAFAFA',
      tertiary: '#F0F0F0',
    },
    modal: '#FFFFFF',
  };

PreviousColor Setting

Last updated