@guildofgleks/ui 21.6.0 → 21.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.6.0",
+  "version": "21.7.0",
   "engines": {
     "node": ">=20.19.0"
   },

package/styles/button.css

@@ -19,43 +19,31 @@
   /* Scopes the spinner rendered inside a loading button to the variant's spinner colour. */
   --gog-spinner-color: var(
     --gog-button-spinner-color,
-    var(
-      --gog-btn-spinner-color,
-      var(--gog-button-variant-spinner-color, var(--gog-button-primary-spinner-color))
-    )
+    var(--gog-button-variant-spinner-color, var(--gog-button-primary-spinner-color))
   );
 
   gap: var(--gog-button-gap);
   border: var(--gog-button-border-width) var(--gog-button-border-style)
-    var(
-      --gog-button-border,
-      var(--gog-btn-border, var(--gog-button-variant-border, var(--gog-button-primary-border)))
-    );
+    var(--gog-button-border, var(--gog-button-variant-border, var(--gog-button-primary-border)));
   border-radius: var(--gog-button-radius);
-  padding: var(
-    --gog-button-padding,
-    var(--gog-btn-padding, var(--gog-button-size-padding, var(--gog-button-md-padding)))
-  );
+  padding: var(--gog-button-padding, var(--gog-button-size-padding, var(--gog-button-md-padding)));
   font-family: var(--gog-button-font-family);
   font-weight: var(--gog-button-font-weight);
   font-size: var(
     --gog-button-font-size,
-    var(--gog-btn-font-size, var(--gog-button-size-font-size, var(--gog-button-md-font-size)))
+    var(--gog-button-size-font-size, var(--gog-button-md-font-size))
   );
   letter-spacing: var(--gog-button-letter-spacing);
   text-transform: var(--gog-button-text-transform);
   line-height: var(--gog-button-line-height);
   background-color: var(
     --gog-button-bg,
-    var(--gog-btn-bg, var(--gog-button-variant-bg, var(--gog-button-primary-bg)))
-  );
-  color: var(
-    --gog-button-color,
-    var(--gog-btn-color, var(--gog-button-variant-color, var(--gog-button-primary-color)))
+    var(--gog-button-variant-bg, var(--gog-button-primary-bg))
   );
+  color: var(--gog-button-color, var(--gog-button-variant-color, var(--gog-button-primary-color)));
   box-shadow: var(
     --gog-button-shadow,
-    var(--gog-btn-shadow, var(--gog-button-variant-shadow, var(--gog-button-primary-shadow)))
+    var(--gog-button-variant-shadow, var(--gog-button-primary-shadow))
   );
   cursor: pointer;
   /* An `<a>` carries the UA underline; a `<button>` never did, which is why the component never
@@ -88,10 +76,7 @@
   outline: var(--gog-button-focus-ring-width) solid
     var(
       --gog-button-hover-bg,
-      var(
-        --gog-btn-hover-bg,
-        var(--gog-button-variant-hover-bg, var(--gog-button-primary-hover-bg))
-      )
+      var(--gog-button-variant-hover-bg, var(--gog-button-primary-hover-bg))
     );
   outline-offset: var(--gog-button-focus-ring-offset);
 }
@@ -99,21 +84,15 @@
 .gog-btn:hover:not(:disabled) {
   background-color: var(
     --gog-button-hover-bg,
-    var(--gog-btn-hover-bg, var(--gog-button-variant-hover-bg, var(--gog-button-primary-hover-bg)))
+    var(--gog-button-variant-hover-bg, var(--gog-button-primary-hover-bg))
   );
   color: var(
     --gog-button-hover-color,
-    var(
-      --gog-btn-hover-color,
-      var(--gog-button-variant-hover-color, var(--gog-button-primary-hover-color))
-    )
+    var(--gog-button-variant-hover-color, var(--gog-button-primary-hover-color))
   );
   box-shadow: var(
     --gog-button-hover-shadow,
-    var(
-      --gog-btn-hover-shadow,
-      var(--gog-button-variant-hover-shadow, var(--gog-button-primary-hover-shadow))
-    )
+    var(--gog-button-variant-hover-shadow, var(--gog-button-primary-hover-shadow))
   );
 }
 

package/styles/index.css

@@ -19,3 +19,8 @@
 @import './button.css';
 /* Same reason: `gogMenuItem` marks a consumer's own <button>. */
 @import './menu.css';
