🔧(lib-common) update cunningham tokens

Many custom tokens could be generated in the cunningham way, this commit does it.
openfun · Nov 10, 2023 · 155d5c9 · 155d5c9
1 parent d35bbaf
commit 155d5c9
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 45 deletions.
diff --git a/src/frontend/packages/lib_common/cunningham.ts b/src/frontend/packages/lib_common/cunningham.ts
@@ -55,6 +55,16 @@ const config = {
         },
       },
       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-textarea': {
           'border-color': 'var(--c--components--forms-textarea--border-color)',
           'border-color-hover':
@@ -63,6 +73,7 @@ const config = {
             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)',
           },
@@ -74,6 +85,21 @@ const config = {
           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)',
+        },
+        'forms-input': {
+          'border-color': 'var(--c--theme--colors--primary-500)',
+        },
         'forms-labelledbox': {
           'label-color': {
             small: 'var(--c--theme--colors--primary-500)',
@@ -82,6 +108,19 @@ const config = {
             },
           },
         },
+        '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)',
         },

diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-custom-tokens.css b/src/frontend/packages/lib_common/src/cunningham/cunningham-custom-tokens.css
@@ -1,63 +1,23 @@
 :root {
-    /**
-      * Field
-     **/
-     --c--components--forms-field--color: var(--c--theme--colors--primary-500);
-     /**
-      * Datagrid
-     **/
-     --c--theme--font--weights-datagrid-header: var(--c--theme--font--weights--extrabold);
-     --c--theme--font--size-datagrid-header: var(--c--theme--font--sizes--ml);
-     --c--theme--font--size-datagrid-cell: var(--c--theme--font--sizes--ml);
      /**
       * Input
      */
-     --c--components--forms-input--border-color: var(--c--theme--colors--primary-500);
      --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);
-     --c--components--forms-input--color: var(--c--theme--colors--primary-500);
      /**
       * Datepicker
      **/
-     --c--components--forms-datepicker--color: var(
-       --c--theme--colors--primary-400
-     );
-     --c--components--forms-datepicker--value-color: var(--c--components--forms-datepicker--color);
-     --c--components--forms-datepicker--border-color: var(
-       --c--theme--colors--primary-500
-     );
-     --c--components--forms-datepicker--border-radius--hover: var(
-       --c--components--forms-datepicker--border-radius
-     );
-     --c--components--forms-datepicker--border-radius--focus: var(
-       --c--components--forms-datepicker--border-radius
-     );
      --c--components--forms-datepicker--border-color--hover: var(
        --c--components--forms-datepicker--border-color
      );
      /**
       * Select
      **/
-     --c--components--forms-select--border-color: var(--c--theme--colors--primary-500);
-     --c--components--forms-select--border-radius--hover: var(
-       --c--components--forms-select--border-radius
-     );
-     --c--components--forms-select--border-radius--focus: var(
-       --c--components--forms-select--border-radius
-     );
-     --c--components--forms-select--color: var(--c--theme--colors--primary-500);
-     --c--components--forms-select--value-color: var(--c--components--forms-select--color);
-     --c--components--forms-select--item-color: var(--c--theme--colors--primary-500);
-     --c--components--forms-select--item-color: var(--c--theme--colors--primary-500);
-     --c--components--forms-select--item-background-color--hover: var(
-       --c--theme--colors--primary-100
-     );
-     --c--components--forms-select--font-size: var(--c--theme--font--sizes--ml);
      --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);
    }

diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css b/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css
@@ -59,7 +59,6 @@
   cursor: inherit;
 }
 .c__input__wrapper .c__input, .c__textarea__wrapper .c__textarea {
-  color: var(--c--components--forms-input--color);
   width: 100%;
 }
 .c__input__wrapper--disabled .c__input {
@@ -71,6 +70,9 @@ input:-webkit-autofill:focus {
     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);
 }
