@conduction/docusaurus-preset 3.44.2 → 3.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.44.2",
+  "version": "3.45.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/AgentTrace/AgentTrace.module.css

@@ -113,7 +113,7 @@
   display: inline-block;
   width: 8px;
   height: 14px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   vertical-align: -2px;
   /* Same delay-inheritance as .dots: blinking starts with its line. */
   animation: blink 1100ms steps(2, end) var(--at-d, 0ms) infinite backwards;

package/src/components/AiDisclosure/AiDisclosure.module.css

@@ -14,7 +14,7 @@
   gap: var(--space-4);
   padding: var(--space-3) var(--space-5);
   margin: 0 0 var(--space-6);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-md);
 }
@@ -57,7 +57,7 @@
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .link {

package/src/components/AppCrossLinks/AppCrossLinks.module.css

@@ -16,7 +16,7 @@
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
 }
 
@@ -40,7 +40,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-5);
@@ -78,7 +78,7 @@
   font-size: 10px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin: 0 0 2px;
   font-weight: 600;
 }
@@ -87,7 +87,7 @@
   font-size: 17px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   line-height: 1.2;
 }
@@ -114,8 +114,8 @@
   gap: var(--space-3);
   padding: 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 ease, color 160ms ease, transform 160ms ease;
 }
@@ -139,7 +139,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
 }
 .rowIcon svg {
   width: 22px;
@@ -166,13 +166,13 @@
 
 .rowHint {
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   line-height: 1.3;
 }
 
 .rowArrow {
   font-size: 16px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 600;
   flex-shrink: 0;
 }

package/src/components/AppMock/AppMock.module.css

@@ -37,7 +37,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);
@@ -55,7 +55,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;
 }
@@ -65,7 +65,7 @@
   align-items: center;
   justify-content: center;
   flex: 1;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-size: 13px;
 }
 
@@ -84,12 +84,12 @@
   padding: 0 10px;
   flex-shrink: 0;
 }
-.am .topbar .logo  { width: 16px; height: 12px; border-radius: 6px; background: white; }
+.am .topbar .logo  { width: 16px; height: 12px; border-radius: 6px; background: var(--conduction-color-surface-card); }
 .am .topbar .icon  { width: 8px; height: 8px; border-radius: 1px; background: rgba(255,255,255,0.7); }
 .am .topbar .spacer { flex: 1; }
 .am .topbar .pill   { width: 12px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.4); }
 .am .topbar .bell   { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.7); }
-.am .topbar .avatar { width: 10px; height: 10px; border-radius: 50%; background: white; }
+.am .topbar .avatar { width: 10px; height: 10px; border-radius: 50%; background: var(--conduction-color-surface-card); }
 
 /* Body wrapper — per-variant content fills this. */
 .am .body { flex: 1; display: flex; min-height: 0; min-width: 0; overflow: hidden; }
@@ -102,7 +102,7 @@
 .am .nav {
   width: 22%;
   min-width: 100px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-right: 1px solid var(--c-cobalt-100);
   padding: 10px 8px;
   display: flex;
@@ -124,7 +124,7 @@
   padding: 4px 5px;
   border-radius: 2px;
 }
-.am .nav .item.active { background: var(--c-cobalt-100); }
+.am .nav .item.active { background: var(--conduction-color-surface-sunken); }
 .am .nav .item .ico   { width: 8px; height: 8px; border-radius: 1px; background: var(--c-cobalt-400); flex-shrink: 0; }
 .am .nav .item.active .ico { background: var(--c-blue-cobalt); }
 .am .nav .item .l     { flex: 1; height: 4px; background: var(--c-cobalt-200); border-radius: 1px; }
@@ -137,7 +137,7 @@
 .am .detail {
   width: 26%;
   min-width: 130px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border-left: 1px solid var(--c-cobalt-100);
   padding: 12px 10px;
   display: flex;
@@ -160,7 +160,7 @@
 .am .detail.rich .sb-head .ico {
   width: 16px; height: 16px;
   border-radius: 50%;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-200);
   flex-shrink: 0;
 }
@@ -192,18 +192,18 @@
    .ico dot, tint it via currentColor so inactive tabs stay muted
    (cobalt-300) and active tabs read in full cobalt-700. */
 .am .detail.rich .sb-tab .ii { color: var(--c-cobalt-300); }