+/* Same reason again: `gogCardHeader`, `gogCardMedia`, `gogCardFooter`, `gogCardLink`,
+   `gogPanelHeader` and `gogPanelFooter` all mark a consumer's own element. */
+@import './surfaces.css';
+/* Same reason once more: `gogRipple` paints into a consumer's own element. */
+@import './ripple.css';

package/styles/presets/bevel.css

@@ -0,0 +1,82 @@
+/*
+ * `bevel` — the high-chrome early-web look: grey panels, raised buttons, navy accent, square
+ * corners. The other half of `docs/themes.md`'s Retro family, and the one that dates itself by
+ * *shape* rather than by palette.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/bevel.css';
+ *
+ *   <html data-theme="bevel">
+ *
+ * Palette plus the character layer, no per-component overrides and no font download — the face
+ * this look wants (Tahoma, Verdana, MS Sans Serif) is a system face on the platforms that have
+ * it and degrades to the platform sans elsewhere, which is exactly what it did at the time.
+ *
+ * **`--gog-border-style: outset` is what makes this theme.** Every raised surface in the library
+ * reads that token, so one declaration puts a bevel on buttons, panels and chips at once — the
+ * reason the character layer carries a border *style* and not just a width. `inset` on form
+ * fields is its counterpart: a sunken well is how a text input was drawn before a 1px outline
+ * was enough to say "type here".
+ */
+
+:root[data-theme='bevel'],
+[data-theme='bevel'] {
+  color-scheme: light;
+
+  /* Palette — the default desktop grey, and the navy that every link and title bar used */
+  --gog-background-color: #c0c0c0;
+  --gog-surface-color: #d8d8d8;
+  --gog-hover-color: #cacaca;
+  --gog-border-color: #808080;
+  --gog-text-color: #0a0a0a;
+  --gog-accent-text-color: #ffffff;
+  --gog-muted-text-color: #3d3d3d;
+  --gog-primary-color: #0a0a0a;
+  --gog-accent-color: #000080;
+  --gog-accent-bright: #1a1aa8;
+  --gog-accent-dim: #000080;
+  --gog-accent-pale: #b8b8cc;
+  --gog-secondary-color: #4a4a5a;
+  --gog-success-color: #006400;
+  --gog-danger-color: #8b0000;
+  --gog-warning-color: #7a5c00;
+  --gog-info-color: #005a6e;
+
+  /* No blur. A drop shadow of this era was a solid black offset rectangle, if it existed. */
+  --gog-panel-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
+  --gog-spinner-overlay-bg: rgba(192, 192, 192, 0.85);
+
+  /* Character layer — square, bevelled, compact, and shouting in caps the way a title bar did */
+  --gog-font-heading: Tahoma, Verdana, 'MS Sans Serif', Geneva, sans-serif;
+  --gog-font-body: Tahoma, Verdana, 'MS Sans Serif', Geneva, sans-serif;
+  --gog-radius: 0;
+  --gog-density: 0.9;
+  --gog-border-width: 2px;
+  --gog-border-style: outset;
+  --gog-panel-border-width: 2px;
+  --gog-panel-border-style: outset;
+  --gog-control-border-width: 2px;
+  --gog-control-border-style: inset;
+
+  /* The one per-component override in this file, and the reason it is needed: a button is a
+     "control" like a text field is, so it inherits `--gog-control-border-style` — which here has
+     to be `inset`, because a sunken well is how a text input was drawn. But a button of this era
+     is the opposite shape: raised, and it *pressed in* when you clicked it. The character layer
+     has one control tier and this theme needs two halves of it to disagree, so the button says
+     so itself. Everything else raised (panels, cards, chips, tags) gets `outset` from the tiers
+     above with nothing named. */
+  --gog-button-border-width: 2px;
+  --gog-button-border-style: outset;
+  /* `outset` draws its highlight and shade *from the border colour*, so a transparent border —
+     which is the library's default for a filled button, and correct everywhere else — renders a
+     bevel that is not there. Naming a colour is what makes the style visible at all. */
+  --gog-button-primary-border: #8a8ab0;
+
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+  --gog-duration-fast: 0s;
+  --gog-duration-base: 0s;
+  --gog-duration-slow: 0s;
+}

