@riebeckite/theme-rerurate 0.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright Rerurate_514
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,94 @@
+# @riebeckite/theme-rerurate
+
+A Rerurate theme for Riebeckite, built on the Rerurate Visual Grammar: warm
+Paper / Ink flat surfaces, a signature Orange accent, 1px rules, and an 8px
+grid.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`rerurateTheme()` creates a theme named `rerurate`, following the same
+`ThemeConfig` API and token contract as the other Riebeckite themes. Design
+tokens are exposed as CSS custom properties (`--rb-color-*`, `--rb-font-*`,
+`--rb-space-*`, `--rb-layout-*`) and mapped into Tailwind theme values in an
+`@theme` block.
+
+The palette is the Rerurate brand set:
+
+- **Light** — warm Paper (`#f6efe2`), Ink (`#171717`), and the signature
+  Orange (`#f66620`)
+- **Dark** — a warm charcoal paper (`#1c1a17`) with Paper-toned ink
+  (`#f6efe2`); Orange (`#f66620`) stays as the accent
+
+Rerurate grammar decisions baked into the stylesheet:
+
+- **Flat surfaces** — no shadows, no blur, no glassmorphism
+- **1px rules** — `--rb-rule-width: 1px` and thin scrollbars
+- **Selection** — Orange + Paper per brand (`background: orange; color: paper`)
+- **Focus** — a clear Orange `:focus-visible` outline
+- **8px grid** — `--rb-space-*` tokens follow the 8px base unit
+- **Futura / Helvetica-family** Latin stacks with system Japanese fallbacks
+- Semantic `--rr-*` tokens (`--rr-color-paper`, `--rr-color-ink`,
+  `--rr-color-orange`, `--rr-space-1..4`, `--rr-rule-width`) are also exposed
+  for the design layer
+- **Orange initial** — a strong Rerurate signature, but never applied
+  mechanically to every page (opt in via the `initial` option)
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { rerurateTheme } from "@riebeckite/theme-rerurate";
+
+export default defineConfig({
+  // ...
+  theme: rerurateTheme({
+    colorMode: "system",
+    typography: "system",
+    articleLayout: "article",
+    initial: true,
+    userCss: [],
+  }),
+});
+```
+
+Relies on the same `ThemeConfig` API as `defaultTheme()`, so it can replace any
+other theme without configuration changes. The root-level `data-theme-name`
+attribute reports `rerurate`.
+
+## Options
+
+`rerurateTheme(options?)` accepts any `ThemeConfig` field except `name`, plus
+the theme-specific `initial` option:
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `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) |
+| `colorMode` | `"light" \| "dark" \| "system"` | `"system"` | Color mode. `system` follows `prefers-color-scheme` unless `data-theme` is set |
+| `typography` | `"system" \| "serif" \| "sans"` | `"system"` | Typography preset, applied via the `data-typography` attribute |
+| `articleLayout` | `"article" \| "sidebar" \| "full-width"` | `"article"` | Article layout preset for consumers that read `data-article-layout` |
+| `tokens` | `ThemeDesignTokens` | `{}` | Override design tokens (colors, fonts, spacing, layout widths) |
+| `userCss` | `string[]` | `[]` | Extra user stylesheets |
+
+Theme-specific options are applied to the root element as safe `data-*`
+attributes (`data-rerurate-initial`). `initial` can also be overridden directly
+from `config` via `attributes: { "data-rerurate-initial": "on" }`.
+
+See the [`@riebeckite/theme-default`](../default/README.md) README for the
+full token list — the token contract is identical. Red and green are used only
+for the functional `danger` / `success` tokens.
+
+## Exports
+
+- `rerurateTheme(options?)` — theme factory
+- Type: `RerurateThemeOptions`
+- Styles: `@riebeckite/theme-rerurate/style.css`
+
+## See also
+
+- [Plugin guide](../../../docs/plugins_en.md)
+- [`@riebeckite/theme-default`](../default/README.md)
+- [`@riebeckite/theme-sakura`](../sakura/README.md)
+- [`@riebeckite/theme-tokyonight`](../tokyonight/README.md)
+- [`@riebeckite/theme-gruvbox`](../gruvbox/README.md)

package/README_ja.md