-.am .detail.rich .sb-tab.active .ii { color: var(--c-cobalt-700); }
+.am .detail.rich .sb-tab.active .ii { color: var(--conduction-color-text-body); }
 
 .am .detail.rich .sb-body { padding: 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
 .am .detail.rich .sb-label { height: 4px; background: var(--c-cobalt-700); width: 40%; border-radius: 1px; }
-.am .detail.rich .sb-input { height: 14px; background: white; border: 1px solid var(--c-cobalt-200); border-radius: 3px; }
+.am .detail.rich .sb-input { height: 14px; background: var(--conduction-color-surface-card); border: 1px solid var(--c-cobalt-200); border-radius: 3px; }
 .am .detail.rich .sb-filter { display: flex; flex-direction: column; gap: 4px; }
 .am .detail.rich .sb-filter .lbl  { height: 3px; background: var(--c-cobalt-400); width: 30%; border-radius: 1px; }
-.am .detail.rich .sb-filter .field { height: 12px; background: white; border: 1px solid var(--c-cobalt-200); border-radius: 2px; }
+.am .detail.rich .sb-filter .field { height: 12px; background: var(--conduction-color-surface-card); border: 1px solid var(--c-cobalt-200); border-radius: 2px; }
 
 /* Generic content panel — white card with rounded corners. */
 .am .panel {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
   padding: 10px 12px;
@@ -216,7 +216,7 @@
 .am .panel .head .title { height: 6px; background: var(--c-cobalt-700); border-radius: 1px; width: 30%; }
 
 /* Text-line bars used everywhere a row of placeholder text would go. */
-.am .row { height: 4px; background: var(--c-cobalt-100); border-radius: 1px; width: 100%; }
+.am .row { height: 4px; background: var(--conduction-color-surface-sunken); border-radius: 1px; width: 100%; }
 .am .row.short { width: 60%; }
 .am .row.dark  { background: var(--c-cobalt-300); }
 .am .row.head  { height: 6px; background: var(--c-cobalt-700); width: 40%; }
@@ -240,7 +240,7 @@
   flex: 1;
   display: flex; align-items: center; gap: 8px;
   padding: 8px 10px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-sm);
 }
 .am .kpi .ico { width: 16px; height: 18px; clip-path: var(--hex-pointy-top); background: var(--c-mint-300); flex-shrink: 0; }
@@ -276,7 +276,7 @@
   width: 56px;
   border-radius: 3px;
 }
