feat: neutral theme -- option to override DSFR (#281)

Co-authored-by: Erica Delagnier <[email protected]>
SocialGouv · Oct 26, 2023 · 727f1ff · 727f1ff
1 parent feb01b5
commit 727f1ff
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/report/www/pages/_app.tsx b/report/www/pages/_app.tsx
@@ -13,6 +13,7 @@ import { HeaderSite } from "../src/components/HeaderSite";
 import { FooterSite } from "../src/components/FooterSite";
 
 import "../src/custom.css";
+import "../src/overrideDSFR.css"
 
 const dashlordConfig: DashlordConfig = require("../src/config.json");
 
@@ -31,7 +32,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     init({ url: MATOMO_URL, siteId: "" + MATOMO_SITE_ID });
   }, []);
   return (
-    <div>
+    <div className={(dashlordConfig.marianne ? "" : "nonGovernementalWebsite")}>
       <Head>
         <meta charSet="utf-8" lang="FR-fr" />
         <meta

diff --git a/report/www/src/overrideDSFR.css b/report/www/src/overrideDSFR.css
@@ -0,0 +1,45 @@
+:root {
+    --background-default-green-non-france: rgb(217, 238, 225);
+    --main-green-non-france: rgb(4, 170, 109);
+    --lighter-green-non-france: rgb(76, 167, 114);
+
+  }
+
+.nonGovernementalWebsite {
+    /* most crucial change, remove use of the Marianne protected font */
+    font-family: Helvetica, Arial, sans-serif;
+
+    /* optionnal change to ensure a distinct identity */
+    .fr-nav__btn[aria-current], .fr-nav__link[aria-current] {
+        color: var(--text-action-high-grey);
+        font-weight: bold;
+    }
+
+    .fr-nav__link[aria-current]::before {
+        background-color: var( --main-green-non-france);
+    }
+
+    .fr-footer {
+        box-shadow: var(--main-green-non-france) 0px -2px 0px 0px, rgb(229, 229, 229) 0px -1px 0px 0px inset;
+    }
+
+    .fr-callout {
+        box-shadow: var(--background-default-green-non-france) 4px 0px 0px 0px inset
+    }
+
+    .fr-btn {
+        background-color: var(--main-green-non-france);
+        &:hover {
+            background-color: var(--lighter-green-non-france);
+        }
+    }
+
+    .fr-nav__btn[aria-expanded=true] {
+        --hover:var(--main-green-non-france);
+        --active:var(--lighter-green-non-france);
+        background-color:var(--background-default-green-non-france);
+        color:var(--text-action-high-grey);
+        font-weight: bold;
+      }
+}
+