gaufre: handle DSFR dark theme

packages/integration/postcss.config.mjs

@@ -10,6 +10,9 @@ export default {
           ? ["./src/html.tsx", "./src/components/**/*.tsx"]
           : ["./src/**/*.{js,jsx,ts,tsx,html}"],
       css: ["./src/**/*.css"],
+      safelist: {
+        greedy: [/lasuite/],
+      },
       variables: true,
     }),
     autoprefixer(),

packages/integration/src/dev/DarkTheme.tsx

@@ -0,0 +1,12 @@
+import { ReactNode, useEffect } from "react"
+
+export const DarkTheme = ({ children }: { children: ReactNode }) => {
+  useEffect(() => {
+    window.document.documentElement.setAttribute("data-fr-scheme", "dark")
+    return () => {
+      window.document.documentElement.removeAttribute("data-fr-scheme")
+    }
+  }, [])
+
+  return children
+}

packages/integration/src/dev/dev.css

@@ -2,3 +2,8 @@ body {
   margin: 0;
   padding: 0;
 }
+
+[data-fr-scheme="dark"] {
+  background-color: #161616;
+  color: #cecece;
+}

packages/integration/src/dev/dev.tsx

@@ -13,6 +13,7 @@ import { StylesStandalone } from "./StylesStandalone"
 import { StylesGaufre } from "./StylesGaufre"
 import { DsfrHeader } from "./DsfrHeader"
 import services from "../../../../website/src/data/services.json"
+import { DarkTheme } from "./DarkTheme"
 
 const serviceHomepage = ({
   id,
@@ -139,55 +140,59 @@ const routes = [
     path: "/gaufre-custom",
     label: "Gaufre (header custom)",
     component: (
-      <StylesGaufre>
+      <DarkTheme>
-        <div
+        <StylesGaufre>
-          style={{
+          <div
-            margin: "2rem auto",
+            data-fr-scheme="dark"
-            width: 800,
+            style={{
-            border: "1px solid #999",
+              margin: "2rem auto",
-            padding: "2rem",
+              width: 800,
-            borderRadius: "0.5rem",
+              border: "1px solid #999",
-          }}
+              padding: "2rem",
-        >
+              borderRadius: "0.5rem",
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            }}
-            <h1>À droite</h1>
+          >
-            <Gaufre />
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <h1>À droite</h1>
+              <Gaufre />
+            </div>
+            <div style={{ display: "flex" }}>
+              <h1>À gauche</h1>
+              <Gaufre />
+            </div>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero
+              posuere ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac
+              tempus dui. Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia
+              elit et massa faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida
+              consequat. Donec ac odio finibus, lobortis purus vel, consequat purus. Maecenas
+              convallis vel enim eu malesuada. Vestibulum elementum maximus massa, a porta erat
+              congue quis. Nunc neque quam, euismod et malesuada in, bibendum ac ex. Phasellus felis
+              elit, egestas a convallis nec, malesuada a est. Donec ac urna venenatis lorem aliquet
+              rhoncus in accumsan ipsum.
+            </p>
+            <p>
+              Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue
+              elementum, tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend,
+              sapien ligula egestas quam, quis aliquam ex turpis ut augue. Nullam a neque
+              consectetur, feugiat eros a, lacinia tortor. Proin imperdiet vehicula justo, eget
+              bibendum tortor gravida a. Pellentesque sit amet fermentum urna. Ut rutrum eros a
+              ligula dapibus pharetra. In porttitor arcu in euismod dictum. Aenean vestibulum mi et
+              dignissim rutrum. Phasellus ultrices ex justo, eu tincidunt metus efficitur non.
+              Curabitur ac lorem ornare, aliquet neque et, tristique elit. Donec quis turpis
+              sodales, interdum massa fermentum, dictum magna.
+            </p>
+            <p>
+              Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget
+              tellus ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur
+              adipiscing elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et
+              pharetra aliquet. Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus
+              ornare. Donec venenatis, lectus id faucibus tempus, sapien urna molestie augue, at
+              egestas enim lectus quis nisi.
+            </p>
           </div>
-          <div style={{ display: "flex" }}>
+        </StylesGaufre>
-            <h1>À gauche</h1>
+      </DarkTheme>
-            <Gaufre />
-          </div>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
-            ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac tempus
-            dui. Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia elit et
-            massa faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida consequat.
-            Donec ac odio finibus, lobortis purus vel, consequat purus. Maecenas convallis vel enim
-            eu malesuada. Vestibulum elementum maximus massa, a porta erat congue quis. Nunc neque
-            quam, euismod et malesuada in, bibendum ac ex. Phasellus felis elit, egestas a convallis
-            nec, malesuada a est. Donec ac urna venenatis lorem aliquet rhoncus in accumsan ipsum.
-          </p>
-          <p>
-            Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue elementum,
-            tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend, sapien ligula
-            egestas quam, quis aliquam ex turpis ut augue. Nullam a neque consectetur, feugiat eros
-            a, lacinia tortor. Proin imperdiet vehicula justo, eget bibendum tortor gravida a.
-            Pellentesque sit amet fermentum urna. Ut rutrum eros a ligula dapibus pharetra. In
-            porttitor arcu in euismod dictum. Aenean vestibulum mi et dignissim rutrum. Phasellus
-            ultrices ex justo, eu tincidunt metus efficitur non. Curabitur ac lorem ornare, aliquet
-            neque et, tristique elit. Donec quis turpis sodales, interdum massa fermentum, dictum
-            magna.
-          </p>
-          <p>
-            Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget
-            tellus ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur
-            adipiscing elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et
-            pharetra aliquet. Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus
-            ornare. Donec venenatis, lectus id faucibus tempus, sapien urna molestie augue, at
-            egestas enim lectus quis nisi.
-          </p>
-        </div>
-      </StylesGaufre>
     ),
   },
 ]

packages/integration/src/styles/gaufre.css

@@ -48,6 +48,11 @@
   padding-right: 0.5rem !important;
 }
 
