# 2-1. Primary & Secondary Colors

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

<mark style="color:green;">getColorSchema 함수에 Target Color를 인자로 전달하면 해당 컬러를 기준으로 \[50,100,200,300,400,500,600,700,800,900] Key 값을 가지는 Color schema 형태로 반환됩니다.</mark>&#x20;

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

#### <mark style="background-color:orange;">getColorSchema?</mark>

> **Target color**를 기준으로 밝기를 조절하여 Chakra UI의 Color schema 형태로 반환하는 함수입니다.
>
> <mark style="color:orange;">@param color</mark> - 대상 색상
>
> <mark style="color:orange;">@param options.keys</mark> — 가져올 색상을 결정합니다. Default value: \[50, 100, ...900].
>
> <mark style="color:orange;">@param options.percent</mark> — 기본컬러 부터(500)의 색상 밝기 간격을 결정합니다.
>
> eg) percent 가 5% 일때 400 은 밝기가 500 에서 +5% 된 색상이고, 300 컬러는 +10% 색상입니다.

{% tabs %}
{% tab title="Light" %}

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

{% endtab %}

{% tab title="Dark" %}

```javascript

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

{% endtab %}

{% tab title="Brand" %}

```javascript

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

{% endtab %}

{% tab title="Dim" %} <mark style="background-color:orange;">딤(dim)/딤드(dimmed)</mark>

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

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

```

{% endtab %}

{% tab title="Mode" %} <mark style="background-color:orange;">Light / Dark Mode</mark>

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

<pre class="language-javascript"><code class="lang-javascript"><strong>const mode = {
</strong>    light: Light,
    dark: Dark,
};
</code></pre>

{% endtab %}

{% tab title="Use Case" %}
컴포넌트의 색상을 Color Scheme 로 관리 할 수 있습니다.

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

{% endtab %}
{% endtabs %}