@@ -0,0 +1,55 @@
+# @riebeckite/theme-rerurate
+
+Paper、Ink、Orange を軸にした Rerurate のテーマです。フラットな面、1px の罫線、8px を基準にした余白で、情報の境界をはっきり見せます。
+
+[English](./README.md)
+
+## 設定する
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { rerurateTheme } from "@riebeckite/theme-rerurate";
+
+export default defineConfig({
+  // ...
+  theme: rerurateTheme({
+    colorMode: "system",
+    initial: true,
+  }),
+});
+```
+
+テーマ名は `rerurate` です。明るい配色では `#f6efe2` の Paper と `#171717` の Ink、暗い配色では `#1c1a17` の背景と Paper 系の文字を使います。アクセントの Orange はどちらも `#f66620` です。
+
+## このテーマ固有の見た目
+
+影、ぼかし、ガラス調の表現は使いません。代わりに `--rb-rule-width: 1px` の罫線、Orange のフォーカス枠、Paper と Orange の選択色で要素の関係を示します。`--rb-space-*` は 8px 基準です。
+
+加えて、デザイン層向けに `--rr-color-paper`、`--rr-color-ink`、`--rr-color-orange`、`--rr-space-1` から `--rr-space-4`、`--rr-rule-width` を公開します。意味のある色として Red と Green が必要な場面では、共通の `danger` と `success` トークンを使います。
+
+## 変更できる項目
+
+| 項目 | 既定値 | 説明 |
+| --- | --- | --- |
+| `initial` | `false` | 記事本文の最初の文字を Orange の大きな頭文字にする。`data-rerurate-initial="on"` に反映する |
+| `colorMode` | `"system"` | `"light"`、`"dark"`、`"system"` |
+| `typography` | `"system"` | `"system"`、`"serif"`、`"sans"` |
+| `articleLayout` | `"article"` | 記事レイアウトの値 |
+| `tokens` | `{}` | 共通デザイントークンの上書き |
+| `userCss` | `[]` | 追加のスタイルシート |
+
+頭文字の装飾は本文の冒頭にだけ使われます。すべての記事で必要とは限らないため、`initial` は既定で無効です。属性を直接指定する場合は `attributes: { "data-rerurate-initial": "on" }` を使えます。
+
+## 主なエクスポート
+
+- `rerurateTheme(options?)`: テーマを作成する
+- `RerurateThemeOptions`: 設定用の型
+- `@riebeckite/theme-rerurate/style.css`: テーマのスタイルシート
+
+## 関連資料
+
+- [テーマシステム](../../../docs/ja/theme-system.md)
+- [`@riebeckite/theme-default`](../default/README_ja.md)
+- [`@riebeckite/theme-sakura`](../sakura/README_ja.md)
+- [`@riebeckite/theme-tokyonight`](../tokyonight/README_ja.md)
+- [`@riebeckite/theme-gruvbox`](../gruvbox/README_ja.md)

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+import { type ThemeConfig } from "@riebeckite/core";
+export type RerurateThemeOptions = Omit<ThemeConfig, "name" | "userCss"> & {
+    initial?: boolean;
+    userCss?: string[];
+};
+export declare function rerurateTheme(options?: RerurateThemeOptions): import("@riebeckite/core").RiebeckiteTheme<RerurateThemeOptions>;

package/dist/src/index.js

@@ -0,0 +1,17 @@
+// src/index.ts
+import { defineTheme } from "@riebeckite/core";
+function rerurateTheme(options = {}) {
+  const { initial = false, ...config } = options;
+  return defineTheme({
+    name: "rerurate",
+    options,
+    attributes: {
+      "data-rerurate-initial": initial ? "on" : void 0
+    },
+    styles: [{ moduleSpecifier: "@riebeckite/theme-rerurate/style.css" }],
+    config
+  });
+}
+export {
+  rerurateTheme
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@riebeckite/theme-rerurate",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "source": "./src/index.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./style.css": "./styles/theme.css",
+    "./styles/theme.css": "./styles/theme.css"
+  },
+  "dependencies": {
+    "@riebeckite/core": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "README_ja.md",
+    "dist",
+    "styles"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rerurate514/riebeckite.git",
+    "directory": "packages/themes/rerurate"
+  },
+  "homepage": "https://github.com/Rerurate514/riebeckite#readme",
+  "bugs": {
+    "url": "https://github.com/Rerurate514/riebeckite/issues"
+  },
+  "description": "The Rerurate visual-grammar CSS theme for Riebeckite sites.",
+  "keywords": [
+    "riebeckite",
+    "theme",
+    "css",
+    "rerurate"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "sideEffects": [
+    "./styles/*.css"
+  ],
+  "scripts": {
+    "build": "node ../../../scripts/build_package.mjs"
+  }
+}

package/styles/theme.css

