@guildofgleks/ui 21.7.2 → 21.9.0

package/package.json

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

package/styles/button.css

@@ -96,15 +96,59 @@
   );
 }
 
+/*
+ * The held state. It changes colour *and* scales, and the colour is the part that matters:
+ * `prefers-reduced-motion` switches the transform off below, and until 21.9.0 that was the whole
+ * rule — so a reader with animations off pressed a button and nothing whatsoever happened. The
+ * ripple does not cover it either: it is off by default and is itself suppressed under reduced
+ * motion, deliberately, because it really is decoration. A colour change is not.
+ *
+ * This sits after `:hover` on purpose. Both are (0,3,0), so source order decides, and a pointer
+ * is nearly always hovering the button it is pressing — the press has to win that tie or it is
+ * invisible exactly when it is happening.
+ */
 .gog-btn:active:not(:disabled) {
+  background-color: var(
+    --gog-button-press-bg,
+    var(--gog-button-variant-press-bg, var(--gog-button-primary-press-bg))
+  );
+  color: var(
+    --gog-button-press-color,
+    var(--gog-button-variant-press-color, var(--gog-button-primary-press-color))
+  );
   transform: scale(var(--gog-button-active-scale));
 }
 
+/*
+ * A toggle button that is on, and the only state here that persists rather than tracking the
+ * pointer. It therefore has to survive the ones that do not: `:hover` and `:active` both own the
+ * background, so a ring is what is left that they cannot paint over. Last of the state rules and
+ * (0,3,0) like them, so it wins the tie by source order — a toggled button that loses its ring
+ * the moment the pointer arrives would announce `aria-pressed="true"` and show nothing, which is
+ * the WCAG 1.4.1 failure this rule exists to prevent.
+ *
+ * `mixed` is styled like `true`: a partially-checked toggle is on for the purpose of "does this
+ * look different from off".
+ *
+ * This matches `[gogButton]` on a consumer's own element too, which is the whole reason it keys
+ * off the attribute rather than an input — the directive styles markup you own, so you write
+ * `aria-pressed` there yourself and get the look for free.
+ */
+.gog-btn[aria-pressed='true']:not(:disabled),
+.gog-btn[aria-pressed='mixed']:not(:disabled) {
+  box-shadow: var(
+    --gog-button-toggled-shadow,
+    var(--gog-button-variant-toggled-shadow, var(--gog-button-primary-toggled-shadow))
+  );
+}
+
 @media (prefers-reduced-motion: reduce) {
   .gog-btn {
     transition: none;
   }
 
+  /* Only the movement goes. The colour above stays, and with the transition off it lands on the
+     first frame of the press instead of easing in. */
   .gog-btn:active:not(:disabled) {
     transform: none;
   }
@@ -126,6 +170,9 @@
   --gog-button-variant-hover-bg: var(--gog-button-primary-hover-bg);
   --gog-button-variant-hover-color: var(--gog-button-primary-hover-color);
   --gog-button-variant-hover-shadow: var(--gog-button-primary-hover-shadow);
+  --gog-button-variant-toggled-shadow: var(--gog-button-primary-toggled-shadow);
+  --gog-button-variant-press-bg: var(--gog-button-primary-press-bg);
+  --gog-button-variant-press-color: var(--gog-button-primary-press-color);
   --gog-button-variant-spinner-color: var(--gog-button-primary-spinner-color);
 }
 
@@ -137,6 +184,9 @@
   --gog-button-variant-hover-bg: var(--gog-button-secondary-hover-bg);
   --gog-button-variant-hover-color: var(--gog-button-secondary-hover-color);
   --gog-button-variant-hover-shadow: var(--gog-button-secondary-hover-shadow);
+  --gog-button-variant-toggled-shadow: var(--gog-button-secondary-toggled-shadow);
+  --gog-button-variant-press-bg: var(--gog-button-secondary-press-bg);
+  --gog-button-variant-press-color: var(--gog-button-secondary-press-color);
   --gog-button-variant-spinner-color: var(--gog-button-secondary-spinner-color);
 }
 
@@ -149,6 +199,9 @@
   --gog-button-variant-hover-bg: var(--gog-button-outline-hover-bg);
   --gog-button-variant-hover-color: var(--gog-button-outline-hover-color);
   --gog-button-variant-hover-shadow: var(--gog-button-outline-hover-shadow);
+  --gog-button-variant-toggled-shadow: var(--gog-button-outline-toggled-shadow);
+  --gog-button-variant-press-bg: var(--gog-button-outline-press-bg);
+  --gog-button-variant-press-color: var(--gog-button-outline-press-color);
   --gog-button-variant-spinner-color: var(--gog-button-outline-spinner-color);
 }
 
