@riebeckite/theme-rerurate 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 CHANGED
@@ -1,94 +1,129 @@
1
- # @riebeckite/theme-rerurate
2
-
3
- A Rerurate theme for Riebeckite, built on the Rerurate Visual Grammar: warm
4
- Paper / Ink flat surfaces, a signature Orange accent, 1px rules, and an 8px
5
- grid.
6
-
7
- [日本語](./README_ja.md)
8
-
9
- ## Overview
10
-
11
- `rerurateTheme()` creates a theme named `rerurate`, 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
- The palette is the Rerurate brand set:
18
-
19
- - **Light** — warm Paper (`#f6efe2`), Ink (`#171717`), and the signature
20
- Orange (`#f66620`)
21
- - **Dark** — a warm charcoal paper (`#1c1a17`) with Paper-toned ink
22
- (`#f6efe2`); Orange (`#f66620`) stays as the accent
23
-
24
- Rerurate grammar decisions baked into the stylesheet:
25
-
26
- - **Flat surfaces** — no shadows, no blur, no glassmorphism
27
- - **1px rules** — `--rb-rule-width: 1px` and thin scrollbars
28
- - **Selection** — Orange + Paper per brand (`background: orange; color: paper`)
29
- - **Focus** — a clear Orange `:focus-visible` outline
30
- - **8px grid** — `--rb-space-*` tokens follow the 8px base unit
31
- - **Futura / Helvetica-family** Latin stacks with system Japanese fallbacks
32
- - Semantic `--rr-*` tokens (`--rr-color-paper`, `--rr-color-ink`,
33
- `--rr-color-orange`, `--rr-space-1..4`, `--rr-rule-width`) are also exposed
34
- for the design layer
35
- - **Orange initial** — a strong Rerurate signature, but never applied
36
- mechanically to every page (opt in via the `initial` option)
37
-
38
- ## Usage
39
-
40
- ```ts
41
- import { defineConfig } from "@riebeckite/core";
42
- import { rerurateTheme } from "@riebeckite/theme-rerurate";
43
-
44
- export default defineConfig({
45
- // ...
46
- theme: rerurateTheme({
47
- colorMode: "system",
48
- typography: "system",
49
- articleLayout: "article",
50
- initial: true,
51
- userCss: [],
52
- }),
53
- });
54
- ```
55
-
56
- Relies on the same `ThemeConfig` API as `defaultTheme()`, so it can replace any
57
- other theme without configuration changes. The root-level `data-theme-name`
58
- attribute reports `rerurate`.
59
-
60
- ## Options
61
-
62
- `rerurateTheme(options?)` accepts any `ThemeConfig` field except `name`, plus
63
- the theme-specific `initial` option:
64
-
65
- | Option | Type | Default | Description |
66
- | ------ | ---- | ------- | ----------- |
67
- | `initial` | `boolean` | `false` | Render the first letter of the article body's first paragraph as a large Orange initial (applied via the `data-rerurate-initial="on"` attribute) |
68
- | `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | Color mode. `system` follows `prefers-color-scheme` unless `data-theme` is set |
69
- | `typography` | `"system" \| "serif" \| "sans"` | `"system"` | Typography preset, applied via the `data-typography` attribute |
70
- | `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | Article layout preset for consumers that read `data-article-layout` |
71
- | `tokens` | `ThemeDesignTokens` | `{}` | Override design tokens (colors, fonts, spacing, layout widths) |
72
- | `userCss` | `string[]` | `[]` | Extra user stylesheets |
73
-
74
- Theme-specific options are applied to the root element as safe `data-*`
75
- attributes (`data-rerurate-initial`). `initial` can also be overridden directly
76
- from `config` via `attributes: { "data-rerurate-initial": "on" }`.
77
-
78
- See the [`@riebeckite/theme-default`](../default/README.md) README for the
79
- full token list — the token contract is identical. Red and green are used only
80
- for the functional `danger` / `success` tokens.
81
-
82
- ## Exports
83
-
84
- - `rerurateTheme(options?)` — theme factory
85
- - Type: `RerurateThemeOptions`
86
- - Styles: `@riebeckite/theme-rerurate/style.css`
87
-
88
- ## See also
89
-
90
- - [Plugin guide](../../../docs/plugins_en.md)
91
- - [`@riebeckite/theme-default`](../default/README.md)
92
- - [`@riebeckite/theme-sakura`](../sakura/README.md)
93
- - [`@riebeckite/theme-tokyonight`](../tokyonight/README.md)
1
+ # @riebeckite/theme-rerurate
2
+
3
+ A Rerurate theme for Riebeckite, built on the Rerurate Visual Grammar: warm
4
+ Paper / Ink flat surfaces, a signature Orange accent, 1px rules, and an 8px
5
+ grid.
6
+
7
+ [日本語](./README_ja.md)
8
+
9
+ ## Overview
10
+
11
+ `rerurateTheme()` creates a theme named `rerurate`, 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
+ The palette is the Rerurate brand set:
18
+
19
+ - **Light** — warm Paper (`#f6efe2`), Ink (`#171717`), and the signature
20
+ Orange (`#f66620`)
21
+ - **Dark** — a warm charcoal paper (`#1c1a17`) with Paper-toned ink
22
+ (`#f6efe2`); Orange (`#f66620`) stays as the accent
23
+
24
+ Rerurate grammar decisions baked into the stylesheet:
25
+
26
+ - **Flat surfaces** — no shadows, no blur, no glassmorphism
27
+ - **1px rules** — `--rb-rule-width: 1px` and thin scrollbars
28
+ - **Typography as graphic** — geometric Latin headings set by size, weight
29
+ and whitespace; sparse ALL CAPS metadata led by a short Orange rule; a
30
+ readable body that stays off the display treatment
31
+ - **Multi-colour rule motif** — a short segmented rule split into three
32
+ equal parts (dark red → yellow `#b98430` → muted green) is the sanctioned
33
+ replacement for a gradient. Orange is excluded from the motif. It appears
34
+ in the article header and again as an h2 accent, using only the secondary
35
+ palette as thin rule segments
36
+ - **Page-load motion** — a ~460ms composition that draws the header rule,
37
+ lifts the title, and turns the rule into a geometric diagram. There is no
38
+ scroll reveal. Disabled by `prefers-reduced-motion` or the `motion` option
39
+ - **CSS-embedded SVG** — the rule motif, a precise vector mark, and the
40
+ blockquote quote chevrons are inline `data:` URIs, so no extra markup is
41
+ added and the graphics stay valid when motion is off
42
+ - **Selection** — Orange + Paper per brand (`background: orange; color: paper`)
43
+ - **Focus** — a clear Orange `:focus-visible` outline, plus an Ink → Orange
44
+ underline expansion on link hover
45
+ - **8px grid** — `--rb-space-*` tokens follow the 8px base unit
46
+ - **Futura / Helvetica-family** Latin stacks with system Japanese fallbacks
47
+ - Semantic `--rr-*` tokens (`--rr-color-*`, `--rr-space-1..4`,
48
+ `--rr-rule-width`, plus motion and SVG tokens) are also exposed for the
49
+ design layer
50
+ - **Orange initial** — a strong Rerurate signature, but never applied
51
+ mechanically to every page (opt in via the `initial` option, which also
52
+ selects a `"small" | "medium" | "large"` size)
53
+ - **Heading scale** — a restrained default size for the article title and body
54
+ headings; `largeHeadings` opts into a slightly larger scale
55
+ - **Orange article title** — the article title is set in the Orange accent
56
+ (`#f66620`) rather than Ink, so the masthead reads as brand
57
+ - **Markdown heading marks** — on by default, `#` … `#####` sit inline before
58
+ h1–h5 so each heading reads as if the marks were typed from the start; they
59
+ take the heading's own size, colour and font (h6 is left unmarked).
60
+ `headingMarks: false` removes them
61
+ - **Callouts** — a flat Paper/Ink surface with a 1px rule, an Orange left rule,
62
+ and an ALL CAPS title
63
+
64
+ ## Usage
65
+
66
+ ```ts
67
+ import { defineConfig } from "@riebeckite/core";
68
+ import { rerurateTheme } from "@riebeckite/theme-rerurate";
69
+
70
+ export default defineConfig({
71
+ // ...
72
+ theme: rerurateTheme({
73
+ colorMode: "system",
74
+ typography: "system",
75
+ articleLayout: "article",
76
+ initial: "large",
77
+ motion: true,
78
+ userCss: [],
79
+ }),
80
+ });
81
+ ```
82
+
83
+ Relies on the same `ThemeConfig` API as `defaultTheme()`, so it can replace any
84
+ other theme without configuration changes. The root-level `data-theme-name`
85
+ attribute reports `rerurate`.
86
+
87
+ ## Options
88
+
89
+ `rerurateTheme(options?)` accepts any `ThemeConfig` field except `name`, plus
90
+ the theme-specific `initial`, `largeHeadings`, `headingMarks`, and `motion`
91
+ options:
92
+
93
+ | Option | Type | Default | Description |
94
+ | ------ | ---- | ------- | ----------- |
95
+ | `initial` | `boolean \| "small" \| "medium" \| "large"` | `false` | Render the first letter of the article body's first paragraph as an Orange initial. `true` sizes it `"medium"`. Applied via the `data-rerurate-initial="on"` and `data-rerurate-initial-size="<size>"` attributes |
96
+ | `largeHeadings` | `boolean` | `false` | Opt into a slightly larger heading scale for the article title and body headings. `true` sets `data-rerurate-headings="large"` |
97
+ | `headingMarks` | `boolean` | `true` | Show markdown-style `#` … `#####` inline before h1–h5, in the heading's own size, colour and font (h6 is unmarked). `false` sets `data-rerurate-heading-marks="off"` |
98
+ | `motion` | `boolean` | `true` | Run the page-load composition (rule draw-in, title rise, rule-to-diagram). `false` sets `data-rerurate-motion="off"`, which switches motion off and renders the finished composition immediately |
99
+ | `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | Color mode. `system` follows `prefers-color-scheme` unless `data-theme` is set |
100
+ | `typography` | `"system" \| "serif" \| "sans"` | `"system"` | Typography preset, applied via the `data-typography` attribute |
101
+ | `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | Article layout preset for consumers that read `data-article-layout` |
102
+ | `tokens` | `ThemeDesignTokens` | `{}` | Override design tokens (colors, fonts, spacing, layout widths) |
103
+ | `userCss` | `string[]` | `[]` | Extra user stylesheets |
104
+
105
+ Theme-specific options are applied to the root element as safe `data-*`
106
+ attributes (`data-rerurate-initial`, `data-rerurate-initial-size`,
107
+ `data-rerurate-headings`, `data-rerurate-heading-marks`,
108
+ `data-rerurate-motion`). They can also be overridden directly from `config`,
109
+ e.g.
110
+ `attributes: { "data-rerurate-initial": "on", "data-rerurate-motion": "off" }`.
111
+
112
+ See the [`@riebeckite/theme-default`](../default/README.md) README for the
113
+ full token list — the token contract is identical. The secondary Red, Yellow
114
+ and Green are used only as thin segments of the multi-colour rule motif, and
115
+ Red and Green also back the functional `danger` / `success` tokens.
116
+
117
+ ## Exports
118
+
119
+ - `rerurateTheme(options?)` — theme factory
120
+ - Type: `RerurateThemeOptions`
121
+ - Styles: `@riebeckite/theme-rerurate/style.css`
122
+
123
+ ## See also
124
+
125
+ - [Plugin guide](../../../docs/en/plugin-system.md)
126
+ - [`@riebeckite/theme-default`](../default/README.md)
127
+ - [`@riebeckite/theme-sakura`](../sakura/README.md)
128
+ - [`@riebeckite/theme-tokyonight`](../tokyonight/README.md)
94
129
  - [`@riebeckite/theme-gruvbox`](../gruvbox/README.md)
