@riebeckite/plugin-color-mode 0.0.26 → 0.0.28

package/README.md

@@ -120,6 +120,9 @@ theme. The root is `display: none` until `initColorMode` (or the inline script)
 sets `data-rb-color-mode="ready"` on `<html>`: with JavaScript disabled the
 control never appears.
 
+Themes can set `--rr-color-mode-border-radius` on the `rr-color-mode` root to
+change the shared container and button radius without selecting descendants.
+
 ## Accessibility
 
 - The container is a `<fieldset>` whose `<legend>` names the group (rendered

package/README_ja.md

@@ -10,15 +10,15 @@ Riebeckite サイト向けのライト / ダーク / システム連動のカラ
 
 [theme-system.md](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/theme-api.ja.md) テーマの配色は、次の 3 つの CSS 状態で決まります。
 
-- `:root` — ライト
-- `:root[data-theme="dark"]` — ダーク
-- `@media (prefers-color-scheme: dark) { :root:not([data-theme]) }` — OS に追随（system）
+- `:root`：ライト
+- `:root[data-theme="dark"]`：ダーク
+- `@media (prefers-color-scheme: dark) { :root:not([data-theme]) }`：OS に追随（system）
 
 プラグインは、この 3 つの CSS 状態を切り替えるだけの薄い実行時スイッチで、次の 3 つを提供します。
 
-- `ColorModeScript` — `<head>` に置く 1 行のインラインスクリプト。**最初の描画の前に**保存済みモードを適用し、テーマのちらつき（FOUC）を防ぎます。
-- `ColorModeToggle` — ライト / ダーク / システムのセグメント型コントロール。
-- `initColorMode` — クライアントエントリ。ボタンの結線、`localStorage` への保存、ドキュメントの状態同期を行います。
+- `ColorModeScript`：`<head>` に置く 1 行のインラインスクリプト**。最初の描画の前に**保存済みモードを適用し、テーマのちらつき（FOUC）を防ぎます。
+- `ColorModeToggle`：ライト / ダーク / システムのセグメント型コントロール。
+- `initColorMode`：クライアントエントリ。ボタンの結線、`localStorage` への保存、ドキュメントの状態同期を行います。
 
 `colorModePlugin()` はスタイルシートとクライアントエントリの登録だけを行います。UI はサイトシェルで描画する 2 つのコンポーネントから届きます。
 
@@ -98,6 +98,9 @@ return (
 
 スタイルシートは `--rb-color-*` トークンを使うため、アクティブなテーマに追従します。ルートは `display: none` で、`initColorMode`（またはインラインスクリプト）が `<html>` に `data-rb-color-mode="ready"` を付けるまで非表示です。JavaScript が無効なページではコントロールそのものが現れません。
 
+Theme は `rr-color-mode` の root に `--rr-color-mode-border-radius` を指定すると、子要素を
+選択せずにコンテナとボタンで共有する角丸を変更できます。
+
 ## アクセシビリティ
 
 - コンテナは `<fieldset>` で、グループ名は可視非表示の `<legend>`（`label` props）が提供します。
@@ -126,10 +129,10 @@ document.addEventListener("riebeckite:color-mode", (event) => {
 
 ## Exports
 
-- `colorModePlugin()` — プラグインファクトリ
-- `ColorModeToggle` — 切替コンポーネント
-- `ColorModeScript` — 描画前インラインスクリプトのコンポーネント
-- `initColorMode` — ブラウザ初期化関数（`@riebeckite/plugin-color-mode/client` からも export）
+- `colorModePlugin()`：プラグインファクトリ
+- `ColorModeToggle`：切替コンポーネント
+- `ColorModeScript`：描画前インラインスクリプトのコンポーネント
+- `initColorMode`：ブラウザ初期化関数（`@riebeckite/plugin-color-mode/client` からも export）
 - 定数: `COLOR_MODES` / `COLOR_MODE_STORAGE_KEY` / `COLOR_MODE_EVENT` ほか
 - 型: `ColorMode`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-color-mode",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.26"
+    "@riebeckite/core": "0.0.28"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -5,6 +5,7 @@
     --rr-color-mode-surface: var(--rb-color-surface);
     --rr-color-mode-surface-hover: var(--rb-color-surface-hover);
     --rr-color-mode-border: var(--rb-color-border);
+    --rr-color-mode-border-radius: 999px;
 
     display: none;
     align-items: center;
@@ -13,7 +14,7 @@
     min-width: 0;
     padding: 0.2rem;
     border: 1px solid var(--rr-color-mode-border);
-    border-radius: 999px;
+    border-radius: var(--rr-color-mode-border-radius);
   }
 
   /* The legend names the group for assistive technology only. */
@@ -45,7 +46,7 @@
     color: var(--rr-color-mode-muted);
     background: transparent;
     border: 0;
-    border-radius: 999px;
+    border-radius: var(--rr-color-mode-border-radius);
     cursor: pointer;
     transition:
       background-color 120ms linear,