@conduction/docusaurus-preset 3.44.2 → 3.45.0

package/src/components/DetailHero/DetailHero.jsx

@@ -32,8 +32,13 @@
  *     icon={<svg>...</svg>}
  *     iconColor="var(--c-blue-cobalt)"
  *     illustration={<AppMock app="launchpad" />}
+ *     game={<HiddenGame id="stamp-rush" unlock={...}><StampRush /></HiddenGame>}
  *   />
  *
+ * `game` is the app's hidden mini-game. It renders across the full
+ * width of the hero, under the copy and the illustration, and shows
+ * nothing until the player finds it.
+ *
  * Each cta object also accepts `tone: "orange"` to flip the primary
  * (or secondary) variant to the KNVB-orange accent. Reserved for
  * product pages with an orange-leaning brand identity (launchpad).
@@ -95,6 +100,7 @@ export default function DetailHero({
   icon,
   iconColor,
   illustration,
+  game,
   className,
   appId,
   downloads,
@@ -393,6 +399,15 @@ export default function DetailHero({
         {hasIllustration && (
           <div className={styles.illustration}>{illustration}</div>
         )}
+
+        {/* The app's hidden mini-game, when it has one. It lives here
+            rather than further down the page because the way in is up
+            here too: you knock on the logo in this hero, and what you
+            unlocked should not be somewhere you have to scroll to find.
+            It spans both columns, so the game gets the width of the
+            hero instead of the width of the mock. While the game is
+            still hidden this renders nothing at all. */}
+        {game && <div className={styles.game}>{game}</div>}
       </div>
     </section>
   );

package/src/components/DetailHero/DetailHero.module.css

@@ -65,10 +65,10 @@
   font-size: 12px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 24px;
 }
-.crumb a { color: var(--c-cobalt-400); text-decoration: none; }
+.crumb a { color: var(--conduction-color-text-muted); text-decoration: none; }
 .crumb a:hover { color: var(--c-orange-knvb); }
 .sep { margin: 0 8px; color: var(--c-cobalt-200); }
 
@@ -110,16 +110,16 @@
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
-.versionBadge { color: var(--c-cobalt-400); }
+.versionBadge { color: var(--conduction-color-text-muted); }
 
 /* Meta-row chip. Shared by the downloads counter and the "View on
    GitHub" link; both are usually <a> elements pointing at the app's
    repository, so the chip carries link resets + a hover state. */
 .downloadsBadge {
-  color: var(--c-blue-cobalt);
-  background: var(--c-cobalt-50);
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-surface-subtle);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
   padding: 4px 10px;
@@ -128,8 +128,8 @@
   transition: background 120ms ease, border-color 120ms ease;
 }
 a.downloadsBadge:hover {
-  color: var(--c-blue-cobalt);
-  background: var(--c-cobalt-100);
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-surface-sunken);
   border-color: var(--c-cobalt-200);
 }
 .downloadIcon {
@@ -153,7 +153,7 @@ a.downloadsBadge:hover {
   letter-spacing: -0.025em;
   line-height: 1.05;
   margin: 0 0 20px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   display: flex;
   align-items: center;
   gap: 22px;
@@ -199,7 +199,7 @@ a.downloadsBadge:hover {
 .tagline {
   font-size: 22px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   max-width: 60ch;
   margin: 0 0 32px;
 }
@@ -211,7 +211,7 @@ a.downloadsBadge:hover {
 .intro {
   font-size: 17px;
   line-height: 1.6;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   max-width: 70ch;
   margin: 0 0 32px;
 }
@@ -234,6 +234,16 @@ a.downloadsBadge:hover {
   width: 100%;
 }
 .illustration > * { width: 100%; max-width: 560px; }
+
+/* The app's mini-game, across the whole hero rather than in the
+   illustration's column: the games are wide, and a card squeezed into
+   half a hero reads as an accident. Empty until the game is found, and
+   `:empty` keeps the margin off until then. */
+.game {
+  grid-column: 1 / -1;
+  margin-top: 40px;
+}
+.game:empty { display: none; }
 @media (max-width: 900px) {
   .illustration { justify-content: flex-start; }
 }

package/src/components/DiceDuel/DiceDuel.module.css

@@ -8,7 +8,7 @@
 .dd {
   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);
 }
@@ -35,7 +35,7 @@
   margin: 0 0 6px;
   font-size: 20px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .lede {
@@ -43,7 +43,7 @@
   max-width: 58ch;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .hud {
@@ -57,22 +57,22 @@
 .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;
 }
 
 .field {
   padding: 16px;
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   max-width: 560px;
 }
 
 .monster {
   margin: 0 0 8px;
   font-size: 15px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .wounds {
@@ -101,11 +101,11 @@
   height: 52px;
   border: 2px solid var(--c-cobalt-200);
   border-radius: var(--radius-md);
-  background: white;
+  background: var(--conduction-color-surface-card);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 20px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   cursor: pointer;
   transition: border-color 120ms ease, transform 120ms ease;
 }
@@ -124,7 +124,7 @@
   margin: 12px 0 0;
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   min-height: 1.2em;
 }
 
@@ -153,8 +153,8 @@
 .strike:focus-visible { outline: 2px solid var(--c-cobalt-900); outline-offset: 2px; }
 
 .push {
-  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);
@@ -169,8 +169,8 @@
 .push:focus-visible { outline: 2px solid var(--c-blue-cobalt); 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);
@@ -179,13 +179,13 @@
   font-size: 14px;
   cursor: pointer;
 }
-.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; }
 
 .hint {
   margin: 0;
   flex-basis: 100%;
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   min-height: 1.4em;
 }

package/src/components/DownloadPanel/DownloadPanel.module.css

@@ -26,7 +26,7 @@
    the panel's own 56px internal padding and grid layout are
    untouched. */
 .section {
-  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);
   margin-top: -200px;
@@ -99,7 +99,7 @@
 }
 
 .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   color: var(--conduction-color-text-default);
   border-radius: var(--radius-lg);
   padding: 36px;
@@ -114,14 +114,14 @@
   font-size: 20px;
   font-weight: 600;
   margin: 0;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   letter-spacing: -0.005em;
 }
 
 .cardBody {
   font-size: 14px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
 }
 

