@conduction/docusaurus-preset 3.44.2 → 3.45.0

package/src/components/FeaturedCard/FeaturedCard.module.css

@@ -25,6 +25,15 @@
 
 .body { min-width: 0; }
 
+/* The post's mini-game, across the whole card rather than in the
+   visual's column: the games are wide, and a card squeezed into half a
+   hero reads as an accident. Empty until the game is found. */
+.game {
+  grid-column: 1 / -1;
+  margin-top: var(--space-8);
+}
+.game:empty { display: none; }
+
 .eyebrow {
   display: inline-flex;
   align-items: center;
@@ -96,15 +105,15 @@
   align-items: center;
   gap: 8px;
   padding: 12px 22px;
-  background: white;
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-strong);
   font-weight: 600;
   font-size: 14px;
   border-radius: var(--radius-pill);
   text-decoration: none;
   transition: background 120ms ease;
 }
-.card:hover .cta { background: var(--c-cobalt-50); }
+.card:hover .cta { background: var(--conduction-color-surface-subtle); }
 
 .visual {
   display: flex;

package/src/components/FlowMock/FlowMock.module.css

@@ -30,7 +30,7 @@
   width: 100%;
   max-width: 720px;
   aspect-ratio: 16 / 10;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-3);
@@ -46,7 +46,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.06em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   text-transform: uppercase;
   text-align: center;
 }

package/src/components/GameModal/GameModal.module.css

@@ -32,10 +32,10 @@
 
 .panel {
   position: relative;
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   border-radius: var(--radius-xl);
-  padding: 40px 36px 32px;
+  padding: 44px 44px 36px;
   width: calc(100% - 48px);
   max-width: 520px;
   box-shadow: var(--shadow-3, 0 30px 80px -20px rgba(10, 23, 47, 0.4));
@@ -50,6 +50,10 @@
   gap: 0;
 }
 
+/* The roster sits under the headline and the share block rather than
+   against them. */
+.roster { margin-top: 28px; }
+
 @media (min-width: 880px) {
   .panel { max-width: 880px; }
   .body {
@@ -57,7 +61,7 @@
     grid-template-areas:
       'intro aside'
       'roster roster';
-    column-gap: 40px;
+    column-gap: 56px;
   }
   .intro { grid-area: intro; }
   .aside { grid-area: aside; }
@@ -68,8 +72,9 @@
   .grid {
     display: block;
     columns: 2;
-    column-gap: 32px;
+    column-gap: 56px;
   }
+  .roster { margin-top: 36px; }
   .gridItem,
   .gridItemFound { break-inside: avoid; }
 }
@@ -82,15 +87,15 @@
   height: 32px;
   border-radius: 50%;
   border: none;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   font-size: 20px;
   cursor: pointer;
   line-height: 1;
   font-family: inherit;
   transition: background 120ms ease;
 }
-.close:hover { background: var(--c-cobalt-100); }
+.close:hover { background: var(--conduction-color-surface-sunken); }
 
 .eyebrow {
   font-family: var(--conduction-typography-font-family-code);
@@ -106,13 +111,13 @@
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.02em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 8px;
 }
 
 .subtitle {
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0 0 16px;
 }
@@ -121,8 +126,8 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
   letter-spacing: 0.04em;
@@ -144,14 +149,14 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 8px;
 }
