Merge pull request #165 from lunit-io/DS-155-Docs-Color

[DS-155] Color System Docs mdx 추가
lunit-io · Mar 25, 2024 · 2c7da04 · 2c7da04
2 parents 3cf2e1c + 603cb70
commit 2c7da04
Show file tree

Hide file tree

Showing 2 changed files with 271 additions and 0 deletions.
diff --git a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { Box, Grid, styled } from "@mui/material";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+
+const ColorBox = styled(Box)(({ theme }) => ({
+  textAlign: "center",
+  padding: "4px 0",
+  fontSize: "14px !important",
+  marginTop: "5px !important",
+}));
+
+const BlockBox = styled(Box)(({ theme }) => ({
+  backgroundColor: "#d7d3d3",
+  textAlign: "center",
+  display: "flex",
+  flexDirection: "column",
+  flex: "auto",
+  padding: "10px",
+}));
+
+const ColorSystem = () => {
+  return (
+    <Box pb={10}>
+      <Grid container spacing={2}>
+        <Grid
+          item
+          xs={4}
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <BlockBox>
+            <Box>색상 코드 값</Box>
+            <ColorBox bgcolor="#FFFFFF">#FFFFFF</ColorBox>
+            <ColorBox bgcolor="#00C9EA">#00C9EA</ColorBox>
+            <ColorBox bgcolor="#FFB3B8">#FFB3B8</ColorBox>
+          </BlockBox>
+          <Box
+            sx={{
+              width: "20px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <ArrowForwardIcon />
+          </Box>
+        </Grid>
+        <Grid
+          item
+          xs={4}
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <BlockBox>
+            <Box>Global Palette</Box>
+            <ColorBox bgcolor="#FFFFFF">grey_0</ColorBox>
+            <ColorBox bgcolor="#00C9EA">lunit_teal_40</ColorBox>
+            <ColorBox bgcolor="#FFB3B8">red_20</ColorBox>
+          </BlockBox>
+          <Box
+            sx={{
+              width: "20px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <ArrowForwardIcon />
+          </Box>
+        </Grid>
+        <Grid item xs={4}>
+          <BlockBox>
+            <Box>Color Token</Box>
+            <ColorBox bgcolor="#FFFFFF">bg_01</ColorBox>
+            <ColorBox bgcolor="#00C9EA">btn_primary_border</ColorBox>
+            <ColorBox bgcolor="#FFB3B8">chip_error_bg</ColorBox>
+          </BlockBox>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default ColorSystem;
diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx
@@ -0,0 +1,185 @@
+import { Canvas, Meta } from "@storybook/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
+
+> 루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다.
+
+## Color System의 구조
+루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다.<br />
+**색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary)
+
+<ColorSystem />
+
+### Global Palette Color
+
+> [Global Palette Color의 종류(link)](?path=/story/foundation-colors--global-colors)
+- 루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음.
+- 루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다.
+- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다.
+- Color Token은 이 Global Paltte 값과 연결된다.
+
+### Color Token
+
+> [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens) <br />
+> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens)
+
+- **Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰
+- **Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰
+- 색상 코드나 Global Color 대신 _Color Token 을 이용하는 것_ 을 권장한다.
+- Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다.
+
+## Color Token에 테마를 부여하는 Base Wrapper
+- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다.
+- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다.
+  - ex) `<div className='light1'>`, `<Box className='dark2'>`
+- 테마의 종류 : light1, light2, dark1, dark2
+- Color token은 Base Wrapper에서 설정한 테마에 해당하는 색이 적용된다.
+- Base Wrapper를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다.
+- Base Wrapper가 중첩되었을 때 Color Token은 _바로 상위 부모_ Wrapper의 테마를 따른다.
+    - ex)        
+      ```jsx
+      <div className='light1'>
+        <div className='dark1'>
+          <Button 
+            sx={{
+              backgroundColor: (theme) => 
+                theme.palette.lunit_token.component.btn_primary_bg
+                // 바로 상위 부모의 테마가 dark1이기 때문에, 이 곳의 btn_primary_bg 색상은 dark1 테마 색상이 적용됨
+            }}
+          /> 
+        </div>
+      </div>
+      ```
+
+
+## 토큰 사용법
+루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다.  
+Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다.
+
+### Styled 내에서 사용법
+
+<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.focused,
+      },
+    },
+  }));
+
+const InComponentWithStyled = () => {
+  return (
+    <>
+      <div className='light1'>
+        <StyledTextField placeholder="Styled Text Field" />
+      </div>
+      <div className="dark1">
+        <StyledTextField placeholder="Styled Text Field" />
+      </div>
+    </>
+  );
+};
+```
+
+### sx 내에서 사용법
+<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.focused,
+              },
+            },
+          }}
+        />
+        <Box 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>
+    </>
+  );
+};
+```
+
+### useTheme 이용해 inline style 내에서 사용법
+
+<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