➕(frontend) add cunningham design system

Add cunningham design system to the apps.
We generate the necessary files from lib-common to serve
the design system to the apps.

CHANGELOG.md

@@ -11,6 +11,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Added
 
 - Create a default playlist for new shibboleth user
+- Add Cunningham design system (#2297)
 - Lifecycle rule on source bucket to expire uploaded
   object after 21 days.
 - Add P2p feature on videojs player

src/frontend/apps/lti_site/index.tsx

@@ -1,5 +1,6 @@
 import 'iframe-resizer/js/iframeResizer.contentWindow';
 
+import 'lib-common/cunningham-style';
 import { serviceWorkerRegistration } from 'lib-components';
 import { createRoot } from 'react-dom/client';
 

src/frontend/apps/lti_site/package.json

@@ -84,6 +84,7 @@
     "@converse/headless": "8.0.1",
     "@formatjs/intl-pluralrules": "5.2.4",
     "@formatjs/intl-relativetimeformat": "11.2.4",
+    "@openfun/cunningham-react": "*",
     "@sentry/browser": "7.60.1",
     "buffer": "6.0.3",
     "core-js": "3.32.0",

src/frontend/apps/standalone_site/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@craco/craco": "7.1.0",
+    "@openfun/cunningham-react": "*",
     "grommet": "*",
     "grommet-icons": "4.11.0",
     "http-proxy-middleware": "2.0.6",

src/frontend/apps/standalone_site/src/index.tsx

@@ -1,4 +1,5 @@
 import 'init';
+import 'lib-common/cunningham-style';
 import { serviceWorkerRegistration } from 'lib-components';
 import 'public-path';
 import { createRoot } from 'react-dom/client';

src/frontend/package.json

@@ -41,6 +41,7 @@
     "@codemirror/language-data": "6.3.1",
     "@codemirror/state": "6.2.1",
     "@codemirror/view": "6.15.3",
+    "@openfun/cunningham-react": "0.10.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",

src/frontend/packages/lib_common/package.json

@@ -4,13 +4,21 @@
   "license": "MIT",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "default": "./src/index.ts"
+    },
+    "./cunningham-style": "./src/cunningham-style.css"
+  },
   "scripts": {
     "lint": "tsc --noEmit && eslint src/**/*.{ts,tsx}",
     "lint:fix": "yarn run lint --fix",
     "test": "cross-env TZ=UTC jest --passWithNoTests",
-    "prettier": "prettier --list-different '**/*.+(ts|tsx|json|js|jsx)' --ignore-path ../../../.prettierignore"
+    "prettier": "prettier --list-different '**/*.+(ts|tsx|json|js|jsx)' --ignore-path ../../../.prettierignore",
+    "build-theme": "cunningham -g css -o src"
   },
   "peerDependencies": {
+    "@openfun/cunningham-react": "*",
     "grommet": "*",
     "styled-components": "*",
     "react": "*",

src/frontend/packages/lib_common/src/cunningham-style.css

@@ -0,0 +1,3 @@
+@import '@openfun/cunningham-react/icons';
+@import '@openfun/cunningham-react/style';
+@import './cunningham-tokens.css';

src/frontend/packages/lib_common/src/cunningham-tokens.css

@@ -0,0 +1,99 @@
+:root {
+  --c--theme--colors--primary-text: #ffffff;
+  --c--theme--colors--primary-100: #ebf2fc;
+  --c--theme--colors--primary-200: #8cb5ea;
+  --c--theme--colors--primary-300: #5894e1;
+  --c--theme--colors--primary-400: #377fdb;
+  --c--theme--colors--primary-500: #055fd2;
+  --c--theme--colors--primary-600: #0556bf;
+  --c--theme--colors--primary-700: #044395;
+  --c--theme--colors--primary-800: #033474;
+  --c--theme--colors--primary-900: #022858;
+  --c--theme--colors--secondary-text: #555f6b;
+  --c--theme--colors--secondary-100: #f2f7fc;
+  --c--theme--colors--secondary-200: #ebf3fa;
+  --c--theme--colors--secondary-300: #e2eef8;
+  --c--theme--colors--secondary-400: #ddeaf7;
+  --c--theme--colors--secondary-500: #d4e5f5;
+  --c--theme--colors--secondary-600: #c1d0df;
+  --c--theme--colors--secondary-700: #97a3ae;
+  --c--theme--colors--secondary-800: #757e87;
+  --c--theme--colors--secondary-900: #596067;
+  --c--theme--colors--greyscale-000: #ffffff;
+  --c--theme--colors--greyscale-100: #fafafb;
+  --c--theme--colors--greyscale-200: #f3f4f4;
+  --c--theme--colors--greyscale-300: #e7e8ea;
+  --c--theme--colors--greyscale-400: #c2c6ca;
+  --c--theme--colors--greyscale-500: #9ea3aa;
+  --c--theme--colors--greyscale-600: #79818a;
+  --c--theme--colors--greyscale-700: #555f6b;
+  --c--theme--colors--greyscale-800: #303c4b;
+  --c--theme--colors--greyscale-900: #0c1a2b;
+  --c--theme--colors--success-text: #ffffff;
+  --c--theme--colors--success-100: #effcd3;
+  --c--theme--colors--success-200: #dbfaa9;
+  --c--theme--colors--success-300: #bef27c;
+  --c--theme--colors--success-400: #a0e659;
+  --c--theme--colors--success-500: #76d628;
+  --c--theme--colors--success-600: #5ab81d;
+  --c--theme--colors--success-700: #419a14;
+  --c--theme--colors--success-800: #2c7c0c;
+  --c--theme--colors--success-900: #1d6607;
+  --c--theme--colors--info-text: #ffffff;
+  --c--theme--colors--info-100: #ebf2fc;
+  --c--theme--colors--info-200: #8cb5ea;
+  --c--theme--colors--info-300: #5894e1;
+  --c--theme--colors--info-400: #377fdb;
+  --c--theme--colors--info-500: #055fd2;
+  --c--theme--colors--info-600: #0556bf;
+  --c--theme--colors--info-700: #044395;
+  --c--theme--colors--info-800: #033474;
+  --c--theme--colors--info-900: #022858;
+  --c--theme--colors--warning-text: #ffffff;
+  --c--theme--colors--warning-100: #fff8cd;
+  --c--theme--colors--warning-200: #ffef9b;
+  --c--theme--colors--warning-300: #ffe469;
+  --c--theme--colors--warning-400: #ffda43;
+  --c--theme--colors--warning-500: #ffc805;
+  --c--theme--colors--warning-600: #dba603;
+  --c--theme--colors--warning-700: #b78702;
+  --c--theme--colors--warning-800: #936901;
+  --c--theme--colors--warning-900: #7a5400;
+  --c--theme--colors--danger-text: #ffffff;
+  --c--theme--colors--danger-100: #f4b0b0;
+  --c--theme--colors--danger-200: #ee8a8a;
+  --c--theme--colors--danger-300: #e65454;
+  --c--theme--colors--danger-400: #e13333;
+  --c--theme--colors--danger-500: #da0000;
+  --c--theme--colors--danger-600: #c60000;
+  --c--theme--colors--danger-700: #9b0000;
+  --c--theme--colors--danger-800: #780000;
+  --c--theme--colors--danger-900: #5c0000;
+  --c--theme--font--sizes--h1: 1.75rem;
+  --c--theme--font--sizes--h2: 1.375rem;
+  --c--theme--font--sizes--h3: 1.125rem;
+  --c--theme--font--sizes--h4: 0.8125rem;
+  --c--theme--font--sizes--h5: 0.625rem;
+  --c--theme--font--sizes--h6: 0.5rem;
+  --c--theme--font--sizes--l: 1rem;
+  --c--theme--font--sizes--m: 0.8125rem;
+  --c--theme--font--sizes--s: 0.6875rem;
+  --c--theme--font--weights--thin: 100;
+  --c--theme--font--weights--regular: 300;
+  --c--theme--font--weights--medium: 400;
+  --c--theme--font--weights--bold: 500;
+  --c--theme--font--weights--extrabold: 700;
+  --c--theme--font--weights--black: 900;
+  --c--theme--font--families--base: Roboto-Regular;
+  --c--theme--font--families--accent: Roboto-Regular;
+  --c--theme--spacings--xl: 4rem;
+  --c--theme--spacings--l: 3rem;
+  --c--theme--spacings--b: 1.625rem;
+  --c--theme--spacings--s: 1rem;
+  --c--theme--spacings--t: 0.5rem;
+  --c--theme--spacings--st: 0.25rem;
+  --c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+  --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+  --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --c--theme--transitions--duration: 250ms;
+}