@conduction/docusaurus-preset 3.44.2 → 3.45.0

package/src/components/PaintByTokens/PaintByTokens.module.css

@@ -12,7 +12,7 @@
 .pbt {
   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);
 }
@@ -39,7 +39,7 @@
   margin: 0 0 6px;
   font-size: 20px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .lede {
@@ -47,7 +47,7 @@
   max-width: 58ch;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .hud {
@@ -61,8 +61,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;
 }
 .hudLow { background: var(--c-orange-knvb); color: white; }
@@ -88,10 +88,10 @@
   padding: 7px 12px 7px 8px;
   border: 1px solid var(--c-cobalt-200);
   border-radius: var(--radius-pill);
-  background: white;
+  background: var(--conduction-color-surface-card);
   font-family: inherit;
   font-size: 12px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   cursor: pointer;
   transition: border-color 120ms ease;
 }
@@ -109,15 +109,15 @@
 
 .swatchOn {
   border-color: var(--c-blue-cobalt);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   font-weight: 600;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .swatchKey {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 10px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 .swatchName { white-space: nowrap; }
@@ -128,7 +128,7 @@
   max-width: 460px;
   padding: 10px;
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   min-height: 120px;
 }
 
@@ -136,10 +136,10 @@
   aspect-ratio: 1;
   border: 1px solid var(--c-cobalt-200);
   border-radius: var(--radius-sm);
-  background: white;
+  background: var(--conduction-color-surface-card);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 10px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   cursor: pointer;
   padding: 0;
   transition: background 120ms ease, border-color 120ms ease;
@@ -158,7 +158,7 @@
   grid-column: 1 / -1;
   margin: auto;
   font-size: 14px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   text-align: center;
 }
 
@@ -188,7 +188,7 @@
 .hint {
   margin: 0;
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   max-width: 52ch;
   min-height: 1.5em;
 }

package/src/components/PairCard/PairCard.module.css

@@ -8,7 +8,7 @@
 @media (max-width: 900px) { .row { 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: 20px;
@@ -50,5 +50,5 @@
   stroke: none;
 }
 
-.name { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--c-cobalt-900); }
-.why { font-size: 13px; color: var(--c-cobalt-700); line-height: 1.5; }
+.name { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--conduction-color-text-strong); }
+.why { font-size: 13px; color: var(--conduction-color-text-body); line-height: 1.5; }

package/src/components/PartnerCard/PartnerCard.module.css

@@ -13,7 +13,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;
@@ -60,12 +60,12 @@
   padding: 4px 9px;
   border-radius: var(--radius-pill);
   font-weight: 600;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
 }
 
 /* Service tier: gold pill on a white card. */
-.tier-service .tier { background: var(--c-gold-500); color: var(--c-cobalt-900); }
+.tier-service .tier { background: var(--c-gold-500); color: var(--conduction-color-text-strong); }
 
 /* Certified tier: cobalt-fill inverse card. The compound .card.tier-certified
    selector is deliberate — it lifts specificity above the plain .card rule
@@ -73,13 +73,13 @@
    after CSS-module bundlers reshuffle declaration order. Same for the
    nested colour rules below. */
 .card.tier-certified { background: var(--c-blue-cobalt); color: white; border-color: var(--c-blue-cobalt); }
-.tier-certified .tier { background: white; color: var(--c-blue-cobalt); }
+.tier-certified .tier { background: var(--conduction-color-surface-card); color: var(--conduction-color-text-default); }
 
 .avatar {
   display: inline-flex;
   align-items: center;
   align-self: flex-start;
-  background: white;
+  background: var(--conduction-color-surface-plate);
   padding: 8px 12px;
   border-radius: var(--radius-sm);
   height: 36px;
@@ -94,10 +94,10 @@
   display: block;
 }
 
-.name { font-size: 18px; font-weight: 700; color: var(--c-cobalt-900); }
+.name { font-size: 18px; font-weight: 700; color: var(--conduction-color-text-strong); }
 .tier-certified .name { color: white; }
 
-.summary { font-size: 14px; line-height: 1.55; color: var(--c-cobalt-700); }
+.summary { font-size: 14px; line-height: 1.55; color: var(--conduction-color-text-body); }
 .summary :global(.next-blue) { color: var(--c-nextcloud-blue); }
 .tier-certified .summary { color: rgba(255, 255, 255, 0.78); }
 .tier-certified .summary :global(.next-blue) { color: var(--c-nextcloud-cyan); }
@@ -116,8 +116,8 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   padding: 4px 10px;
   border-radius: var(--radius-pill);
   font-size: 12px;
