From 8ae7b4e8e95290d0d49b468d1f1f16707f914aea Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 6 Mar 2024 11:34:14 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20cunningham=20the?= =?UTF-8?q?me=20more=20dsfr?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mockup doesn't seem totally synch with DSFR design, this commit will adapt buttons and input in a more DSFR way. --- src/frontend/apps/desk/cunningham.ts | 13 ++++++++---- .../desk/src/cunningham/cunningham-tokens.css | 21 ++++++++----------- .../desk/src/cunningham/cunningham-tokens.ts | 12 +++++------ 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts index 484b10f..beed69a 100644 --- a/src/frontend/apps/desk/cunningham.ts +++ b/src/frontend/apps/desk/cunningham.ts @@ -265,12 +265,13 @@ const config = { 'border-radius': '0', }, button: { + 'medium-height': '48px', 'border-radius': '4px', primary: { background: { color: 'var(--c--theme--colors--primary-text)', - 'color-hover': 'var(--c--theme--colors--primary-700)', - 'color-active': 'var(--c--theme--colors--primary-900)', + 'color-hover': '#1212ff', + 'color-active': '#2323ff', }, color: '#ffffff', 'color-hover': '#ffffff', @@ -285,8 +286,8 @@ const config = { }, secondary: { background: { - 'color-hover': 'var(--c--theme--colors--primary-100)', - 'color-active': 'var(--c--theme--colors--primary-200)', + 'color-hover': '#F6F6F6', + 'color-active': '#EDEDED', }, border: { 'color-hover': 'var(--c--theme--colors--primary-300)', @@ -324,11 +325,15 @@ const config = { 'forms-fileuploader': { 'border-radius': '0', }, + 'forms-field': { + color: 'var(--c--theme--colors--primary-text)', + }, 'forms-input': { 'border-radius': '4px', 'background-color': '#ffffff', 'border-color': 'var(--c--theme--colors--primary-text)', 'box-shadow-color': 'var(--c--theme--colors--primary-text)', + 'value-color': 'var(--c--theme--colors--primary-text)', }, 'forms-labelledbox': { 'label-color': { diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css index 7005796..13ee0af 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css @@ -396,16 +396,13 @@ --c--theme--font--families--accent: marianne; --c--theme--font--families--base: marianne; --c--components--alert--border-radius: 0; + --c--components--button--medium-height: 48px; --c--components--button--border-radius: 4px; --c--components--button--primary--background--color: var( --c--theme--colors--primary-text ); - --c--components--button--primary--background--color-hover: var( - --c--theme--colors--primary-700 - ); - --c--components--button--primary--background--color-active: var( - --c--theme--colors--primary-900 - ); + --c--components--button--primary--background--color-hover: #1212ff; + --c--components--button--primary--background--color-active: #2323ff; --c--components--button--primary--color: #fff; --c--components--button--primary--color-hover: #fff; --c--components--button--primary--color-active: #fff; @@ -418,12 +415,8 @@ --c--components--button--primary-text--color-hover: var( --c--theme--colors--primary-text ); - --c--components--button--secondary--background--color-hover: var( - --c--theme--colors--primary-100 - ); - --c--components--button--secondary--background--color-active: var( - --c--theme--colors--primary-200 - ); + --c--components--button--secondary--background--color-hover: #f6f6f6; + --c--components--button--secondary--background--color-active: #ededed; --c--components--button--secondary--border--color-hover: var( --c--theme--colors--primary-300 ); @@ -450,6 +443,7 @@ --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text); --c--components--forms-datepicker--border-radius: 0; --c--components--forms-fileuploader--border-radius: 0; + --c--components--forms-field--color: var(--c--theme--colors--primary-text); --c--components--forms-input--border-radius: 4px; --c--components--forms-input--background-color: #fff; --c--components--forms-input--border-color: var( @@ -458,6 +452,9 @@ --c--components--forms-input--box-shadow-color: var( --c--theme--colors--primary-text ); + --c--components--forms-input--value-color: var( + --c--theme--colors--primary-text + ); --c--components--forms-labelledbox--label-color--big: 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 4551568..f42daeb 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts @@ -404,12 +404,13 @@ export const tokens = { components: { alert: { 'border-radius': '0' }, button: { + 'medium-height': '48px', 'border-radius': '4px', primary: { background: { color: 'var(--c--theme--colors--primary-text)', - 'color-hover': 'var(--c--theme--colors--primary-700)', - 'color-active': 'var(--c--theme--colors--primary-900)', + 'color-hover': '#1212ff', + 'color-active': '#2323ff', }, color: '#ffffff', 'color-hover': '#ffffff', @@ -423,10 +424,7 @@ export const tokens = { 'color-hover': 'var(--c--theme--colors--primary-text)', }, secondary: { - background: { - 'color-hover': 'var(--c--theme--colors--primary-100)', - 'color-active': 'var(--c--theme--colors--primary-200)', - }, + background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' }, border: { 'color-hover': 'var(--c--theme--colors--primary-300)' }, color: 'var(--c--theme--colors--primary-text)', }, @@ -457,11 +455,13 @@ export const tokens = { }, 'forms-datepicker': { 'border-radius': '0' }, 'forms-fileuploader': { 'border-radius': '0' }, + 'forms-field': { color: 'var(--c--theme--colors--primary-text)' }, 'forms-input': { 'border-radius': '4px', 'background-color': '#ffffff', 'border-color': 'var(--c--theme--colors--primary-text)', 'box-shadow-color': 'var(--c--theme--colors--primary-text)', + 'value-color': 'var(--c--theme--colors--primary-text)', }, 'forms-labelledbox': { 'label-color': { big: 'var(--c--theme--colors--primary-text)' },