ブランドを差し替える

入力契約：10段スケール全部

import { createTheme } from "@hirasaki1985/web-ui";

const brandTheme = createTheme({
  colors: { primary: {
    50: "#E6F4FF", 100: "#CCE9FF", 200: "#99D3FF", 300: "#66BDFF", 400: "#33A7FF",
    500: "#0091FF", 600: "#0074CC", 700: "#005799", 800: "#003A66", 900: "#001D33",
  } },
});

createTheme() は colors.primary を10段スケール丸ごとで受け取ります。代表色を1つ渡すだけでライブラリ側がスケールを自動生成する方式は採用していません。理由は、明度カーブの決め方が製品によって異なり、機械生成した結果がブランドの意図（既定の primary スケールも機械生成ではありません）を再現できないことが多いためです。デザインチームが確定したスケールをそのまま渡してください。

これだけで semantic.bg.brand / semantic.bg.brandSubtle / semantic.state.hoverPrimary / semantic.state.pressedPrimary / semantic.border.focus / components.button.primaryBg など、Primaryに連なるすべてのトークンが再計算されます。色の計算は1箇所も発生しません（各トークンは10段のどれかを指すだけです）。

部分上書きは避ける（現状は型で防げない）

// 型は通ってしまうが、意図しない結果になる
createTheme({ colors: { primary: { 500: "#FF0000" } } });

実際に origin/develop をビルドして確認した結果です。

トークン	結果	期待
`semantic.bg.brand`	`#FF0000`（新スケール）	意図通り
`semantic.bg.brandSubtle`	`#EFF6FF`（旧スケールの青のまま）	`#FF0000` 系の淡い色
`components.button.primaryHoverBg`	`#1D4ED8`（旧スケールの青のまま）	`#FF0000` 系のhover色

500 だけを上書きしても、buildSemanticColors は上書きされなかった 50 や 400 からも値を導出するため、ボタンの背景は赤くなるのにhover色だけ青いまま、という壊れた見た目になります。createTheme の引数型（DeepPartial<Theme>）が部分上書きを許してしまっているのが原因です。

スケールの作り方

500を基準に決める: ブランドの代表色をそのまま 500 に置きます。
明度カーブでスケールを作る: 50(最も明るい)〜900(最も暗い)まで、色相・彩度を保ったまま明度だけを変えるのが基本です。既存の primary スケール（#EFF6FF〜#172554）を明度の参考値にできます。
コントラストを確認する: 500〜700 あたりが文字色・アイコン色として bg.primary（白背景）に対して4.5:1を満たすか確認します（色のコントラスト比表示を参照）。50〜100 は bg.brandSubtle としてのみ使うため、コントラストより「淡さ」を優先して決めます。
hover/pressed の方向を確認する: 塗りつぶしButtonの現行実装はhoverにprimary[600]、pressedにprimary[700]を使います。Semanticの状態色とは別のComponent契約なので、ブランドスケールを作るときは実際の用途ごとのコントラストを確認します。

ダークテーマにも同じスケールを渡す

import { createDarkTheme } from "@hirasaki1985/web-ui";

const overrides = { colors: { primary: { /* 同じ10段 */ } } };
const lightTheme = createTheme(overrides);
const darkTheme = createDarkTheme(overrides);

createDarkTheme() は darkTheme（既定のダークテーマ）をベースに、同じ overrides を適用します。ライト/ダークで別のブランドスケールを使いたい場合を除き、同じ overrides オブジェクトを両方に渡してください。