Color Tokens #28

DaleSeo · 2024-12-31T02:14:30Z

디자인 시스템의 근간이 되는 색상 관련 토큰을 정의하고 PandaCSS에 설정하였습니다. 스토리북에서 쉬운 다크 모드 전환을 위해서 관련 애드온도 설치하였습니다.

DaleSeo · 2024-12-31T02:17:35Z

.storybook/preview.ts

+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],


이 설정을 통해 툴바에 라이트/다크 모드 전환 버튼이 생깁니다.

DaleSeo · 2024-12-31T02:18:32Z

src/styles/globalCss.ts

-    "--global-font-body": "var  (--fonts-sans)",
+    "--global-font-body": "var(--fonts-sans)",


제가 이전 PR에서 요기에 오타를 내서 현재 웹사이트에 기본 폰트가 적용이 안 되고 있습니다 😆

DaleSeo · 2024-12-31T02:20:45Z

src/tokens/colors.ts

+export const semanticColors: SemanticTokens["colors"] = {
+  primary: {
+    value: "#846DE9",
+  },
+  secondary: {
+    value: "#24EACA",
+  },
+  text: {
+    value: { base: "#160B46", _dark: "#FDFDFF" },
+  },
+  bg: {
+    100: { value: "#FDFDFF" },
+    200: { value: "#FBFAFF" },
+    300: { value: "#EEE8FE" },
+    400: { value: "#5333E1" },
+    500: { value: "#160B46" },
+  },
+};


시멘틱 색상은 일단 달레 스터디 피그마 파일에서 최대한 가져왔습니다. 앞으로 프로젝트를 진행하면서 지속적으로 개선해나가야 할 부분입니다.

커스텀 팔레트를 기준으로 시멘틱 색상도 재작업 하였습니다! 컴포넌트를 구현하면서 펠레트에 있는 색을 직접 쓸 일이 없도록 최대한 용도, 의미별로 상세히 정의하였습니다.

DaleSeo · 2024-12-31T02:21:31Z

src/tokens/colors.ts

