From 6cd0cd06891bffec08948023cb10ce700e8504ef Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 16 May 2025 12:35:16 +0200
Subject: [PATCH] =?UTF-8?q?=E2=AC=86=EF=B8=8F(dependencies)=20gouvfr-lasui?=
 =?UTF-8?q?te/ui-kit=20to=200.6.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Upgrade @gouvfr-lasuite/ui-kit from 0.5.0 to 0.6.0.
Some properties have been removed in 0.5.0, which
causes the design of the app to be broken.
Version 0.6.0 has as well some breaking changes,
about the "logo" properties that are not available anymore.
We fix them in this commit.
---
 src/frontend/apps/impress/cunningham.ts       |  12 +
 src/frontend/apps/impress/package.json        |   2 +-
 .../src/cunningham/cunningham-tokens.css      | 223 +++++++++++-------
 .../src/cunningham/cunningham-tokens.ts       | 150 ++++++------
 src/frontend/yarn.lock                        |   8 +-
 5 files changed, 238 insertions(+), 157 deletions(-)

diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index b2906c30..988d39f3 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -40,6 +40,18 @@ tokens.themes.default.theme.colors = {
   ...customColors,
 };
 
+tokens.themes.default.theme = {
+  ...tokens.themes.default.theme,
+  ...{
+    logo: {
+      src: '/assets/logo-gouv.svg',
+      widthHeader: '110px',
+      widthFooter: '220px',
+      alt: 'Gouvernement Logo',
+    },
+  },
+};
+
 tokens.themes.default.components = {
   ...tokens.themes.default.components,
   ...{
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index ca036a7e..7eb09b08 100644
--- a/src/frontend/apps/impress/package.json
+++ b/src/frontend/apps/impress/package.json
@@ -26,7 +26,7 @@
     "@emoji-mart/react": "1.1.1",
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.5.0",
+    "@gouvfr-lasuite/ui-kit": "0.6.0",
     "@hocuspocus/provider": "2.15.2",
     "@openfun/cunningham-react": "3.1.0",
     "@react-pdf/renderer": "4.3.0",
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 16dcc3a9..c48bc4b1 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -78,37 +78,40 @@
   --c--theme--colors--greyscale-750: #353535;
   --c--theme--colors--greyscale-950: #1e1e1e;
   --c--theme--colors--greyscale-1000: #161616;
+  --c--theme--colors--danger-050: #fff4f4;
+  --c--theme--colors--blue-500: #417dc4;
+  --c--theme--colors--brown-500: #bd987a;
+  --c--theme--colors--cyan-500: #009099;
+  --c--theme--colors--gold-500: #c3992a;
+  --c--theme--colors--green-500: #00a95f;
+  --c--theme--colors--olive-500: #68a532;
+  --c--theme--colors--orange-500: #e4794a;
+  --c--theme--colors--purple-500: #a558a0;
+  --c--theme--colors--red-500: #e1000f;
+  --c--theme--colors--yellow-500: #b7a73f;
+  --c--theme--colors--rose-500: #e18b76;
   --c--theme--colors--primary-action: #1212ff;
   --c--theme--colors--primary-bg: #fafafa;
   --c--theme--colors--blue-400: #7ab1e8;
-  --c--theme--colors--blue-500: #417dc4;
   --c--theme--colors--blue-600: #3558a2;
   --c--theme--colors--brown-400: #e6be92;
-  --c--theme--colors--brown-500: #bd987a;
   --c--theme--colors--brown-600: #745b47;
   --c--theme--colors--cyan-400: #34bab5;
-  --c--theme--colors--cyan-500: #009099;
   --c--theme--colors--cyan-600: #006a6f;
   --c--theme--colors--gold-400: #ffca00;
-  --c--theme--colors--gold-500: #c3992a;
   --c--theme--colors--gold-600: #695240;
   --c--theme--colors--green-400: #34cb6a;
-  --c--theme--colors--green-500: #00a95f;
   --c--theme--colors--green-600: #297254;
   --c--theme--colors--olive-400: #99c221;
-  --c--theme--colors--olive-500: #68a532;
   --c--theme--colors--olive-600: #447049;
   --c--theme--colors--orange-400: #ff732c;
-  --c--theme--colors--orange-500: #e4794a;
   --c--theme--colors--orange-600: #755348;
   --c--theme--colors--pink-400: #ffb7ae;
   --c--theme--colors--pink-500: #e18b76;
   --c--theme--colors--pink-600: #8d533e;
   --c--theme--colors--purple-400: #ce70cc;
-  --c--theme--colors--purple-500: #a558a0;
   --c--theme--colors--purple-600: #6e445a;
   --c--theme--colors--yellow-400: #d8c634;
-  --c--theme--colors--yellow-500: #b7a73f;
   --c--theme--colors--yellow-600: #66673d;
   --c--theme--font--sizes--h1: 2rem;
   --c--theme--font--sizes--h2: 1.75rem;
@@ -192,6 +195,10 @@
   --c--theme--logo--widthfooter: 220px;
   --c--theme--logo--alt: gouvernement logo;
   --c--components--modal--width-small: 342px;
+  --c--components--tooltip--padding: 4px 8px;
+  --c--components--tooltip--background-color: var(
+    --c--theme--colors--greyscale-1000
+  );
   --c--components--button--medium-height: 40px;
   --c--components--button--medium-text-height: 40px;
   --c--components--button--border-radius: 4px;
@@ -448,6 +455,36 @@
     --c--theme--colors--greyscale-950
   );
   --c--components--forms-select--font-size: 14px;
+  --c--components--badge--font-size: var(--c--theme--font--sizes--xs);
+  --c--components--badge--border-radius: 4px;
+  --c--components--badge--padding-inline: var(--c--theme--spacings--xs);
+  --c--components--badge--padding-block: var(--c--theme--spacings--2xs);
+  --c--components--badge--accent--background-color: var(
+    --c--theme--colors--primary-100
+  );
+  --c--components--badge--accent--color: var(--c--theme--colors--primary-600);
+  --c--components--badge--neutral--background-color: var(
+    --c--theme--colors--greyscale-100
+  );
+  --c--components--badge--neutral--color: var(
+    --c--theme--colors--greyscale-600
+  );
+  --c--components--badge--danger--background-color: var(
+    --c--theme--colors--danger-100
+  );
+  --c--components--badge--danger--color: var(--c--theme--colors--danger-600);
+  --c--components--badge--success--background-color: var(
+    --c--theme--colors--success-100
+  );
+  --c--components--badge--success--color: var(--c--theme--colors--success-600);
+  --c--components--badge--warning--background-color: var(
+    --c--theme--colors--warning-100
+  );
+  --c--components--badge--warning--color: var(--c--theme--colors--warning-600);
+  --c--components--badge--info--background-color: var(
+    --c--theme--colors--info-100
+  );
+  --c--components--badge--info--color: var(--c--theme--colors--info-600);
   --c--components--la-gauffre--activated: true;
   --c--components--home-proconnect--activated: true;
 }
