studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(app-desk) cunningham theme more dsfr

Browse Source 
Mockup doesn't seem totally synch with DSFR design,
this commit will adapt buttons and input in a more
DSFR way.
This commit is contained in:
Anthony LC
2024-03-06 11:34:14 +01:00
committed by Anthony LC
parent 8b014e289a
commit 8ae7b4e8e9
3 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/frontend/apps/desk/cunningham.ts
View File

@@ -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': {

21
src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
View File

@@ -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
);

12
src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
View File

@@ -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)' },