@conduction/docusaurus-preset 3.44.1 → 3.44.3

package/src/components/SetupSteps/SetupSteps.module.css

@@ -20,7 +20,7 @@
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 var(--space-3);
   line-height: 1.2;
 }
@@ -28,7 +28,7 @@
 .lede {
   font-size: 16px;
   line-height: 1.6;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0 0 var(--space-5);
   max-width: 60ch;
 }
@@ -56,14 +56,14 @@
 .body {
   font-size: 14px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .body strong,
 .bodyTitle {
   display: block;
   margin-bottom: 4px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   font-size: 17px;
   font-weight: 600;
 }
@@ -73,10 +73,10 @@
 }
 
 .body code {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   padding: 1px 6px;
   border-radius: 3px;
   font-family: var(--conduction-typography-font-family-code);
   font-size: 13px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }

package/src/components/Showcase/Showcase.module.css

@@ -25,10 +25,10 @@
 .eyebrow .h { width: 10px; height: 12px; clip-path: var(--hex-pointy-top); background: var(--c-orange-knvb); }
 .title {
   font-size: 40px; 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);
   text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--conduction-color-text-body); margin: 0; max-width: 70ch; }
 
 /* ---------- Body ---------- */
 .body { display: grid; gap: var(--space-8); align-items: stretch; }
@@ -43,7 +43,7 @@
 }
 
 .item {
-  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);
@@ -75,11 +75,11 @@
   width: 32px;
   height: 36px;
   clip-path: var(--hex-pointy-top);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   transition: background 160ms, color 160ms;
 }
 .itemIcon svg {
@@ -98,10 +98,10 @@
 }
 .itemOpen .itemIcon { background: var(--c-blue-cobalt); color: white; }
 
-.itemTitle { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-cobalt-900); margin: 0; }
+.itemTitle { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--conduction-color-text-strong); margin: 0; }
 .chevron {
   font-family: var(--conduction-typography-font-family-code);
-  font-size: 22px; line-height: 1; color: var(--c-cobalt-400);
+  font-size: 22px; line-height: 1; color: var(--conduction-color-text-muted);
   width: 22px; text-align: center;
 }
 
@@ -109,11 +109,11 @@
   border-color: var(--c-blue-cobalt);
   box-shadow: var(--shadow-2);
 }
-.itemOpen .chevron { color: var(--c-blue-cobalt); }
-.itemOpen .itemTitle { color: var(--c-blue-cobalt); }
+.itemOpen .chevron { color: var(--conduction-color-text-default); }
+.itemOpen .itemTitle { color: var(--conduction-color-text-default); }
 
 .itemBody { display: flex; flex-direction: column; gap: var(--space-3); }
-.itemSummary { font-size: 14px; line-height: 1.55; color: var(--c-cobalt-700); margin: 0; }
+.itemSummary { font-size: 14px; line-height: 1.55; color: var(--conduction-color-text-body); margin: 0; }
 
 .cta {
   align-self: flex-start;
@@ -135,7 +135,7 @@
 
 /* ---------- Right panel ---------- */
 .panel {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-xl);
   padding: var(--space-8);
   display: flex;
@@ -160,7 +160,7 @@
   left: 50%;
   transform: translateX(-50%);
   clip-path: var(--hex-pointy-top);
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
   z-index: 0;
   pointer-events: none;
 }

package/src/components/SidebarMock/SidebarMock.module.css

@@ -31,7 +31,7 @@
    identically to its embedded twin, just clipped to the smFrame box.
    Width/height come from the .sb-size-* modifier on the same element. */
 .am .smFrame {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border-radius: var(--radius-md);
   border: 1px solid var(--c-cobalt-100);
   box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);
@@ -77,7 +77,7 @@
 /* Section break: thin horizontal rule between sub-sections. */
 .am .sb-body .smBreak {
   height: 1px;
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
   margin: 4px 0;
 }
 

package/src/components/SolutionCard/SolutionCard.module.css

@@ -8,7 +8,7 @@
 @media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 28px;
@@ -66,8 +66,8 @@
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--c-cobalt-700);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-body);
+  background: var(--conduction-color-surface-subtle);
   padding: 4px 10px;
   border-radius: var(--radius-pill);
 }
@@ -76,13 +76,13 @@
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
 }
 
 .outcome {
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0;
 }

package/src/components/StampRush/StampRush.module.css

@@ -10,7 +10,7 @@
 .rush {
   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);
 }