@@ -817,6 +854,54 @@
   color: var(--c--theme--colors--greyscale-1000);
 }
 
+.clr-danger-050 {
+  color: var(--c--theme--colors--danger-050);
+}
+
+.clr-blue-500 {
+  color: var(--c--theme--colors--blue-500);
+}
+
+.clr-brown-500 {
+  color: var(--c--theme--colors--brown-500);
+}
+
+.clr-cyan-500 {
+  color: var(--c--theme--colors--cyan-500);
+}
+
+.clr-gold-500 {
+  color: var(--c--theme--colors--gold-500);
+}
+
+.clr-green-500 {
+  color: var(--c--theme--colors--green-500);
+}
+
+.clr-olive-500 {
+  color: var(--c--theme--colors--olive-500);
+}
+
+.clr-orange-500 {
+  color: var(--c--theme--colors--orange-500);
+}
+
+.clr-purple-500 {
+  color: var(--c--theme--colors--purple-500);
+}
+
+.clr-red-500 {
+  color: var(--c--theme--colors--red-500);
+}
+
+.clr-yellow-500 {
+  color: var(--c--theme--colors--yellow-500);
+}
+
+.clr-rose-500 {
+  color: var(--c--theme--colors--rose-500);
+}
+
 .clr-primary-action {
   color: var(--c--theme--colors--primary-action);
 }
@@ -829,10 +914,6 @@
   color: var(--c--theme--colors--blue-400);
 }
 
-.clr-blue-500 {
-  color: var(--c--theme--colors--blue-500);
-}
-
 .clr-blue-600 {
   color: var(--c--theme--colors--blue-600);
 }
@@ -841,10 +922,6 @@
   color: var(--c--theme--colors--brown-400);
 }
 
-.clr-brown-500 {
-  color: var(--c--theme--colors--brown-500);
-}
-
 .clr-brown-600 {
   color: var(--c--theme--colors--brown-600);
 }
