@conduction/docusaurus-preset 1.4.3 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/DetailHero/DetailHero.jsx

@@ -37,6 +37,11 @@
  * 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 (mydash).
+ *
+ * `background="cobalt"` paints the hero in a full-bleed cobalt panel
+ * with white type — the product-page identity used on the
+ * {slug}.conduction.nl landings. Default (undefined) keeps the
+ * existing on-cream rendering used by the connext apps detail pages.
  */
 
 import React from 'react';
@@ -61,12 +66,18 @@ export default function DetailHero({
   className,
   appId,
   downloads,
+  background,
 }) {
   const dlCount = downloads != null ? downloads : (appId ? downloadsForApp(appId) : 0);
   const hasIllustration = Boolean(illustration);
+  /* `background="cobalt"` flips the hero to a full-bleed cobalt panel
+     with white type — the product-page identity used on
+     {slug}.conduction.nl landings. Default (undefined) keeps the
+     existing on-cream rendering used by connext apps detail pages. */
+  const bgClass = background === 'cobalt' ? styles.bgCobalt : null;
 
   return (
-    <section className={[styles.head, hasIllustration && styles.withIllustration, className].filter(Boolean).join(' ')}>
+    <section className={[styles.head, hasIllustration && styles.withIllustration, bgClass, className].filter(Boolean).join(' ')}>
       {crumb && Array.isArray(crumb) && (
         <div className={styles.crumb}>
           {crumb.map((c, i) => {

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

@@ -8,8 +8,41 @@
   margin: 0 auto;
   padding: 24px 64px 56px;
   font-family: var(--conduction-typography-font-family-body);
+  position: relative;
 }
 
+/* Cobalt-background hero variant for product-page identity. The brand
+   panel needs to bleed full-width even though the section keeps its
+   1280px content max-width. Earlier attempt used a 100vw absolute
+   pseudo-element, but Docusaurus's <main>/<article> wrappers run
+   `overflow: hidden` on some routes which clipped the pseudo to the
+   container width (visible as a hard white strip on the right at
+   ≥1280px viewports). Switch to the box-shadow + clip-path bleed:
+   a single colour paints the element's box AND extends horizontally
+   via box-shadow rings, while clip-path: inset(0 -100vmax) trims the
+   top/bottom of those rings so the panel doesn't bleed vertically.
+   Robust against any ancestor overflow setting. */
+.bgCobalt {
+  padding-top: 56px;
+  padding-bottom: 64px;
+  color: white;
+  background: var(--c-blue-cobalt);
+  box-shadow: 0 0 0 100vmax var(--c-blue-cobalt);
+  clip-path: inset(0 -100vmax);
+}
+
+.bgCobalt .crumb,
+.bgCobalt .crumb a { color: var(--c-cobalt-100); }
+.bgCobalt .crumb a:hover { color: var(--c-orange-knvb); }
+.bgCobalt .sep { color: var(--c-cobalt-300); }
+.bgCobalt .badge { color: var(--c-cobalt-100); }
+.bgCobalt .versionBadge { color: var(--c-cobalt-200); }
+.bgCobalt .downloadsBadge { color: white; }
+.bgCobalt .title,
+.bgCobalt .titleText { color: white; }
+.bgCobalt .tagline { color: var(--c-cobalt-100); }
+.bgCobalt .tagline :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+
 .crumb {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;