+[data-fr-scheme="dark"] .lasuite-gaufre-btn--vanilla {
+  color: #8585f6 !important;
+  box-shadow: inset 0 0 0 1px #353535 !important;
+}
+
 .lasuite-gaufre-btn--vanilla::before {
   content: "" !important;
   flex: 0 0 auto !important;
@@ -67,6 +72,15 @@
   background-color: #f6f6f6 !important;
 }
 
+[data-fr-scheme="dark"] .lasuite-gaufre-btn--vanilla:hover,
+[data-fr-scheme="dark"] .lasuite-gaufre-btn--vanilla:focus-visible {
+  background-color: #343434 !important;
+}
+
 .lasuite-gaufre-btn--vanilla:active {
   background-color: #ededed !important;
 }
+
+[data-fr-scheme="dark"] .lasuite-gaufre-btn--vanilla:active {
+  background-color: #474747 !important;
+}

website/src/components/GaufrePage.astro

@@ -56,6 +56,10 @@ const { services } = Astro.props
           overflow: hidden !important;
         }
 
+        [data-fr-scheme="dark"] .lagaufre {
+          background-color: #8585f6 !important;
+        }
+
         .lagaufre-sr-only {
           position: absolute !important;
           width: 1px !important;
@@ -85,6 +89,10 @@ const { services } = Astro.props
           overflow: auto !important;
         }
 
+        [data-fr-scheme="dark"] .lagaufre-list {
+          background-color: #1e1e1e !important;
+        }
+
         .lagaufre-service {
           position: relative !important;
           display: flex !important;
@@ -123,6 +131,13 @@ const { services } = Astro.props
           border-bottom: 1px solid #8989cd !important;
         }
 
+        [data-fr-scheme="dark"] .lagaufre-service:hover,
+        [data-fr-scheme="dark"] .lagaufre-service:focus-within {
+          background-color: #2d2d2d !important;
+          border-top: 1px solid #8989cd !important;
+          border-bottom: 1px solid #8989cd !important;
+        }
+
         .lagaufre-service__icon {
           display: flex !important;
           align-items: center !important;
@@ -130,12 +145,27 @@ const { services } = Astro.props
           height: 40px !important;
         }
 
+        .lagaufre-service__icon img {
+          max-width: 100% !important;
+          height: auto !important;
+        }
+
+        [data-fr-scheme="dark"] .lagaufre-service__icon {
+          border-radius: 3px !important;
+          padding: 6px !important;
+          background-color: #fff !important;
+        }
+
         .lagaufre-service__name {
           margin-left: 1.5rem !important;
           text-decoration: none !important;
           color: #161616 !important;
         }
 
+        [data-fr-scheme="dark"] .lagaufre-service__name {
+          color: #cecece !important;
+        }
+
         .lagaufre-service__name:focus {
           outline: 0 !important;
         }