💄(frontend) add generic favicon

The favicons were still with the dsfr color.
We added the generic favicon in the assets folder.
The favicon can be a url loaded from the theme,
so when Drive will be running, we will be able
to store the dsfr favicons there, and remove them
from the repo.

src/frontend/apps/impress/cunningham.ts

@@ -36,10 +36,6 @@ const customColors = {
   'yellow-500': '#B7A73F',
   'yellow-600': '#66673D',
 };
-tokens.themes.default.theme.colors = {
-  ...tokens.themes.default.theme.colors,
-  ...customColors,
-};
 
 tokens.themes.default.theme = {
   ...tokens.themes.default.theme,
@@ -50,6 +46,10 @@ tokens.themes.default.theme = {
       widthHeader: '',
       widthFooter: '',
     },
+    colors: {
+      ...tokens.themes.default.theme.colors,
+      ...customColors,
+    },
   },
 };
 
@@ -60,6 +60,11 @@ tokens.themes.default.components = {
     'home-proconnect': false,
     beta: false,
     'image-system-filter': '',
+    favicon: {
+      ico: '/assets/favicon-light.ico',
+      'png-light': '/assets/favicon-light.png',
+      'png-dark': '/assets/favicon-dark.png',
+    },
   },
 };
 
@@ -80,6 +85,11 @@ const dsfrTheme = {
       'la-gaufre': true,
       'home-proconnect': true,
       beta: true,
+      favicon: {
+        ico: '/assets/favicon-dsfr.ico',
+        'png-light': '/assets/favicon-dsfr.png',
+        'png-dark': '/assets/favicon-dark-dsfr.png',
+      },
     },
   },
 };

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -491,6 +491,9 @@
   --c--components--home-proconnect: false;
   --c--components--beta: false;
   --c--components--image-system-filter: ;
+  --c--components--favicon--ico: /assets/favicon-light.ico;
+  --c--components--favicon--png-light: /assets/favicon-light.png;
+  --c--components--favicon--png-dark: /assets/favicon-dark.png;
 }
 
 .cunningham-theme--dark {
@@ -551,6 +554,9 @@
   --c--components--la-gaufre: true;
   --c--components--home-proconnect: true;
   --c--components--beta: true;
+  --c--components--favicon--ico: /assets/favicon-dsfr.ico;
+  --c--components--favicon--png-light: /assets/favicon-dsfr.png;
+  --c--components--favicon--png-dark: /assets/favicon-dark-dsfr.png;
 }
 
 .cunningham-theme--generic {

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -367,6 +367,11 @@ export const tokens = {
         'home-proconnect': false,
         beta: false,
         'image-system-filter': '',
+        favicon: {
+          ico: '/assets/favicon-light.ico',
+          'png-light': '/assets/favicon-light.png',
+          'png-dark': '/assets/favicon-dark.png',
+        },
       },
     },
     dark: {
@@ -431,7 +436,16 @@ export const tokens = {
           alt: 'Gouvernement Logo',
         },
       },
-      components: { 'la-gaufre': true, 'home-proconnect': true, beta: true },
+      components: {
+        'la-gaufre': true,
+        'home-proconnect': true,
+        beta: true,
+        favicon: {
+          ico: '/assets/favicon-dsfr.ico',
+          'png-light': '/assets/favicon-dsfr.png',
+          'png-dark': '/assets/favicon-dark-dsfr.png',
+        },
+      },
     },
     generic: {
       theme: {

src/frontend/apps/impress/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
 
 import { AppProvider } from '@/core/';
+import { useCunninghamTheme } from '@/cunningham';
 import { useOffline, useSWRegister } from '@/features/service-worker/';
 import '@/i18n/initI18n';
 import { NextPageWithLayout } from '@/types/next';
@@ -18,6 +19,8 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   useOffline();
   const getLayout = Component.getLayout ?? ((page) => page);
   const { t } = useTranslation();
+  const { componentTokens } = useCunninghamTheme();
+  const favicon = componentTokens['favicon'];
 
   return (
     <>
@@ -29,17 +32,17 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
             'Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.',
           )}
         />
-        <link rel="icon" href="/favicon.ico" sizes="any" />
-        <link rel="icon" href="/favicon.png" type="image/png" />
+        <link rel="icon" href={favicon['ico']} sizes="any" />
+        <link rel="icon" href={favicon['png-light']} type="image/png" />
         <link
           rel="icon"
-          href="/favicon.png"
+          href={favicon['png-light']}
           type="image/png"
           media="(prefers-color-scheme: light)"
         />
         <link
           rel="icon"
-          href="/favicon-dark.png"
+          href={favicon['png-dark']}
           type="image/png"
           media="(prefers-color-scheme: dark)"
         />