@@ -37,7 +37,7 @@
   margin: 0 0 6px;
   font-size: 20px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .lede {
@@ -45,7 +45,7 @@
   max-width: 52ch;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .hud {
@@ -60,8 +60,8 @@
 .hudLives {
   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;
 }
 
@@ -87,7 +87,7 @@
   padding: 10px;
   border: 1px dashed var(--c-cobalt-200);
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   cursor: pointer;
   font-family: inherit;
   text-align: center;
@@ -110,7 +110,7 @@
 
 .slotFull {
   border-style: solid;
-  background: white;
+  background: var(--conduction-color-surface-card);
   box-shadow: var(--shadow-3);
 }
 .slotReady { border-color: var(--c-mint-500); }
@@ -125,14 +125,14 @@
 .cardTitle {
   font-size: 13px;
   font-weight: 600;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   line-height: 1.25;
 }
 
 .cardNote {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .foot {
@@ -161,7 +161,7 @@
 .hint {
   margin: 0;
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   max-width: 48ch;
 }
 
@@ -178,10 +178,10 @@
   .flashBad  { animation: srBad 260ms ease-out; }
   @keyframes srGood {
     0%   { background: var(--c-mint-300); }
-    100% { background: var(--c-cobalt-50); }
+    100% { background: var(--conduction-color-surface-subtle); }
   }
   @keyframes srBad {
-    0%, 100% { background: var(--c-cobalt-50); transform: translateX(0); }
+    0%, 100% { background: var(--conduction-color-surface-subtle); transform: translateX(0); }
     25%  { background: var(--c-coral-300); transform: translateX(-3px); }
     75%  { transform: translateX(3px); }
   }

package/src/components/StatsStrip/StatsStrip.module.css

@@ -6,7 +6,7 @@
  */
 
 .strip {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-top: 1px solid var(--c-cobalt-100);
   border-bottom: 1px solid var(--c-cobalt-100);
   font-family: var(--conduction-typography-font-family-body);
@@ -41,13 +41,13 @@
   font-size: 42px;
   font-weight: 700;
   letter-spacing: -0.02em;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   line-height: 1;
 }
 
 .label {
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin-top: 8px;
   line-height: 1.4;
 }

package/src/components/ThemeSeamMock/ThemeSeamMock.module.css

@@ -131,7 +131,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/Troubleshooting/Troubleshooting.module.css

@@ -7,14 +7,14 @@
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 var(--space-3);
   line-height: 1.2;
 }
 
 .lede {
   font-size: 17px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
   margin: 0 0 var(--space-5);
 }
@@ -25,7 +25,7 @@
 }
 
 .item {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-left: 3px solid var(--c-orange-knvb);
   border-radius: var(--radius-md);
   padding: var(--space-4) var(--space-5);
@@ -57,7 +57,7 @@
 .symptomText {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 14px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   background: transparent;
   padding: 0;
   font-weight: 600;
@@ -66,17 +66,17 @@
 
 .body {
   font-size: 16px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
 }
 
 .body code {
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
   border-radius: 4px;
   padding: 1px 6px;
   font-family: var(--conduction-typography-font-family-code);
   font-size: 14px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .body p { margin: var(--space-2) 0 0; }

package/src/components/WidgetMock/WidgetMock.module.css

@@ -56,6 +56,6 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin: 0;
 }

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -42,10 +42,10 @@
 .eyebrow .h { width: 10px; height: 12px; clip-path: var(--hex-pointy-top); background: var(--c-orange-knvb); }
 .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);
   text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--conduction-color-text-body); margin: 0; max-width: 70ch; }
 
 .grid {
   display: grid;
@@ -129,11 +129,11 @@
   border: 1px solid var(--c-cobalt-200);
   border-radius: var(--radius-pill);
   background: transparent;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   cursor: pointer;
 }
 .ctrl:hover {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-color: var(--c-blue-cobalt);
 }
 .ctrl:focus-visible {
@@ -176,7 +176,7 @@
 }
 
 .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   overflow: hidden;
@@ -185,7 +185,7 @@
 }
 
 .panel {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   padding: var(--space-5);
   min-height: 180px;
   display: flex;
@@ -200,7 +200,7 @@
   font-size: 18px;
   font-weight: 600;
   letter-spacing: -0.005em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   padding: var(--space-4) var(--space-5) 0;
 }
@@ -208,7 +208,7 @@
 .cardDesc {
   font-size: 14px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
   padding: var(--space-2) var(--space-5) var(--space-5);
 }
@@ -224,7 +224,7 @@
   width: 100%;
   max-width: 280px;
   min-height: 124px;
-  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);
@@ -251,7 +251,7 @@
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .autoKpiBar {
   display: block;
@@ -311,7 +311,7 @@
   width: 86%;
   height: 4px;
   border-radius: 1px;
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
 }
 
 /* Donut gauge */