@@ -161,9 +214,121 @@
   --gog-button-variant-hover-bg: var(--gog-button-ghost-hover-bg);
   --gog-button-variant-hover-color: var(--gog-button-ghost-hover-color);
   --gog-button-variant-hover-shadow: var(--gog-button-ghost-hover-shadow);
+  --gog-button-variant-toggled-shadow: var(--gog-button-ghost-toggled-shadow);
+  --gog-button-variant-press-bg: var(--gog-button-ghost-press-bg);
+  --gog-button-variant-press-color: var(--gog-button-ghost-press-color);
   --gog-button-variant-spinner-color: var(--gog-button-ghost-spinner-color);
 }
 
+/* === Severity ===
+ *
+ * `severity` is orthogonal to `variant` — a destructive action can be filled, outlined or a
+ * ghost and is destructive in all three — so these do not add a fifth variant. They re-point the
+ * `--gog-button-variant-*` layer the variant classes above set, and they come *after* those
+ * classes so the tie is decided by source order where specificity allows it.
+ *
+ * Two halves. The severity class carries only the ingredients (`--gog-button-severity-*`, from
+ * the per-severity tokens in theme.css); the shape rules below say what a variant does with
+ * them, once each rather than once per severity. Four plus three blocks instead of sixteen, and
+ * a fifth status colour would be one more block rather than four.
+ *
+ * The shape rules are `(0,2,0)` through the doubled `:is()`, which is what puts them above the
+ * `(0,1,0)` variant classes regardless of the order the two classes appear in on the element.
+ */
+.gog-btn--success {
+  --gog-button-severity-fill: var(--gog-button-success-fill);
+  --gog-button-severity-on-fill: var(--gog-button-success-on-fill);
+  --gog-button-severity-fill-hover: var(--gog-button-success-fill-hover);
+  --gog-button-severity-fill-press: var(--gog-button-success-fill-press);
+  --gog-button-severity-ink: var(--gog-button-success-ink);
+  --gog-button-severity-wash: var(--gog-button-success-wash);
+}
+
+.gog-btn--danger {
+  --gog-button-severity-fill: var(--gog-button-danger-fill);
+  --gog-button-severity-on-fill: var(--gog-button-danger-on-fill);
+  --gog-button-severity-fill-hover: var(--gog-button-danger-fill-hover);
+  --gog-button-severity-fill-press: var(--gog-button-danger-fill-press);
+  --gog-button-severity-ink: var(--gog-button-danger-ink);
+  --gog-button-severity-wash: var(--gog-button-danger-wash);
+}
+
+.gog-btn--warning {
+  --gog-button-severity-fill: var(--gog-button-warning-fill);
+  --gog-button-severity-on-fill: var(--gog-button-warning-on-fill);
+  --gog-button-severity-fill-hover: var(--gog-button-warning-fill-hover);
+  --gog-button-severity-fill-press: var(--gog-button-warning-fill-press);
+  --gog-button-severity-ink: var(--gog-button-warning-ink);
+  --gog-button-severity-wash: var(--gog-button-warning-wash);
+}
+
+.gog-btn--info {
+  --gog-button-severity-fill: var(--gog-button-info-fill);
+  --gog-button-severity-on-fill: var(--gog-button-info-on-fill);
+  --gog-button-severity-fill-hover: var(--gog-button-info-fill-hover);
+  --gog-button-severity-fill-press: var(--gog-button-info-fill-press);
+  --gog-button-severity-ink: var(--gog-button-info-ink);
+  --gog-button-severity-wash: var(--gog-button-info-wash);
+}
+
+/* The two filled variants: the status colour is the fill, and the label is the one that reads
+   on it. `secondary` loses its own neutral fill here, which is the point — a severity says what
+   the action does, and the variant is left saying only how loud it is. */
+:is(.gog-btn--success, .gog-btn--danger, .gog-btn--warning, .gog-btn--info):is(
+  .gog-btn--primary,
+  .gog-btn--secondary
+) {
+  --gog-button-variant-bg: var(--gog-button-severity-fill);
+  --gog-button-variant-color: var(--gog-button-severity-on-fill);
+  --gog-button-variant-border: transparent;
+  --gog-button-variant-shadow: none;
+  --gog-button-variant-hover-bg: var(--gog-button-severity-fill-hover);
+  --gog-button-variant-hover-color: var(--gog-button-severity-on-fill);
+  --gog-button-variant-hover-shadow: none;
+  --gog-button-variant-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
+    var(--gog-button-severity-on-fill);
+  --gog-button-variant-press-bg: var(--gog-button-severity-fill-press);
+  --gog-button-variant-press-color: var(--gog-button-severity-on-fill);
+  --gog-button-variant-spinner-color: var(--gog-button-severity-on-fill);
+}
+
+/* Outline: the border and the label are the *ink* rather than the raw status colour, because
+   this label is text on the page and the raw hue clears AA in only five of the eleven themes.
+   Hovering fills with the status colour proper, which is where `-on-fill` comes back. */
+:is(.gog-btn--success, .gog-btn--danger, .gog-btn--warning, .gog-btn--info).gog-btn--outline {
+  --gog-button-variant-bg: transparent;
+  --gog-button-variant-color: var(--gog-button-severity-ink);
+  --gog-button-variant-border: var(--gog-button-severity-ink);
+  --gog-button-variant-shadow: none;
+  --gog-button-variant-hover-bg: var(--gog-button-severity-fill);
+  --gog-button-variant-hover-color: var(--gog-button-severity-on-fill);
+  --gog-button-variant-hover-shadow: none;
+  --gog-button-variant-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
+    var(--gog-button-severity-ink);
+  --gog-button-variant-press-bg: var(--gog-button-severity-fill-press);
+  --gog-button-variant-press-color: var(--gog-button-severity-on-fill);
+  --gog-button-variant-spinner-color: var(--gog-button-severity-ink);
+}
+
+/* Ghost: a wash on hover rather than a fill, the same shape the accent ghost has. Its hover
+   label is `--gog-text-color` for the reason 21.9.0 recorded on `--gog-button-ghost-hover-color`
+   — a label and a ground made of the same hue walk toward each other — and the press then fills
+   properly, which is also what the accent ghost does. */
+:is(.gog-btn--success, .gog-btn--danger, .gog-btn--warning, .gog-btn--info).gog-btn--ghost {
+  --gog-button-variant-bg: transparent;
+  --gog-button-variant-color: var(--gog-button-severity-ink);
+  --gog-button-variant-border: transparent;
+  --gog-button-variant-shadow: none;
+  --gog-button-variant-hover-bg: var(--gog-button-severity-wash);
+  --gog-button-variant-hover-color: var(--gog-text-color);
+  --gog-button-variant-hover-shadow: none;
+  --gog-button-variant-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
+    var(--gog-button-severity-ink);
+  --gog-button-variant-press-bg: var(--gog-button-severity-fill-press);
+  --gog-button-variant-press-color: var(--gog-button-severity-on-fill);
+  --gog-button-variant-spinner-color: var(--gog-button-severity-ink);
+}
+
 /* === Sizes === */
 .gog-btn--xsm {
   --gog-button-size-padding: var(--gog-button-xsm-padding);

package/styles/menu.css

@@ -1,114 +1,120 @@
-/*
- * The menu's visual block, in a **global** stylesheet rather than the component's own.
- *
- * `gogMenuItem` goes on a consumer's own `<button>`, declared in the consumer's template — so
- * the element carries *their* encapsulation attribute, and a rule written in
- * `menu.component.scss` never reaches it. That is the same reason `.gog-btn` lives in
- * `button.css` and `gogBadge` in `utilities.css`; the first version of this component had the
- * item rules scoped to the component, and every menu opened with plain browser buttons in it.
- *
- * The panel is here too, rather than split across two files: it is portaled into `<body>` for
- * `appendToBody`, and keeping the whole block in one place is what stops the two halves drifting.
- *
- * Nothing in this file is a literal: every colour, metric and duration resolves to a
- * `--gog-menu-*` token in theme.css, so a theme can restyle the menu without touching it.
- */
-/*
- * `fixed`, placed from the trigger's measured rect (see `measure()`). The panel always lives in
- * `<body>`, so nothing above it can clip it and there is no second positioning model to keep in
- * step.
- */
-.gog-menu {
-  position: fixed;
-  z-index: var(--gog-menu-z);
-  display: flex;
-  flex-direction: column;
-  gap: var(--gog-menu-gap);
-  min-width: var(--gog-menu-min-width);
-  max-width: var(--gog-menu-max-width);
-  /*
-   * Two caps, whichever is smaller: the room the component measured between the trigger and the
-   * viewport edge, and the theme's own `--gog-menu-max-height`. Resolved here rather than in the
-   * component because an inline `max-height` beats any stylesheet rule — writing the measured
-   * room straight onto the element is what used to make `--gog-menu-max-height` inert.
-   * `--gog-menu-available-height` is written by `gog-menu`; the `100vh` fallback covers the
-   * frame before the first measurement and server-side rendering, where there is no viewport
-   * to measure.
-   */
-  max-height: min(var(--gog-menu-available-height, 100vh), var(--gog-menu-max-height));
-  /* The panel masks its own corners; the scrolling happens in `.gog-menu__scroll` inside it. */
-  overflow: hidden;
-  padding: var(--gog-menu-padding);
-  border: var(--gog-menu-border-width) var(--gog-menu-border-style) var(--gog-menu-border-color);
-  border-radius: var(--gog-menu-radius);
-  background-color: var(--gog-menu-bg);
-  box-shadow: var(--gog-menu-shadow);
-  font-family: var(--gog-menu-font-family);
-}
-
-/*
- * `min-height: 0` overrides the flex-item default of `auto`, which would otherwise refuse to
- * shrink below the item list's full height and defeat the panel's max-height — the same note
- * `.gog-select__scroll` carries, for the same reason.
- */
-.gog-menu__scroll {
-  flex: 1;
-  min-height: 0;
-}
-
-.gog-menu__item {
-  display: flex;
-  align-items: center;
-  gap: var(--gog-menu-item-gap);
-  width: 100%;
-  padding: var(--gog-menu-item-padding);
-  border: 0;
-  border-radius: var(--gog-menu-item-radius);
-  background: transparent;
-  color: var(--gog-menu-item-color);
-  font-family: var(--gog-menu-font-family);
-  font-size: var(--gog-menu-item-font-size);
-  line-height: var(--gog-menu-item-line-height);
-  text-align: start;
-  cursor: pointer;
-  transition: background-color var(--gog-menu-transition-duration) var(--gog-easing);
-}
-
-/*
- * Doubled class on the `:focus-visible` and `:disabled` rules, for the reason spelled out in
- * `button.css`: a menu item is the consumer's own `<button>`, so an ordinary single-class rule
- * in their component stylesheet ties these at (0,2,0) and wins on source order. The `:hover`
- * selector is already (0,3,0) through its `:not(:disabled)` and is left alone.
- *
- * It matters more here than for a button. The arrow keys step over a disabled item, so an item
- * that has lost its disabled styling is one the pointer can still see as ordinary while the
- * keyboard refuses to reach it — the two input methods disagreeing about what exists.
- */
-.gog-menu__item:hover:not(:disabled),
-.gog-menu__item.gog-menu__item:focus-visible {
-  background-color: var(--gog-menu-item-hover-bg);
-  color: var(--gog-menu-item-hover-color);
-}
-
-.gog-menu__item.gog-menu__item:focus-visible {
-  outline: var(--gog-menu-focus-ring-width) solid var(--gog-menu-focus-ring);
-  outline-offset: calc(var(--gog-menu-focus-ring-width) * -1);
-}
-
-.gog-menu__item.gog-menu__item:disabled {
-  color: var(--gog-menu-item-disabled-color);
-  opacity: var(--gog-menu-item-disabled-opacity);
-  cursor: not-allowed;
-}
-
-/* An icon inside an item is decorative next to the label, and must not push it around. */
-.gog-menu__item gog-icon {
-  flex-shrink: 0;
-  font-size: var(--gog-menu-item-icon-size);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .gog-menu__item {
-    transition: none;
-  }
-}
+/*
+ * The menu's visual block, in a **global** stylesheet rather than the component's own.
+ *
+ * `gogMenuItem` goes on a consumer's own `<button>`, declared in the consumer's template — so
+ * the element carries *their* encapsulation attribute, and a rule written in
+ * `menu.component.scss` never reaches it. That is the same reason `.gog-btn` lives in
+ * `button.css` and `gogBadge` in `utilities.css`; the first version of this component had the
+ * item rules scoped to the component, and every menu opened with plain browser buttons in it.
+ *
+ * The panel is here too, rather than split across two files: it is portaled into `<body>` for
+ * `appendToBody`, and keeping the whole block in one place is what stops the two halves drifting.
+ *
+ * Nothing in this file is a literal: every colour, metric and duration resolves to a
+ * `--gog-menu-*` token in theme.css, so a theme can restyle the menu without touching it.
+ */
+/*
+ * `fixed`, placed from the trigger's measured rect (see `measure()`). The panel always lives in
+ * `<body>`, so nothing above it can clip it and there is no second positioning model to keep in
+ * step.
+ */
+.gog-menu {
+  position: fixed;
+  z-index: var(--gog-menu-z);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gog-menu-gap);
+  min-width: var(--gog-menu-min-width);
+  max-width: var(--gog-menu-max-width);
+  /*
+   * Two caps, whichever is smaller: the room the component measured between the trigger and the
+   * viewport edge, and the theme's own `--gog-menu-max-height`. Resolved here rather than in the
+   * component because an inline `max-height` beats any stylesheet rule — writing the measured
+   * room straight onto the element is what used to make `--gog-menu-max-height` inert.
+   * `--gog-menu-available-height` is written by `gog-menu`; the `100vh` fallback covers the
+   * frame before the first measurement and server-side rendering, where there is no viewport
+   * to measure.
+   */
+  max-height: min(var(--gog-menu-available-height, 100vh), var(--gog-menu-max-height));
+  /* The panel masks its own corners; the scrolling happens in `.gog-menu__scroll` inside it. */
+  overflow: hidden;
+  padding: var(--gog-menu-padding);
+  border: var(--gog-menu-border-width) var(--gog-menu-border-style) var(--gog-menu-border-color);
+  border-radius: var(--gog-menu-radius);
+  background-color: var(--gog-menu-bg);
+  box-shadow: var(--gog-menu-shadow);
+  font-family: var(--gog-menu-font-family);
+}
+
+/*
+ * `min-height: 0` overrides the flex-item default of `auto`, which would otherwise refuse to
+ * shrink below the item list's full height and defeat the panel's max-height — the same note
+ * `.gog-select__scroll` carries, for the same reason.
+ */
+.gog-menu__scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.gog-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--gog-menu-item-gap);
+  width: 100%;
+  padding: var(--gog-menu-item-padding);
+  border: 0;
+  border-radius: var(--gog-menu-item-radius);
+  background: transparent;
+  color: var(--gog-menu-item-color);
+  font-family: var(--gog-menu-font-family);
+  font-size: var(--gog-menu-item-font-size);
+  line-height: var(--gog-menu-item-line-height);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--gog-menu-transition-duration) var(--gog-easing);
+}
+
+/*
+ * Doubled class on the `:focus-visible` and `:disabled` rules, for the reason spelled out in
+ * `button.css`: a menu item is the consumer's own `<button>`, so an ordinary single-class rule
+ * in their component stylesheet ties these at (0,2,0) and wins on source order. The `:hover`
+ * selector is already (0,3,0) through its `:not(:disabled)` and is left alone.
+ *
+ * It matters more here than for a button. The arrow keys step over a disabled item, so an item
+ * that has lost its disabled styling is one the pointer can still see as ordinary while the
+ * keyboard refuses to reach it — the two input methods disagreeing about what exists.
+ */
+.gog-menu__item:hover:not(:disabled),
+.gog-menu__item.gog-menu__item:focus-visible {
+  background-color: var(--gog-menu-item-hover-bg);
+  color: var(--gog-menu-item-hover-color);
+}
+
+/* After the hover rule on purpose: both are (0,3,0), so source order decides, and a pointer is
+   hovering the item it presses. */
+.gog-menu__item:active:not(:disabled) {
+  background-color: var(--gog-menu-item-press-bg);
+}
+
+.gog-menu__item.gog-menu__item:focus-visible {
+  outline: var(--gog-menu-focus-ring-width) solid var(--gog-menu-focus-ring);
+  outline-offset: calc(var(--gog-menu-focus-ring-width) * -1);
+}
+
+.gog-menu__item.gog-menu__item:disabled {
+  color: var(--gog-menu-item-disabled-color);
+  opacity: var(--gog-menu-item-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* An icon inside an item is decorative next to the label, and must not push it around. */
+.gog-menu__item gog-icon {
+  flex-shrink: 0;
+  font-size: var(--gog-menu-item-icon-size);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gog-menu__item {
+    transition: none;
+  }
+}

package/styles/presets/bevel.css

@@ -1,82 +1,87 @@
-/*
- * `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;
-}
+/*
+ * `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;
+  /* Was #000080 — byte-identical to --gog-accent-color, which made it not a ramp at all.
+     Harmless while `dim` was only a field border; 21.9.0 made it the button's pressed fill, so a
+     pressed button in this theme painted itself the colour it already was. Darkened to a deeper
+     navy, which is as period-correct as the one it replaces. `check-tokens` rule I now fails on
+     any theme whose accent ramp collapses like this. */
+  --gog-accent-dim: #00005c;
+  --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;
+}