⬆️(dependencies) gouvfr-lasuite/ui-kit to 0.6.0

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.
This commit is contained in:
Anthony LC
2025-05-16 12:35:16 +02:00
parent 10b088599c
commit 6cd0cd0689
5 changed files with 238 additions and 157 deletions

View File

@@ -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,
...{

View File

@@ -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",

View File

@@ -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);
}

View File

@@ -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 },
},

View File

@@ -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"