- {/* 카테고리 제목 (좌측 2px cyan accent bar) */}
-
-
-
- {category.name}
-
-
-
- {/* 테이블 */}
-
+ {(['usage', 'token'] as const).map((tab) => {
+ const isActive = activeColorTab === tab;
+ return (
+ setActiveColorTab(tab)}
+ className="px-5 py-2.5 text-sm font-semibold border-none cursor-pointer bg-transparent"
style={{
- backgroundColor: t.tableContainerBg,
- borderColor: t.cardBorder,
- boxShadow: t.cardShadow,
+ color: isActive ? t.textAccent : t.textMuted,
+ borderBottom: isActive ? `2px solid ${t.textAccent}` : '2px solid transparent',
}}
>
- {/* 헤더 */}
+ {tab === 'usage' ? 'Usage' : 'Token'}
+
+ );
+ })}
+
+
+ {/* ── Usage 탭 콘텐츠 ── */}
+ {activeColorTab === 'usage' && (
+ <>
+ {/* ── 섹션 2: Primary color ── */}
+
+
+ 프라이머리 색상(primary color)
+
+
+ Primary 색상은 해양 방제 시스템의 핵심 인터랙션 요소에 사용됩니다. Cyan~Blue 그라디언트가 주요 액션 버튼과 강조 요소에 적용됩니다.
+
+
+
+ {/* Light Mode */}
+
+ {/* Dark Mode */}
+
+
+
+
+ {/* ── 섹션 3: Secondary color ── */}
+
+
+ 세컨더리 색상(secondary color)
+
+
+ Secondary 색상은 UI의 배경과 구조적 요소에 사용됩니다. Navy 계열로 다크 모드의 깊이감과 계층 구조를 표현합니다.
+
+
+
+ {/* Light Mode */}
+
+
+ {/* Dark Mode */}
+
+
+
+
+ {/* ── 섹션 4: Gray color ── */}
+
+
+ 그레이 색상(gray color) / 네추럴, 중립 색상
+
+
+ Gray 색상은 주로 배경, 텍스트, 구분 선에 사용되며, 시각적 집중을 방해하지 않고 콘텐츠에 초점을 맞추도록 도와주는 중립적인 색상이다.
+
+
+ 표준형 스타일의 그레이 색상은 주요 색상과 선명한 모드에서의 조화를 고려해 블루 그레이 계열을 사용한다.
+
+
+
+
+
+
+ {/* ── 섹션 5: Transparent ── */}
+
+
+ Transparent
+
+
+ 투명도와 음영을 활용하여 정보의 집중도를 조절합니다. 배경의 음영 처리는 투명도 65%를 사용합니다.
+
+
+
+ {/* Black */}
+
+
+
+ )}
+
+ {/* ── Token 탭 콘텐츠 ── */}
+ {activeColorTab === 'token' && (
+
+ {COLOR_TOKEN_GROUPS.map((group, groupIdx) => (
+
+
- {(['Token', 'Dark Mode', 'Light Mode', 'Usage'] as const).map((col) => (
-
+ {group.title}
+
+
+ {group.tokens.map((token) => (
+
+ {/* 색상 스와치 */}
+
+ {/* 토큰명 */}
- {col}
+ {token.name}
+ {/* HEX + RGB */}
+
+
+ {token.hex}
+
+
+ {hexToRgb(token.hex)}
+
+
))}
-
- {/* 데이터 행 */}
- {category.tokens.map((token, rowIdx) => (
-
- {/* Token 컬럼 */}
-
-
- {token.token}
-
-
-
- {/* Dark Mode 컬럼 */}
-
-
- {/* Light Mode 컬럼 */}
-
-
- {/* Usage 컬럼 */}
-
-
- {token.usage.map((u) => (
-
-
- {u}
-
-
- ))}
-
-
-
- ))}
- ))}
-
+ ))}
+