@riebeckite/theme-folio 0.0.33 → 0.0.34

package/README.md

@@ -2,44 +2,65 @@
 
 <!-- Generated from docs/docs/themes/folio.md. Edit the canonical documentation in docs/docs/themes and run `pnpm docs:sync`. -->
 
-A high-contrast portfolio theme with direct sans-serif typography, an
-asymmetric title rule, and a restrained vermilion accent.
-
 [日本語](./README_ja.md)
 
+## Overview
+
+`@riebeckite/theme-folio` provides the official **Folio** theme. Its theme identity is `folio`. A spacious portfolio-style theme with editorial framing.
+
+## Installation
+
+```sh
+npm install @riebeckite/theme-folio
+```
+
 ## Usage
 
 ```ts
+import { defineConfig } from "@riebeckite/core";
 import { folioTheme } from "@riebeckite/theme-folio";
 
 export default defineConfig({
-  theme: folioTheme({ colorMode: "system" }),
+  theme: folioTheme({
+    colorMode: "system",
+    settings: { typography: "system" },
+  }),
 });
 ```
 
-## Character
+## Common options
+
+| Property | Values | Description |
+| --- | --- | --- |
+| `colorMode` | `"light"`, `"dark"`, `"system"` | Chooses the color mode. `"system"` follows the browser preference. |
+| `layout` | `"article"`, `"sidebar"`, `"full-width"` | Chooses the page layout. |
+| `preset` | — | This theme does not define presets. |
+| `settings` | object | Overrides the settings listed below. Unknown keys and invalid values are rejected. |
+| `stylesheets` | string array | Loads site-owned stylesheets after the theme CSS. |
+
+Resolution order is schema defaults, then the selected preset, then explicit `settings`.
+
+## Theme settings
 
-- Large, tightly tracked titles and a left accent rule give project pages a
-  confident hierarchy.
-- A wide article measure suits project descriptions and media without turning
-  content into a card grid.
-- Media, lightbox, recent posts, and card links receive structural top rules
-  through stable public plugin roots.
+| Property | Type | Default and allowed values | Effect |
+| --- | --- | --- | --- |
+| `typography` | select | `"system"` — `system`, `serif`, `sans`, `mono` | Selects the article typeface. |
+| `accentColor` | color | `"#d6422c"` | Rules and interactive accents. |
+| `articleWidth` | slider | `62` — 44–76, step 1 | Maximum article width in rem. |
+| `fontSize` | slider | `1.05` — 0.95–1.25, step 0.05 | Article text size in rem. |
+| `lineHeight` | slider | `1.65` — 1.5–2.1, step 0.05 | Article line height. |
+| `motion` | boolean | `true` | Enables theme motion effects. |
+| `ornament` | boolean | `true` | Show the corner mark in the article header. |
+| `seal` | boolean | `false` | Add a circular folio stamp to the article header. |
 
-## Options and tokens
+## Presets
 
-`folioTheme(options?)` accepts `ThemeConfig` fields other than `name`:
-`colorMode`, `typography`, `articleLayout`, `tokens`, and `userCss`. Use
-`tokens` for shared semantic color, type, spacing, and layout overrides.
+This theme does not define presets.
 
-## Modes and compatibility
+## CSS and attributes
 
-The theme has matching light, explicit-dark, and system-dark token contracts.
-It supports visible focus, responsive typography, reduced motion, and
-horizontally scrollable tables. It ships only CSS and uses system fonts.
+The root receives `data-rb-theme="folio"`, `data-rb-mode` for an explicit light or dark mode, and `data-rb-layout`. Every setting is reflected as `data-rb-setting-<name>`; color, number, and slider settings are also available as safe `--rb-setting-<name>` custom properties.
 
-## Exports
+## See also
 
-- `folioTheme(options?)`
-- `FolioThemeOptions`
-- `@riebeckite/theme-folio/style.css`
+[Theme API](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/theme-api.md) and [Writing a theme](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/themes/writing-a-theme.md).

package/README_ja.md

