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: { danger: {
'color-hover': 'white', 'color-hover': 'white',
background: { background: {
color: 'var(--c--theme--colors--danger-400)', color: 'var(--c--theme--colors--danger-600)',
'color-hover': 'var(--c--theme--colors--danger-500)', 'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)', 'color-disabled': 'var(--c--theme--colors--danger-100)',
}, },
}, },
@@ -302,15 +302,15 @@ const config = {
'success-800': '#1e2e22', 'success-800': '#1e2e22',
'success-900': '#19281d', 'success-900': '#19281d',
'info-text': '#0078f3', 'info-text': '#0078f3',
'info-100': '#f4f6ff', 'info-100': '#E8EDFF',
'info-200': '#e8edff', 'info-200': '#DDE5FF',
'info-300': '#dde5ff', 'info-300': '#BCCDFF',
'info-400': '#bdcdff', 'info-400': '#518FFF',
'info-500': '#0078f3', 'info-500': '#0078F3',
'info-600': '#0063cb', 'info-600': '#0063CB',
'info-700': '#f4f6ff', 'info-700': '#273961',
'info-800': '#222a3f', 'info-800': '#222A3F',
'info-900': '#1d2437', 'info-900': '#1D2437',
'warning-text': '#d64d00', 'warning-text': '#d64d00',
'warning-100': '#fff4f3', 'warning-100': '#fff4f3',
'warning-200': '#ffe9e6', 'warning-200': '#ffe9e6',
@@ -321,16 +321,16 @@ const config = {
'warning-700': '#5e2c21', 'warning-700': '#5e2c21',
'warning-800': '#3e241e', 'warning-800': '#3e241e',
'warning-900': '#361e19', 'warning-900': '#361e19',
'danger-text': '#e1000f', 'danger-text': '#FFF',
'danger-100': '#fef4f4', 'danger-100': '#FFE9E9',
'danger-200': '#fee9e9', 'danger-200': '#FFDDDD',
'danger-300': '#fddede', 'danger-300': '#FFBDBD',
'danger-400': '#fcbfbf', 'danger-400': '#FF5655',
'danger-500': '#e1000f', 'danger-500': '#F60700',
'danger-600': '#c9191e', 'danger-600': '#CE0500',
'danger-700': '#642727', 'danger-700': '#642626',
'danger-800': '#412121', 'danger-800': '#412121',
'danger-900': '#3a1c1c', 'danger-900': '#391C1C',
}, },
font: { font: {
families: { families: {
@@ -349,8 +349,12 @@ const config = {
alert: { alert: {
'border-radius': '0', 'border-radius': '0',
}, },
modal: {
'width-small': '342px',
},
button: { button: {
'medium-height': '48px', 'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px', 'border-radius': '4px',
primary: { primary: {
background: { background: {
@@ -382,7 +386,7 @@ const config = {
}, },
'tertiary-text': { 'tertiary-text': {
background: { 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-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)', 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 { .c__button--nano {
padding: 0 var(--c--theme--spacings--2xs); padding: 0 var(--c--theme--spacings--3xs);
gap: var(--c--theme--spacings--2xs); gap: var(--c--theme--spacings--3xs);
} }
.c__button--nano.c__button--icon-only { .c__button--nano.c__button--icon-only {
width: auto; width: auto;
} }
.c__button--nano.c__button--icon-only.c__button--full-width {
width: 100%;
}
.c__button--medium { .c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s); padding: 0.9rem var(--c--theme--spacings--s);
} }
@@ -529,7 +533,20 @@ input:-webkit-autofill:focus {
} }
.c__modal__close button { .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 { .c__modal--full .c__modal__content {
@@ -539,7 +556,7 @@ input:-webkit-autofill:focus {
.c__modal__title { .c__modal__title {
padding: 0; padding: 0;
font-size: 1.125rem; font-size: 1.125rem;
margin-bottom: var(--c--theme--spacings--sm); margin-bottom: var(--c--theme--spacings--2xs);
} }
@media screen and (width <= 420px) { @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--color-hover: white;
--c--components--button--danger--background--color: var( --c--components--button--danger--background--color: var(
--c--theme--colors--danger-400 --c--theme--colors--danger-600
);
--c--components--button--danger--background--color-hover: var(
--c--theme--colors--danger-500
); );
--c--components--button--danger--background--color-hover: #ff2725;
--c--components--button--danger--background--color-disabled: var( --c--components--button--danger--background--color-disabled: var(
--c--theme--colors--danger-100 --c--theme--colors--danger-100
); );
@@ -443,13 +441,13 @@
--c--theme--colors--success-800: #1e2e22; --c--theme--colors--success-800: #1e2e22;
--c--theme--colors--success-900: #19281d; --c--theme--colors--success-900: #19281d;
--c--theme--colors--info-text: #0078f3; --c--theme--colors--info-text: #0078f3;
--c--theme--colors--info-100: #f4f6ff; --c--theme--colors--info-100: #e8edff;
--c--theme--colors--info-200: #e8edff; --c--theme--colors--info-200: #dde5ff;
--c--theme--colors--info-300: #dde5ff; --c--theme--colors--info-300: #bccdff;
--c--theme--colors--info-400: #bdcdff; --c--theme--colors--info-400: #518fff;
--c--theme--colors--info-500: #0078f3; --c--theme--colors--info-500: #0078f3;
--c--theme--colors--info-600: #0063cb; --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-800: #222a3f;
--c--theme--colors--info-900: #1d2437; --c--theme--colors--info-900: #1d2437;
--c--theme--colors--warning-text: #d64d00; --c--theme--colors--warning-text: #d64d00;
@@ -462,16 +460,16 @@
--c--theme--colors--warning-700: #5e2c21; --c--theme--colors--warning-700: #5e2c21;
--c--theme--colors--warning-800: #3e241e; --c--theme--colors--warning-800: #3e241e;
--c--theme--colors--warning-900: #361e19; --c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-text: #e1000f; --c--theme--colors--danger-text: #fff;
--c--theme--colors--danger-100: #fef4f4; --c--theme--colors--danger-100: #ffe9e9;
--c--theme--colors--danger-200: #fee9e9; --c--theme--colors--danger-200: #fdd;
--c--theme--colors--danger-300: #fddede; --c--theme--colors--danger-300: #ffbdbd;
--c--theme--colors--danger-400: #fcbfbf; --c--theme--colors--danger-400: #ff5655;
--c--theme--colors--danger-500: #e1000f; --c--theme--colors--danger-500: #f60700;
--c--theme--colors--danger-600: #c9191e; --c--theme--colors--danger-600: #ce0500;
--c--theme--colors--danger-700: #642727; --c--theme--colors--danger-700: #642626;
--c--theme--colors--danger-800: #412121; --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--accent: marianne;
--c--theme--font--families--base: marianne; --c--theme--font--families--base: marianne;
--c--theme--logo--src: /assets/logo-gouv.svg; --c--theme--logo--src: /assets/logo-gouv.svg;
@@ -479,7 +477,9 @@
--c--theme--logo--widthFooter: 220px; --c--theme--logo--widthFooter: 220px;
--c--theme--logo--alt: gouvernement logo; --c--theme--logo--alt: gouvernement logo;
--c--components--alert--border-radius: 0; --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--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
@@ -510,7 +510,7 @@
--c--theme--colors--primary-text --c--theme--colors--primary-text
); );
--c--components--button--tertiary-text--background--color-hover: var( --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--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text --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: { danger: {
'color-hover': 'white', 'color-hover': 'white',
background: { background: {
color: 'var(--c--theme--colors--danger-400)', color: 'var(--c--theme--colors--danger-600)',
'color-hover': 'var(--c--theme--colors--danger-500)', 'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)', 'color-disabled': 'var(--c--theme--colors--danger-100)',
}, },
}, },
@@ -437,15 +437,15 @@ export const tokens = {
'success-800': '#1e2e22', 'success-800': '#1e2e22',
'success-900': '#19281d', 'success-900': '#19281d',
'info-text': '#0078f3', 'info-text': '#0078f3',
'info-100': '#f4f6ff', 'info-100': '#E8EDFF',
'info-200': '#e8edff', 'info-200': '#DDE5FF',
'info-300': '#dde5ff', 'info-300': '#BCCDFF',
'info-400': '#bdcdff', 'info-400': '#518FFF',
'info-500': '#0078f3', 'info-500': '#0078F3',
'info-600': '#0063cb', 'info-600': '#0063CB',
'info-700': '#f4f6ff', 'info-700': '#273961',
'info-800': '#222a3f', 'info-800': '#222A3F',
'info-900': '#1d2437', 'info-900': '#1D2437',
'warning-text': '#d64d00', 'warning-text': '#d64d00',
'warning-100': '#fff4f3', 'warning-100': '#fff4f3',
'warning-200': '#ffe9e6', 'warning-200': '#ffe9e6',
@@ -456,16 +456,16 @@ export const tokens = {
'warning-700': '#5e2c21', 'warning-700': '#5e2c21',
'warning-800': '#3e241e', 'warning-800': '#3e241e',
'warning-900': '#361e19', 'warning-900': '#361e19',
'danger-text': '#e1000f', 'danger-text': '#FFF',
'danger-100': '#fef4f4', 'danger-100': '#FFE9E9',
'danger-200': '#fee9e9', 'danger-200': '#FFDDDD',
'danger-300': '#fddede', 'danger-300': '#FFBDBD',
'danger-400': '#fcbfbf', 'danger-400': '#FF5655',
'danger-500': '#e1000f', 'danger-500': '#F60700',
'danger-600': '#c9191e', 'danger-600': '#CE0500',
'danger-700': '#642727', 'danger-700': '#642626',
'danger-800': '#412121', 'danger-800': '#412121',
'danger-900': '#3a1c1c', 'danger-900': '#391C1C',
}, },
font: { families: { accent: 'Marianne', base: 'Marianne' } }, font: { families: { accent: 'Marianne', base: 'Marianne' } },
logo: { logo: {
@@ -477,8 +477,10 @@ export const tokens = {
}, },
components: { components: {
alert: { 'border-radius': '0' }, alert: { 'border-radius': '0' },
modal: { 'width-small': '342px' },
button: { button: {
'medium-height': '48px', 'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px', 'border-radius': '4px',
primary: { primary: {
background: { background: {
@@ -507,7 +509,7 @@ export const tokens = {
}, },
'tertiary-text': { 'tertiary-text': {
background: { 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-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)', color: 'var(--c--theme--colors--primary-600)',