@senkenmaru/theme

senkenmaru の Unistyles v3 設定と Provider。

インストール

bun add @senkenmaru/theme react-native-unistyles

前提: React 19+ / React Native 0.78+ / New Architecture 有効

使い方（最小）

// app/_layout.tsx
import { SenkenmaruProvider } from '@senkenmaru/theme';

export default function Root({ children }) {
  return <SenkenmaruProvider>{children}</SenkenmaruProvider>;
}

SenkenmaruProvider が初回レンダー時に Unistyles を設定します（冪等）。

使い方（詳細）

初期テーマを指定

<SenkenmaruProvider initialTheme="dark">
  {children}
</SenkenmaruProvider>

OS のダーク/ライト設定に追従

<SenkenmaruProvider adaptiveThemes>
  {children}
</SenkenmaruProvider>

Primary カラーを差し替える

プロダクトのブランドカラーに合わせて、interactive.primary 系トークンを差し替えられます。

シード 1 色を渡す（推奨） — HSL ベースで 10 段階 (50–900) を自動生成します。

<SenkenmaruProvider primary="#7c3aed">
  {children}
</SenkenmaruProvider>

10 段階のフル指定 — 既存のブランドパレットを厳密に再現したい場合：

<SenkenmaruProvider
  primary={{
    50: '#f5f3ff',
    100: '#ede9fe',
    200: '#ddd6fe',
    300: '#c4b5fd',
    400: '#a78bfa',
    500: '#8b5cf6',
    600: '#7c3aed',
    700: '#6d28d9',
    800: '#5b21b6',
    900: '#4c1d95',
  }}
>
  {children}
</SenkenmaruProvider>

Light / Dark で別の primary を指定 — ブランド色が片方のテーマで沈む場合に。

<SenkenmaruProvider
  primary={{
    light: '#4f46e5',  // light テーマでは濃い indigo
    dark: '#a5b4fc',   // dark テーマでは明るめのラベンダー
  }}
>
  {children}
</SenkenmaruProvider>

各サイドは seed 文字列でも 10 段階 PrimaryPalette でも OK。片方だけ指定した場合、もう片方は組み込みの indigo にフォールバックします。

注意（Web）: Unistyles v3 の Web runtime は StyleSheet.create を即時評価するため、@senkenmaru/ui から何かを import するより前に primary を確定させる必要があります。アプリの最上位で SenkenmaruProvider を mount するか、entry の先頭で configureSenkenmaru({ primary }) を呼んでください。initialTheme と同じ制約です。

動的に変更したい場合: configureSenkenmaru は StyleSheet.configure 越しの初期化専用で、2 回目以降は Unistyles 側で no-op になります。runtime 中に primary を差し替えたいときは UnistylesRuntime.updateTheme(name, updater) を直接呼んでください。

未指定の場合は組み込みの indigo パレットが使われます。

Provider を使わず設定したい場合

import { configureSenkenmaru } from '@senkenmaru/theme';

configureSenkenmaru({ adaptiveThemes: true, primary: '#7c3aed' });

プラットフォーム別セットアップ

Expo

app.json で New Architecture を有効化：

{
  "expo": {
    "newArchEnabled": true
  }
}

babel.config.js に senkenmaru の Babel プラグインを追加：

const senkenmaru = require('@senkenmaru/theme/babel');

module.exports = (api) => {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [senkenmaru({ root: 'app' })],
  };
};

@senkenmaru/theme/babel は内部で react-native-unistyles/plugin を呼び出し、senkenmaru の published パッケージ（@senkenmaru/ui, @senkenmaru/theme）を autoProcessPaths に自動登録します。これがないと <Text variant tone> や <Stack direction> の variant が runtime で適用されません。

react-native-unistyles/plugin の他のオプション（debug, autoProcessImports, autoRemapImports 等）はそのまま渡せます：

plugins: [senkenmaru({ root: 'app', debug: true })]

Vite SPA（Web 専用）

vite.config.ts の @vitejs/plugin-react に Unistyles plugin を追加し、react-native → react-native-web のエイリアスを設定。apps/examples/vite-spa/vite.config.ts を参考に。

加えて、Web 環境では entry で 互換 CSS を読み込んでください：

// src/main.tsx の先頭
import '@senkenmaru/theme/web.css';

web.css は senkenmaru を Web で動かすための最小限の調整（OS color-scheme 対応、ブラウザ既定 focus outline の無効化など）を含みます。Native 環境では不要（CSS は無視される）。

Next.js は現在対応外（Unistyles v3 の Babel plugin が SWC ベースの Next.js と相性悪い）。

提供されるもの

• SenkenmaruProvider — 推奨の設定エントリ
• configureSenkenmaru(options) — Provider を使わない場合の関数
• lightTheme / darkTheme — 生の theme オブジェクト（カスタム theme 派生用）
• createLightTheme(primary) / createDarkTheme(primary) — 任意の primary palette で theme を構築
• generatePrimaryPalette(seed) — シード 1 色から 10 段階の palette を生成
• resolvePrimary(input) — シード or palette を PrimaryPalette に正規化
• breakpoints — レスポンシブブレイクポイント定義
• web.css — Web 環境向けの互換 CSS（@senkenmaru/theme/web.css で import）
• 型: SemanticTheme / SenkenmaruThemeName / ConfigureOptions / PrimaryPalette / PrimaryShade 等

デザイントークン

本パッケージ内の tokens/ に 3 層セマンティック (primitive / semantic / component) で定義されています。SemanticTheme 型と lightTheme / darkTheme を直接 import すれば外部からも参照可能。詳細はルートの AGENTS.md を参照。