package/README_ja.md CHANGED
@@ -1,55 +1,69 @@
1
- # @riebeckite/theme-rerurate
2
-
3
- Paper、Ink、Orange を軸にした Rerurate のテーマです。フラットな面、1px の罫線、8px を基準にした余白で、情報の境界をはっきり見せます。
4
-
5
- [English](./README.md)
6
-
7
- ## 設定する
8
-
9
- ```ts
10
- import { defineConfig } from "@riebeckite/core";
11
- import { rerurateTheme } from "@riebeckite/theme-rerurate";
12
-
13
- export default defineConfig({
14
- // ...
15
- theme: rerurateTheme({
16
- colorMode: "system",
17
- initial: true,
18
- }),
19
- });
20
- ```
21
-
22
- テーマ名は `rerurate` です。明るい配色では `#f6efe2` の Paper と `#171717` の Ink、暗い配色では `#1c1a17` の背景と Paper 系の文字を使います。アクセントの Orange はどちらも `#f66620` です。
23
-
24
- ## このテーマ固有の見た目
25
-
26
- 影、ぼかし、ガラス調の表現は使いません。代わりに `--rb-rule-width: 1px` の罫線、Orange のフォーカス枠、Paper と Orange の選択色で要素の関係を示します。`--rb-space-*` は 8px 基準です。
27
-
28
- 加えて、デザイン層向けに `--rr-color-paper`、`--rr-color-ink`、`--rr-color-orange`、`--rr-space-1` から `--rr-space-4`、`--rr-rule-width` を公開します。意味のある色として Red と Green が必要な場面では、共通の `danger` と `success` トークンを使います。
29
-
30
- ## 変更できる項目
31
-
32
- | 項目 | 既定値 | 説明 |
33
- | --- | --- | --- |
34
- | `initial` | `false` | 記事本文の最初の文字を Orange の大きな頭文字にする。`data-rerurate-initial="on"` に反映する |
35
- | `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
36
- | `typography` | `"system"` | `"system"`、`"serif"`、`"sans"` |
37
- | `articleLayout` | `"article"` | 記事レイアウトの値 |
38
- | `tokens` | `{}` | 共通デザイントークンの上書き |
39
- | `userCss` | `[]` | 追加のスタイルシート |
40
-
41
- 頭文字の装飾は本文の冒頭にだけ使われます。すべての記事で必要とは限らないため、`initial` は既定で無効です。属性を直接指定する場合は `attributes: { "data-rerurate-initial": "on" }` を使えます。
42
-
43
- ## 主なエクスポート
44
-
45
- - `rerurateTheme(options?)`: テーマを作成する
46
- - `RerurateThemeOptions`: 設定用の型
47
- - `@riebeckite/theme-rerurate/style.css`: テーマのスタイルシート
48
-
49
- ## 関連資料
50
-
51
- - [テーマシステム](../../../docs/ja/theme-system.md)
52
- - [`@riebeckite/theme-default`](../default/README_ja.md)
53
- - [`@riebeckite/theme-sakura`](../sakura/README_ja.md)
54
- - [`@riebeckite/theme-tokyonight`](../tokyonight/README_ja.md)
55
- - [`@riebeckite/theme-gruvbox`](../gruvbox/README_ja.md)
1
+ # @riebeckite/theme-rerurate
2
+
3
+ Paper、Ink、Orange を軸にした Rerurate のテーマです。フラットな面、1px の罫線、8px を基準にした余白で、情報の境界をはっきり見せます。
4
+
5
+ [English](./README.md)
6
+
7
+ ## 設定する
8
+
9
+ ```ts
10
+ import { defineConfig } from "@riebeckite/core";
11
+ import { rerurateTheme } from "@riebeckite/theme-rerurate";
12
+
13
+ export default defineConfig({
14
+ // ...
15
+ theme: rerurateTheme({
16
+ colorMode: "system",
17
+ initial: "large",
18
+ motion: true,
19
+ }),
20
+ });
21
+ ```
22
+
23
+ テーマ名は `rerurate` です。明るい配色では `#f6efe2` の Paper と `#171717` の Ink、暗い配色では `#1c1a17` の背景と Paper 系の文字を使います。アクセントの Orange はどちらも `#f66620` です。
24
+
25
+ ## このテーマ固有の見た目
26
+
27
+ 影、ぼかし、ガラス調の表現は使いません。代わりに `--rb-rule-width: 1px` の罫線、Orange のフォーカス枠、Paper と Orange の選択色で要素の関係を示します。`--rb-space-*` は 8px 基準です。
28
+
29
+ 組版はグラフィックとして扱います。見出しはサイズ・太さ・余白で階層をつくり、本文は読みやすい大きさのままにします。メタデータは字間を広げた ALL CAPS の英字で、頭に短い Orange の罫線を添えます。記事タイトルは Ink ではなく Orange で表示します。見出しは既定では控えめな大きさで、`largeHeadings` を有効にすると少しだけ大きくなります。
30
+
31
+ 既定では Markdown 風の `#` を h1〜h5 の見出しの先頭にインラインで添えます。h1 は `#`、h2 は `##` というように階層に合わせて増え、h6 には付けません。見出しの文字は `#` の分だけ右にずれ、最初から `## 見出し` と書いたような見た目になります。`#` は見出しと同じサイズ・色・フォントを使います。`headingMarks` で外せます。
32
+
33
+ コールアウトはフラットな面のまま、1px の枠と Orange の左罫線で示し、タイトルは字間を広げた ALL CAPS にします。
34
+
35
+ もうひとつの軸が多色の罫線モチーフです。濃い赤・黄・落ち着いた Green の三つを均等に並べた細い罫線で、グラデーションの代わりに使います。Orange はこのモチーフには使いません。記事ヘッダーと h2 のアクセントに現れ、補助パレットはこの細い区間にだけ使います。
36
+
37
+ 読み込み時には 460ms ほどのアニメーションで、ヘッダーの罫線を引き、タイトルをわずかに上げ、その罫線を幾何学図形へつなげます。スクロールに連動する出現は使いません。罫線モチーフ、ベクターのマーク、引用の山形記号は CSS に埋め込んだ `data:` URI の SVG なので、マークアップは増えず、アニメーションを止めても図として成立します。
38
+
39
+ さらに、デザイン層向けに `--rr-color-*`、`--rr-space-1` から `--rr-space-4`、`--rr-rule-width` に加えて、モーションと SVG のトークンも公開します。意味のある色として Red と Green が必要な場面では、共通の `danger` と `success` トークンを使います。
40
+
41
+ ## 変更できる項目
42
+
43
+ | 項目 | 既定値 | 説明 |
44
+ | --- | --- | --- |
45
+ | `initial` | `false` | 記事本文の最初の文字を Orange の頭文字にする。`true` は `"medium"` 相当。`"small"`、`"medium"`、`"large"` で大きさを選べる。`data-rerurate-initial="on"` と `data-rerurate-initial-size` に反映する |
46
+ | `largeHeadings` | `false` | 見出しを少しだけ大きくする。`true` で `data-rerurate-headings="large"` を付ける |
47
+ | `headingMarks` | `true` | h1〜h5 の見出しの先頭に Markdown 風の `#`〜`#####` をインラインで添える(見出しと同じサイズ・色・フォント。h6 には付けない)。`false` で `data-rerurate-heading-marks="off"` を付けて外す |
48
+ | `motion` | `true` | 読み込み時のアニメーション(罫線の描画、タイトルの上昇、罫線から図形への変化)を再生する。`false` は `data-rerurate-motion="off"` を付け、完成した状態をそのまま表示する。`prefers-reduced-motion` が有効な環境でも再生しない |
49
+ | `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
50
+ | `typography` | `"system"` | `"system"`、`"serif"`、`"sans"` |
51
+ | `articleLayout` | `"article"` | 記事レイアウトの値 |
52
+ | `tokens` | `{}` | 共通デザイントークンの上書き |
53
+ | `userCss` | `[]` | 追加のスタイルシート |
54
+
55
+ 頭文字の装飾は本文の冒頭にだけ使われます。すべての記事で必要とは限らないため、`initial` は既定で無効です。属性を直接指定する場合は、`attributes: { "data-rerurate-initial": "on", "data-rerurate-motion": "off" }` のように `data-rerurate-initial`、`data-rerurate-headings`、`data-rerurate-heading-marks`、`data-rerurate-motion` を組み合わせて使えます。
56
+
57
+ ## 主なエクスポート
58
+
59
+ - `rerurateTheme(options?)`: テーマを作成する
60
+ - `RerurateThemeOptions`: 設定用の型
61
+ - `@riebeckite/theme-rerurate/style.css`: テーマのスタイルシート
62
+
63
+ ## 関連資料
64
+
65
+ - [テーマシステム](../../../docs/ja/theme-system.md)
66
+ - [`@riebeckite/theme-default`](../default/README_ja.md)
67
+ - [`@riebeckite/theme-sakura`](../sakura/README_ja.md)
68
+ - [`@riebeckite/theme-tokyonight`](../tokyonight/README_ja.md)
69
+ - [`@riebeckite/theme-gruvbox`](../gruvbox/README_ja.md)
@@ -1,6 +1,10 @@
1
1
  import { type ThemeConfig } from "@riebeckite/core";
2
+ export type RerurateInitialSize = "small" | "medium" | "large";
2
3
  export type RerurateThemeOptions = Omit<ThemeConfig, "name" | "userCss"> & {
3
- initial?: boolean;
4
+ initial?: boolean | RerurateInitialSize;
5
+ largeHeadings?: boolean;
6
+ headingMarks?: boolean;
7
+ motion?: boolean;
4
8
  userCss?: string[];
5
9
  };
6
10
  export declare function rerurateTheme(options?: RerurateThemeOptions): import("@riebeckite/core").RiebeckiteTheme<RerurateThemeOptions>;
package/dist/src/index.js CHANGED
@@ -1,12 +1,24 @@
1
1
  // src/index.ts
2
2
  import { defineTheme } from "@riebeckite/core";
3
3
  function rerurateTheme(options = {}) {
4
- const { initial = false, ...config } = options;
4
+ const {
5
+ initial = false,
6
+ largeHeadings = false,
7
+ headingMarks = true,
8
+ motion = true,
9
+ ...config
10
+ } = options;
11
+ const initialEnabled = initial !== false;
12
+ const initialSize = typeof initial === "string" ? initial : "medium";
5
13
  return defineTheme({
6
14
  name: "rerurate",
7
15
  options,
8
16
  attributes: {
9
- "data-rerurate-initial": initial ? "on" : void 0
17
+ "data-rerurate-initial": initialEnabled ? "on" : void 0,
18
+ "data-rerurate-initial-size": initialEnabled ? initialSize : void 0,
19
+ "data-rerurate-headings": largeHeadings ? "large" : void 0,
20
+ "data-rerurate-heading-marks": headingMarks ? void 0 : "off",
21
+ "data-rerurate-motion": motion ? void 0 : "off"
10
22
  },
11
23
  styles: [{ moduleSpecifier: "@riebeckite/theme-rerurate/style.css" }],
12
24
  config
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/theme-rerurate",
3
- "version": "0.0.3",
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.3"
19
+ "@riebeckite/core": "0.0.6"
20
20
  },
21
21
  "publishConfig": {
22
22
  "access": "public"