@@ -0,0 +1,167 @@
+@theme {
+  --font-sans: var(--rb-font-body);
+  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: var(--rb-font-mono);
+  --color-rb-paper: var(--rb-color-paper);
+  --color-rb-ink: var(--rb-color-ink);
+  --color-rb-muted: var(--rb-color-muted);
+  --color-rb-accent: var(--rb-color-accent);
+  --color-rb-surface: var(--rb-color-surface);
+  --color-rb-danger: var(--rb-color-danger);
+  --color-rb-success: var(--rb-color-success);
+}
+
+@layer base {
+  :root {
+    --rr-color-paper: #f6efe2;
+    --rr-color-ink: #171717;
+    --rr-color-orange: #f66620;
+    --rr-space-1: 0.5rem;
+    --rr-space-2: 1rem;
+    --rr-space-3: 1.5rem;
+    --rr-space-4: 2rem;
+    --rr-rule-width: 1px;
+
+    color-scheme: light;
+    --rb-color-paper: #f6efe2;
+    --rb-color-surface: #fdf8ee;
+    --rb-color-surface-hover: #eae0cd;
+    --rb-color-ink: #171717;
+    --rb-color-muted: #6e6659;
+    --rb-color-accent: #f66620;
+    --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
+    --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
+    --rb-color-danger: #b3261e;
+    --rb-color-success: #3e7c4f;
+    --rb-color-code-background: color-mix(
+      in srgb,
+      var(--rb-color-ink) 8%,
+      transparent
+    );
+    --rb-color-overlay: rgb(0 0 0 / 0.4);
+    --rb-font-body:
+      Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
+      "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
+    --rb-font-heading: var(--rb-font-body);
+    --rb-font-mono:
+      "SFMono-Regular", Consolas, "Liberation Mono", "Noto Sans Mono CJK JP",
+      monospace;
+    --rb-space-1: 0.5rem;
+    --rb-space-2: 1rem;
+    --rb-space-3: 1.5rem;
+    --rb-space-4: 2rem;
+    --rb-space-6: 3rem;
+    --rb-space-8: 4rem;
+    --rb-rule-width: 1px;
+    --rb-layout-page-max: 80rem;
+    --rb-layout-article-max: 48rem;
+    --rb-layout-sidebar: 14rem;
+    --rb-layout-gap: 2rem;
+  }
+
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --rb-color-paper: #1c1a17;
+    --rb-color-surface: #26231f;
+    --rb-color-surface-hover: #312d28;
+    --rb-color-ink: #f6efe2;
+    --rb-color-muted: #a79e8c;
+    --rb-color-accent: #f66620;
+    --rb-color-danger: #ff6b61;
+    --rb-color-success: #74b386;
+    --rb-color-code-background: color-mix(
+      in srgb,
+      var(--rb-color-ink) 12%,
+      transparent
+    );
+    --rb-color-overlay: rgb(0 0 0 / 0.6);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      color-scheme: dark;
+      --rb-color-paper: #1c1a17;
+      --rb-color-surface: #26231f;
+      --rb-color-surface-hover: #312d28;
+      --rb-color-ink: #f6efe2;
+      --rb-color-muted: #a79e8c;
+      --rb-color-accent: #f66620;
+      --rb-color-danger: #ff6b61;
+      --rb-color-success: #74b386;
+      --rb-color-code-background: color-mix(
+        in srgb,
+        var(--rb-color-ink) 12%,
+        transparent
+      );
+      --rb-color-overlay: rgb(0 0 0 / 0.6);
+    }
+  }
+
+  :root[data-typography="serif"] {
+    --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
+    --rb-font-heading:
+      Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
+      "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
+  }
+
+  :root[data-typography="sans"] {
+    --rb-font-body:
+      Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
+      "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
+    --rb-font-heading: var(--rb-font-body);
+  }
+
+  html {
+    background: var(--rb-color-paper);
+    color: var(--rb-color-ink);
+    font-family: var(--rb-font-body);
+    accent-color: var(--rb-color-accent);
+    caret-color: var(--rb-color-accent);
+  }
+
+  body {
+    margin: 0;
+    background: var(--rb-color-paper);
+    color: var(--rb-color-ink);
+  }
+
+  ::selection {
+    background: var(--rb-color-accent);
+    color: var(--rr-color-paper, #f6efe2);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--rb-color-accent);
+    outline-offset: 2px;
+  }
+
+  :root[data-rerurate-initial="on"]
+    .rb-article-body
+    p:first-of-type::first-letter {
+    float: left;
+    margin: 0.02em 0.12em 0 0;
+    color: var(--rb-color-accent);
+    font-size: 3.2em;
+    font-weight: 700;
+    line-height: 0.85;
+  }
+
+  * {
+    scrollbar-color: var(--rb-color-muted) transparent;
+    scrollbar-width: thin;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--rb-color-muted);
+    border: 2px solid var(--rb-color-paper);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}