package/src/components/EmployeeCard/EmployeeCard.module.css

@@ -28,7 +28,7 @@
 
 /* Compact variant */
 .cardCompact {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 20px;
@@ -48,14 +48,14 @@
   color: inherit;
 }
 .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
-.name { font-size: 15px; font-weight: 600; color: var(--c-blue-cobalt); line-height: 1.2; }
-.role { font-family: var(--conduction-typography-font-family-code); font-size: 11px; color: var(--c-cobalt-400); letter-spacing: 0.05em; }
+.name { font-size: 15px; font-weight: 600; color: var(--conduction-color-text-default); line-height: 1.2; }
+.role { font-family: var(--conduction-typography-font-family-code); font-size: 11px; color: var(--conduction-color-text-muted); letter-spacing: 0.05em; }
 .linksRow { display: flex; gap: 8px; flex-shrink: 0; }
 .linksRow a {
   width: 26px; height: 26px;
   border-radius: var(--radius-sm);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   display: inline-flex; align-items: center; justify-content: center;
   transition: all 140ms ease;
 }
@@ -64,7 +64,7 @@
 
 /* Photo variant */
 .cardPhoto {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 28px 24px;
@@ -76,16 +76,16 @@
   box-shadow: var(--shadow-1);
   font-family: var(--conduction-typography-font-family-body);
 }
