Skip to content

Commit e6858e6

Browse files
committed
⬇️(dependencies) gouvfr-lasuite/ui-kit to 0.4.1
Downgrade @gouvfr-lasuite/ui-kit from 0.5.0 to 0.4.1. Some properties have been removed in 0.5.0, which causes the design of the app to be broken. Version 0.4.1 has as well some breaking changes, about the "logo" properties that are not available anymore. We fix them in this commit.
1 parent 084f57c commit e6858e6

File tree

5 files changed

+343
-150
lines changed

5 files changed

+343
-150
lines changed

src/frontend/apps/impress/cunningham.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,18 @@ tokens.themes.default.theme.colors = {
4040
...customColors,
4141
};
4242

43+
tokens.themes.default.theme = {
44+
...tokens.themes.default.theme,
45+
...{
46+
logo: {
47+
src: '/assets/logo-gouv.svg',
48+
widthHeader: '110px',
49+
widthFooter: '220px',
50+
alt: 'Gouvernement Logo',
51+
},
52+
},
53+
};
54+
4355
tokens.themes.default.components = {
4456
...tokens.themes.default.components,
4557
...{

src/frontend/apps/impress/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"@emoji-mart/react": "1.1.1",
2727
"@fontsource/material-icons": "5.2.5",
2828
"@gouvfr-lasuite/integration": "1.0.3",
29-
"@gouvfr-lasuite/ui-kit": "0.5.0",
29+
"@gouvfr-lasuite/ui-kit": "0.4.1",
3030
"@hocuspocus/provider": "2.15.2",
3131
"@openfun/cunningham-react": "3.1.0",
3232
"@react-pdf/renderer": "4.3.0",

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

Lines changed: 112 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -78,37 +78,40 @@
7878
--c--theme--colors--greyscale-750: #353535;
7979
--c--theme--colors--greyscale-950: #1e1e1e;
8080
--c--theme--colors--greyscale-1000: #161616;
81+
--c--theme--colors--danger-050: #fff4f4;
82+
--c--theme--colors--blue-500: #417dc4;
83+
--c--theme--colors--brown-500: #bd987a;
84+
--c--theme--colors--cyan-500: #009099;
85+
--c--theme--colors--gold-500: #c3992a;
86+
--c--theme--colors--green-500: #00a95f;
87+
--c--theme--colors--olive-500: #68a532;
88+
--c--theme--colors--orange-500: #e4794a;
89+
--c--theme--colors--purple-500: #a558a0;
90+
--c--theme--colors--red-500: #e1000f;
91+
--c--theme--colors--yellow-500: #b7a73f;
92+
--c--theme--colors--rose-500: #e18b76;
8193
--c--theme--colors--primary-action: #1212ff;
8294
--c--theme--colors--primary-bg: #fafafa;
8395
--c--theme--colors--blue-400: #7ab1e8;
84-
--c--theme--colors--blue-500: #417dc4;
8596
--c--theme--colors--blue-600: #3558a2;
8697
--c--theme--colors--brown-400: #e6be92;
87-
--c--theme--colors--brown-500: #bd987a;
8898
--c--theme--colors--brown-600: #745b47;
8999
--c--theme--colors--cyan-400: #34bab5;
90-
--c--theme--colors--cyan-500: #009099;
91100
--c--theme--colors--cyan-600: #006a6f;
92101
--c--theme--colors--gold-400: #ffca00;
93-
--c--theme--colors--gold-500: #c3992a;
94102
--c--theme--colors--gold-600: #695240;
95103
--c--theme--colors--green-400: #34cb6a;
96-
--c--theme--colors--green-500: #00a95f;
97104
--c--theme--colors--green-600: #297254;
98105
--c--theme--colors--olive-400: #99c221;
99-
--c--theme--colors--olive-500: #68a532;
100106
--c--theme--colors--olive-600: #447049;
101107
--c--theme--colors--orange-400: #ff732c;
102-
--c--theme--colors--orange-500: #e4794a;
103108
--c--theme--colors--orange-600: #755348;
104109
--c--theme--colors--pink-400: #ffb7ae;
105110
--c--theme--colors--pink-500: #e18b76;
106111
--c--theme--colors--pink-600: #8d533e;
107112
--c--theme--colors--purple-400: #ce70cc;
108-
--c--theme--colors--purple-500: #a558a0;
109113
--c--theme--colors--purple-600: #6e445a;
110114
--c--theme--colors--yellow-400: #d8c634;
111-
--c--theme--colors--yellow-500: #b7a73f;
112115
--c--theme--colors--yellow-600: #66673d;
113116
--c--theme--font--sizes--h1: 2rem;
114117
--c--theme--font--sizes--h2: 1.75rem;
@@ -192,6 +195,10 @@
192195
--c--theme--logo--widthfooter: 220px;
193196
--c--theme--logo--alt: gouvernement logo;
194197
--c--components--modal--width-small: 342px;
198+
--c--components--tooltip--padding: 4px 8px;
199+
--c--components--tooltip--background-color: var(
200+
--c--theme--colors--greyscale-1000
201+
);
195202
--c--components--button--medium-height: 40px;
196203
--c--components--button--medium-text-height: 40px;
197204
--c--components--button--border-radius: 4px;
@@ -817,6 +824,54 @@
817824
color: var(--c--theme--colors--greyscale-1000);
818825
}
819826

827+
.clr-danger-050 {
828+
color: var(--c--theme--colors--danger-050);
829+
}
830+
831+
.clr-blue-500 {
832+
color: var(--c--theme--colors--blue-500);
833+
}
834+
835+
.clr-brown-500 {
836+
color: var(--c--theme--colors--brown-500);
837+
}
838+
839+
.clr-cyan-500 {
840+
color: var(--c--theme--colors--cyan-500);
841+
}
842+
843+
.clr-gold-500 {
844+
color: var(--c--theme--colors--gold-500);
845+
}
846+
847+
.clr-green-500 {
848+
color: var(--c--theme--colors--green-500);
849+
}
850+
851+
.clr-olive-500 {
852+
color: var(--c--theme--colors--olive-500);
853+
}
854+
855+
.clr-orange-500 {
856+
color: var(--c--theme--colors--orange-500);
857+
}
858+
859+
.clr-purple-500 {
860+
color: var(--c--theme--colors--purple-500);
861+
}
862+
863+
.clr-red-500 {
864+
color: var(--c--theme--colors--red-500);
865+
}
866+
867+
.clr-yellow-500 {
868+
color: var(--c--theme--colors--yellow-500);
869+
}
870+
871+
.clr-rose-500 {
872+
color: var(--c--theme--colors--rose-500);
873+
}
874+
820875
.clr-primary-action {
821876
color: var(--c--theme--colors--primary-action);
822877
}
@@ -829,10 +884,6 @@
829884
color: var(--c--theme--colors--blue-400);
830885
}
831886

