색상#
Figma Foundation · 01. Color · 값은
coui_core가 정본입니다. 정본 파일은 Figma 라이브러리.
이 페이지는 역할을 고르고, 지금 테마의 실제 값을 스와치로 확인하는 곳입니다. 값은 coui_core 의 CoreColors
가 정하고, Flutter ColorScheme 과 Web --coui-* 변수가 같은 이름을 읽습니다.
팔레트 hex 를 앱에 복사하지 마세요. 라이트/다크와 서페이스 스타일이 토큰 값은 바꾸고, 이름은 그대로 둡니다. 토큰 축 전체는 디자인 토큰 을 보세요.
언제 쓰나#
시맨틱 토큰을 고르세요
-
배경 · 글자 · 보더 · 상태 색을 줄 때 —
primary,onSurface,error처럼 역할을 고릅니다 -
컴포넌트 Style (
backgroundColor: CoreColor.token(CoreColors.surface)) 이나Text('…').onSurface
쓰지 마세요
#RRGGBB/Color(0xFF…)를 위젯에 박기 — 다크 모드와 서페이스 스타일이 비껴갑니다- "이 버튼은 파랑"처럼 원시 색을 고르기 — 브랜드 색은
primary슬롯이 담당합니다
onX 는 그 위 글자/아이콘 색입니다. primary 배경에는 onPrimary,
surface 위 본문에는 onSurface 를 짝지으세요.
coui_core 맵#
| 쓰는 이름 | 의미 |
|---|---|
CoreColors.primary 등 |
시맨틱 슬롯. kebab 이름이 CSS 변수 (--coui-primary) 가 됩니다 |
CoreColor.token(CoreColors.primary) | Style 필드에 넣는 플랫폼-중립 참조 |
theme.colorScheme.primary | Flutter — 현재 스킴이 토큰을 풀어 준 값 |
bg-primary / rgb(var(--coui-on-surface)) |
Web — Tailwind class 또는 inline 변수 |
아래 스와치는 --coui-<token> 을 그대로 칠하므로, 헤더의 테마·서페이스 스위처를 바꾸면 같이 움직입니다.
사용법#
// Flutter — colorScheme 경유 또는 Style 토큰
theme.colorScheme.primary
theme.colorScheme.onSurfaceVariant
CoreColor.token(CoreColors.primary)
// Web — 토큰 class / CSS 변수
'bg-primary' // Tailwind class
'rgb(var(--coui-on-surface))' // inline