멀티브랜드 테마

작동 방식#

브랜드 테마는 tokens/brands/<brand>.json에 시드 색 한 줄로 정의합니다. 빌드 시 토큰 솔버(scheme.ts)가 시드에서 accent·neutral 풀세트와 액센트 풀세트(primary-strong·primary-hover·primary-text·link· focus-ring 등 11토큰)를 도출하고, emit이 [data-brand='<brand>'] CSS 블록과 Flutter WizColors<Brand> 클래스를 생성합니다.

적용은 data-brand 한 속성입니다. 해당 요소 아래의 모든 WDS 컴포넌트가 cascade로 브랜드 액센트를 받습니다 — 컴포넌트 코드·마크업은 그대로입니다.

<div data-brand="demo">
  <button class="wds-button">업그레이드</button>  <!-- 채움이 teal로 -->
</div>

스코프 — 무엇이 바뀌고 무엇이 상속되나#

• 바뀜(override): 액센트 전부 — primary 계열(채움·hover·active·strong 3종·text)·secondary· tertiary·link·focus-ring. 버튼·링크·배지·포커스 링이 시드 색으로 리브랜딩됩니다.
• 상속(wiz 공유): neutral 표면·본문 텍스트·경계(surface·text·border)는 회색 그대로 — 위 데모의 두 패널이 같은 회색인 이유입니다. 상태색(success·warning·error·info)도 브랜드 독립입니다(빨강=에러는 보편). 브랜드는 액센트만 바꾸고 가독·구조는 공유합니다.

대비는 자동 보장#

각 브랜드의 액센트는 빌드타임 AA 게이트(verifyBrandContrast)를 통과해야 빌드가 성공합니다 — primary-strong은 흰/잉크 텍스트와 4.5:1, primary-text·link는 표면 위 4.5:1(최악 티어 기준), focus-ring은 3:1. 솔버가 시드 색의 명도를 자동 조정해 만족시키므로, 어떤 시드를 넣어도 AA가 깨지지 않습니다(무채색 포함). 시드 3종 × 전 variant × 전 contrastLevel에서 위반 0으로 검증됩니다.

웹↔Flutter 패리티#

같은 브랜드 정의가 웹([data-brand] CSS)과 Flutter에 동일 tone 수학으로 생성됩니다. Flutter는 브랜드 scheme (WizColorsDemo)뿐 아니라 풀 테마(WizThemeDataDemo.light/.dark)도 생성됩니다 — 웹의 var() cascade가 컴포넌트를 자동 리브랜딩하듯, Flutter는 브랜드 액센트를 참조하는 컴포넌트 토큰(버튼·배지·체크박스·입력)을 브랜드값으로 해상하고 나머지(중립·상태색)는 wiz를 상속합니다. 한 줄로 적용됩니다:

MaterialApp(theme: WizTheme.fromData(WizThemeDataDemo.light));
// 버튼 채움이 teal(primary-strong)로 — 웹 data-brand="demo"와 같은 결과

포털 사본 엔진과 정본(build-tokens)의 정합은 패리티 테스트(scheme-parity.test.ts)가, 웹↔Flutter 액센트 도출은 공유 솔버가, Flutter 컴포넌트 리브랜딩은 wiz_brand_parity_test.dart가 보장합니다.