package/styles/presets/ledger.css

@@ -0,0 +1,66 @@
+/*
+ * `ledger` — the square-cornered, hard-shadowed, system-font look. Beige and grey, thin
+ * borders, no motion to speak of: the administrative-software identity, from before rounded
+ * corners and soft blur shadows were the default assumption. This is `docs/themes.md`'s
+ * "Classic" catalogue *family* — the preset itself needed its own name, since `ui-showcase`
+ * already uses "Classic" as the display label for `data-theme="light"`
+ * (`projects/ui-showcase/src/app/showcase-themes.ts`).
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/ledger.css';
+ *
+ *   <html data-theme="ledger">
+ *
+ * Palette plus the `docs/themes.md` iteration-1 character layer — no per-component overrides
+ * needed, which is exactly the point of that layer existing (see `slate.css` for the same
+ * argument, palette-only). Fonts are untouched on purpose: the library's own default is already
+ * a plain system-ui stack, which is the "system-font" look this preset asks for.
+ */
+
+:root[data-theme='ledger'],
+[data-theme='ledger'] {
+  color-scheme: light;
+
+  /* Palette — beige and grey, a muted navy accent */
+  --gog-background-color: #d8d3c7;
+  --gog-surface-color: #ffffff;
+  --gog-hover-color: #ccc6b8;
+  --gog-border-color: #a39d8f;
+  --gog-text-color: #262420;
+  --gog-accent-text-color: #ffffff;
+  --gog-muted-text-color: #4f4a3f;
+  --gog-primary-color: #262420;
+  --gog-accent-color: #35507a;
+  --gog-accent-bright: #4a6a9c;
+  --gog-accent-dim: #23374f;
+  --gog-accent-pale: #e4e8ee;
+  --gog-secondary-color: #6b6558;
+  --gog-success-color: #4a6b4a;
+  --gog-danger-color: #8b3a3a;
+  --gog-warning-color: #96702f;
+  --gog-info-color: #3d6b7a;
+
+  /* Hard-edged, not blurred — an offset with no blur radius reads as a printed drop shadow,
+     not a soft elevation cue. */
+  --gog-panel-shadow: 2px 2px 0 rgba(38, 36, 32, 0.25);
+  --gog-spinner-overlay-bg: rgba(216, 211, 199, 0.85);
+
+  /* Character layer — square corners, uniform 1px borders (down from the 2px form-field
+     default), sentence-case labels instead of shouty caps, and no motion: set all three
+     durations to 0s rather than lower each component's own transition individually, which is
+     the whole reason the character layer's foundation tokens exist. Components still honour
+     `prefers-reduced-motion` independently of this. */
+  --gog-radius: 0;
+  /* Tighter than the library's default, because the look this reproduces packed a screen:
+     administrative software was designed for people who read a whole table at once, not for
+     touch targets. One number, and every padding and gap in the library follows it. */
+  --gog-density: 0.9;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+  --gog-duration-fast: 0s;
+  --gog-duration-base: 0s;
+  --gog-duration-slow: 0s;
+}

package/styles/presets/material.css