832-
.clr-blue-500 {
833-
color: var(--c--theme--colors--blue-500);
834-
}
835-
836887
.clr-blue-600 {
837888
color: var(--c--theme--colors--blue-600);
838889
}
@@ -841,10 +892,6 @@
841892
color: var(--c--theme--colors--brown-400);
842893
}
843894

844-
.clr-brown-500 {
845-
color: var(--c--theme--colors--brown-500);
846-
}
847-
848895
.clr-brown-600 {
849896
color: var(--c--theme--colors--brown-600);
850897
}
@@ -853,10 +900,6 @@
853900
color: var(--c--theme--colors--cyan-400);
854901
}
855902

856-
.clr-cyan-500 {
857-
color: var(--c--theme--colors--cyan-500);
858-
}
859-
860903
.clr-cyan-600 {
861904
color: var(--c--theme--colors--cyan-600);
862905
}
@@ -865,10 +908,6 @@
865908
color: var(--c--theme--colors--gold-400);
866909
}
867910

868-
.clr-gold-500 {
869-
color: var(--c--theme--colors--gold-500);
870-
}
871-
872911
.clr-gold-600 {
873912
color: var(--c--theme--colors--gold-600);
874913
}
@@ -877,10 +916,6 @@
877916
color: var(--c--theme--colors--green-400);
878917
}
879918

880-
.clr-green-500 {
881-
color: var(--c--theme--colors--green-500);
882-
}
883-
884919
.clr-green-600 {
885920
color: var(--c--theme--colors--green-600);
886921
}
@@ -889,10 +924,6 @@
889924
color: var(--c--theme--colors--olive-400);
890925
}
891926

892-
.clr-olive-500 {
893-
color: var(--c--theme--colors--olive-500);
894-
}
895-
896927
.clr-olive-600 {
897928
color: var(--c--theme--colors--olive-600);
898929
}
@@ -901,10 +932,6 @@
901932
color: var(--c--theme--colors--orange-400);
902933
}
903934

904-
.clr-orange-500 {
905-
color: var(--c--theme--colors--orange-500);
906-
}
907-
908935
.clr-orange-600 {
909936
color: var(--c--theme--colors--orange-600);
910937
}
@@ -925,10 +952,6 @@
925952
color: var(--c--theme--colors--purple-400);
926953
}
927954

928-
.clr-purple-500 {
929-
color: var(--c--theme--colors--purple-500);
930-
}
931-
932955
.clr-purple-600 {
933956
color: var(--c--theme--colors--purple-600);
934957
}
@@ -937,10 +960,6 @@
937960
color: var(--c--theme--colors--yellow-400);
938961
}
939962

940-
.clr-yellow-500 {
941-
color: var(--c--theme--colors--yellow-500);
942-
}
943-
944963
.clr-yellow-600 {
945964
color: var(--c--theme--colors--yellow-600);
946965
}
@@ -1261,6 +1280,54 @@
12611280
background-color: var(--c--theme--colors--greyscale-1000);
12621281
}
12631282