package/src/components/primitives/AuthorByline.module.css

@@ -16,8 +16,8 @@
   width: 22px;
   height: 25px;
   clip-path: var(--hex-pointy-top);
-  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;
@@ -41,10 +41,10 @@
 .date { }
 
 /* Tones for placement on different grounds. */
-.tone-default .name { color: var(--c-cobalt-700); }
+.tone-default .name { color: var(--conduction-color-text-body); }
 .tone-default .date,
 .tone-default .sep,
-.tone-default        { color: var(--c-cobalt-400); }
+.tone-default        { color: var(--conduction-color-text-muted); }
 
 .tone-on-dark .name  { color: white; }
 .tone-on-dark .date,
@@ -52,7 +52,7 @@
 .tone-on-dark        { color: var(--c-cobalt-200); }
 .tone-on-dark .avatar { background: var(--c-cobalt-700); color: white; }
 
-.tone-muted .name    { color: var(--c-cobalt-700); }
+.tone-muted .name    { color: var(--conduction-color-text-body); }
 .tone-muted .date,
 .tone-muted .sep,
 .tone-muted          { color: var(--c-cobalt-300); }

package/src/components/primitives/Button.module.css

@@ -50,20 +50,20 @@
 }
 
 .v-secondary {
-  background: white;
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-default);
   border-color: var(--c-cobalt-200);
 }
 .v-secondary:hover {
   border-color: var(--c-blue-cobalt);
-  color: var(--c-blue-cobalt);
-  background: white;
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-surface-card);
   text-decoration: none;
 }
 
 .v-ghost {
   background: transparent;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   padding-inline: 4px;
   font-size: 14px;
 }
@@ -75,15 +75,15 @@
 
 /* For use inside cobalt CTA panels (inverse surfaces) */
 .v-on-dark-primary {
-  background: white;
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-default);
   border-color: white;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 14px;
   font-weight: 600;
 }
-.v-on-dark-primary:hover { opacity: 0.92; color: var(--c-blue-cobalt); }
+.v-on-dark-primary:hover { opacity: 0.92; color: var(--conduction-color-text-default); }
 
 .v-on-dark-secondary {
   background: transparent;

package/src/components/primitives/Card.module.css

@@ -6,13 +6,13 @@
   position: relative;
   border-radius: var(--radius-lg);
   border: 1px solid var(--c-cobalt-100);
-  background: white;
+  background: var(--conduction-color-surface-card);
   transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
   font-family: var(--conduction-typography-font-family-body);
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
-.tone-surface { background: white; }
+.tone-surface { background: var(--conduction-color-surface-card); }
 .tone-ghost {
   background: transparent;
   border-style: dashed;

package/src/components/primitives/Eyebrow.module.css

@@ -11,7 +11,7 @@
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 24px;
 }
 

package/src/components/primitives/HexThumbnail.module.css

@@ -40,6 +40,6 @@
 .tone-cobalt      { background: var(--c-blue-cobalt); }
 .tone-cobalt-dark { background: var(--c-cobalt-700); }
 .tone-cobalt-deep { background: var(--c-cobalt-900); }
-.tone-cobalt-50   { background: var(--c-cobalt-50); color: var(--c-blue-cobalt); }
+.tone-cobalt-50   { background: var(--conduction-color-surface-subtle); color: var(--conduction-color-text-default); }
 .tone-mint        { background: var(--c-mint-500); }
 .tone-orange      { background: var(--c-orange-knvb); }

package/src/components/primitives/Pill.module.css

@@ -18,8 +18,8 @@
 }
 
 .tone-default {
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
 }
 
 .tone-solid {

package/src/components/primitives/Section.module.css

@@ -16,8 +16,8 @@
 }
 
 /* Background variants */
-.bg-default { background: white; }
-.bg-tinted  { background: var(--c-cobalt-50); border-top: 1px solid var(--c-cobalt-100); border-bottom: 1px solid var(--c-cobalt-100); }
+.bg-default { background: var(--conduction-color-surface-card); }
+.bg-tinted  { background: var(--conduction-color-surface-subtle); border-top: 1px solid var(--c-cobalt-100); border-bottom: 1px solid var(--c-cobalt-100); }
 .bg-inverse { background: var(--c-blue-cobalt); color: white; }
 
 /* Vertical-spacing variants */

package/src/components/primitives/SectionHead.module.css

@@ -25,7 +25,7 @@
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.02em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   /* Section titles run the full line before wrapping. The kit's base
      h1-h6 rule sets `text-wrap: balance`, which splits a title into
@@ -41,7 +41,7 @@
 
 .lede {
   font-size: 17px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0;
 }