@@ -2,36 +2,65 @@
 
 <!-- Generated from docs/docs/themes/folio.ja.md. Edit the canonical documentation in docs/docs/themes and run `pnpm docs:sync`. -->
 
-直接的なサンセリフ体、非対称のタイトル罫線、抑えた朱色のアクセントで構成する高コントラストなポートフォリオ向けテーマです。
-
 [English](./README.md)
 
+## 概要
+
+`@riebeckite/theme-folio` は公式テーマ **Folio** を提供します。テーマ ID は `folio` です。エディトリアルな枠組みを持つ、余白の広いポートフォリオ風テーマです。
+
+## インストール
+
+```sh
+npm install @riebeckite/theme-folio
+```
+
 ## 使い方
 
 ```ts
+import { defineConfig } from "@riebeckite/core";
 import { folioTheme } from "@riebeckite/theme-folio";
 
 export default defineConfig({
-  theme: folioTheme({ colorMode: "system" }),
+  theme: folioTheme({
+    colorMode: "system",
+    settings: { typography: "system" },
+  }),
 });
 ```
 
-## デザイン
+## 共通オプション
+
+| プロパティ | 値 | 説明 |
+| --- | --- | --- |
+| `colorMode` | `"light"`、`"dark"`、`"system"` | カラーモードを選びます。`"system"` はブラウザの設定に従います。 |
+| `layout` | `"article"`、`"sidebar"`、`"full-width"` | ページレイアウトを選びます。 |
+| `preset` | — | このテーマにはプリセットがありません。 |
+| `settings` | object | 下記の設定を上書きします。不明なキーや不正な値は拒否されます。 |
+| `stylesheets` | string array | テーマ CSS の後にサイト固有のスタイルシートを読み込みます。 |
+
+設定スキーマの既定値、選択したプリセット、明示した `settings` の順に適用されます。
+
+## テーマ設定
 
-- 大きく詰めたタイトルと左のアクセント罫線で、プロジェクトページに明快な階層を与えます。
-- 広い記事幅は、コンテンツをカードグリッドにせずプロジェクト説明とメディアを扱いやすくします。
-- Media、Lightbox、Recent posts、Card link は安定した公開プラグインルートを通じて上罫線で構造化します。
+| プロパティ | 型 | 既定値と選択値 | 効果 |
+| --- | --- | --- | --- |
+| `typography` | select | 既定値 `"system"` — `system`、`serif`、`sans`、`mono` | 本文の書体を選びます。 |
+| `accentColor` | color | 既定値 `"#d6422c"` | 操作要素などのアクセント色を設定します。 |
+| `articleWidth` | slider | 既定値 `62` — 44–76、刻み 1 | 本文の最大幅を rem で設定します。 |
+| `fontSize` | slider | 既定値 `1.05` — 0.95–1.25、刻み 0.05 | 本文の文字サイズを rem で設定します。 |
+| `lineHeight` | slider | 既定値 `1.65` — 1.5–2.1、刻み 0.05 | 本文の行間を設定します。 |
+| `motion` | boolean | 既定値 `true` | テーマの動きを有効にします。 |
+| `ornament` | boolean | 既定値 `true` | 記事ヘッダーの装飾を表示します。 |
+| `seal` | boolean | 既定値 `false` | 記事ヘッダーに円形のフォリオ印を追加します。 |
 
-## 設定とトークン
+## プリセット
 
-`folioTheme(options?)` は `name` 以外の `ThemeConfig`、`colorMode`、`typography`、`articleLayout`、`tokens`、`userCss` を受け取ります。共通のセマンティックな色、書体、余白、レイアウトは `tokens` で上書きできます。
+このテーマにはプリセットがありません。
 
-## モードと互換性
+## CSS と属性
 
-ライト、明示ダーク、システムダークのトークン契約は一致します。視認できるフォーカス、レスポンシブな文字、縮小モーション、表の横スクロールに対応します。配布物は CSS のみで、システムフォントを使います。
+ルートには `data-rb-theme="folio"`、明示的にライトまたはダークを選んだ場合は `data-rb-mode`、そして `data-rb-layout` が設定されます。すべての設定は `data-rb-setting-<name>` 属性に反映されます。color、number、slider 型の設定は安全な `--rb-setting-<name>` カスタムプロパティとしても利用できます。
 
