💄(frontend) desaturate images system for generic theme

We want to desaturate the images system in the
generic theme to make them less colorful and more
in line with the overall theme.
We added a special class to the images
that need to be desaturated. Other property
then desaturated can be apply depending on the theme.

src/frontend/apps/impress/cunningham.ts

@@ -59,6 +59,7 @@ tokens.themes.default.components = {
     'la-gaufre': false,
     'home-proconnect': false,
     beta: false,
+    'image-system-filter': '',
   },
 };
 
@@ -228,6 +229,7 @@ const genericTheme = {
           },
         },
       },
+      'image-system-filter': 'saturate(0.2)',
     },
   },
 };

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

@@ -44,6 +44,13 @@
   padding: 4px 6px;
 }
 
+/**
+ * Image System
+*/
+.c__image-system-filter {
+  filter: var(--c--components--image-system-filter);
+}
+
 @font-face {
   font-family: Inter;
   font-style: italic;

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

@@ -490,6 +490,7 @@
   --c--components--la-gaufre: false;
   --c--components--home-proconnect: false;
   --c--components--beta: false;
+  --c--components--image-system-filter: ;
 }
 
 .cunningham-theme--dark {
@@ -687,6 +688,7 @@
   --c--components--button--primary--background--color-focus: var(
     --c--theme--colors--primary-focus
   );
+  --c--components--image-system-filter: saturate(0.2);
 }
 
 .clr-secondary-text {

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

@@ -366,6 +366,7 @@ export const tokens = {
         'la-gaufre': false,
         'home-proconnect': false,
         beta: false,
+        'image-system-filter': '',
       },
     },
     dark: {
@@ -576,6 +577,7 @@ export const tokens = {
             },
           },
         },
+        'image-system-filter': 'saturate(0.2)',
       },
     },
   },

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -87,6 +87,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
                 $justify="center"
               >
                 <Image
+                  className="c__image-system-filter"
                   width={320}
                   src={EmptySearchIcon}
                   alt={t('No active search')}

src/frontend/apps/impress/src/features/footer/Footer.tsx

@@ -78,6 +78,7 @@ export const Footer = () => {
                 >
                   {logo?.src && (
                     <Image
+                      className="c__image-system-filter"
                       priority
                       src={logo.src}
                       alt={logo?.alt || t('Logo')}

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -88,6 +88,7 @@ export default function HomeBanner() {
         </Box>
         {!isMobile && (
           <Image
+            className="c__image-system-filter"
             src={banner}
             alt={t('Banner image')}
             priority

src/frontend/apps/impress/src/features/home/components/HomeSection.tsx

@@ -174,6 +174,7 @@ export const HomeSection = ({
 
         {illustration && (isSmallDevice || !video) && (
           <Image
+            className="c__image-system-filter"
             src={illustration}
             alt={t('Illustration')}
             style={{

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

@@ -29,6 +29,7 @@ const Page: NextPageWithLayout = () => {
       $padding={{ bottom: '2rem' }}
     >
       <Image
+        className="c__image-system-filter"
         src={img401}
         alt={t('Image 401')}
         style={{

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

@@ -24,6 +24,7 @@ const Page: NextPageWithLayout = () => {
       $padding={{ bottom: '2rem' }}
     >
       <Image
+        className="c__image-system-filter"
         src={img403}
         alt={t('Image 403')}
         style={{

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

@@ -24,6 +24,7 @@ const Page: NextPageWithLayout = () => {
       $padding={{ bottom: '2rem' }}
     >
       <Image
+        className="c__image-system-filter"
         src={img403}
         alt={t('Image 403')}
         style={{