From ef011b5e301d0d072b3e8d260fe8c29cca19e0e9 Mon Sep 17 00:00:00 2001 From: Jiyeon Seo Date: Tue, 9 Apr 2024 18:28:00 +0900 Subject: [PATCH 1/4] docs(Color): translate into English --- .../stories/foundation/colors/ColorSystem.tsx | 2 +- .../src/stories/foundation/colors/Docs.mdx | 70 +++++++++++++------ 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx b/packages/design-system/src/stories/foundation/colors/ColorSystem.tsx index db100d4c..3ebc1e17 100644 --- 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 = () => { }} > - 색상 코드 값 + Color Hex Value #FFFFFF #00C9EA #FFB3B8 diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx index 0b84d3ee..526c8d79 100644 --- a/packages/design-system/src/stories/foundation/colors/Docs.mdx +++ b/packages/design-system/src/stories/foundation/colors/Docs.mdx @@ -11,42 +11,59 @@ import * as TokenInComponentStories from "./Token.inComponent.stories"; # Color System & Token -> 루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다. +> 루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다. +> _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의 구조 -루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다.
-**색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary) +루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다. +_The color system in Lunit is structured as follows._ +- **색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary) ### 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._ +- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다. + _Each item in the Global Palette corresponds 1:1 with a color code (hex value)._ +- Color Token은 이 Global Paltte 값과 연결된다. + _Color Tokens are linked to these values in the Global Palette._ ### Color Token > [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens)
> [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** 에 의해 테마가 결정된다. +- **Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰 + _**Core Token**: Color tokens used universally in UI elements such as background and text colors._ +- **Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰 + _**Component Token**: Color tokens used specifically within certain components like buttons and chips._ +- 색상 코드나 Global Color 대신 _Color Token 을 이용하는 것_ 을 권장한다. + _It is recommended to use _Color Tokens_ instead of color codes or Global Colors._ +- Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다. + _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에 테마를 부여하는 Base Wrapper -- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다. -- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다. +- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다. + _The wrapper that assigns themes to color tokens is also known as the Base Layer._ +- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다. + _Setting the Base Wrapper involves adding the theme name to the component's className._ - ex) `
`, `` -- 테마의 종류 : light1, light2, dark1, dark2 -- Color token은 Base Wrapper에서 설정한 테마에 해당하는 색이 적용된다. -- Base Wrapper를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다. -- Base Wrapper가 중첩되었을 때 Color Token은 _바로 상위 부모_ Wrapper의 테마를 따른다. - - ex) - ```jsx +- 테마의 종류 : light1, light2, dark1, dark2 + _Types of themes: light1, light2, dark1, dark2_ +- Color token은 Base Wrapper에서 설정한 테마에 해당하는 색이 적용된다. + _Color tokens apply colors corresponding to the theme set in the Base Wrapper._ +- Base Wrapper를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다. + _If no Base Wrapper is set, Color Tokens default to the Dark1 theme._ +- Base Wrapper가 중첩되었을 때 Color Token은 **바로 상위 부모** Wrapper의 테마를 따른다. + _When Base Wrappers are nested, Color Tokens follow the theme of **the immediate parent** Wrapper._ + - ex) + ```jsx
-
- ``` - +
+ ``` ## 토큰 사용법 루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다. -Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다. +_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 Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다. +_Color Tokens are implemented based on the MUI theme, so the usage is similar to utilizing the MUI theme._ ### Styled 내에서 사용법 +_Usage within Styled Components:_ @@ -98,6 +119,8 @@ const InComponentWithStyled = () => { ``` ### sx 내에서 사용법 +_Usage within sx prop:_ + ```jsx @@ -145,6 +168,7 @@ const InComponentWithSx = () => { ``` ### useTheme 이용해 inline style 내에서 사용법 +_Usage with useTheme for inline styling:_ From 5c29f47309a54178c61f5c0ebafa2924e256cc47 Mon Sep 17 00:00:00 2001 From: Jiyeon Seo Date: Thu, 11 Apr 2024 16:56:55 +0900 Subject: [PATCH 2/4] docs(Color): update text for formatting --- .../src/stories/foundation/colors/Docs.mdx | 96 +++++++++---------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx index 526c8d79..f0c4474a 100644 --- a/packages/design-system/src/stories/foundation/colors/Docs.mdx +++ b/packages/design-system/src/stories/foundation/colors/Docs.mdx @@ -10,14 +10,17 @@ import * as TokenInComponentStories from "./Token.inComponent.stories"; # 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._ +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의 구조 -루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다. -_The color system in Lunit is structured as follows._ + +## 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) @@ -25,43 +28,43 @@ _The color system in Lunit is structured as follows._ ### Global Palette Color > [Global Palette Color의 종류(link)](?path=/story/foundation-colors--global-colors) -- 루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음. - _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._ -- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다. - _Each item in the Global Palette corresponds 1:1 with a color code (hex value)._ -- Color Token은 이 Global Paltte 값과 연결된다. - _Color Tokens are linked to these values in the Global Palette._ +- 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)
> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens) -- **Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰 - _**Core Token**: Color tokens used universally in UI elements such as background and text colors._ -- **Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰 - _**Component Token**: Color tokens used specifically within certain components like buttons and chips._ -- 색상 코드나 Global Color 대신 _Color Token 을 이용하는 것_ 을 권장한다. - _It is recommended to use _Color Tokens_ instead of color codes or Global Colors._ -- Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다. - _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에 테마를 부여하는 Base Wrapper -- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다. - _The wrapper that assigns themes to color tokens is also known as the Base Layer._ -- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다. - _Setting the Base Wrapper involves adding the theme name to the component's 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) `
`, `` -- 테마의 종류 : light1, light2, dark1, dark2 - _Types of themes: light1, light2, dark1, dark2_ -- Color token은 Base Wrapper에서 설정한 테마에 해당하는 색이 적용된다. - _Color tokens apply colors corresponding to the theme set in the Base Wrapper._ -- Base Wrapper를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다. - _If no Base Wrapper is set, Color Tokens default to the Dark1 theme._ -- Base Wrapper가 중첩되었을 때 Color Token은 **바로 상위 부모** Wrapper의 테마를 따른다. - _When Base Wrappers are nested, Color Tokens follow the theme of **the immediate parent** Wrapper._ +- 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
@@ -70,23 +73,22 @@ _The color system in Lunit is structured as follows._ sx={{ backgroundColor: (theme) => theme.palette.lunit_token.component.btn_primary_bg - // 바로 상위 부모의 테마가 dark1이기 때문에, 이 곳의 btn_primary_bg 색상은 dark1 테마 색상이 적용됨 // 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 테마 색상이 적용됨 }} />
``` -## 토큰 사용법 -루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다. -_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 Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다. -_Color Tokens are implemented based on the MUI theme, so the usage is similar to utilizing the MUI theme._ +## 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를 이용하는 방식과 비슷하다._ -### Styled 내에서 사용법 -_Usage within Styled Components:_ +### With Styled Components @@ -118,8 +120,7 @@ const InComponentWithStyled = () => { }; ``` -### sx 내에서 사용법 -_Usage within sx prop:_ +### With sx prop @@ -167,8 +168,7 @@ const InComponentWithSx = () => { }; ``` -### useTheme 이용해 inline style 내에서 사용법 -_Usage with useTheme for inline styling:_ +### With useTheme for inline styling From 80d183e35c879af196966aef3f450ab1b9a18fb8 Mon Sep 17 00:00:00 2001 From: Jiyeon Seo Date: Mon, 15 Apr 2024 19:19:21 +0900 Subject: [PATCH 3/4] docs(Color): update description --- .../src/stories/foundation/colors/Docs.mdx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx index f0c4474a..2054fe8d 100644 --- a/packages/design-system/src/stories/foundation/colors/Docs.mdx +++ b/packages/design-system/src/stories/foundation/colors/Docs.mdx @@ -10,18 +10,18 @@ import * as TokenInComponentStories from "./Token.inComponent.stories"; # Color System & Token -> _To make it easier to understand the system, we provide explanations in both Korean and English within the Color System document._ +> _For the color documents, we provide both Korean and English to ensure understanding of our unique color system and tokens._ > _시스템의 이해를 돕기 위해 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. -_루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다._ +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. _루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._ -- **색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary) @@ -29,9 +29,9 @@ _루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._ > [Global Palette Color의 종류(link)](?path=/story/foundation-colors--global-colors) - 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. - _루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다._ + _루닛 디자인 시스템 안에서 사용할 색상을 종류와 밝기로 분류해 구성한 색상의 모음._ +- 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. @@ -42,14 +42,14 @@ _루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._ > [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens)
> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens) -- **Core Token**: Color tokens used universally in UI elements such as background and text colors. +- **Core Token**: These are color tokens universally used in UI elements, including background and text colors. _**Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰_ -- **Component Token**: Color tokens used specifically within certain components like buttons and chips. +- **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), and the theme **is determined by the Base Wrapper surrounding the respective component**. - _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다._ + _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper[Base Wrapper](#what-is-base-wrapper)** 에 의해 테마가 결정된다._ ## What is Base Wrapper? - The wrapper that assigns themes to color tokens is also known as the Base Layer. From fa2c708ddc4693de9ec15c486fb28f93829fdb5c Mon Sep 17 00:00:00 2001 From: Jiyeon Seo Date: Mon, 22 Apr 2024 15:02:18 +0900 Subject: [PATCH 4/4] docs(Color): update description --- .../src/stories/foundation/colors/Docs.mdx | 86 +++++++++++-------- 1 file changed, 51 insertions(+), 35 deletions(-) diff --git a/packages/design-system/src/stories/foundation/colors/Docs.mdx b/packages/design-system/src/stories/foundation/colors/Docs.mdx index 2054fe8d..d65c0ef1 100644 --- a/packages/design-system/src/stories/foundation/colors/Docs.mdx +++ b/packages/design-system/src/stories/foundation/colors/Docs.mdx @@ -27,7 +27,7 @@ _루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._ ### Global Palette Color -> [Global Palette Color의 종류(link)](?path=/story/foundation-colors--global-colors) +> [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. @@ -39,8 +39,8 @@ _루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._ ### Color Token -> [Core token의 종류(link)](?path=/story/foundation-colors--core-tokens)
-> [Component token의 종류(link)](?path=/story/foundation-colors--component-tokens) +> [Browse all the Core tokens(link)](?path=/story/foundation-colors--core-tokens)
+> [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 에서 사용하는 컬러 토큰_ @@ -48,44 +48,60 @@ _루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._ _**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[Base Wrapper](#what-is-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) `
`, `` +- 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_ -- 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의 테마를 따른다._ +- 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 -
-
-
-
- ``` + ```jsx +
+
+
+
+ ``` +- 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 +
+
+
+
+ ``` + + ## 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. +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을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트를 감싸는 base wrapper만 설정하면 된다._ +_루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트에서 사용할 테마만 설정하면 된다._ _Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다._ ### With Styled Components