@@ -138,14 +138,14 @@ a.appPill:hover {
   text-decoration: none;
 }
 .card.tier-certified a.appPill:hover {
-  background: white;
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-default);
 }
 .tier-certified .appPill { background: rgba(255, 255, 255, 0.12); color: white; }
 
 /* Become-a-partner CTA tile */
 .become {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px dashed var(--c-cobalt-300);
   box-shadow: none;
   align-items: flex-start;
@@ -159,7 +159,7 @@ a.appPill:hover {
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 8px;
 }
 .becomeTitle {
@@ -167,17 +167,17 @@ a.appPill:hover {
   font-weight: 700;
   letter-spacing: -0.01em;
   margin: 0 0 6px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .becomeBody {
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0 0 14px;
   max-width: 56ch;
 }
 .becomeArrow {
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   font-weight: 600;
   font-size: 14px;
 }
@@ -188,7 +188,7 @@ a.appPill:hover {
    name + why on the right; tier-coloured ring echoes the full
    card's tier styling. */
 .other {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 20px;
@@ -210,7 +210,7 @@ a.appPill:hover {
   width: 44px;
   height: 50px;
   clip-path: var(--hex-pointy-top);
-  background: white;
+  background: var(--conduction-color-surface-card);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -228,11 +228,11 @@ a.appPill:hover {
 .otherName {
   font-size: 15px;
   font-weight: 600;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin-bottom: 4px;
 }
 .otherWhy {
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.5;
 }

package/src/components/PartnerDirectory/PartnerDirectory.module.css

@@ -11,7 +11,7 @@
 
 .empty {
   font-size: 16px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   text-align: center;
   padding: 64px 0 32px;
   margin: 0;

package/src/components/PartnerSidecard/PartnerSidecard.module.css

@@ -17,7 +17,7 @@
 /* ---------- Tier card ---------- */
 
 .tierCard {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
@@ -51,7 +51,7 @@
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin-bottom: var(--space-2);
   font-weight: 600;
 }
@@ -61,7 +61,7 @@
 .tierBlurb {
   font-size: 13px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
 }
 .tier-certified .tierBlurb { color: rgba(255, 255, 255, 0.85); }
@@ -69,7 +69,7 @@
 /* ---------- Generic section ---------- */
 
 .section {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
@@ -81,7 +81,7 @@
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 600;
   margin: 0 0 var(--space-3);
 }
@@ -97,8 +97,8 @@
 .chip {
   display: inline-flex;
   align-items: center;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   padding: 4px 10px;
   border-radius: var(--radius-pill);
   font-size: 12px;
@@ -128,8 +128,8 @@ a.chip:hover {
   gap: var(--space-3);
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
   text-decoration: none;
   transition: background 160ms, color 160ms;
 }

package/src/components/PipeFit/PipeFit.module.css

@@ -10,7 +10,7 @@
 .pf {
   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: 62ch;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .hud {
@@ -59,8 +59,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: 4px;
   padding: 16px 12px;
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   max-width: 720px;
   overflow-x: auto;
 }
@@ -113,7 +113,7 @@
   height: 84px;
   border: 1px solid var(--c-cobalt-200);
   border-radius: var(--radius-md);
-  background: white;
+  background: var(--conduction-color-surface-card);
   cursor: pointer;
   padding: 0;
   transition: border-color 120ms ease, background 120ms ease;
@@ -123,7 +123,7 @@
 .piece:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
 
 .joined { border-color: var(--c-mint-500); }
-.gap { border-color: var(--c-orange-knvb); background: var(--c-cobalt-50); }
+.gap { border-color: var(--c-orange-knvb); background: var(--conduction-color-surface-subtle); }
 
 .mouth {
   position: absolute;
@@ -167,7 +167,7 @@
 .idle {
   margin: 0;
   font-size: 14px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 .foot {
@@ -197,7 +197,7 @@
   margin: 0;
   flex-basis: 100%;
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   max-width: 60ch;
   min-height: 1.4em;
 }

package/src/components/Pipeline/Pipeline.module.css

@@ -111,7 +111,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 10px;
   letter-spacing: 0.16em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 500;
 }
 
@@ -120,7 +120,7 @@
   font-size: 10px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 8px;
 }
 
@@ -137,12 +137,12 @@
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin-top: 16px;
 }
 .caption {
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.5;
   max-width: 26ch;
   margin: 6px auto 0;
@@ -152,7 +152,7 @@
    border, kit-identical. Each item gets a small rounded-square icon
    next to the label. */
 .end {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 18px 20px;
@@ -170,7 +170,7 @@
   font-size: 10px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 14px;
   font-weight: 500;
 }
@@ -188,7 +188,7 @@
   align-items: center;
   gap: 10px;
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .endIcon {

package/src/components/PlatformOverview/PlatformOverview.module.css

@@ -4,7 +4,7 @@
  */
 
 .section {
-  background: white;
+  background: var(--conduction-color-surface-card);
   /* Bottom padding deliberately lighter than top: the diagram's
      orange-dashed flow lines around Buildiq extend visually below
      the last text label, so the section already has ~80px of optical
@@ -42,7 +42,7 @@
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 16px;
 }
 .eyebrowHex {
@@ -58,7 +58,7 @@
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -0.02em;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   margin: 0;
   max-width: 16ch;
 }
@@ -70,7 +70,7 @@
 .lede {
   font-size: 16px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
   max-width: 50ch;
 }

package/src/components/Prerequisites/Prerequisites.module.css

@@ -10,7 +10,7 @@
   align-items: start;
   font-size: 16px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .bullet {
@@ -27,17 +27,17 @@
 }
 
 .body a {
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
-.body a:hover { color: var(--c-cobalt-900); }
+.body a:hover { color: var(--conduction-color-text-strong); }
 
 .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);
 }

package/src/components/PullQuote/PullQuote.module.css

@@ -11,14 +11,14 @@
 .quote {
   position: relative;
   border-left: 4px solid var(--c-orange-knvb);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   padding: var(--space-5) var(--space-6);
   margin: var(--space-7) 0;
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
   font-family: var(--conduction-typography-font-family-body);
   font-size: 22px;
   font-weight: 500;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   line-height: 1.4;
   font-style: italic;
 }
@@ -35,11 +35,11 @@
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .citeName {
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 /* Hero variant — larger, eyebrow hex, no italics. For one citable
@@ -60,7 +60,7 @@
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin-bottom: var(--space-4);
 }