@@ -853,10 +930,6 @@
   color: var(--c--theme--colors--cyan-400);
 }
 
-.clr-cyan-500 {
-  color: var(--c--theme--colors--cyan-500);
-}
-
 .clr-cyan-600 {
   color: var(--c--theme--colors--cyan-600);
 }
@@ -865,10 +938,6 @@
   color: var(--c--theme--colors--gold-400);
 }
 
-.clr-gold-500 {
-  color: var(--c--theme--colors--gold-500);
-}
-
 .clr-gold-600 {
   color: var(--c--theme--colors--gold-600);
 }
@@ -877,10 +946,6 @@
   color: var(--c--theme--colors--green-400);
 }
 
-.clr-green-500 {
-  color: var(--c--theme--colors--green-500);
-}
-
 .clr-green-600 {
   color: var(--c--theme--colors--green-600);
 }
@@ -889,10 +954,6 @@
   color: var(--c--theme--colors--olive-400);
 }
 
-.clr-olive-500 {
-  color: var(--c--theme--colors--olive-500);
-}
-
 .clr-olive-600 {
   color: var(--c--theme--colors--olive-600);
 }
@@ -901,10 +962,6 @@
   color: var(--c--theme--colors--orange-400);
 }
 
-.clr-orange-500 {
-  color: var(--c--theme--colors--orange-500);
-}
-
 .clr-orange-600 {
   color: var(--c--theme--colors--orange-600);
 }
@@ -925,10 +982,6 @@
   color: var(--c--theme--colors--purple-400);
 }
 
-.clr-purple-500 {
-  color: var(--c--theme--colors--purple-500);
-}
-
 .clr-purple-600 {
   color: var(--c--theme--colors--purple-600);
 }
@@ -937,10 +990,6 @@
   color: var(--c--theme--colors--yellow-400);
 }
 
-.clr-yellow-500 {
-  color: var(--c--theme--colors--yellow-500);
-}
-
 .clr-yellow-600 {
   color: var(--c--theme--colors--yellow-600);
 }
@@ -1261,6 +1310,54 @@
   background-color: var(--c--theme--colors--greyscale-1000);
 }
 
+.bg-danger-050 {
+  background-color: var(--c--theme--colors--danger-050);
+}
+
+.bg-blue-500 {
+  background-color: var(--c--theme--colors--blue-500);
+}
+
+.bg-brown-500 {
+  background-color: var(--c--theme--colors--brown-500);
+}
+
+.bg-cyan-500 {
+  background-color: var(--c--theme--colors--cyan-500);
+}
+
+.bg-gold-500 {
+  background-color: var(--c--theme--colors--gold-500);
+}
+
+.bg-green-500 {
+  background-color: var(--c--theme--colors--green-500);
+}
+
+.bg-olive-500 {
+  background-color: var(--c--theme--colors--olive-500);
+}
+
+.bg-orange-500 {
+  background-color: var(--c--theme--colors--orange-500);
+}
+
+.bg-purple-500 {
+  background-color: var(--c--theme--colors--purple-500);
+}
+
+.bg-red-500 {
+  background-color: var(--c--theme--colors--red-500);
+}
+
+.bg-yellow-500 {
+  background-color: var(--c--theme--colors--yellow-500);
+}
+
+.bg-rose-500 {
+  background-color: var(--c--theme--colors--rose-500);
+}
+
 .bg-primary-action {
   background-color: var(--c--theme--colors--primary-action);
 }
@@ -1273,10 +1370,6 @@
   background-color: var(--c--theme--colors--blue-400);
 }
 
-.bg-blue-500 {
-  background-color: var(--c--theme--colors--blue-500);
-}
-
 .bg-blue-600 {
   background-color: var(--c--theme--colors--blue-600);
 }
@@ -1285,10 +1378,6 @@
   background-color: var(--c--theme--colors--brown-400);
 }
 
-.bg-brown-500 {
-  background-color: var(--c--theme--colors--brown-500);
-}
-
 .bg-brown-600 {
   background-color: var(--c--theme--colors--brown-600);
 }
@@ -1297,10 +1386,6 @@
   background-color: var(--c--theme--colors--cyan-400);
 }
 
-.bg-cyan-500 {
-  background-color: var(--c--theme--colors--cyan-500);
-}
-
 .bg-cyan-600 {
   background-color: var(--c--theme--colors--cyan-600);
 }
@@ -1309,10 +1394,6 @@
   background-color: var(--c--theme--colors--gold-400);
 }
 
