diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index f4b4b6d0..a324b170 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -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)', diff --git a/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2 b/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2 index 4a5b7b29..6ea93fd6 100644 Binary files a/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2 and b/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2 differ diff --git a/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2 b/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2 index 8877adee..46a6e19e 100644 Binary files a/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2 and b/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2 differ diff --git a/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2 b/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2 index 5d6517c8..d19d7cc9 100644 Binary files a/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2 and b/src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2 differ diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 2a44b72d..4090f557 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -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) { diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 0fa4e379..3357c29c 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -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 diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 90cd485a..521094f4 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -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)',