import { Canvas, Meta } from '@storybook/addon-docs/blocks';

import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import ColorSystem from './ColorSystem';

import * as ColorsStories from './Colors.stories';
import * as TokenInComponentStories from './Token.inComponent.stories';

<Meta of={ColorsStories} />

# Color System & Token

> _For the color documents, we provide both Korean and English to ensure understanding of our unique color system and tokens._  
> _시스템의 이해를 돕기 위해 Color System 문서만 한국어와 영어를 병기하여 설명합니다._

The Lunit Design System defines a color palette to ensure explicit and consistent color usage.  
Pre-configured palettes are provided in token form, allowing for easy application within components or pages.  
_루닛 디자인 시스템은 명시적이고 일관된 색상 사용을 보장하기 위해 색상 팔레트를 정의한다.  
사전 구성된 팔레트는 토큰 형태로 제공되므로 컴포넌트나 페이지 단에서 쉽게 적용 가능하다._

## Structure of Color system

The color system in Lunit is structured as follows.  
_루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._

<ColorSystem />

### Global Palette Color

> [Browse all the Global Palette Colors(link)](?path=/story/foundation-colors--global-colors)

- A collection of colors organized by type and shade to be used within the AK design system.  
  _루닛 디자인 시스템 안에서 사용할 색상을 종류와 밝기로 분류해 구성한 색상의 모음._
- The components and foundations provided by the lunit design system only utilize colors from this palette.  
  _루닛 디자인 시스템에서 제공하는 컴포넌트와 파운데이션은 이 팔레트의 색상만을 이용하고 있다._
- Each item in the Global Palette corresponds 1:1 with a color code (hex value).  
  _Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다._
- Color Tokens are linked to these values in the Global Palette.  
  _Color Token은 이 Global Paltte 값과 연결된다._

### Color Token

> [Browse all the Core tokens(link)](?path=/story/foundation-colors--core-tokens) <br /> > [Browse all the Component tokens(link)](?path=/story/foundation-colors--component-tokens)

- **Core Token**: These are color tokens universally used in UI elements, including background and text colors.  
  _**Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰_
- **Component Token**: These are color tokens specifically utilized for certain components, such as buttons and chips.  
  _**Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰_
- It is recommended to use **Color Tokens** instead of color codes or Global Colors.  
  _색상 코드나 Global Color 대신 **Color Token** 을 이용하는 것 을 권장한다._
- Color Tokens have colors for four themes (Light1, 2, Dark1, 2). Themes can be set using the className of the component itself or the parent element surrounding it.  
  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있다. 테마는 해당 컴포넌트, 혹은 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className을 이용해 설정할 수 있다._

## How to set themes

- Types of themes: light1, light2, dark1, dark2  
  _테마의 종류 : light1, light2, dark1, dark2_
- The method to set themes : To assign a theme, add the theme name to the className of either the component you want to style or its surrounding parent element.  
  _테마를 설정하는 방법 : 테마를 부여하고 싶은 컴포넌트나 해당 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className에 테마 이름을 추가한다._
  - ex)
  ```jsx
    <div className='light1'>
      <Button
        sx={{
          backgroundColor: (theme) =>
            theme.palette.lunit_token.component.btn_primary_bg // light1 theme color
        }}
      />
    </div>
    <div className='dark2'>
      <Button
        sx={{
          backgroundColor: (theme) =>
            theme.palette.lunit_token.component.btn_primary_bg // dark2 theme color
        }}
      />
    </div>
  ```
- If no theme is set, Color Tokens default to the Dark1 theme.  
  _테마를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다._
- When themes are nested, Color Tokens follow the theme set at the closest level.  
  _테마 설정이 중첩되었을 때 Color Token은 가장 가까운 위치에서 설정한 테마를 따른다._
  - ex)
  ```jsx
  <div className="light1">
    <div className="dark1">
      <Button
        sx={{
          backgroundColor: (theme) => theme.palette.lunit_token.component.btn_primary_bg,
          // Since the closest theme set is dark1,
          // the color of btn_primary_bg here will be applied as the dark1 theme color.
          // 가장 가까운 곳에서 설정된 테마가 dark1이기 때문에, 이 곳의 btn_primary_bg 색상은 dark1 테마 색상이 적용됨
        }}
      />
    </div>
  </div>
  ```

## Usage

The components in the Lunit design system are already developed using Color Tokens. If no custom styling is needed, simply set the theme to be used in the component.
Color Tokens are implemented based on the MUI theme, so the usage is similar to utilizing the MUI theme.  
_루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트에서 사용할 테마만 설정하면 된다._  
_Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다._

### With Styled Components

<Canvas of={TokenInComponentStories.InComponentWithStyled} sourceState="none" />

```jsx
const StyledTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputBase-root': {
    backgroundColor: theme.palette.lunit_token.component.textfield_bg,
    color: theme.palette.lunit_token.core.text_normal,
    '& .MuiInputBase-input': {
      padding: '8px 16px',
    },
    '&.Mui-focused fieldset': {
      borderColor: theme.palette.lunit_token.core.status_focused,
    },
  },
}));

const InComponentWithStyled = () => {
  return (
    <>
      <div className="light1">
        <StyledTextField placeholder="Styled Text Field" />
      </div>
      <div className="dark1">
        <StyledTextField placeholder="Styled Text Field" />
      </div>
    </>
  );
};
```

### With sx prop

<Canvas of={TokenInComponentStories.InComponentWithSx} sourceState="none" />

```jsx
const InComponentWithSx = () => {
  return (
    <>
      <div className="light1">
        <TextField
          placeholder="Text Field with SX"
          sx={{
            '& .MuiInputBase-root': {
              backgroundColor: (theme) => theme.palette.lunit_token.component.textfield_bg,
              color: (theme) => theme.palette.lunit_token.core.text_normal,
              '& .MuiInputBase-input': {
                padding: '8px 16px',
              },
              '&.Mui-focused fieldset': {
                borderColor: (theme) => theme.palette.lunit_token.core.status_focused,
              },
            },
          }}
        />
        <Box sx={{ width: 150, height: 50, bgcolor: '#DFDFE2', mt: 3 }}>
          Hello!
          <Box
            sx={{
              backgroundColor: (theme) => theme.palette.lunit_token.component.alert_info_bg,
              color: (theme) => theme.palette.lunit_token.component.alert_info_border,
              boxShadow: (theme) => `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
              width: 300,
              height: 80,
            }}
          >
            - with alpha value
          </Box>
        </Box>
      </div>
    </>
  );
};
```

### With useTheme for inline styling

<Canvas of={TokenInComponentStories.InComponentWithInlineStyle} sourceState="none" />

```jsx
const InComponentWithInlineStyle = () => {
  const theme = useTheme();

  return (
    <>
      <div className="light1">
        <TextField
          placeholder="Inline Styled Text Field"
          style={{
            backgroundColor: theme.palette.lunit_token.component.textfield_bg,
          }}
        />
      </div>
      <div className="dark1">
        <TextField
          placeholder="Inline Styled Text Field"
          style={{
            backgroundColor: theme.palette.lunit_token.component.textfield_bg,
          }}
        />
      </div>
    </>
  );
};
```

## Reference

- [Lunit Design System Color Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?type=design&node-id=14801-186914&mode=design&t=unSsZRlRhL3LrTRm-0)

## Support

- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
- Slack: #tf_design_system