[DS-188] Color storybook 문서에 영어 번역 추가

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>

packages/design-system/src/stories/foundation/colors/Docs.mdx

@@ -10,62 +10,85 @@ import * as TokenInComponentStories from "./Token.inComponent.stories";
 <Meta of={ColorsStories} />
 
 # Color System & Token
+> _To make it easier to understand the system, we provide explanations in both Korean and English within the Color System document._  
+> _시스템의 이해를 돕기 위해 Color System 문서만 한국어와 영어를 병기하여 설명합니다._
 
-> 루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다.
+In the Lunit design system, we pre-configure a color palette to ensure consistent use of colors.  
+We tokenize this palette to make it easy for developers to apply to 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.    
+_루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._  
+- **색상 코드 값** (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 값과 연결된다.
+- A collection of colors organized by type and shade to be used within the AK design system.  
+  _루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음._  
+- Within the Lunit design system, colors are only utilized from this palette, and colors outside of the palette are preferably avoided.  
+  _루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다._  
+- 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에 테마 이름을 추가하는 방식** 으로 이루어진다.
+- **Core Token**: Color tokens used universally in UI elements such as background and text colors.  
+  _**Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰_  
+- **Component Token**: Color tokens used specifically within certain components like 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), and the theme **is determined by the Base Wrapper surrounding the respective component**.  
+  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다._  
+
+## What is Base Wrapper?
+- The wrapper that assigns themes to color tokens is also known as the Base Layer.  
+  _Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다._  
+- Setting the Base Wrapper involves **adding the theme name to the component's className**.  
+  _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
+- Types of themes: light1, light2, dark1, dark2  
+  _테마의 종류 : light1, light2, dark1, dark2_  
+- Color tokens apply colors corresponding to the theme set in the Base Wrapper.  
+  _Color token은 Base Wrapper에서 설정한 테마에 해당하는 색이 적용된다._  
+- If no Base Wrapper is set, Color Tokens default to the Dark1 theme.  
+  _Base Wrapper를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다._  
+- When Base Wrappers are nested, Color Tokens follow the theme of **the immediate parent** Wrapper.  
+  _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
+                // Due to the theme of the immediate parent being dark1, 
+                // the color of btn_primary_bg here will be applied as the dark1 theme color.
                 // 바로 상위 부모의 테마가 dark1이기 때문에, 이 곳의 btn_primary_bg 색상은 dark1 테마 색상이 적용됨
             }}
           /> 
         </div>
-      </div>
-      ```
+      </div>  
+    ```  
 
+## Usage
+The components in the Lunit design system are already developed using Color Tokens. If no custom styling is needed, you just need to set the base wrapper around the component.  
+Color Tokens are implemented based on the MUI theme, so the usage is similar to utilizing the MUI theme.  
+_루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다._  
+_Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다._  
 
-## 토큰 사용법
-루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다.  
-Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다.
-
-### Styled 내에서 사용법
+### With Styled Components
 
 <Canvas of={TokenInComponentStories.InComponentWithStyled} sourceState="none" />
 
@@ -97,7 +120,8 @@ const InComponentWithStyled = () => {
 };
 ```
 
-### sx 내에서 사용법
+### With sx prop
+
 <Canvas of={TokenInComponentStories.InComponentWithSx} sourceState="none" />
 
 ```jsx
@@ -144,7 +168,7 @@ const InComponentWithSx = () => {
 };
 ```
 
-### useTheme 이용해 inline style 내에서 사용법
+### With useTheme for inline styling
 
 <Canvas of={TokenInComponentStories.InComponentWithInlineStyle} sourceState="none" />