ksk-design-system 1.35.0

package/src/styles/categorical.css

@@ -0,0 +1,161 @@
+/* =============================================================
+   KSK Design System — Categorical (Qualitative) Color Tokens
+
+   「カテゴリ識別子」専用の質的カラーパレット。
+   Brand / Status とは無関係な “何番目のカテゴリか” を色で区別するための
+   16 色スケール。カレンダーの予定ドット、カテゴリ chip、ボード列の背景、
+   グラフ系列などで使う（例: belle-todo の結婚式準備カテゴリ）。
+
+   ─── 設計上の3つの約束 ──────────────────────────────────────
+   1. テーマ非依存:
+      Brand-* には一切連動しない固定値。テーマ（default/orange/green/
+      violet）を差し替えてもカテゴリの色は変わらない＝アプリ横断で
+      「カテゴリ⇄色」の対応が一貫する。External Brand（--Brand-Line 等）
+      と同じく semantic 層に固定 hex で置く方針。
+   2. 並び順は「分離度の高い順」:
+      --Categorical-1..N は CVD シミュレーション上の色差（CIEDE2000）が
+      大きい順に並べてある。K 色だけ必要なら 1..K を順に使えば、その K 色は
+      可能な範囲で最も見分けやすい組み合わせになる（colorbrewer / d3 と同じ思想）。
+   3. 3 階層（base / Subtle / Bold）:
+      --Categorical-N         … base。ドット・アイコン・小さな塗り（mark）用。
+      --Categorical-N-Subtle  … 淡いティント。行・列・カードの背景用（≒ 50/100）。
+      --Categorical-N-Bold    … 濃色。chip ラベルや見出しなど「文字」用。
+
+   ─── アクセシビリティ（WCAG / CVD） ─────────────────────────
+   • 文字には必ず -Bold を使うこと。base(≒500)は白背景で 4.5:1 に届かない
+     色が大半（黄/シアン/ライム等）。-Bold は 16 色すべてが
+       - 白背景で ≥4.9:1（AA 通常テキスト）
+       - 自分の -Subtle 上で ≥4.5:1（chip: Subtle 背景＋Bold 文字）
+     を満たす。
+   • ドット/アイコン（非テキスト, 1.4.11 = 3:1）は base でよいが、
+     warm/cyan 系（orange/amber/yellow/lime/teal/cyan/sky ≒ index 5,7,8,12,13）は
+     白背景で 3:1 未満。これらが “色だけ” で意味を伝える唯一の手段になる場合は
+     -Bold をドットに使うか、アイコン/ラベルを併記すること。
+   • CVD（色覚多様性）: 16 色のうち赤緑系 CVD でも確実に見分けられるのは
+     概ね先頭 8〜9 色まで。末尾の紫系（fuchsia/purple/violet = 14,15,16）は
+     protanopia でほぼ同色になる。色だけに依存せずアイコン・ラベル・形状を
+     併用すること（WCAG 1.4.1 Use of Color）。10 色を超えて識別が必須なら
+     カテゴリのグルーピングを検討。
+
+   ─── tint を mix で自動生成したい場合 ───────────────────────
+   本ファイルは AA 検証済みの固定値を採用しているが、base から導出するなら:
+     Subtle(light) ≈ color-mix(in srgb, var(--Categorical-N) 15%, white)        … 推奨 a = 15%
+     Subtle(dark)  =  color-mix(in srgb, var(--Categorical-N) 18%, transparent)  … 暗面に重ねる
+   ※ 15% mix だと Bold 文字とのコントラストが一部 4.48:1 と AA 境界ぎりぎりに
+     なるため、確実な AA が必要なら本ファイルの明示値（Tailwind-100 相当）を使うこと。
+
+   命名規則: --Categorical-{1..16}{,-Subtle,-Bold}
+   ============================================================= */
+
+:root {
+  /* ─── base（mark: ドット/アイコン/小塗り。Tailwind-500 相当） ─── */
+  --Categorical-1:  #EF4444; /* red      */
+  --Categorical-2:  #0EA5E9; /* sky      */
+  --Categorical-3:  #14B8A6; /* teal     */
+  --Categorical-4:  #64748B; /* slate    */
+  --Categorical-5:  #EAB308; /* yellow   */
+  --Categorical-6:  #6366F1; /* indigo   */
+  --Categorical-7:  #F97316; /* orange   */
+  --Categorical-8:  #06B6D4; /* cyan     */
+  --Categorical-9:  #EC4899; /* pink     */
+  --Categorical-10: #F43F5E; /* rose     */
+  --Categorical-11: #3B82F6; /* blue     */
+  --Categorical-12: #84CC16; /* lime     */
+  --Categorical-13: #F59E0B; /* amber    */
+  --Categorical-14: #D946EF; /* fuchsia  */
+  --Categorical-15: #A855F7; /* purple   */
+  --Categorical-16: #8B5CF6; /* violet   */
+
+  /* ─── Subtle（背景ティント。Tailwind-100 相当 ≒ base 15% on white） ─── */
+  --Categorical-1-Subtle:  #FEE2E2;
+  --Categorical-2-Subtle:  #E0F2FE;
+  --Categorical-3-Subtle:  #CCFBF1;
+  --Categorical-4-Subtle:  #F1F5F9;
+  --Categorical-5-Subtle:  #FEF9C3;
+  --Categorical-6-Subtle:  #E0E7FF;
+  --Categorical-7-Subtle:  #FFEDD5;
+  --Categorical-8-Subtle:  #CFFAFE;
+  --Categorical-9-Subtle:  #FCE7F3;
+  --Categorical-10-Subtle: #FFE4E6;
+  --Categorical-11-Subtle: #DBEAFE;
+  --Categorical-12-Subtle: #ECFCCB;
+  --Categorical-13-Subtle: #FEF3C7;
+  --Categorical-14-Subtle: #FAE8FF;
+  --Categorical-15-Subtle: #F3E8FF;
+  --Categorical-16-Subtle: #EDE9FE;
+
+  /* ─── Bold（文字/ラベル用。Tailwind-700 相当, ≥4.5:1 on white & on -Subtle） ─── */
+  --Categorical-1-Bold:  #B91C1C;
+  --Categorical-2-Bold:  #0369A1;
+  --Categorical-3-Bold:  #0F766E;
+  --Categorical-4-Bold:  #334155;
+  --Categorical-5-Bold:  #A16207;
+  --Categorical-6-Bold:  #4338CA;
+  --Categorical-7-Bold:  #C2410C;
+  --Categorical-8-Bold:  #0E7490;
+  --Categorical-9-Bold:  #BE185D;
+  --Categorical-10-Bold: #BE123C;
+  --Categorical-11-Bold: #1D4ED8;
+  --Categorical-12-Bold: #4D7C0F;
+  --Categorical-13-Bold: #B45309;
+  --Categorical-14-Bold: #A21CAF;
+  --Categorical-15-Bold: #7E22CE;
+  --Categorical-16-Bold: #6D28D9;
+}
+
+/* ─── Dark Mode ───────────────────────────────────────────────
+   色相（カテゴリ識別）は保ったまま、明度だけ暗面向けに調整。
+   base 500→400（暗面で映える）, Bold 700→300（暗面の文字）,
+   Subtle は base を 18% 透過で暗面に重ねる（semantic.css の Subtle と同方針）。 */
+.dark {
+  --Categorical-1:  #F87171;
+  --Categorical-2:  #38BDF8;
+  --Categorical-3:  #2DD4BF;
+  --Categorical-4:  #94A3B8;
+  --Categorical-5:  #FACC15;
+  --Categorical-6:  #818CF8;
+  --Categorical-7:  #FB923C;
+  --Categorical-8:  #22D3EE;
+  --Categorical-9:  #F472B6;
+  --Categorical-10: #FB7185;
+  --Categorical-11: #60A5FA;
+  --Categorical-12: #A3E635;
+  --Categorical-13: #FBBF24;
+  --Categorical-14: #E879F9;
+  --Categorical-15: #C084FC;
+  --Categorical-16: #A78BFA;
+
+  --Categorical-1-Subtle:  color-mix(in srgb, var(--Categorical-1) 18%, transparent);
+  --Categorical-2-Subtle:  color-mix(in srgb, var(--Categorical-2) 18%, transparent);
+  --Categorical-3-Subtle:  color-mix(in srgb, var(--Categorical-3) 18%, transparent);
+  --Categorical-4-Subtle:  color-mix(in srgb, var(--Categorical-4) 18%, transparent);
+  --Categorical-5-Subtle:  color-mix(in srgb, var(--Categorical-5) 18%, transparent);
+  --Categorical-6-Subtle:  color-mix(in srgb, var(--Categorical-6) 18%, transparent);
+  --Categorical-7-Subtle:  color-mix(in srgb, var(--Categorical-7) 18%, transparent);
+  --Categorical-8-Subtle:  color-mix(in srgb, var(--Categorical-8) 18%, transparent);
+  --Categorical-9-Subtle:  color-mix(in srgb, var(--Categorical-9) 18%, transparent);
+  --Categorical-10-Subtle: color-mix(in srgb, var(--Categorical-10) 18%, transparent);
+  --Categorical-11-Subtle: color-mix(in srgb, var(--Categorical-11) 18%, transparent);
+  --Categorical-12-Subtle: color-mix(in srgb, var(--Categorical-12) 18%, transparent);
+  --Categorical-13-Subtle: color-mix(in srgb, var(--Categorical-13) 18%, transparent);
+  --Categorical-14-Subtle: color-mix(in srgb, var(--Categorical-14) 18%, transparent);
+  --Categorical-15-Subtle: color-mix(in srgb, var(--Categorical-15) 18%, transparent);
+  --Categorical-16-Subtle: color-mix(in srgb, var(--Categorical-16) 18%, transparent);
+
+  --Categorical-1-Bold:  #FCA5A5;
+  --Categorical-2-Bold:  #7DD3FC;
+  --Categorical-3-Bold:  #5EEAD4;
+  --Categorical-4-Bold:  #CBD5E1;
+  --Categorical-5-Bold:  #FDE047;
+  --Categorical-6-Bold:  #A5B4FC;
+  --Categorical-7-Bold:  #FDBA74;
+  --Categorical-8-Bold:  #67E8F9;
+  --Categorical-9-Bold:  #F9A8D4;
+  --Categorical-10-Bold: #FDA4AF;
+  --Categorical-11-Bold: #93C5FD;
+  --Categorical-12-Bold: #BEF264;
+  --Categorical-13-Bold: #FCD34D;
+  --Categorical-14-Bold: #F0ABFC;
+  --Categorical-15-Bold: #D8B4FE;
+  --Categorical-16-Bold: #C4B5FD;
+}

