カラークラス名の移行ガイド

        Rabee UI のカラークラス名を新しい命名に置き換えてください。

## 参考資料（作業前に WebFetch で必ず読み込んでください）
- カラーの名前と用途: https://rabeeui.com/docs/colors
- 本移行ガイド全体: https://rabeeui.com/docs/migration/colors

## 対象
`src/` 配下のすべての `.svelte` / `.ts` / `.tsx` / `.css` / `.js` / `.jsx` / `.html` ファイル。

以下の**すべて**が対象です（サフィックスが共通なので下記マッピングで一括対応できます）。
- Tailwind ユーティリティクラス（`bg-base-container-default` など）
- `@apply` ディレクティブ（`@apply bg-base-container-default;` など）
- CSS 変数の参照（`var(--color-base-container-default)` など）
- CSS 変数の独自定義・上書き（`--color-base-container-default: ...;` など）

## 置換マッピング

### Surface
- `base-container-default` → `surface`
- `base-surface-default` → `surface`
- `base-container-primary` → `inverse`
- `base-container-muted` → `muted`
- `base-container-subarea-accent` → `subarea-accent`
- `base-container-accent` → `accent`
- `base-surface-subarea-default` → `subarea`
- `base-surface-muted` → `subtle`

### Foreground
- `base-foreground-on-fill-inverse` → `inverse-foreground`
- `base-foreground-on-fill-bright` → `bright-foreground`
- `base-foreground-subarea-default` → `subarea-foreground`
- `base-foreground-subarea-accent` → `subarea-accent-foreground`
- `base-foreground-default` → `foreground`
- `base-foreground-accent` → `accent-foreground`
- `base-foreground-muted` → `muted-foreground`
- `base-foreground-subtle` → `subtle-foreground`
- `base-foreground-link` → `link`

### Border
- `base-stroke-default` → 下記「注意事項」参照

### Function
- `destructive-on-fill` → `destructive-foreground`
- `warning-on-fill` → `warning-foreground`
- `success-on-fill` → `success-foreground`
- `primary-on-fill` → `primary-foreground`

### Overlay
- `alpha-bright` → `overlay-bright`
- `alpha-gloom` → `overlay-dark`

## 注意事項

1. **`base-stroke-default` の置き換え**: フォーム入力要素（Checkbox、Radio、Input、Textarea、Select など）の内部で使われている場合は `border-input` / `divide-input` に、Card / CheckboxCard / RadioCard などフォーム**以外**では `border-border` / `divide-border` に置き換えてください。文脈を読んで判断してください。
2. **`ring-primary` / `outline-primary` の扱い**: 旧コードがフォーカスリングを `primary` カラーで描画していた箇所は、専用トークン `ring-ring` / `outline-ring` に置き換えてください。ただし装飾用途（ボタンのアクセントリングなど）で意図的に `primary` カラーを使っている場合はそのまま維持してください。
3. **作業後**: 置き換えた箇所を一覧で報告し、特に `border-input` / `border-border` の使い分けと `ring-primary` / `outline-primary` の判断根拠を示してください。
      

        find src -type f \( -name "*.svelte" -o -name "*.ts" -o -name "*.css" \) \
  -exec sed -i '' \
    -e 's/base-container-default/surface/g' \
    -e 's/base-container-primary/inverse/g' \
    -e 's/base-container-muted/muted/g' \
    -e 's/base-container-subarea-accent/subarea-accent/g' \
    -e 's/base-container-accent/accent/g' \
    -e 's/base-surface-default/surface/g' \
    -e 's/base-surface-subarea-default/subarea/g' \
    -e 's/base-surface-muted/subtle/g' \
    -e 's/base-foreground-on-fill-inverse/inverse-foreground/g' \
    -e 's/base-foreground-on-fill-bright/bright-foreground/g' \
    -e 's/base-foreground-subarea-default/subarea-foreground/g' \
    -e 's/base-foreground-subarea-accent/subarea-accent-foreground/g' \
    -e 's/base-foreground-default/foreground/g' \
    -e 's/base-foreground-accent/accent-foreground/g' \
    -e 's/base-foreground-muted/muted-foreground/g' \
    -e 's/base-foreground-subtle/subtle-foreground/g' \
    -e 's/base-foreground-link/link/g' \
    -e 's/base-stroke-default/border/g' \
    -e 's/destructive-on-fill/destructive-foreground/g' \
    -e 's/warning-on-fill/warning-foreground/g' \
    -e 's/success-on-fill/success-foreground/g' \
    -e 's/primary-on-fill/primary-foreground/g' \
    -e 's/alpha-bright/overlay-bright/g' \
    -e 's/alpha-gloom/overlay-dark/g' \
    {} +
      

        grep -rnE 'base-(container|surface|foreground|stroke)|-on-fill|alpha-(bright|gloom)' src/
      

        @import 'tailwindcss';
@import './rabeeui.css';
@import './colors-compat.css';
      

        @theme {
  /* container（旧） → surface 系（新） */
  --color-base-container-default: var(--color-surface);
  --color-base-container-primary: var(--color-inverse);
  --color-base-container-muted: var(--color-muted);
  --color-base-container-accent: var(--color-accent);
  --color-base-container-subarea-accent: var(--color-subarea-accent);

  /* surface（旧） → surface 系（新） */
  --color-base-surface-default: var(--color-surface);
  --color-base-surface-subarea-default: var(--color-subarea);
  --color-base-surface-muted: var(--color-subtle);

  /* foreground（旧） → foreground 系（新） */
  --color-base-foreground-default: var(--color-foreground);
  --color-base-foreground-accent: var(--color-accent-foreground);
  --color-base-foreground-muted: var(--color-muted-foreground);
  --color-base-foreground-subtle: var(--color-subtle-foreground);
  --color-base-foreground-on-fill-inverse: var(--color-inverse-foreground);
  --color-base-foreground-on-fill-bright: var(--color-bright-foreground);
  --color-base-foreground-subarea-default: var(--color-subarea-foreground);
  --color-base-foreground-subarea-accent: var(--color-subarea-accent-foreground);
  --color-base-foreground-link: var(--color-link);

  /* stroke（旧） → border（新） */
  --color-base-stroke-default: var(--color-border);

  /* function on-fill（旧） → *-foreground（新） */
  --color-destructive-on-fill: var(--color-destructive-foreground);
  --color-warning-on-fill: var(--color-warning-foreground);
  --color-success-on-fill: var(--color-success-foreground);
  --color-primary-on-fill: var(--color-primary-foreground);

  /* alpha（旧） → overlay（新） */
  --color-alpha-bright: var(--color-overlay-bright);
  --color-alpha-gloom: var(--color-overlay-dark);
}