-.am .actions .btn.ghost { background: white; border: 1px solid var(--c-cobalt-200); }
+.am .actions .btn.ghost { background: var(--conduction-color-surface-card); border: 1px solid var(--c-cobalt-200); }
 
 /* ======================================================================
    LaunchPad — full-bleed cobalt background with widget grid
@@ -314,8 +314,8 @@
   flex: 1;
   min-height: 50px;
 }
-.am .launchpad .tile.primary .icon { width: 22px; height: 25px; clip-path: var(--hex-pointy-top); background: white; }
-.am .launchpad .tile.primary .label { height: 5px; width: 50%; background: white; border-radius: 1px; }
+.am .launchpad .tile.primary .icon { width: 22px; height: 25px; clip-path: var(--hex-pointy-top); background: var(--conduction-color-surface-card); }
+.am .launchpad .tile.primary .label { height: 5px; width: 50%; background: var(--conduction-color-surface-card); border-radius: 1px; }
 .am .launchpad .tile.empty { background: rgba(255,255,255,0.55); flex: 0 0 26%; }
 .am .launchpad .tileHead {
   display: flex; align-items: center; gap: 5px;
@@ -383,7 +383,7 @@
 }
 .am .w-graph-donut .donut::after {
   content: ""; position: absolute; inset: 8px;
-  background: white; border-radius: 50%;
+  background: var(--conduction-color-surface-card); border-radius: 50%;
 }
 .am .w-graph-donut .legend { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
 .am .w-graph-donut .legend .row { display: flex; align-items: center; gap: 4px; }
@@ -415,7 +415,7 @@
   min-height: 40px;
 }
 .am .w-calendar .grid .day {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: 1px;
 }
 .am .w-calendar .grid .day.muted { background: transparent; }
@@ -445,7 +445,7 @@
   min-height: 50px;
 }
 .am .w-decks .columns .col {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: 2px;
   padding: 3px;
   display: flex; flex-direction: column;
@@ -453,7 +453,7 @@
 }
 .am .w-decks .columns .card {
   height: 8px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border-radius: 1px;
   border-left: 2px solid var(--c-blue-cobalt);
 }
@@ -514,7 +514,7 @@
   flex: 1;
   border: 1px dashed var(--c-cobalt-300);
   border-radius: 2px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   display: flex; align-items: center; justify-content: center;
   gap: 4px;
   min-height: 50px;
@@ -562,11 +562,11 @@
 .am .w-launcher .ico {
   width: 22px; height: 25px;
   clip-path: var(--hex-pointy-top);
-  background: white;
+  background: var(--conduction-color-surface-card);
 }
 .am .w-launcher .label {
   height: 5px; width: 50%;
-  background: white; border-radius: 1px;
+  background: var(--conduction-color-surface-card); border-radius: 1px;
 }
 .am .w-launcher.amber  { background: var(--c-orange-knvb); }
 .am .w-launcher.mint   { background: var(--c-mint-500); }
@@ -582,7 +582,7 @@
   min-height: 50px;
 }
 .am .w-subgrid .grid .cell {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: 2px;
   display: flex; align-items: center; justify-content: center;
 }
@@ -622,7 +622,7 @@
   min-height: 0;
 }
 .am .opencatalogi .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
   padding: 8px;
@@ -647,7 +647,7 @@
 .am .openconnector .stage .source,
 .am .openconnector .stage .target {
   width: 28%; height: 56px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-200);
   border-radius: var(--radius-sm);
   display: flex; flex-direction: column;
@@ -672,7 +672,7 @@
   align-items: center; justify-content: center;
   gap: 4px;
 }
-.am .openconnector .stage .conn .ico { width: 18px; height: 21px; clip-path: var(--hex-pointy-top); background: white; }
+.am .openconnector .stage .conn .ico { width: 18px; height: 21px; clip-path: var(--hex-pointy-top); background: var(--conduction-color-surface-card); }
 .am .openconnector .stage .conn .label { height: 4px; width: 60%; background: rgba(255,255,255,0.8); border-radius: 1px; }
 
 /* ======================================================================
@@ -701,7 +701,7 @@
   clip-path: var(--hex-pointy-top);
   background: var(--c-mint-500);
 }
-.am .procest .timeline .step.todo .h { background: var(--c-cobalt-100); }
+.am .procest .timeline .step.todo .h { background: var(--conduction-color-surface-sunken); }
 .am .procest .timeline .step.now  .h { background: var(--c-orange-knvb); }
 .am .procest .timeline .step .label { height: 3px; width: 60%; background: var(--c-cobalt-400); border-radius: 1px; }
 
@@ -734,7 +734,7 @@
 .am .portaliq .field {
   position: relative;
   height: 14px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-200);
   border-radius: 3px;
   overflow: hidden;
@@ -885,7 +885,7 @@
 
 .am .scholiq { --am-dur: 6s; }
 
-.am .scholiq .progress { height: 4px; background: var(--c-cobalt-100); border-radius: 2px; }
+.am .scholiq .progress { height: 4px; background: var(--conduction-color-surface-sunken); border-radius: 2px; }
 .am .scholiq .progressFill {
   height: 4px;
   background: var(--c-forest-500);
@@ -1165,7 +1165,7 @@
   align-items: center;
   gap: 4px;
   padding: 3px 4px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-200);
   border-radius: 2px;
   opacity: 0;
@@ -1291,7 +1291,7 @@
   align-items: center;
   gap: 3px;
   padding: 0 5px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-200);
   border-radius: 999px;
   animation: amOcFocus var(--am-dur) linear infinite;
@@ -1414,7 +1414,7 @@
   animation: amPcGhost var(--am-dur) linear infinite both;
 }
 .am .procest .timeline .step .ghost.ghostNow  { background: var(--c-orange-knvb); }
-.am .procest .timeline .step .ghost.ghostTodo { background: var(--c-cobalt-100); }
+.am .procest .timeline .step .ghost.ghostTodo { background: var(--conduction-color-surface-sunken); }
 @keyframes amPcGhost {
   0%, 30%   { opacity: 1; }
   40%, 92%  { opacity: 0; }
@@ -1491,7 +1491,7 @@
 .am .decidesk .tallyRow .track {
   flex: 1;
   height: 6px;
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
   border-radius: 2px;
   position: relative;
 }
@@ -1754,7 +1754,7 @@
   align-items: center;
   gap: 4px;
   padding: 3px 4px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-200);
   border-radius: 2px;
   opacity: 0;
@@ -1771,7 +1771,7 @@
 }
 .am .zaak .zkNew .stage { animation: amZkStage var(--am-dur) linear infinite both; }
 @keyframes amZkStage {
-  0%, 42%   { background: var(--c-cobalt-100); transform: scale(1); }
+  0%, 42%   { background: var(--conduction-color-surface-sunken); transform: scale(1); }
   47%       { background: var(--c-lavender-300); transform: scale(1.3); }
   52%, 100% { background: var(--c-lavender-300); transform: scale(1); }
 }
@@ -1824,7 +1824,7 @@
   width: 58%;
   height: 18px;
   border-radius: 2px 8px 8px 8px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
 }
 .am .hermiq .bubble.agent.tall { width: 64%; height: 24px; }
@@ -1834,7 +1834,7 @@
   align-items: center;
   gap: 2px;
   padding: 3px 6px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
   border-radius: 2px 8px 8px 8px;
   opacity: 0;
@@ -1892,15 +1892,15 @@
 }
 .am .hermiq .chip.chip2 { animation: amHqChip2 var(--am-dur) linear infinite both; }
 @keyframes amHqChip2 {
-  0%, 36%   { background: var(--c-cobalt-100); }
+  0%, 36%   { background: var(--conduction-color-surface-sunken); }
   40%, 93%  { background: var(--c-cobalt-300); }
-  98%, 100% { background: var(--c-cobalt-100); }
+  98%, 100% { background: var(--conduction-color-surface-sunken); }
 }
 .am .hermiq .chip.chip3 { animation: amHqChip3 var(--am-dur) linear infinite both; }
 @keyframes amHqChip3 {
-  0%, 42%   { background: var(--c-cobalt-100); }
+  0%, 42%   { background: var(--conduction-color-surface-sunken); }
   46%, 93%  { background: var(--c-cobalt-300); }
-  98%, 100% { background: var(--c-cobalt-100); }
+  98%, 100% { background: var(--conduction-color-surface-sunken); }
 }
 /* Approval chip — appears orange (pending, via the shared beta pill
    tokens), holds for the human moment, ticks mint on approval. */
