i-Willink
ドキュメントメニュー

ブランドとテーマ

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-600bg-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)),
);

次は 概要 に戻る、または Storybook でコンポーネントを見る。