1283+
.bg-danger-050 {
1284+
background-color: var(--c--theme--colors--danger-050);
1285+
}
1286+
1287+
.bg-blue-500 {
1288+
background-color: var(--c--theme--colors--blue-500);
1289+
}
1290+
1291+
.bg-brown-500 {
1292+
background-color: var(--c--theme--colors--brown-500);
1293+
}
1294+
1295+
.bg-cyan-500 {
1296+
background-color: var(--c--theme--colors--cyan-500);
1297+
}
1298+
1299+
.bg-gold-500 {
1300+
background-color: var(--c--theme--colors--gold-500);
1301+
}
1302+
1303+
.bg-green-500 {
1304+
background-color: var(--c--theme--colors--green-500);
1305+
}
1306+
1307+
.bg-olive-500 {
1308+
background-color: var(--c--theme--colors--olive-500);
1309+
}
1310+
1311+
.bg-orange-500 {
1312+
background-color: var(--c--theme--colors--orange-500);
1313+
}
1314+
1315+
.bg-purple-500 {
1316+
background-color: var(--c--theme--colors--purple-500);
1317+
}
1318+
1319+
.bg-red-500 {
1320+
background-color: var(--c--theme--colors--red-500);
1321+
}
1322+
1323+
.bg-yellow-500 {
1324+
background-color: var(--c--theme--colors--yellow-500);
1325+
}
1326+
1327+
.bg-rose-500 {
1328+
background-color: var(--c--theme--colors--rose-500);
1329+
}
1330+
12641331
.bg-primary-action {
12651332
background-color: var(--c--theme--colors--primary-action);
12661333
}
@@ -1273,10 +1340,6 @@
12731340
background-color: var(--c--theme--colors--blue-400);
12741341
}
12751342

1276-
.bg-blue-500 {
1277-
background-color: var(--c--theme--colors--blue-500);
1278-
}
1279-
12801343
.bg-blue-600 {
12811344
background-color: var(--c--theme--colors--blue-600);
12821345
}
@@ -1285,10 +1348,6 @@
12851348
background-color: var(--c--theme--colors--brown-400);
12861349
}
12871350

1288-
.bg-brown-500 {
1289-
background-color: var(--c--theme--colors--brown-500);
1290-
}
1291-
12921351
.bg-brown-600 {
12931352
background-color: var(--c--theme--colors--brown-600);
12941353
}
@@ -1297,10 +1356,6 @@
12971356
background-color: var(--c--theme--colors--cyan-400);
12981357
}
12991358

1300-
.bg-cyan-500 {
1301-
background-color: var(--c--theme--colors--cyan-500);
1302-
}
1303-
13041359
.bg-cyan-600 {
13051360
background-color: var(--c--theme--colors--cyan-600);
13061361
}
@@ -1309,10 +1364,6 @@
13091364
background-color: var(--c--theme--colors--gold-400);
13101365
}
13111366

1312-
.bg-gold-500 {
1313-
background-color: var(--c--theme--colors--gold-500);
1314-
}
1315-
13161367
.bg-gold-600 {
13171368
background-color: var(--c--theme--colors--gold-600);
13181369
}
@@ -1321,10 +1372,6 @@
13211372
background-color: var(--c--theme--colors--green-400);
13221373
}
13231374

1324-
.bg-green-500 {
1325-
background-color: var(--c--theme--colors--green-500);
1326-
}
1327-
13281375
.bg-green-600 {
13291376
background-color: var(--c--theme--colors--green-600);
13301377
}
@@ -1333,10 +1380,6 @@
13331380
background-color: var(--c--theme--colors--olive-400);
13341381
}
13351382

1336-
.bg-olive-500 {
1337-
background-color: var(--c--theme--colors--olive-500);
1338-
}
1339-
13401383
.bg-olive-600 {
13411384
background-color: var(--c--theme--colors--olive-600);
13421385
}
@@ -1345,10 +1388,6 @@
13451388
background-color: var(--c--theme--colors--orange-400);
13461389
}
13471390

1348-
.bg-orange-500 {
1349-
background-color: var(--c--theme--colors--orange-500);
1350-
}
1351-
13521391
.bg-orange-600 {
13531392
background-color: var(--c--theme--colors--orange-600);
13541393
}
@@ -1369,10 +1408,6 @@
13691408
background-color: var(--c--theme--colors--purple-400);
13701409
}
13711410

1372-
.bg-purple-500 {
1373-
background-color: var(--c--theme--colors--purple-500);
1374-
}
1375-
13761411
.bg-purple-600 {
13771412
background-color: var(--c--theme--colors--purple-600);
13781413
}
@@ -1381,10 +1416,6 @@
13811416
background-color: var(--c--theme--colors--yellow-400);
13821417
}
13831418

1384-
.bg-yellow-500 {
1385-
background-color: var(--c--theme--colors--yellow-500);
1386-
}
1387-
13881419
.bg-yellow-600 {
13891420
background-color: var(--c--theme--colors--yellow-600);
13901421
}

0 commit comments

Comments
 (0)