@@ -1927,7 +1927,7 @@
 .am .hermiq .promptField {
   flex: 1;
   height: 16px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-200);
   border-radius: 8px;
 }
@@ -1950,7 +1950,7 @@
 .am .openbuild .tplSource { animation: amObTpl var(--am-dur) linear infinite; }
 @keyframes amObTpl {
   0%, 6%    { background: transparent; }
-  10%, 22%  { background: var(--c-cobalt-50); }
+  10%, 22%  { background: var(--conduction-color-surface-subtle); }
   28%, 100% { background: transparent; }
 }
 .am .openbuild .buildGhost {

package/src/components/AppsGrid/AppsGrid.module.css

@@ -14,8 +14,8 @@
 .chip {
   padding: 7px 16px;
   border-radius: var(--radius-pill);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   font-size: 14px;
   font-weight: 500;
   border: 1px solid transparent;
@@ -23,7 +23,7 @@
   font-family: inherit;
   transition: background 140ms ease, color 140ms ease;
 }
-.chip:hover { background: var(--c-cobalt-100); }
+.chip:hover { background: var(--conduction-color-surface-sunken); }
 .chipActive {
   background: var(--c-blue-cobalt);
   color: white;
@@ -41,6 +41,6 @@
 .empty {
   margin: 32px 0;
   font-size: 14px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   text-align: center;
 }

package/src/components/AppsPreview/AppsPreview.module.css

@@ -13,7 +13,7 @@
   margin: 0 auto;
   padding: 96px 64px;
   font-family: var(--conduction-typography-font-family-body);
-  background: white;
+  background: var(--conduction-color-surface-card);
 }
 @media (max-width: 900px) {
   .section { padding: 64px 24px; }
@@ -33,7 +33,7 @@
    Two-column grid: icon hex on the left, name + tagline on the right,
    meta row spans the full width at the bottom. */
 .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 28px;
@@ -81,13 +81,13 @@
   font-size: 20px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   grid-column: 2;
 }
 
 .tagline {
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.5;
   grid-column: 2;
 }
@@ -111,13 +111,13 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .ver {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 /* "Browse all" link */
@@ -126,7 +126,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   font-weight: 600;
   font-size: 15px;
   text-decoration: none;