-.bg-gold-500 {
-  background-color: var(--c--theme--colors--gold-500);
-}
-
 .bg-gold-600 {
   background-color: var(--c--theme--colors--gold-600);
 }
@@ -1321,10 +1402,6 @@
   background-color: var(--c--theme--colors--green-400);
 }
 
-.bg-green-500 {
-  background-color: var(--c--theme--colors--green-500);
-}
-
 .bg-green-600 {
   background-color: var(--c--theme--colors--green-600);
 }
@@ -1333,10 +1410,6 @@
   background-color: var(--c--theme--colors--olive-400);
 }
 
-.bg-olive-500 {
-  background-color: var(--c--theme--colors--olive-500);
-}
-
 .bg-olive-600 {
   background-color: var(--c--theme--colors--olive-600);
 }
@@ -1345,10 +1418,6 @@
   background-color: var(--c--theme--colors--orange-400);
 }
 
-.bg-orange-500 {
-  background-color: var(--c--theme--colors--orange-500);
-}
-
 .bg-orange-600 {
   background-color: var(--c--theme--colors--orange-600);
 }
@@ -1369,10 +1438,6 @@
   background-color: var(--c--theme--colors--purple-400);
 }
 
-.bg-purple-500 {
-  background-color: var(--c--theme--colors--purple-500);
-}
-
 .bg-purple-600 {
   background-color: var(--c--theme--colors--purple-600);
 }
@@ -1381,10 +1446,6 @@
   background-color: var(--c--theme--colors--yellow-400);
 }
 