@@ -0,0 +1,111 @@
+/*
+ * `material` — Material Design 3 baseline (light), as a @guildofgleks/ui theme.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/material.css';
+ *
+ *   <html data-theme="material">
+ *
+ * Unlike `slate.css`/`one-dark.css`/`one-light.css`, this is not palette-only — see
+ * `primeng.css`'s header for why, and `docs/themes.md` iteration 3 for how this file was
+ * ported from `gleks-ui-lab`'s hand-authored `[data-theme='material']` block. M3's shape scale
+ * isn't uniform the way PrimeNG's is: buttons are pill-shaped, checkboxes are near-square and
+ * dialogs get a large radius, so `--gog-radius` sets the *base* (fields, checkboxes) and three
+ * components still opt into their own shape on top of it.
+ */
+
+:root[data-theme='material'],
+[data-theme='material'] {
+  color-scheme: light;
+
+  /* Palette */
+  --gog-background-color: #fef7ff;
+  --gog-surface-color: #f7f2fa;
+  --gog-hover-color: #ece6f0;
+  --gog-border-color: #cac4d0;
+  --gog-text-color: #1c1b1f;
+  --gog-accent-text-color: #ffffff;
+  --gog-muted-text-color: #49454f;
+  --gog-primary-color: #1c1b1f;
+  --gog-accent-color: #6750a4;
+  --gog-accent-bright: #7f67be;
+  --gog-accent-dim: #4f378b;
+  --gog-accent-pale: #eaddff;
+  --gog-secondary-color: #625b71;
+  --gog-success-color: #2e7d32;
+  --gog-danger-color: #b3261e;
+  --gog-warning-color: #f9a825;
+  --gog-info-color: #0288d1;
+  --gog-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --gog-spinner-overlay-bg: rgba(254, 247, 255, 0.75);
+
+  /* Fonts — Material is Roboto end to end, no heading/body split */
+  --gog-font-heading: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --gog-font-body: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --gog-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Character layer — small 4px base radius (fields, checkboxes), sentence-case labels
+     instead of shouty caps. As with `primeng.css`, this replaces ten hand-listed
+     letter-spacing/text-transform overrides with two foundation ones, and in doing so also
+     covers six components the original lab authoring had missed (button-toggle,
+     calendar-weekday, autocomplete-label, datepicker-label, slider-label, table-total) — see
+     `primeng.css`'s header for the full account, identical here. */
+  --gog-radius: 4px;
+  /* Roomier than the library's default: M3's whole posture is generous touch targets and
+     breathing room, and reproducing it without the spacing reproduces only its colours. */
+  --gog-density: 1.1;
+  --gog-control-border-width: 1px;
+  --gog-focus-ring-width: 2px;
+  --gog-focus-ring-offset: 2px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+
+  /* Button — pill-shaped, medium weight, body font (casing/tracking from the character layer) */
+  --gog-button-font-family: var(--gog-font-body);
+  --gog-button-font-weight: 500;
+  --gog-button-radius: 20px;
+
+  /* Field labels — on-surface-variant gray (casing/tracking from the character layer) */
+  --gog-input-label-color: var(--gog-muted-text-color);
+  --gog-input-label-font-family: var(--gog-font-body);
+  --gog-input-field-border: var(--gog-border-color);
+  --gog-select-label-color: var(--gog-muted-text-color);
+  --gog-select-label-font-family: var(--gog-font-body);
+  --gog-select-field-border: var(--gog-border-color);
+  --gog-multiselect-label-color: var(--gog-muted-text-color);
+  --gog-multiselect-label-font-family: var(--gog-font-body);
+  --gog-multiselect-field-border: var(--gog-border-color);
+  --gog-multiselect-checkbox-border: var(--gog-border-color);
+
+  /* Checkbox — small square radius, on-surface-variant border */
+  --gog-checkbox-radius: 2px;
+  --gog-checkbox-border-color: var(--gog-border-color);
+  --gog-checkbox-label-color: var(--gog-text-color);
+
+  /* Accordion — rounded panel, surface header (casing from the character layer) */
+  --gog-accordion-font-family: var(--gog-font-body);
+  --gog-accordion-header-bg: var(--gog-surface-color);
+  --gog-accordion-hover-bg: var(--gog-hover-color);
+  --gog-accordion-body-bg: var(--gog-surface-color);
+  --gog-accordion-border-color: var(--gog-border-color);
+  --gog-accordion-radius: 12px;
+  --gog-accordion-body-radius: 12px;
+
+  /* Table — neutral row hover (header casing from the character layer) */
+  --gog-table-header-font-family: var(--gog-font-body);
+  --gog-table-border-color: var(--gog-border-color);
+  --gog-table-hover-bg: var(--gog-hover-color);
+
+  /* Slider / spinner — neutral track instead of accent-tinted */
+  --gog-slider-track-bg: var(--gog-border-color);
+  --gog-slider-label-color: var(--gog-muted-text-color);
+  --gog-spinner-track-color: var(--gog-border-color);
+
+  /* Dialog (M3 "extra-large" shape) / toast (M3 snackbar shape) */
+  --gog-dialog-backdrop-bg: rgba(0, 0, 0, 0.32);
+  --gog-dialog-radius: 28px;
+  --gog-dialog-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --gog-toast-radius: 4px;
+}

