スタイルガイドの記述を実態に合わせる（段の外・現在地の表・ネイビーの例外・状態変化・枠線の範囲） (#3130)

CLAUDE.md

@@ -708,7 +708,7 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
 - **状態は新しい色を足さずに表す**（#2864）。動かすのは太さか面のどちらか一方で、
   両方は動かさない（#2722 で踏んだ）
   - **現在地（active / current）の表し方は、その部品が押す面を持つかで決まる。**
-    文字だけが並ぶ帯（パンくず・年月一覧・サイドバーのカテゴリ）は**太字**、
+    文字だけが並ぶ帯（パンくず）は**太字**、
     丸や箱の的を持つ部品（ページャ）は**面**を塗る。帯の中で面を塗ると
     現在地だけが浮き、的を持つ部品で太字にすると押せる範囲が変わらず所在が読めない
     - **タブは枠を持たない**（#3112）。カードで囲む形はフラット化 (#2747) の中で

source/specials/styleguide/index.md

@@ -84,7 +84,7 @@ career: true
 
 ### ブランド色
 
-ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。
+ネイビーは塗り面（フッター）とインタラクション（selection / hover / focus）専用で、**文字色には使いません**。本文の `ink-strong` との比が 1.63 しかなく、文字にすると黒と区別が付かないためです。例外は2つの形だけです。1つは**ネイビーの図形とひと組で読ませる小さな文字**で、タブに出る「← → で切り替え」は同時に出るフォーカスリングと同じ色にして1つの信号として読ませ、シェア数はボタンの丸と、著者名は頭文字の丸と1組に見せます。もう1つは、**文字がそのページの面そのものになっている 404 の数字**です。読み下す文章に混ざる文字には使いません。クリムゾンはコンセプトブックの文法どおり、画面内で同時に1箇所だけの差し色に限定しています。
 
 | <span class="sr-only">見本</span> | 変数 | 値 | 白背景との比 | 使うところ |
 | --- | --- | --- | --- | --- |
@@ -236,7 +236,7 @@ career: true
 </div>
 </div>
 
-段の外にあるのは3つだけです。**記事タイトル**は幅で変わるので `clamp` で持ちます。**404 ページの数字**と**タグの件数の上付き**は、それぞれ1箇所でしか使わない一点ものです。
+段の外にあるのは4つだけです。**記事タイトル**は幅で変わるので `clamp` で持ちます。**404 ページの数字**と**タグの件数の上付き**は、それぞれ1箇所でしか使わない一点ものです。**行き先の名前に添える総数**は、いちばん下の段でも名前と 1px しか違わず名前の一部に見えるので、段より小さく置きます。
 
 **見分けの付かない差に2つの役を割り当てません。** 新しい部品の大きさを決めるときは、まず近い段との差を見て寄せられないかを確かめます。1px 未満しか違わない2つの値は、読者には同じ大きさに見えます。
 
@@ -322,7 +322,7 @@ career: true
 
 ### 影は持たない
 
-影は1段階も持ちません。**輪郭はなるべく作りません。** 一覧の1件は囲みを持たず間隔だけで分け、**横に並んで箱でないと成立しない部品**（連載・特設パネル / リンクプレビュー）だけが枠線を持ちます。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。
+影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 一覧の1件は囲みを持たず間隔だけで分け、記事へ送るカードで枠線を持つのは**横に並んで箱でないと成立しない部品**（連載・特設パネル / リンクプレビュー）だけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。
 
 ### hover は1部品1反応
 
@@ -353,7 +353,7 @@ career: true
 
 ヘッダーの帯の中だけは、下線も背景も動かさず文字色を1段階濃くします（帯から下がるドロップダウンの行は背景が変わります）。
 
-フッターのリンクだけは例外で、下線が左から 0.25 秒で伸びます。読者がわざわざ辿り着いた先なので動きを持たせても認知負荷にならない、という判断です。タブの切り替え（0.18 秒）と `details` の開閉は反応ではなく状態の変化なので、それぞれ別の時間を持ちます。
+フッターのリンクだけは例外で、下線が左から 0.25 秒で伸びます。読者がわざわざ辿り着いた先なので動きを持たせても認知負荷にならない、という判断です。**開閉・展開は反応ではなく状態の変化**なので、別の時間を持ちます。タブの切り替え、ドロップダウンと引き出しの開閉、検索窓の拡張、折りたたみの開閉がこれで、いずれも hover より長い側（0.12〜0.2 秒）に置きます。変わったことが読み取れるまで動きが続く必要があるからです。
 
 ### フォーカスリング
 
@@ -382,7 +382,6 @@ career: true
 | 部品 | 表し方 | 実物 |
 | --- | --- | --- |
 | パンくず | 太字 | [すべての記事](/articles/) の2ページ目 |
-| サイドバーのカテゴリ | 太字 | [Programming カテゴリ](/categories/Programming/) |
 | ページャ | 現在のページだけネイビーの丸で塗る。省略の「…」は塗らない | [すべての記事](/articles/) の2ページ目 |
 | タブ | 下線がネイビーになり、太字になる。塗りにすると中身より目立つ | [トップページ](/) |
 
@@ -439,4 +438,4 @@ career: true
 
 ### 群のある一覧
 
-行き先が多い一覧（タグ一覧の「すべてのタグ」は679件）は、頭文字や年で群に分け、左のラベルが群を名乗る行に並べます。群の範囲は空きではなく行の上下の罫線が示します。群が多いときは節の先頭に群への飛び先を1行置きます。実物は[タグ一覧](/tags/#alltags)と[著者一覧](/authors/#awards)にあります。
+行き先が多い一覧（タグ一覧の「すべてのタグ」は全件を並べます）は、頭文字や年で群に分け、左のラベルが群を名乗る行に並べます。群の範囲は空きではなく行の上下の罫線が示します。群が多いときは節の先頭に群への飛び先を1行置きます。実物は[タグ一覧](/tags/#alltags)と[著者一覧](/authors/#awards)にあります。

themes/future/css-src/theme-styles.styl

@@ -3286,9 +3286,6 @@ ul.tag-list {
 .archive-list-count:after {
   content: "本";
 }
-.archive-list-current {
-  font-weight: bold;
-}
 /* 投稿が無い月のダミーカード (#2219)。月が歯抜けだと「無い」のか
    見落としなのか区別できない。リンクにせず、ホバーにも応えない */
 .archive-list-item-empty:hover {

themes/future/layout/archive.ejs

@@ -127,15 +127,7 @@
     <% } %>
     <%- partial('_partial/section-heading', {id: 'years', text: '年別'}) %>
     <section class="archives">
-    <%
-      const trans = (str, path=page.path) => {
-      if (path.indexOf(str) > 0) {
-        return `<span class="archive-list-current">${str}</span>`;
-      }
-      return str;
-      }
-    %>
-    <%- list_archives({format: "YYYY", type:"yearly", transform:trans}) %>
+    <%- list_archives({format: "YYYY", type:"yearly"}) %>
     </section>
 
     <% } %>