@conduction/docusaurus-preset 3.44.1 → 3.44.3

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;
 }
 

package/src/components/LeafMock/LeafMock.module.css

@@ -29,7 +29,7 @@
   width: 100%;
   max-width: 360px;
   aspect-ratio: 4 / 3;
-  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);
@@ -47,13 +47,13 @@
   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;
 }
 
 .lm .empty {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-size: 13px;
 }
 
@@ -112,7 +112,7 @@
 .lm .phoneScreen {
   height: 100%;
   border-radius: 4px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   padding: 6px 4px;
   display: flex;
   flex-direction: column;
@@ -137,7 +137,7 @@
 .lm .day {
   aspect-ratio: 1;
   border-radius: 3px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
 }
 .lm .dayActive { background: var(--c-lavender-300); border-color: var(--c-lavender-500); }
@@ -146,7 +146,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  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);
@@ -169,7 +169,7 @@
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 /* ---- Mail leaf ---- */
@@ -188,7 +188,7 @@
   border-radius: var(--radius-sm);
   border: 1px solid transparent;
 }
-.lm .mailRowActive { background: var(--c-cobalt-50); border-color: var(--c-cobalt-100); }
+.lm .mailRowActive { background: var(--conduction-color-surface-subtle); border-color: var(--c-cobalt-100); }
 .lm .mailDot {
   width: 16px;
   height: 16px;

package/src/components/LockPick/LockPick.module.css

@@ -9,7 +9,7 @@
 .lp {
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
-  background: white;
+  background: var(--conduction-color-surface-card);
   padding: clamp(16px, 3vw, 28px);
   font-family: var(--conduction-typography-font-family-body);
 }
@@ -36,7 +36,7 @@
   margin: 0 0 6px;
   font-size: 20px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .lede {
@@ -44,7 +44,7 @@
   max-width: 58ch;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .hud {
@@ -58,8 +58,8 @@
 .hudPill {
   padding: 6px 10px;
   border-radius: var(--radius-pill);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
   white-space: nowrap;
 }
 
@@ -70,7 +70,7 @@
   gap: 24px;
   padding: 18px;
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   max-width: 620px;
 }
 
@@ -80,7 +80,7 @@
   height: 104px;
   flex-shrink: 0;
   border-radius: 50%;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 2px solid var(--c-cobalt-200);
   overflow: hidden;
 }
@@ -118,7 +118,7 @@
 .dialLabel {
   display: block;
   font-size: 12px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin-bottom: 6px;
 }
 
@@ -131,7 +131,7 @@
 .feel {
   margin: 10px 0 0;
   font-size: 13px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   min-height: 1.4em;
 }
 
@@ -145,7 +145,7 @@
 .pickLabel {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   white-space: nowrap;
 }
 
@@ -189,8 +189,8 @@
 .turn:focus-visible { outline: 2px solid var(--c-cobalt-900); outline-offset: 2px; }
 
 .start {
-  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);
@@ -200,13 +200,13 @@
   cursor: pointer;
   transition: border-color 120ms ease;
 }
-.start:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.start:hover { border-color: var(--c-blue-cobalt); color: var(--conduction-color-text-default); }
 .start:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
 
 .feedback {
   margin: 0;
   flex-basis: 100%;
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   min-height: 1.5em;
 }

package/src/components/ManagedCommonGround/ManagedCommonGround.module.css

@@ -8,7 +8,7 @@
 
 .footnote {
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   text-align: center;
   margin: var(--space-5) auto 0;
   max-width: 64ch;

package/src/components/McpToolShelf/McpToolShelf.module.css

@@ -28,9 +28,9 @@
 }
 .title {
   font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
-  line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+  line-height: 1.1; color: var(--conduction-color-text-strong); margin: 0 0 var(--space-3);
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--conduction-color-text-body); margin: 0; }
 
 .layout {
   display: grid;
@@ -52,7 +52,7 @@
 }
 
 .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-4) var(--space-5);
@@ -102,7 +102,7 @@
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.005em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   line-height: 1.3;
 }
@@ -111,8 +111,8 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   font-weight: 500;
-  color: var(--c-cobalt-700);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-body);
+  background: var(--conduction-color-surface-subtle);
   padding: 1px 6px;
   border-radius: var(--radius-sm);
   align-self: flex-start;
@@ -133,7 +133,7 @@
 .cardDesc {
   font-size: 14px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
 }
 
@@ -155,7 +155,7 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 .legendItem {
   display: inline-flex;

package/src/components/MockScene/MockScene.module.css

@@ -53,7 +53,7 @@
    reads as a heavy border. So inside .sceneItem the .wmFrame becomes
    white-on-white with a soft shadow, matching the SidebarMock chrome. */
 .am .sceneItem .wmFrame {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   padding: 12px;
   box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);

package/src/components/ModuleCard/ModuleCard.module.css

@@ -9,7 +9,7 @@
   grid-template-columns: 200px 1fr;
   gap: var(--space-6);
   padding: var(--space-5);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-lg);
   text-decoration: none;
   color: inherit;
@@ -18,7 +18,7 @@
   font-family: var(--conduction-typography-font-family-body);
 }
 .card:hover {
-  background: white;
+  background: var(--conduction-color-surface-card);
   box-shadow: var(--shadow-2);
   transform: translateY(-2px);
   text-decoration: none;
@@ -59,8 +59,8 @@
 .avatar {
   width: 32px;
   height: 32px;
-  background: var(--c-cobalt-100);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-sunken);
+  color: var(--conduction-color-text-body);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -79,7 +79,7 @@
 .metaAuthor {
   font-size: 13px;
   font-weight: 600;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   line-height: 1.3;
   overflow-wrap: anywhere;
 }
@@ -87,7 +87,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.04em;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.3;
   white-space: nowrap;
 }
@@ -96,7 +96,7 @@
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   line-height: 1.3;
   margin-top: 2px;
   font-weight: 600;
@@ -105,7 +105,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.04em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   line-height: 1.3;
   overflow-wrap: anywhere;
 }
@@ -125,14 +125,14 @@
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   line-height: 1.3;
 }
 
 .lede {
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
   line-height: 1.55;
 }
@@ -141,7 +141,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.04em;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.4;
   margin-top: 4px;
 }