@riebeckite/theme-minimal 0.0.26 → 0.0.28

package/README_ja.md

@@ -8,16 +8,16 @@
 
 ## 何をするテーマか
 
-`minimalTheme()` は名前が `minimal` のテーマを作ります。完全な `--rb-*` トークンを `@theme` に対応させたうえで、安定した構造フック（`.rb-article-*`、`.rb-sidebar`）とプラグインのルート（`rr-*`）にタイポグラフィの個性を重ねます。指定はすべて `[data-theme-name="minimal"]` にスコープし、`@layer base` の外に置いています。
+`minimalTheme()` は名前が `minimal` のテーマを作ります。完全な `--rb-*` トークンを `@theme` に対応させます。そのうえで、安定した構造フック（`.rb-article-*`、`.rb-sidebar`）とプラグインのルート（`rr-*`）にタイポグラフィの個性を重ねます。指定はすべて `[data-theme-name="minimal"]` にスコープし、`@layer base` の外に置いています。
 
-[Minimal for Obsidian](https://github.com/kepano/obsidian-minimal) の設計思想（内容が主役、静かな操作画面、強いタイポグラフィ、控えめなアクセント、詰まっていても読みやすいクローム）を、Riebeckite のセマンティックトークンと安定フックに置き換えて実装したものです。Obsidian デスクトップアプリの見た目を模したり、Obsidian の変数や DOM があることを前提にしたりはしません。
+[Minimal for Obsidian](https://github.com/kepano/obsidian-minimal) の設計思想を、Riebeckite のセマンティックトークンと安定フックに置き換えて実装したものです。設計思想は、内容が主役、静かな操作画面、強いタイポグラフィ、控えめなアクセント、詰まっていても読みやすいクロームです。Obsidian デスクトップアプリの見た目を模したり、Obsidian の変数や DOM があることを前提にしたりはしません。
 
 個性は引き算にあります。
 
-- **狭い行長。** 記事カラムを `43rem` に絞り、ページのクロームを増やさずに一行の長さを読みやすく保ちます。
-- **文字が主役。** 見出しは大きさ、太さ、字間で差をつけ、色・罫線・囲みは使いません。本文は行間を広めに取り、段落の余白もゆったりさせます。
-- **塗りより罫線。** 引用、コード、表、記事メタ／フッター、プラグインのルートは、カードや塗り、影ではなく 1px の罫線とごく薄い背景（または背景なし）で扱います。角は直角のままです。
-- **ほぼ無彩色。** アクセントはインクそのものだけ。リンクはインク色で、控えめな下線をホバーで少し強めます。アクセントを使うのはリンク、フォーカス／選択状態、操作部品に限ります。
+- **狭い行長**。 記事カラムを `43rem` に絞り、ページのクロームを増やさずに一行の長さを読みやすく保ちます。
+- **文字が主役**。 見出しは大きさ、太さ、字間で差をつけ、色・罫線・囲みは使いません。本文は行間を広めに取り、段落の余白もゆったりさせます。
+- **塗りより罫線**。 引用、コード、表、記事メタ／フッター、プラグインのルートは、カードや塗り、影ではなく 1px の罫線とごく薄い背景（または背景なし）で扱います。角は直角のままです。
+- **ほぼ無彩色**。 アクセントはインクそのものだけ。リンクはインク色で、控えめな下線をホバーで少し強めます。アクセントを使うのはリンク、フォーカス／選択状態、操作部品に限ります。
 
 設定を変えずに `defaultTheme()` を置き換えられ、ルートに `data-theme-name="minimal"` を報告します。
 
@@ -64,14 +64,14 @@ export default defineConfig({
 
 パレットはわざと色味を持たせず、無彩でまとめています。
 
-- **ライト** — ほぼ白の読書面（`#ffffff`）、わずかに差をつけた副次サーフェス（`#f7f7f7` / `#ececec`）、濃いニュートラルのインク（`#1a1a1a`）、やわらかい副次テキスト（`#6b6b6b`）、低コントラストの罫線、そしてアクセントとしてのインク。
-- **ダーク** — ニュートラルな暗い背景（`#1a1a1a`）と、わずかに持ち上げた副次サーフェス（`#242424` / `#2e2e2e`）、やわらかいオフホワイトの本文（`#e5e5e5`）、抑制した補助テキスト（`#9e9e9e`）、控えめな区切り、同じインク基調のアクセント。純黒や発光、彩度の高いアクセントは使いません。
+- **ライト**：ほぼ白の読書面（`#ffffff`）、わずかに差をつけた副次サーフェス（`#f7f7f7` / `#ececec`）、濃いニュートラルのインク（`#1a1a1a`）、やわらかい副次テキスト（`#6b6b6b`）、低コントラストの罫線、そしてアクセントとしてのインク。
+- **ダーク**：ニュートラルな暗い背景（`#1a1a1a`）と、わずかに持ち上げた副次サーフェス（`#242424` / `#2e2e2e`）、やわらかいオフホワイトの本文（`#e5e5e5`）、抑制した補助テキスト（`#9e9e9e`）、控えめな区切り、同じインク基調のアクセント。純黒や発光、彩度の高いアクセントは使いません。
 
 `colorMode: "system"` では `data-theme` を付けず OS の設定に従います。`"light"` または `"dark"` を指定すると対応する `data-theme` が付きます。リンク、フォーカスリング、選択中の操作部品、選択範囲はいずれも同じインクのアクセントを使うため、どちらのモードでもはっきり見え、AA コントラストを満たします。
 
 ## 背景コントラストのバリエーション
 
-本家 Minimal には背景コントラストのバリエーション（既定、低コントラスト、高コントラスト、トゥルーブラック）があります。現在の Riebeckite の Theme API にはバリエーションの概念がないため、このテーマは通常の見た目を既定として提供し、サーフェスの階層をセマンティックトークン（`--rb-color-paper`、`--rb-color-surface`、`--rb-color-surface-hover`、`--rb-color-code-background`）で表現しています。`tokens` オプションでサイトごとに上書きすることはすでに可能です。背景コントラストのバリエーションは、独自属性で見せかけるのではなく、将来 Theme API に追加できる拡張候補です。
+本家 Minimal には背景コントラストのバリエーションがあります。既定、低コントラスト、高コントラスト、トゥルーブラックです。現在の Riebeckite の Theme API にはバリエーションの概念がありません。そのため、このテーマは通常の見た目を既定として提供し、サーフェスの階層をセマンティックトークンで表現しています。対象は `--rb-color-paper`、`--rb-color-surface`、`--rb-color-surface-hover`、`--rb-color-code-background` です。`tokens` オプションでサイトごとに上書きすることはすでに可能です。背景コントラストのバリエーションは、独自属性で見せかけるのではなく、将来 Theme API に追加できる拡張候補です。
 
 ## 主なエクスポート
 
@@ -107,8 +107,8 @@ Riebeckite theme based on the design principles of Minimal for Obsidian by Steph
 npm install @riebeckite/theme-minimal
 ```
 
-Theme の factory 名と設定項目は、実装とこの正本ページを一次情報として確認してください。`riebeckite.config.ts` の `theme` に設定して利用します。
+Theme の factory 名と設定項目は、実装とこのページを一次情報として確認してください。`riebeckite.config.ts` の `theme` に設定して利用します。
 
 ## 詳細仕様
 
-設定項目や Theme 固有の仕様は この正本ページを参照してください。Theme の仕組みは [Theme System](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/framework/theme-system.ja.md)、Theme を作る場合は [Writing a Theme](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/themes/writing-a-theme.ja.md) を参照してください。
+設定項目や Theme 固有の仕様は このページを参照してください。Theme の仕組みは [Theme System](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/framework/theme-system.ja.md)、Theme を作る場合は [Writing a Theme](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/themes/writing-a-theme.ja.md) を参照してください。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/theme-minimal",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -16,7 +16,7 @@
     "./styles/theme.css": "./styles/theme.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.26"
+    "@riebeckite/core": "0.0.28"
   },
   "publishConfig": {
     "access": "public"

package/styles/theme.css

@@ -389,7 +389,6 @@
 
 :is(:root, .rb-theme-root)[data-theme-name="minimal"] .rb-article-footer {
   margin-top: 4rem;
-  padding-top: 1.5rem;
   border-top: 1px solid var(--rb-color-border);
   color: var(--rb-color-muted);
   font-size: 0.9rem;
@@ -443,10 +442,9 @@
   border-radius: 0;
 }
 
-/* Keep the plugin's code-surface tokens so terminal blocks still invert;
-   ordinary blocks resolve to the reading surface. The code-enhance plugin
-   owns `.rr-code__pre` / `.rr-code__line` padding, so only the surface colour
-   and the flat square frame are themed here. */
+/* The code-enhance plugin paints every block with its own surface tokens, so
+   the theme only reads them for the surface colour and the flat square frame.
+   The plugin owns `.rr-code__pre` / `.rr-code__line` padding. */
 :is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-code {
   background: var(--rr-code-paper, var(--rb-color-code-background));
   color: var(--rr-code-ink, var(--rb-color-ink));
@@ -468,6 +466,13 @@
 }
 
 :is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-callout {
+  --rr-callout-title-color: var(--rr-callout-tone);
+  --rr-callout-title-font-family: var(--rb-font-body);
+  --rr-callout-title-font-size: 0.8125rem;
+  --rr-callout-title-font-weight: 600;
+  --rr-callout-title-letter-spacing: normal;
+  --rr-callout-title-text-transform: none;
+  --rr-callout-icon-color: var(--rr-callout-tone);
   margin: 2rem 0;
   padding: 1rem 1.25rem;
   border: 1px solid
@@ -483,23 +488,6 @@
   color: var(--rb-color-ink);
 }
 
-:is(:root, .rb-theme-root)[data-theme-name="minimal"]
-  .rr-callout
-  .rr-callout__title {
-  color: var(--rr-callout-tone);
-  font-family: var(--rb-font-body);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-:is(:root, .rb-theme-root)[data-theme-name="minimal"]
-  .rr-callout
-  .rr-callout__icon {
-  color: var(--rr-callout-tone);
-}
-
 :is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-callout p:last-child {
   margin-bottom: 0;
 }
@@ -520,11 +508,9 @@
   border-radius: 0;
 }
 
-:is(:root, .rb-theme-root)[data-theme-name="minimal"]
-  .rr-search
-  .rr-search-modal__panel {
-  border-radius: 0;
-  box-shadow: none;
+:is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-search {
+  --rr-search-modal-panel-border-radius: 0;
+  --rr-search-modal-panel-shadow: none;
 }
 
 :is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-cardlink {
@@ -551,9 +537,6 @@
   background: none;
 }
 
-/* The color-mode toggle is authored as a pill; flatten it to match. Both
-   classes are documented plugin hooks (`rr-color-mode`, `rr-color-mode__button`). */
-:is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-color-mode,
-:is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-color-mode__button {
-  border-radius: 0;
+:is(:root, .rb-theme-root)[data-theme-name="minimal"] .rr-color-mode {
+  --rr-color-mode-border-radius: 0;
 }