💄(app-desk) update ui

We update the theme of the app to match the design system:
- secondary button
- input error
- modal background

src/frontend/apps/desk/cunningham.ts

@@ -74,6 +74,11 @@ const config = {
         'forms-input': {
           'value-color': 'var(--c--theme--colors--primary-500)',
           'border-color': 'var(--c--theme--colors--primary-500)',
+          color: {
+            error: 'var(--c--theme--colors--danger-500)',
+            'error-hover': 'var(--c--theme--colors--danger-500)',
+            'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)',
+          },
         },
         'forms-labelledbox': {
           'label-color': {
@@ -114,6 +119,9 @@ const config = {
             'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
           },
         },
+        modal: {
+          'background-color': '#ffffff',
+        },
         button: {
           'border-radius': {
             active: 'var(--c--components--button--border-radius)',
@@ -290,7 +298,8 @@ const config = {
               'color-active': '#EDEDED',
             },
             border: {
-              'color-hover': 'var(--c--theme--colors--primary-300)',
+              color: 'var(--c--theme--colors--primary-600)',
+              'color-hover': 'var(--c--theme--colors--primary-600)',
             },
             color: 'var(--c--theme--colors--primary-text)',
           },

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

@@ -79,6 +79,24 @@
   color: var(--c--components--forms-input--value-color--disabled);
 }
 
+.c__input__wrapper--error .c__input {
+  color: var(--c--components--forms-input--color--error);
+}
+
+.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover {
+  border-color: var(--c--components--forms-input--border--color-error-hover);
+  color: var(--c--components--forms-input--color--error-hover);
+}
+
+.c__input__wrapper--error:hover {
+  box-shadow: var(--c--components--forms-input--color--box-shadow-error-hover) 0
+    0 0 2px;
+}
+
+.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover label {
+  color: var(--c--components--forms-input--border--color-error-hover);
+}
+
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
   transition:

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

@@ -157,6 +157,15 @@
   --c--components--forms-input--border-color: var(
     --c--theme--colors--primary-500
   );
+  --c--components--forms-input--color--error: var(
+    --c--theme--colors--danger-500
+  );
+  --c--components--forms-input--color--error-hover: var(
+    --c--theme--colors--danger-500
+  );
+  --c--components--forms-input--color--box-shadow-error-hover: var(
+    --c--theme--colors--danger-500
+  );
   --c--components--forms-labelledbox--label-color--small: var(
     --c--theme--colors--primary-500
   );
@@ -202,6 +211,7 @@
   --c--components--forms-textarea--disabled--border-color-hover: var(
     --c--theme--colors--greyscale-200
   );
+  --c--components--modal--background-color: #fff;
   --c--components--button--border-radius--active: var(
     --c--components--button--border-radius
   );
@@ -417,8 +427,11 @@
   );
   --c--components--button--secondary--background--color-hover: #f6f6f6;
   --c--components--button--secondary--background--color-active: #ededed;
+  --c--components--button--secondary--border--color: var(
+    --c--theme--colors--primary-600
+  );
   --c--components--button--secondary--border--color-hover: var(
-    --c--theme--colors--primary-300
+    --c--theme--colors--primary-600
   );
   --c--components--button--secondary--color: var(
     --c--theme--colors--primary-text

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

@@ -179,6 +179,11 @@ export const tokens = {
         'forms-input': {
           'value-color': 'var(--c--theme--colors--primary-500)',
           'border-color': 'var(--c--theme--colors--primary-500)',
+          color: {
+            error: 'var(--c--theme--colors--danger-500)',
+            'error-hover': 'var(--c--theme--colors--danger-500)',
+            'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)',
+          },
         },
         'forms-labelledbox': {
           'label-color': {
@@ -217,6 +222,7 @@ export const tokens = {
             'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
           },
         },
+        modal: { 'background-color': '#ffffff' },
         button: {
           'border-radius': {
             active: 'var(--c--components--button--border-radius)',
@@ -425,7 +431,10 @@ export const tokens = {
           },
           secondary: {
             background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
-            border: { 'color-hover': 'var(--c--theme--colors--primary-300)' },
+            border: {
+              color: 'var(--c--theme--colors--primary-600)',
+              'color-hover': 'var(--c--theme--colors--primary-600)',
+            },
             color: 'var(--c--theme--colors--primary-text)',
           },
           'tertiary-text': {