💄(app-desk) integrate cunningham design system

Integrate cunningham design system into app desk.
It comes with some boilerplate code that will have to be
adapted to our needs when we will get the design.

src/frontend/app/desk/cunningham.ts

@@ -0,0 +1,179 @@
+const config = {
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          'primary-100': '#EDF5FA',
+          'primary-150': '#E5EEFA',
+          'info-150': '#E5EEFA',
+        },
+        font: {
+          sizes: {
+            ml: '0.938rem',
+            xl: '1.50rem',
+            t: '0.6875rem',
+            s: '0.75rem',
+            h1: '2.2rem',
+            h2: '1.7rem',
+            h3: '1.37rem',
+            h4: '1.15rem',
+            h5: '1rem',
+            h6: '0.87rem',
+          },
+          weights: {
+            thin: 100,
+            extrabold: 800,
+            black: 900,
+          },
+        },
+        spacings: {
+          '0': '0',
+          none: '0',
+          auto: 'auto',
+          bx: '2.2rem',
+          full: '100%',
+        },
+        breakpoints: {
+          xxs: '320px',
+          xs: '480px',
+        },
+      },
+      components: {
+        datagrid: {
+          header: {
+            weight: 'var(--c--theme--font--weights--extrabold)',
+            size: 'var(--c--theme--font--sizes--ml)',
+          },
+          cell: {
+            color: 'var(--c--theme--colors--primary-500)',
+            size: 'var(--c--theme--font--sizes--ml)',
+          },
+        },
+        'forms-checkbox': {
+          'background-color': {
+            hover: '#055fd214',
+          },
+          color: 'var(--c--theme--colors--primary-500)',
+          'font-size': 'var(--c--theme--font--sizes--ml)',
+        },
+        'forms-datepicker': {
+          'border-color': 'var(--c--theme--colors--primary-500)',
+          'value-color': 'var(--c--theme--colors--primary-500)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-datepicker--border-radius)',
+            focus: 'var(--c--components--forms-datepicker--border-radius)',
+          },
+        },
+        'forms-field': {
+          color: 'var(--c--theme--colors--primary-500)',
+          'value-color': 'var(--c--theme--colors--primary-500)',
+          width: 'auto',
+        },
+        'forms-input': {
+          'value-color': 'var(--c--theme--colors--primary-500)',
+          'border-color': 'var(--c--theme--colors--primary-500)',
+        },
+        'forms-labelledbox': {
+          'label-color': {
+            small: 'var(--c--theme--colors--primary-500)',
+            big: {
+              disabled: 'var(--c--theme--colors--greyscale-400)',
+            },
+          },
+        },
+        'forms-select': {
+          'border-color': 'var(--c--theme--colors--primary-500)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-select--border-radius)',
+            focus: 'var(--c--components--forms-select--border-radius)',
+          },
+          'font-size': 'var(--c--theme--font--sizes--ml)',
+          'item-background-color': {
+            hover: 'var(--c--theme--colors--primary-100)',
+          },
+          'item-color': 'var(--c--theme--colors--primary-500)',
+          'value-color': 'var(--c--theme--colors--primary-500)',
+        },
+        'forms-switch': {
+          'accent-color': 'var(--c--theme--colors--primary-400)',
+        },
+        'forms-textarea': {
+          'border-color': 'var(--c--components--forms-textarea--border-color)',
+          'border-color-hover':
+            'var(--c--components--forms-textarea--border-color)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-textarea--border-radius)',
+            focus: 'var(--c--components--forms-textarea--border-radius)',
+          },
+          color: 'var(--c--theme--colors--primary-500)',
+          disabled: {
+            'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
+          },
+        },
+        button: {
+          'border-radius': {
+            active: 'var(--c--components--button--border-radius)',
+          },
+          'medium-height': 'auto',
+          'small-height': 'auto',
+          success: {
+            color: 'white',
+            'color-disabled': 'white',
+            'color-hover': 'white',
+            background: {
+              color: 'var(--c--theme--colors--success-600)',
+              'color-disabled': 'var(--c--theme--colors--greyscale-300)',
+              'color-hover': 'var(--c--theme--colors--success-800)',
+            },
+          },
+          danger: {
+            'color-hover': 'white',
+            background: {
+              color: 'var(--c--theme--colors--danger-400)',
+              'color-hover': 'var(--c--theme--colors--danger-500)',
+              'color-disabled': 'var(--c--theme--colors--danger-100)',
+            },
+          },
+          primary: {
+            color: 'var(--c--theme--colors--primary-text)',
+            'color-active': 'var(--c--theme--colors--primary-text)',
+            background: {
+              color: 'var(--c--theme--colors--primary-400)',
+              'color-active': 'var(--c--theme--colors--primary-500)',
+            },
+            border: {
+              'color-active': 'transparent',
+            },
+          },
+          secondary: {
+            color: 'var(--c--theme--colors--primary-500)',
+            'color-hover': 'var(--c--theme--colors--primary-text)',
+            background: {
+              color: 'white',
+              'color-hover': 'var(--c--theme--colors--primary-700)',
+            },
+            border: {
+              color: 'var(--c--theme--colors--primary-200)',
+            },
+          },
+          tertiary: {
+            color: 'var(--c--theme--colors--primary-500)',
+            'color-disabled': 'var(--c--theme--colors--greyscale-600)',
+            background: {
+              'color-hover': 'var(--c--theme--colors--primary-100)',
+              'color-disabled': 'var(--c--theme--colors--greyscale-200)',
+            },
+          },
+          disabled: {
+            color: 'white',
+            background: {
+              color: '#b3cef0',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default config;

src/frontend/app/desk/package.json

@@ -5,11 +5,13 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes",
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier --write ."
   },
   "dependencies": {
+    "@openfun/cunningham-react": "2.4.0",
     "next": "14.0.4",
     "react": "18",
     "react-dom": "18"

src/frontend/app/desk/src/app/layout.tsx

@@ -1,23 +1,38 @@
-import type { Metadata } from 'next';
+'use client';
+
+import { CunninghamProvider, Switch } from '@openfun/cunningham-react';
 import { Inter } from 'next/font/google';
+import { useState } from 'react';
 
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [themeDark, setThemeDark] = useState(false);
+
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <CunninghamProvider theme={themeDark ? 'dark' : 'default'}>
+          <div
+            style={{
+              backgroundColor: themeDark ? '#555' : 'white',
+            }}
+          >
+            <Switch
+              label="Dark"
+              onChange={() => setThemeDark(!themeDark)}
+              checked={themeDark}
+            />
+            {children}
+          </div>
+        </CunninghamProvider>
+      </body>
     </html>
   );
 }

src/frontend/app/desk/src/cunningham/cunningham-custom-tokens.css

@@ -0,0 +1,29 @@
+:root {
+  /**
+      * Input
+     */
+  --c--components--forms-input--border-radius--hover: var(
+    --c--components--forms-input--border-radius
+  );
+  --c--components--forms-input--border-radius--focus: var(
+    --c--components--forms-input--border-radius
+  );
+  --c--components--forms-input--border-color--hover: var(
+    --c--components--forms-input--border-color
+  );
+  /**
+      * Datepicker
+     **/
+  --c--components--forms-datepicker--border-color--hover: var(
+    --c--components--forms-datepicker--border-color
+  );
+  /**
+      * Select
+     **/
+  --c--components--forms-select--value-color--disabled: var(
+    --c--theme--colors--greyscale-400
+  );
+  --c--components--forms-labelledbox--label-color--big: var(
+    --c--theme--colors--primary-500
+  );
+}

src/frontend/app/desk/src/cunningham/cunningham-style.css

@@ -0,0 +1,299 @@
+@import '@openfun/cunningham-react/icons';
+@import '@openfun/cunningham-react/style';
+@import '@openfun/cunningham-react/fonts';
+@import './cunningham-tokens.css';
+@import './cunningham-custom-tokens.css';
+
+.c__input,
+.c__field,
+.c__select,
+.c__datagrid,
+.typo {
+  font-family: var(--c--theme--font--families--base);
+}
+.c__field {
+  line-height: initial;
+}
+.labelled-box label {
+  color: var(--c--theme--colors--primary-500);
+}
+.labelled-box--disabled label {
+  color: var(--c--components--forms-labelledbox--label-color--small--disabled);
+}
+.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
+  top: 50%;
+  transform: translateY(-50%);
+}
+/**
+ * Input
+ * TextArea
+*/
+.c__input__wrapper,
+.c__textarea__wrapper {
+  transition: all var(--c--theme--transitions--duration)
+    var(--c--theme--transitions--ease-out);
+}
+.c__input__wrapper:has(input[readonly]),
+.c__input__wrapper:has(input[readonly]) * {
+  cursor: default;
+}
+.c__textarea__wrapper:has(input.border-none),
+.c__textarea__wrapper:has(input.border-none) *,
+.c__input__wrapper:has(input.border-none),
+.c__input__wrapper:has(input.border-none) * {
+  border: none;
+}
+.c__input__wrapper:hover,
+.c__textarea__wrapper:hover {
+  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+}
+.c__textarea__wrapper--disabled:hover,
+.c__input__wrapper--disabled:hover,
+.c__input__wrapper:hover:has(input[readonly]) {
+  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 0px;
+}
+.c__input__wrapper--disabled {
+  color: var(--c--components--forms-input--value-color--disabled);
+}
+.c__input__wrapper .labelled-box__label.placeholder {
+  cursor: inherit;
+}
+.c__input__wrapper .c__input,
+.c__textarea__wrapper .c__textarea {
+  width: 100%;
+}
+.c__input__wrapper--disabled .c__input {
+  color: var(--c--components--forms-input--value-color--disabled);
+}
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  transition:
+    background-color 0s 600000s,
+    color 0s 600000s;
+}
+.c__textarea__wrapper .c__textarea {
+  color: var(--c--components--forms-textarea--color);
+}
+.c__textarea__wrapper:hover {
+  border-color: var(--c--components--forms-textarea--border-color-hover);
+}
+.c__textarea__wrapper--disabled:hover {
+  border-color: var(
+    --c--components--forms-textarea--disabled--border-color-hover
+  );
+}
+/**
+ * Select
+*/
+.c_select__no_border .c__select .c__select__wrapper,
+.c_select__no_border .c__select .c__select__wrapper:hover,
+.c_select__no_border
+  .c__select:not(.c__select--disabled)
+  .c__select__wrapper:hover {
+  border: none;
+  box-shadow: none;
+}
+.c__select__wrapper {
+  transition: all var(--c--theme--transitions--duration)
+    var(--c--theme--transitions--ease-out);
+  min-height: var(--c--components--forms-select--height);
+  height: auto;
+}
+.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
+  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+}
+.c__select__menu__item {
+  transition: all var(--c--theme--transitions--duration)
+    var(--c--theme--transitions--ease-out);
+}
+.c__select--disabled .c__select__wrapper label,
+.c__select--disabled .c__select__wrapper input,
+.c_select__no_bg .c__select__wrapper {
+  background: none;
+}
+.c__select__wrapper:focus-within .labelled-box--disabled label {
+  color: var(--c--components--forms-labelledbox--label-color--small--disabled);
+}
+.c__select__wrapper .labelled-box {
+  display: flex;
+  gap: 0.6rem;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.c__select__wrapper .labelled-box .labelled-box__children {
+  padding: unset;
+  padding-right: 5rem;
+}
+.c__select__wrapper .labelled-box .c__select__inner__actions {
+  right: 0px;
+  top: 50%;
+  position: absolute;
+}
+.c__select__wrapper label {
+  position: relative;
+  padding-right: 5rem;
+  max-width: none;
+}
+.c__select__wrapper .c__select__inner__actions__open:focus {
+  outline: none;
+}
+.c__select__wrapper .labelled-box__label.c__offscreen {
+  display: none;
+}
+/**
+ * DataGrid
+*/
+.c__datagrid > table td {
+  max-width: 10rem;
+  white-space: normal;
+  color: var(--c--components--datagrid--cell--color);
+  font-size: var(--c--components--datagrid--cell--size);
+}
+.c__datagrid > table th .c__datagrid__header {
+  color: var(--c--theme--colors--primary-500);
+  font-weight: var(--c--components--datagrid--header--weight);
+  font-size: var(--c--components--datagrid--header--size);
+}
+.c__datagrid > table tbody tr {
+  border: 1px var(--c--theme--colors--primary-100) solid;
+}
+.c__datagrid > .c__pagination {
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+@media (max-width: 380px) {
+  .c__datagrid > .c__pagination {
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+/**
+ * Date picker
+*/
+.c__popover.c__popover--borderless {
+  z-index: 3;
+}
+.c__date-picker__wrapper {
+  transition: all var(--c--theme--transitions--duration)
+    var(--c--theme--transitions--ease-out);
+}
+.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
+  box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
+}
+.c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover
+  .c__date-picker__wrapper {
+  box-shadow: var(--c--theme--colors--danger-300) 0px 0px 0px 2px;
+}
+.c__date-picker__wrapper button[aria-label='Clear date'],
+.c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * {
+  color: var(--c--theme--colors--danger-300);
+}
+/**
+ * Others
+*/
+.c__checkbox:focus-within {
+  border-color: transparent;
+  background-color: transparent;
+}
+.c__checkbox {
+  transition: all 0.8s ease-in-out;
+}
+/**
+ * Button
+*/
+.c__button {
+  text-decoration: none;
+}
+.c__button:hover.c__button-no-bg,
+.c__button.c__button-no-bg,
+.c__button:disabled.c__button-no-bg {
+  background-color: transparent;
+}
+.c__button--medium {
+  padding: 0.9rem var(--c--theme--spacings--s);
+}
+.c__button--small {
+  padding: 0.6rem 0.75rem;
+}
+.c__button--with-icon--right {
+  padding: 0.7rem var(--c--theme--spacings--t) 0.7rem
+    var(--c--theme--spacings--s);
+}
+.c__button--primary {
+  background-color: var(--c--components--button--primary--background--color);
+  color: var(--c--components--button--primary--color);
+}
+.c__button--primary:active,
+.c__button--primary.c__button--active {
+  background-color: var(
+    --c--components--button--primary--background--color-active
+  );
+  color: var(--c--components--button--primary--color-active);
+  border-color: var(--c--components--button--primary--border--color-active);
+}
+.c__button:disabled {
+  background-color: var(--c--components--button--disabled--background--color);
+  color: var(--c--components--button--disabled--color);
+}
+.c__button--success {
+  background-color: var(--c--components--button--success--background--color);
+  color: var(--c--components--button--success--color);
+}
+.c__button--success:hover,
+.c__button--success:focus-visible {
+  background-color: var(
+    --c--components--button--success--background--color-hover
+  );
+  color: var(--c--components--button--success--color-hover);
+}
+.c__button--success:disabled {
+  background-color: var(
+    --c--components--button--success--background--color-disabled
+  );
+  color: var(--c--components--button--success--color-disabled);
+}
+.c__button--secondary {
+  background-color: var(--c--components--button--secondary--background--color);
+  color: var(--c--components--button--secondary--color);
+  border: 1px solid var(--c--components--button--secondary--border--color);
+}
+.c__button--secondary:hover,
+.c__button--secondary:focus-visible {
+  background-color: var(
+    --c--components--button--secondary--background--color-hover
+  );
+  color: var(--c--components--button--secondary--color-hover);
+}
+.c__button--tertiary {
+  color: var(--c--components--button--tertiary--color);
+  border: none;
+}
+.c__button--tertiary:hover,
+.c__button--tertiary:focus-visible {
+  background-color: var(
+    --c--components--button--tertiary--background--color-hover
+  );
+  color: var(--c--components--button--tertiary--color);
+}
+.c__button--tertiary:disabled {
+  background-color: var(
+    --c--components--button--tertiary--background--color-disabled
+  );
+  color: var(--c--components--button--tertiary--color-disabled);
+}
+.c__button--danger {
+  background-color: var(--c--components--button--danger--background--color);
+}
+.c__button--danger:hover,
+.c__button--danger:focus-visible {
+  background-color: var(
+    --c--components--button--danger--background--color-hover
+  );
+  color: var(--c--components--button--danger--color-hover);
+}
+.c__button--danger:disabled {
+  background-color: var(
+    --c--components--button--danger--background--color-disabled
+  );
+}

src/frontend/app/desk/src/cunningham/cunningham-tokens.ts

@@ -0,0 +1,323 @@
+export const tokens = {
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          'secondary-text': '#555F6B',
+          'secondary-100': '#F2F7FC',
+          'secondary-200': '#EBF3FA',
+          'secondary-300': '#E2EEF8',
+          'secondary-400': '#DDEAF7',
+          'secondary-500': '#D4E5F5',
+          'secondary-600': '#C1D0DF',
+          'secondary-700': '#97A3AE',
+          'secondary-800': '#757E87',
+          'secondary-900': '#596067',
+          'info-text': '#FFFFFF',
+          'info-100': '#EBF2FC',
+          'info-200': '#8CB5EA',
+          'info-300': '#5894E1',
+          'info-400': '#377FDB',
+          'info-500': '#055FD2',
+          'info-600': '#0556BF',
+          'info-700': '#044395',
+          'info-800': '#033474',
+          'info-900': '#022858',
+          'greyscale-100': '#FAFAFB',
+          'greyscale-200': '#F3F4F4',
+          'greyscale-300': '#E7E8EA',
+          'greyscale-400': '#C2C6CA',
+          'greyscale-500': '#9EA3AA',
+          'greyscale-600': '#79818A',
+          'greyscale-700': '#555F6B',
+          'greyscale-800': '#303C4B',
+          'greyscale-900': '#0C1A2B',
+          'greyscale-000': '#FFFFFF',
+          'primary-100': '#EDF5FA',
+          'primary-200': '#8CB5EA',
+          'primary-300': '#5894E1',
+          'primary-400': '#377FDB',
+          'primary-500': '#055FD2',
+          'primary-600': '#0556BF',
+          'primary-700': '#044395',
+          'primary-800': '#033474',
+          'primary-900': '#022858',
+          'success-100': '#EFFCD3',
+          'success-200': '#DBFAA9',
+          'success-300': '#BEF27C',
+          'success-400': '#A0E659',
+          'success-500': '#76D628',
+          'success-600': '#5AB81D',
+          'success-700': '#419A14',
+          'success-800': '#2C7C0C',
+          'success-900': '#1D6607',
+          'warning-100': '#FFF8CD',
+          'warning-200': '#FFEF9B',
+          'warning-300': '#FFE469',
+          'warning-400': '#FFDA43',
+          'warning-500': '#FFC805',
+          'warning-600': '#DBA603',
+          'warning-700': '#B78702',
+          'warning-800': '#936901',
+          'warning-900': '#7A5400',
+          'danger-100': '#F4B0B0',
+          'danger-200': '#EE8A8A',
+          'danger-300': '#E65454',
+          'danger-400': '#E13333',
+          'danger-500': '#DA0000',
+          'danger-600': '#C60000',
+          'danger-700': '#9B0000',
+          'danger-800': '#780000',
+          'danger-900': '#5C0000',
+          'primary-text': '#FFFFFF',
+          'success-text': '#FFFFFF',
+          'warning-text': '#FFFFFF',
+          'danger-text': '#FFFFFF',
+          'primary-150': '#E5EEFA',
+          'info-150': '#E5EEFA',
+        },
+        font: {
+          sizes: {
+            h1: '2.2rem',
+            h2: '1.7rem',
+            h3: '1.37rem',
+            h4: '1.15rem',
+            h5: '1rem',
+            h6: '0.87rem',
+            l: '1rem',
+            m: '0.8125rem',
+            s: '0.75rem',
+            ml: '0.938rem',
+            xl: '1.50rem',
+            t: '0.6875rem',
+          },
+          weights: {
+            thin: 100,
+            light: 300,
+            regular: 400,
+            medium: 500,
+            bold: 600,
+            extrabold: 800,
+            black: 900,
+          },
+          families: {
+            base: '"Roboto Flex Variable", sans-serif',
+            accent: '"Roboto Flex Variable", sans-serif',
+          },
+          letterSpacings: {
+            h1: 'normal',
+            h2: 'normal',
+            h3: 'normal',
+            h4: 'normal',
+            h5: '1px',
+            h6: 'normal',
+            l: 'normal',
+            m: 'normal',
+            s: 'normal',
+          },
+        },
+        spacings: {
+          '0': '0',
+          xl: '4rem',
+          l: '3rem',
+          b: '1.625rem',
+          s: '1rem',
+          t: '0.5rem',
+          st: '0.25rem',
+          none: '0',
+          auto: 'auto',
+          bx: '2.2rem',
+          full: '100%',
+        },
+        transitions: {
+          'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
+          'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
+          'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+          duration: '250ms',
+        },
+        breakpoints: {
+          xs: '480px',
+          sm: '576px',
+          md: '768px',
+          lg: '992px',
+          xl: '1200px',
+          xxl: '1400px',
+          xxs: '320px',
+        },
+      },
+      components: {
+        datagrid: {
+          header: {
+            weight: 'var(--c--theme--font--weights--extrabold)',
+            size: 'var(--c--theme--font--sizes--ml)',
+          },
+          cell: {
+            color: 'var(--c--theme--colors--primary-500)',
+            size: 'var(--c--theme--font--sizes--ml)',
+          },
+        },
+        'forms-checkbox': {
+          'background-color': { hover: '#055fd214' },
+          color: 'var(--c--theme--colors--primary-500)',
+          'font-size': 'var(--c--theme--font--sizes--ml)',
+        },
+        'forms-datepicker': {
+          'border-color': 'var(--c--theme--colors--primary-500)',
+          'value-color': 'var(--c--theme--colors--primary-500)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-datepicker--border-radius)',
+            focus: 'var(--c--components--forms-datepicker--border-radius)',
+          },
+        },
+        'forms-field': {
+          color: 'var(--c--theme--colors--primary-500)',
+          'value-color': 'var(--c--theme--colors--primary-500)',
+          width: 'auto',
+        },
+        'forms-input': {
+          'value-color': 'var(--c--theme--colors--primary-500)',
+          'border-color': 'var(--c--theme--colors--primary-500)',
+        },
+        'forms-labelledbox': {
+          'label-color': {
+            small: 'var(--c--theme--colors--primary-500)',
+            big: { disabled: 'var(--c--theme--colors--greyscale-400)' },
+          },
+        },
+        'forms-select': {
+          'border-color': 'var(--c--theme--colors--primary-500)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-select--border-radius)',
+            focus: 'var(--c--components--forms-select--border-radius)',
+          },
+          'font-size': 'var(--c--theme--font--sizes--ml)',
+          'item-background-color': {
+            hover: 'var(--c--theme--colors--primary-100)',
+          },
+          'item-color': 'var(--c--theme--colors--primary-500)',
+          'value-color': 'var(--c--theme--colors--primary-500)',
+        },
+        'forms-switch': {
+          'accent-color': 'var(--c--theme--colors--primary-400)',
+        },
+        'forms-textarea': {
+          'border-color': 'var(--c--components--forms-textarea--border-color)',
+          'border-color-hover':
+            'var(--c--components--forms-textarea--border-color)',
+          'border-radius': {
+            hover: 'var(--c--components--forms-textarea--border-radius)',
+            focus: 'var(--c--components--forms-textarea--border-radius)',
+          },
+          color: 'var(--c--theme--colors--primary-500)',
+          disabled: {
+            'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
+          },
+        },
+        button: {
+          'border-radius': {
+            active: 'var(--c--components--button--border-radius)',
+          },
+          'medium-height': 'auto',
+          'small-height': 'auto',
+          success: {
+            color: 'white',
+            'color-disabled': 'white',
+            'color-hover': 'white',
+            background: {
+              color: 'var(--c--theme--colors--success-600)',
+              'color-disabled': 'var(--c--theme--colors--greyscale-300)',
+              'color-hover': 'var(--c--theme--colors--success-800)',
+            },
+          },
+          danger: {
+            'color-hover': 'white',
+            background: {
+              color: 'var(--c--theme--colors--danger-400)',
+              'color-hover': 'var(--c--theme--colors--danger-500)',
+              'color-disabled': 'var(--c--theme--colors--danger-100)',
+            },
+          },
+          primary: {
+            color: 'var(--c--theme--colors--primary-text)',
+            'color-active': 'var(--c--theme--colors--primary-text)',
+            background: {
+              color: 'var(--c--theme--colors--primary-400)',
+              'color-active': 'var(--c--theme--colors--primary-500)',
+            },
+            border: { 'color-active': 'transparent' },
+          },
+          secondary: {
+            color: 'var(--c--theme--colors--primary-500)',
+            'color-hover': 'var(--c--theme--colors--primary-text)',
+            background: {
+              color: 'white',
+              'color-hover': 'var(--c--theme--colors--primary-700)',
+            },
+            border: { color: 'var(--c--theme--colors--primary-200)' },
+          },
+          tertiary: {
+            color: 'var(--c--theme--colors--primary-500)',
+            'color-disabled': 'var(--c--theme--colors--greyscale-600)',
+            background: {
+              'color-hover': 'var(--c--theme--colors--primary-100)',
+              'color-disabled': 'var(--c--theme--colors--greyscale-200)',
+            },
+          },
+          disabled: { color: 'white', background: { color: '#b3cef0' } },
+        },
+      },
+    },
+    dark: {
+      theme: {
+        colors: {
+          'greyscale-100': '#182536',
+          'greyscale-200': '#303C4B',
+          'greyscale-300': '#555F6B',
+          'greyscale-400': '#79818A',
+          'greyscale-500': '#9EA3AA',
+          'greyscale-600': '#C2C6CA',
+          'greyscale-700': '#E7E8EA',
+          'greyscale-800': '#F3F4F4',
+          'greyscale-900': '#FAFAFB',
+          'greyscale-000': '#0C1A2B',
+          'primary-100': '#3B4C62',
+          'primary-200': '#4D6481',
+          'primary-300': '#6381A6',
+          'primary-400': '#7FA5D5',
+          'primary-500': '#8CB5EA',
+          'primary-600': '#A3C4EE',
+          'primary-700': '#C3D8F4',
+          'primary-800': '#DDE9F8',
+          'primary-900': '#F4F8FD',
+          'success-100': '#EEF8D7',
+          'success-200': '#D9F1B2',
+          'success-300': '#BDE985',
+          'success-400': '#A0E25D',
+          'success-500': '#76D628',
+          'success-600': '#5BB520',
+          'success-700': '#43941A',
+          'success-800': '#307414',
+          'success-900': '#225D10',
+          'warning-100': '#F7F3D5',
+          'warning-200': '#F0E5AA',
+          'warning-300': '#E8D680',
+          'warning-400': '#E3C95F',
+          'warning-500': '#D9B32B',
+          'warning-600': '#BD9721',
+          'warning-700': '#9D7B1C',
+          'warning-800': '#7E6016',
+          'warning-900': '#684D12',
+          'danger-100': '#F8D0D0',
+          'danger-200': '#F09898',
+          'danger-300': '#F09898',
+          'danger-400': '#ED8585',
+          'danger-500': '#E96666',
+          'danger-600': '#DD6666',
+          'danger-700': '#C36666',
+          'danger-800': '#AE6666',
+          'danger-900': '#9D6666',
+        },
+      },
+    },
+  },
+};

src/frontend/app/desk/src/cunningham/index.ts

@@ -0,0 +1,7 @@
+import { tokens } from './cunningham-tokens';
+
+const themeTokens = tokens.themes.default.theme;
+const colorsTokens = tokens.themes.default.theme.colors;
+const componentTokens = tokens.themes.default.components;
+
+export { tokens, themeTokens, componentTokens, colorsTokens };