-.bg-yellow-500 {
-  background-color: var(--c--theme--colors--yellow-500);
-}
-
 .bg-yellow-600 {
   background-color: var(--c--theme--colors--yellow-600);
 }
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index 7e49af89..1687edf4 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -82,37 +82,40 @@ export const tokens = {
           'greyscale-750': '#353535',
           'greyscale-950': '#1E1E1E',
           'greyscale-1000': '#161616',
+          'danger-050': '#FFF4F4',
+          'blue-500': '#417DC4',
+          'brown-500': '#BD987A',
+          'cyan-500': '#009099',
+          'gold-500': '#C3992A',
+          'green-500': '#00A95F',
+          'olive-500': '#68A532',
+          'orange-500': '#E4794A',
+          'purple-500': '#A558A0',
+          'red-500': '#E1000F',
+          'yellow-500': '#B7A73F',
+          'rose-500': '#E18B76',
           'primary-action': '#1212FF',
           'primary-bg': '#FAFAFA',
           'blue-400': '#7AB1E8',
-          'blue-500': '#417DC4',
           'blue-600': '#3558A2',
           'brown-400': '#E6BE92',
-          'brown-500': '#BD987A',
           'brown-600': '#745B47',
           'cyan-400': '#34BAB5',
-          'cyan-500': '#009099',
           'cyan-600': '#006A6F',
           'gold-400': '#FFCA00',
-          'gold-500': '#C3992A',
           'gold-600': '#695240',
           'green-400': '#34CB6A',
-          'green-500': '#00A95F',
           'green-600': '#297254',
           'olive-400': '#99C221',
-          'olive-500': '#68A532',
           'olive-600': '#447049',
           'orange-400': '#FF732C',
-          'orange-500': '#E4794A',
           'orange-600': '#755348',
           'pink-400': '#FFB7AE',
           'pink-500': '#E18B76',
           'pink-600': '#8D533E',
           'purple-400': '#CE70CC',
-          'purple-500': '#A558A0',
           'purple-600': '#6E445A',
           'yellow-400': '#D8C634',
-          'yellow-500': '#B7A73F',
           'yellow-600': '#66673D',
         },
         font: {
@@ -214,70 +217,65 @@ export const tokens = {
       },
       components: {
         modal: { 'width-small': '342px' },
+        tooltip: { padding: '4px 8px', 'background-color': '#161616' },
         button: {
           'medium-height': '40px',
           'medium-text-height': '40px',
           'border-radius': '4px',
           'small-height': '26px',
           primary: {
-            'background--color': 'var(--c--theme--colors--primary-text)',
+            'background--color': '#000091',
             'background--color-hover': '#1212ff',
             'background--color-active': '#2323ff',
-            'background--color-disabled':
-              'var(--c--theme--colors--greyscale-100)',
+            'background--color-disabled': '#eee',
             color: '#fff',
             'color-hover': '#fff',
             'color-active': '#fff',
             'color-focus-visible': '#fff',
-            disabled: 'var(--c--theme--colors--greyscale-500)',
+            disabled: '#7C7C7C',
           },
           'primary-text': {
-            'background--color': 'var(--c--theme--colors--primary-text)',
-            'background--color-hover': 'var(--c--theme--colors--greyscale-100)',
-            'background--color-active': 'var(--c--theme--colors--primary-100)',
+            'background--color': '#000091',
+            'background--color-hover': '#eee',
+            'background--color-active': '#ECECFE',
             'background--color-focus-visible': '#fff',
-            'background--color-disabled':
-              'var(--c--theme--colors--greyscale-000)',
-            color: 'var(--c--theme--colors--primary-800)',
-            'color-hover': 'var(--c--theme--colors--primary-800)',
-            disabled: 'var(--c--theme--colors--greyscale-400)',
+            'background--color-disabled': '#fff',
+            color: '#000091',
+            'color-hover': '#000091',
+            disabled: '#929292',
           },
           secondary: {
             'background--color-hover': '#F6F6F6',
             'background--color-active': '#EDEDED',
-            'background--color-focus-visible':
-              'var(--c--theme--colors--greyscale-000)',
-            'background--disabled': 'var(--c--theme--colors--greyscale-000)',
-            color: 'var(--c--theme--colors--primary-800)',
-            'border--color': 'var(--c--theme--colors--greyscale-300)',
-            'border--color-hover': 'var(--c--theme--colors--greyscale-300)',
-            'border--color-disabled': 'var(--c--theme--colors--greyscale-300)',
-            disabled: 'var(--c--theme--colors--greyscale-400)',
+            'background--color-focus-visible': '#fff',
+            'background--disabled': '#fff',
+            color: '#000091',
+            'border--color': '#CECECE',
+            'border--color-hover': '#CECECE',
+            'border--color-disabled': '#CECECE',
+            disabled: '#929292',
           },
           tertiary: {
-            'background--color': 'var(--c--theme--colors--primary-100)',
-            'background--color-focus-visible':
-              'var(--c--theme--colors--primary-100)',
-            'background--color-hover': 'var(--c--theme--colors--primary-300)',
-            'background--color-active': 'var(--c--theme--colors--primary-300)',
-            'background--disabled': 'var(--c--theme--colors--primary-050)',
-            color: 'var(--c--theme--colors--primary-800)',
-            disabled: 'var(--c--theme--colors--primary-300)',
+            'background--color': '#ECECFE',
+            'background--color-focus-visible': '#ECECFE',
+            'background--color-hover': '#CACAFB',
+            'background--color-active': '#CACAFB',
+            'background--disabled': '#F5F5FE',
+            color: '#000091',
+            disabled: '#CACAFB',
           },
           'tertiary-text': {
-            'background--color-hover': 'var(--c--theme--colors--greyscale-100)',
-            'color-hover': 'var(--c--theme--colors--primary-text)',
-            color: 'var(--c--theme--colors--primary-600)',
+            'background--color-hover': '#eee',
+            'color-hover': '#000091',
+            color: '#313178',
           },
           danger: {
             'color-hover': 'white',
-            'background--color': 'var(--c--theme--colors--danger-600)',
+            'background--color': '#CE0500',
             'background--color-hover': '#FF2725',
-            'background--color-focus-visible':
-              'var(--c--theme--colors--danger-600)',
-            'background--color-disabled':
-              'var(--c--theme--colors--greyscale-100)',
-            'color-disabled': 'var(--c--theme--colors--greyscale-400)',
+            'background--color-focus-visible': '#CE0500',
+            'background--color-disabled': '#eee',
+            'color-disabled': '#929292',
           },
         },
         datagrid: {
@@ -288,22 +286,22 @@ export const tokens = {
         },
         'forms-checkbox': {
           'border-radius': '4px',
-          'border-color': 'var(--c--theme--colors--primary-800)',
-          'background-color--hover': 'var(--c--theme--colors--greyscale-100)',
-          'border--color-disabled': 'var(--c--theme--colors--greyscale-200)',
-          'border--color': 'var(--c--theme--colors--primary-800)',
-          'background--disabled': 'var(--c--theme--colors--greyscale-200)',
-          'background--enable': 'var(--c--theme--colors--primary-800)',
-          'check--disabled': 'var(--c--theme--colors--greyscale-300)',
-          'check--enable': 'var(--c--theme--colors--greyscale-000)',
-          color: 'var(--c--theme--colors--primary-text)',
-          'label--color': 'var(--c--theme--colors--greyscale-1000)',
-          'label--size': 'var(--c--theme--font--sizes--sm)',
+          'border-color': '#000091',
+          'background-color--hover': '#eee',
+          'border--color-disabled': '#E5E5E5',
+          'border--color': '#000091',
+          'background--disabled': '#E5E5E5',
+          'background--enable': '#000091',
+          'check--disabled': '#CECECE',
+          'check--enable': '#fff',
+          color: '#000091',
+          'label--color': '#161616',
+          'label--size': '0.875rem',
           'label--weight': '500',
-          'text--color': 'var(--c--theme--colors--greyscale-600)',
-          'text--size': 'var(--c--theme--font--sizes--s)',
+          'text--color': '#666666',
+          'text--size': '0.75rem',
           'text--weight': '400',
-          'text--color-disabled': 'var(--c--theme--colors--greyscale-300)',
+          'text--color-disabled': '#CECECE',
         },
         'forms-labelledbox': {
           'label-color--small': '#1E1E1E',
@@ -312,20 +310,18 @@ export const tokens = {
           'label-color--big--disabled': '#CECECE',
         },
         'forms-radio': {
-          'border-color': 'var(--c--theme--colors--primary-800)',
-          'background-color': 'var(--c--theme--colors--greyscale-000)',
-          'accent-color': 'var(--c--theme--colors--primary-800)',
-          'accent-color-disabled': 'var(--c--theme--colors--greyscale-300)',
+          'border-color': '#000091',
+          'background-color': '#fff',
+          'accent-color': '#000091',
+          'accent-color-disabled': '#CECECE',
         },
         'forms-switch': {
-          'border--color-disabled': 'var(--c--theme--colors--greyscale-300)',
-          'border--color': 'var(--c--theme--colors--primary-800)',
+          'border--color-disabled': '#CECECE',
+          'border--color': '#000091',
           'handle-background-color': 'white',
-          'handle-background-color--disabled':
-            'var(--c--theme--colors--greyscale-000)',
-          'rail-background-color--disabled':
-            'var(--c--theme--colors--greyscale-000)',
-          'accent-color': 'var(--c--theme--colors--primary-800)',
+          'handle-background-color--disabled': '#fff',
+          'rail-background-color--disabled': '#fff',
+          'accent-color': '#000091',
         },
         'forms-textarea': {
           'label-color--focus': '#161616',
@@ -358,6 +354,18 @@ export const tokens = {
           'value-color': '#1E1E1E',
           'font-size': '14px',
         },
+        badge: {
+          'font-size': '0.75rem',
+          'border-radius': '4px',
+          'padding-inline': '0.5rem',
+          'padding-block': '0.375rem',
+          accent: { 'background-color': '#ECECFE', color: '#313178' },
+          neutral: { 'background-color': '#eee', color: '#666666' },
+          danger: { 'background-color': '#FFE9E9', color: '#CE0500' },
+          success: { 'background-color': '#dffee6', color: '#18753c' },
+          warning: { 'background-color': '#fff4f3', color: '#b34000' },
+          info: { 'background-color': '#E8EDFF', color: '#0063CB' },
+        },
         'la-gauffre': { activated: true },
         'home-proconnect': { activated: true },
       },
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 5b132661..49ae46f2 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1627,10 +1627,10 @@
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.3.tgz#7aca824ba61d343a7905dc90c8a8bbdbce8f9a09"
   integrity sha512-OgP28CqlPi35wQPul1Dr52SngACXAk8buLGqHYXDp23fbTOJThqarrZE/pgJHoc9Ndwiu7ngwBSO4rZ7OPyMpA==
 
-"@gouvfr-lasuite/ui-kit@0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.5.0.tgz#57c4a7e266491f7b439e5f80978ce243c9709eff"
-  integrity sha512-+hC3EI9KyCUhBojfOmnKBApDqe0/k1dUiFplZBMjdjnPyU6EYKsy7V0Ylx8Zg4IEwwsm2AsLCfiEijuhUqt/hg==
+"@gouvfr-lasuite/ui-kit@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/ui-kit/-/ui-kit-0.6.0.tgz#283370960c357b73ba5a1f4c1d05a7fc781cfe6c"
+  integrity sha512-o+S+RjFArAzdTCZuGe6QYPZXIO93Rg4jlYcLOqYa92trGuhznxtHJ5k7ZABV7Uxu8nml9ymkfaZKeEoxJyNm/w==
   dependencies:
     "@dnd-kit/core" "6.3.1"
     "@dnd-kit/modifiers" "9.0.0"