@riebeckite/theme-gruvbox 0.0.27 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README_ja.md +5 -5
- package/package.json +2 -2
- package/styles/theme.css +2 -4
package/README_ja.md
CHANGED
|
@@ -8,7 +8,7 @@ Gruvbox の温かい配色を Riebeckite のテーマにしたものです。明
|
|
|
8
8
|
|
|
9
9
|
## 概要
|
|
10
10
|
|
|
11
|
-
`gruvboxTheme()` は `gruvbox` という名前のテーマを作ります。他の Riebeckite テーマと同じ `ThemeConfig` API
|
|
11
|
+
`gruvboxTheme()` は `gruvbox` という名前のテーマを作ります。他の Riebeckite テーマと同じ `ThemeConfig` API とトークンの名前空間に従います。デザイントークンを CSS カスタムプロパティ（`--rb-color-*`、`--rb-font-*`、`--rb-space-*`、`--rb-layout-*`）として公開し、`@theme` ブロックで Tailwind の値に対応づけます。
|
|
12
12
|
|
|
13
13
|
配色の差し替えだけでなく、見た目の性格も持たせています。見出しは温かいインク色で大きさの段階をはっきりつけ、`h2` の下に 1px の罫線を引きます。リンクは青、ホバーで下線。引用は灰色の左罫線で平らにまとめ、表は細い罫線と淡く色づけたヘッダー行、プラグインの面は 1px 罫線と小さめの角丸（2px）で統一します。グラデーションや影は使わず、角は控えめ、動きは付けません。本文は長文を読みやすい行間と、まぶしさを抑えた面で構成しています。
|
|
14
14
|
|
|
@@ -38,8 +38,8 @@ export default defineConfig({
|
|
|
38
38
|
|
|
39
39
|
## 明るい配色と暗い配色
|
|
40
40
|
|
|
41
|
-
-
|
|
42
|
-
-
|
|
41
|
+
- **明るい配色**：`bg0` の紙、`dark1` 相当の文字、Gruvbox の暗い側のアクセント（例: 背景 `#fbf1c7`、文字 `#3c3836`、アクセント `#076678`）
|
|
42
|
+
- **暗い配色**：`bg0` の紙、`light1` の文字、Gruvbox の明るい側のアクセント（例: 背景 `#282828`、文字 `#ebdbb2`、アクセント `#83a598`）
|
|
43
43
|
|
|
44
44
|
`colorMode: "system"` は `data-theme` が付いていないかぎり `prefers-color-scheme` に従います。どちらの配色でもアクセントの役割は同じで、使う Gruvbox の色だけが明るい側・暗い側で入れ替わります。
|
|
45
45
|
|
|
@@ -119,8 +119,8 @@ Gruvbox を基調とした暖かい配色の Theme です。
|
|
|
119
119
|
npm install @riebeckite/theme-gruvbox
|
|
120
120
|
```
|
|
121
121
|
|
|
122
|
-
Theme の factory
|
|
122
|
+
Theme の factory 名と設定項目は、実装とこのページを一次情報として確認してください。`riebeckite.config.ts` の `theme` に設定して利用します。
|
|
123
123
|
|
|
124
124
|
## 詳細仕様
|
|
125
125
|
|
|
126
|
-
設定項目や Theme 固有の仕様は
|
|
126
|
+
設定項目や 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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/theme-gruvbox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.28",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/src/index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"./styles/theme.css": "./styles/theme.css"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@riebeckite/core": "0.0.
|
|
19
|
+
"@riebeckite/core": "0.0.28"
|
|
20
20
|
},
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
package/styles/theme.css
CHANGED
|
@@ -493,20 +493,18 @@
|
|
|
493
493
|
border-radius: 2px;
|
|
494
494
|
}
|
|
495
495
|
|
|
496
|
-
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
497
|
-
.rr-code:not([data-terminal="true"]),
|
|
498
496
|
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rr-code-tabs {
|
|
499
497
|
background: var(--rb-color-code-background);
|
|
500
498
|
}
|
|
501
499
|
|
|
502
500
|
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
503
|
-
:is(.rr-code
|
|
501
|
+
:is(.rr-code, .rr-code-tabs)
|
|
504
502
|
pre {
|
|
505
503
|
margin: 0;
|
|
506
504
|
border: 0;
|
|
507
505
|
border-radius: 0;
|
|
508
506
|
background: transparent;
|
|
509
|
-
color: var(--rb-color-ink);
|
|
507
|
+
color: var(--rr-code-ink, var(--rb-color-ink));
|
|
510
508
|
font-family: var(--rb-font-mono);
|
|
511
509
|
}
|
|
512
510
|
|