-.progressLabel strong { color: var(--c-cobalt-900); font-weight: 700; }
+.progressLabel strong { color: var(--conduction-color-text-strong); font-weight: 700; }
 
 .progressBar {
   height: 6px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -164,10 +169,10 @@
 .grid {
   list-style: none;
   padding: 0;
-  margin: 0 0 20px;
+  margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 7px;
 }
 .gridItem,
 .gridItemFound {
@@ -176,9 +181,9 @@
   gap: 10px;
   font-size: 13px;
   line-height: 1.5;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
-.gridItemFound { color: var(--c-cobalt-900); font-weight: 500; }
+.gridItemFound { color: var(--conduction-color-text-strong); font-weight: 500; }
 .gridHex {
   width: 10px;
   height: 12px;
@@ -193,17 +198,17 @@
 .gridScore {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   font-variant-numeric: tabular-nums;
 }
 
 .total {
   margin: 0;
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 .total strong {
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   font-family: var(--conduction-typography-font-family-code);
   font-variant-numeric: tabular-nums;
 }
@@ -213,9 +218,9 @@
    ====================================================================== */
 
 .share {
-  margin: 20px 0 0;
-  padding: 16px;
-  background: var(--c-cobalt-50);
+  margin: 24px 0 0;
+  padding: 20px;
+  background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-md);
 }
 
@@ -223,13 +228,13 @@
   margin: 0 0 4px;
   font-weight: 600;
   font-size: 14px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .shareHint {
   margin: 0 0 12px;
   font-size: 13px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 .shareButtons {
@@ -240,8 +245,8 @@
 }
 
 .shareBtn {
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   border: 1px solid var(--c-cobalt-200);
   padding: 8px 14px;
   border-radius: var(--radius-pill);
@@ -251,7 +256,7 @@
   font-family: inherit;
   transition: border-color 120ms ease, color 120ms ease;
 }
-.shareBtn:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.shareBtn:hover { border-color: var(--c-blue-cobalt); color: var(--conduction-color-text-default); }
 
 .shareStatus {
   font-size: 12px;
@@ -266,7 +271,7 @@
   gap: 8px;
   margin-top: 12px;
 }
-.instanceLabel { font-size: 12px; color: var(--c-cobalt-700); }
+.instanceLabel { font-size: 12px; color: var(--conduction-color-text-body); }
 .instanceInput {
   flex: 1;
   min-width: 160px;
@@ -275,8 +280,8 @@
   border-radius: var(--radius-md);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 13px;
-  color: var(--c-cobalt-900);
-  background: white;
+  color: var(--conduction-color-text-strong);
+  background: var(--conduction-color-surface-card);
 }
 .instanceInput:focus {
   outline: 2px solid var(--c-blue-cobalt);
@@ -287,13 +292,13 @@
 .prize {
   margin: 12px 0 0;
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
-.prize a { color: var(--c-blue-cobalt); }
+.prize a { color: var(--conduction-color-text-default); }
 
 .cta {
   font-size: 13px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin: 10px 0 0;
   font-style: italic;
 }
@@ -302,12 +307,12 @@
   display: flex;
   gap: 8px;
   justify-content: flex-end;
-  margin-top: 20px;
+  margin-top: 32px;
 }
 
 .btnSecondary {
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   border: 1px solid var(--c-cobalt-200);
   padding: 10px 18px;
   border-radius: var(--radius-md);
@@ -317,7 +322,7 @@
   font-family: inherit;
   transition: border-color 120ms ease;
 }
-.btnSecondary:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.btnSecondary:hover { border-color: var(--c-blue-cobalt); color: var(--conduction-color-text-default); }
 
 .btnPrimary {
   background: var(--c-blue-cobalt);

package/src/components/Hero/Hero.module.css

@@ -41,7 +41,7 @@
   letter-spacing: -0.025em;
   line-height: 1.02;
   margin: 0 0 24px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 @media (max-width: 1100px) { .title { font-size: 56px; } }
 @media (max-width: 700px)  { .title { font-size: 44px; } }
@@ -51,7 +51,7 @@
 
 .lede {
   font-size: 21px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.5;
   max-width: 52ch;
   margin: 0 0 32px;
@@ -72,12 +72,12 @@
   flex-direction: column;
   gap: 2px;
   font-size: 13px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-left: 8px;
   font-family: var(--conduction-typography-font-family-code);
 }
 .meta strong {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   font-family: var(--conduction-typography-font-family-body);
   font-size: 14px;
   font-weight: 600;

package/src/components/HexBackground/HexBackground.module.css

@@ -21,8 +21,8 @@
 }
 
 /* ---------- Tones ---------- */
-.tone-cobalt-100   .hexA { background: var(--c-cobalt-100); }
-.tone-cobalt-50    .hexA { background: var(--c-cobalt-50); }
+.tone-cobalt-100   .hexA { background: var(--conduction-color-surface-sunken); }
+.tone-cobalt-50    .hexA { background: var(--conduction-color-surface-subtle); }
 .tone-cobalt-700   .hexA { background: var(--c-cobalt-700); }
 .tone-mint-100     .hexA { background: var(--c-mint-300); }
 .tone-lavender-100 .hexA { background: var(--c-lavender-300); }
@@ -34,7 +34,7 @@
 /* The second hex (density=2) carries a darker tone of the same family
    for layered depth. */
 .tone-cobalt-100   .hexB { background: var(--c-cobalt-200); }
-.tone-cobalt-50    .hexB { background: var(--c-cobalt-100); }
+.tone-cobalt-50    .hexB { background: var(--conduction-color-surface-sunken); }
 .tone-cobalt-700   .hexB { background: var(--c-cobalt-900); }
 .tone-mint-100     .hexB { background: var(--c-mint-300); }
 .tone-lavender-100 .hexB { background: var(--c-lavender-300); }

package/src/components/HexCard/HexCard.module.css

@@ -23,7 +23,7 @@
     "body";
   row-gap: var(--space-3);
   align-items: start;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-6) var(--space-8) var(--space-10) var(--space-12);
@@ -76,7 +76,7 @@
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   line-height: 1.25;
 }
@@ -87,7 +87,7 @@
   z-index: 1;
   font-size: 16px;
   line-height: 1.6;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .body > p { margin: 0; }
@@ -124,7 +124,7 @@
 
 .deco {
   position: absolute;
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
   clip-path: var(--hex-pointy-top);
 }
 

package/src/components/HexNetwork/HexNetwork.module.css

@@ -38,8 +38,8 @@
    surface. Default is transparent: most heroes provide their own
    backdrop so the white hexes read against it. */
 .bg-transparent { background: transparent; padding: 0; }
-.bg-tinted      { background: var(--c-cobalt-50);    padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
-.bg-white       { background: white;                 padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
+.bg-tinted      { background: var(--conduction-color-surface-subtle);    padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
+.bg-white       { background: var(--conduction-color-surface-card);                 padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
 .bg-inverse     { background: var(--c-blue-cobalt);  padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
 
 .grid {
@@ -84,13 +84,13 @@
   width: var(--hex-cell-w);
   height: var(--hex-cell-h);
   clip-path: var(--hex-pointy-top);
-  background: white;
+  background: var(--conduction-color-surface-plate);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-.cell.empty .cellInner { background: white; opacity: 0.55; }
+.cell.empty .cellInner { background: var(--conduction-color-surface-plate); opacity: 0.55; }
 
 /* Highlighted center: solid cobalt fill, only ever applied to the
    brand-anchor cell. */
@@ -101,7 +101,7 @@
   max-width: 56%;
   max-height: 56%;
   object-fit: contain;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
 }
 .cell.center .logo {
   color: white;
@@ -114,7 +114,7 @@
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.04em;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   text-align: center;
   padding: 0 var(--space-3);
   word-break: break-word;

package/src/components/HiddenGame/HiddenGame.module.css

@@ -26,11 +26,11 @@
   cursor: pointer;
   transition: color 140ms ease;
 }
-.openerButton:hover { color: var(--c-blue-cobalt); }
+.openerButton:hover { color: var(--conduction-color-text-default); }
 .openerButton:focus-visible {
   outline: 2px solid var(--c-blue-cobalt);
   outline-offset: 2px;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
 }
 
 @media (prefers-reduced-motion: no-preference) {

package/src/components/HowSteps/HowSteps.module.css

@@ -9,7 +9,7 @@
 @media (max-width: 900px) { .row { grid-template-columns: minmax(0, 1fr); } }
 
 .step {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 32px;
@@ -40,12 +40,12 @@
   font-weight: 700;
   letter-spacing: -0.01em;
   margin: 0 0 10px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .body {
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
   margin: 0;
 }

package/src/components/IntegrationIcon/IntegrationIcon.module.css

@@ -17,7 +17,7 @@
   justify-content: center;
   flex-shrink: 0;
   line-height: 0;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 .am.ii svg {
   width: 100%;

package/src/components/KanbanMock/KanbanMock.module.css

@@ -54,7 +54,7 @@
   width: 100%;
   max-width: 720px;
   aspect-ratio: 16 / 10;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-3);
@@ -69,7 +69,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.06em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   text-transform: uppercase;
   text-align: center;
 }
@@ -102,7 +102,7 @@
 .km .kpi {
   box-sizing: border-box;
   height: 34px; /* fixed: part of the mover's --km-y derivation */
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-1);
@@ -131,7 +131,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   font-weight: 600;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   white-space: nowrap;
 }
 /* The crossfading value spans reuse .countBefore/.countAfter (same
@@ -149,7 +149,7 @@
 .km .kpiStill { display: inline-flex; align-items: center; }
 
 .km .col {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-md);
   padding: 10px;
@@ -186,8 +186,8 @@
   height: 16px;
   padding: 0 5px;
   border-radius: var(--radius-pill);
-  background: var(--c-cobalt-100);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-sunken);
+  color: var(--conduction-color-text-body);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 10px;
   font-weight: 600;
@@ -210,7 +210,7 @@
   /* Explicit border-box: --km-card-w describes the full card box, and
      not every consumer of this file ships a global box-sizing reset. */
   box-sizing: border-box;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-1);

package/src/components/LeafCard/LeafCard.module.css

@@ -5,7 +5,7 @@
 
 .card {
   display: block;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-md);
   padding: var(--space-5);
@@ -30,8 +30,8 @@ a.card:hover {
   width: 40px;
   height: 46px;
   clip-path: var(--hex-pointy-top);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,7 +54,7 @@ a.card:hover {
 .label {
   font-size: 18px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   line-height: 1.2;
 }
@@ -62,7 +62,7 @@ a.card:hover {
 .id {
   display: inline-block;
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-family: var(--conduction-typography-font-family-code);
   margin-top: 2px;
 }
@@ -80,8 +80,8 @@ a.card:hover {
 }
 
 .status-backend-ready .statusPill {
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
 }
 
 .status-stub .statusPill {
@@ -90,18 +90,18 @@ a.card:hover {
 }
 
 .status-external .statusPill {
-  background: var(--c-cobalt-100);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-sunken);
+  color: var(--conduction-color-text-strong);
 }
 
 .status-built-in .statusPill {
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
 }
 
 .description {
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0 0 var(--space-4);
   line-height: 1.55;
 }
@@ -115,7 +115,7 @@ a.card:hover {
 }
 
 .meta dt {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -125,12 +125,12 @@ a.card:hover {
 
 .meta dd {
   margin: 0;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   align-self: center;
 }
 
 .muted {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-style: italic;
 }