@@ -109,13 +111,13 @@ input:-webkit-autofill:focus {
 .c__datagrid > table td {
   max-width: 10rem;
   white-space: normal;
-  color: var(--c--theme--colors--primary-500);
-  font-size: var(--c--theme--font--size-datagrid-cell);
+  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--theme--font--weights-datagrid-header);
-  font-size: var(--c--theme--font--size-datagrid-header);
+  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;

diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-tokens.css b/src/frontend/packages/lib_common/src/cunningham/cunningham-tokens.css
@@ -132,16 +132,35 @@
 	--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;
+	--c--components--datagrid--header--weight: var(--c--theme--font--weights--extrabold);
+	--c--components--datagrid--header--size: var(--c--theme--font--sizes--ml);
+	--c--components--datagrid--cell--color: var(--c--theme--colors--primary-500);
+	--c--components--datagrid--cell--size: var(--c--theme--font--sizes--ml);
 	--c--components--forms-textarea--border-color: var(--c--components--forms-textarea--border-color);
 	--c--components--forms-textarea--border-color-hover: var(--c--components--forms-textarea--border-color);
 	--c--components--forms-textarea--border-radius--hover: var(--c--components--forms-textarea--border-radius);
 	--c--components--forms-textarea--border-radius--focus: var(--c--components--forms-textarea--border-radius);
+	--c--components--forms-textarea--color: var(--c--theme--colors--primary-500);
 	--c--components--forms-textarea--disabled--border-color-hover: var(--c--theme--colors--greyscale-200);
 	--c--components--forms-checkbox--background-color--hover: #055fd214;
 	--c--components--forms-checkbox--color: var(--c--theme--colors--primary-500);
 	--c--components--forms-checkbox--font-size: var(--c--theme--font--sizes--ml);
+	--c--components--forms-datepicker--border-color: var(--c--theme--colors--primary-500);
+	--c--components--forms-datepicker--value-color: var(--c--theme--colors--primary-500);
+	--c--components--forms-datepicker--border-radius--hover: var(--c--components--forms-datepicker--border-radius);
+	--c--components--forms-datepicker--border-radius--focus: var(--c--components--forms-datepicker--border-radius);
+	--c--components--forms-field--color: var(--c--theme--colors--primary-500);
+	--c--components--forms-field--value-color: var(--c--theme--colors--primary-500);
+	--c--components--forms-input--border-color: var(--c--theme--colors--primary-500);
 	--c--components--forms-labelledbox--label-color--small: var(--c--theme--colors--primary-500);
 	--c--components--forms-labelledbox--label-color--big--disabled: var(--c--theme--colors--greyscale-400);
+	--c--components--forms-select--border-color: var(--c--theme--colors--primary-500);
+	--c--components--forms-select--border-radius--hover: var(--c--components--forms-select--border-radius);
+	--c--components--forms-select--border-radius--focus: var(--c--components--forms-select--border-radius);
+	--c--components--forms-select--font-size: var(--c--theme--font--sizes--ml);
+	--c--components--forms-select--item-background-color--hover: var(--c--theme--colors--primary-100);
+	--c--components--forms-select--item-color: var(--c--theme--colors--primary-500);
+	--c--components--forms-select--value-color: var(--c--theme--colors--primary-500);
 	--c--components--forms-switch--accent-color: var(--c--theme--colors--primary-400);
 	--c--components--button--border-radius--active: var(--c--components--button--border-radius);
 	--c--components--button--medium-height: auto;

diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-tokens.ts b/src/frontend/packages/lib_common/src/cunningham/cunningham-tokens.ts
@@ -155,6 +155,16 @@ export const tokens = {
         },
       },
       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-textarea': {
           'border-color': 'var(--c--components--forms-textarea--border-color)',
           'border-color-hover':
@@ -163,6 +173,7 @@ export const tokens = {
             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)',
           },
@@ -172,12 +183,40 @@ export const tokens = {
           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)',
+        },
+        'forms-input': {
+          '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)',
         },