@riebeckite/theme-gruvbox 0.0.3 → 0.0.6
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.md +140 -83
- package/README_ja.md +108 -54
- package/package.json +2 -2
- package/styles/theme.css +585 -182
package/README.md
CHANGED
|
@@ -1,83 +1,140 @@
|
|
|
1
|
-
# @riebeckite/theme-gruvbox
|
|
2
|
-
|
|
3
|
-
A warm, retro-groove Gruvbox theme for Riebeckite: buttery-cream paper with
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[日本語](./README_ja.md)
|
|
8
|
-
|
|
9
|
-
## Overview
|
|
10
|
-
|
|
11
|
-
`gruvboxTheme()` creates a theme named `gruvbox`, following the same
|
|
12
|
-
`ThemeConfig` API and token contract as the other Riebeckite themes. Design
|
|
13
|
-
tokens are exposed as CSS custom properties (`--rb-color-*`, `--rb-font-*`,
|
|
14
|
-
`--rb-space-*`, `--rb-layout-*`) and mapped into Tailwind theme values in an
|
|
15
|
-
`@theme` block.
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
`caret-color
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
- `
|
|
75
|
-
-
|
|
76
|
-
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
1
|
+
# @riebeckite/theme-gruvbox
|
|
2
|
+
|
|
3
|
+
A warm, retro-groove Gruvbox theme for Riebeckite: buttery-cream paper with
|
|
4
|
+
warm-charcoal ink in light mode, rich charcoal with `#ebdbb2` ink in dark mode,
|
|
5
|
+
and the classic Gruvbox blue as the interactive accent.
|
|
6
|
+
|
|
7
|
+
[日本語](./README_ja.md)
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
`gruvboxTheme()` creates a theme named `gruvbox`, following the same
|
|
12
|
+
`ThemeConfig` API and token contract as the other Riebeckite themes. Design
|
|
13
|
+
tokens are exposed as CSS custom properties (`--rb-color-*`, `--rb-font-*`,
|
|
14
|
+
`--rb-space-*`, `--rb-layout-*`) and mapped into Tailwind theme values in an
|
|
15
|
+
`@theme` block.
|
|
16
|
+
|
|
17
|
+
Beyond the palette it carries a distinct visual character rather than being a
|
|
18
|
+
color swap: warm ink headings with a quiet 1px rule under `h2`, blue
|
|
19
|
+
underline-on-hover links, a flat gray-ruled blockquote, hairline-bordered
|
|
20
|
+
tables with a tinted header row, and flat 1px-bordered plugin surfaces with
|
|
21
|
+
small 2px corners. Corners stay small, there are no gradients or shadows, and
|
|
22
|
+
motion is left to the framework. Body copy sits at a comfortable reading rhythm
|
|
23
|
+
with low-glare surfaces throughout.
|
|
24
|
+
|
|
25
|
+
It also applies assertive base styling: an accent `caret-color`/
|
|
26
|
+
`accent-color`, a Gruvbox orange/yellow `:focus-visible` outline, matching
|
|
27
|
+
`::selection`, and a slim accent-tinted scrollbar.
|
|
28
|
+
|
|
29
|
+
The palette uses the original Gruvbox values (see [Attribution](#attribution)).
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import { defineConfig } from "@riebeckite/core";
|
|
35
|
+
import { gruvboxTheme } from "@riebeckite/theme-gruvbox";
|
|
36
|
+
|
|
37
|
+
export default defineConfig({
|
|
38
|
+
// ...
|
|
39
|
+
theme: gruvboxTheme({
|
|
40
|
+
colorMode: "system",
|
|
41
|
+
typography: "system",
|
|
42
|
+
articleLayout: "article",
|
|
43
|
+
contrast: "hard",
|
|
44
|
+
userCss: [],
|
|
45
|
+
}),
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Relies on the same `ThemeConfig` API as `defaultTheme()`, so it can replace any
|
|
50
|
+
other theme without configuration changes. The root-level `data-theme-name`
|
|
51
|
+
attribute reports `gruvbox`.
|
|
52
|
+
|
|
53
|
+
## Dark and light
|
|
54
|
+
|
|
55
|
+
- **Light** — `bg0` paper, `dark1`-ish ink, and the dark Gruvbox accent
|
|
56
|
+
variants (e.g. paper `#fbf1c7`, ink `#3c3836`, accent `#076678`)
|
|
57
|
+
- **Dark** — `bg0` paper, `light1` ink, and the bright Gruvbox accent variants
|
|
58
|
+
(e.g. paper `#282828`, ink `#ebdbb2`, accent `#83a598`)
|
|
59
|
+
|
|
60
|
+
`colorMode: "system"` follows `prefers-color-scheme` unless a `data-theme`
|
|
61
|
+
attribute is present. Both modes share the same semantic accent roles; only the
|
|
62
|
+
bright/dark Gruvbox color variants change.
|
|
63
|
+
|
|
64
|
+
`contrast` maps to the classic Gruvbox `bg0` level for the page paper:
|
|
65
|
+
|
|
66
|
+
- dark: `soft` = `dark0_soft`, `medium` = `dark0`, `hard` = `dark0_hard`
|
|
67
|
+
- light: `soft` = `light0_soft`, `medium` = `light0`, `hard` = `light0_hard`
|
|
68
|
+
|
|
69
|
+
## Palette mapping
|
|
70
|
+
|
|
71
|
+
| Semantic token | Light | Dark |
|
|
72
|
+
| -------------- | ----- | ---- |
|
|
73
|
+
| `--rb-color-paper` | `#fbf1c7` (light0) | `#282828` (dark0) |
|
|
74
|
+
| `--rb-color-surface` | `#f2e5bc` (light0_soft) | `#32302f` (dark0_soft) |
|
|
75
|
+
| `--rb-color-surface-hover` | `#ebdbb2` (light1) | `#3c3836` (dark1) |
|
|
76
|
+
| `--rb-color-ink` | `#3c3836` (dark1) | `#ebdbb2` (light1) |
|
|
77
|
+
| `--rb-color-muted` | `#665c54` (dark3) | `#a89984` (light4) |
|
|
78
|
+
| `--rb-color-accent` | `#076678` (faded_blue) | `#83a598` (bright_blue) |
|
|
79
|
+
| `--rb-color-border` | `#d5c4a1` (light2) | `#504945` (dark2) |
|
|
80
|
+
| `--rb-color-border-strong` | `#bdae93` (light3) | `#665c54` (dark3) |
|
|
81
|
+
| `--rb-color-danger` | `#9d0006` (faded_red) | `#fb4934` (bright_red) |
|
|
82
|
+
| `--rb-color-success` | `#79740e` (faded_green) | `#b8bb26` (bright_green) |
|
|
83
|
+
| `--rb-color-code-background` | `#f2e5bc` (light0_soft) | `#1d2021` (dark0_hard) |
|
|
84
|
+
|
|
85
|
+
Contrast-driven deviations from the canonical pairing, keeping the Gruvbox
|
|
86
|
+
palette:
|
|
87
|
+
|
|
88
|
+
- **Light links/accent** use `faded_blue #076678` instead of
|
|
89
|
+
`neutral_blue #458588` (`#458588` is only ~3.7:1 on `#fbf1c7`, below WCAG AA;
|
|
90
|
+
`#076678` is ~5.8:1).
|
|
91
|
+
- **Light muted text** uses `dark3 #665c54` instead of `dark4 #7c6f64`
|
|
92
|
+
(`#7c6f64` is ~4.3:1; `#665c54` is ~5.2:1 or better).
|
|
93
|
+
- **Focus outline** is Gruvbox orange/yellow (`#af3a03` light, `#fabd2f`
|
|
94
|
+
dark) so it is visible against the paper in both modes.
|
|
95
|
+
|
|
96
|
+
## Options
|
|
97
|
+
|
|
98
|
+
`gruvboxTheme(options?)` accepts any `ThemeConfig` field except `name`, plus
|
|
99
|
+
the theme-specific `contrast` option:
|
|
100
|
+
|
|
101
|
+
| Option | Type | Default | Description |
|
|
102
|
+
| ------ | ---- | ------- | ----------- |
|
|
103
|
+
| `contrast` | `"soft" \| "medium" \| "hard"` | `"medium"` | The classic Gruvbox contrast level (applied via the `data-gruvbox-contrast` attribute), selecting `dark0_soft`/`dark0`/`dark0_hard` (or `light0_soft`/`light0`/`light0_hard`) as the page paper |
|
|
104
|
+
| `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | Color mode. `system` follows `prefers-color-scheme` unless `data-theme` is set |
|
|
105
|
+
| `typography` | `"system" \| "serif" \| "sans"` | `"system"` | Typography preset, applied via the `data-typography` attribute |
|
|
106
|
+
| `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | Article layout preset for consumers that read `data-article-layout` |
|
|
107
|
+
| `tokens` | `ThemeDesignTokens` | `{}` | Override design tokens (colors, fonts, spacing, layout widths) |
|
|
108
|
+
| `userCss` | `string[]` | `[]` | Extra user stylesheets |
|
|
109
|
+
|
|
110
|
+
Theme-specific options are applied to the root element as safe `data-*`
|
|
111
|
+
attributes (`data-gruvbox-contrast`). `contrast` can also be overridden
|
|
112
|
+
directly from `config` via
|
|
113
|
+
`attributes: { "data-gruvbox-contrast": "hard" }`.
|
|
114
|
+
|
|
115
|
+
See the [`@riebeckite/theme-default`](../default/README.md) README for the
|
|
116
|
+
full token list — the token contract is identical.
|
|
117
|
+
|
|
118
|
+
## Exports
|
|
119
|
+
|
|
120
|
+
- `gruvboxTheme(options?)` — theme factory
|
|
121
|
+
- Type: `GruvboxThemeOptions`
|
|
122
|
+
- Styles: `@riebeckite/theme-gruvbox/style.css`
|
|
123
|
+
|
|
124
|
+
## Attribution
|
|
125
|
+
|
|
126
|
+
Riebeckite theme based on the Gruvbox color scheme by Pavel Pertsev.
|
|
127
|
+
|
|
128
|
+
- Upstream: <https://github.com/morhetz/gruvbox>
|
|
129
|
+
- Upstream license: MIT/X11
|
|
130
|
+
|
|
131
|
+
This package is an independent Riebeckite theme, not the original Gruvbox
|
|
132
|
+
project, and is distributed here under the license stated in the package
|
|
133
|
+
`LICENSE` file.
|
|
134
|
+
|
|
135
|
+
## See also
|
|
136
|
+
|
|
137
|
+
- [Plugin guide](../../../docs/en/plugin-system.md)
|
|
138
|
+
- [`@riebeckite/theme-default`](../default/README.md)
|
|
139
|
+
- [`@riebeckite/theme-sakura`](../sakura/README.md)
|
|
140
|
+
- [`@riebeckite/theme-tokyonight`](../tokyonight/README.md)
|
package/README_ja.md
CHANGED
|
@@ -1,54 +1,108 @@
|
|
|
1
|
-
# @riebeckite/theme-gruvbox
|
|
2
|
-
|
|
3
|
-
Gruvbox
|
|
4
|
-
|
|
5
|
-
[English](./README.md)
|
|
6
|
-
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
- `
|
|
47
|
-
-
|
|
48
|
-
|
|
49
|
-
##
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
1
|
+
# @riebeckite/theme-gruvbox
|
|
2
|
+
|
|
3
|
+
Gruvbox の温かい配色を Riebeckite のテーマにしたものです。明るい配色ではクリーム色の紙に焦げ茶の文字、暗い配色ではチャコールの背景に `#ebdbb2` の文字を載せ、リンクや操作要素には Gruvbox の青を使います。
|
|
4
|
+
|
|
5
|
+
[English](./README.md)
|
|
6
|
+
|
|
7
|
+
## 概要
|
|
8
|
+
|
|
9
|
+
`gruvboxTheme()` は `gruvbox` という名前のテーマを作ります。他の Riebeckite テーマと同じ `ThemeConfig` API とトークン契約に従い、デザイントークンを CSS カスタムプロパティ（`--rb-color-*`、`--rb-font-*`、`--rb-space-*`、`--rb-layout-*`）として公開したうえで、`@theme` ブロックで Tailwind の値に対応づけます。
|
|
10
|
+
|
|
11
|
+
配色の差し替えだけでなく、見た目の性格も持たせています。見出しは温かいインク色で大きさの段階をはっきりつけ、`h2` の下に 1px の罫線を引きます。リンクは青、ホバーで下線。引用は灰色の左罫線で平らにまとめ、表は細い罫線と淡く色づけたヘッダー行、プラグインの面は 1px 罫線と小さめの角丸（2px）で統一します。グラデーションや影は使わず、角は控えめ、動きは付けません。本文は長文を読みやすい行間と、まぶしさを抑えた面で構成しています。
|
|
12
|
+
|
|
13
|
+
入力要素のアクセント色、キーボード操作時のフォーカス枠、テキスト選択、スクロールバーにも Gruvbox の色を適用します。フォーカス枠は明るい配色でオレンジ、暗い配色で黄色にして、どちらでも見つけやすくしています。
|
|
14
|
+
|
|
15
|
+
配色には Gruvbox の原典の値を使っています（[出典](#出典)を参照）。
|
|
16
|
+
|
|
17
|
+
## 設定する
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import { defineConfig } from "@riebeckite/core";
|
|
21
|
+
import { gruvboxTheme } from "@riebeckite/theme-gruvbox";
|
|
22
|
+
|
|
23
|
+
export default defineConfig({
|
|
24
|
+
// ...
|
|
25
|
+
theme: gruvboxTheme({
|
|
26
|
+
colorMode: "system",
|
|
27
|
+
typography: "system",
|
|
28
|
+
articleLayout: "article",
|
|
29
|
+
contrast: "hard",
|
|
30
|
+
userCss: [],
|
|
31
|
+
}),
|
|
32
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
テーマ名は `gruvbox` です。他の Riebeckite テーマと同じ `ThemeConfig` を受け取るため、基本設定を保ったまま差し替えられます。
|
|
36
|
+
|
|
37
|
+
## 明るい配色と暗い配色
|
|
38
|
+
|
|
39
|
+
- **明るい配色** — `bg0` の紙、`dark1` 相当の文字、Gruvbox の暗い側のアクセント（例: 背景 `#fbf1c7`、文字 `#3c3836`、アクセント `#076678`）
|
|
40
|
+
- **暗い配色** — `bg0` の紙、`light1` の文字、Gruvbox の明るい側のアクセント（例: 背景 `#282828`、文字 `#ebdbb2`、アクセント `#83a598`）
|
|
41
|
+
|
|
42
|
+
`colorMode: "system"` は `data-theme` が付いていないかぎり `prefers-color-scheme` に従います。どちらの配色でもアクセントの役割は同じで、使う Gruvbox の色だけが明るい側・暗い側で入れ替わります。
|
|
43
|
+
|
|
44
|
+
`contrast` は古典的な Gruvbox の `bg0` に対応し、ページの紙色を選びます。
|
|
45
|
+
|
|
46
|
+
- 暗い配色: `soft` = `dark0_soft`、`medium` = `dark0`、`hard` = `dark0_hard`
|
|
47
|
+
- 明るい配色: `soft` = `light0_soft`、`medium` = `light0`、`hard` = `light0_hard`
|
|
48
|
+
|
|
49
|
+
## トークンへの対応
|
|
50
|
+
|
|
51
|
+
| セマンティックトークン | 明るい配色 | 暗い配色 |
|
|
52
|
+
| --- | --- | --- |
|
|
53
|
+
| `--rb-color-paper` | `#fbf1c7`（light0） | `#282828`（dark0） |
|
|
54
|
+
| `--rb-color-surface` | `#f2e5bc`（light0_soft） | `#32302f`（dark0_soft） |
|
|
55
|
+
| `--rb-color-surface-hover` | `#ebdbb2`（light1） | `#3c3836`（dark1） |
|
|
56
|
+
| `--rb-color-ink` | `#3c3836`（dark1） | `#ebdbb2`（light1） |
|
|
57
|
+
| `--rb-color-muted` | `#665c54`（dark3） | `#a89984`（light4） |
|
|
58
|
+
| `--rb-color-accent` | `#076678`（faded_blue） | `#83a598`（bright_blue） |
|
|
59
|
+
| `--rb-color-border` | `#d5c4a1`（light2） | `#504945`（dark2） |
|
|
60
|
+
| `--rb-color-border-strong` | `#bdae93`（light3） | `#665c54`（dark3） |
|
|
61
|
+
| `--rb-color-danger` | `#9d0006`（faded_red） | `#fb4934`（bright_red） |
|
|
62
|
+
| `--rb-color-success` | `#79740e`（faded_green） | `#b8bb26`（bright_green） |
|
|
63
|
+
| `--rb-color-code-background` | `#f2e5bc`（light0_soft） | `#1d2021`（dark0_hard） |
|
|
64
|
+
|
|
65
|
+
コントラストの都合で、Gruvbox の色のまま別の色に置き換えた箇所があります。
|
|
66
|
+
|
|
67
|
+
- **明るい配色のリンクとアクセント** は `neutral_blue #458588` ではなく `faded_blue #076678` を使います。`#458588` は `#fbf1c7` 上で約 3.7:1 しかなく WCAG AA を満たさないためです（`#076678` は約 5.8:1）。
|
|
68
|
+
- **明るい配色の補助文字** は `dark4 #7c6f64` ではなく `dark3 #665c54` を使います。`#7c6f64` は約 4.3:1、`#665c54` は約 5.2:1 以上です。
|
|
69
|
+
- **フォーカス枠** は明るい配色で `#af3a03`、暗い配色で `#fabd2f` のオレンジ・黄系にして、どちらの紙色でも見えるようにしています。
|
|
70
|
+
|
|
71
|
+
## 変更できる項目
|
|
72
|
+
|
|
73
|
+
`gruvboxTheme(options?)` は `name` 以外の `ThemeConfig` と、テーマ固有の `contrast` を受け取ります。
|
|
74
|
+
|
|
75
|
+
| 項目 | 型 | 既定値 | 説明 |
|
|
76
|
+
| --- | --- | --- | --- |
|
|
77
|
+
| `contrast` | `"soft" \| "medium" \| "hard"` | `"medium"` | Gruvbox のコントラスト段階（`data-gruvbox-contrast`）。紙色に `dark0_soft`/`dark0`/`dark0_hard`（明るい配色では `light0_soft`/`light0`/`light0_hard`）を選ぶ |
|
|
78
|
+
| `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | `"light"`、`"dark"`、`"system"` |
|
|
79
|
+
| `typography` | `"system" \| "serif" \| "sans"` | `"system"` | 文字組みのプリセット（`data-typography`） |
|
|
80
|
+
| `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | 記事レイアウトの値 |
|
|
81
|
+
| `tokens` | `ThemeDesignTokens` | `{}` | 共通デザイントークンの上書き |
|
|
82
|
+
| `userCss` | `string[]` | `[]` | 追加のスタイルシート |
|
|
83
|
+
|
|
84
|
+
テーマ固有の項目は `data-gruvbox-contrast` としてルート要素に付きます。`contrast` は `attributes: { "data-gruvbox-contrast": "hard" }` として直接指定することもできます。
|
|
85
|
+
|
|
86
|
+
共通トークンの一覧は [`@riebeckite/theme-default`](../default/README_ja.md) の README を参照してください。トークン契約は同じです。
|
|
87
|
+
|
|
88
|
+
## 主なエクスポート
|
|
89
|
+
|
|
90
|
+
- `gruvboxTheme(options?)`: テーマを作成する
|
|
91
|
+
- `GruvboxThemeOptions`: 設定用の型
|
|
92
|
+
- `@riebeckite/theme-gruvbox/style.css`: テーマのスタイルシート
|
|
93
|
+
|
|
94
|
+
## 出典
|
|
95
|
+
|
|
96
|
+
Riebeckite theme based on the Gruvbox color scheme by Pavel Pertsev.
|
|
97
|
+
|
|
98
|
+
- 原典: <https://github.com/morhetz/gruvbox>
|
|
99
|
+
- 原典のライセンス: MIT/X11
|
|
100
|
+
|
|
101
|
+
このパッケージは Riebeckite 向けの独立したテーマであり、Gruvbox 本家そのものではありません。配布条件はパッケージの `LICENSE` ファイルに記載しています。
|
|
102
|
+
|
|
103
|
+
## 関連資料
|
|
104
|
+
|
|
105
|
+
- [テーマシステム](../../../docs/ja/theme-system.md)
|
|
106
|
+
- [`@riebeckite/theme-default`](../default/README_ja.md)
|
|
107
|
+
- [`@riebeckite/theme-sakura`](../sakura/README_ja.md)
|
|
108
|
+
- [`@riebeckite/theme-tokyonight`](../tokyonight/README_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.6",
|
|
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.6"
|
|
20
20
|
},
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
package/styles/theme.css
CHANGED
|
@@ -1,182 +1,585 @@
|
|
|
1
|
-
@theme {
|
|
2
|
-
--font-sans: var(--rb-font-body);
|
|
3
|
-
--font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
4
|
-
--font-mono: var(--rb-font-mono);
|
|
5
|
-
--color-rb-paper: var(--rb-color-paper);
|
|
6
|
-
--color-rb-ink: var(--rb-color-ink);
|
|
7
|
-
--color-rb-muted: var(--rb-color-muted);
|
|
8
|
-
--color-rb-accent: var(--rb-color-accent);
|
|
9
|
-
--color-rb-surface: var(--rb-color-surface);
|
|
10
|
-
--color-rb-danger: var(--rb-color-danger);
|
|
11
|
-
--color-rb-success: var(--rb-color-success);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@layer base {
|
|
15
|
-
:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--rb-color-
|
|
19
|
-
--rb-color-surface
|
|
20
|
-
--rb-color-
|
|
21
|
-
--rb-color-
|
|
22
|
-
--rb-color-
|
|
23
|
-
--rb-color-
|
|
24
|
-
--rb-color-border
|
|
25
|
-
--rb-color-
|
|
26
|
-
--rb-color-
|
|
27
|
-
--rb-color-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
--rb-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--rb-font-
|
|
37
|
-
--rb-
|
|
38
|
-
--rb-space-
|
|
39
|
-
--rb-space-
|
|
40
|
-
--rb-space-
|
|
41
|
-
--rb-space-
|
|
42
|
-
--rb-space-
|
|
43
|
-
--rb-
|
|
44
|
-
--rb-
|
|
45
|
-
--rb-layout-
|
|
46
|
-
--rb-layout-
|
|
47
|
-
--rb-layout-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
--rb-color-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
--rb-color-
|
|
67
|
-
--rb-color-surface
|
|
68
|
-
--rb-color-
|
|
69
|
-
--rb-color-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
--rb-color-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
--rb-color-
|
|
83
|
-
--rb-color-
|
|
84
|
-
--rb-color-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
--
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
--rb-color-
|
|
120
|
-
--rb-color-
|
|
121
|
-
--rb-color-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
background:
|
|
181
|
-
|
|
182
|
-
}
|
|
1
|
+
@theme {
|
|
2
|
+
--font-sans: var(--rb-font-body);
|
|
3
|
+
--font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
4
|
+
--font-mono: var(--rb-font-mono);
|
|
5
|
+
--color-rb-paper: var(--rb-color-paper);
|
|
6
|
+
--color-rb-ink: var(--rb-color-ink);
|
|
7
|
+
--color-rb-muted: var(--rb-color-muted);
|
|
8
|
+
--color-rb-accent: var(--rb-color-accent);
|
|
9
|
+
--color-rb-surface: var(--rb-color-surface);
|
|
10
|
+
--color-rb-danger: var(--rb-color-danger);
|
|
11
|
+
--color-rb-success: var(--rb-color-success);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@layer base {
|
|
15
|
+
/* Light / medium: bg0 = light0, bg1 = light0_soft. */
|
|
16
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] {
|
|
17
|
+
color-scheme: light;
|
|
18
|
+
--rb-color-paper: #fbf1c7;
|
|
19
|
+
--rb-color-surface: #f2e5bc;
|
|
20
|
+
--rb-color-surface-hover: #ebdbb2;
|
|
21
|
+
--rb-color-ink: #3c3836;
|
|
22
|
+
--rb-color-muted: #665c54;
|
|
23
|
+
--rb-color-accent: #076678;
|
|
24
|
+
--rb-color-border: #d5c4a1;
|
|
25
|
+
--rb-color-border-strong: #bdae93;
|
|
26
|
+
--rb-color-danger: #9d0006;
|
|
27
|
+
--rb-color-success: #79740e;
|
|
28
|
+
--rb-color-code-background: #f2e5bc;
|
|
29
|
+
--rb-color-overlay: rgb(29 32 33 / 0.4);
|
|
30
|
+
--gruvbox-warning: #b57614;
|
|
31
|
+
--gruvbox-focus-ring: #af3a03;
|
|
32
|
+
--rb-font-body:
|
|
33
|
+
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
34
|
+
sans-serif;
|
|
35
|
+
--rb-font-heading: var(--rb-font-body);
|
|
36
|
+
--rb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
37
|
+
--rb-space-1: 0.5rem;
|
|
38
|
+
--rb-space-2: 1rem;
|
|
39
|
+
--rb-space-3: 1.5rem;
|
|
40
|
+
--rb-space-4: 2rem;
|
|
41
|
+
--rb-space-6: 3rem;
|
|
42
|
+
--rb-space-8: 4rem;
|
|
43
|
+
--rb-rule-width: 1px;
|
|
44
|
+
--rb-layout-page-max: 80rem;
|
|
45
|
+
--rb-layout-article-max: 48rem;
|
|
46
|
+
--rb-layout-sidebar: 14rem;
|
|
47
|
+
--rb-layout-gap: 2rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Light / soft: bg0 = light0_soft. */
|
|
51
|
+
:is(
|
|
52
|
+
:root,
|
|
53
|
+
.rb-theme-root
|
|
54
|
+
)[data-theme-name="gruvbox"][data-gruvbox-contrast="soft"] {
|
|
55
|
+
--rb-color-paper: #f2e5bc;
|
|
56
|
+
--rb-color-surface: #ebdbb2;
|
|
57
|
+
--rb-color-surface-hover: #d5c4a1;
|
|
58
|
+
--rb-color-code-background: #ebdbb2;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Light / hard: bg0 = light0_hard. */
|
|
62
|
+
:is(
|
|
63
|
+
:root,
|
|
64
|
+
.rb-theme-root
|
|
65
|
+
)[data-theme-name="gruvbox"][data-gruvbox-contrast="hard"] {
|
|
66
|
+
--rb-color-paper: #f9f5d7;
|
|
67
|
+
--rb-color-surface: #f2e5bc;
|
|
68
|
+
--rb-color-surface-hover: #ebdbb2;
|
|
69
|
+
--rb-color-code-background: #f2e5bc;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Dark / medium: bg0 = dark0, bg1 = dark0_soft. */
|
|
73
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"][data-theme="dark"] {
|
|
74
|
+
color-scheme: dark;
|
|
75
|
+
--rb-color-paper: #282828;
|
|
76
|
+
--rb-color-surface: #32302f;
|
|
77
|
+
--rb-color-surface-hover: #3c3836;
|
|
78
|
+
--rb-color-ink: #ebdbb2;
|
|
79
|
+
--rb-color-muted: #a89984;
|
|
80
|
+
--rb-color-accent: #83a598;
|
|
81
|
+
--rb-color-border: #504945;
|
|
82
|
+
--rb-color-border-strong: #665c54;
|
|
83
|
+
--rb-color-danger: #fb4934;
|
|
84
|
+
--rb-color-success: #b8bb26;
|
|
85
|
+
--rb-color-code-background: #1d2021;
|
|
86
|
+
--rb-color-overlay: rgb(0 0 0 / 0.6);
|
|
87
|
+
--gruvbox-warning: #fabd2f;
|
|
88
|
+
--gruvbox-focus-ring: #fabd2f;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Dark / soft: bg0 = dark0_soft. */
|
|
92
|
+
:is(
|
|
93
|
+
:root,
|
|
94
|
+
.rb-theme-root
|
|
95
|
+
)[data-theme-name="gruvbox"][data-theme="dark"][data-gruvbox-contrast="soft"] {
|
|
96
|
+
--rb-color-paper: #32302f;
|
|
97
|
+
--rb-color-surface: #3c3836;
|
|
98
|
+
--rb-color-surface-hover: #504945;
|
|
99
|
+
--rb-color-code-background: #1d2021;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Dark / hard: bg0 = dark0_hard. */
|
|
103
|
+
:is(
|
|
104
|
+
:root,
|
|
105
|
+
.rb-theme-root
|
|
106
|
+
)[data-theme-name="gruvbox"][data-theme="dark"][data-gruvbox-contrast="hard"] {
|
|
107
|
+
--rb-color-paper: #1d2021;
|
|
108
|
+
--rb-color-surface: #282828;
|
|
109
|
+
--rb-color-surface-hover: #32302f;
|
|
110
|
+
--rb-color-code-background: #282828;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (prefers-color-scheme: dark) {
|
|
114
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]:not([data-theme]) {
|
|
115
|
+
color-scheme: dark;
|
|
116
|
+
--rb-color-paper: #282828;
|
|
117
|
+
--rb-color-surface: #32302f;
|
|
118
|
+
--rb-color-surface-hover: #3c3836;
|
|
119
|
+
--rb-color-ink: #ebdbb2;
|
|
120
|
+
--rb-color-muted: #a89984;
|
|
121
|
+
--rb-color-accent: #83a598;
|
|
122
|
+
--rb-color-border: #504945;
|
|
123
|
+
--rb-color-border-strong: #665c54;
|
|
124
|
+
--rb-color-danger: #fb4934;
|
|
125
|
+
--rb-color-success: #b8bb26;
|
|
126
|
+
--rb-color-code-background: #1d2021;
|
|
127
|
+
--rb-color-overlay: rgb(0 0 0 / 0.6);
|
|
128
|
+
--gruvbox-warning: #fabd2f;
|
|
129
|
+
--gruvbox-focus-ring: #fabd2f;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]:not(
|
|
133
|
+
[data-theme]
|
|
134
|
+
)[data-gruvbox-contrast="soft"] {
|
|
135
|
+
--rb-color-paper: #32302f;
|
|
136
|
+
--rb-color-surface: #3c3836;
|
|
137
|
+
--rb-color-surface-hover: #504945;
|
|
138
|
+
--rb-color-code-background: #1d2021;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]:not(
|
|
142
|
+
[data-theme]
|
|
143
|
+
)[data-gruvbox-contrast="hard"] {
|
|
144
|
+
--rb-color-paper: #1d2021;
|
|
145
|
+
--rb-color-surface: #282828;
|
|
146
|
+
--rb-color-surface-hover: #32302f;
|
|
147
|
+
--rb-color-code-background: #282828;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:is(
|
|
152
|
+
:root,
|
|
153
|
+
.rb-theme-root
|
|
154
|
+
)[data-theme-name="gruvbox"][data-typography="serif"] {
|
|
155
|
+
--rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
156
|
+
--rb-font-heading:
|
|
157
|
+
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
158
|
+
sans-serif;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
:is(
|
|
162
|
+
:root,
|
|
163
|
+
.rb-theme-root
|
|
164
|
+
)[data-theme-name="gruvbox"][data-typography="sans"] {
|
|
165
|
+
--rb-font-body:
|
|
166
|
+
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
167
|
+
sans-serif;
|
|
168
|
+
--rb-font-heading: var(--rb-font-body);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] {
|
|
172
|
+
background: var(--rb-color-paper);
|
|
173
|
+
color: var(--rb-color-ink);
|
|
174
|
+
font-family: var(--rb-font-body);
|
|
175
|
+
accent-color: var(--rb-color-accent);
|
|
176
|
+
caret-color: var(--rb-color-accent);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] ::selection {
|
|
180
|
+
background: var(--rb-color-accent);
|
|
181
|
+
color: var(--rb-color-paper);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] :focus-visible {
|
|
185
|
+
outline: 2px solid var(--gruvbox-focus-ring);
|
|
186
|
+
outline-offset: 2px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] * {
|
|
190
|
+
scrollbar-color: var(--rb-color-muted) transparent;
|
|
191
|
+
scrollbar-width: thin;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] ::-webkit-scrollbar {
|
|
195
|
+
width: 10px;
|
|
196
|
+
height: 10px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
200
|
+
::-webkit-scrollbar-thumb {
|
|
201
|
+
background: var(--rb-color-muted);
|
|
202
|
+
border-radius: 10px;
|
|
203
|
+
border: 2px solid var(--rb-color-paper);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
207
|
+
::-webkit-scrollbar-track {
|
|
208
|
+
background: transparent;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* ------------------------------------------------------------------ *
|
|
213
|
+
* Character layer — warm, retro, low-glare Gruvbox.
|
|
214
|
+
*
|
|
215
|
+
* The palette alone lives in @layer base above. These rules are
|
|
216
|
+
* intentionally unlayered so they win over the app's structural CSS and
|
|
217
|
+
* plugin CSS without `!important`, and they target only stable hooks.
|
|
218
|
+
* Corners stay small and shadow-free; color carries hierarchy + semantics.
|
|
219
|
+
* ------------------------------------------------------------------ */
|
|
220
|
+
|
|
221
|
+
/* ---- Site shell ---- */
|
|
222
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-site {
|
|
223
|
+
background: var(--rb-color-paper);
|
|
224
|
+
color: var(--rb-color-ink);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* ---- Long-form rhythm ---- */
|
|
228
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body {
|
|
229
|
+
font-family: var(--rb-font-body);
|
|
230
|
+
font-size: 1.0625rem;
|
|
231
|
+
line-height: 1.75;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body p {
|
|
235
|
+
margin: 1em 0;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
239
|
+
.rb-article-body
|
|
240
|
+
:is(ul, ol) {
|
|
241
|
+
margin: 1.1em 0;
|
|
242
|
+
padding-left: 1.4em;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body li {
|
|
246
|
+
margin: 0.3em 0;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
250
|
+
.rb-article-body
|
|
251
|
+
li::marker {
|
|
252
|
+
color: var(--rb-color-muted);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* ---- Headings: warm ink, clear size steps, quiet h2 rule ---- */
|
|
256
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-header {
|
|
257
|
+
margin-bottom: 1.25rem;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-header h1 {
|
|
261
|
+
margin: 0;
|
|
262
|
+
color: var(--rb-color-ink);
|
|
263
|
+
font-family: var(--rb-font-heading);
|
|
264
|
+
font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.15rem);
|
|
265
|
+
font-weight: 700;
|
|
266
|
+
line-height: 1.2;
|
|
267
|
+
letter-spacing: -0.01em;
|
|
268
|
+
text-wrap: balance;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
272
|
+
.rb-article-body
|
|
273
|
+
:is(h2, h3, h4, h5, h6) {
|
|
274
|
+
color: var(--rb-color-ink);
|
|
275
|
+
font-family: var(--rb-font-heading);
|
|
276
|
+
line-height: 1.3;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body h2 {
|
|
280
|
+
margin: 2.2em 0 0.7em;
|
|
281
|
+
padding-bottom: 0.3em;
|
|
282
|
+
border-bottom: var(--rb-rule-width) solid var(--rb-color-border);
|
|
283
|
+
font-size: 1.4rem;
|
|
284
|
+
font-weight: 700;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body h3 {
|
|
288
|
+
margin: 1.8em 0 0.55em;
|
|
289
|
+
font-size: 1.2rem;
|
|
290
|
+
font-weight: 600;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body h4 {
|
|
294
|
+
margin: 1.5em 0 0.45em;
|
|
295
|
+
font-size: 1.02rem;
|
|
296
|
+
font-weight: 600;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
300
|
+
.rb-article-body
|
|
301
|
+
:is(h5, h6) {
|
|
302
|
+
margin: 1.3em 0 0.4em;
|
|
303
|
+
color: var(--rb-color-muted);
|
|
304
|
+
font-size: 0.92rem;
|
|
305
|
+
font-weight: 600;
|
|
306
|
+
letter-spacing: 0.01em;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* ---- Links: Gruvbox blue, underline on hover ---- */
|
|
310
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
311
|
+
:is(.rb-article-body, .rb-article-footer, .rb-article-meta, .rb-sidebar)
|
|
312
|
+
a {
|
|
313
|
+
color: var(--rb-color-accent);
|
|
314
|
+
text-decoration: none;
|
|
315
|
+
text-decoration-thickness: 1px;
|
|
316
|
+
text-underline-offset: 0.22em;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
320
|
+
:is(.rb-article-body, .rb-article-footer, .rb-article-meta, .rb-sidebar)
|
|
321
|
+
a:hover {
|
|
322
|
+
text-decoration: underline;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* ---- Blockquote: flat, gray left rule (Gruvbox markdownBlockquote) ---- */
|
|
326
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
327
|
+
.rb-article-body
|
|
328
|
+
blockquote {
|
|
329
|
+
margin: 1.5em 0;
|
|
330
|
+
border-left: 3px solid var(--rb-color-muted);
|
|
331
|
+
background: none;
|
|
332
|
+
padding: 0.1em 0 0.1em 1.1em;
|
|
333
|
+
color: color-mix(in srgb, var(--rb-color-ink) 78%, var(--rb-color-muted));
|
|
334
|
+
font-style: normal;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
338
|
+
.rb-article-body
|
|
339
|
+
blockquote
|
|
340
|
+
p:first-of-type::before,
|
|
341
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
342
|
+
.rb-article-body
|
|
343
|
+
blockquote
|
|
344
|
+
p:last-of-type::after {
|
|
345
|
+
content: none;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
/* ---- Rules ---- */
|
|
349
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body hr {
|
|
350
|
+
margin: 2.6em 0;
|
|
351
|
+
border: 0;
|
|
352
|
+
border-top: var(--rb-rule-width) solid var(--rb-color-border);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* ---- Inline code: chip on the Gruvbox code surface ---- */
|
|
356
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
357
|
+
.rb-article-body
|
|
358
|
+
:not(pre)
|
|
359
|
+
> code {
|
|
360
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
361
|
+
border-radius: 2px;
|
|
362
|
+
background: var(--rb-color-code-background);
|
|
363
|
+
color: var(--rb-color-ink);
|
|
364
|
+
padding: 0.15em 0.4em;
|
|
365
|
+
font-family: var(--rb-font-mono);
|
|
366
|
+
font-size: 0.85em;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* ---- Bare fenced code (plugin code keeps its own frame/padding) ---- */
|
|
370
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
371
|
+
.rb-article-body
|
|
372
|
+
pre:not(:where(.rr-code *)) {
|
|
373
|
+
margin: 1.5em 0;
|
|
374
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
375
|
+
border-radius: 2px;
|
|
376
|
+
background: var(--rb-color-code-background);
|
|
377
|
+
color: var(--rb-color-ink);
|
|
378
|
+
padding: 0.9rem 1rem;
|
|
379
|
+
font-family: var(--rb-font-mono);
|
|
380
|
+
font-size: 0.85rem;
|
|
381
|
+
line-height: 1.65;
|
|
382
|
+
overflow-x: auto;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
386
|
+
.rb-article-body
|
|
387
|
+
pre:not(:where(.rr-code *))
|
|
388
|
+
code {
|
|
389
|
+
border: 0;
|
|
390
|
+
background: transparent;
|
|
391
|
+
padding: 0;
|
|
392
|
+
color: inherit;
|
|
393
|
+
font-size: inherit;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
/* ---- Tables: hairlines + a tinted header row ---- */
|
|
397
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-body table {
|
|
398
|
+
margin: 1.6em 0;
|
|
399
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
400
|
+
border-collapse: collapse;
|
|
401
|
+
font-size: 0.95em;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
405
|
+
.rb-article-body
|
|
406
|
+
:is(th, td) {
|
|
407
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
408
|
+
padding: 0.5em 0.75em;
|
|
409
|
+
text-align: left;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
413
|
+
.rb-article-body
|
|
414
|
+
thead
|
|
415
|
+
th {
|
|
416
|
+
background: color-mix(
|
|
417
|
+
in srgb,
|
|
418
|
+
var(--rb-color-accent) 8%,
|
|
419
|
+
var(--rb-color-surface)
|
|
420
|
+
);
|
|
421
|
+
color: var(--rb-color-ink);
|
|
422
|
+
font-weight: 700;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
/* ---- Media ---- */
|
|
426
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
427
|
+
:is(
|
|
428
|
+
.rb-article-body img,
|
|
429
|
+
.rb-article-body video,
|
|
430
|
+
.rr-media,
|
|
431
|
+
.rr-attachment,
|
|
432
|
+
.rr-lightbox,
|
|
433
|
+
.rr-mermaid
|
|
434
|
+
) {
|
|
435
|
+
border-radius: 2px;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/* ---- Article chrome ---- */
|
|
439
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-meta {
|
|
440
|
+
margin: 0 0 1.6rem;
|
|
441
|
+
color: var(--rb-color-muted);
|
|
442
|
+
font-size: 0.85rem;
|
|
443
|
+
letter-spacing: 0.01em;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-article-footer {
|
|
447
|
+
margin-top: 2.5rem;
|
|
448
|
+
border-top: var(--rb-rule-width) solid var(--rb-color-border);
|
|
449
|
+
padding-top: 1rem;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rb-sidebar {
|
|
453
|
+
border-left: var(--rb-rule-width) solid var(--rb-color-border-strong);
|
|
454
|
+
padding-left: 1rem;
|
|
455
|
+
font-size: 0.92rem;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
/* ---- Plugin: quiet flat panels ---- */
|
|
459
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
460
|
+
:is(
|
|
461
|
+
.rr-table-of-contents,
|
|
462
|
+
.rr-backlinks,
|
|
463
|
+
.rr-recent-posts,
|
|
464
|
+
.rr-garden-explorer,
|
|
465
|
+
.rr-query
|
|
466
|
+
) {
|
|
467
|
+
margin: 1.6rem 0;
|
|
468
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
469
|
+
border-radius: 2px;
|
|
470
|
+
background: var(--rb-color-surface);
|
|
471
|
+
padding: 0.9rem 1rem;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
475
|
+
:is(.rr-table-of-contents, .rr-backlinks, .rr-recent-posts)
|
|
476
|
+
a {
|
|
477
|
+
color: var(--rb-color-ink);
|
|
478
|
+
text-decoration: none;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
482
|
+
:is(.rr-table-of-contents, .rr-backlinks, .rr-recent-posts)
|
|
483
|
+
a:hover {
|
|
484
|
+
color: var(--rb-color-accent);
|
|
485
|
+
text-decoration: underline;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
/* ---- Plugin: code frames (the plugin owns its own spacing) ---- */
|
|
489
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
490
|
+
:is(.rr-code, .rr-code-tabs) {
|
|
491
|
+
margin: 1.6rem 0;
|
|
492
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
493
|
+
border-radius: 2px;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
497
|
+
.rr-code:not([data-terminal="true"]),
|
|
498
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rr-code-tabs {
|
|
499
|
+
background: var(--rb-color-code-background);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
503
|
+
:is(.rr-code-tabs, .rr-code:not([data-terminal="true"]))
|
|
504
|
+
pre {
|
|
505
|
+
margin: 0;
|
|
506
|
+
border: 0;
|
|
507
|
+
border-radius: 0;
|
|
508
|
+
background: transparent;
|
|
509
|
+
color: var(--rb-color-ink);
|
|
510
|
+
font-family: var(--rb-font-mono);
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* ---- Plugin: callouts (flat, semantic left rule) ---- */
|
|
514
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rr-callout {
|
|
515
|
+
margin: 1.6rem 0;
|
|
516
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
517
|
+
border-left: 3px solid var(--rb-color-accent);
|
|
518
|
+
border-radius: 2px;
|
|
519
|
+
background: var(--rb-color-surface);
|
|
520
|
+
color: var(--rb-color-ink);
|
|
521
|
+
padding: 0.9rem 1rem;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
525
|
+
.rr-callout
|
|
526
|
+
> :first-child {
|
|
527
|
+
margin-top: 0;
|
|
528
|
+
margin-bottom: 0.5rem;
|
|
529
|
+
color: var(--rb-color-ink);
|
|
530
|
+
font-family: var(--rb-font-heading);
|
|
531
|
+
font-size: 0.75rem;
|
|
532
|
+
font-weight: 700;
|
|
533
|
+
letter-spacing: 0.08em;
|
|
534
|
+
text-transform: uppercase;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
538
|
+
.rr-callout
|
|
539
|
+
> :last-child {
|
|
540
|
+
margin-bottom: 0;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
544
|
+
.rr-callout[data-callout="warning"],
|
|
545
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
546
|
+
.rr-callout[data-callout="caution"] {
|
|
547
|
+
border-left-color: var(--gruvbox-warning);
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
551
|
+
.rr-callout[data-callout="danger"],
|
|
552
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
553
|
+
.rr-callout[data-callout="error"] {
|
|
554
|
+
border-left-color: var(--rb-color-danger);
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
558
|
+
.rr-callout[data-callout="success"],
|
|
559
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
560
|
+
.rr-callout[data-callout="tip"] {
|
|
561
|
+
border-left-color: var(--rb-color-success);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
/* ---- Plugin: surfaces ---- */
|
|
565
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
566
|
+
:is(.rr-search, .rr-cardlink, .rr-local-graph, .rr-mermaid) {
|
|
567
|
+
border: var(--rb-rule-width) solid var(--rb-color-border);
|
|
568
|
+
border-radius: 2px;
|
|
569
|
+
background: var(--rb-color-surface);
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rr-cardlink {
|
|
573
|
+
padding: 0.9rem 1rem;
|
|
574
|
+
text-decoration: none;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"] .rr-cardlink:hover {
|
|
578
|
+
border-color: var(--rb-color-accent);
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
:is(:root, .rb-theme-root)[data-theme-name="gruvbox"]
|
|
582
|
+
.rr-search
|
|
583
|
+
:is(input, button) {
|
|
584
|
+
border-radius: 2px;
|
|
585
|
+
}
|