Merge pull request #171 from lunit-io/DS-188-translate-into-english

[DS-188] Color storybook 문서에 영어 번역 추가
lunit-io · Apr 22, 2024 · 2595f0d · 2595f0d
2 parents 9536c36 + fa2c708
commit 2595f0d
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 45 deletions.
diff --git a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx
@@ -31,7 +31,7 @@ const ColorSystem = () => {
           }}
         >
           <BlockBox>
-            <Box>색상 코드 값</Box>
+            <Box>Color Hex Value</Box>
             <ColorBox bgcolor="#FFFFFF">#FFFFFF</ColorBox>
             <ColorBox bgcolor="#00C9EA">#00C9EA</ColorBox>
             <ColorBox bgcolor="#FFB3B8">#FFB3B8</ColorBox>

diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx
@@ -10,62 +10,101 @@ 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.  
+_루닛 디자인 시스템은 명시적이고 일관된 색상 사용을 보장하기 위해 색상 팔레트를 정의한다.  
+사전 구성된 팔레트는 토큰 형태로 제공되므로 컴포넌트나 페이지 단에서 쉽게 적용 가능하다._
 
-## Color System의 구조
-루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다.<br />
-**색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary)
+
+## Structure of Color system
+The color system in Lunit is structured as follows.    
+_루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._  
 
 <ColorSystem />
 
 ### Global Palette Color
 
-> [Global Palette Color의 종류(link)](?path=/story/foundation-colors--global-colors)
-- 루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음.
-- 루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다.
-- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다.
-- Color Token은 이 Global Paltte 값과 연결된다.
+> [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
 
-> [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>
+> [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>  
+  ```  
 
 
-## 토큰 사용법
-루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다.  
-Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다.
 
-### Styled 내에서 사용법
+## 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" />
 
@@ -97,7 +136,8 @@ const InComponentWithStyled = () => {
 };
 ```
 
-### sx 내에서 사용법
+### With sx prop
+
 <Canvas of={TokenInComponentStories.InComponentWithSx} sourceState="none" />
 
 ```jsx
@@ -144,7 +184,7 @@ const InComponentWithSx = () => {
 };
 ```
 
-### useTheme 이용해 inline style 내에서 사용법
+### With useTheme for inline styling
 
 <Canvas of={TokenInComponentStories.InComponentWithInlineStyle} sourceState="none" />