docs(color): update contents

lunit-io · Mar 25, 2024 · 603cb70 · 603cb70
1 parent a06fa82
commit 603cb70
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 68 deletions.
diff --git a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
@@ -1,72 +1,82 @@
 import React from "react";
-import { Box, Grid } from "@mui/material";
+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}>
+        <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={{
-              backgroundColor: "#d7d3d3",
-              textAlign: "center",
+              width: "20px",
               display: "flex",
-              flexDirection: "column",
-              padding: "10px",
+              alignItems: "center",
             }}
           >
-            <Box>색상 코드 값</Box>
-            <Box
-              sx={{
-                backgroundColor: "#FFFFFF",
-                textAlign: "center",
-              }}
-            >
-              #FFFFFF
-            </Box>
+            <ArrowForwardIcon />
           </Box>
         </Grid>
-        <Grid item xs={4}>
+        <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={{
-              backgroundColor: "#d7d3d3",
-              textAlign: "center",
+              width: "20px",
               display: "flex",
-              flexDirection: "column",
-              padding: "10px",
+              alignItems: "center",
             }}
           >
-            <Box>Global Palette</Box>
-            <Box
-              sx={{
-                backgroundColor: "#FFFFFF",
-                textAlign: "center",
-              }}
-            >
-              ex) Red10, Blue40
-            </Box>
+            <ArrowForwardIcon />
           </Box>
         </Grid>
         <Grid item xs={4}>
-          <Box
-            sx={{
-              backgroundColor: "#d7d3d3",
-              textAlign: "center",
-              display: "flex",
-              flexDirection: "column",
-              padding: "10px",
-            }}
-          >
+          <BlockBox>
             <Box>Color Token</Box>
-            <Box
-              sx={{
-                backgroundColor: "#FFFFFF",
-                textAlign: "center",
-              }}
-            >
-              ex) bg_01, btn_text_primary
-            </Box>
-          </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>

diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx
@@ -15,36 +15,36 @@ import * as TokenInComponentStories from "./Token.inComponent.stories";
 
 ## Color System의 구조
 루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다.<br />
-색상 코드 값(ex: hex, rgb값) → Global Palette(ex: Red10, Blue40..) → Token(ex: bg_01, btn_text_primary)
+**색상 코드 값** (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)
-- 루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색의 모음.
-- 루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용한다.
-- 색상 코드(hex값)와 1:1 대응.
-- Color Token 은 이 글로벌 팔레트 값과 연결된다.
+- 루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음.
+- 루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다.
+- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다.
+- Color Token은 이 Global Paltte 값과 연결된다.
 
 ### Color Token
 
-> - [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens)
-> - [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens)
+> [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens) <br />
+> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens)
 
-- **Core Token** : background, text 와 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰
+- **Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰
 - **Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰
-- 색상 코드나 Global Color 대신 Color Token 을 이용하는 것을 권장
-- Color Token의 색상은 해당 컴포넌트를 둘러싸고 있는 Base Wrapper에 의해 결정
-- Token은 각각 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있음.
-
+- 색상 코드나 Global Color 대신 _Color Token 을 이용하는 것_ 을 권장한다.
+- Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다.
 
 ## Color Token에 테마를 부여하는 Base Wrapper
-- Base Layer 라고도 부름
-- Color token 에 컨텍스트(테마)를 부여해주는 wrapper
-- Light1, 2, Dark1, 2 네 가지 종류
-- 해당 wrapper 의 하위 컬러 토큰은 wrapper 의 컨텍스트(테마)의 색상을 보여줌
-- wrapper 가 중첩되었을 때 컬러 토큰은 바로 상위 부모 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'>
@@ -59,12 +59,11 @@ import * as TokenInComponentStories from "./Token.inComponent.stories";
         </div>
       </div>
       ```
-
-- base 를 지정하지 않을 시 기본 테마는 dark1
+
 
 ## 토큰 사용법
-- 디자인 시스템 컴포넌트는 이미 컬러 토큰을 사용해서 개발해 따로 커스텀이 필요없다면 base wrapper 만 설정하면 됨
-- mui 컴포넌트를 커스텀하거나 할 때 사용하게 될 것
+루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다.  
+Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다.
 
 ### Styled 내에서 사용법