ブランドとテーマ
willink DS は 単一ノブのテーマ設計です。consumer は --color-brand を再宣言するだけで、 scale(50〜950)・state(hover / active / soft)・gradient・dark フリップが OKLCH color-mix で自動派生します (ADR-0021)。
1 行で切り替える
css
/* consumer の globals.css */
@import "@willink-labs/tailwind-preset/preset.css";
:root {
--color-brand: #2563eb; /* これ 1 行で全体が切り替わる */
}Tailwind v4 が :root override を compile 時に解決するため、全 DS コンポーネントとユーティリティ(text-brand-600、bg-brand-soft 等)がコード変更なしで追従します。
override してよいトークン
公開 override 契約(override-safe)は次の通りです。これ以外(派生 ramp・gradient endpoint 等)は 内部トークンなので override しないでください。
--color-brand(マスターノブ)--color-accent-cyan/--color-accent-pink--shadow-glow、motion(--duration-*/--ease-*)
複数ブランド
willink(violet)・clublink(blue)・fitai など複数ブランドは、それぞれ --color-brand を別の値に再宣言するだけで表現できます。DS が公開するのはこの単一ノブのみで、 ブランド軸のような専用機構(data-brand 等)は DS 自体には含みません(各ブランドは単に異なる --color-brand 値)。 ランディングの ライブデモ で複数ブランドの切り替えを確認できます。
Flutter
dart
final theme = WillinkTheme.willink().copyWith(
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF2563EB)),
);