-.cardPhoto .name { font-size: 19px; font-weight: 700; color: var(--c-cobalt-900); }
-.cardPhoto .role { font-size: 13px; color: var(--c-cobalt-700); font-family: var(--conduction-typography-font-family-body); letter-spacing: 0; max-width: 28ch; }
-.bio { font-size: 14px; color: var(--c-cobalt-700); line-height: 1.6; margin: 8px 0 0; max-width: 36ch; }
+.cardPhoto .name { font-size: 19px; font-weight: 700; color: var(--conduction-color-text-strong); }
+.cardPhoto .role { font-size: 13px; color: var(--conduction-color-text-body); font-family: var(--conduction-typography-font-family-body); letter-spacing: 0; max-width: 28ch; }
+.bio { font-size: 14px; color: var(--conduction-color-text-body); line-height: 1.6; margin: 8px 0 0; max-width: 36ch; }
 
 .contacts { display: flex; gap: 10px; margin-top: 10px; }
 .contacts a {
   width: 32px; height: 32px;
   border-radius: var(--radius-sm);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   display: inline-flex; align-items: center; justify-content: center;
   transition: all 140ms ease;
 }
@@ -94,7 +94,7 @@
 
 /* Detail variant */
 .cardDetail {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: 32px;
@@ -112,23 +112,23 @@
   top: 0; right: 0;
   width: 140px; height: 160px;
   clip-path: var(--hex-pointy-top);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   transform: translate(40px, -50px);
   z-index: 0;
 }
 .cardDetail > * { position: relative; z-index: 1; }
