From 88e38c4c7f165d0b03999b0d03c98f7692c71919 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Thu, 21 Mar 2024 17:15:05 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(app-desk)=20update=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We update the theme of the app to match the design system: - secondary button - input error - modal background --- src/frontend/apps/desk/cunningham.ts | 11 ++++++++++- .../desk/src/cunningham/cunningham-style.css | 18 ++++++++++++++++++ .../desk/src/cunningham/cunningham-tokens.css | 15 ++++++++++++++- .../desk/src/cunningham/cunningham-tokens.ts | 11 ++++++++++- 4 files changed, 52 insertions(+), 3 deletions(-) diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts index beed69a..c27c164 100644 --- a/src/frontend/apps/desk/cunningham.ts +++ b/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)', }, diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-style.css b/src/frontend/apps/desk/src/cunningham/cunningham-style.css index 81e7dc9..bcfa7dc 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-style.css +++ b/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: diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css index 13ee0af..9b4cabe 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css +++ b/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 diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts index f42daeb..a10a26d 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts +++ b/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': {