-## エクスポート
+## 関連情報
 
-- `folioTheme(options?)`
-- `FolioThemeOptions`
-- `@riebeckite/theme-folio/style.css`
+[Theme API](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/theme-api.md) と [テーマを書く](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/themes/writing-a-theme.ja.md) を参照してください。

package/dist/src/index.d.ts

@@ -1,5 +1,72 @@
-import { type ThemeConfig } from "@riebeckite/core";
-export type FolioThemeOptions = Omit<ThemeConfig, "name" | "userCss"> & {
-    userCss?: string[];
-};
-export declare function folioTheme(options?: FolioThemeOptions): import("@riebeckite/core").RiebeckiteTheme<FolioThemeOptions>;
+export declare const folioTheme: import("@riebeckite/core").ThemeDefinition<{
+    readonly typography: {
+        readonly type: "select";
+        readonly label: "Typography";
+        readonly default: "system";
+        readonly options: readonly [{
+            readonly value: "system";
+            readonly label: "System";
+        }, {
+            readonly value: "serif";
+            readonly label: "Serif";
+        }, {
+            readonly value: "sans";
+            readonly label: "Sans";
+        }, {
+            readonly value: "mono";
+            readonly label: "Mono";
+        }];
+    };
+    readonly accentColor: {
+        readonly type: "color";
+        readonly label: "Accent color";
+        readonly description: "Rules and interactive accents.";
+        readonly default: "#d6422c";
+        readonly light: "#d6422c";
+        readonly dark: "#ff826c";
+    };
+    readonly articleWidth: {
+        readonly type: "slider";
+        readonly label: "Article width";
+        readonly description: "Maximum article width in rem.";
+        readonly default: 62;
+        readonly min: 44;
+        readonly max: 76;
+        readonly step: 1;
+    };
+    readonly fontSize: {
+        readonly type: "slider";
+        readonly label: "Font size";
+        readonly description: "Article text size in rem.";
+        readonly default: 1.05;
+        readonly min: 0.95;
+        readonly max: 1.25;
+        readonly step: 0.05;
+    };
+    readonly lineHeight: {
+        readonly type: "slider";
+        readonly label: "Line height";
+        readonly description: "Article line height.";
+        readonly default: 1.65;
+        readonly min: 1.5;
+        readonly max: 2.1;
+        readonly step: 0.05;
+    };
+    readonly motion: {
+        readonly type: "boolean";
+        readonly label: "Motion";
+        readonly default: true;
+    };
+    readonly ornament: {
+        readonly type: "boolean";
+        readonly label: "Corner ornament";
+        readonly description: "Show the corner mark in the article header.";
+        readonly default: true;
+    };
+    readonly seal: {
+        readonly type: "boolean";
+        readonly label: "Folio seal";
+        readonly description: "Add a circular folio stamp to the article header.";
+        readonly default: false;
+    };
+}>;

package/dist/src/index.js

@@ -1,13 +1,71 @@
 // src/index.ts
