feat: Semantic Color Token 추가

[youngminss]

🎯 Semantic Color Token 추가

Figma 디자인 시스템에서 정의된 Semantic Color Token을 프로젝트에 추가하고, CSS 변수를 TypeScript에서 타입 안전하게 사용할 수 있도록 Color Token Generator 스크립트를 구현했습니다.

📑 작업 상세 내역

1. Semantic Color Token 정의 (src/styles/color.css)

기존 Palette 토큰을 참조하는 Semantic 토큰을 추가했습니다.

카테고리	토큰 수	설명
Background	3개	white, gray, dim
Surface	6개	white, lightgray, gray, primary, disabled, secondary
Text	7개	primary, secondary, disabled, inverse, inverse-secondary, placeholder, interactive
Border	5개	default, strong, primary, primary-opacity, secondary
Icon	3개	default, disabled, inverse
Button	9개	primary/hover/disabled, secondary/hover/disabled, tertiary/hover/disabled

2. Color Token Generator 스크립트 (scripts/colors/)

CSS 변수를 TypeScript 상수로 자동 변환하는 스크립트를 추가했습니다.

pnpm generate:colors

• 입력: src/styles/color.css (CSS 변수 정의)
• 출력: src/constants/color.ts (TypeScript 상수 및 타입)

주요 기능

• CSS 변수 파싱 및 중첩 객체 구조로 변환
• Semantic 토큰의 Primitive 참조를 실제 hex 값으로 해석
• TypeScript 타입 자동 생성 (as const)

🙏 리뷰 요청 사항

• Semantic 토큰 네이밍 컨벤션 확인 부탁드립니다.
• scripts/colors/generate.js 스크립트 로직 검토 부탁드립니다.

📃 참고 자료

• ./scripts/colors/README.md - Color Token Generator 사용 가이드

🖼️ 작업 결과물

파일 구조

scripts/colors/
├── generate.js # 생성 스크립트
└── README.md # 사용 가이드

src/styles/
└── color.css # CSS 변수 정의 (Palette + Semantic)

src/constants/
└── color.ts # 자동 생성된 TypeScript 상수

[gemini-code-assist]

Summary of Changes

Hello @youngminss, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 UI의 색상 시스템을 개선하기 위해 의미론적 색상 토큰을 도입합니다. 이는 디자인 시스템의 일관성과 유지보수성을 향상시키는 것을 목표로 합니다. 기존의 직접적인 색상 팔레트 사용을 추상화된 의미론적 토큰으로 전환하여, 향후 색상 변경이나 테마 적용이 용이해지도록 기반을 마련합니다.

Highlights

• 의미론적 색상 토큰 추가: 배경, 표면, 텍스트, 테두리, 아이콘, 버튼 등 UI 요소에 대한 새로운 의미론적 색상 토큰이 src/styles/color.css 파일에 정의되었습니다.
• 색상 적용 업데이트: app/page.tsx 파일에서 기존의 팔레트 기반 색상 클래스가 새로 정의된 의미론적 색상 토큰으로 대체되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 시맨틱 컬러 토큰을 도입하여 디자인 시스템의 일관성과 유지보수성을 향상시키는 좋은 변경입니다. color.css에 새로운 시맨틱 변수들이 추가되었고, app/page.tsx에서 이를 사용하는 예시를 보여주고 있습니다. 리뷰 결과, 몇 가지 개선점을 발견했습니다. CSS 변수 참조 시 불필요한 접두사가 사용되어 색상이 올바르게 적용되지 않을 수 있는 심각한 문제가 있습니다. 또한, 비활성화된 버튼의 상태에 대한 일관성을 검토해볼 필요가 있습니다. 자세한 내용은 각 파일의 주석을 참고해주세요.

[gemini-code-assist]

