@conduction/docusaurus-preset 3.44.1 → 3.44.3

package/src/css/brand.css

@@ -139,7 +139,7 @@
    Common Ground yellow (reuses .cg-yellow), "+" in Nextcloud blue.
    Use through the <CommonGroundPlus/> primitive; the rules below back
    it (and any plain-HTML preview that wires up the same span shape). */
-.cg-plus-common { color: var(--c-blue-cobalt); }
+.cg-plus-common { color: var(--conduction-color-text-default); }
 .cg-plus-plus   { color: var(--conduction-color-brand-nextcloud); font-weight: inherit; }
 
 /* Buttons inherit brand-primary fill */
@@ -276,7 +276,7 @@ blockquote {
 .theme-doc-sidebar-container {
   width: 280px !important;
   border-right: 1px solid var(--c-cobalt-100) !important;
-  background: white;
+  background: var(--conduction-color-surface-card);
 }
 
 /* Menu list typography + spacing */
@@ -295,7 +295,7 @@ blockquote {
 /* Default link state: idle sentence-case cobalt-700 on white,
    4-px-radius hover tint cobalt-50. */
 .menu__link {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   padding: 4px 10px;
   border-radius: var(--radius-sm);
   margin-bottom: 2px;
@@ -303,8 +303,8 @@ blockquote {
   line-height: 1.4;
 }
 .menu__link:hover {
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
 }
 
 /* Active item: 2-px cobalt left border + cobalt-50 fill + cobalt-blue text.
@@ -312,8 +312,8 @@ blockquote {
    aligned with the idle siblings above and below. */
 .menu__link--active,
 .menu__link--active:hover {
-  background: var(--c-cobalt-50);
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-default);
   font-weight: 500;
   border-left: 2px solid var(--c-blue-cobalt);
   padding-left: 8px;
@@ -328,13 +328,13 @@ blockquote {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 500;
   margin: var(--space-4) 0 var(--space-2);
 }
 .menu__list-item-collapsible > .menu__link:hover {
   background: transparent;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 /* Caret on collapsible categories — desaturate to cobalt-300. */
@@ -356,27 +356,27 @@ blockquote {
   letter-spacing: -0.02em;
   line-height: 1.1;
   margin: 0 0 var(--space-4);
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .theme-doc-markdown h2 {
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -0.01em;
   margin: var(--space-8) 0 var(--space-3);
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .theme-doc-markdown h3 {
   font-size: 20px;
   font-weight: 600;
   margin: var(--space-6) 0 var(--space-3);
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .theme-doc-markdown p,
 .theme-doc-markdown ul,
 .theme-doc-markdown ol {
   font-size: 15px;
   line-height: 1.65;
-  color: var(--c-cobalt-800);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 var(--space-3);
 }
 .theme-doc-markdown ul,
@@ -387,7 +387,7 @@ blockquote {
   margin-bottom: var(--space-2);
 }
 .theme-doc-markdown strong {
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 /* Code-typeface breadcrumb above the H1. Docusaurus renders this
@@ -397,11 +397,11 @@ blockquote {
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: var(--space-4);
 }
 .theme-doc-breadcrumbs .breadcrumbs__link {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   background: transparent;
   padding: 0;
 }
@@ -410,7 +410,7 @@ blockquote {
   background: transparent;
 }
 .theme-doc-breadcrumbs .breadcrumbs__item--active .breadcrumbs__link {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   background: transparent;
 }
 

package/src/css/tokens.css

@@ -145,6 +145,23 @@
   --conduction-color-background-default: var(--c-white);
   --conduction-color-background-inverse: var(--c-blue-cobalt);
   --conduction-color-background-muted:   var(--c-cobalt-50);
+
+  /* Card and panel surfaces.
+     `background: white` and `background: var(--c-cobalt-50)` are written
+     straight into components about 280 times. Neither can flip, so in
+     dark mode the card stayed white while the text on it went light,
+     which is the second half of the dark-mode failure: correct ink,
+     invisible on a surface that never changed.
+
+     Lossless again: each is the value it replaces in light mode.
+     `-plate` is the exception that must NOT flip. Third-party logos are
+     designed against white and lose contrast on anything else, so the
+     brand rule is a white tile always. Naming it makes that deliberate
+     rather than an oversight the next sweep tries to "fix". */
+  --conduction-color-surface-card:   var(--c-white);
+  --conduction-color-surface-subtle: var(--c-cobalt-50);
+  --conduction-color-surface-sunken: var(--c-cobalt-100);
+  --conduction-color-surface-plate:  var(--c-white);
   /* The deep ground every Conduction site actually paints for dark
      panels, footers and dark mode. Distinct from -inverse, which is
      the cobalt hero panel. Both are real, so name them separately
@@ -159,6 +176,20 @@
   --conduction-color-text-accent:  var(--c-coral-600);
   --conduction-color-text-muted:   var(--c-cobalt-400);
 
+  /* Text, the two darker inks.
+     Components reach past the semantic layer for these two steps all the
+     time: cobalt-900 for a heading, cobalt-700 for body copy. A raw
+     palette value cannot flip, so in dark mode that ink stayed navy on a
+     navy ground. Measured 2026-09-19: 1,362 elements below 1.5:1 across
+     121 of the 163 pages on conduction.nl, the homepage h1 at exactly
+     1.00.
+
+     These two exist so that migration is lossless. Each resolves to the
+     identical value it replaces in light mode, so nothing moves on a
+     white ground, and only the dark block below has to be right. */
+  --conduction-color-text-strong:  var(--c-cobalt-900);
+  --conduction-color-text-body:    var(--c-cobalt-700);
+
   /* Link */
   --conduction-color-link-default: var(--c-blue-cobalt);
   --conduction-color-link-hover:   var(--c-coral-600);
@@ -423,6 +454,17 @@
   --conduction-color-background-muted:   var(--c-cobalt-800);
   --conduction-color-background-inverse: var(--c-cobalt-50);
 
+  /* Card and panel surfaces lift off the cobalt-900 ground rather than
+     sink into it, so a card still reads as a card. `-sunken` goes the
+     other way for the insets that were cobalt-100 on white.
+
+     `-plate` stays white on purpose: it is the tile third-party logos
+     sit on, and those are drawn for a white ground in either mode. */
+  --conduction-color-surface-card:   var(--c-cobalt-800);
+  --conduction-color-surface-subtle: var(--c-cobalt-800);
+  --conduction-color-surface-sunken: var(--c-cobalt-700);
+  --conduction-color-surface-plate:  var(--c-white);
+
   /* Primary ramp inverts: the light steps carry, the dark recede */
   --conduction-color-primary:          var(--c-cobalt-300);
   --conduction-color-primary-light:    var(--c-cobalt-200);
@@ -438,6 +480,12 @@
   --conduction-color-text-muted:   var(--c-cobalt-300);
   --conduction-color-text-accent:  var(--c-orange-knvb);
 
+  /* The two darker inks invert. White for a heading so it outranks body
+     copy the way cobalt-900 outranks cobalt-700 on a white ground, and
+     cobalt-100 for body at 13.85:1 on the cobalt-900 default. */
+  --conduction-color-text-strong:  var(--c-white);
+  --conduction-color-text-body:    var(--c-cobalt-100);
+
   /* Link */
   --conduction-color-link-default: var(--c-cobalt-300);
   --conduction-color-link-hover:   var(--c-orange-knvb);
@@ -499,6 +547,18 @@
     --conduction-color-text-muted:   var(--c-cobalt-300);
     --conduction-color-text-accent:  var(--c-orange-knvb);
 
+    /* Mirrors the [data-theme="dark"] block above. Both have to carry
+       every token: this one is what a visitor gets before the theme
+       script runs, and a token defined in only one of them reverts to
+       its light value for exactly the readers dark mode is for. */
+    --conduction-color-text-strong:  var(--c-white);
+    --conduction-color-text-body:    var(--c-cobalt-100);
+
+    --conduction-color-surface-card:   var(--c-cobalt-800);
+    --conduction-color-surface-subtle: var(--c-cobalt-800);
+    --conduction-color-surface-sunken: var(--c-cobalt-700);
+    --conduction-color-surface-plate:  var(--c-white);
+
     /* Link */
     --conduction-color-link-default: var(--c-cobalt-300);
     --conduction-color-link-hover:   var(--c-orange-knvb);

package/src/theme/ErrorPageContent/styles.module.css

@@ -12,7 +12,7 @@
 
 .page {
   padding: 0 0 96px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   min-height: calc(100vh - 200px);
 }
 
@@ -20,7 +20,7 @@
   position: relative;
   width: 100%;
   aspect-ratio: 800 / 360;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   overflow: hidden;
 }
 
@@ -122,14 +122,14 @@
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -0.015em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   line-height: 1.15;
   margin: 0 0 16px;
 }
 
 .lede {
   font-size: 17px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0 0 24px;
 }
@@ -157,11 +157,11 @@
 .tryButton:hover { background: var(--c-blue-cobalt); }
 
 .homeLink {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   font-size: 14px;
   text-decoration: none;
 }
-.homeLink:hover { color: var(--c-cobalt-900); text-decoration: underline; }
+.homeLink:hover { color: var(--conduction-color-text-strong); text-decoration: underline; }
 
 .details {
   border-top: 1px solid var(--c-cobalt-100);
@@ -173,7 +173,7 @@
   font-size: 12px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   list-style: none;
 }
 .details summary::-webkit-details-marker { display: none; }
@@ -189,8 +189,8 @@
   margin-top: 12px;
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
-  color: var(--c-cobalt-700);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-body);
+  background: var(--conduction-color-surface-subtle);
   padding: 16px;
   border-radius: var(--radius-md);
   overflow-x: auto;

package/src/theme/Navbar/styles.module.css

@@ -10,7 +10,7 @@
   justify-content: space-between;
   padding: 22px 56px;
   border-bottom: 1px solid var(--c-cobalt-100);
-  background: white;
+  background: var(--conduction-color-surface-card);
   position: sticky;
   top: 0;
   z-index: 100;
@@ -30,10 +30,10 @@
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -0.02em;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   text-decoration: none;
 }
-.wordmark:hover { color: var(--c-blue-cobalt); text-decoration: none; }
+.wordmark:hover { color: var(--conduction-color-text-default); text-decoration: none; }
 
 /* App-glyph hex next to the wordmark. Every product navbar shows the
    app's icon (sourced from navbar.logo); sized to match the wordmark's
@@ -58,7 +58,7 @@
    so "OpenRegister" reads as muted-"Open" + bold-"Register" and the
    eye lands on the noun, not the brand prefix. */
 .wordmarkPrefix {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 400;
 }
 
@@ -68,7 +68,7 @@
 }
 
 .link {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
@@ -90,7 +90,7 @@
 }
 
 .ghost {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
@@ -122,7 +122,7 @@
   font-size: 14px;
 }
 .localeWrapper :global(.navbar__link) {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   font-weight: 500;
   padding: 0 8px;
 }
@@ -155,14 +155,14 @@
   width: 34px;
   height: 34px;
   border-radius: var(--radius-sm);
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   font-size: 18px;
   text-decoration: none;
   transition: color 160ms ease, background 160ms ease;
 }
 .iconLink:hover {
-  color: var(--c-blue-cobalt);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-surface-subtle);
   text-decoration: none;
 }
 
@@ -186,8 +186,8 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.04em;
-  color: var(--c-cobalt-400);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-muted);
+  background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-pill);
   padding: 4px 10px;
   white-space: nowrap;
@@ -213,15 +213,15 @@
   padding: 0;
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   font-size: 22px;
   cursor: pointer;
   transition: color 160ms ease, background 160ms ease;
 }
 .menuToggle:hover {
-  color: var(--c-blue-cobalt);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-surface-subtle);
 }
 
 /**
@@ -242,7 +242,7 @@
   top: 100%;
   left: 0;
   right: 0;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border-bottom: 1px solid var(--c-cobalt-100);
   box-shadow: 0 12px 24px rgba(16, 42, 86, 0.10);
   max-height: 75vh;