@lism-css/mcp 0.17.0 → 0.18.0

package/dist/data/docs-index.json

@@ -73,11 +73,11 @@
   {
     "sourcePath": "tokens.mdx",
     "title": "デザイントークン",
-    "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
+    "description": "Lism CSS で定義されているカラー、余白、シャドウなどのデザイントークン一覧を紹介します。",
     "category": "guide",
     "headings": ["COLOR", "Typography", "SPACE", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
     "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size", "color", "spacing", "typography"],
-    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・スペーシングは個別ページでも詳細を解説。"
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・余白は個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
@@ -108,8 +108,8 @@
   },
   {
     "sourcePath": "tokens/spacing.mdx",
-    "title": "スペーシングトークン",
-    "description": "Lism CSS のフィボナッチ数列に基づくスペーシングトークンと、対応するpropertyクラスについて解説します。",
+    "title": "余白トークン",
+    "description": "Lism CSS のフィボナッチ数列に基づく余白トークンと、対応するpropertyクラスについて解説します。",
     "category": "guide",
     "headings": ["SPACE: 余白のスケーリング", "対応する Property Class"],
     "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class"],
@@ -200,7 +200,7 @@
   },
   {
     "sourcePath": "responsive.mdx",
-    "title": "Prop Responsive",
+    "title": "Responsive",
     "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
     "category": "guide",
     "headings": ["レスポンシブ対応", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.17.0` / `@lism-css/ui@0.17.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.18.0` / `@lism-css/ui@0.17.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
@@ -195,7 +195,7 @@ Figma 等のデザインデータから値を読み取って実装する場合
      - 一貫性・スケーラビリティを優先。微差は許容する。
    - **C. トークン全体の基準値を上書きする**
      - デザインのスケールに合わせて、`--s-unit` / `--fz-mol` などの基準変数や、 `--s10`, `--fz--xl` , `--bdrs--10` などの**具体的な各トークン変数を `global.css` で再定義**することで、トークン全体をデザインデータに揃える。
-     - 既存トークンの上書きで吸収できない場合に限り、`--s25` 等のカスタムトークンを追加する。
+     - 既存トークンの上書きで吸収できない場合に限り、`--s45` 等のカスタムトークンを追加する。
 
 4. 確認結果に従って実装する。
 
@@ -220,7 +220,7 @@ Figma 等のデザインデータから値を読み取って実装する場合
 - [trait-class.md](./trait-class.md) — 要素に役割・機能を宣言する Trait クラス（`is--`/`has--`）の一覧と用途。
 - [utility-class.md](./utility-class.md) — 具体的な用途・装飾・機能を持つユーティリティクラス（`u--` クラス）の一覧と用途。
 - [property-class.md](./property-class.md) — 単一のCSSプロパティに対応するProperty Class（`-{prop}:{value}`形式のクラス）の一覧・記法。
-- [prop-responsive.md](./prop-responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
+- [responsive.md](./responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
 - [components-core.md](./components-core.md) — `lism-css`パッケージに含まれるコアコンポーネントの一覧と用途。（React, Astroで使える`<Lism>`・Lism Props・getLismProps ）
 - [components-ui.md](./components-ui.md) — `@lism-css/ui`パッケージに含まれるUIコンポーネント（Accordion・Modal・Tabs・Button 等）の Props・構造とCLIコマンドによるインストール方法。
 - [customize.md](./customize.md) — SCSS変数の上書きによる、lism-cssのコアCSSの挙動カスタマイズ方法・`lism.config.js` によるコアコンポーネント挙動のカスタマイズ方法。

package/dist/data/guides/antipatterns.md

@@ -37,13 +37,13 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 
 ### スペース（`p` / `m` / `g` 等）
 
-スペーストークンに**中間値は存在しない**（`5/10/15/20/30/40/50/60/70/80` のみ）。`8/12/14/25/35/45/65/75` 等を書きそうになったら、必ず最寄りトークンに丸めるか、ユーザーに方針確認すること（→ [SKILL.md のデザイン取り込みフロー](./SKILL.md#デザインデータ取り込み時のフロー)）。
+スペーストークンの数値は**離散的**で、`5/10/15/20/25/30/35/40/50/60/70/80` のみが用意されている。`8/12/14/45/65/75` 等を書きそうになったら、必ず最寄りトークンに丸めるか、ユーザーに方針確認すること（→ [SKILL.md のデザイン取り込みフロー](./SKILL.md#デザインデータ取り込み時のフロー)）。
 
 | NG | OK | 理由 |
 |---|---|---|
-| `p="8"` | `p="10"` | スペーストークンは`5/10/15/20/30/40/50/60/70/80`。tailwindのような4の倍数ではない |
+| `p="8"` | `p="10"` | スペーストークンは離散値のみ。tailwindのような4の倍数で連続するスケールではない |
 | `g="6"` | `g="5"` | 同上 |
-| `m="25"`, `m="35"` | `m="20"` or `m="30"` | 中間値は存在しない |
+| `m="45"`, `m="55"` | `m="40"` or `m="50"` | `40` 以降の中間値は用意されていない（前半は `5/15/25/35` まで補完済み） |
 | `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
 
 ### フォントサイズ（`fz`）
@@ -226,6 +226,133 @@ Lism CSS では、プレフィックス（`c--` / `is--` / `has--` / `u--` / `se
 
 ---
 
+## px / 固定値の直書き
+
+デザインデータ由来の px / rem / em をそのまま書くと、Lism CSS のスケール統一が崩れる。**書く前に [SKILL.md のデザインデータ取り込み時のフロー](./SKILL.md#デザインデータ取り込み時のフロー) に従い、ユーザーに「A: そのまま採用 / B: 最寄りトークンに丸める / C: トークン基準値を上書きする」を確認すること**。確認なしに固定値を採用しない。
+
+### スペース・サイズ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `padding: 3px 10px` | `padding: var(--s5) var(--s10)` または Props で `py="5" px="10"` | `3px` はトークン外。最寄りは `--s5`(4px) |
+| `min-width: 28px; height: 28px` | `min-w` / `h` をトークン値に丸める、または基準値を上書き | `28px` はトークン外 |
+| `gap: var(--s5); padding: var(--s10) var(--s15)` を CSS で直書き | `<Lism g="5" py="10" px="15">` | Property Class / Props で書ける |
+
+### 角丸・ボーダー
+
+| NG | OK | 理由 |
+|---|---|---|
+| `border-radius: 2px` | `border-radius: var(--bdrs--10)`（4px） | 角丸トークンの最小は `--bdrs--10`（4px）。`2px` はトークン外 |
+| `border-radius: 6px` | `--bdrs--10`（4px）か `--bdrs--20`（8px）に丸める | 6px はトークン外 |
+
+### タイポグラフィ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `font-size: 13px` を直書き | `font-size: var(--fz--xs)` または Props で `fz="xs"` | フォントサイズは調和数列スケール。固定値は避ける |
+| `letter-spacing: 0.02 / 0.12 / 0.14 / 0.18 / 0.2 / 0.24em` を散在 | `--lts--s/-l` を使う、または独自の `--lts--*` を `global.css` で追加 | デフォルトの `lts` トークンは `s/l` のみ。多種混在はデザイントークンとして不健全 |
+
+### 直書きしてよい例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- `media query` / `@container` の閾値など、ブラウザ仕様上 px 必須の値
+
+---
+
+## Property Class で書けるのに CSS で書く
+
+`c--*` を定義したくなったら、まず宣言ごとに Property Class へ落とせるか確認する。落とせる宣言を CSS に書くと、CSS が肥大化し、Property Class の利点（差分上書きの容易さ・読みやすさ）が失われる。
+
+| NG（CSS 直書き） | OK（Property Class） |
+|---|---|
+| `.c--tag { font-size: var(--fz--xs); padding: var(--s10); background: var(--base-2); border-radius: var(--bdrs--10); }` | `<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">` |
+| `.c--eyebrow { font-size: var(--fz--2xs); color: var(--text-2); text-transform: uppercase; }` | `<span class="c--eyebrow -fz:2xs -c:text-2 -tt:uppercase">` |
+
+
+CSS に残すのは、基本的には　`::before` / `> li` などの「Primitive / Trait / Property Class で書けないセレクタ」を伴う宣言。単一要素への装飾束は呼び出し側マークアップに移す。
+
+なお、**CSS が空になっても `c--*` クラス名はマークアップに残して構わない**（むしろ推奨）。コンポーネントとしての役割をソースから読み取りやすくする目的で、意味づけ用に付けたままにする。
+
+
+---
+
+## `is--` の誤用（状態・バリエーション）
+
+Lism CSS の `is--` プレフィックスは「**〜である**」という**役割・存在の宣言**を表す trait 用（`is--container` / `is--wrapper` / `is--layer` / `is--boxLink` / `is--coverLink` / `is--skipFlow` / `is--side` 等）。ユーザーが独自に `is--*` を追加することは可能だが、**その要素の役割（trait）を宣言するもの**であることが条件で、**状態管理やスタイルバリエーション目的に流用しない**（`is--active` / `is--current` / `is--solid` などは誤用）。
+
+→ 詳細: [trait-class.md](./trait-class.md#is-trait役割宣言)
+
+`is--` と紛れがちな 2 つの用途は、Lism では別の手段で表現する：
+
+### 1. 状態管理 → `data-*` 属性を使う
+
+オン/オフが切り替わる状態（active / current / disabled / open / selected 等）は、`is--*` クラスを増やさず HTML の `data-*` 属性で表現する。CSS は属性セレクタで書く。
+
+| NG | OK |
+|---|---|
+| `<a class="c--catTab is--active">` + `.c--catTab.is--active { ... }` | `<a class="c--catTab" data-is-active>` + `.c--catTab[data-is-active] { ... }` |
+| `<li class="c--pager_num is--current">` + `.c--pager_num.is--current { ... }` | `<li class="c--pager_num" aria-current="page">` + `.c--pager_num[aria-current] { ... }` |
+| `<a class="c--pager_nav is--disabled">` + `.c--pager_nav.is--disabled { ... }` | `<a class="c--pager_nav" data-is-disabled>` + `.c--pager_nav[data-is-disabled] { ... }` |
+
+理由：
+
+- `is--*` は「役割宣言」用の trait であり、状態を表すクラスを `is--*` として増やすと意味体系（trait か state か）が混在して読みにくくなる
+- `data-*` は HTML 標準の状態表現で、JS からの切替（`element.dataset.isActive = ''` / `delete element.dataset.isActive`）も自然
+- ARIA 属性で意味が表せる場合（`aria-current` / `aria-disabled` / `aria-selected` 等）は ARIA を優先し、その属性自体を CSS セレクタにする
+
+### 2. スタイルバリエーション → BEM Modifier `c--{name}--{variant}`
+
+「同じコンポーネントの見た目違い」は、Lism CSS 公式の BEM Modifier 記法で表現する（→ [css-rules.md の Component Class](./css-rules.md#component-classc--)）。
+
+| NG | OK |
+|---|---|
+| `<span class="c--tag is--solid">` + `.c--tag.is--solid { ... }` | `<span class="c--tag c--tag--solid">` + `.c--tag.c--tag--solid { ... }` |
+| `<button class="c--button is--outline">` | `<button class="c--button c--button--outline">` |
+
+なお、Modifier であってもまずは [Property Class で表現できないか](#property-class-で書けるのに-css-で書く) を検討すること。「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
+
+---
+
+## `--keycolor` の誤用
+
+`--keycolor` は要素単位で「軸となる色」を切り替えるための**ローカル変数**。サイト全体のブランドカラーやリンクカラーには使わない。
+
+### `:root` でのグローバル上書き
+
+| NG | OK | 理由 |
+|---|---|---|
+| `:root { --keycolor: #c8553d; }` | `:root { --brand: #c8553d; }`（または `--accent` / `--link`） | サイト共通の色は `--brand` / `--accent` / `--link` などのセマンティックカラーで定義する |
+
+### アクセントカラーとしての `keycolor` 参照
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Link c="keycolor">` | `<Link c="brand">` または `<Link c="link">` | リンク・hover などの恒常的なアクセントは `brand` / `link` を使う |
+| `hov={{ c: 'keycolor' }}` | `hov={{ c: 'brand' }}` | 同上 |
+| `border-inline-start: 3px solid var(--keycolor)`（CSS 直書き） | `border-inline-start: 3px solid var(--brand)` | 同上 |
+
+### `--keycolor` を使うべき場面
+
+「**そのボックス／コンポーネント自身の軸色**」を切り替えたい時のみ：
+
+```html
+<!-- u--cbox や c--callout など、ボックス全体の色味を局所的に切り替える -->
+<div class="u--cbox" style="--keycolor: var(--red)">
+  <p class="-c" style="--c: var(--keycolor)">danger 用カラーリング</p>
+</div>
+```
+
+```jsx
+<Lism class="u--cbox" keycolor="var(--red)">
+  <Text c="keycolor">...</Text>
+</Lism>
+```
+
+詳細: [tokens.md のキーカラー変数セクション](./tokens.md#キーカラー変数-keycolor)
+
+---
+
 ## Prop 型ミス
 
 ### Heading の `level` は文字列

package/dist/data/guides/naming.md

@@ -21,7 +21,7 @@
 |------|------|-----|
 | 基本 | `--{prop}--{token}` | `--fz--l`, `--bdrs--20`, `--bxsh--10`, `--sz--s` |
 | カラー | `--{color}` | `--brand`, `--text`, `--text-2`, `--red` |
-| スペーシング | `--s{Token}` | `--s10`, `--s40` |
+| 余白 | `--s{Token}` | `--s10`, `--s40` |
 
 トークンのバリエーション:
 

package/dist/data/guides/primitive-class.md

@@ -119,7 +119,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 #### 補足
 
 - 各 Primitive の詳細・使用例は [primitives/](./primitives/) 配下の個別ファイルを参照
-- レスポンシブな値（配列指定）を使う場合は祖先要素に `is--container` が必須（[prop-responsive.md](./prop-responsive.md)）
+- レスポンシブな値（配列指定）を使う場合は祖先要素に `is--container` が必須（[responsive.md](./responsive.md)）
 
 
 ## Atomic Primitive（`a--`）

package/dist/data/guides/primitives/a--spacer.md

@@ -11,7 +11,7 @@
 
 ## 専用Props
 
-`<Spacer>` では **`w` / `h` に対して SPACE トークンの値**が使えます（他のコンポーネントでは SIZE トークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
+`<Spacer>`では **`w` / `h` に対してSPACEトークンの値**が使えます（他のコンポーネントではSIZEトークンが優先されるため、スペースサイズを直感的に指定できる特殊対応）。
 
 ## Usage
 
@@ -29,7 +29,7 @@
 <p>Content...</p>
 ```
 
-### SPACE トークンを使う
+### SPACEトークンを使う
 
 ```jsx
 <p>Content...</p>

package/dist/data/guides/property-class.md

@@ -187,13 +187,13 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | `i-y-s` | `inset-block-start` | — | — |
 | `i-y-e` | `inset-block-end` | — | — |
 
-### スペーシング — Padding
+### 余白 — Padding
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACE トークン) | `-p_sm`, `-p_md` |
-| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACE トークン) | `-px_sm`, `-px_md` |
-| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACE トークン) | `-py_sm`, `-py_md` |
+| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | `-p_sm`, `-p_md` |
+| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | `-px_sm`, `-px_md` |
+| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | `-py_sm`, `-py_md` |
 | `px-s` | `padding-inline-start` | — | `-px-s_sm`, `-px-s_md` |
 | `px-e` | `padding-inline-end` | — | `-px-e_sm`, `-px-e_md` |
 | `py-s` | `padding-block-start` | — | `-py-s_sm`, `-py-s_md` |
@@ -203,18 +203,18 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 | `pt` | `padding-top` | — | `-pt_sm`, `-pt_md` |
 | `pb` | `padding-bottom` | — | `-pb_sm`, `-pb_md` |
 
-SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80`
+SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80`
 
-### スペーシング — Margin
+### 余白 — Margin
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACE トークン) | `-m_sm`, `-m_md` |
-| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACE トークン) | `-mx_sm`, `-mx_md` |
-| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACE トークン) | `-my_sm`, `-my_md` |
+| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | `-m_sm`, `-m_md` |
+| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | `-mx_sm`, `-mx_md` |
+| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | `-my_sm`, `-my_md` |
 | `mx-s` | `margin-inline-start` | `-mx-s:auto` | `-mx-s_sm`, `-mx-s_md` |
 | `mx-e` | `margin-inline-end` | `-mx-e:auto` | `-mx-e_sm`, `-mx-e_md` |
-| `my-s` | `margin-block-start` | `-my-s:auto`, `-my-s:0`, `-my-s:5`, `-my-s:10`, `-my-s:20`, ... (SPACE トークン) | `-my-s_sm`, `-my-s_md` |
+| `my-s` | `margin-block-start` | `-my-s:auto`, `-my-s:0`, `-my-s:5`, `-my-s:10`, `-my-s:20`, ... (SPACEトークン) | `-my-s_sm`, `-my-s_md` |
 | `my-e` | `margin-block-end` | `-my-e:auto` | `-my-e_sm`, `-my-e_md` |
 | `ml` | `margin-left` | — | `-ml_sm`, `-ml_md` |
 | `mr` | `margin-right` | — | `-mr_sm`, `-mr_md` |
@@ -225,7 +225,7 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACE トークン) | `-g_sm`, `-g_md` |
+| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | `-g_sm`, `-g_md` |
 | `cg` | `column-gap` | — | `-cg_sm`, `-cg_md` |
 | `rg` | `row-gap` | — | `-rg_sm`, `-rg_md` |
 
@@ -375,4 +375,3 @@ Property Class をコードベース全体で一括修正する場合、同じ P
 | JSX Props | `p="20"` / `p={20}` / `p={[20, 30]}` |
 | getLismProps オブジェクト | `{ p: '20' }` / `{ p: 20 }` |
 
-

package/dist/data/guides/{prop-responsive.md → responsive.md}

@@ -1,20 +1,55 @@
 # レスポンシブ対応
 
-Lism CSS はコンテナクエリをデフォルトで採用しています。  
-ブレークポイント: `sm: 480px`, `md: 800px`（`lg: 1120px` はカスタマイズにより利用可能）
+Lism CSS は**コンテナクエリ**をデフォルトで採用しています（メディアクエリへの切り替えは customize.md を参照）。
 
 ## TOC
 
+- [ブレイクポイント](#ブレイクポイント)
 - [HTML / Property Class での指定](#html--property-class-での指定)
 - [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
 
-[詳細](https://lism-css.com/docs/responsive.md)
+[詳細](https://lism-css.com/docs/responsive/)
 
 ---
 
+## ブレイクポイント
+
+**モバイルファースト**で定義。各ラベルは「**そのサイズを超えた時から効く**」セマンティクスです（`sm` は「スマホ専用」ではなく「`sm` を超えたサイズで効く」ラベル）。**特定デバイスサイズに依存しないシンプルな閾値**を採用しています。
+
+```
+Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
+             │                       │                        │
+          sm:480px                md:800px               (lg:1120px)
+```
+
+| BP | 値 | 効くタイミング |
+|----|-----|----------------|
+| `sm` | 480px | sm 以上 |
+| `md` | 800px | md 以上 |
+| (`lg`) | 1120px | lg 以上 |
+
+**標準サポートは `sm` / `md` のみ。** `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+
+例: `-d:none -d_sm:block` → デフォルト非表示、`sm` 以上で表示。
+
+### SCSS から利用する
+
+ブレイクポイント自体を SCSS で参照する場合は `query` モジュール経由:
+
+```scss
+@use 'lism-css/scss/query' as query;
+
+@include query.bp-up('sm') {
+  // sm 以上で効くスタイル（width >= 480px）
+}
+@include query.bp-up('md') {
+  // md 以上で効くスタイル（width >= 800px）
+}
+```
+
 ## HTML / Property Class での指定
 
-ブレークポイント用のクラス `-{prop}_{bp}` と CSS変数 `--{prop}_{bp}` を組み合わせます。
+ブレイクポイント用のクラス `-{prop}_{bp}` と CSS変数 `--{prop}_{bp}` を組み合わせます。
 
 ```html
 <!-- sm 以上で p:30, md 以上で p:40 に切り替え -->
@@ -30,6 +65,7 @@ Lism CSS はコンテナクエリをデフォルトで採用しています。
 
 **仕組み:**
 - BPクラス `-{prop}_{bp}` は `@container (min-width: ...)` 内で発火し、`--{prop}_{bp}` 変数で切り替え先の値を指定
+- コンテナクエリ採用のため、レスポンシブ値を使うには祖先要素に `is--container` などコンテナ宣言が必要
 - 出力形式はプロパティによって 2 パターン（基本 / 例外）
 
 **基本パターン** — BP 用変数を直接読む:

package/dist/data/guides/set-class.md

@@ -10,9 +10,9 @@ set-- は目的別に 2 カテゴリに分かれます。
 | カテゴリ | 用途 | クラス |
 |---------|------|--------|
 | 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
-| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` |
+| 変数のセット | CSS 変数のセットアップのみを行う | `set--var:bxsh` / `set--var:hov` / `set--var:bdrsInner` / `set--var:s` |
 
-`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`）。
+`set--var:{name}` の `{name}` は、そのクラスがセットアップする CSS 変数の名称に対応します（例: `--bxsh--*` → `var:bxsh`、`--_isHov` / `--_notHov` → `var:hov`、`--bdrs--inner` → `var:bdrsInner`、`--s*` → `var:s`）。
 
 ## TOC
 
@@ -21,6 +21,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 - [`set--var:bxsh`](#set--varbxsh)
 - [`set--var:hov`](#set--varhov)
 - [`set--var:bdrsInner`](#set--varbdrsinner)
+- [`set--var:s`](#set--vars)
 
 [詳細](https://lism-css.com/docs/set-class.md)
 
@@ -37,6 +38,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 | `set--var:bxsh` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
 | `set--var:hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
 | `set--var:bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
+| `set--var:s` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.scss) |
 
 ---
 
@@ -158,3 +160,20 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
   <Lism bdrs="inner">...</Lism>
 </Lism>
 ```
+
+
+## `set--var:s`
+
+余白トークン（`--s5`〜`--s80`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
+
+詳細なスケールと使い方は[tokens.mdの`set--var:s`ユーティリティ](./tokens.md#set--vars-ユーティリティ)を参照してください。
+
+使用例:
+
+```html
+<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+```
+
+```jsx
+<Button set="var:s" fz="s" py="10" px="20">...</Button>
+```

package/dist/data/guides/tokens.md

@@ -28,7 +28,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
-| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
+| 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
 | ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
 | 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
@@ -49,22 +49,39 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 余白 (space)
 
-フィボナッチ数列ベースのスケーリング。`--s-unit`（≒ 8px）を基準単位とする。
+フィボナッチ数列ベースのスケーリング。`--s-unit`（デフォルト `calc(var(--fz--base) * 0.5)` ＝ ≒ 8px）を基準単位とする。
 
 | CSS変数 | 値 | 実サイズ目安 |
 |---------|-----|------------|
-| `--s5` | `calc(0.5 * var(--s-unit))` | ≒ 4px |
+| `--s5` | `calc(var(--s-unit) * 0.5)` | ≒ 4px |
 | `--s10` | `var(--s-unit)` | ≒ 8px |
-| `--s15` | `calc(1.5 * var(--s-unit))` | ≒ 12px |
-| `--s20` | `calc(2 * var(--s-unit))` | ≒ 16px |
-| `--s30` | `calc(3 * var(--s-unit))` | ≒ 24px |
-| `--s40` | `calc(5 * var(--s-unit))` | ≒ 40px |
-| `--s50` | `calc(8 * var(--s-unit))` | ≒ 64px |
-| `--s60` | `calc(13 * var(--s-unit))` | ≒ 104px |
-| `--s70` | `calc(21 * var(--s-unit))` | ≒ 168px |
-| `--s80` | `calc(34 * var(--s-unit))` | ≒ 272px |
-
-係数 `0.5, 1, 1.5, 2, 3, 5, 8, 13, 21, 34` はフィボナッチ数列に基づいている。`--s-unit` を上書きすることでスケール全体を調整可能。
+| `--s15` | `calc(var(--s-unit) * 1.5)` | ≒ 12px |
+| `--s20` | `calc(var(--s-unit) * 2)` | ≒ 16px |
+| `--s25` | `calc(var(--s-unit) * 2.5)` | ≒ 20px |
+| `--s30` | `calc(var(--s-unit) * 3)` | ≒ 24px |
+| `--s35` | `calc(var(--s-unit) * 4)` | ≒ 32px |
+| `--s40` | `calc(var(--s-unit) * 5)` | ≒ 40px |
+| `--s50` | `calc(var(--s-unit) * 8)` | ≒ 64px |
+| `--s60` | `calc(var(--s-unit) * 13)` | ≒ 104px |
+| `--s70` | `calc(var(--s-unit) * 21)` | ≒ 168px |
+| `--s80` | `calc(var(--s-unit) * 34)` | ≒ 272px |
+
+`--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。
+
+### `set--var:s` ユーティリティ
+
+`set--var:s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
+
+```html
+<!-- ボタンの padding が button 自身の font-size に追従する -->
+<button class="set--var:s -fz:s -py:10 -px:20">...</button>
+```
+
+`--s-unit` を任意値で上書きすれば、別の基準にも切り替えられる。
+
+```html
+<button class="set--var:s -p:10" style="--s-unit: .4375em">...</button>
+```
 
 
 ## フォントサイズ (fz)

package/dist/tools/get-guide.js

@@ -21,7 +21,7 @@ const GUIDE_TOPICS = {
     },
     'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
     'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },
-    responsive: { file: 'prop-responsive.md', label: 'Responsive design, breakpoints, container queries' },
+    responsive: { file: 'responsive.md', label: 'Responsive design, breakpoints, container queries' },
     antipatterns: {
         file: 'antipatterns.md',
         label: 'AI code-generation antipatterns: token typos, prop type mistakes, layout choice errors, responsive omissions',

package/dist/tools/get-overview.js

@@ -3,14 +3,14 @@ import { extractSection } from '../lib/markdown-utils.js';
 import { markdownResponse, error, READ_ONLY_ANNOTATIONS } from '../lib/response.js';
 /**
  * SKILL.md を中核に、css-rules.md の Layer 構造セクションと
- * prop-responsive.md のブレークポイントセクションを付加して返す。
+ * responsive.md のブレイクポイントセクションを付加して返す。
  */
 function buildOverviewMarkdown() {
     const skill = loadMarkdown('SKILL.md');
     const cssRules = loadMarkdown('css-rules.md');
-    const responsive = loadMarkdown('prop-responsive.md');
+    const responsive = loadMarkdown('responsive.md');
     const layerSection = extractSection(cssRules, 'CSS Layer 構造');
-    const bpSection = extractSection(responsive, 'ブレークポイント');
+    const bpSection = extractSection(responsive, 'ブレイクポイント');
     const parts = [skill];
     if (layerSection) {
         parts.push('\n---\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {