색상#
CoUI 색상은 시맨틱 토큰(역할 기반)으로 구성됩니다. 모든 토큰은 --coui-<token> CSS 변수로 노출되어 라이트/다크 테마에 자동 반응합니다. 아래 스와치는 현재 테마 값으로 렌더됩니다.
사용법#
// Flutter — colorScheme 경유
theme.colorScheme.primary
theme.colorScheme.onSurfaceVariant
// Web — 토큰 class / CSS 변수
'bg-primary' // Tailwind class
'rgb(var(--coui-on-surface))' // inline
전체 토큰#
Surface
surface
surfaceDim
surfaceBright
surfaceContainerLowest
surfaceContainerLow
surfaceContainer
surfaceContainerHigh
surfaceContainerHighest
onSurface
onSurfaceVariant
surfaceTint
Primary
primary
onPrimary
primaryContainer
onPrimaryContainer
primaryFixed
primaryFixedDim
onPrimaryFixed
onPrimaryFixedVariant
Secondary
secondary
onSecondary
secondaryContainer
onSecondaryContainer
secondaryFixed
secondaryFixedDim
onSecondaryFixed
onSecondaryFixedVariant
Tertiary
tertiary
onTertiary
tertiaryContainer
onTertiaryContainer
tertiaryFixed
tertiaryFixedDim
onTertiaryFixed
onTertiaryFixedVariant
Status
error
onError
errorContainer
onErrorContainer
success
onSuccess
successContainer
onSuccessContainer
warning
onWarning
warningContainer
onWarningContainer
info
onInfo
infoContainer
onInfoContainer
Utility
outline
outlineVariant
inverseSurface
inverseOnSurface
inversePrimary
shadow
scrim
Glass
glassTint
glassHighlight
glassShadow
glassIllumination