-import { defineTheme } from "@riebeckite/core";
-function folioTheme(options = {}) {
-  return defineTheme({
-    name: "folio",
-    options,
-    styles: [{ moduleSpecifier: "@riebeckite/theme-folio/style.css" }],
-    config: options
-  });
-}
+import { defineTheme, defineThemeSettings } from "@riebeckite/core";
+var folioTheme = defineTheme({
+  name: "folio",
+  styles: [{ moduleSpecifier: "@riebeckite/theme-folio/style.css" }],
+  settings: defineThemeSettings({
+    typography: {
+      type: "select",
+      label: "Typography",
+      default: "system",
+      options: [
+        { value: "system", label: "System" },
+        { value: "serif", label: "Serif" },
+        { value: "sans", label: "Sans" },
+        { value: "mono", label: "Mono" }
+      ]
+    },
+    accentColor: {
+      type: "color",
+      label: "Accent color",
+      description: "Rules and interactive accents.",
+      default: "#d6422c",
+      light: "#d6422c",
+      dark: "#ff826c"
+    },
+    articleWidth: {
+      type: "slider",
+      label: "Article width",
+      description: "Maximum article width in rem.",
+      default: 62,
+      min: 44,
+      max: 76,
+      step: 1
+    },
+    fontSize: {
+      type: "slider",
+      label: "Font size",
+      description: "Article text size in rem.",
+      default: 1.05,
+      min: 0.95,
+      max: 1.25,
+      step: 0.05
+    },
+    lineHeight: {
+      type: "slider",
+      label: "Line height",
+      description: "Article line height.",
+      default: 1.65,
+      min: 1.5,
+      max: 2.1,
+      step: 0.05
+    },
+    motion: { type: "boolean", label: "Motion", default: true },
+    ornament: {
+      type: "boolean",
+      label: "Corner ornament",
+      description: "Show the corner mark in the article header.",
+      default: true
+    },
+    seal: {
+      type: "boolean",
+      label: "Folio seal",
+      description: "Add a circular folio stamp to the article header.",
+      default: false
+    }
+  }),
+  presets: { reading: { label: "Reading", settings: { typography: "serif" } } }
+});
 export {
   folioTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/theme-folio",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -16,7 +16,7 @@
     "./styles/theme.css": "./styles/theme.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.33"
+    "@riebeckite/core": "0.0.34"
   },
   "publishConfig": {
     "access": "public"

package/styles/theme.css

@@ -12,14 +12,14 @@
 }
 
 @layer base {
-  :is(:root, .rb-theme-root)[data-theme-name="folio"] {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"] {
     color-scheme: light;
     --rb-color-paper: #f1f0ec;
     --rb-color-surface: #ffffff;
     --rb-color-surface-hover: #e4e2dc;
     --rb-color-ink: #161616;
     --rb-color-muted: #65635f;
-    --rb-color-accent: #d6422c;
+    --rb-color-accent: var(--rb-setting-accent-color, #d6422c);
     --rb-color-link: #bd301e;
     --rb-color-focus: #d6422c;
     --rb-color-selected: #ffd1c9;
@@ -40,21 +40,21 @@
     --rb-font-mono:
       "SFMono-Regular", Consolas, "Noto Sans Mono CJK JP", monospace;
     --rb-layout-page-max: 100rem;
-    --rb-layout-article-max: 62rem;
+    --rb-layout-article-max: calc(var(--rb-setting-article-width, 62) * 1rem);
     --rb-layout-sidebar: 15rem;
     --rb-layout-gap: 2.5rem;
     --rb-radius-sm: 0;
     --rb-radius-md: 0;
   }
 
-  :is(:root, .rb-theme-root)[data-theme-name="folio"][data-theme="dark"] {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"][data-rb-mode="dark"] {
     color-scheme: dark;
     --rb-color-paper: #171716;
     --rb-color-surface: #222220;
     --rb-color-surface-hover: #30302d;
     --rb-color-ink: #f5f2eb;
     --rb-color-muted: #c0bcb3;
-    --rb-color-accent: #ff826c;
+    --rb-color-accent: var(--rb-setting-accent-color, #ff826c);
     --rb-color-link: #ffac9c;
     --rb-color-focus: #ffbdaf;
     --rb-color-selected: #71382e;
@@ -69,14 +69,14 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    :is(:root, .rb-theme-root)[data-theme-name="folio"]:not([data-theme]) {
+    :is(:root, .rb-theme-root)[data-rb-theme="folio"]:not([data-rb-mode]) {
       color-scheme: dark;
       --rb-color-paper: #171716;
       --rb-color-surface: #222220;
       --rb-color-surface-hover: #30302d;
       --rb-color-ink: #f5f2eb;
       --rb-color-muted: #c0bcb3;
-      --rb-color-accent: #ff826c;
+      --rb-color-accent: var(--rb-setting-accent-color, #ff826c);
       --rb-color-link: #ffac9c;
       --rb-color-focus: #ffbdaf;
       --rb-color-selected: #71382e;
@@ -91,7 +91,7 @@
     }
   }
 
-  :is(:root, .rb-theme-root)[data-theme-name="folio"] {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"] {
     background: var(--rb-color-paper);
     color: var(--rb-color-ink);
     font-family: var(--rb-font-body);
@@ -100,38 +100,82 @@
   }
 }
 
-:is(:root, .rb-theme-root)[data-theme-name="folio"] ::selection {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] ::selection {
   background: var(--rb-color-selected);
   color: var(--rb-color-ink);
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] :focus-visible {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] :focus-visible {
   outline: 3px solid var(--rb-color-focus);
   outline-offset: 3px;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article {
-  font-size: 1.05rem;
-  line-height: 1.65;
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article {
+  font-size: calc(var(--rb-setting-font-size, 1.05) * 1rem);
+  line-height: var(--rb-setting-line-height, 1.65);
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-header {
+
+:is(
+    :root,
+    .rb-theme-root
+  )[data-rb-theme="folio"][data-rb-setting-typography="mono"]
+  .rb-article {
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] {
+  --rb-folio-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M2 34V2h32M70 38v32H38' stroke='%23d6422c' stroke-width='4'/%3E%3Cpath d='M2 70 70 2' stroke='%23d6422c' stroke-width='1'/%3E%3C/svg%3E");
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"][data-rb-mode="dark"] {
+  --rb-folio-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M2 34V2h32M70 38v32H38' stroke='%23ff826c' stroke-width='4'/%3E%3Cpath d='M2 70 70 2' stroke='%23ff826c' stroke-width='1'/%3E%3C/svg%3E");
+}
+@media (prefers-color-scheme: dark) {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"]:not([data-rb-mode]) {
+    --rb-folio-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M2 34V2h32M70 38v32H38' stroke='%23ff826c' stroke-width='4'/%3E%3Cpath d='M2 70 70 2' stroke='%23ff826c' stroke-width='1'/%3E%3C/svg%3E");
+  }
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-header {
   border-left: 0.5rem solid var(--rb-color-accent);
   margin-bottom: 3rem;
   padding-left: 1.25rem;
+  padding-right: 5rem;
+  position: relative;
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-header::after {
+  background: var(--rb-folio-corner) center / contain no-repeat;
+  content: "";
+  height: 4rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 4rem;
+}
+:is(
+    :root,
+    .rb-theme-root
+  )[data-rb-theme="folio"][data-rb-setting-ornament="false"]
+  .rb-article-header {
+  padding-right: 1.25rem;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-header h1 {
+:is(
+    :root,
+    .rb-theme-root
+  )[data-rb-theme="folio"][data-rb-setting-ornament="false"]
+  .rb-article-header::after {
+  display: none;
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-header h1 {
   font-size: clamp(2.4rem, 1.6rem + 3.5vw, 5rem);
   font-weight: 800;
   letter-spacing: -0.055em;
   line-height: 0.95;
   text-wrap: balance;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-meta {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-meta {
   color: var(--rb-color-muted);
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-content h2 {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-content h2 {
   border-left: 0.25rem solid var(--rb-color-accent);
   font-size: 1.65rem;
   font-weight: 800;
@@ -139,18 +183,25 @@
   margin-top: 3.5rem;
   padding-left: 0.75rem;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-content h3 {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-content h3 {
   font-size: 1.2rem;
   font-weight: 800;
   margin-top: 2.4rem;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-content a {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-content a {
   color: var(--rb-color-link);
   font-weight: 650;
   text-decoration-thickness: 2px;
   text-underline-offset: 0.16em;
+  transition:
+    color 140ms ease,
+    text-decoration-thickness 140ms ease;
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-content a:hover {
+  color: var(--rb-color-accent);
+  text-decoration-thickness: 3px;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"]
+:is(:root, .rb-theme-root)[data-rb-theme="folio"]
   .rb-article-content
   blockquote {
   border-left: 0.35rem solid var(--rb-color-accent);
@@ -159,48 +210,130 @@
   margin-inline: 0;
   padding-left: 1.2rem;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"]
+:is(:root, .rb-theme-root)[data-rb-theme="folio"]
   .rb-article-content
   :is(pre, code) {
   font-family: var(--rb-font-mono);
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-content pre {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-content pre {
   overflow-x: auto;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-content table {
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-content table {
   border-collapse: collapse;
   display: block;
   max-width: 100%;
   overflow-x: auto;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"]
+:is(:root, .rb-theme-root)[data-rb-theme="folio"]
   .rb-article-content
   :is(th, td) {
   border-bottom: 2px solid var(--rb-color-border);
   padding: 0.65rem;
   text-align: left;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"]
+:is(:root, .rb-theme-root)[data-rb-theme="folio"]
   :is(.rr-media, .rr-lightbox, .rr-recent-posts, .rr-cardlink) {
   border-top: 3px solid var(--rb-color-ink);
   margin-top: 2.5rem;
   padding-top: 1rem;
 }
-:is(:root, .rb-theme-root)[data-theme-name="folio"]
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] :is(.rr-media, .rr-lightbox) {
+  border-top-color: var(--rb-color-accent);
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"] .rr-cardlink {
+  transition:
+    border-color 140ms ease,
+    transform 140ms ease;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"]:not(
+      [data-rb-setting-motion="false"]
+    )
+    .rb-article-header::after {
+    animation: rb-folio-frame-in 420ms ease-out both;
+  }
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"] .rr-cardlink:hover {
+    border-color: var(--rb-color-accent);
+    transform: translateX(0.25rem);
+  }
+}
+@keyframes rb-folio-frame-in {
+  from {
+    opacity: 0;
+    transform: translate(0.6rem, -0.6rem);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+:is(:root, .rb-theme-root)[data-rb-theme="folio"]
   :is(.rb-site-header, .rb-site-footer) {
   font-weight: 700;
 }
 @media (max-width: 48rem) {
-  :is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article {
     font-size: 1rem;
   }
-  :is(:root, .rb-theme-root)[data-theme-name="folio"] .rb-article-header {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"] .rb-article-header {
     border-left-width: 0.3rem;
+    padding-right: 3.5rem;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  :is(:root, .rb-theme-root)[data-theme-name="folio"] * {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"] * {
     scroll-behavior: auto;
     transition-duration: 0s;
   }
 }
+
+:is(:root, .rb-theme-root)[data-rb-theme="folio"][data-rb-setting-seal="true"]
+  .rb-article-header {
+  padding-right: 5rem;
+}
+
+:is(:root, .rb-theme-root)[data-rb-theme="folio"][data-rb-setting-seal="true"]
+  .rb-article-header::before {
+  position: absolute;
+  top: 1.25rem;
+  right: 5.25rem;
+  display: grid;
+  width: 3.25rem;
+  height: 3.25rem;
+  border: 1px solid var(--rb-color-accent);
+  border-radius: 50%;
+  color: var(--rb-color-accent);
+  content: "FOLIO";
+  font-family: var(--rb-font-heading);
+  font-size: 0.5rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  opacity: 0.75;
+  place-items: center;
+  text-indent: 0.14em;
+  transform: rotate(-12deg);
+  pointer-events: none;
+}
+
+@media (max-width: 48rem) {
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"][data-rb-setting-seal="true"]
+    .rb-article-header {
+    padding-right: 3.5rem;
+  }
+
+  :is(:root, .rb-theme-root)[data-rb-theme="folio"][data-rb-setting-seal="true"]
+    .rb-article-header::before {
+    top: 1rem;
+    right: 3.75rem;
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 0.4375rem;
+  }
+}
+
+:is(:root, .rb-theme-root)[data-rb-theme="folio"]
+  .rb-article-content
+  > :is(.rr-callout, .rb-table-scroll, pre, .rr-code)
+  + :is(.rr-callout, .rb-table-scroll, pre, .rr-code) {
+  margin-block-start: 2.5rem;
+}