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

✨(frontend) update color tokens and styles

Browse Source 
- Modified color tokens for danger and info categories to enhance visual
consistency and accessibility.
- Updated button and modal styles, including adjustments to padding and
dimensions for improved layout.
- Replaced font files for Marianne with updated versions to ensure
better typography.
This commit is contained in:
Nathan Panchout
2024-12-23 10:18:04 +01:00
committed by Anthony LC
parent 63885117e1
commit 730efe7b74
7 changed files with 91 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/frontend/apps/impress/cunningham.ts
View File

@@ -200,8 +200,8 @@ const config = {
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
@@ -302,15 +302,15 @@ const config = {
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
@@ -321,16 +321,16 @@ const config = {
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
'danger-900': '#391C1C',
},
font: {
families: {
@@ -349,8 +349,12 @@ const config = {
alert: {
'border-radius': '0',
},
modal: {
'width-small': '342px',
},
button: {
'medium-height': '48px',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
@@ -382,7 +386,7 @@ const config = {
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',

BIN
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2
View File

Binary file not shown.

BIN
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2
View File

Binary file not shown.

BIN
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2
View File

Binary file not shown.

25
src/frontend/apps/impress/src/cunningham/cunningham-style.css
View File

@@ -352,14 +352,18 @@ input:-webkit-autofill:focus {
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--2xs);
gap: var(--c--theme--spacings--2xs);
padding: 0 var(--c--theme--spacings--3xs);
gap: var(--c--theme--spacings--3xs);
}
.c__button--nano.c__button--icon-only {
width: auto;
}
.c__button--nano.c__button--icon-only.c__button--full-width {
width: 100%;
}
.c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s);
}
@@ -529,7 +533,20 @@ input:-webkit-autofill:focus {
}
.c__modal__close button {
padding: 1.5rem 1rem;
padding: 0;
font-size: 88px;
width: 28px !important;
height: 28px;
}
.c__modal__close button .material-icons {
padding: 0;
font-size: 24px;
color: var(--c--theme--colors--greyscale-600);
}
.c__modal__footer {
margin-top: -1rem;
}
.c__modal--full .c__modal__content {
@@ -539,7 +556,7 @@ input:-webkit-autofill:focus {
.c__modal__title {
padding: 0;
font-size: 1.125rem;
margin-bottom: var(--c--theme--spacings--sm);
margin-bottom: var(--c--theme--spacings--2xs);
}
@media screen and (width <= 420px) {

40
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
View File

@@ -286,11 +286,9 @@
);
--c--components--button--danger--color-hover: white;
--c--components--button--danger--background--color: var(
--c--theme--colors--danger-400
);
--c--components--button--danger--background--color-hover: var(
--c--theme--colors--danger-500
--c--theme--colors--danger-600
);
--c--components--button--danger--background--color-hover: #ff2725;
--c--components--button--danger--background--color-disabled: var(
--c--theme--colors--danger-100
);
@@ -443,13 +441,13 @@
--c--theme--colors--success-800: #1e2e22;
--c--theme--colors--success-900: #19281d;
--c--theme--colors--info-text: #0078f3;
--c--theme--colors--info-100: #f4f6ff;
--c--theme--colors--info-200: #e8edff;
--c--theme--colors--info-300: #dde5ff;
--c--theme--colors--info-400: #bdcdff;
--c--theme--colors--info-100: #e8edff;
--c--theme--colors--info-200: #dde5ff;
--c--theme--colors--info-300: #bccdff;
--c--theme--colors--info-400: #518fff;
--c--theme--colors--info-500: #0078f3;
--c--theme--colors--info-600: #0063cb;
--c--theme--colors--info-700: #f4f6ff;
--c--theme--colors--info-700: #273961;
--c--theme--colors--info-800: #222a3f;
--c--theme--colors--info-900: #1d2437;
--c--theme--colors--warning-text: #d64d00;
@@ -462,16 +460,16 @@
--c--theme--colors--warning-700: #5e2c21;
--c--theme--colors--warning-800: #3e241e;
--c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-text: #e1000f;
--c--theme--colors--danger-100: #fef4f4;
--c--theme--colors--danger-200: #fee9e9;
--c--theme--colors--danger-300: #fddede;
--c--theme--colors--danger-400: #fcbfbf;
--c--theme--colors--danger-500: #e1000f;
--c--theme--colors--danger-600: #c9191e;
--c--theme--colors--danger-700: #642727;
--c--theme--colors--danger-text: #fff;
--c--theme--colors--danger-100: #ffe9e9;
--c--theme--colors--danger-200: #fdd;
--c--theme--colors--danger-300: #ffbdbd;
--c--theme--colors--danger-400: #ff5655;
--c--theme--colors--danger-500: #f60700;
--c--theme--colors--danger-600: #ce0500;
--c--theme--colors--danger-700: #642626;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #3a1c1c;
--c--theme--colors--danger-900: #391c1c;
--c--theme--font--families--accent: marianne;
--c--theme--font--families--base: marianne;
--c--theme--logo--src: /assets/logo-gouv.svg;
@@ -479,7 +477,9 @@
--c--theme--logo--widthFooter: 220px;
--c--theme--logo--alt: gouvernement logo;
--c--components--alert--border-radius: 0;
--c--components--button--medium-height: 48px;
--c--components--modal--width-small: 342px;
--c--components--button--medium-height: 40px;
--c--components--button--medium-text-height: 40px;
--c--components--button--border-radius: 4px;
--c--components--button--primary--background--color: var(
--c--theme--colors--primary-text
@@ -510,7 +510,7 @@
--c--theme--colors--primary-text
);
--c--components--button--tertiary-text--background--color-hover: var(
--c--theme--colors--primary-100
--c--theme--colors--greyscale-100
);
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text

46
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
View File

@@ -294,8 +294,8 @@ export const tokens = {
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
@@ -437,15 +437,15 @@ export const tokens = {
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
@@ -456,16 +456,16 @@ export const tokens = {
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
'danger-900': '#391C1C',
},
font: { families: { accent: 'Marianne', base: 'Marianne' } },
logo: {
@@ -477,8 +477,10 @@ export const tokens = {
},
components: {
alert: { 'border-radius': '0' },
modal: { 'width-small': '342px' },
button: {
'medium-height': '48px',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
@@ -507,7 +509,7 @@ export const tokens = {
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',