새로 추가된 시맨틱 컬러 토큰에서 palette 컬러 변수를 참조할 때 var(--ygi-color-palette-...)와 같이 --ygi- 접두사를 사용하고 있습니다. 하지만 color.css 파일 내에서 변수들은 --color-palette-...와 같이 ygi- 접두사 없이 선언되어 있습니다. Tailwind CSS의 prefix 설정은 유틸리티 클래스에 적용되며, CSS 변수 선언 자체를 변경하지 않습니다. 따라서 var() 함수 내에서 --ygi- 접두사를 제거해야 색상이 올바르게 적용됩니다. 이 수정이 이루어지지 않으면 모든 시맨틱 컬러가 적용되지 않는 문제가 발생할 수 있습니다.

  /* Background */
  --color-bg-white: var(--color-palette-common-white);
  --color-bg-gray: var(--color-palette-gray-100);
  --color-bg-dim: var(--color-palette-opacity-gray-16);

  /* Surface */
  --color-surface-white: var(--color-palette-common-white);
  --color-surface-lightgray: var(--color-palette-gray-50);
  --color-surface-gray: var(--color-palette-gray-100);
  --color-surface-primary: var(--color-palette-primary-50);
  --color-surface-disabled: var(--color-palette-gray-100);
  --color-surface-secondary: var(--color-palette-secondary-50);

  /* Text */
  --color-text-primary: var(--color-palette-gray-900);
  --color-text-secondary: var(--color-palette-gray-500);
  --color-text-disabled: var(--color-palette-gray-400);
  --color-text-inverse: var(--color-palette-common-white);
  --color-text-inverse-secondary: var(--color-palette-gray-50);
  --color-text-placeholder: var(--color-palette-gray-400);
  --color-text-interactive: var(--color-palette-primary-500);

  /* Border */
  --color-border-default: var(--color-palette-gray-200);
  --color-border-strong: var(--color-palette-gray-800);
  --color-border-primary: var(--color-palette-primary-500);
  --color-border-primary-opacity: var(--color-palette-opacity-primary-80);
  --color-border-secondary: var(--color-palette-secondary-500);

  /* Icon */
  --color-icon-default: var(--color-palette-gray-500);
  --color-icon-disabled: var(--color-palette-gray-400);
  --color-icon-inverse: var(--color-palette-common-white);

  /* Button */
  --color-button-primary: var(--color-palette-gray-800);
  --color-button-primary-hover: var(--color-palette-gray-900);
  --color-button-primary-disabled: var(--color-palette-gray-400);
  --color-button-secondary: var(--color-palette-primary-500);
  --color-button-secondary-hover: var(--color-palette-primary-600);
  --color-button-secondary-disabled: var(--color-palette-primary-200);
  --color-button-tertiary: var(--color-palette-gray-100);
  --color-button-tertiary-hover: var(--color-palette-gray-200);
  --color-button-tertiary-disabled: var(--color-palette-gray-100);

[gemini-code-assist]

--color-button-tertiary-disabled가 --color-button-tertiary와 동일한 값을 참조하고 있습니다. 이 때문에 비활성화된 tertiary 버튼이 활성화된 버튼과 시각적으로 동일하게 보일 수 있습니다. Primary 및 secondary 버튼의 비활성화 상태는 배경색이 뚜렷하게 변경되는 반면, tertiary 버튼은 그렇지 않아 일관성이 부족해 보입니다. 비활성화 상태를 명확히 구분하기 위해 다른 색상 토큰을 사용하는 것을 고려해 보세요. 예를 들어, --color-palette-gray-50을 사용하면 다른 버튼들의 비활성화 상태와 일관성을 맞출 수 있습니다.

Suggested change

	--color-button-tertiary-disabled: var(--ygi-color-palette-gray-100);
	--color-button-tertiary-disabled: var(--color-palette-gray-50);

[RookieAND]

스크립트까지! 좋은 구조인 거 같아. 시안 상의 차이도 없어 보여서 이대로 가면 될 거 같어!