カスタマイズの基本
lism-css パッケージは、コンポーネントが受け付ける props / tokens / traits、出力されるクラスやブレイクポイント、本番CSSのサイズをカスタマイズできます。設定の入口は lism.config.js（@lism-css/plugin が必要）と SCSS 変数（設定ファイルを使わない）の2つで、どちらを使うかはビルド構成で決まります。加えて、本番CSSの軽量化には CSS Purge を併用できます。
カスタマイズの入口
| 方法 | 向いている構成 | ページ |
|---|---|---|
lism.config.js |
@lism-css/plugin を使う構成（推奨）。Vite / Astro / Next.js ではバンドラ連携で自動反映され、それ以外は同梱の CLI で CSS をビルドします |
lism.config.js でのカスタマイズ |
| SCSS 変数の上書き | lism.config.js を使わず lism-css/scss を直接読み込む構成。コンポーネントからは :value 記法で使います |
SCSS でのカスタマイズ |
| CSS Purge | 本番CSSから未使用クラスを削除して軽量化したい場合。上のどちらとも併用できます | CSS Purge |
Vite / Astro を使っている場合は、@lism-css/plugin の統合プラグイン1つで「lism.config.js の読み込み・CSSへの自動反映・型の自動生成」がまとめて有効になります。まずは lism.config.js でのカスタマイズ を起点にするのがおすすめです。
@layer なし版や全部入りの full.css への切り替えは設定ではなく読み込むファイルの選択です。CSSファイルの種類を参照してください。