-.cardDetail .name { font-size: 20px; font-weight: 700; color: var(--c-cobalt-900); }
+.cardDetail .name { font-size: 20px; font-weight: 700; color: var(--conduction-color-text-strong); }
 .cardDetail .role { font-size: 13px; }
 .appsLabel {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 8px;
 }
 .appsList { display: flex; gap: 6px; flex-wrap: wrap; }
 .appPill {
-  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;
@@ -137,10 +137,10 @@
 .contactsInline { display: flex; flex-wrap: wrap; gap: 16px; }
 .contactsInline a {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: 13px; color: var(--c-cobalt-700);
+  font-size: 13px; color: var(--conduction-color-text-body);
   text-decoration: none;
 }
-.contactsInline a:hover { color: var(--c-blue-cobalt); }
+.contactsInline a:hover { color: var(--conduction-color-text-default); }
 .contactsInline svg { width: 14px; height: 14px; fill: #000000; stroke: none; }
 
 /* ============================================================

package/src/components/ExternalAppShelf/ExternalAppShelf.module.css

@@ -13,7 +13,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);
@@ -60,7 +60,7 @@
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.005em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
 }
 .meta {
@@ -68,17 +68,17 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 .desc {
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 4px 0 0;
 }
 
 .arrow {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-size: 14px;
   margin-left: auto;
   transition: color 160ms, transform 160ms;

package/src/components/FAQ/FAQ.module.css

@@ -9,7 +9,7 @@
   font-weight: 700;
   letter-spacing: -0.02em;
   margin: 0 0 32px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .item {
@@ -25,7 +25,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   gap: var(--space-4);
 }
 
@@ -36,7 +36,7 @@
 .summary::after {
   content: "+";
   font-size: 22px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 400;
   transition: transform 200ms ease;
   flex-shrink: 0;
@@ -49,7 +49,7 @@
 
 .body {
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
   margin: 12px 0 0;
   max-width: 64ch;

package/src/components/FacetedFilters/FacetedFilters.module.css

@@ -20,7 +20,7 @@
   font-size: 11px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 500;
   margin: 0 0 10px;
 }
@@ -40,10 +40,10 @@
   gap: 10px;
   align-items: center;
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   padding: 4px 0;
 }
-.facetList li:hover { color: var(--c-blue-cobalt); }
+.facetList li:hover { color: var(--conduction-color-text-default); }
 
 .facetList input[type="checkbox"] {
   appearance: none;
@@ -53,7 +53,7 @@
   border-radius: 3px;
   cursor: pointer;
   position: relative;
-  background: white;
+  background: var(--conduction-color-surface-card);
   transition: all 120ms;
 }
 .facetList input[type="checkbox"]:hover { border-color: var(--c-blue-cobalt); }
@@ -80,7 +80,7 @@
 .count {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 .clearAll {
@@ -88,7 +88,7 @@
   align-items: center;
   gap: 6px;
   font-size: 13px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   text-decoration: none;
   margin-top: 8px;
   border: none;
@@ -105,8 +105,8 @@
   align-items: center;
   gap: 6px;
   padding: 5px 8px 5px 12px;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
   font-size: 13px;
   font-family: var(--conduction-typography-font-family-code);
   border-radius: var(--radius-pill);
@@ -119,8 +119,8 @@
   width: 18px;
   height: 18px;
   border: none;
-  background: var(--c-cobalt-100);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-sunken);
+  color: var(--conduction-color-text-body);
   border-radius: 50%;
   cursor: pointer;
   font-size: 14px;

package/src/components/FeatureGrid/FeatureGrid.module.css

@@ -16,7 +16,7 @@
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin: 24px 0 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--c-cobalt-100);
@@ -31,7 +31,7 @@
   gap: 12px;
   padding: 8px 0;
   font-size: 14px;
-  color: var(--c-cobalt-800);
+  color: var(--conduction-color-text-strong);
   cursor: help;
   outline: none;
   border-radius: var(--radius-sm);
@@ -39,7 +39,7 @@
 }
 .item:hover,
 .item:focus-visible {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   padding-left: 8px;
   padding-right: 8px;
   margin-left: -8px;
@@ -53,7 +53,7 @@
 }
 .itemLink:hover,
 .itemLink:focus-visible {
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   text-decoration: none;
 }
 .itemLink:hover .label,
@@ -95,12 +95,12 @@
   cursor: default;
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-md);
-  background: white;
+  background: var(--conduction-color-surface-card);
 }
 .itemCard.itemLink { cursor: pointer; }
 .itemCard:hover,
 .itemCard:focus-visible {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-color: var(--c-cobalt-200);
   padding: 14px 16px;
   margin: 0;
@@ -113,7 +113,7 @@
 .desc {
   font-size: 13px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin-left: 22px;
 }
 
@@ -161,7 +161,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/FeatureList/FeatureList.module.css

@@ -19,8 +19,8 @@
   width: 56px;
   height: 64px;
   clip-path: var(--hex-pointy-top);
-  background: var(--c-cobalt-50);
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-default);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -39,13 +39,13 @@
   font-weight: 700;
   letter-spacing: -0.01em;
   margin: 0 0 8px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .title :global(.next-blue) { color: var(--c-nextcloud-blue); }
 
 .body {
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
   margin: 0;
 }

package/src/components/FeaturedCard/FeaturedCard.jsx

@@ -16,6 +16,10 @@
  *
  *   <FeaturedCard
  *     href="/posts/install-opencatalogi"
+ *
+ * `game` puts a hidden mini-game across the bottom of the card. Only
+ * on a card without `href`: inside a link the card would swallow every
+ * click before the game saw it.
  *     eyebrow="Featured guide"
  *     title="Install OpenCatalogi in two minutes."
  *     lede="From app store to first register, no terminal required."
@@ -58,6 +62,7 @@ export default function FeaturedCard({
   locale,
   thumbnail,
   visual,
+  game,
   accent = 'orange',
   contentType,
   durationMinutes,
@@ -175,6 +180,18 @@ export default function FeaturedCard({
         ].join(' ')} />
         </>)}
       </div>
+
+      {/* The post's hidden mini-game, when it has one. It belongs in
+          the hero for the same reason the app games do: the way in is
+          up here, so what you unlocked should be too. It spans both
+          columns and shows nothing until the game is found.
+
+          Not rendered when the whole card is a link: a game inside an
+          anchor cannot be played, because the card swallows the click
+          before the game sees it. `game` and `href` do not go
+          together, and a card that links somewhere is a teaser, not a
+          place to play. */}
+      {game && !href && <div className={styles.game}>{game}</div>}
     </Tag>
   );
 }