@aiquants/spreadsheet 0.15.0 → 0.16.0

package/src/styles/spreadsheet.css

@@ -16,25 +16,82 @@
   box-sizing: border-box;
 }
 
+/*
+ * 色と文字の設計の値 (ホストの上書きの口)。公開の変数 `--aqsp-*` はパッケージが宣言せずに読むだけの入力で、
+ * 各値はここの別名 `--_aqsp-*` の中で 1 度だけ読み、明るい既定を 1 度だけ書く — ホストはルートでも祖先 (:root やダークの
+ * クラス) でも公開の変数を置けば、グリッドが塗る全ての色が従う。文字と背景の対はどれも 7:1 以上 (WCAG 1.4.6)、値は
+ * styles/designTokens.spec.ts が CSS の文字から計算して固定する。
+ */
 .aqsp-root {
-  --aqsp-row-header-width: 64px; /* 7 桁行番号 (1,000,000) が 13px tabular-nums で収まる幅 */
-  --aqsp-col-header-height: 24px;
-  /* v0.8 強調帯の既定パレット (計画 §1.9)。単一書き手は overlay の layout effect (highlightColors prop) —
-     能力なしはこの既定が効く。毎フレームの repaint は変数を書かない */
-  --aqsp-band-row: #0084ff;
-  --aqsp-band-column: #42ff4f;
-  --aqsp-band-intersection: #e1ff00;
-  --aqsp-band-opacity: 0.2;
+  /* 帯の寸法 (TS の SPREADSHEET_ROW_HEADER_WIDTH_PX / SPREADSHEET_COLUMN_HEADER_HEIGHT_PX と同値。上書きするホストは箱の計算も揃える) */
+  --_aqsp-row-header-width: var(--aqsp-row-header-width, 64px); /* 7 桁行番号 (1,000,000) が 13px tabular-nums で収まる幅 */
+  --_aqsp-col-header-height: var(--aqsp-col-header-height, 24px);
+  /* 文字の大きさの 1 つの基準 (既定 13px)。ほかの大きさはこの比で導く */
+  --_aqsp-font-size: var(--aqsp-font-size, 0.8125rem);
+  --_aqsp-font-size-small: calc(var(--_aqsp-font-size) * 12 / 13);
+  --_aqsp-font-size-x-small: calc(var(--_aqsp-font-size) * 11 / 13);
+  --_aqsp-font-size-glyph: calc(var(--_aqsp-font-size) * 16 / 13);
+  --_aqsp-editor-font-size: var(--_aqsp-font-size);
+  --_aqsp-surface: var(--aqsp-surface, #ffffff);
+  --_aqsp-text: var(--aqsp-text, #1f2937);
+  --_aqsp-grid-line: var(--aqsp-grid-line, #e5e7eb);
+  --_aqsp-border: var(--aqsp-border, #d1d5db);
+  --_aqsp-input-border: var(--aqsp-input-border, #8b95a4);
+  --_aqsp-accent: var(--aqsp-accent, #2563eb);
+  --_aqsp-header-surface: var(--aqsp-header-surface, #f3f4f6);
+  --_aqsp-header-text: var(--aqsp-header-text, #4a5361);
+  --_aqsp-header-selected-surface: var(--aqsp-header-selected-surface, #dbeafe);
+  --_aqsp-header-selected-text: var(--aqsp-header-selected-text, #1841b4);
+  --_aqsp-header-row-surface: var(--aqsp-header-row-surface, #f3f4f6);
+  --_aqsp-header-row-text: var(--aqsp-header-row-text, #1f2937);
+  --_aqsp-header-row-font-weight: var(--aqsp-header-row-font-weight, 700);
+  --_aqsp-link: var(--aqsp-link, #163ba5);
+  --_aqsp-note-marker: var(--aqsp-note-marker, #4b5563);
+  --_aqsp-comment-marker: var(--aqsp-comment-marker, #eb6406);
+  --_aqsp-danger: var(--aqsp-danger, #dc2626);
+  --_aqsp-danger-fill: var(--aqsp-danger-fill, rgb(220 38 38 / 0.08));
+  --_aqsp-danger-text: var(--aqsp-danger-text, #a41919);
+  --_aqsp-danger-surface: var(--aqsp-danger-surface, #fef2f2);
+  --_aqsp-selection-fill: var(--aqsp-selection-fill, rgb(59 130 246 / 0.18));
+  --_aqsp-selection-border: var(--aqsp-selection-border, rgb(37 99 235 / 0.85));
+  --_aqsp-drag-fill: var(--aqsp-drag-fill, rgb(59 130 246 / 0.1));
+  --_aqsp-reference: var(--aqsp-reference, #16a24a);
+  --_aqsp-reference-fill: var(--aqsp-reference-fill, rgb(22 163 74 / 0.08));
+  --_aqsp-fill-preview: var(--aqsp-fill-preview, #16a24a);
+  --_aqsp-divider-color: var(--aqsp-divider-color, #858e9d);
+  --_aqsp-popover-shadow: var(--aqsp-popover-shadow, 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.14));
+  --_aqsp-note-tip-surface: var(--aqsp-note-tip-surface, #fffbeb);
+  --_aqsp-note-tip-border: var(--aqsp-note-tip-border, #f59e0b);
+  --_aqsp-note-tip-shadow: var(--aqsp-note-tip-shadow, 0 2px 8px rgb(0 0 0 / 0.12));
+  --_aqsp-title-text: var(--aqsp-title-text, #374151);
+  --_aqsp-muted-text: var(--aqsp-muted-text, #4e535e);
+  --_aqsp-strong-text: var(--aqsp-strong-text, #111827);
+  --_aqsp-separator: var(--aqsp-separator, #f3f4f6);
+  --_aqsp-button-surface: var(--aqsp-button-surface, #f9fafb);
+  --_aqsp-hover-surface: var(--aqsp-hover-surface, #f3f4f6);
+  --_aqsp-hover-border: var(--aqsp-hover-border, #9ca3af);
+  --_aqsp-primary-surface: var(--aqsp-primary-surface, #134dce);
+  --_aqsp-primary-hover-surface: var(--aqsp-primary-hover-surface, #173faf);
+  --_aqsp-primary-text: var(--aqsp-primary-text, #ffffff);
+  --_aqsp-option-selected-surface: var(--aqsp-option-selected-surface, #dbeafe);
+  --_aqsp-option-selected-text: var(--aqsp-option-selected-text, #1e3a8a);
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #ffffff;
-  color: #1f2937;
-  font-size: 13px;
+  background: var(--_aqsp-surface);
+  color: var(--_aqsp-text);
+  font-size: var(--_aqsp-font-size);
   line-height: 1;
 }
 
+/* 粗いポインタ (タッチ) の編集は 16 CSS px 以上 — iOS は 16px 未満の入力にフォーカスするとページを拡大する */
+@media (pointer: coarse) {
+  .aqsp-root {
+    --_aqsp-editor-font-size: max(1rem, 16px);
+  }
+}
+
 /*
  * ズームラッパー (v0.3): grid レイアウトの実体。視覚は transform: scale(z)、レイアウトは
  * 100%/z (インライン上書き — z=1 は無スタイルで v0.2 幾何と同一)。origin 0 0 で左上アンカー。
@@ -48,9 +105,9 @@
  */
 .aqsp-zoom {
   display: grid;
-  grid-template-columns: var(--aqsp-row-header-width) minmax(0, 1fr);
+  grid-template-columns: var(--_aqsp-row-header-width) minmax(0, 1fr);
   /* 横バー行は無い — v0.4 から横バーは VirtualGrid 内在 (§7-1。v0.3 の第 3 行 auto は退役) */
-  grid-template-rows: var(--aqsp-col-header-height) minmax(0, 1fr);
+  grid-template-rows: var(--_aqsp-col-header-height) minmax(0, 1fr);
   width: 100%;
   height: 100%;
   transform-origin: 0 0;
@@ -59,9 +116,9 @@
 .aqsp-corner {
   grid-column: 1;
   grid-row: 1;
-  border-right: 1px solid #d1d5db;
-  border-bottom: 1px solid #d1d5db;
-  background: #f3f4f6;
+  border-right: 1px solid var(--_aqsp-border);
+  border-bottom: 1px solid var(--_aqsp-border);
+  background: var(--_aqsp-header-surface);
 }
 
 .aqsp-col-header {
@@ -69,8 +126,8 @@
   grid-row: 1;
   position: relative;
   overflow: hidden;
-  border-bottom: 1px solid #d1d5db;
-  background: #f3f4f6;
+  border-bottom: 1px solid var(--_aqsp-border);
+  background: var(--_aqsp-header-surface);
   user-select: none;
 }
 
@@ -108,10 +165,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-right: 1px solid #e5e7eb;
+  border-right: 1px solid var(--_aqsp-grid-line);
   overflow: hidden;
   white-space: nowrap;
-  color: #4b5563;
+  color: var(--_aqsp-header-text);
 }
 
 .aqsp-row-header {
@@ -121,8 +178,8 @@
   overflow: hidden;
   /* 下端の横バー帯ぶんの margin-bottom は RowHeader.tsx が SPREADSHEET_SCROLLBAR_SIZE_PX (src/view.ts) からインライン
      指定する (TS 定数の単一 SSOT — SelectionOverlay の right / bottom と同方式) */
-  border-right: 1px solid #d1d5db;
-  background: #f3f4f6;
+  border-right: 1px solid var(--_aqsp-border);
+  background: var(--_aqsp-header-surface);
   user-select: none;
 }
 
@@ -143,10 +200,10 @@
   align-items: center;
   justify-content: flex-end;
   padding-right: 6px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--_aqsp-grid-line);
   overflow: hidden;
   white-space: nowrap;
-  color: #4b5563;
+  color: var(--_aqsp-header-text);
   font-variant-numeric: tabular-nums;
 }
 
@@ -178,10 +235,18 @@
   display: flex;
   align-items: center;
   padding: 0 4px;
-  border-right: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
+  border-right: 1px solid var(--_aqsp-grid-line);
+  border-bottom: 1px solid var(--_aqsp-grid-line);
   white-space: nowrap;
-  background: #ffffff;
+  background: var(--_aqsp-surface);
+}
+
+/* 見出しの行 (headerRows — role="columnheader") の塗り。書式のインライン style が勝つ (インライン > クラス)。
+   リンクの色は後置の [data-aqsp-link] 規則が勝つ (同じ詳細度は出現順) */
+.aqsp-cell[data-aqsp-header-row] {
+  background: var(--_aqsp-header-row-surface);
+  color: var(--_aqsp-header-row-text);
+  font-weight: var(--_aqsp-header-row-font-weight);
 }
 
 /*
@@ -217,14 +282,14 @@
   width: 0;
   height: 0;
   border: 5px solid transparent;
-  border-top-color: #4b5563;
-  border-right-color: #4b5563;
+  border-top-color: var(--_aqsp-note-marker);
+  border-right-color: var(--_aqsp-note-marker);
   pointer-events: none;
 }
 
 .aqsp-cell[data-aqsp-comment]::after {
-  border-top-color: #f97316;
-  border-right-color: #f97316;
+  border-top-color: var(--_aqsp-comment-marker);
+  border-right-color: var(--_aqsp-comment-marker);
 }
 
 .aqsp-cell[data-aqsp-invalid]::before {
@@ -235,15 +300,15 @@
   width: 0;
   height: 0;
   border: 5px solid transparent;
-  border-bottom-color: #dc2626;
-  border-left-color: #dc2626;
+  border-bottom-color: var(--_aqsp-danger);
+  border-left-color: var(--_aqsp-danger);
   pointer-events: none;
 }
 
 /* リンクセル — 書式の color インライン指定が優先する (インライン > クラス) */
 .aqsp-cell[data-aqsp-link] {
   text-decoration: underline;
-  color: #1d4ed8;
+  color: var(--_aqsp-link);
 }
 
 /*
@@ -263,6 +328,12 @@
  * (実測済みの既知事故類型)。右オフセット (縦バー幅) は JSX インラインが SSOT (§6.7.2-1)。
  */
 .aqsp-overlay {
+  /* 強調帯の既定パレット (計画 §1.9)。highlightColors prop の layout effect がこの要素へ公開の名前をインラインで書く
+     (要素自身の宣言なので祖先の値に勝つ)。書かれていなければ祖先 (ホスト) の値、無ければ既定。毎フレームの repaint は書かない */
+  --_aqsp-band-row: var(--aqsp-band-row, #0084ff);
+  --_aqsp-band-column: var(--aqsp-band-column, #42ff4f);
+  --_aqsp-band-intersection: var(--aqsp-band-intersection, #e1ff00);
+  --_aqsp-band-opacity: var(--aqsp-band-opacity, 0.2);
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -289,8 +360,8 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: rgb(59 130 246 / 0.18);
-  border: 1px solid rgb(37 99 235 / 0.85);
+  background: var(--_aqsp-selection-fill);
+  border: 1px solid var(--_aqsp-selection-border);
   mix-blend-mode: multiply;
 }
 
@@ -298,7 +369,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #2563eb;
+  border: 2px solid var(--_aqsp-accent);
   box-sizing: border-box;
 }
 
@@ -306,20 +377,20 @@
   position: absolute;
   top: 0;
   left: 0;
-  border: 1px solid #2563eb;
-  background: rgb(59 130 246 / 0.1);
+  border: 1px solid var(--_aqsp-accent);
+  background: var(--_aqsp-drag-fill);
 }
 
 /* 減算ドラッグ (§3.2): writeDragFrame が data-aqsp-drag-mode を set / clear する */
 .aqsp-drag-rect[data-aqsp-drag-mode="subtract"] {
-  border: 1px dashed #dc2626;
-  background: rgb(220 38 38 / 0.08);
+  border: 1px dashed var(--_aqsp-danger);
+  background: var(--_aqsp-danger-fill);
 }
 
 /* 参照ドラッグ (v0.8 ポインティング): 数式へ挿入するレンジの矩形 — 緑の破線 */
 .aqsp-drag-rect[data-aqsp-drag-mode="point"] {
-  border: 1px dashed #16a34a;
-  background: rgb(22 163 74 / 0.08);
+  border: 1px dashed var(--_aqsp-reference);
+  background: var(--_aqsp-reference-fill);
 }
 
 /*
@@ -331,20 +402,20 @@
   position: absolute;
   top: 0;
   left: 0;
-  opacity: var(--aqsp-band-opacity);
+  opacity: var(--_aqsp-band-opacity);
   pointer-events: none;
 }
 
 .aqsp-band[data-aqsp-band="row"] {
-  background: var(--aqsp-band-row);
+  background: var(--_aqsp-band-row);
 }
 
 .aqsp-band[data-aqsp-band="column"] {
-  background: var(--aqsp-band-column);
+  background: var(--_aqsp-band-column);
 }
 
 .aqsp-band[data-aqsp-band="intersection"] {
-  background: var(--aqsp-band-intersection);
+  background: var(--_aqsp-band-intersection);
 }
 
 /*
@@ -378,7 +449,9 @@
   left: var(--aqsp-clip-outset-left, -3px);
   /* 二色 (青 / 白 — Excel 同型): 透明コマだと下地が青リング / 青塗りのとき「青一色の実線」に
      化けてアンツが知覚不能になる (R2(H) 画素実測)。白コマはどの下地でも必ず対比を作る */
-  background-image: linear-gradient(90deg, #2563eb 50%, #ffffff 50%), linear-gradient(90deg, #2563eb 50%, #ffffff 50%), linear-gradient(0deg, #2563eb 50%, #ffffff 50%), linear-gradient(0deg, #2563eb 50%, #ffffff 50%);
+  background-image:
+    linear-gradient(90deg, var(--_aqsp-accent) 50%, var(--_aqsp-surface) 50%), linear-gradient(90deg, var(--_aqsp-accent) 50%, var(--_aqsp-surface) 50%), linear-gradient(0deg, var(--_aqsp-accent) 50%, var(--_aqsp-surface) 50%),
+    linear-gradient(0deg, var(--_aqsp-accent) 50%, var(--_aqsp-surface) 50%);
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   background-size:
     8px 2px,
@@ -430,8 +503,7 @@
   top: 0;
   height: 100%;
   cursor: col-resize;
-  background: repeating-linear-gradient(90deg, #2563eb 0 1px, transparent 1px 3px);
-  opacity: 0.7;
+  background: repeating-linear-gradient(90deg, var(--_aqsp-accent) 0 1px, transparent 1px 3px);
 }
 
 .aqsp-row-header .aqsp-unhide-marker {
@@ -439,8 +511,7 @@
   left: 0;
   right: 0;
   cursor: row-resize;
-  background: repeating-linear-gradient(180deg, #2563eb 0 1px, transparent 1px 3px);
-  opacity: 0.7;
+  background: repeating-linear-gradient(180deg, var(--_aqsp-accent) 0 1px, transparent 1px 3px);
 }
 
 /* §7.2 リサイズガイドライン (overlay 常設ノード — writer が寸法 / 位置を直書き) */
@@ -448,7 +519,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: #2563eb;
+  background: var(--_aqsp-accent);
   pointer-events: none;
 }
 
@@ -459,8 +530,8 @@
   left: 0;
   width: 6px;
   height: 6px;
-  background: #2563eb;
-  border: 1px solid #fff;
+  background: var(--_aqsp-accent);
+  border: 1px solid var(--_aqsp-surface);
   box-sizing: content-box;
   pointer-events: auto;
   cursor: crosshair;
@@ -471,7 +542,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  border: 1px dashed #16a34a;
+  border: 1px dashed var(--_aqsp-fill-preview);
 }
 
 /*
@@ -518,8 +589,8 @@
 /* ヘッダー強調 (§6.8-4 — ドラッグ中は凍結 = 既知特性) */
 .aqsp-col-header-cell[data-aqsp-in-selection],
 .aqsp-row-header-cell[data-aqsp-in-selection] {
-  background: #dbeafe;
-  color: #1d4ed8;
+  background: var(--_aqsp-header-selected-surface);
+  color: var(--_aqsp-header-selected-text);
   font-weight: 600;
 }
 
@@ -567,15 +638,15 @@
   z-index: 1;
   box-sizing: border-box;
   padding: 0 4px; /* 上パディングはオーバーレイが行高から動的直書き — セル flex 中央と一致 */
-  background: #ffffff;
-  color: #1f2937;
-  caret-color: #1f2937;
+  background: var(--_aqsp-surface);
+  color: var(--_aqsp-text);
+  caret-color: var(--_aqsp-text);
   font-family: inherit;
-  font-size: 13px;
+  font-size: var(--_aqsp-editor-font-size);
   line-height: 1;
   white-space: pre;
   overflow: hidden;
-  outline: 2px solid #2563eb;
+  outline: 2px solid var(--_aqsp-accent);
   outline-offset: -2px;
   /* 編集中だけキャレット (I ビーム) — 編集セルの文字上でキャレットを出す (利用者要望)。非編集は
      .aqsp-row / 待機シンクとも既定矢印なので、カーソル値が変わるのは編集開始の 1 回のみ。旧
@@ -590,7 +661,7 @@
  * エディタが input / 処理済みキー / selectionchange で書く (漸進的・非依存)。遷移は書かない
  */
 .aqsp-sink[data-aqsp-pointing] {
-  caret-color: #16a34a;
+  caret-color: var(--_aqsp-reference);
 }
 
 /*
@@ -640,15 +711,13 @@
   width: 320px;
   max-width: 320px;
   overflow: hidden;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--_aqsp-border);
   border-radius: 8px;
-  background: #ffffff;
-  color: #1f2937;
-  box-shadow:
-    0 1px 2px rgb(0 0 0 / 0.08),
-    0 8px 24px rgb(0 0 0 / 0.14);
+  background: var(--_aqsp-surface);
+  color: var(--_aqsp-text);
+  box-shadow: var(--_aqsp-popover-shadow);
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans JP", sans-serif;
-  font-size: 13px;
+  font-size: var(--_aqsp-font-size);
   line-height: 1.4;
   text-align: start;
   white-space: normal;
@@ -658,15 +727,15 @@
 
 /* 消費者レンダラ (autofocus 対象なし) はフレーム自体が焦点着地点 — 内側リングで所在を示す */
 .aqsp-popover:focus-visible {
-  outline: 2px solid #2563eb;
+  outline: 2px solid var(--_aqsp-accent);
   outline-offset: -2px;
 }
 
 /* ホバー tip のフレーム (kind はフレームの data-aqsp-popover-frame、中身の data-aqsp-popover は部品側のフック) */
 .aqsp-popover[data-aqsp-popover-frame="note-tip"] {
-  border-color: #f59e0b;
-  background: #fffbeb;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+  border-color: var(--_aqsp-note-tip-border);
+  background: var(--_aqsp-note-tip-surface);
+  box-shadow: var(--_aqsp-note-tip-shadow);
 }
 
 /*
@@ -706,7 +775,7 @@
  * 下書きが跳ねる)。forced-colors では border が CanvasText へ再着色されて太い縦線として残る
  */
 [data-aqsp-popover][data-aqsp-popover-rejected] {
-  border-inline-start: 3px solid #dc2626;
+  border-inline-start: 3px solid var(--_aqsp-danger);
   padding-inline-start: 9px;
 }
 
@@ -715,14 +784,14 @@
   align-items: baseline;
   gap: 6px;
   margin: 0 0 6px;
-  font-size: 12px;
+  font-size: var(--_aqsp-font-size-small);
   font-weight: 600;
-  color: #374151;
+  color: var(--_aqsp-title-text);
 }
 
 .aqsp-popover-count {
   font-weight: 400;
-  color: #6b7280;
+  color: var(--_aqsp-muted-text);
 }
 
 /*
@@ -736,9 +805,10 @@
   width: 100%;
   margin: 0;
   padding: 5px 8px;
-  border: 1px solid #d1d5db;
+  /* 入力欄の境界は欄を見分ける唯一の手がかり — 3:1 (WCAG 1.4.11) の専用の値 */
+  border: 1px solid var(--_aqsp-input-border);
   border-radius: 6px;
-  background: #ffffff;
+  background: var(--_aqsp-surface);
   color: inherit;
   font: inherit;
   line-height: 1.4;
@@ -770,31 +840,31 @@
 
 .aqsp-popover-textarea:focus-visible,
 .aqsp-popover-input:focus-visible {
-  border-color: #2563eb;
-  outline: 2px solid #2563eb;
+  border-color: var(--_aqsp-accent);
+  outline: 2px solid var(--_aqsp-accent);
   outline-offset: -1px;
 }
 
 .aqsp-popover-textarea[aria-invalid="true"],
 .aqsp-popover-input[aria-invalid="true"] {
-  border-color: #dc2626;
+  border-color: var(--_aqsp-danger);
 }
 
 .aqsp-popover-textarea[aria-invalid="true"]:focus-visible,
 .aqsp-popover-input[aria-invalid="true"]:focus-visible {
-  border-color: #dc2626;
-  outline-color: #dc2626;
+  border-color: var(--_aqsp-danger);
+  outline-color: var(--_aqsp-danger);
 }
 
 /* ヒント (Escape の挙動 / 拒否の再試行案内) — 12px の控えめ色、拒否時は赤 */
 .aqsp-popover-hint {
   margin: 4px 0 0;
-  font-size: 12px;
-  color: #6b7280;
+  font-size: var(--_aqsp-font-size-small);
+  color: var(--_aqsp-muted-text);
 }
 
 [data-aqsp-popover-rejected] .aqsp-popover-hint {
-  color: #b91c1c;
+  color: var(--_aqsp-danger-text);
 }
 
 /* リンク編集の欄 (ラベル + 入力) */
@@ -807,8 +877,8 @@
 }
 
 .aqsp-popover-field-label {
-  font-size: 12px;
-  color: #6b7280;
+  font-size: var(--_aqsp-font-size-small);
+  color: var(--_aqsp-muted-text);
 }
 
 /* 操作列: 主操作が先頭、閉じる (×) は margin-inline-start: auto で終端へ */
@@ -828,24 +898,24 @@
   height: 26px;
   margin: 0;
   padding: 0 10px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--_aqsp-border);
   border-radius: 6px;
-  background: #f9fafb;
-  color: #1f2937;
+  background: var(--_aqsp-button-surface);
+  color: var(--_aqsp-text);
   font: inherit;
-  font-size: 12px;
+  font-size: var(--_aqsp-font-size-small);
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
 }
 
 .aqsp-popover-button:not(:disabled):hover {
-  border-color: #9ca3af;
-  background: #f3f4f6;
+  border-color: var(--_aqsp-hover-border);
+  background: var(--_aqsp-hover-surface);
 }
 
 .aqsp-popover-button:focus-visible {
-  outline: 2px solid #2563eb;
+  outline: 2px solid var(--_aqsp-accent);
   outline-offset: 1px;
 }
 
@@ -857,15 +927,15 @@
 /* 主操作 (保存 / 投稿 — 部品の役割属性で判別) */
 .aqsp-popover-button[data-aqsp-popover-save],
 .aqsp-popover-button[data-aqsp-popover-post] {
-  border-color: #2563eb;
-  background: #2563eb;
-  color: #ffffff;
+  border-color: var(--_aqsp-primary-surface);
+  background: var(--_aqsp-primary-surface);
+  color: var(--_aqsp-primary-text);
 }
 
 .aqsp-popover-button[data-aqsp-popover-save]:not(:disabled):hover,
 .aqsp-popover-button[data-aqsp-popover-post]:not(:disabled):hover {
-  border-color: #1d4ed8;
-  background: #1d4ed8;
+  border-color: var(--_aqsp-primary-hover-surface);
+  background: var(--_aqsp-primary-hover-surface);
 }
 
 /* 閉じる (×): 終端のゴースト正方形 */
@@ -876,15 +946,15 @@
   padding: 0;
   border-color: transparent;
   background: transparent;
-  color: #6b7280;
-  font-size: 16px;
+  color: var(--_aqsp-muted-text);
+  font-size: var(--_aqsp-font-size-glyph);
   font-weight: 400;
 }
 
 .aqsp-popover-button[data-aqsp-popover-close]:not(:disabled):hover {
   border-color: transparent;
-  background: #f3f4f6;
-  color: #1f2937;
+  background: var(--_aqsp-hover-surface);
+  color: var(--_aqsp-text);
 }
 
 /* コメントスレッド: 可変領域 (縮んでスクロール)。項目は薄い区切り線、先頭は線なし */
@@ -901,7 +971,7 @@
 
 .aqsp-popover-comment-item {
   padding: 6px 0;
-  border-top: 1px solid #f3f4f6;
+  border-top: 1px solid var(--_aqsp-separator);
 }
 
 .aqsp-popover-comment-item:first-child {
@@ -910,15 +980,15 @@
 }
 
 .aqsp-popover-comment-author {
-  font-size: 12px;
+  font-size: var(--_aqsp-font-size-small);
   font-weight: 600;
-  color: #111827;
+  color: var(--_aqsp-strong-text);
 }
 
 .aqsp-popover-comment-time {
   margin-inline-start: 6px;
-  font-size: 11px;
-  color: #6b7280;
+  font-size: var(--_aqsp-font-size-x-small);
+  color: var(--_aqsp-muted-text);
   font-variant-numeric: tabular-nums;
 }
 
@@ -951,23 +1021,23 @@
 }
 
 .aqsp-popover-option:hover {
-  background: #f3f4f6;
+  background: var(--_aqsp-hover-surface);
 }
 
 .aqsp-popover-option[aria-selected="true"] {
-  background: #dbeafe;
-  color: #1e3a8a;
+  background: var(--_aqsp-option-selected-surface);
+  color: var(--_aqsp-option-selected-text);
 }
 
 .aqsp-popover-option:focus-visible {
-  outline: 2px solid #2563eb;
+  outline: 2px solid var(--_aqsp-accent);
   outline-offset: -2px;
 }
 
 .aqsp-popover-empty {
   padding: 6px 8px;
-  font-size: 12px;
-  color: #6b7280;
+  font-size: var(--_aqsp-font-size-small);
+  color: var(--_aqsp-muted-text);
 }
 
 /* 検証メッセージ (受動 — role="status"): 閉じるボタンは右上へ絶対配置、本文はその幅を空ける */
@@ -994,11 +1064,11 @@
 
 /* 拒否メッセージ (strict 検証の拒否再提示): 淡い赤地 + 赤い見出し (アクセント線は共通規則) */
 .aqsp-popover-message[data-aqsp-popover-rejected] {
-  background: #fef2f2;
+  background: var(--_aqsp-danger-surface);
 }
 
 .aqsp-popover-message[data-aqsp-popover-rejected] .aqsp-popover-title {
-  color: #b91c1c;
+  color: var(--_aqsp-danger-text);
 }
 
 /*
@@ -1031,15 +1101,15 @@
 /*
  * v0.9 凍結分割線 (計画 §2.4 — ADR-20 / ADR-24): 全凍結境界の強い Excel / Sheets 風の線。
  * consumer 面は CSS 変数 2 つだけ (--aqsp-divider-color / --aqsp-divider-width — パッケージは
- * 読むだけで書き手は consumer スタイルシート単独)。既定は 2px の #9ca3af (gray-400 — 既存全
- * 罫線より 1 段濃い)。width 0px は逃げ道 — 象限別 fill 断片の継ぎ目が再露出し forced-colors も
+ * 読むだけで書き手は consumer スタイルシート単独。色の既定は .aqsp-root の別名 --_aqsp-divider-color が 1 度だけ書く)。
+ * 既定は 2px の #9ca3af (gray-400 — 既存全罫線より 1 段濃い)。width 0px は逃げ道 — 象限別 fill 断片の継ぎ目が再露出し forced-colors も
  * 無描画 (意図的、README / 分冊 05 §8 登記)。位置 (leading 縁 0 / trailing 縁 0) と長さは
  * 各セグメントの静的インライン幾何 + ホストクリップが供給し、このブロックは太さと色だけを持つ。
  * pointer-events: none — バーは不活性で、リサイズの operand は帯側隣接ストリップ (ADR-20)。
  */
 .aqsp-freeze-divider {
   position: absolute;
-  background: var(--aqsp-divider-color, #9ca3af);
+  background: var(--_aqsp-divider-color);
   pointer-events: none;
 }