package/styles/presets/one-dark.css

@@ -8,16 +8,30 @@
  *
  *   <html data-theme="one-dark">
  *
- * Like every preset here it declares palette tokens only — see `slate.css` for why that is
- * enough to restyle the whole library. The syntax-highlighting hues map onto the library's
- * semantic roles: One Dark's blue is the accent, its green/red/yellow/cyan become
- * success/danger/warning/info.
+ * The syntax-highlighting hues map onto the library's semantic roles: One Dark's blue is the
+ * accent, its green/red/yellow/cyan become success/danger/warning/info.
+ *
+ * Palette plus the character layer. It was palette-only until 21.7.0, which made it a recoloured
+ * default wearing an editor's palette — and the editor this reproduces does not look like the
+ * library's default shape. Editor chrome is small-radius, thin-bordered, compact, and it never
+ * shouts in caps; four foundation tokens and a density say all of that, with no per-component
+ * override needed. See `docs/themes.md` iterations 1 and 6.
  */
 
 :root[data-theme='one-dark'],
 [data-theme='one-dark'] {
   color-scheme: dark;
 
+  /* Character layer — editor chrome. A 4px radius (panels, tabs and buttons in this family of
+     editors are barely rounded, not pill-shaped), 1px borders instead of the library's 2px form
+     default, sentence-case labels, and a compact density: an editor's UI exists to leave room
+     for the buffer. */
+  --gog-radius: 4px;
+  --gog-density: 0.9;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+
   /* Editor chrome */
   --gog-background-color: #282c34;
   --gog-surface-color: #21252b;
@@ -27,7 +41,10 @@
   /* Type */
   --gog-text-color: #abb2bf;
   --gog-accent-text-color: #282c34;
-  --gog-muted-text-color: #5c6370;
+  /* Lightened from One Dark's own #5c6370 in 21.7.0. That is the editor's comment colour, and
+     it reads at 2.32:1 on this background — fine for code a reader skims, well under AA for UI
+     text a reader has to act on. Fidelity loses to legibility on this one token. */
+  --gog-muted-text-color: #9099a8;
 
   /* Brand — One Dark's blue */
   --gog-primary-color: #abb2bf;

package/styles/presets/one-light.css

@@ -10,13 +10,22 @@
  *
  * The light counterpart to `one-dark.css`, using the same hue roles: blue is the accent,
  * green/red/yellow/cyan become success/danger/warning/info. Pair the two behind a toggle and
- * `ThemeService.setTheme('one-dark' | 'one-light')` switches between them.
+ * `ThemeService.setTheme('one-dark' | 'one-light')` switches between them — including the
+ * character layer below, which is deliberately identical in the two: they are one editor UI in
+ * two palettes, so a toggle between them must change tone and nothing else.
  */
 
 :root[data-theme='one-light'],
 [data-theme='one-light'] {
   color-scheme: light;
 
+  /* Character layer — identical to `one-dark.css`'s, on purpose. See that file's comment. */
+  --gog-radius: 4px;
+  --gog-density: 0.9;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+
   /* Editor chrome */
   --gog-background-color: #fafafa;
   --gog-surface-color: #ffffff;
@@ -26,12 +35,16 @@
   /* Type */
   --gog-text-color: #383a42;
   --gog-accent-text-color: #ffffff;
-  --gog-muted-text-color: #a0a1a7;
+  /* Darkened from One Light's own #a0a1a7 (2.47:1) for the same reason as one-dark's. */
+  --gog-muted-text-color: #6e6f77;
 
   /* Brand — One Light's blue */
   --gog-primary-color: #383a42;
-  --gog-accent-color: #4078f2;
-  --gog-accent-bright: #5b8dff;
+  /* Deepened from #4078f2 / #5b8dff in 21.7.0: white on the original was 4.05:1 at rest and
+     3.13:1 on hover. As in `light`, the hover is now darker than the rest state rather than
+     lighter — a blue light enough to read as a highlight cannot carry white text. */
+  --gog-accent-color: #2f66db;
+  --gog-accent-bright: #2456c4;
   --gog-accent-dim: #2f5fd0;
   --gog-accent-pale: #dce7fd;
   --gog-secondary-color: #a626a4;

package/styles/presets/parchment.css

@@ -0,0 +1,63 @@
+/*
+ * `parchment` — ink on laid paper. Warm neutrals, a serif body, square corners, an oxblood
+ * accent: `docs/themes.md`'s Historical family, the one the plan flagged as blocked on fonts.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/parchment.css';
+ *
+ *   <html data-theme="parchment">
+ *
+ * **How the font blocker was resolved.** A period serif is most of what makes this read as
+ * historical, and a preset must never add a network request by being imported. So this file sets
+ * a *stack* of old-style serifs that ship with real operating systems — Iowan Old Style, Palatino,
+ * Book Antiqua, Georgia — and every one of them is a genuine old-style face with the right colour
+ * on the page. It looks deliberate on every platform, with no download.
+ *
+ * For the fuller period look, `presets/parchment.fonts.css` is an optional second import that
+ * pulls EB Garamond and points the same tokens at it. That file is the only one here that makes
+ * a request, and importing it is the consumer's decision, not this file's.
+ */
+
+:root[data-theme='parchment'],
+[data-theme='parchment'] {
+  color-scheme: light;
+
+  /* Palette — aged paper, iron-gall ink, an oxblood rubric */
+  --gog-background-color: #e8dfc8;
+  --gog-surface-color: #f5efe0;
+  --gog-hover-color: #ded3b8;
+  --gog-border-color: #b8a888;
+  --gog-text-color: #241d14;
+  --gog-accent-text-color: #f5efe0;
+  --gog-muted-text-color: #57493a;
+  --gog-primary-color: #241d14;
+  --gog-accent-color: #6b2f2f;
+  --gog-accent-bright: #8a4040;
+  --gog-accent-dim: #5a2626;
+  --gog-accent-pale: #e3d4c4;
+  --gog-secondary-color: #6b5b45;
+
+  /* Semantics — the colours a scribe actually had: verdigris, vermilion, orpiment, indigo */
+  --gog-success-color: #3f5f3f;
+  --gog-danger-color: #8b2f26;
+  --gog-warning-color: #8a6516;
+  --gog-info-color: #3a5570;
+
+  /* Paper does not float. A soft, close shadow reads as a sheet resting on the desk. */
+  --gog-panel-shadow: 0 1px 3px rgba(36, 29, 20, 0.22);
+  --gog-spinner-overlay-bg: rgba(232, 223, 200, 0.88);
+
+  /* Character layer — a book, not an application. Serif throughout, square corners, hairline
+     rules, and roomier than the house default: printed pages have margins, and cramping this
+     palette into a dense grid is what would make it read as a skin rather than a design. */
+  --gog-font-heading:
+    'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  --gog-font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  --gog-radius: 0;
+  --gog-density: 1.1;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+}

package/styles/presets/parchment.fonts.css

@@ -0,0 +1,29 @@
+/*
+ * `parchment.fonts.css` — the optional webfont half of `presets/parchment.css`.
+ *
+ * **This file makes a network request. That is the whole reason it is a separate file.**
+ *
+ * A preset must be safe to import: `@import '…/presets/parchment.css'` never downloads
+ * anything, and the stack it sets is a real old-style serif on every platform. This file is for
+ * consumers who want the fuller period look and are willing to pay a font request for it:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/parchment.css';
+ *   @import '@guildofgleks/ui/styles/presets/parchment.fonts.css';  ← opt in
+ *
+ * Import it *after* the preset — it re-points the same two tokens, and later wins.
+ *
+ * If your app already self-hosts a font, or your CSP forbids Google Fonts, skip this file and
+ * point `--gog-font-heading`/`--gog-font-body` at your own family inside `[data-theme='parchment']`
+ * instead. Nothing else in the preset needs to change: the character layer does not care which
+ * serif it is.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
+
+:root[data-theme='parchment'],
+[data-theme='parchment'] {
+  --gog-font-heading:
+    'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
+  --gog-font-body: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
+}