💄(front) ui fix : update ui-kit - fix Marianne font

upgrade package ui-kit
add darkmode logo gouv

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Added
 
+- 💄(front) ui fix : update ui-kit
 - ✨(front) add persistent darkmode
 - ✨(front) add ui kit #240
 - 🧱(files) allow to use S3 storage without external access #849

src/frontend/apps/conversations/cunningham.ts

@@ -841,7 +841,9 @@ const dsfrThemes = getThemesFromGlobals(dsfrGlobals, {
   overrides: commonTokenOverrides,
 });
 
-if (dsfrThemes.dark?.globals?.colors) {
+if (dsfrThemes.dark) {
+  dsfrThemes.dark.globals.components.logo.src =
+    '/assets/logo-gouv-darkmode.svg';
   dsfrThemes.dark.globals.colors['logo-1'] = '#95ABFF';
   dsfrThemes.dark.globals.colors['logo-2'] = '#E78087';
 }

src/frontend/apps/conversations/package.json

@@ -23,7 +23,7 @@
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/cunningham-tokens": "^3.1.0",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.18.4",
+    "@gouvfr-lasuite/ui-kit": "0.18.7",
     "@openfun/cunningham-react": "4.0.0",
     "@sentry/nextjs": "9.26.0",
     "@shikijs/rehype": "^3.21.0",

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

@@ -1,4 +1,5 @@
 @import url('@gouvfr-lasuite/ui-kit/style');
+@import url('@gouvfr-lasuite/ui-kit/fonts/Marianne');
 @import url('./cunningham-tokens.css');
 
 :root {

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

@@ -2657,7 +2657,7 @@
 .cunningham-theme--dsfr-dark {
   --c--globals--components--la-gaufre: true;
   --c--globals--components--home-proconnect: true;
-  --c--globals--components--logo--src: /assets/logo-gouv.svg;
+  --c--globals--components--logo--src: /assets/logo-gouv-darkmode.svg;
   --c--globals--components--logo--widthHeader: 110px;
   --c--globals--components--logo--widthFooter: 220px;
   --c--globals--components--logo--alt: gouvernement logo;

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

@@ -2013,7 +2013,7 @@ export const tokens = {
           'la-gaufre': true,
           'home-proconnect': true,
           logo: {
-            src: '/assets/logo-gouv.svg',
+            src: '/assets/logo-gouv-darkmode.svg',
             widthHeader: '110px',
             widthFooter: '220px',
             alt: 'Gouvernement Logo',

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

@@ -16,7 +16,6 @@ const BlueStripe = styled.div`
   position: absolute;
   height: 2px;
   width: 100%;
-  background: var(--c--theme--colors--primary-600);
   top: 0;
 `;
 
@@ -129,12 +128,15 @@ export const Footer = () => {
                     gap:0.2rem;
                     transition: box-shadow 0.3s;
                     &:hover {
-                      box-shadow: 0px 2px 0 0 var(--c--theme--colors--greyscale-text);
+                      box-shadow: 0px 2px 0 0 var(--c--contextuals--content--semantic--neutral--tertiary);
                     }
                   `}
                 >
                   <Text $weight="bold">{label}</Text>
-                  <IconLink width={18} />
+                  <IconLink
+                    width={18}
+                    color="var(--c--contextuals--content--semantic--neutral--primary)"
+                  />
                 </StyledLink>
               ))}
           </Box>
@@ -172,7 +174,9 @@ export const Footer = () => {
                   $css={css`
                     &:hover {
                       box-shadow: 0px 2px 0 0
-                        var(--c--theme--colors--greyscale-text);
+                        var(
+                          --c--contextuals--content--semantic--neutral--tertiary
+                        );
                     }
                   `}
                 >
@@ -199,14 +203,17 @@ export const Footer = () => {
                 $css={css`
                   display: inline-flex;
                   box-shadow: 0px 1px 0 0
-                    var(--c--theme--colors--greyscale-text);
+                    var(--c--contextuals--content--semantic--neutral--tertiary);
                   gap: 0.2rem;
                 `}
               >
                 <Text $variation="tertiary" $theme="neutral">
                   {bottomInformation.link.label}
                 </Text>
-                <IconLink width={14} />
+                <IconLink
+                  width={14}
+                  color="var(--c--contextuals--content--semantic--neutral--primary)"
+                />
               </StyledLink>
             )}
           </Text>

src/frontend/apps/conversations/src/features/footer/assets/external-link.svg

@@ -1,5 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path
+    fill="currentColor"
     d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6Zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8Z"
   />
 </svg>

src/frontend/yarn.lock

@@ -1385,7 +1385,31 @@
   dependencies:
     tslib "^2.8.0"
 
-"@gouvfr-lasuite/cunningham-tokens@^3.1.0":
+"@gouvfr-lasuite/cunningham-react@4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/cunningham-react/-/cunningham-react-4.1.0.tgz#3a1347a7e05f9add18462d5b1ded3e26635bdd37"
+  integrity sha512-r6QKi4qcPEG4Vxe7rKt89d7I2KYD9gvOKxkzlDAVBjo9DYnQ4ZM9T5tG/W0/oBbcURTFqxINfFhaF8CyviiOjw==
+  dependencies:
+    "@fontsource-variable/roboto-flex" "5.2.5"
+    "@fontsource/material-icons-outlined" "5.2.5"
+    "@gouvfr-lasuite/cunningham-tokens" "*"
+    "@internationalized/date" "3.8.0"
+    "@react-aria/calendar" "3.8.0"
+    "@react-aria/datepicker" "3.14.2"
+    "@react-aria/i18n" "3.12.8"
+    "@react-stately/calendar" "3.8.0"
+    "@react-stately/datepicker" "3.14.0"
+    "@tanstack/react-table" "8.21.3"
+    "@types/react-modal" "3.16.3"
+    chromatic "11.28.2"
+    classnames "2.5.1"
+    downshift "9.0.9"
+    react-aria "3.39.0"
+    react-aria-components "1.8.0"
+    react-modal "3.16.3"
+    react-stately "3.37.0"
+
+"@gouvfr-lasuite/cunningham-tokens@*", "@gouvfr-lasuite/[email protected]", "@gouvfr-lasuite/cunningham-tokens@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/cunningham-tokens/-/cunningham-tokens-3.1.0.tgz#39d957e6322f7c10b463dc8eeed8fdbb3e006788"
   integrity sha512-7HP7E1vjxv3FbFn21XuEqbjQPHP5xucWU0D8+Oj02nIeKLL+0eArTL2GB+c2rPFBt0tAzaLI6A3WlsimOjHN4A==
@@ -1406,17 +1430,18 @@
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.3.tgz#7aca824ba61d343a7905dc90c8a8bbdbce8f9a09"
   integrity sha512-OgP28CqlPi35wQPul1Dr52SngACXAk8buLGqHYXDp23fbTOJThqarrZE/pgJHoc9Ndwiu7ngwBSO4rZ7OPyMpA==
 
-"@gouvfr-lasuite/[email protected].4":
-  version "0.18.4"
-  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.18.4.tgz#536a8e1873d3eca80d0734735d87d3eec4934938"
-  integrity sha512-D/oUexk73khJHBERr0l2S7uVMziUkPpnlrO2+JeTFGCr/7LwAdNBoxnbsVMBlb+S6WeNAkJQV53DmalTLs6GlA==
+"@gouvfr-lasuite/[email protected].7":
+  version "0.18.7"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.18.7.tgz#1c3912f2b366ece09616937c2a5901300fe25a35"
+  integrity sha512-1Bw1FSol9+mxztiaPEyfwVf9/1Vns7OJVEzvwLTlChbo6cS8FjuP/ZYG57RMvschsN4kfMzC03YmxcVdS0L9Nw==
   dependencies:
     "@dnd-kit/core" "6.3.1"
     "@dnd-kit/modifiers" "9.0.0"
     "@dnd-kit/sortable" "10.0.0"
     "@fontsource/material-icons" "5.2.5"
+    "@gouvfr-lasuite/cunningham-react" "4.1.0"
+    "@gouvfr-lasuite/cunningham-tokens" "3.1.0"
     "@gouvfr-lasuite/integration" "1.0.2"
-    "@openfun/cunningham-react" "4.0.0"
     "@types/node" "22.10.7"
     clsx "2.1.1"
     cmdk "1.0.4"