+    value: "#24EACA",
+  },
+  text: {
+    value: { base: "#160B46", _dark: "#FDFDFF" },


요렇게 _dark 키에 다크 모드 용 색상을 지정해줄 수 있습니다.

DaleSeo · 2024-12-31T02:22:33Z

src/tokens/colors.ts

+  bg: {
+    100: { value: "#FDFDFF" },
+    200: { value: "#FBFAFF" },
+    300: { value: "#EEE8FE" },
+    400: { value: "#5333E1" },
+    500: { value: "#160B46" },
+  },


@nhistory 다크 모드에서 배경색은 얘네를 단순히 뒤집으면 될까요? ㅎㅎ 일단 다크 모드 정의는 제외하였습니다.

네네 뒤집으면 될 것 같긴 한데, 다크모드 사이트 디자인 적용해보면서 보완해나가야 할 것 같습니다.

색상 코드를 하드 코딩하지 않고 팔레트에서 적절한 색을 조합하여 시멘틱 토큰을 재구성하였습니다. PandaCSS로 스타일할 때 bg, bg.accent, bg.hover, bg.hover.accent 식으로 사용할 수 있습니다.

dale-ui/src/tokens/colors.ts

Lines 9 to 52 in ab18285

bg: {

DEFAULT: {

DEFAULT: {

value: { base: "{colors.gray.3}", _dark: "{colors.grayDark.3}" },

},

accent: {

value: { base: "{colors.teal.3}", _dark: "{colors.violetDark.3}" },

},

danger: {

value: { base: "{colors.red.3}", _dark: "{colors.redDark.3}" },

},

warning: {

value: { base: "{colors.yellow.3}", _dark: "{colors.yellowDark.3}" },

},

},

hover: {

DEFAULT: {

value: { base: "{colors.gray.4}", _dark: "{colors.grayDark.4}" },

},

accent: {

value: { base: "{colors.teal.4}", _dark: "{colors.violetDark.4}" },

},

danger: {

value: { base: "{colors.red.4}", _dark: "{colors.redDark.4}" },

},

warning: {

value: { base: "{colors.yellow.4}", _dark: "{colors.yellowDark.4}" },

},

},

active: {

DEFAULT: {

value: { base: "{colors.gray.5}", _dark: "{colors.grayDark.5}" },

},

accent: {

value: { base: "{colors.teal.5}", _dark: "{colors.violetDark.5}" },

},

danger: {

value: { base: "{colors.red.5}", _dark: "{colors.redDark.5}" },

},

warning: {

value: { base: "{colors.yellow.5}", _dark: "{colors.yellowDark.5}" },

},

},

},

DaleSeo · 2024-12-31T02:25:04Z

src/tokens/colors.ts

+  },
+};
+
+export const colors: Tokens["colors"] = {


TailwindCSS의 색상 팔레트와 OpenProps의 색상 팔레트 중에 고민했습니다. priamary와 secondary 색이 모두 두 색상 팔레트에 존재하지 않더라구요. 가장 가까운 색을 찾아야할지 고민이네요.

아 그렇군요. primary와 secondary색상은 각각 알고달레와 달레의 코드에서 가져왔었는데요.
디자인 시스템 작업하면서 색상 조합을 전체적으로 리뉴얼해보는 것도 고려해보면 좋을 것 같습니다.

방대한 TailwindCSS의 색상 팔레트로 쓰는 것이 일관성이 중요한 우리 디자인 시스템의 방향성과 맞지 않는 것 같아서, 달레의 코드와 알고달레에 현재 적용된 색상을 토대로 6 Hue, 12 Scale 커스텀 색상 팔레트를 만들었습니다. 달레의 코드처럼 라이트 모드에서는 teal 계열의 색상이 다크 모드에서는 violet 계열이 색상이 accent 색으로 사용하도록 구성하였습니다. 여기에 gray, danger, warning 색상을 추가하였습니다. 이렇게 적은 팔레트로 시작하고 컴포넌트를 구현하면서 필요한 색상을 추가했으면 합니다.

nhistory

다크모드 백그라운드 컬러지정만 추가되면 좋을 것 같습니다.
라이트모드에서 숫자만 반대로 적용 부탁드립니다.

DaleSeo · 2025-01-04T19:10:37Z

src/tokens/colors.mdx

+용도에 따라서 각 색상은 12가지 스케일로 분리됩니다.
+
+- Scale 1: 페이지 배경
+- Scale 2: 예비
+- Scale 3: 컴포넌트 배경
+- Scale 4: 컴포넌트 배경 (hover)
+- Scale 5: 컴포넌트 배경 (active)
+- Scale 6: 예비
+- Scale 7: 경계
+- Scale 8: 경계 (hover)
+- Scale 9: 솔리드 배경
+- Scale 10: 솔리드 배경 (hover)
+- Scale 11: 글자 (low contrast)
+- Scale 12: 글자 (high contrast)


이 가이드만 준수하여 색상을 사용하면 명암비로 인한 웹 접근성 문제는 피할 수 있을 거라고 생각합니다.

nhistory

수고 많으셨습니다!

DaleSeo added 2 commits December 25, 2024 12:52

set up @storybook/addon-themes

8d08e93

feat: add color tokens

f81defa

DaleSeo linked an issue Dec 31, 2024 that may be closed by this pull request

Color Palette #26

Closed

github-actions bot assigned DaleSeo Dec 31, 2024

DaleSeo commented Dec 31, 2024

View reviewed changes

DaleSeo marked this pull request as ready for review December 31, 2024 02:25

DaleSeo requested a review from a team as a code owner December 31, 2024 02:25

nhistory requested changes Dec 31, 2024

View reviewed changes

DaleSeo temporarily deployed to chromatic January 4, 2025 18:52 — with GitHub Actions Inactive

feat: customize color template

ab18285

DaleSeo force-pushed the 26-color-palette branch from 561d8cd to ab18285 Compare January 4, 2025 18:54

DaleSeo deployed to chromatic January 4, 2025 18:54 — with GitHub Actions View deployment

DaleSeo commented Jan 4, 2025

View reviewed changes

DaleSeo requested a review from nhistory January 4, 2025 19:16

nhistory approved these changes Jan 6, 2025

View reviewed changes

DaleSeo merged commit 010e541 into main Jan 6, 2025
6 checks passed

DaleSeo deleted the 26-color-palette branch January 28, 2025 00:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Color Tokens #28

Color Tokens #28

DaleSeo commented Dec 31, 2024 •

edited

Loading

DaleSeo Dec 31, 2024

DaleSeo Dec 31, 2024

DaleSeo Dec 31, 2024

DaleSeo Jan 4, 2025

DaleSeo Dec 31, 2024

DaleSeo Dec 31, 2024

nhistory Dec 31, 2024

DaleSeo Jan 4, 2025 •

edited

Loading

DaleSeo Dec 31, 2024

nhistory Dec 31, 2024

DaleSeo Jan 4, 2025 •

edited

Loading

nhistory left a comment

DaleSeo Jan 4, 2025

nhistory left a comment

		"--global-font-body": "var (--fonts-sans)",
		"--global-font-body": "var(--fonts-sans)",

	bg: {
	DEFAULT: {
	DEFAULT: {
	value: { base: "{colors.gray.3}", _dark: "{colors.grayDark.3}" },
	},
	accent: {
	value: { base: "{colors.teal.3}", _dark: "{colors.violetDark.3}" },
	},
	danger: {
	value: { base: "{colors.red.3}", _dark: "{colors.redDark.3}" },
	},
	warning: {
	value: { base: "{colors.yellow.3}", _dark: "{colors.yellowDark.3}" },
	},
	},
	hover: {
	DEFAULT: {
	value: { base: "{colors.gray.4}", _dark: "{colors.grayDark.4}" },
	},
	accent: {
	value: { base: "{colors.teal.4}", _dark: "{colors.violetDark.4}" },
	},
	danger: {
	value: { base: "{colors.red.4}", _dark: "{colors.redDark.4}" },
	},
	warning: {
	value: { base: "{colors.yellow.4}", _dark: "{colors.yellowDark.4}" },
	},
	},
	active: {
	DEFAULT: {
	value: { base: "{colors.gray.5}", _dark: "{colors.grayDark.5}" },
	},
	accent: {
	value: { base: "{colors.teal.5}", _dark: "{colors.violetDark.5}" },
	},
	danger: {
	value: { base: "{colors.red.5}", _dark: "{colors.redDark.5}" },
	},
	warning: {
	value: { base: "{colors.yellow.5}", _dark: "{colors.yellowDark.5}" },
	},
	},
	},

Color Tokens #28

Color Tokens #28

Conversation

DaleSeo commented Dec 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DaleSeo Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DaleSeo Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

nhistory left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nhistory left a comment

Choose a reason for hiding this comment

DaleSeo commented Dec 31, 2024 •

edited

Loading

DaleSeo Jan 4, 2025 •

edited

Loading

DaleSeo Jan 4, 2025 •

edited

Loading