Merge pull request #20 from btravstack/design/refined-theme

Accent-driven theme (1.4.0) + demesne on the landing

Author: btravers

.changeset/accent-driven-theme.md

@@ -0,0 +1,11 @@
+---
+"@btravstack/theme": minor
+---
+
+Make the accent a single configurable knob. Every accent-derived value (deep, hover, soft, washes, hero glow, feature-icon chip, brand shades, light-mode AA text) now derives from `--accent` via `color-mix`, so a consumer site rebrands the whole theme with just:
+
+```css
+:root { --accent: #FF6600; }
+```
+
+The beetroot pink remains the default, so the btravstack org site is unchanged. `--text-accent` and `--accent-contrast` stay overridable for fine-tuning light-mode link contrast or ink-on-fill.

apps/website/.vitepress/theme/Landing.vue

@@ -54,6 +54,14 @@ const projects: Project[] = [
     install: "pnpm add unthrown",
     repo: "https://github.com/btravstack/unthrown", docs: "https://btravstack.github.io/unthrown/",
   },
+  {
+    tag: "Wiring", name: "demesne", pkg: "demesne",
+    logo: "/logos/demesne", repoFull: "btravstack/demesne", stars0: 0,
+    blurb: "Type-safe dependency injection. A container holds your services' domain and provides it — with requirements and construction errors tracked in the type system.",
+    points: ["Missing wiring is a compile error", "Construction errors in the result type", "No decorators, no reflect-metadata"],
+    install: "pnpm add demesne",
+    repo: "https://github.com/btravstack/demesne", docs: "https://btravstack.github.io/demesne/",
+  },
 ];
 
 const stars = reactive<Record<string, number>>(
@@ -88,7 +96,7 @@ onMounted(() => {
     <header class="btv-head">
       <div class="btv-head-inner">
         <a href="#top" class="btv-brand">
-          <svg viewBox="0 0 100 124" width="26" height="32" fill="none"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"/></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"/><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"/><path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"/><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"/><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"/></svg>
+          <svg viewBox="0 0 100 124" width="26" height="32" fill="none" aria-hidden="true" focusable="false"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"/></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"/><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"/><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"/><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"/></svg>
           <span class="btv-word"><span class="btv-pink">btrav</span><span>stack</span></span>
         </a>
         <nav class="btv-nav">
@@ -112,7 +120,7 @@ onMounted(() => {
       <div class="btv-glow"></div>
       <div class="btv-hero-inner">
         <div class="btv-float">
-          <svg viewBox="0 0 100 124" width="116" height="144" fill="none"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"/></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"/><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"/><path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"/><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"/><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"/></svg>
+          <svg viewBox="0 0 100 124" width="116" height="144" fill="none" aria-hidden="true" focusable="false"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"/></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"/><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"/><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"/><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"/></svg>
         </div>
         <h1 class="btv-title"><span class="btv-pink">btrav</span><span>stack</span></h1>
         <p class="btv-lead">An expressive, robust TypeScript backend.</p>
@@ -145,7 +153,7 @@ onMounted(() => {
 
     <section id="projects" class="btv-section">
       <p class="btv-eyebrow">The packages</p>
-      <h2 class="btv-h2" style="margin-bottom:30px">Three libraries, one stack.</h2>
+      <h2 class="btv-h2" style="margin-bottom:30px">Four libraries, one stack.</h2>
       <div class="grid-3 btv-projects">
         <div v-for="p in projects" :key="p.name" class="pcard btv-pcard">
           <div class="btv-pcard-top">
@@ -196,7 +204,7 @@ onMounted(() => {
       <div class="foot-grid btv-foot-grid">
         <div>
           <div class="btv-foot-brand">
-            <svg viewBox="0 0 100 124" width="24" height="30" fill="none"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"/></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"/><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"/><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"/><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"/></svg>
+            <svg viewBox="0 0 100 124" width="24" height="30" fill="none" aria-hidden="true" focusable="false"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"/></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"/><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"/><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"/><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"/></svg>
             <span class="btv-word btv-foot-word"><span class="btv-pink">btrav</span><span>stack</span></span>
           </div>
           <p class="btv-foot-tag">Type-safe building blocks for the TypeScript backend. Open source, MIT.</p>
@@ -206,12 +214,14 @@ onMounted(() => {
           <a class="foot-link" href="https://github.com/btravstack/amqp-contract" target="_blank" rel="noopener">amqp-contract</a>
           <a class="foot-link" href="https://github.com/btravstack/temporal-contract" target="_blank" rel="noopener">temporal-contract</a>
           <a class="foot-link" href="https://github.com/btravstack/unthrown" target="_blank" rel="noopener">unthrown</a>
+          <a class="foot-link" href="https://github.com/btravstack/demesne" target="_blank" rel="noopener">demesne</a>
         </div>
         <div class="btv-foot-col">
           <p class="btv-foot-h">Docs</p>
           <a class="foot-link" href="https://btravstack.github.io/amqp-contract/" target="_blank" rel="noopener">amqp-contract</a>
           <a class="foot-link" href="https://btravstack.github.io/temporal-contract/" target="_blank" rel="noopener">temporal-contract</a>
           <a class="foot-link" href="https://btravstack.github.io/unthrown/" target="_blank" rel="noopener">unthrown</a>
+          <a class="foot-link" href="https://btravstack.github.io/demesne/" target="_blank" rel="noopener">demesne</a>
         </div>
         <div class="btv-foot-col">
           <p class="btv-foot-h">Org</p>
@@ -328,8 +338,10 @@ onMounted(() => {
   .btv-prin-item:first-child { border-top: none; padding-top: 30px; }
 }
 
-/* Project cards */
-.btv-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
+/* Project cards — four across on wide screens ("four libraries, one stack"),
+   two up on tablet, one on mobile (the .grid-3 rule below handles ≤880). */
+.btv-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
+@media (max-width: 1080px) { .btv-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 .btv-pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 26px; box-shadow: var(--card-rest-shadow); }
 .pcard { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
 .pcard:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: var(--shadow-card); }

apps/website/public/logos/demesne-dark.svg

@@ -30,11 +30,12 @@
   --vp-c-border:  var(--border-2);
   --vp-c-gutter:  var(--border);
 
-  /* Brand — links/active use accent-as-TEXT (darkens on light for AA) */
+  /* Brand — links/active use accent-as-TEXT (darkens on light for AA).
+     All shades derive from --accent, so a site override rebrands everything. */
   --vp-c-brand-1:    var(--text-accent);
-  --vp-c-brand-2:    var(--bt-pink-soft);
+  --vp-c-brand-2:    var(--accent-soft);
   --vp-c-brand-3:    var(--accent-deep);
-  --vp-c-brand-soft: rgba(var(--accent-rgb), 0.16);
+  --vp-c-brand-soft: color-mix(in srgb, var(--accent) 16%, transparent);
   --vp-c-brand:      var(--text-accent); /* legacy alias */
 
   /* Inline code — accent-as-text so it stays readable on the (scheme-aware)
@@ -49,7 +50,7 @@
   --vp-button-brand-bg:           var(--accent);
   --vp-button-brand-text:         var(--accent-contrast);
   --vp-button-brand-border:       transparent;
-  --vp-button-brand-hover-bg:     var(--bt-magenta);
+  --vp-button-brand-hover-bg:     var(--accent-hover);
   --vp-button-brand-hover-text:   var(--accent-contrast);
   --vp-button-brand-hover-border: transparent;
   --vp-button-brand-active-bg:    var(--accent-deep);
@@ -60,14 +61,14 @@
   --vp-custom-block-tip-bg:     rgba(var(--green-rgb), 0.08);
   --vp-custom-block-tip-border: rgba(var(--green-rgb), 0.30);
   --vp-custom-block-tip-text:   var(--text-green);
-  --vp-custom-block-warning-bg:     rgba(var(--accent-rgb), 0.08);
+  --vp-custom-block-warning-bg:     color-mix(in srgb, var(--accent) 8%, transparent);
   --vp-custom-block-warning-border: var(--accent-line);
   --vp-custom-block-warning-text:   var(--text-accent);
 
-  /* Home hero: gradient name + beetroot glow behind the logo */
+  /* Home hero: gradient name + accent glow behind the logo */
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(120deg, var(--text-accent), var(--bt-pink-soft));
-  --vp-home-hero-image-background-image: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.30), transparent 72%);
+  --vp-home-hero-name-background: linear-gradient(120deg, var(--text-accent), var(--accent-soft));
+  --vp-home-hero-image-background-image: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
   --vp-home-hero-image-filter: blur(8px);
 }
 
@@ -81,7 +82,7 @@
    image on the right — a hard-centered glow there just floats, disconnected. */
 .VPHome { overflow-x: clip; }
 .VPHero .image-container { animation: btv-floaty 6s ease-in-out infinite; }
-.VPHero .image-src { filter: drop-shadow(0 18px 40px rgba(142, 26, 82, 0.4)); }
+.VPHero .image-src { filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--accent-deep) 45%, transparent)); }
 @keyframes btv-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
 
 /* Navbar logo: VitePress's 24px mark reads as a speck next to the wordmark.
@@ -116,7 +117,7 @@
 .VPFeature .icon {
   border-radius: var(--radius) !important;
   background: var(--vp-c-brand-soft) !important;
-  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
 }
 .VPFeature .title { letter-spacing: -0.3px; }
 

apps/website/public/logos/demesne-light.svg

@@ -43,29 +43,38 @@
   --muted: #AEA1BC;
   --faint: #7E7290;
 
-  /* ── Accent (brand FILL) ─────────────────────────────────────── */
-  --accent:          #E0589A;
-  --accent-deep:     #8E1A52;
+  /* ── Accent — the single brand knob (v1.4.0) ─────────────────────
+     Set ONE value, `--accent`, and the whole theme rebrands: the deep,
+     hover, soft and wash shades below all derive from it via color-mix,
+     so a consumer site needs only `:root { --accent: #FF6600 }`. The
+     beetroot pink here is the default (the btravstack org brand); the
+     docs sites override it with their own accent.
+     (Optional finer knobs: override --text-accent for a hand-tuned
+     light-mode AA link color, or --accent-contrast for ink on the fill.) */
+  --accent:          #E0589A;   /* ← the knob */
   --accent-contrast: #1a0c14;   /* readable text on an accent fill */
-  --accent-rgb:      224, 88, 154;
+  --accent-deep:     color-mix(in srgb, var(--accent), #000 42%);  /* deep root — active/press */
+  --accent-hover:    color-mix(in srgb, var(--accent), #000 18%);  /* button hover fill */
+  --accent-soft:     color-mix(in srgb, var(--accent) 62%, #fff);  /* highlight vein / brand-2 */
+  --accent-rgb:      224, 88, 154; /* legacy: prefer color-mix over rgba(var(--accent-rgb),…) */
   --green:           #46B86C;
   --green-rgb:       70, 184, 108;
 
-  /* ── Accent-as-TEXT (split from fill; light darkens these for AA) ─ */
-  --text-accent: #E0589A;
+  /* ── Accent-as-TEXT (split from fill; light darkens it for AA) ─── */
+  --text-accent: var(--accent);   /* on dark plum the accent reads fine as text */
   --text-green:  #46B86C;
 
-  /* Display accent — the brand pink as the LARGE display wordmark color in
+  /* Display accent — the accent as the LARGE display wordmark color in
      both schemes (large text only needs 3:1, so it can stay fully vibrant). */
-  --display-accent: #E0589A;
+  --display-accent: var(--accent);
 
   /* ── Glass (frosted sticky headers) ──────────────────────────── */
   --glass: rgba(21, 16, 28, 0.66);
 
   /* ── Accent washes / lines / code inset ──────────────────────── */
-  --accent-wash:   rgba(224, 88, 154, 0.10);
-  --accent-wash-2: rgba(224, 88, 154, 0.16);
-  --accent-line:   rgba(224, 88, 154, 0.25);
+  --accent-wash:   color-mix(in srgb, var(--accent) 10%, transparent);
+  --accent-wash-2: color-mix(in srgb, var(--accent) 16%, transparent);
+  --accent-line:   color-mix(in srgb, var(--accent) 25%, transparent);
   --code-bg:       rgba(0, 0, 0, 0.35);   /* inline code inset */
 
   /* ── Typography: families ────────────────────────────────────── */
@@ -120,7 +129,7 @@
 
   /* ── Shadows ─────────────────────────────────────────────────── */
   --shadow-card:   0 24px 60px -28px rgba(0, 0, 0, 0.8);
-  --shadow-accent: 0 12px 30px -10px rgba(224, 88, 154, 0.6);
+  --shadow-accent: 0 12px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent);
   --shadow-toast:  0 18px 40px -16px rgba(0, 0, 0, 0.8);
 
   /* ── Layout & motion ─────────────────────────────────────────── */
@@ -150,17 +159,19 @@
   --muted: #5E5159;   /* ~7.1:1 on white */
   --faint: #766678;   /* ~5.0:1 on white (was #978996, 3.1:1 — failed AA) */
 
-  --accent:      #E0589A;   /* fill unchanged (dark ink on top) */
-  --text-accent: #D6246F;   /* small labels / links — vivid raspberry, ~4.6:1 AA on white */
+  /* --accent (the FILL) is NOT overridden here — it stays the site's vibrant
+     accent in both schemes (dark ink sits on top). Only accent-as-TEXT darkens
+     for WCAG-AA on white. */
+  --text-accent: color-mix(in srgb, var(--accent), #000 22%); /* darkened accent, ~AA on white */
   --text-green:  #15683A;   /* ~5.2:1 on white — affirmative text */
 
-  --accent-wash:   rgba(224, 88, 154, 0.12);
-  --accent-wash-2: rgba(224, 88, 154, 0.16);
-  --accent-line:   rgba(142, 26, 82, 0.22);
+  --accent-wash:   color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-wash-2: color-mix(in srgb, var(--accent) 16%, transparent);
+  --accent-line:   color-mix(in srgb, var(--accent-deep) 40%, transparent);
   --glass:         rgba(255, 255, 255, 0.72);
-  --code-bg:       #F4EAF0;
+  --code-bg:       color-mix(in srgb, var(--accent) 8%, #fff);
 
-  --shadow-card:   0 18px 44px -26px rgba(142, 26, 82, 0.30);
-  --shadow-accent: 0 12px 26px -10px rgba(224, 88, 154, 0.45);
+  --shadow-card:   0 18px 44px -26px color-mix(in srgb, var(--accent-deep) 55%, transparent);
+  --shadow-accent: 0 12px 26px -10px color-mix(in srgb, var(--accent) 45%, transparent);
   --shadow-toast:  0 18px 40px -16px rgba(40, 16, 30, 0.18);
 }