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', 'border-radius': '0',
}, },
button: { button: {
'medium-height': '48px',
'border-radius': '4px', 'border-radius': '4px',
primary: { primary: {
background: { background: {
color: 'var(--c--theme--colors--primary-text)', color: 'var(--c--theme--colors--primary-text)',
'color-hover': 'var(--c--theme--colors--primary-700)', 'color-hover': '#1212ff',
'color-active': 'var(--c--theme--colors--primary-900)', 'color-active': '#2323ff',
}, },
color: '#ffffff', color: '#ffffff',
'color-hover': '#ffffff', 'color-hover': '#ffffff',
@@ -285,8 +286,8 @@ const config = {
}, },
secondary: { secondary: {
background: { background: {
'color-hover': 'var(--c--theme--colors--primary-100)', 'color-hover': '#F6F6F6',
'color-active': 'var(--c--theme--colors--primary-200)', 'color-active': '#EDEDED',
}, },
border: { border: {
'color-hover': 'var(--c--theme--colors--primary-300)', 'color-hover': 'var(--c--theme--colors--primary-300)',
@@ -324,11 +325,15 @@ const config = {
'forms-fileuploader': { 'forms-fileuploader': {
'border-radius': '0', 'border-radius': '0',
}, },
'forms-field': {
color: 'var(--c--theme--colors--primary-text)',
},
'forms-input': { 'forms-input': {
'border-radius': '4px', 'border-radius': '4px',
'background-color': '#ffffff', 'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-text)', 'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-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': { 'forms-labelledbox': {
'label-color': { '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--accent: marianne;
--c--theme--font--families--base: marianne; --c--theme--font--families--base: marianne;
--c--components--alert--border-radius: 0; --c--components--alert--border-radius: 0;
--c--components--button--medium-height: 48px;
--c--components--button--border-radius: 4px; --c--components--button--border-radius: 4px;
--c--components--button--primary--background--color: var( --c--components--button--primary--background--color: var(
--c--theme--colors--primary-text --c--theme--colors--primary-text
); );
--c--components--button--primary--background--color-hover: var( --c--components--button--primary--background--color-hover: #1212ff;
--c--theme--colors--primary-700 --c--components--button--primary--background--color-active: #2323ff;
);
--c--components--button--primary--background--color-active: var(
--c--theme--colors--primary-900
);
--c--components--button--primary--color: #fff; --c--components--button--primary--color: #fff;
--c--components--button--primary--color-hover: #fff; --c--components--button--primary--color-hover: #fff;
--c--components--button--primary--color-active: #fff; --c--components--button--primary--color-active: #fff;
@@ -418,12 +415,8 @@
--c--components--button--primary-text--color-hover: var( --c--components--button--primary-text--color-hover: var(
--c--theme--colors--primary-text --c--theme--colors--primary-text
); );
--c--components--button--secondary--background--color-hover: var( --c--components--button--secondary--background--color-hover: #f6f6f6;
--c--theme--colors--primary-100 --c--components--button--secondary--background--color-active: #ededed;
);
--c--components--button--secondary--background--color-active: var(
--c--theme--colors--primary-200
);
--c--components--button--secondary--border--color-hover: var( --c--components--button--secondary--border--color-hover: var(
--c--theme--colors--primary-300 --c--theme--colors--primary-300
); );
@@ -450,6 +443,7 @@
--c--components--forms-checkbox--color: var(--c--theme--colors--primary-text); --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
--c--components--forms-datepicker--border-radius: 0; --c--components--forms-datepicker--border-radius: 0;
--c--components--forms-fileuploader--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--border-radius: 4px;
--c--components--forms-input--background-color: #fff; --c--components--forms-input--background-color: #fff;
--c--components--forms-input--border-color: var( --c--components--forms-input--border-color: var(
@@ -458,6 +452,9 @@
--c--components--forms-input--box-shadow-color: var( --c--components--forms-input--box-shadow-color: var(
--c--theme--colors--primary-text --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--components--forms-labelledbox--label-color--big: var(
--c--theme--colors--primary-text --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: { components: {
alert: { 'border-radius': '0' }, alert: { 'border-radius': '0' },
button: { button: {
'medium-height': '48px',
'border-radius': '4px', 'border-radius': '4px',
primary: { primary: {
background: { background: {
color: 'var(--c--theme--colors--primary-text)', color: 'var(--c--theme--colors--primary-text)',
'color-hover': 'var(--c--theme--colors--primary-700)', 'color-hover': '#1212ff',
'color-active': 'var(--c--theme--colors--primary-900)', 'color-active': '#2323ff',
}, },
color: '#ffffff', color: '#ffffff',
'color-hover': '#ffffff', 'color-hover': '#ffffff',
@@ -423,10 +424,7 @@ export const tokens = {
'color-hover': 'var(--c--theme--colors--primary-text)', 'color-hover': 'var(--c--theme--colors--primary-text)',
}, },
secondary: { secondary: {
background: { background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-200)',
},
border: { 'color-hover': 'var(--c--theme--colors--primary-300)' }, border: { 'color-hover': 'var(--c--theme--colors--primary-300)' },
color: 'var(--c--theme--colors--primary-text)', color: 'var(--c--theme--colors--primary-text)',
}, },
@@ -457,11 +455,13 @@ export const tokens = {
}, },
'forms-datepicker': { 'border-radius': '0' }, 'forms-datepicker': { 'border-radius': '0' },
'forms-fileuploader': { 'border-radius': '0' }, 'forms-fileuploader': { 'border-radius': '0' },
'forms-field': { color: 'var(--c--theme--colors--primary-text)' },
'forms-input': { 'forms-input': {
'border-radius': '4px', 'border-radius': '4px',
'background-color': '#ffffff', 'background-color': '#ffffff',
'border-color': 'var(--c--theme--colors--primary-text)', 'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-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': { 'forms-labelledbox': {
'label-color': { big: 'var(--c--theme--colors--primary-text)' }, 'label-color': { big: 'var(--c--theme--colors--primary-text)' },