package/src/styles/glass.css

@@ -0,0 +1,365 @@
+/* =============================================================
+   KSK Design System — Liquid Glass Material
+   iOS 26 / macOS 26 スタイルのガラス素材トークン + ユーティリティ
+
+   使い方:
+     クラスを直接付与: <div class="glass">...</div>
+     または CSS 変数を参照: backdrop-filter: var(--glass-blur);
+
+   ⚠️ 宣言順の不変条件: `-webkit-backdrop-filter` を先、標準の
+   `backdrop-filter` を後に書くこと（Tailwind の出力順と同じ）。
+   消費側の本番ビルド（Next.js 等の CSS minifier）は両者を同一
+   プロパティとして dedupe し「後に書いた方」だけを残すため、標準形を
+   先に書くと minify 後に -webkit- だけが残り、エイリアス非対応の
+   Firefox で blur が完全に無効になる（yokoku-app 本番で実害、
+   2026-06-12 修正）。dev は未 minify なので手元では再現しない。
+   ============================================================= */
+
+/* ─── Liquid Glass トークン ─── */
+:root {
+  /* Blur — Liquid Glass は旧来のすりガラスより透明度が高い。blur を抑えめに
+     して背景の形を残し、saturate + brightness で「ガラス越しに光を集めた」
+     濃縮感を出す（brightness はライトで明るく、ダークで暗く倒す） */
+  --glass-blur-sm:  blur(14px) saturate(1.7) brightness(1.05);
+  --glass-blur:     blur(28px) saturate(1.9) brightness(1.06);
+  --glass-blur-lg:  blur(56px) saturate(2.0) brightness(1.05);
+
+  /* Background */
+  --glass-bg:         rgba(255, 255, 255, 0.18);
+  --glass-bg-subtle:  rgba(255, 255, 255, 0.10);
+  --glass-bg-medium:  rgba(255, 255, 255, 0.28);
+  --glass-bg-strong:  rgba(255, 255, 255, 0.55);
+  --glass-bg-dark:    rgba(10, 10, 20, 0.25);
+
+  /* Border — 上端の光の屈折を模した細い輪郭 */
+  --glass-border:      rgba(255, 255, 255, 0.42);
+  --glass-border-dark: rgba(255, 255, 255, 0.15);
+
+  /* Edge rim — レンズ縁での光の屈折リング（.glass-specular の ::after）。
+     0deg=上端に主光源のグリント、180deg=下端に内部反射のカウンターグリント、
+     左右(90/270deg 付近)は減衰させて「光がエッジを回り込む」見え方にする。
+     グリントの肩に寒色（青系）、カウンターグリントの肩に暖色を僅かに乗せ、
+     強い曲率で起きる色分散（chromatic aberration）を擬似する */
+  --glass-rim-width: 1.5px;
+  --glass-rim: conic-gradient(
+    from 0deg,
+    rgba(255, 255, 255, 0.80) 0deg,
+    rgba(186, 224, 255, 0.45) 40deg,
+    rgba(255, 255, 255, 0.20) 75deg,
+    rgba(255, 255, 255, 0.06) 120deg,
+    rgba(255, 226, 200, 0.30) 162deg,
+    rgba(255, 255, 255, 0.50) 180deg,
+    rgba(255, 226, 200, 0.30) 198deg,
+    rgba(255, 255, 255, 0.06) 240deg,
+    rgba(186, 224, 255, 0.45) 320deg,
+    rgba(255, 255, 255, 0.80) 360deg
+  );
+
+  /* Inner specular highlight — レンズ上端の白い光 */
+  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.60),
+                     inset 0 -1px 0 rgba(255, 255, 255, 0.08);
+
+  /* Shadow — ガラスを浮かせる影 */
+  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08),
+                     0 1px 4px  rgba(0, 0, 0, 0.05);
+  --glass-shadow:    0 8px 32px  rgba(0, 0, 0, 0.12),
+                     0 2px 8px   rgba(0, 0, 0, 0.06);
+  --glass-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.16),
+                     0 4px 12px  rgba(0, 0, 0, 0.08);
+
+  /* Overlay blur — モーダル背景の軽いすりガラス */
+  --glass-overlay-bg:   rgba(0, 0, 0, 0.15);
+  --glass-overlay-blur: blur(8px);
+}
+
+/* ─── Dark mode overrides ─── */
+.dark {
+  --glass-blur-sm:  blur(14px) saturate(1.5) brightness(0.95);
+  --glass-blur:     blur(28px) saturate(1.6) brightness(0.92);
+  --glass-blur-lg:  blur(56px) saturate(1.7) brightness(0.90);
+  --glass-bg:         rgba(20, 20, 30, 0.35);
+  --glass-bg-subtle:  rgba(20, 20, 30, 0.20);
+  --glass-bg-medium:  rgba(20, 20, 30, 0.50);
+  --glass-bg-strong:  rgba(20, 20, 30, 0.70);
+  --glass-bg-dark:    rgba(0, 0, 10, 0.45);
+  --glass-border:      rgba(255, 255, 255, 0.18);
+  --glass-border-dark: rgba(255, 255, 255, 0.08);
+  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.20),
+                     inset 0 -1px 0 rgba(255, 255, 255, 0.04);
+  --glass-rim: conic-gradient(
+    from 0deg,
+    rgba(255, 255, 255, 0.38) 0deg,
+    rgba(170, 210, 255, 0.18) 40deg,
+    rgba(255, 255, 255, 0.08) 75deg,
+    rgba(255, 255, 255, 0.03) 120deg,
+    rgba(255, 215, 185, 0.12) 162deg,
+    rgba(255, 255, 255, 0.20) 180deg,
+    rgba(255, 215, 185, 0.12) 198deg,
+    rgba(255, 255, 255, 0.03) 240deg,
+    rgba(170, 210, 255, 0.18) 320deg,
+    rgba(255, 255, 255, 0.38) 360deg
+  );
+  --glass-overlay-bg:   rgba(0, 0, 0, 0.40);
+}
+
+/* ─── ユーティリティクラス ─── */
+
+/**
+ * .glass
+ * 標準ガラス素材。ナビゲーションバー・ツールバー・ピルボタンに。
+ */
+.glass {
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: 0.5px solid var(--glass-border);
+  box-shadow: var(--glass-highlight), var(--glass-shadow);
+}
+
+/**
+ * .glass-subtle
+ * 薄いガラス素材。フローティング要素の背景に軽く使う。
+ */
+.glass-subtle {
+  background: var(--glass-bg-subtle);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  backdrop-filter: var(--glass-blur-sm);
+  border: 0.5px solid rgba(255, 255, 255, 0.22);
+  box-shadow: var(--glass-shadow-sm);
+}
+
+/**
+ * .glass-medium
+ * 中程度ガラス。シート・カードのヘッダー部分等。
+ */
+.glass-medium {
+  background: var(--glass-bg-medium);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: 0.5px solid var(--glass-border);
+  box-shadow: var(--glass-highlight), var(--glass-shadow);
+}
+
+/**
+ * .glass-strong
+ * 濃いガラス。アクションシート・確認ダイアログ等の可読性が必要な場面。
+ */
+.glass-strong {
+  background: var(--glass-bg-strong);
+  -webkit-backdrop-filter: var(--glass-blur-lg);
+  backdrop-filter: var(--glass-blur-lg);
+  border: 0.5px solid var(--glass-border);
+  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
+}
+
+/**
+ * .glass-dark
+ * ダークコンテンツ上用ガラス（グラデーション・写真上に重ねる）。
+ */
+.glass-dark {
+  background: var(--glass-bg-dark);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: 0.5px solid var(--glass-border-dark);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
+              0 8px 32px rgba(0, 0, 0, 0.28);
+}
+
+/**
+ * .glass-clear
+ * Apple HIG のもう一つの素材バリアント「Clear」。フロストを最小限にして
+ * 背景のメディアを最大限透過させる。写真・動画・カラフルなアートワーク上の
+ * フローティングコントロール向け。
+ * - 可読性のため薄い暗色ディミングを内蔵（白文字前提で使う）
+ * - レンズ感はリム頼みなので .glass-specular 併用を推奨
+ */
+.glass-clear {
+  background: rgba(15, 15, 20, 0.14);
+  -webkit-backdrop-filter: blur(6px) saturate(1.6) brightness(1.05);
+  backdrop-filter: blur(6px) saturate(1.6) brightness(1.05);
+  border: 0.5px solid rgba(255, 255, 255, 0.35);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
+              var(--glass-shadow-sm);
+}
+
+.dark .glass-clear {
+  background: rgba(5, 5, 10, 0.25);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+/**
+ * .glass-overlay
+ * モーダル背景。真っ暗なスクリムの代わりに軽くすりガラス風にぼかす。
+ */
+.glass-overlay {
+  background: var(--glass-overlay-bg);
+  -webkit-backdrop-filter: var(--glass-overlay-blur);
+  backdrop-filter: var(--glass-overlay-blur);
+}
+
+/**
+ * .glass-accent
+ * ブランドカラーを帯びたガラス素材。FAB・主要アクションのフローティング要素に。
+ * --Brand-Primary を低透明度で重ねることで、テーマカラーに追従する。
+ */
+.glass-accent {
+  background: color-mix(in srgb, var(--Brand-Primary) 15%, rgba(255, 255, 255, 0.12));
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: 0.5px solid color-mix(in srgb, var(--Brand-Primary) 30%, rgba(255, 255, 255, 0.30));
+  box-shadow: var(--glass-highlight), var(--glass-shadow),
+              inset 0 0 0 0.5px color-mix(in srgb, var(--Brand-Primary) 20%, transparent);
+}
+
+.dark .glass-accent {
+  background: color-mix(in srgb, var(--Brand-Primary) 20%, rgba(20, 20, 30, 0.40));
+  border: 0.5px solid color-mix(in srgb, var(--Brand-Primary) 25%, rgba(255, 255, 255, 0.15));
+}
+
+/* ─── Specular + rim layer (::before / ::after) ─── */
+/**
+ * .glass-specular
+ * Liquid Glass の「レンズ感」を追加するヘルパー。2 層で構成:
+ *   ::before — レンズ上面のスペキュラ（上部の楕円シーン + 下部の淡い
+ *              内部反射 + 縁内側の拡散光）。コンテンツの下に敷く。
+ *   ::after  — エッジの屈折リム（--glass-rim の conic リング、太さ
+ *              --glass-rim-width）。光はガラス表面で反射するため
+ *              コンテンツより上に重ねる（1px なので操作は阻害しない）。
+ */
+.glass-specular {
+  /*
+   * Establish a containing block for the ::before highlight.
+   * We use `isolation: isolate` instead of `position: relative` so the
+   * sheet can stay `position: fixed` when needed (the `.fixed` utility
+   * would otherwise be overridden by this rule's same-specificity
+   * later-in-stylesheet `position: relative`).
+   * Add `position: relative` only when there is no other positioning,
+   * via a fallback selector below.
+   */
+  isolation: isolate;
+  overflow: hidden;
+}
+/*
+ * Fallback: if the element is not already positioned (fixed/absolute/sticky),
+ * fall back to position: relative so the ::before still anchors correctly.
+ */
+.glass-specular:not(.fixed):not(.absolute):not(.sticky) {
+  position: relative;
+}
+.glass-specular::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    radial-gradient(
+      140% 95% at 25% -20%,
+      rgba(255, 255, 255, 0.36) 0%,
+      rgba(255, 255, 255, 0.07) 45%,
+      transparent 70%
+    ),
+    radial-gradient(
+      120% 65% at 75% 115%,
+      rgba(255, 255, 255, 0.16) 0%,
+      transparent 55%
+    );
+  /* 縁の内側に光が拡散して溜まる表現（屈折の擬似） */
+  box-shadow:
+    inset 0 0 14px rgba(255, 255, 255, 0.09),
+    inset 0 -10px 22px -14px rgba(255, 255, 255, 0.45);
+  pointer-events: none;
+  z-index: 0;
+}
+.dark .glass-specular::before {
+  opacity: 0.55;
+}
+.glass-specular::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--glass-rim-width);
+  background: var(--glass-rim);
+  /* padding 部分だけ残すリング状マスク（gradient border の定石） */
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  /* リング部分だけ背景を増光サンプリングし、縁が背景色を拾って光る
+     「光を導くガラスの切断面」を作る（マスクが backdrop-filter の適用域も
+     リングに限定する = progressive blur と同じ原理）。非対応環境では
+     conic リムだけが残るので安全に劣化する */
+  -webkit-backdrop-filter: blur(4px) saturate(1.8) brightness(1.55);
+  backdrop-filter: blur(4px) saturate(1.8) brightness(1.55);
+  pointer-events: none;
+  z-index: 2;
+}
+.dark .glass-specular::after {
+  -webkit-backdrop-filter: blur(4px) saturate(1.6) brightness(1.25);
+  backdrop-filter: blur(4px) saturate(1.6) brightness(1.25);
+}
+/*
+ * フロー内の子をレンズ層の間（::before z0 の上 / ::after z2 の下）へ持ち上げる。
+ * 絶対配置の子（オーバーレイの × 閉じるボタン等）は consumer 側の position /
+ * z-index を尊重して除外する — コンテナ自身の :not(.fixed):not(.absolute)
+ * :not(.sticky) と同じパターン。
+ *
+ * 除外しないと回帰が起きる: glass.css は consumer 側で「非レイヤー CSS」として
+ * 読まれ、@layer utilities 内の Tailwind `absolute` / `z-*` をカスケードで
+ * 踏み潰す（unlayered > layered）。すると絶対配置オーバーレイが relative 化して
+ * `right-*` が相対オフセットになり、要素が角からはみ出す（yokoku-app の詳細
+ * ドロワー × ボタンが PC で左上角の外へ流れた実害、2026-06）。
+ */
+.glass-specular > *:not(.absolute):not(.fixed):not(.sticky) {
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Reduced-transparency fallback ─── */
+/**
+ * アクセシビリティ: ユーザーが「透明度を下げる」を有効にしている場合、
+ * backdrop-filter を無効化して不透明な背景にフォールバックする。
+ */
+@media (prefers-reduced-transparency: reduce) {
+  .glass,
+  .glass-subtle,
+  .glass-medium,
+  .glass-strong,
+  .glass-dark,
+  .glass-clear,
+  .glass-accent {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: var(--Surface-Primary);
+    border-color: var(--Border-Low-Emphasis);
+  }
+
+  /* 白文字前提のガラスは白背景に落とすとコントラストが消えるため、
+     不透明の暗色サーフェスにフォールバックする */
+  .glass-dark,
+  .glass-clear {
+    background: var(--Surface-Inverse);
+  }
+
+  .dark .glass,
+  .dark .glass-subtle,
+  .dark .glass-medium,
+  .dark .glass-strong,
+  .dark .glass-dark,
+  .dark .glass-clear,
+  .dark .glass-accent {
+    background: var(--Surface-Inverse);
+  }
+
+  /* スペキュラ・リムの装飾層も透明表現の一部なので無効化 */
+  .glass-specular::before,
+  .glass-specular::after {
+    display: none;
+  }
+
+  .glass-overlay {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: rgba(0, 0, 0, 0.6);
+  }
+}

package/src/styles/primitive.css

@@ -0,0 +1,161 @@
+/* =============================================================
+   KSK Design System — Primitive Color Tokens
+
+   Layer 1: 原色パレット
+   テーマファイル（src/themes/*.css）で Brand 色を上書きすることで
+   全セマンティックトークンが自動的に切り替わる。
+
+   ベースパレットはニュートラル（Gray, Red, Green, Blue 等）を定義し、
+   ブランドカラーはデフォルトテーマ（Blue）を初期値として設定する。
+   ============================================================= */
+
+@theme {
+  /* ─── Brand（テーマ差し替え対象） ─── */
+  --Primitive-Brand-50:  #EFF6FF;
+  --Primitive-Brand-100: #DBEAFE;
+  --Primitive-Brand-200: #BFDBFE;
+  --Primitive-Brand-300: #93C5FD;
+  --Primitive-Brand-400: #60A5FA;
+  --Primitive-Brand-500: #3B82F6;
+  --Primitive-Brand-600: #2563EB;
+  --Primitive-Brand-700: #1D4ED8;
+  --Primitive-Brand-800: #1E40AF;
+  --Primitive-Brand-900: #1E3A8A;
+
+  /* ─── Gray ─── */
+  --Primitive-Gray-50:  #F9FAFB;
+  --Primitive-Gray-100: #F3F4F6;
+  --Primitive-Gray-200: #E5E7EB;
+  --Primitive-Gray-300: #D1D5DB;
+  --Primitive-Gray-400: #9CA3AF;
+  --Primitive-Gray-500: #6B7280;
+  --Primitive-Gray-600: #4B5563;
+  --Primitive-Gray-700: #374151;
+  --Primitive-Gray-800: #1F2937;
+  --Primitive-Gray-900: #111827;
+
+  /* ─── Red（Caution / Destructive） ─── */
+  --Primitive-Red-50:  #FEF2F2;
+  --Primitive-Red-100: #FEE2E2;
+  --Primitive-Red-200: #FECACA;
+  --Primitive-Red-300: #FCA5A5;
+  --Primitive-Red-400: #F87171;
+  --Primitive-Red-500: #EF4444;
+  --Primitive-Red-600: #DC2626;
+  --Primitive-Red-700: #B91C1C;
+  --Primitive-Red-800: #991B1B;
+  --Primitive-Red-900: #7F1D1D;
+
+  /* ─── Orange（Warning） ─── */
+  --Primitive-Orange-50:  #FFF7ED;
+  --Primitive-Orange-100: #FFEDD5;
+  --Primitive-Orange-200: #FED7AA;
+  --Primitive-Orange-300: #FDBA74;
+  --Primitive-Orange-400: #FB923C;
+  --Primitive-Orange-500: #F97316;
+  --Primitive-Orange-600: #EA580C;
+  --Primitive-Orange-700: #C2410C;
+  --Primitive-Orange-800: #9A3412;
+  --Primitive-Orange-900: #7C2D12;
+
+  /* ─── Amber ─── */
+  --Primitive-Amber-50:  #FFFBEB;
+  --Primitive-Amber-100: #FEF3C7;
+  --Primitive-Amber-200: #FDE68A;
+  --Primitive-Amber-300: #FCD34D;
+  --Primitive-Amber-400: #FBBF24;
+  --Primitive-Amber-500: #F59E0B;
+  --Primitive-Amber-600: #D97706;
+  --Primitive-Amber-700: #B45309;
+  --Primitive-Amber-800: #92400E;
+  --Primitive-Amber-900: #78350F;
+
+  /* ─── Green（Success） ─── */
+  --Primitive-Green-50:  #F0FDF4;
+  --Primitive-Green-100: #DCFCE7;
+  --Primitive-Green-200: #BBF7D0;
+  --Primitive-Green-300: #86EFAC;
+  --Primitive-Green-400: #4ADE80;
+  --Primitive-Green-500: #22C55E;
+  --Primitive-Green-600: #16A34A;
+  --Primitive-Green-700: #15803D;
+  --Primitive-Green-800: #166534;
+  --Primitive-Green-900: #14532D;
+
+  /* ─── Teal ─── */
+  --Primitive-Teal-50:  #F0FDFA;
+  --Primitive-Teal-100: #CCFBF1;
+  --Primitive-Teal-200: #99F6E4;
+  --Primitive-Teal-300: #5EEAD4;
+  --Primitive-Teal-400: #2DD4BF;
+  --Primitive-Teal-500: #14B8A6;
+  --Primitive-Teal-600: #0D9488;
+  --Primitive-Teal-700: #0F766E;
+  --Primitive-Teal-800: #115E59;
+  --Primitive-Teal-900: #134E4A;
+
+  /* ─── Blue（Info） ─── */
+  --Primitive-Blue-50:  #EFF6FF;
+  --Primitive-Blue-100: #DBEAFE;
+  --Primitive-Blue-200: #BFDBFE;
+  --Primitive-Blue-300: #93C5FD;
+  --Primitive-Blue-400: #60A5FA;
+  --Primitive-Blue-500: #3B82F6;
+  --Primitive-Blue-600: #2563EB;
+  --Primitive-Blue-700: #1D4ED8;
+  --Primitive-Blue-800: #1E40AF;
+  --Primitive-Blue-900: #1E3A8A;
+
+  /* ─── Violet ─── */
+  --Primitive-Violet-50:  #F5F3FF;
+  --Primitive-Violet-100: #EDE9FE;
+  --Primitive-Violet-200: #DDD6FE;
+  --Primitive-Violet-300: #C4B5FD;
+  --Primitive-Violet-400: #A78BFA;
+  --Primitive-Violet-500: #8B5CF6;
+  --Primitive-Violet-600: #7C3AED;
+  --Primitive-Violet-700: #6D28D9;
+  --Primitive-Violet-800: #5B21B6;
+  --Primitive-Violet-900: #4C1D95;
+
+  /* ─── Pink ─── */
+  --Primitive-Pink-50:  #FDF2F8;
+  --Primitive-Pink-100: #FCE7F3;
+  --Primitive-Pink-200: #FBCFE8;
+  --Primitive-Pink-300: #F9A8D4;
+  --Primitive-Pink-400: #F472B6;
+  --Primitive-Pink-500: #EC4899;
+  --Primitive-Pink-600: #DB2777;
+  --Primitive-Pink-700: #BE185D;
+  --Primitive-Pink-800: #9D174D;
+  --Primitive-Pink-900: #831843;
+
+  /* ─── Alpha（透過） ─── */
+  --Primitive-Gray-Alpha-50:   rgba(17, 24, 39, 0.02);
+  --Primitive-Gray-Alpha-100:  rgba(17, 24, 39, 0.04);
+  --Primitive-Gray-Alpha-200:  rgba(17, 24, 39, 0.08);
+  --Primitive-Gray-Alpha-300:  rgba(17, 24, 39, 0.12);
+  --Primitive-Gray-Alpha-400:  rgba(17, 24, 39, 0.16);
+  --Primitive-Gray-Alpha-500:  rgba(17, 24, 39, 0.24);
+  --Primitive-Gray-Alpha-600:  rgba(17, 24, 39, 0.36);
+  --Primitive-Gray-Alpha-700:  rgba(17, 24, 39, 0.48);
+  --Primitive-Gray-Alpha-800:  rgba(17, 24, 39, 0.64);
+  --Primitive-Gray-Alpha-900:  rgba(17, 24, 39, 0.80);
+  --Primitive-Gray-Alpha-1000: rgba(17, 24, 39, 0.92);
+
+  --Primitive-White-Alpha-50:   rgba(255, 255, 255, 0.02);
+  --Primitive-White-Alpha-100:  rgba(255, 255, 255, 0.04);
+  --Primitive-White-Alpha-200:  rgba(255, 255, 255, 0.08);
+  --Primitive-White-Alpha-300:  rgba(255, 255, 255, 0.16);
+  --Primitive-White-Alpha-400:  rgba(255, 255, 255, 0.24);
+  --Primitive-White-Alpha-500:  rgba(255, 255, 255, 0.36);
+  --Primitive-White-Alpha-600:  rgba(255, 255, 255, 0.48);
+  --Primitive-White-Alpha-700:  rgba(255, 255, 255, 0.64);
+  --Primitive-White-Alpha-800:  rgba(255, 255, 255, 0.80);
+  --Primitive-White-Alpha-900:  rgba(255, 255, 255, 0.92);
+  --Primitive-White-Alpha-1000: rgba(255, 255, 255, 1.00);
+
+  /* ─── 純色 ─── */
+  --Primitive-White: #FFFFFF;
+  --Primitive-Black: #000000;
+}