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)

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% 색상입니다.

Light

  // 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',
  };
  

Dark

  const Dark = {
    primary: getColorSchema('#485BFF'),
    secondary: getColorSchema('#755AFF'),
    warning: getColorSchema('#FF6060'),
    success: getColorSchema('#4850FF'),
    gray: {
      50: '#292A2E',
      100: '#313236',
      200: '#39393D',
      300: '#4A4D55',
      400: '#5C606A',
      500: '#757983',
      600: '#8C919F',
      700: '#B8BCC8',
      800: '#D1D4DD',
      900: '#DFE1E7',
    },
    black: '#E5E7EC',
    white: '#232325',
    background: {
      primary: '#FFFFFF',
      secondary: '#FAFAFA',
      tertiary: '#F0F0F0',
    },
    modal: '#FFFFFF',
  };
    

Brand

  const Brand = {
    kakao: {
      500: '#FFDE32',
      600: '#F5D322',
      700: '#EFCC1A',
    },
    naver: {
      500: '#20CF5D',
      600: '#17c554',
      700: '#14bf50',
    },
    facebook: {
      500: '#1877F3',
      600: '#1874eb',
      700: '#146cdf',
    },
    google: {
      500: '#FFFFFF',
      600: '#F5F5F5',
      700: '#EEEEEE',
    },
    apple: {
      500: '#000000',
      600: '#111111',
      700: '#222222',
    },
  };
    

Dim

딤(dim)/딤드(dimmed)

아주 밝지도, 어둡지도 않은 투명 음영 영역으로 웹 표준 컬러 이름입니다. 웹페이지에서 레이어 팝업을 띄울때 배경으로부터 팝업화면을 강조하기 위해 주로 사용됩니다.

const Dim = {
    primary: '#1A1A1A80',
    secondary: '#1A1A1A33',
};

Mode

Light / Dark Mode

앞서 정의한 Light & Dark mode 컬러 셋팅 값이 들어가게 됩니다.

const mode = {
    light: Light,
    dark: Dark,
};

Use Case

컴포넌트의 색상을 Color Scheme 로 관리 할 수 있습니다.

  <Text
    color={'primary.500'}
    _hover={{ color: 'white', bgColor: 'secondary.500' }}
    textStyle={'Text'}
    borderRadius={'sm'}
  >
    Hover me!
  </Text>