@rathnasgala/theme 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Managed Gala static-site theme payload",
   "license": "MIT",
   "repository": {

package/payload/.gala/managed-files.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "themePackage": {
     "name": "@rathnasgala/theme",
-    "version": "0.0.19",
+    "version": "0.0.20",
     "availableDesignThemes": [
       "editorial"
     ],
@@ -25,7 +25,7 @@
     "lib/render-markdown.js": "40e6d6743b76de6c16d138475f188a4263967530c370d8b26a363f4df58c2caf",
     "lib/seo.js": "107de8804931945b8e73894877fc394d6b535a9d0d969a4ba5b68f2e136e0a17",
     "lib/share-targets.js": "458aff86fab2b62a364442cd8c612565c6e0b53eef2f20cb6237cc562b1e0731",
-    "lib/site-config.js": "da7d2dffab62c7346c9930494b85fc6ea735d4f50565bbd0454a04393f8cad96",
+    "lib/site-config.js": "3ed45daef0b7f79d94bf0c648c4fe7d8bf517534e4645a4b43d952dfc434ddc4",
     "package-lock.json": "c97a6a2f794aef083a39a8d2628eccc4a3c484e1c6225899b77ec1fb7c466d9e",
     "package.json": "4c60bea06f39aec755ac68caf8d8841c1d59d0f6121fad7f4396231ce14712dc",
     "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
@@ -33,9 +33,9 @@
     "src/_data/engagementSnapshot.js": "9217dacebfaf008f7a0ad67ff4e8d1fa8fba609a9dc7e3430c78c5b32024da0e",
     "src/_data/feedLinks.js": "06c93352ebd888acb431a1c9a8be6ecff757895468e9f2d336761038751c2d5e",
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
-    "src/_data/site.js": "d9c001f4cc12a34027dd92303530b11b5402d47613459bb997e22c4bcbea326d",
+    "src/_data/site.js": "6f9b754876ab7cfa93f02a38be2962edce8245423c354426a1465513caec7911",
     "src/_includes/components/ui.njk": "23eb647d8658868449ec6bb809e965a85302124a97639f94d5d28af72df56e4c",
-    "src/_includes/layouts/base.njk": "e73be30738535902599e1c060c11afbd128c86332913114f643dc56dea99fcba",
+    "src/_includes/layouts/base.njk": "638457f6c10f3ba866e8c70715678298096a668568e99456bef4167ebf1111e7",
     "src/_includes/layouts/post.njk": "1accd2832064ad19ee7bf18daf5fa1e60569f32c9b7a547934a6361f747d7eb7",
     "src/assets/embed-codepen.svg": "e9def697f38c466fb2b6652535c4c814e8cbbbefc6e052a69f335aeb27e8356b",
     "src/assets/embed-gist.svg": "fcd9bc2bf29a5c118492b853c0a01390b7539c38ddb985da3c2a6e2f246a39f7",
@@ -44,11 +44,11 @@
     "src/assets/engagement-comments.js": "b20d9268c9d908b4453a42188eaca25349f25534fb04a9293c9e688a982cd8f8",
     "src/assets/engagement-transport.js": "4f9ca0cd669bf8abc25f2909104e3e4b231657ef97d36a17d06e53454d711786",
     "src/assets/favicon.svg": "8615e3d96fe37ae9ed14afb1886e7c0e690eef5b10be66ca91cccfd085a74bb6",
-    "src/assets/interactions.js": "dd4e343505e528d89596ca67db679b52c989e022f93399193e4377db01fc8a08",
+    "src/assets/interactions.js": "4b65dcfcc23682616b15071d746da053bcc3a6bc5df36e11dc5698dd3348f314",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
     "src/assets/theme-mode.js": "944b29db11a577961a60ddcfa52f07ef2411f3f3631bea85bd79be16428c08be",
-    "src/assets/theme.css": "cdd41ddb670fb8c823b3490efa2a887d11dd6a1931afa0264deee53283b684d3",
+    "src/assets/theme.css": "300f6c2ffd7e63a948cfdb46b2d0f4abdbce5f5c4da7ee2cca5633d9795277c4",
     "src/assets/vendor/hooks.js": "ae6ec58592683ca64fa4d65b20d40b103df62a673bcc4712515cf165950b07f3",
     "src/assets/vendor/htm.js": "e4dac9bc40a6f2ec590413d787ae30bbcfdfcde4f28971ee65d9578271b7aad4",
     "src/assets/vendor/preact.js": "712517dd2a42c3c22b5ab0264ad7e9a2b1e8be6cf97fa00dbedd98203617e616",

package/payload/lib/site-config.js

@@ -13,13 +13,9 @@ const BUDGET_KEYS = Object.freeze([
  */
 const DESIGN_VALUES = Object.freeze({
   layout: Object.freeze(['article-first', 'portfolio']),
-  palette: Object.freeze(['default', 'ocean']),
-  typography: Object.freeze(['system', 'editorial', 'humanist', 'mono']),
-  density: Object.freeze(['compact', 'comfortable', 'spacious']),
-  spacing: Object.freeze(['compact', 'comfortable', 'spacious']),
-  radius: Object.freeze(['sharp', 'soft', 'round']),
-  motion: Object.freeze(['none', 'subtle', 'expressive']),
-  componentStyle: Object.freeze(['quiet', 'outlined', 'raised'])
+  palette: Object.freeze(['default', 'ocean', 'forest', 'plum']),
+  theme: Object.freeze(['editorial', 'modern', 'technical']),
+  colorMode: Object.freeze(['system', 'light', 'dark'])
 });
 const CONTACT_KEYS = Object.freeze([
   'enabled', 'websiteEnabled', 'phoneEnabled'
@@ -33,7 +29,14 @@ const CONTACT_KEYS = Object.freeze([
  */
 const REQUIRED_DESIGN = Object.freeze(['layout', 'palette']);
 
+/** A free colour, not a menu — but still a colour. */
+const ACCENT = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+
 function validateImplementedDesign(config) {
+  const accent = config?.design?.accent;
+  if (accent !== undefined && !(typeof accent === 'string' && ACCENT.test(accent.trim()))) {
+    throw new TypeError(`Unsupported design.accent: ${accent}`);
+  }
   if (config?.design == null) return;
   for (const [field, allowed] of Object.entries(DESIGN_VALUES)) {
     const value = config.design[field];

package/payload/src/_data/site.js

@@ -1,5 +1,16 @@
+import { accentPair } from '../../lib/accent.js';
 import { loadSiteConfiguration } from '../../lib/site-config.js';
 
 export default async function siteConfiguration() {
-  return loadSiteConfiguration();
+  const configuration = await loadSiteConfiguration();
+  /*
+   * The writer picks one colour; the page needs two, because the same colour cannot be readable on
+   * both a light and a dark ground. Derived here rather than in CSS so the contrast is exact — a
+   * `color-mix()` approximation can land under 4.5:1 and nobody would know until a reader could
+   * not read a link.
+   *
+   * An absent or unparseable value leaves this undefined, and the look's own accent stands.
+   */
+  const accent = accentPair(configuration?.design?.accent);
+  return accent ? { ...configuration, accent } : configuration;
 }

package/payload/src/_includes/layouts/base.njk

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette }}" data-typography="{{ site.design.typography }}" data-density="{{ site.design.density }}" data-spacing="{{ site.design.spacing }}" data-radius="{{ site.design.radius }}" data-motion="{{ site.design.motion }}" data-component-style="{{ site.design.componentStyle }}" data-mode="{{ site.design.colorMode | default('system') }}">
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme | default('modern') }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette | default('default') }}" data-mode="{{ site.design.colorMode | default('system') }}"{% if site.accent %} style="--gala-accent-light: {{ site.accent.light }}; --gala-accent-dark: {{ site.accent.dark }}"{% endif %}>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

package/payload/src/assets/interactions.js

@@ -392,6 +392,16 @@ if (sessionFrame) {
       else pending.reject(new Error(event.data.error?.code || 'ENGAGEMENT_WRITE_FAILED'));
       return;
     }
+    /* The frame is cross-origin, so its content height is not readable from here — it reports
+       its own, and the box is sized to it. Without this the account panel scrolled inside a fixed
+       box, clipping the first line of its own text. */
+    if (event.data?.type === 'gala-session-height') {
+      const height = Number(event.data.height);
+      if (Number.isFinite(height) && height > 0 && height < 2000) {
+        sessionFrame.style.height = `${Math.ceil(height)}px`;
+      }
+      return;
+    }
     if (event.data?.type !== 'gala-session') return;
     sessionUser = event.data.user && typeof event.data.user.id === 'string' ? event.data.user : null;
     const control = document.querySelector('[data-user-control]');

package/payload/src/assets/theme.css

@@ -18,7 +18,9 @@
   --gala-color-border: light-dark(#968e86, #6b645e);
   --gala-color-hairline: light-dark(#e8e3dd, #2a2724);
   --gala-color-border-strong: light-dark(#c9c2ba, #46413d);
-  --gala-color-accent: light-dark(#8a4b2a, #e8a87c);
+  --gala-color-accent: light-dark(
+    var(--gala-accent-light, #8a4b2a),
+    var(--gala-accent-dark, #e8a87c));
 
   /* Type. One scale, used everywhere, fluid between a phone and a desk. */
   --gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -48,7 +50,6 @@
   --gala-space-page: clamp(1.25rem, 5vw, 4.5rem);
   --gala-radius-control: 0.625rem;
   --gala-radius-surface: 1rem;
-  --gala-shadow-low: 0 1px 2px light-dark(rgb(26 24 23 / 6%), rgb(0 0 0 / 40%));
   --gala-shadow-high:
     0 1px 2px light-dark(rgb(26 24 23 / 5%), rgb(0 0 0 / 35%)),
     0 12px 28px -12px light-dark(rgb(26 24 23 / 18%), rgb(0 0 0 / 60%));
@@ -73,7 +74,7 @@
   --gala-color-border: #968e86;
   --gala-color-hairline: #e8e3dd;
   --gala-color-border-strong: #c9c2ba;
-  --gala-color-accent: #8a4b2a;
+  --gala-color-accent: var(--gala-accent-light, #8a4b2a);
 }
 :root[data-mode='dark'] {
   color-scheme: dark;
@@ -85,7 +86,7 @@
   --gala-color-border: #6b645e;
   --gala-color-hairline: #2a2724;
   --gala-color-border-strong: #46413d;
-  --gala-color-accent: #e8a87c;
+  --gala-color-accent: var(--gala-accent-dark, #e8a87c);
 }
 
 /* ---------------------------------------------------------------- palettes */
@@ -110,7 +111,7 @@
   --gala-color-border: #7d8d99;
   --gala-color-hairline: #dde7ee;
   --gala-color-border-strong: #bdccd7;
-  --gala-color-accent: #0f5f7a;
+  --gala-color-accent: var(--gala-accent-light, #0f5f7a);
 }
 :root[data-palette='ocean'][data-mode='dark'] {
   color-scheme: dark;
@@ -122,62 +123,150 @@
   --gala-color-border: #5f7d8c;
   --gala-color-hairline: #1d3644;
   --gala-color-border-strong: #33505f;
-  --gala-color-accent: #7fd0e8;
+  --gala-color-accent: var(--gala-accent-dark, #7fd0e8);
 }
 
-/* ---------------------------------------------------------------- typography
-   System stacks rather than a downloaded face: a publication must build and render with no call
-   to anyone, and a webfont is bytes on every reader's first paint. These are the good faces the
-   reader's machine already has. */
-:root[data-typography='editorial'] {
+
+/* Two more, because colour is the choice a writer actually wants to make — and the one that is
+   safe to offer, since a palette only swaps values every rule already reads and each is checked
+   for contrast in both modes. */
+:root[data-palette='forest'] {
+  --gala-color-background: light-dark(#fbfcfa, #101410);
+  --gala-color-surface: light-dark(#f0f4ee, #182018);
+  --gala-color-raised: light-dark(#ffffff, #1f271f);
+  --gala-color-text: light-dark(#18201a, #eef3ec);
+  --gala-color-muted: light-dark(#5b665d, #9aa89b);
+  --gala-color-border: light-dark(#849084, #5e685f);
+  --gala-color-hairline: light-dark(#e2e9df, #232b23);
+  --gala-color-border-strong: light-dark(#5b665d, #7d897e);
+  --gala-color-accent: light-dark(#2f6b3f, #8fd3a1);
+}
+:root[data-palette='forest'][data-mode='light'] {
+  color-scheme: light;
+  --gala-color-background: #fbfcfa;
+  --gala-color-surface: #f0f4ee;
+  --gala-color-raised: #ffffff;
+  --gala-color-text: #18201a;
+  --gala-color-muted: #5b665d;
+  --gala-color-border: #849084;
+  --gala-color-hairline: #e2e9df;
+  --gala-color-border-strong: #5b665d;
+  --gala-color-accent: var(--gala-accent-light, #2f6b3f);
+}
+:root[data-palette='forest'][data-mode='dark'] {
+  color-scheme: dark;
+  --gala-color-background: #101410;
+  --gala-color-surface: #182018;
+  --gala-color-raised: #1f271f;
+  --gala-color-text: #eef3ec;
+  --gala-color-muted: #9aa89b;
+  --gala-color-border: #5e685f;
+  --gala-color-hairline: #232b23;
+  --gala-color-border-strong: #7d897e;
+  --gala-color-accent: var(--gala-accent-dark, #8fd3a1);
+}
+:root[data-palette='plum'] {
+  --gala-color-background: light-dark(#fdfbfd, #141016);
+  --gala-color-surface: light-dark(#f5eff5, #1d1720);
+  --gala-color-raised: light-dark(#ffffff, #241d28);
+  --gala-color-text: light-dark(#1f1820, #f2ecf3);
+  --gala-color-muted: light-dark(#665c69, #a99dac);
+  --gala-color-border: light-dark(#948a95, #6b606d);
+  --gala-color-hairline: light-dark(#ebe2ec, #281f2b);
+  --gala-color-border-strong: light-dark(#665c69, #8b7f8d);
+  --gala-color-accent: light-dark(#7a3d76, #dda6d8);
+}
+:root[data-palette='plum'][data-mode='light'] {
+  color-scheme: light;
+  --gala-color-background: #fdfbfd;
+  --gala-color-surface: #f5eff5;
+  --gala-color-raised: #ffffff;
+  --gala-color-text: #1f1820;
+  --gala-color-muted: #665c69;
+  --gala-color-border: #948a95;
+  --gala-color-hairline: #ebe2ec;
+  --gala-color-border-strong: #665c69;
+  --gala-color-accent: var(--gala-accent-light, #7a3d76);
+}
+:root[data-palette='plum'][data-mode='dark'] {
+  color-scheme: dark;
+  --gala-color-background: #141016;
+  --gala-color-surface: #1d1720;
+  --gala-color-raised: #241d28;
+  --gala-color-text: #f2ecf3;
+  --gala-color-muted: #a99dac;
+  --gala-color-border: #6b606d;
+  --gala-color-hairline: #281f2b;
+  --gala-color-border-strong: #8b7f8d;
+  --gala-color-accent: var(--gala-accent-dark, #dda6d8);
+}
+
+/* ---------------------------------------------------------------- the looks
+ *
+ * Three, each designed whole.
+ *
+ * This replaced nine independent knobs — typeface, spacing, density, radius, motion, surfaces,
+ * palette — which a writer set one at a time, blind, and only saw combined after a deploy. Nine
+ * knobs is several hundred looks, and nobody had seen most of them: `mono` + `round` + `spacious`
+ * + `raised` produced monospace headings inside page-wide pills, and it was reachable in four
+ * clicks. A look is a set of decisions that agree with each other, so it is chosen as a set.
+ */
+
+/* Calm, serif, generous. For essays and long reading. */
+:root[data-theme='editorial'] {
   --gala-font-body: ui-serif, "Iowan Old Style", Charter, "Source Serif 4", Georgia, serif;
   --gala-font-display: var(--gala-font-body);
   --gala-weight-display: 600;
-}
-:root[data-typography='humanist'] {
-  --gala-font-body: Optima, Candara, "Gill Sans", "Trebuchet MS", sans-serif;
-  --gala-font-display: var(--gala-font-body);
-}
-:root[data-typography='mono'] {
-  --gala-font-display: var(--gala-font-mono);
-  --gala-weight-display: 560;
-  --gala-tracking-tight: -0.005em;
+  --gala-step: 1.1rem;
+  --gala-leading-body: 1.7;
+  --gala-radius-control: 0.5rem;
+  --gala-radius-surface: 0.75rem;
+  --gala-measure: 66ch;
+  --gala-surface-border: var(--gala-color-hairline);
+  --gala-surface-shadow: none;
 }
 
-/* ---------------------------------------------------------------- density */
-:root[data-density='compact'], :root[data-spacing='compact'] {
-  --gala-step: 0.8rem;
-  --gala-leading-body: 1.5;
-}
-:root[data-density='spacious'], :root[data-spacing='spacious'] {
-  --gala-step: 1.25rem;
-  --gala-leading-body: 1.75;
+/* Crisp, sans, a little tighter. The default, and the safe one. */
+:root[data-theme='modern'] {
+  --gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --gala-font-display: var(--gala-font-body);
+  --gala-weight-display: 640;
+  --gala-step: 1rem;
+  --gala-leading-body: 1.65;
+  --gala-radius-control: 0.625rem;
+  --gala-radius-surface: 1rem;
+  --gala-measure: 70ch;
+  --gala-surface-border: transparent;
+  --gala-surface-shadow: var(--gala-shadow-high);
 }
 
-/* ---------------------------------------------------------------- radius */
-:root[data-radius='sharp'] { --gala-radius-control: 0; --gala-radius-surface: 0; }
-:root[data-radius='round'] { --gala-radius-control: 999px; --gala-radius-surface: 1.5rem; }
-
-/* ---------------------------------------------------------------- motion
-   `none` is honoured for everyone; a reader who asks the operating system for less motion is
-   honoured regardless of what the publication chose. */
-:root[data-motion='none'] { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; }
-:root[data-motion='expressive'] { --gala-motion-base: 340ms; }
+/* For writing about code: mono for the furniture, never for the prose or the headings. */
+:root[data-theme='technical'] {
+  --gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --gala-font-display: var(--gala-font-body);
+  --gala-weight-display: 660;
+  --gala-tracking-tight: -0.022em;
+  --gala-step: 0.9rem;
+  --gala-leading-body: 1.6;
+  --gala-radius-control: 0.375rem;
+  --gala-radius-surface: 0.5rem;
+  --gala-measure: 74ch;
+  --gala-surface-border: var(--gala-color-border-strong);
+  --gala-surface-shadow: none;
+}
+/* Mono is an accent here — labels, counts, metadata — not a face to set a page in. */
+:root[data-theme='technical'] .gala-eyebrow,
+:root[data-theme='technical'] .gala-engagement dt,
+:root[data-theme='technical'] .gala-comment__meta time {
+  font-family: var(--gala-font-mono);
+}
+
+/* Motion is not a choice a writer has to make; it is a property of a considered page. */
 @media (prefers-reduced-motion: reduce) {
   :root { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; }
   *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
 }
 
-/* ---------------------------------------------------------------- surfaces
-   `quiet` sits on the page, `outlined` draws its edge, `raised` lifts. One variable decides,
-   so every card, dialog and chip agrees. */
-:root { --gala-surface-border: var(--gala-color-hairline); --gala-surface-shadow: var(--gala-shadow-low); }
-:root[data-component-style='outlined'] { --gala-surface-border: var(--gala-color-border-strong); }
-:root[data-component-style='raised'] {
-  --gala-surface-border: transparent;
-  --gala-surface-shadow: var(--gala-shadow-high);
-}
-
 :root[data-layout='portfolio'] { --gala-content-width: 82rem; }
 
 body {
@@ -300,11 +389,16 @@ blockquote {
 .gala-account-dialog iframe {
   display: block;
   inline-size: 100%;
-  min-block-size: 7rem;
+  /* Height is set from the frame's own report; this is only what it shows before that arrives. */
+  block-size: 7rem;
   border: 0;
+  /* The frame owns its layout and reports its size, so it never needs to scroll inside the box. */
+  overflow: hidden;
 }
 /* The close control belongs on the same line as the title, not floated above it. */
-.gala-dialog__close { float: inline-end; margin-inline-start: var(--gala-space-md); }
+.gala-dialog { display: grid; gap: var(--gala-space-sm); }
+.gala-dialog__close { justify-self: end; margin: 0; }
+.gala-dialog > h2 { margin-block: 0; }
 
 main,
 .gala-page-footer {
@@ -374,14 +468,11 @@ button:focus-visible {
   border-radius: var(--gala-radius-surface);
   box-shadow: var(--gala-surface-shadow);
 }
-[data-component-style='raised'] .gala-card { background: var(--gala-color-raised); }
 /* The one place the page moves of its own accord, and so the one place `motion` is legible:
    `subtle` is a short settle, `expressive` a longer one, `none` no movement at all. */
 .gala-card { transition: transform var(--gala-motion-base) var(--gala-ease),
                          box-shadow var(--gala-motion-base) var(--gala-ease); }
 .gala-card-index li:hover .gala-card { transform: translateY(-2px); box-shadow: var(--gala-shadow-high); }
-[data-motion='none'] .gala-card { transition: none; }
-[data-motion='none'] .gala-card-index li:hover .gala-card { transform: none; }
 .gala-stats-graph { min-block-size: var(--gala-widget-min-block-size); margin-inline: 0; }
 .gala-stats-graph svg { inline-size: 100%; block-size: 8rem; }
 .gala-stats-graph polyline { fill: none; stroke: var(--gala-color-accent); stroke-width: 2; }
@@ -398,8 +489,6 @@ button:focus-visible {
 .gala-share__fallback { inline-size: min(100%, 36rem); }
 .gala-engagement__placeholder { display: grid; min-block-size: var(--gala-widget-min-block-size); align-content: center; margin: 0; }
 .gala-engagement-profile > * { margin-block: 0 0.5rem; }
-.gala-comments { display: grid; gap: 1rem; padding-inline-start: 1.5rem; }
-.gala-comments li { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
 .gala-engagement-actions { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
 .gala-engagement-actions[hidden] { display: none; }
 /* Shown only when signing in interrupted something the reader had already decided to do, so it
@@ -582,7 +671,6 @@ button:focus-visible {
 }
 
 .gala-reaction-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
-.gala-comment-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
 .gala-engagement-actions { display: grid; gap: var(--gala-space-sm); justify-items: start; }
 .gala-engagement-actions > [data-follow-article] { inline-size: auto; }
 .gala-share { margin-block-start: var(--gala-space-lg); }