Releases: relay-development/relay-design-system
Releases · relay-development/relay-design-system
Release list
v0.22.0
- アクセシビリティを MCP に公開: 新ツール
get_accessibility（WCAG 2.2 チェックリスト）＋get_componentに「アクセシビリティ（実装時の必須対応）」節を追加 - カタログ全コンポーネントページを 概要 / ガイドライン / アクセシビリティ の3タブ構成に統一
- キーボードフォーカスリングが表示されない a11y バグを修正（button / icon-button / alert / filter-chip / search-input）
v0.21.0
- リモート MCP サーバーを MCP 新仕様 2026-07-28 に両対応化(dual-era サーバー)。旧クライアント(initialize 方式)はそのまま動作 (#190)
- 新仕様対応の内容:
server/discover実装(instructions の新配布経路)、全結果にresultType、一覧系にttlMs/cacheScopeキャッシュヒント、ヘッダ↔ボディ検証(Mcp-Method/Mcp-Name/MCP-Protocol-Version) - stdio 版 MCP は公式 SDK の 2026-07-28 対応待ちのため現状維持(SDK 対応後に追従予定)
v0.20.0
v0.19.0
v0.18.0
- link にカラーバリエーションを追加: 緑を抑えたい補助リンク向けの
.link-neutral(fg-middle → hover fg-high)と、暗い背景用の.link-inverse(白 → hover slate-200)。下線は色によらず常に付く (#177) - 「テキストリンクは常に下線」原則を追加: 本文中のテキストリンク(a 要素)はデフォルトで下線。省略はボタン形状・アイコンボタン・メニュー項目など「テキストリンクに見えない見た目」のみ。hover 時のみ下線は禁止 (#176, #179)
- menu に sm サイズを追加: 項目数が多く密度を上げたいナビ向けの
.menu-item-sm(padding 8)。通常は md(既定)のまま (#180) - menu の状態カラー調整と末尾装飾アイコン
.menu-item-trailingの追加 (#175) - カタログのサイドナビを menu コンポーネントで刷新(ドッグフーディング) (#178)
v0.17.0
⚠️ 破壊的変更
- sidenav を汎用の menu コンポーネントにリネーム (#171) —
.sidenav/.sidenav-group/.sidenav-divider/.sidenav-itemは削除されました- 移行: クラス名を
.menu/.menu-group/.menu-divider/.menu-itemに置換（見た目・状態の挙動は同一） - 幅 280px 固定は撤廃され親要素に従います。サイドナビ用途は利用側で
w-70（= 280px、従来と同値）を指定してください - 拡張: 項目に button 要素（アクションメニュー用途）が使えるようになり、左アイコンは任意になりました
- ※ 0.x 系の慣行に倣い minor で公開しています
- 移行: クラス名を
変更点
- コンテナ幅のセマンティックトークンを追加 (#172) —
--container-page(1220px 暫定) /--container-article(672px)。ユーティリティmax-w-page/max-w-articleと、定型ラッパー.page-shell（max-width + 中央寄せ + 左右 16px）を同梱。ページシェルは page、長文本文は article。サイズ名max-w-5xl等の新規使用は非推奨--container-pageの値はデザイナー確認待ちの暫定（1220px / 1216px / 1280px が選択肢）
品質
- eval 5/5 PASS（メニューへのリネーム後も生成品質の劣化なし）
インストール
npm install @light-right/design-system@0.17.0カタログ: https://relay-development.github.io/relay-design-system/
v0.16.1
変更点
- デザイン原則の強化 — 背景と境界が曖昧な surface へのボーダーを必須化 (#167)。elevation（浮き上がり）表現へのシャドウ使用を禁止し、シャドウは modal / tooltip など最前面に重なる一時レイヤー専用に (#168)。card の使用法・snippets も追随（
.card-elevatedクラス自体は後方互換のため残置） - カタログ: リリースログページを追加 — 各バージョンの変更点の要約と GitHub リリースノートへのリンクを年別タイムラインで掲載。以降はリリースごとに 1 エントリ追記する運用 (#165, #166)
- カタログ: 品質評価（evals）ページ + OGP 対応 — AI 生成の定期健康診断（evals）の紹介ページと TOP カードを追加 (#156, #164)。全ページに OGP / X カードの meta タグと共有画像を整備 (#157–#159, #162)
- ドキュメント修正 — card 使用法に「テーブルだけを card で包まない」NG を追記 (#161)、hooks の説明を実態に合わせて修正 (#163)、evals ページの体裁調整 (#160)
CSS の見た目・クラス API に変更はありません。MCP（リモート / stdio）にはデザイン原則・禁止パターン・card 使用法の更新が反映されます。
インストール
npm install @light-right/design-system@0.16.1カタログ: https://relay-development.github.io/relay-design-system/
v0.16.0
変更点
- MCP: バージョン注記を追加 — get_component / get_setup / instructions に基準バージョンを明示し、利用プロジェクトの導入バージョンとずれている場合は node_modules 内の実 CSS を正とする指示を追加 (#149)
- MCP: 「事前知識で答えない」ルールを追加 — 実装を伴わない質問・レビューでも必ずツールで確認してから回答するよう instructions で強制し、存在しないクラスを案内するハルシネーションを防止 (#149, #151)
- ドキュメント修正 — README の Button/Badge クラス表記を実 CSS に一致させた（btn-danger → btn-negative / badge--negative → badge--danger） (#151)
CSS・トークン・コンポーネントの変更はありません。
開発側の変更（npm 配布物には含まれません）
v0.15.1
- checkbox / radio の使用法にガイドラインの要点を追加(見出しでのグループ区切り・肯定形ラベル・「その他」の用意・確定ボタンを挟む等。MCP
get_componentからも参照可能に) - ガイドラインページの導線を再構成(チェックボックス / ラジオページ下部のカードリンクからのみ遷移)
- 全ドキュメントを実態と突き合わせて監査し、古い記載を一掃(コンポーネント数 24・WCAG 2.2・radius 実値・リンク切れ・Slack 通知の説明ほか)
- アクセシビリティチェックリストの DS 担保主張を実測値に基づき修正(ターゲットサイズ 2.5.8 は共同責務に変更、コントラスト実測 10.4:1 等)
- カタログ: サイドバーの Figma synced 表記を削除、禁止パターン Top 10 を 7 原則網羅に再構成
v0.15.0
新コンポーネント
- Tooltip（ツールチップ） (#129) — ホバー / キーボードフォーカスで短い補足を出す吹き出し。CSS のみで動作、placement 4 方向（
.tooltip-{top,bottom,left,right}）、aria-describedbyで関連付け - Toggle Switch（トグルスイッチ） (#130) — ON/OFF を即時に切り替えるスイッチ。
<input type="checkbox" role="switch">ベース、サイズ md / sm
コンポーネント数は 23 → 25 になりました。
ドキュメント / CI
- アイコン数の表記を実数の 43 に統一、INTRODUCTION のバージョン表記を npm 参照に変更 (#131)
- MCP Worker の自動デプロイを修復（wrangler v4 / Node 22） (#128)
インストール
npm install @light-right/design-system@0.15.0カタログ: https://relay-development.github.io/relay-design-system/