From 1abf529891c16d0e3debe4cc9cf07c0f4673c825 Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Thu, 20 Mar 2025 17:18:22 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20refactor=20and=20theme=20?= =?UTF-8?q?token=20update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The configuration file has been simplified by importing configurations from @gouvfr-lasuite/ui-kit . Colors and components have been updated to reflect the new values. Additionally, adjustments have been made to global styles, including the addition of styles for Material icons. Form components have also been modified to incorporate the new style properties. --- CHANGELOG.md | 4 + env.d/development/common.dist | 2 +- .../e2e/__tests__/app-impress/config.spec.ts | 4 +- src/frontend/apps/impress/cunningham.ts | 537 ++--------- .../__tests__/useCunninghamTheme.spec.tsx | 4 +- .../cunningham/cunningham-custom-tokens.css | 7 + .../src/cunningham/cunningham-style.css | 633 ------------- .../src/cunningham/cunningham-tokens.css | 849 ++++++++---------- .../src/cunningham/cunningham-tokens.ts | 637 +++++-------- .../src/cunningham/useCunninghamTheme.tsx | 4 +- .../apps/impress/src/pages/globals.css | 39 +- src/frontend/apps/impress/src/tests/utils.tsx | 2 +- 12 files changed, 716 insertions(+), 2006 deletions(-) delete mode 100644 src/frontend/apps/impress/src/cunningham/cunningham-style.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f9ae102..f1fb5264 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ and this project adheres to ## [Unreleased] +## Changed + +- ♻️(frontend) Integrate UI kit #783 + ## [2.6.0] - 2025-03-21 ## Added diff --git a/env.d/development/common.dist b/env.d/development/common.dist index 93a9d1c4..e5872514 100644 --- a/env.d/development/common.dist +++ b/env.d/development/common.dist @@ -61,4 +61,4 @@ COLLABORATION_SERVER_SECRET=my-secret COLLABORATION_WS_URL=ws://localhost:8083/collaboration/ws/ # Frontend -FRONTEND_THEME=dsfr +FRONTEND_THEME=default diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts index 83e24767..29a84a70 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts @@ -8,7 +8,7 @@ const config = { CRISP_WEBSITE_ID: null, COLLABORATION_WS_URL: 'ws://localhost:8083/collaboration/ws/', ENVIRONMENT: 'development', - FRONTEND_THEME: 'dsfr', + FRONTEND_THEME: 'default', MEDIA_BASE_URL: 'http://localhost:8083', LANGUAGES: [ ['en-us', 'English'], @@ -159,7 +159,7 @@ test.describe('Config: Not loggued', () => { expect(response.ok()).toBeTruthy(); const jsonResponse = await response.json(); - expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr'); + expect(jsonResponse.FRONTEND_THEME).toStrictEqual('default'); const footer = page.locator('footer').first(); // alt 'Gouvernement Logo' comes from the theme diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index f89ae590..b2906c30 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -1,492 +1,55 @@ -const config = { - themes: { - default: { - theme: { - colors: { - 'card-border': '#ededed', - 'primary-bg': '#FAFAFA', - 'primary-action': '#1212FF', - 'primary-050': '#F5F5FE', - 'primary-100': '#EDF5FA', - 'primary-150': '#E5EEFA', - 'primary-950': '#1B1B35', - 'info-150': '#E5EEFA', - 'greyscale-000': '#fff', - 'greyscale-1000': '#161616', - 'blue-400': '#7AB1E8', - 'blue-500': '#417DC4', - 'blue-600': '#3558A2', - 'brown-400': '#E6BE92', - 'brown-500': '#BD987A', - 'brown-600': '#745B47', - 'cyan-400': '#34BAB5', - 'cyan-500': '#009099', - 'cyan-600': '#006A6F', - 'gold-400': '#FFCA00', - 'gold-500': '#C3992A', - 'gold-600': '#695240', - 'green-400': '#34CB6A', - 'green-500': '#00A95F', - 'green-600': '#297254', - 'olive-400': '#99C221', - 'olive-500': '#68A532', - 'olive-600': '#447049', - 'orange-400': '#FF732C', - 'orange-500': '#E4794A', - 'orange-600': '#755348', - 'pink-400': '#FFB7AE', - 'pink-500': '#E18B76', - 'pink-600': '#8D533E', - 'purple-400': '#CE70CC', - 'purple-500': '#A558A0', - 'purple-600': '#6E445A', - 'yellow-400': '#D8C634', - 'yellow-500': '#B7A73F', - 'yellow-600': '#66673D', - }, - font: { - sizes: { - xs: '0.75rem', - sm: '0.875rem', - md: '1rem', - lg: '1.125rem', - ml: '0.938rem', - xl: '1.25rem', - t: '0.6875rem', - s: '0.75rem', - h1: '2rem', - h2: '1.75rem', - h3: '1.5rem', - h4: '1.375rem', - h5: '1.25rem', - h6: '1.125rem', - 'xl-alt': '5rem', - 'lg-alt': '4.5rem', - 'md-alt': '4rem', - 'sm-alt': '3.5rem', - 'xs-alt': '3rem', - }, - weights: { - thin: 100, - extrabold: 800, - black: 900, - }, - }, - spacings: { - '0': '0', - none: '0', - auto: 'auto', - bx: '2.2rem', - full: '100%', - '4xs': '0.125rem', - '3xs': '0.25rem', - '2xs': '0.375rem', - xs: '0.5rem', - sm: '0.75rem', - base: '1rem', - md: '1.5rem', - lg: '2rem', - xl: '2.5rem', - xxl: '3rem', - xxxl: '3.5rem', - '4xl': '4rem', - '5xl': '4.5rem', - '6xl': '6rem', - '7xl': '7.5rem', - }, - breakpoints: { - xxs: '320px', - xs: '480px', - }, - logo: { - src: '', - widthHeader: '', - widthFooter: '', - alt: '', - }, - }, - components: { - datagrid: { - header: { - weight: 'var(--c--theme--font--weights--extrabold)', - size: 'var(--c--theme--font--sizes--ml)', - }, - cell: { - color: 'var(--c--theme--colors--primary-500)', - size: 'var(--c--theme--font--sizes--ml)', - }, - }, - 'forms-checkbox': { - 'background-color': { - hover: '#055fd214', - }, - color: 'var(--c--theme--colors--primary-500)', - 'font-size': 'var(--c--theme--font--sizes--ml)', - }, - 'forms-datepicker': { - 'border-color': 'var(--c--theme--colors--primary-500)', - 'value-color': 'var(--c--theme--colors--primary-500)', - 'border-radius': { - hover: 'var(--c--components--forms-datepicker--border-radius)', - focus: 'var(--c--components--forms-datepicker--border-radius)', - }, - }, - 'forms-field': { - color: 'var(--c--theme--colors--primary-500)', - 'value-color': 'var(--c--theme--colors--primary-500)', - width: 'auto', - }, - 'forms-input': { - 'value-color': 'var(--c--theme--colors--primary-500)', - 'border-color': 'var(--c--theme--colors--primary-500)', - color: { - error: 'var(--c--theme--colors--danger-500)', - 'error-hover': 'var(--c--theme--colors--danger-500)', - 'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)', - }, - }, - 'forms-labelledbox': { - 'label-color': { - small: 'var(--c--theme--colors--primary-500)', - 'small-disabled': 'var(--c--theme--colors--greyscale-400)', - big: { - disabled: 'var(--c--theme--colors--greyscale-400)', - }, - }, - }, - 'forms-select': { - 'border-color': 'var(--c--theme--colors--primary-500)', - 'border-color-disabled-hover': - 'var(--c--theme--colors--greyscale-200)', - 'border-radius': { - hover: 'var(--c--components--forms-select--border-radius)', - focus: 'var(--c--components--forms-select--border-radius)', - }, - 'font-size': 'var(--c--theme--font--sizes--ml)', - 'menu-background-color': '#fff', - 'item-background-color': { - hover: 'var(--c--theme--colors--primary-300)', - }, - }, - 'forms-switch': { - 'accent-color': 'var(--c--theme--colors--primary-400)', - }, - 'forms-textarea': { - 'border-color': 'var(--c--components--forms-textarea--border-color)', - 'border-color-hover': - 'var(--c--components--forms-textarea--border-color)', - 'border-radius': { - hover: 'var(--c--components--forms-textarea--border-radius)', - focus: 'var(--c--components--forms-textarea--border-radius)', - }, - color: 'var(--c--theme--colors--primary-500)', - disabled: { - 'border-color-hover': 'var(--c--theme--colors--greyscale-200)', - }, - }, - modal: { - 'background-color': '#fff', - }, - button: { - 'border-radius': { - active: 'var(--c--components--button--border-radius)', - }, - 'medium-height': 'auto', - 'small-height': 'auto', - success: { - color: 'white', - 'color-disabled': 'white', - 'color-hover': 'white', - background: { - color: 'var(--c--theme--colors--success-600)', - 'color-disabled': 'var(--c--theme--colors--greyscale-300)', - 'color-hover': 'var(--c--theme--colors--success-800)', - }, - }, - danger: { - 'color-hover': 'white', - background: { - color: 'var(--c--theme--colors--danger-600)', - 'color-hover': '#FF2725', - 'color-disabled': 'var(--c--theme--colors--danger-100)', - }, - }, - primary: { - color: 'var(--c--theme--colors--primary-text)', - 'color-active': 'var(--c--theme--colors--primary-text)', - background: { - color: 'var(--c--theme--colors--primary-400)', - 'color-active': 'var(--c--theme--colors--primary-500)', - }, - border: { - 'color-active': 'transparent', - }, - }, - secondary: { - color: 'var(--c--theme--colors--primary-500)', - 'color-hover': 'var(--c--theme--colors--primary-text)', - background: { - color: 'white', - 'color-hover': 'var(--c--theme--colors--primary-700)', - }, - border: { - color: 'var(--c--theme--colors--greyscale-300)', - }, - }, - tertiary: { - color: 'var(--c--theme--colors--primary-text)', - 'color-disabled': 'var(--c--theme--colors--greyscale-600)', - background: { - color: 'var(--c--theme--colors--primary-100)', - 'color-hover': 'var(--c--theme--colors--primary-300)', - 'color-active': 'var(--c--theme--colors--primary-100)', - 'color-disabled': 'var(--c--theme--colors--greyscale-200)', - }, - }, - disabled: { - color: 'white', - background: { - color: '#b3cef0', - }, - }, - }, - 'la-gauffre': { - activated: false, - }, - 'home-proconnect': { - activated: false, - }, - }, +import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit'; + +const customColors = { + 'primary-action': '#1212FF', + 'primary-bg': '#FAFAFA', + 'blue-400': '#7AB1E8', + 'blue-500': '#417DC4', + 'blue-600': '#3558A2', + 'brown-400': '#E6BE92', + 'brown-500': '#BD987A', + 'brown-600': '#745B47', + 'cyan-400': '#34BAB5', + 'cyan-500': '#009099', + 'cyan-600': '#006A6F', + 'gold-400': '#FFCA00', + 'gold-500': '#C3992A', + 'gold-600': '#695240', + 'green-400': '#34CB6A', + 'green-500': '#00A95F', + 'green-600': '#297254', + 'olive-400': '#99C221', + 'olive-500': '#68A532', + 'olive-600': '#447049', + 'orange-400': '#FF732C', + 'orange-500': '#E4794A', + 'orange-600': '#755348', + 'pink-400': '#FFB7AE', + 'pink-500': '#E18B76', + 'pink-600': '#8D533E', + 'purple-400': '#CE70CC', + 'purple-500': '#A558A0', + 'purple-600': '#6E445A', + 'yellow-400': '#D8C634', + 'yellow-500': '#B7A73F', + 'yellow-600': '#66673D', +}; + +tokens.themes.default.theme.colors = { + ...tokens.themes.default.theme.colors, + ...customColors, +}; + +tokens.themes.default.components = { + ...tokens.themes.default.components, + ...{ + 'la-gauffre': { + activated: true, }, - dsfr: { - theme: { - colors: { - 'card-border': '#E5E5E5', - 'primary-text': '#000091', - 'primary-100': '#ECECFE', - 'primary-150': '#F4F4FD', - 'primary-200': '#E3E3FD', - 'primary-300': '#CACAFB', - 'primary-400': '#8585F6', - 'primary-500': '#6A6AF4', - 'primary-600': '#313178', - 'primary-700': '#272747', - 'primary-800': '#000091', - 'primary-900': '#21213F', - 'secondary-text': '#fff', - 'secondary-100': '#fee9ea', - 'secondary-200': '#fedfdf', - 'secondary-300': '#fdbfbf', - 'secondary-400': '#e1020f', - 'secondary-500': '#c91a1f', - 'secondary-600': '#5e2b2b', - 'secondary-700': '#3b2424', - 'secondary-800': '#341f1f', - 'secondary-900': '#2b1919', - 'greyscale-text': '#303C4B', - 'greyscale-000': '#fff', - 'greyscale-050': '#F6F6F6', - 'greyscale-100': '#eee', - 'greyscale-200': '#E5E5E5', - 'greyscale-250': '#ddd', - 'greyscale-300': '#CECECE', - 'greyscale-350': '#ddd', - 'greyscale-400': '#929292', - 'greyscale-500': '#7C7C7C', - 'greyscale-600': '#666666', - 'greyscale-700': '#3A3A3A', - 'greyscale-750': '#353535', - 'greyscale-800': '#2A2A2A', - 'greyscale-900': '#242424', - 'greyscale-950': '#1E1E1E', - 'greyscale-1000': '#161616', - 'success-text': '#1f8d49', - 'success-100': '#dffee6', - 'success-200': '#b8fec9', - 'success-300': '#88fdaa', - 'success-400': '#3bea7e', - 'success-500': '#1f8d49', - 'success-600': '#18753c', - 'success-700': '#204129', - 'success-800': '#1e2e22', - 'success-900': '#19281d', - 'info-text': '#0078f3', - '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', - 'warning-300': '#ffded9', - 'warning-400': '#ffbeb4', - 'warning-500': '#d64d00', - 'warning-600': '#b34000', - 'warning-700': '#5e2c21', - 'warning-800': '#3e241e', - 'warning-900': '#361e19', - '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': '#391C1C', - }, - font: { - families: { - accent: 'Marianne', - base: 'Marianne', - }, - }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', - }, - }, - components: { - alert: { - 'border-radius': '0', - error: { - 'background-color': 'var(--c--theme--colors--danger-100)', - 'border-left-color': 'var(--c--theme--colors--danger-400)', - close: { - color: 'white', - 'background-color': 'var(--c--theme--colors--danger-400)', - 'background-color-hover': 'var(--c--theme--colors--danger-600)', - }, - }, - }, - modal: { - 'width-small': '342px', - }, - button: { - 'medium-height': '40px', - 'medium-text-height': '40px', - 'border-radius': '4px', - primary: { - background: { - color: 'var(--c--theme--colors--primary-text)', - 'color-hover': '#1212ff', - 'color-active': '#2323ff', - }, - color: '#fff', - 'color-hover': '#fff', - 'color-active': '#fff', - }, - 'primary-text': { - background: { - 'color-hover': 'var(--c--theme--colors--primary-100)', - 'color-active': 'var(--c--theme--colors--primary-100)', - }, - 'color-hover': 'var(--c--theme--colors--primary-text)', - color: 'var(--c--theme--colors--primary-800)', - }, - secondary: { - background: { - 'color-hover': '#F6F6F6', - 'color-active': '#EDEDED', - }, - border: { - color: 'var(--c--theme--colors--greyscale-300)', - 'color-hover': 'var(--c--theme--colors--greyscale-300)', - }, - color: 'var(--c--theme--colors--primary-text)', - }, - 'tertiary-text': { - background: { - 'color-hover': 'var(--c--theme--colors--greyscale-100)', - }, - 'color-hover': 'var(--c--theme--colors--primary-text)', - color: 'var(--c--theme--colors--primary-600)', - }, - }, - datagrid: { - header: { - color: 'var(--c--theme--colors--primary-text)', - size: 'var(--c--theme--font--sizes--s)', - }, - body: { - 'background-color': 'transparent', - 'background-color-hover': '#F4F4FD', - }, - pagination: { - 'background-color': 'transparent', - 'background-color-active': 'var(--c--theme--colors--primary-300)', - 'border-color': 'var(--c--theme--colors--primary-400)', - }, - }, - 'forms-checkbox': { - 'border-radius': '0', - color: 'var(--c--theme--colors--primary-text)', - text: { - color: 'var(--c--theme--colors--greyscale-text)', - size: 'var(--c--theme--font--sizes--t)', - }, - }, - 'forms-datepicker': { - 'border-radius': '0', - }, - 'forms-fileuploader': { - 'border-radius': '0', - }, - 'forms-field': { - color: 'var(--c--theme--colors--primary-text)', - 'footer-font-size': 'var(--c--theme--font--sizes--t)', - 'footer-color': 'var(--c--theme--colors--greyscale-text)', - }, - 'forms-input': { - 'border-radius': '4px', - 'background-color': '#fff', - '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)', - 'font-size': '14px', - }, - 'forms-labelledbox': { - 'label-color': { - big: 'var(--c--theme--colors--primary-text)', - }, - }, - 'forms-radio': { - 'accent-color': 'var(--c--theme--colors--primary-600)', - }, - 'forms-select': { - 'item-font-size': '14px', - 'border-radius': '4px', - 'border-radius-hover': '4px', - 'background-color': '#fff', - 'border-color': 'var(--c--theme--colors--primary-text)', - 'border-color-hover': 'var(--c--theme--colors--primary-text)', - 'box-shadow-color': 'var(--c--theme--colors--primary-text)', - }, - 'forms-switch': { - 'handle-border-radius': '2px', - 'rail-border-radius': '4px', - 'accent-color': 'var(--c--theme--colors--primary-text)', - }, - 'forms-textarea': { - 'border-radius': '0', - }, - 'la-gauffre': { - activated: true, - }, - 'home-proconnect': { - activated: true, - }, - }, + 'home-proconnect': { + activated: true, }, }, }; -export default config; +export default tokens; diff --git a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx index 69f1dff2..c3c6bcfd 100644 --- a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx +++ b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx @@ -1,9 +1,9 @@ import { useCunninghamTheme } from '../useCunninghamTheme'; describe('', () => { - it('has the dsfr logo correctly set', () => { + it('has the logo correctly set', () => { const { themeTokens, setTheme } = useCunninghamTheme.getState(); - setTheme('dsfr'); + setTheme('default'); const logo = themeTokens().logo; expect(logo?.src).toBe('/assets/logo-gouv.svg'); expect(logo?.widthHeader).toBe('110px'); diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-custom-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-custom-tokens.css index 885bd8ac..200005b5 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-custom-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-custom-tokens.css @@ -25,4 +25,11 @@ --c--components--forms-select--value-color--disabled: var( --c--theme--colors--greyscale-400 ); + + /** + * Button + **/ + --c--components--button--border-radius--active: var( + --c--components--button--border-radius + ); } diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css deleted file mode 100644 index 0cd47575..00000000 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ /dev/null @@ -1,633 +0,0 @@ -@import url('@openfun/cunningham-react/icons'); -@import url('@openfun/cunningham-react/style'); -@import url('@openfun/cunningham-react/fonts'); -@import url('./cunningham-tokens.css'); -@import url('./cunningham-custom-tokens.css'); -@import url('../assets/fonts/Marianne/Marianne-font.css'); - -.c__input, -.c__field, -.c__select, -.c__datagrid { - font-family: var(--c--theme--font--families--base); -} - -.c__field { - line-height: initial; -} - -.c__field .c__field__footer { - padding: 2px 0 0; - font-size: var(--c--components--forms-field--footer-font-size); - color: var(--c--components--forms-field--footer-color); -} - -.labelled-box label { - color: var(--c--theme--colors--primary-text); -} - -.labelled-box--disabled label { - color: var(--c--components--forms-labelledbox--label-color--small-disabled); -} - -.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder { - top: 50%; - transform: translateY(-50%); -} - -/** - * Input - * TextArea -*/ -.c__input__wrapper, -.c__textarea__wrapper { - transition: all var(--c--theme--transitions--duration) - var(--c--theme--transitions--ease-out); -} - -.c__input__wrapper:has(input[readonly]), -.c__input__wrapper:has(input[readonly]) * { - cursor: default; -} - -.c__textarea__wrapper:has(input.border-none), -.c__textarea__wrapper:has(input.border-none) *, -.c__input__wrapper:has(input.border-none), -.c__input__wrapper:has(input.border-none) * { - border: none; -} - -.c__input__wrapper:hover, -.c__textarea__wrapper:hover { - box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px; -} - -.c__textarea__wrapper--disabled:hover, -.c__input__wrapper--disabled:hover, -.c__input__wrapper:hover:has(input[readonly]) { - box-shadow: var(--c--theme--colors--primary-500) 0 0 0 0; -} - -.c__input__wrapper--disabled { - color: var(--c--components--forms-input--value-color--disabled); -} - -.c__input__wrapper .labelled-box__label.placeholder { - cursor: inherit; -} - -.c__input__wrapper .c__input, -.c__textarea__wrapper .c__textarea { - width: 100%; -} - -.c__input__wrapper--disabled .c__input { - color: var(--c--components--forms-input--value-color--disabled); -} - -.c__input__wrapper--error .c__input { - color: var(--c--components--forms-input--color--error); -} - -.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover { - border-color: var(--c--components--forms-input--border--color-error-hover); - color: var(--c--components--forms-input--color--error-hover); -} - -.c__input__wrapper--error:hover { - box-shadow: var(--c--components--forms-input--color--box-shadow-error-hover) 0 - 0 0 2px; -} - -.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover label { - color: var(--c--components--forms-input--border--color-error-hover); -} - -input:-webkit-autofill, -input:-webkit-autofill:focus { - transition: - background-color 0s 600000s, - color 0s 600000s; -} - -.c__textarea__wrapper .c__textarea { - color: var(--c--components--forms-textarea--color); -} - -.c__textarea__wrapper:hover { - border-color: var(--c--components--forms-textarea--border-color-hover); -} - -.c__textarea__wrapper--disabled:hover { - border-color: var( - --c--components--forms-textarea--disabled--border-color-hover - ); -} - -/** - * Select -*/ -.c_select__no_border .c__select .c__select__wrapper, -.c_select__no_border .c__select .c__select__wrapper:hover, -.c_select__no_border - .c__select:not(.c__select--disabled) - .c__select__wrapper:hover { - border: none; - box-shadow: none; -} - -.c__select__wrapper { - transition: all var(--c--theme--transitions--duration) - var(--c--theme--transitions--ease-out); - min-height: var(--c--components--forms-select--height); - height: auto; -} - -.c__select:not(.c__select--disabled) .c__select__wrapper:hover { - box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px; -} - -.c__select__wrapper:hover { - border-radius: var(--c--components--forms-select--border-radius-hover); - border-color: var(--c--components--forms-select--border-color-hover); -} - -.c__select--disabled .c__select__wrapper:hover { - border-color: var(--c--components--forms-select--border-color-disabled-hover); -} - -.c__select--disabled .c__select__wrapper label, -.c__select--disabled .c__select__wrapper input, -.c__select--disabled .c__select__wrapper { - cursor: not-allowed; -} - -.c__select__menu__item { - transition: all var(--c--theme--transitions--duration) - var(--c--theme--transitions--ease-out); -} - -.c__select--disabled .c__select__wrapper label, -.c__select--disabled .c__select__wrapper input, -.c_select__no_bg .c__select__wrapper { - background: none; -} - -.c__select__wrapper:focus-within .labelled-box--disabled label { - color: var(--c--components--forms-labelledbox--label-color--small-disabled); -} - -.c__select__wrapper .labelled-box { - display: flex; - gap: 0.6rem; - flex-direction: column; - align-items: flex-start; -} - -.c__select__wrapper .labelled-box .labelled-box__children { - padding: unset; - padding-right: 5rem; -} - -.c__select__wrapper .labelled-box .c__select__inner__actions { - right: 0; - top: 50%; - position: absolute; -} - -.c__select__wrapper label { - position: relative; - padding-right: 5rem; - max-width: none; -} - -.c__select__wrapper .c__select__inner__actions__open:focus { - outline: none; -} - -.c__select__wrapper .labelled-box__label.c__offscreen { - display: none; -} - -/** - * DataGrid -*/ -.c__datagrid__table__container { - overflow: auto; -} - -.c__datagrid__table__container > table th .c__datagrid__header { - color: var(--c--components--datagrid--header--color); - font-weight: var(--c--components--datagrid--header--weight); - font-size: var(--c--components--datagrid--header--size); - padding-block: 2rem; -} - -.c__datagrid__table__container > table tbody tr { - border: none; - border-top: 1px var(--c--theme--colors--greyscale-100) solid; - border-bottom: 1px var(--c--theme--colors--greyscale-100) solid; -} - -.c__datagrid__table__container > table tbody { - background-color: var(--c--components--datagrid--body--background-color); -} - -.c__datagrid__table__container > table tbody tr:hover { - background-color: var( - --c--components--datagrid--body--background-color-hover - ); -} - -.c__datagrid__table__container > table { - table-layout: auto; -} - -.c__datagrid__table__container > table td { - white-space: break-spaces; -} - -.c__datagrid__table__container > table th:first-child, -.c__datagrid__table__container > table td:first-child { - padding-left: 2rem; -} - -.c__datagrid > .c__pagination { - padding-inline: 1rem; - justify-content: flex-end; -} - -.c__pagination__list { - gap: 3px; - border-radius: 4px; - background: var(--c--components--datagrid--pagination--background-color); - border-color: var(--c--components--datagrid--pagination--border-color); -} - -.c__pagination__list .c__button--tertiary-text.c__button--active { - background-color: var( - --c--components--datagrid--pagination--background-color-active - ); - color: var(--c--theme--colors--greyscale-800); -} - -.c__pagination__list .c__button--tertiary-text:disabled { - display: none; -} - -@media (width <= 380px) { - .c__datagrid > .c__pagination { - flex-direction: column; - align-items: center; - gap: 1rem; - } -} - -/** - * Date picker -*/ -.c__popover.c__popover--borderless { - z-index: 3; -} - -.c__date-picker__wrapper { - transition: all var(--c--theme--transitions--duration) - var(--c--theme--transitions--ease-out); -} - -.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper { - box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px; -} - -.c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover - .c__date-picker__wrapper { - box-shadow: var(--c--theme--colors--danger-300) 0 0 0 2px; -} - -.c__date-picker__wrapper button[aria-label='Clear date'], -.c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * { - color: var(--c--theme--colors--danger-300); -} - -/** - * Checkbox -*/ -.c__checkbox:focus-within { - border-color: transparent; - background-color: transparent; -} - -.c__checkbox { - transition: all 0.8s ease-in-out; -} - -.c__checkbox .c__field__text { - color: var(--c--components--forms-checkbox--text--color); - font-size: var(--c--components--forms-checkbox--text--size); -} - -.c__checkbox.c__checkbox--disabled .c__field__text { - color: var(--c--theme--colors--greyscale-600); -} - -.c__switch.c__checkbox--disabled .c__switch__rail { - cursor: not-allowed; -} - -.c__checkbox.c__checkbox--disabled .c__checkbox__label { - color: var(--c--theme--colors--greyscale-400); -} - -/** - * Button -*/ -.c__button { - text-decoration: none; -} - -.c__button:hover.c__button-no-bg, -.c__button.c__button-no-bg, -.c__button:disabled.c__button-no-bg { - background-color: transparent; -} - -.c__button--nano { - 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 { - height: auto; - min-height: var(--c--components--button--medium-height); -} - -.c__button--small { - padding: 0.6rem 0.75rem; -} - -.c__button--with-icon--right { - padding: 0.7rem var(--c--theme--spacings--t) 0.7rem - var(--c--theme--spacings--s); -} - -.c__button--primary { - background-color: var(--c--components--button--primary--background--color); - color: var(--c--components--button--primary--color); -} - -.c__button--primary:hover { - background-color: var( - --c--components--button--primary--background--color-hover - ); - color: var(--c--components--button--primary--color-hover); -} - -.c__button--primary:active, -.c__button--primary.c__button--active { - background-color: var( - --c--components--button--primary--background--color-active - ); - color: var(--c--components--button--primary--color-active); - border-color: var(--c--components--button--primary--border--color-active); -} - -.c__button--primary-text:active, -.c__button--primary-text.c__button--active { - border: none; - background-color: var( - --c--components--button--primary-text--background--color-active - ); -} - -.c__button--primary-text { - color: var(--c--components--button--primary-text--color); -} - -.c__button--primary-text:hover, -.c__button--primary-text:focus-visible { - background-color: var( - --c--components--button--primary-text--background--color-hover - ); - color: var(--c--components--button--primary-text--color-hover); -} - -.c__button:disabled { - background-color: var(--c--components--button--disabled--background--color); - color: var(--c--components--button--disabled--color); -} - -.c__button--success { - background-color: var(--c--components--button--success--background--color); - color: var(--c--components--button--success--color); -} - -.c__button--success:hover, -.c__button--success:focus-visible { - background-color: var( - --c--components--button--success--background--color-hover - ); - color: var(--c--components--button--success--color-hover); -} - -.c__button--success:disabled { - background-color: var( - --c--components--button--success--background--color-disabled - ); - color: var(--c--components--button--success--color-disabled); -} - -.c__button--secondary { - background-color: var(--c--components--button--secondary--background--color); - color: var(--c--components--button--secondary--color); - border: 1px solid var(--c--components--button--secondary--border--color); -} - -.c__button--secondary:hover, -.c__button--secondary:focus-visible { - background-color: var( - --c--components--button--secondary--background--color-hover - ); - color: var(--c--components--button--secondary--color-hover); - border: 1px solid var(--c--components--button--secondary--border--color-hover); -} - -.c__button--tertiary { - background-color: var(--c--components--button--tertiary--background--color); - color: var(--c--components--button--tertiary--color); - border: none; -} - -.c__button--tertiary:hover, -.c__button--tertiary:focus-visible { - background-color: var( - --c--components--button--tertiary--background--color-hover - ); - color: var(--c--components--button--tertiary--color); -} - -.c__button--tertiary:active { - background-color: var( - --c--components--button--tertiary--background--color-active - ); - color: var(--c--components--button--tertiary--color-active); -} - -.c__button--tertiary:disabled { - background-color: var( - --c--components--button--tertiary--background--color-disabled - ); - color: var(--c--components--button--tertiary--color-disabled); -} - -.c__button--tertiary-text { - border: none; - color: var(--c--components--button--tertiary-text--color); -} - -.c__button--tertiary-text:hover, -.c__button--tertiary-text:focus-visible { - background-color: var( - --c--components--button--tertiary-text--background--color-hover - ); - color: var(--c--components--button--tertiary-text--color-hover); -} - -.c__button--tertiary-text:disabled { - background-color: var( - --c--components--button--tertiary-text--background--color-disabled - ); - color: var(--c--components--button--tertiary-text--color-disabled); -} - -.c__button--danger { - background-color: var(--c--components--button--danger--background--color); -} - -.c__button--danger:hover, -.c__button--danger:focus-visible { - background-color: var( - --c--components--button--danger--background--color-hover - ); - color: var(--c--components--button--danger--color-hover); -} - -.c__button--danger:disabled { - background-color: var( - --c--components--button--danger--background--color-disabled - ); -} - -/** - * Modal -*/ -.c__modal__backdrop { - z-index: 1000; -} - -.c__modal__close .c__button--tertiary-text:hover, -.c__modal__close .c__button--tertiary-text:focus-visible { - box-shadow: none; -} - -.c__modal__close button { - 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__close .c__button { - padding: 0 !important; - top: -0.65rem; - right: -0.65rem; -} - -.c__modal--full .c__modal__content { - overflow-y: auto; -} - -.c__modal__title { - padding: 0; - font-size: 1.125rem; - margin-bottom: var(--c--theme--spacings--2xs); -} - -@media screen and (width <= 420px) { - .c__modal__scroller { - padding: 0.7rem; - } - - .c__modal__title h2 { - font-size: 1rem; - } -} - -@media (width <= 576px) { - .c__modal__footer--sided { - gap: 0.5rem; - flex-direction: column-reverse; - } -} - -.c__modal__scroller:has(.noPadding) { - padding: 0 !important; - - .c__modal__close .c__button { - right: 5px; - top: 5px; - padding: 1.5rem 1rem; - } - - .c__modal__title { - font-size: var(--c--theme--font--sizes--xs); - padding: var(--c--theme--spacings--base); - margin-bottom: 0; - } -} - -/** - * Toast -*/ -.c__toast__container { - z-index: 10000; -} - -/** - * Tooltip -*/ -.c__tooltip { - padding: 4px 6px; -} - -/** - * Alert -*/ -.c__alert--error { - background-color: var(--c--components--alert--error--background-color); - border-left-color: var(--c--components--alert--error--border-left-color); -} - -.c__alert--error .c__button--tertiary { - background-color: var(--c--components--alert--error--close--background-color); - color: var(--c--components--alert--error--close--color); -} - -.c__alert.c__alert--error .c__button--tertiary:hover { - background-color: var( - --c--components--alert--error--close--background-color-hover - ); -} diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 7263d1a0..16dcc3a9 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -1,82 +1,85 @@ :root { - --c--theme--colors--secondary-text: var(--c--theme--colors--greyscale-700); - --c--theme--colors--secondary-100: #f2f7fc; - --c--theme--colors--secondary-200: #ebf3fa; - --c--theme--colors--secondary-300: #e2eef8; - --c--theme--colors--secondary-400: #ddeaf7; - --c--theme--colors--secondary-500: #d4e5f5; - --c--theme--colors--secondary-600: #c1d0df; - --c--theme--colors--secondary-700: #97a3ae; - --c--theme--colors--secondary-800: #757e87; - --c--theme--colors--secondary-900: #596067; - --c--theme--colors--info-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--info-100: #ebf2fc; - --c--theme--colors--info-200: #8cb5ea; - --c--theme--colors--info-300: #5894e1; - --c--theme--colors--info-400: #377fdb; - --c--theme--colors--info-500: #055fd2; - --c--theme--colors--info-600: #0556bf; - --c--theme--colors--info-700: #044395; - --c--theme--colors--info-800: #033474; - --c--theme--colors--info-900: #022858; - --c--theme--colors--greyscale-100: #fafafb; - --c--theme--colors--greyscale-200: #f3f4f4; - --c--theme--colors--greyscale-300: #e7e8ea; - --c--theme--colors--greyscale-400: #c2c6ca; - --c--theme--colors--greyscale-500: #9ea3aa; - --c--theme--colors--greyscale-600: #79818a; - --c--theme--colors--greyscale-700: #555f6b; - --c--theme--colors--greyscale-800: #303c4b; - --c--theme--colors--greyscale-900: #0c1a2b; + --c--theme--colors--secondary-text: #fff; + --c--theme--colors--secondary-100: #fee9ea; + --c--theme--colors--secondary-200: #fedfdf; + --c--theme--colors--secondary-300: #fdbfbf; + --c--theme--colors--secondary-400: #e1020f; + --c--theme--colors--secondary-500: #c91a1f; + --c--theme--colors--secondary-600: #5e2b2b; + --c--theme--colors--secondary-700: #3b2424; + --c--theme--colors--secondary-800: #341f1f; + --c--theme--colors--secondary-900: #2b1919; + --c--theme--colors--info-text: #0078f3; + --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: #273961; + --c--theme--colors--info-800: #222a3f; + --c--theme--colors--info-900: #1d2437; + --c--theme--colors--greyscale-100: #eee; + --c--theme--colors--greyscale-200: #e5e5e5; + --c--theme--colors--greyscale-300: #cecece; + --c--theme--colors--greyscale-400: #929292; + --c--theme--colors--greyscale-500: #7c7c7c; + --c--theme--colors--greyscale-600: #666; + --c--theme--colors--greyscale-700: #3a3a3a; + --c--theme--colors--greyscale-800: #2a2a2a; + --c--theme--colors--greyscale-900: #242424; --c--theme--colors--greyscale-000: #fff; - --c--theme--colors--primary-100: #edf5fa; - --c--theme--colors--primary-200: #8cb5ea; - --c--theme--colors--primary-300: #5894e1; - --c--theme--colors--primary-400: #377fdb; - --c--theme--colors--primary-500: #055fd2; - --c--theme--colors--primary-600: #0556bf; - --c--theme--colors--primary-700: #044395; - --c--theme--colors--primary-800: #033474; - --c--theme--colors--primary-900: #022858; - --c--theme--colors--success-100: #effcd3; - --c--theme--colors--success-200: #dbfaa9; - --c--theme--colors--success-300: #bef27c; - --c--theme--colors--success-400: #a0e659; - --c--theme--colors--success-500: #76d628; - --c--theme--colors--success-600: #5ab81d; - --c--theme--colors--success-700: #419a14; - --c--theme--colors--success-800: #2c7c0c; - --c--theme--colors--success-900: #1d6607; - --c--theme--colors--warning-100: #fff8cd; - --c--theme--colors--warning-200: #ffef9b; - --c--theme--colors--warning-300: #ffe469; - --c--theme--colors--warning-400: #ffda43; - --c--theme--colors--warning-500: #ffc805; - --c--theme--colors--warning-600: #dba603; - --c--theme--colors--warning-700: #b78702; - --c--theme--colors--warning-800: #936901; - --c--theme--colors--warning-900: #7a5400; - --c--theme--colors--danger-100: #f4b0b0; - --c--theme--colors--danger-200: #ee8a8a; - --c--theme--colors--danger-300: #e65454; - --c--theme--colors--danger-400: #e13333; - --c--theme--colors--danger-500: #da0000; - --c--theme--colors--danger-600: #c60000; - --c--theme--colors--danger-700: #9b0000; - --c--theme--colors--danger-800: #780000; - --c--theme--colors--danger-900: #5c0000; - --c--theme--colors--primary-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--success-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--card-border: #ededed; - --c--theme--colors--primary-bg: #fafafa; - --c--theme--colors--primary-action: #1212ff; + --c--theme--colors--primary-100: #ececfe; + --c--theme--colors--primary-200: #e3e3fd; + --c--theme--colors--primary-300: #cacafb; + --c--theme--colors--primary-400: #8585f6; + --c--theme--colors--primary-500: #6a6af4; + --c--theme--colors--primary-600: #313178; + --c--theme--colors--primary-700: #272747; + --c--theme--colors--primary-800: #000091; + --c--theme--colors--primary-900: #21213f; + --c--theme--colors--success-100: #dffee6; + --c--theme--colors--success-200: #b8fec9; + --c--theme--colors--success-300: #88fdaa; + --c--theme--colors--success-400: #3bea7e; + --c--theme--colors--success-500: #1f8d49; + --c--theme--colors--success-600: #18753c; + --c--theme--colors--success-700: #204129; + --c--theme--colors--success-800: #1e2e22; + --c--theme--colors--success-900: #19281d; + --c--theme--colors--warning-100: #fff4f3; + --c--theme--colors--warning-200: #ffe9e6; + --c--theme--colors--warning-300: #ffded9; + --c--theme--colors--warning-400: #ffbeb4; + --c--theme--colors--warning-500: #d64d00; + --c--theme--colors--warning-600: #b34000; + --c--theme--colors--warning-700: #5e2c21; + --c--theme--colors--warning-800: #3e241e; + --c--theme--colors--warning-900: #361e19; + --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: #391c1c; + --c--theme--colors--primary-text: #000091; + --c--theme--colors--success-text: #1f8d49; + --c--theme--colors--warning-text: #d64d00; + --c--theme--colors--danger-text: #fff; --c--theme--colors--primary-050: #f5f5fe; - --c--theme--colors--primary-150: #e5eefa; - --c--theme--colors--primary-950: #1b1b35; - --c--theme--colors--info-150: #e5eefa; + --c--theme--colors--primary-150: #f4f4fd; + --c--theme--colors--greyscale-text: #303c4b; + --c--theme--colors--greyscale-050: #f6f6f6; + --c--theme--colors--greyscale-250: #ddd; + --c--theme--colors--greyscale-350: #ddd; + --c--theme--colors--greyscale-750: #353535; + --c--theme--colors--greyscale-950: #1e1e1e; --c--theme--colors--greyscale-1000: #161616; + --c--theme--colors--primary-action: #1212ff; + --c--theme--colors--primary-bg: #fafafa; --c--theme--colors--blue-400: #7ab1e8; --c--theme--colors--blue-500: #417dc4; --c--theme--colors--blue-600: #3558a2; @@ -135,8 +138,8 @@ --c--theme--font--weights--bold: 600; --c--theme--font--weights--extrabold: 800; --c--theme--font--weights--black: 900; - --c--theme--font--families--base: 'Roboto Flex Variable', sans-serif; - --c--theme--font--families--accent: 'Roboto Flex Variable', sans-serif; + --c--theme--font--families--base: marianne; + --c--theme--font--families--accent: marianne; --c--theme--font--letterspacings--h1: normal; --c--theme--font--letterspacings--h2: normal; --c--theme--font--letterspacings--h3: normal; @@ -182,170 +185,271 @@ --c--theme--breakpoints--xl: 1200px; --c--theme--breakpoints--xxl: 1400px; --c--theme--breakpoints--xxs: 320px; - --c--theme--logo--src: ; - --c--theme--logo--widthheader: ; - --c--theme--logo--widthfooter: ; - --c--theme--logo--alt: ; - --c--components--datagrid--header--weight: var( - --c--theme--font--weights--extrabold - ); - --c--components--datagrid--header--size: var(--c--theme--font--sizes--ml); - --c--components--datagrid--cell--color: var(--c--theme--colors--primary-500); - --c--components--datagrid--cell--size: var(--c--theme--font--sizes--ml); - --c--components--forms-checkbox--background-color--hover: #055fd214; - --c--components--forms-checkbox--color: var(--c--theme--colors--primary-500); - --c--components--forms-checkbox--font-size: var(--c--theme--font--sizes--ml); - --c--components--forms-datepicker--border-color: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-datepicker--value-color: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-datepicker--border-radius--hover: var( - --c--components--forms-datepicker--border-radius - ); - --c--components--forms-datepicker--border-radius--focus: var( - --c--components--forms-datepicker--border-radius - ); - --c--components--forms-field--color: var(--c--theme--colors--primary-500); - --c--components--forms-field--value-color: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-field--width: auto; - --c--components--forms-input--value-color: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-input--border-color: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-input--color--error: var( - --c--theme--colors--danger-500 - ); - --c--components--forms-input--color--error-hover: var( - --c--theme--colors--danger-500 - ); - --c--components--forms-input--color--box-shadow-error-hover: var( - --c--theme--colors--danger-500 - ); - --c--components--forms-labelledbox--label-color--small: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-labelledbox--label-color--small-disabled: var( - --c--theme--colors--greyscale-400 - ); - --c--components--forms-labelledbox--label-color--big--disabled: var( - --c--theme--colors--greyscale-400 - ); - --c--components--forms-select--border-color: var( - --c--theme--colors--primary-500 - ); - --c--components--forms-select--border-color-disabled-hover: var( - --c--theme--colors--greyscale-200 - ); - --c--components--forms-select--border-radius--hover: var( - --c--components--forms-select--border-radius - ); - --c--components--forms-select--border-radius--focus: var( - --c--components--forms-select--border-radius - ); - --c--components--forms-select--font-size: var(--c--theme--font--sizes--ml); - --c--components--forms-select--menu-background-color: #fff; - --c--components--forms-select--item-background-color--hover: var( - --c--theme--colors--primary-300 - ); - --c--components--forms-switch--accent-color: var( - --c--theme--colors--primary-400 - ); - --c--components--forms-textarea--border-color: var( - --c--components--forms-textarea--border-color - ); - --c--components--forms-textarea--border-color-hover: var( - --c--components--forms-textarea--border-color - ); - --c--components--forms-textarea--border-radius--hover: var( - --c--components--forms-textarea--border-radius - ); - --c--components--forms-textarea--border-radius--focus: var( - --c--components--forms-textarea--border-radius - ); - --c--components--forms-textarea--color: var(--c--theme--colors--primary-500); - --c--components--forms-textarea--disabled--border-color-hover: var( - --c--theme--colors--greyscale-200 - ); - --c--components--modal--background-color: #fff; - --c--components--button--border-radius--active: var( - --c--components--button--border-radius - ); - --c--components--button--medium-height: auto; - --c--components--button--small-height: auto; - --c--components--button--success--color: white; - --c--components--button--success--color-disabled: white; - --c--components--button--success--color-hover: white; - --c--components--button--success--background--color: var( - --c--theme--colors--success-600 - ); - --c--components--button--success--background--color-disabled: var( - --c--theme--colors--greyscale-300 - ); - --c--components--button--success--background--color-hover: var( - --c--theme--colors--success-800 - ); - --c--components--button--danger--color-hover: white; - --c--components--button--danger--background--color: var( - --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 - ); - --c--components--button--primary--color: var( - --c--theme--colors--primary-text - ); - --c--components--button--primary--color-active: var( - --c--theme--colors--primary-text - ); + --c--theme--breakpoints--mobile: 768px; + --c--theme--breakpoints--tablet: 1024px; + --c--theme--logo--src: /assets/logo-gouv.svg; + --c--theme--logo--widthheader: 110px; + --c--theme--logo--widthfooter: 220px; + --c--theme--logo--alt: gouvernement logo; + --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--small-height: 26px; --c--components--button--primary--background--color: var( - --c--theme--colors--primary-400 - ); - --c--components--button--primary--background--color-active: var( - --c--theme--colors--primary-500 - ); - --c--components--button--primary--border--color-active: transparent; - --c--components--button--secondary--color: var( - --c--theme--colors--primary-500 - ); - --c--components--button--secondary--color-hover: var( --c--theme--colors--primary-text ); - --c--components--button--secondary--background--color: white; - --c--components--button--secondary--background--color-hover: var( - --c--theme--colors--primary-700 + --c--components--button--primary--background--color-hover: #1212ff; + --c--components--button--primary--background--color-active: #2323ff; + --c--components--button--primary--background--color-disabled: var( + --c--theme--colors--greyscale-100 + ); + --c--components--button--primary--color: #fff; + --c--components--button--primary--color-hover: #fff; + --c--components--button--primary--color-active: #fff; + --c--components--button--primary--color-focus-visible: #fff; + --c--components--button--primary--disabled: var( + --c--theme--colors--greyscale-500 + ); + --c--components--button--primary-text--background--color: var( + --c--theme--colors--primary-text + ); + --c--components--button--primary-text--background--color-hover: var( + --c--theme--colors--greyscale-100 + ); + --c--components--button--primary-text--background--color-active: var( + --c--theme--colors--primary-100 + ); + --c--components--button--primary-text--background--color-focus-visible: #fff; + --c--components--button--primary-text--background--color-disabled: var( + --c--theme--colors--greyscale-000 + ); + --c--components--button--primary-text--color: var( + --c--theme--colors--primary-800 + ); + --c--components--button--primary-text--color-hover: var( + --c--theme--colors--primary-800 + ); + --c--components--button--primary-text--disabled: var( + --c--theme--colors--greyscale-400 + ); + --c--components--button--secondary--background--color-hover: #f6f6f6; + --c--components--button--secondary--background--color-active: #ededed; + --c--components--button--secondary--background--color-focus-visible: var( + --c--theme--colors--greyscale-000 + ); + --c--components--button--secondary--background--disabled: var( + --c--theme--colors--greyscale-000 + ); + --c--components--button--secondary--color: var( + --c--theme--colors--primary-800 ); --c--components--button--secondary--border--color: var( --c--theme--colors--greyscale-300 ); - --c--components--button--tertiary--color: var( - --c--theme--colors--primary-text + --c--components--button--secondary--border--color-hover: var( + --c--theme--colors--greyscale-300 ); - --c--components--button--tertiary--color-disabled: var( - --c--theme--colors--greyscale-600 + --c--components--button--secondary--border--color-disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--button--secondary--disabled: var( + --c--theme--colors--greyscale-400 ); --c--components--button--tertiary--background--color: var( --c--theme--colors--primary-100 ); + --c--components--button--tertiary--background--color-focus-visible: var( + --c--theme--colors--primary-100 + ); --c--components--button--tertiary--background--color-hover: var( --c--theme--colors--primary-300 ); --c--components--button--tertiary--background--color-active: var( - --c--theme--colors--primary-100 + --c--theme--colors--primary-300 ); - --c--components--button--tertiary--background--color-disabled: var( + --c--components--button--tertiary--background--disabled: var( + --c--theme--colors--primary-050 + ); + --c--components--button--tertiary--color: var( + --c--theme--colors--primary-800 + ); + --c--components--button--tertiary--disabled: var( + --c--theme--colors--primary-300 + ); + --c--components--button--tertiary-text--background--color-hover: var( + --c--theme--colors--greyscale-100 + ); + --c--components--button--tertiary-text--color-hover: var( + --c--theme--colors--primary-text + ); + --c--components--button--tertiary-text--color: var( + --c--theme--colors--primary-600 + ); + --c--components--button--danger--color-hover: white; + --c--components--button--danger--background--color: var( + --c--theme--colors--danger-600 + ); + --c--components--button--danger--background--color-hover: #ff2725; + --c--components--button--danger--background--color-focus-visible: var( + --c--theme--colors--danger-600 + ); + --c--components--button--danger--background--color-disabled: var( + --c--theme--colors--greyscale-100 + ); + --c--components--button--danger--color-disabled: var( + --c--theme--colors--greyscale-400 + ); + --c--components--datagrid--header--color: var( + --c--theme--colors--greyscale-600 + ); + --c--components--datagrid--header--size: 12px; + --c--components--datagrid--header--weight: 500; + --c--components--datagrid--body--background-color-hover: var( + --c--theme--colors--greyscale-100 + ); + --c--components--forms-checkbox--border-radius: 4px; + --c--components--forms-checkbox--border-color: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-checkbox--background-color--hover: var( + --c--theme--colors--greyscale-100 + ); + --c--components--forms-checkbox--border--color-disabled: var( --c--theme--colors--greyscale-200 ); - --c--components--button--disabled--color: white; - --c--components--button--disabled--background--color: #b3cef0; - --c--components--la-gauffre--activated: false; - --c--components--home-proconnect--activated: false; + --c--components--forms-checkbox--border--color: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-checkbox--background--disabled: var( + --c--theme--colors--greyscale-200 + ); + --c--components--forms-checkbox--background--enable: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-checkbox--check--disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-checkbox--check--enable: var( + --c--theme--colors--greyscale-000 + ); + --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text); + --c--components--forms-checkbox--label--color: var( + --c--theme--colors--greyscale-1000 + ); + --c--components--forms-checkbox--label--size: var( + --c--theme--font--sizes--sm + ); + --c--components--forms-checkbox--label--weight: 500; + --c--components--forms-checkbox--text--color: var( + --c--theme--colors--greyscale-600 + ); + --c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--s); + --c--components--forms-checkbox--text--weight: 400; + --c--components--forms-checkbox--text--color-disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-labelledbox--label-color--small: var( + --c--theme--colors--greyscale-950 + ); + --c--components--forms-labelledbox--label-color--small--disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-labelledbox--label-color--big: var( + --c--theme--colors--greyscale-950 + ); + --c--components--forms-labelledbox--label-color--big--disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-radio--border-color: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-radio--background-color: var( + --c--theme--colors--greyscale-000 + ); + --c--components--forms-radio--accent-color: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-radio--accent-color-disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-switch--border--color-disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-switch--border--color: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-switch--handle-background-color: white; + --c--components--forms-switch--handle-background-color--disabled: var( + --c--theme--colors--greyscale-000 + ); + --c--components--forms-switch--rail-background-color--disabled: var( + --c--theme--colors--greyscale-000 + ); + --c--components--forms-switch--accent-color: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-textarea--label-color--focus: var( + --c--theme--colors--greyscale-1000 + ); + --c--components--forms-textarea--border-radius: 4px; + --c--components--forms-textarea--border-color: var( + --c--theme--colors--greyscale-400 + ); + --c--components--forms-textarea--box-shadow--color--hover: var( + --c--theme--colors--greyscale-400 + ); + --c--components--forms-textarea--box-shadow--color--focus: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-textarea--value-color: var( + --c--theme--colors--greyscale-950 + ); + --c--components--forms-textarea--value-color--disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-textarea--font-size: 14px; + --c--components--forms-input--label-color--focus: var( + --c--theme--colors--greyscale-1000 + ); + --c--components--forms-input--border-radius: 4px; + --c--components--forms-input--border-color: var( + --c--theme--colors--greyscale-400 + ); + --c--components--forms-input--box-shadow--color--hover: var( + --c--theme--colors--greyscale-400 + ); + --c--components--forms-input--box-shadow--color--focus: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-input--value-color: var( + --c--theme--colors--greyscale-950 + ); + --c--components--forms-input--value-color--disabled: var( + --c--theme--colors--greyscale-300 + ); + --c--components--forms-input--font-size: 14px; + --c--components--forms-select--label-color--focus: var( + --c--theme--colors--greyscale-1000 + ); + --c--components--forms-select--item-font-size: 14px; + --c--components--forms-select--border-radius: 4px; + --c--components--forms-select--border-radius-hover: 4px; + --c--components--forms-select--border-color: var( + --c--theme--colors--greyscale-400 + ); + --c--components--forms-select--box-shadow--color--hover: var( + --c--theme--colors--greyscale-400 + ); + --c--components--forms-select--box-shadow--color--focus: var( + --c--theme--colors--primary-800 + ); + --c--components--forms-select--value-color: var( + --c--theme--colors--greyscale-950 + ); + --c--components--forms-select--font-size: 14px; + --c--components--la-gauffre--activated: true; + --c--components--home-proconnect--activated: true; } .cunningham-theme--dark { @@ -397,219 +501,6 @@ --c--theme--colors--danger-900: #9d6666; } -.cunningham-theme--dsfr { - --c--theme--colors--card-border: #e5e5e5; - --c--theme--colors--primary-text: #000091; - --c--theme--colors--primary-100: #ececfe; - --c--theme--colors--primary-150: #f4f4fd; - --c--theme--colors--primary-200: #e3e3fd; - --c--theme--colors--primary-300: #cacafb; - --c--theme--colors--primary-400: #8585f6; - --c--theme--colors--primary-500: #6a6af4; - --c--theme--colors--primary-600: #313178; - --c--theme--colors--primary-700: #272747; - --c--theme--colors--primary-800: #000091; - --c--theme--colors--primary-900: #21213f; - --c--theme--colors--secondary-text: #fff; - --c--theme--colors--secondary-100: #fee9ea; - --c--theme--colors--secondary-200: #fedfdf; - --c--theme--colors--secondary-300: #fdbfbf; - --c--theme--colors--secondary-400: #e1020f; - --c--theme--colors--secondary-500: #c91a1f; - --c--theme--colors--secondary-600: #5e2b2b; - --c--theme--colors--secondary-700: #3b2424; - --c--theme--colors--secondary-800: #341f1f; - --c--theme--colors--secondary-900: #2b1919; - --c--theme--colors--greyscale-text: #303c4b; - --c--theme--colors--greyscale-000: #fff; - --c--theme--colors--greyscale-050: #f6f6f6; - --c--theme--colors--greyscale-100: #eee; - --c--theme--colors--greyscale-200: #e5e5e5; - --c--theme--colors--greyscale-250: #ddd; - --c--theme--colors--greyscale-300: #cecece; - --c--theme--colors--greyscale-350: #ddd; - --c--theme--colors--greyscale-400: #929292; - --c--theme--colors--greyscale-500: #7c7c7c; - --c--theme--colors--greyscale-600: #666; - --c--theme--colors--greyscale-700: #3a3a3a; - --c--theme--colors--greyscale-750: #353535; - --c--theme--colors--greyscale-800: #2a2a2a; - --c--theme--colors--greyscale-900: #242424; - --c--theme--colors--greyscale-950: #1e1e1e; - --c--theme--colors--greyscale-1000: #161616; - --c--theme--colors--success-text: #1f8d49; - --c--theme--colors--success-100: #dffee6; - --c--theme--colors--success-200: #b8fec9; - --c--theme--colors--success-300: #88fdaa; - --c--theme--colors--success-400: #3bea7e; - --c--theme--colors--success-500: #1f8d49; - --c--theme--colors--success-600: #18753c; - --c--theme--colors--success-700: #204129; - --c--theme--colors--success-800: #1e2e22; - --c--theme--colors--success-900: #19281d; - --c--theme--colors--info-text: #0078f3; - --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: #273961; - --c--theme--colors--info-800: #222a3f; - --c--theme--colors--info-900: #1d2437; - --c--theme--colors--warning-text: #d64d00; - --c--theme--colors--warning-100: #fff4f3; - --c--theme--colors--warning-200: #ffe9e6; - --c--theme--colors--warning-300: #ffded9; - --c--theme--colors--warning-400: #ffbeb4; - --c--theme--colors--warning-500: #d64d00; - --c--theme--colors--warning-600: #b34000; - --c--theme--colors--warning-700: #5e2c21; - --c--theme--colors--warning-800: #3e241e; - --c--theme--colors--warning-900: #361e19; - --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: #391c1c; - --c--theme--font--families--accent: marianne; - --c--theme--font--families--base: marianne; - --c--theme--logo--src: /assets/logo-gouv.svg; - --c--theme--logo--widthHeader: 110px; - --c--theme--logo--widthFooter: 220px; - --c--theme--logo--alt: gouvernement logo; - --c--components--alert--border-radius: 0; - --c--components--alert--error--background-color: var( - --c--theme--colors--danger-100 - ); - --c--components--alert--error--border-left-color: var( - --c--theme--colors--danger-400 - ); - --c--components--alert--error--close--color: white; - --c--components--alert--error--close--background-color: var( - --c--theme--colors--danger-400 - ); - --c--components--alert--error--close--background-color-hover: var( - --c--theme--colors--danger-600 - ); - --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 - ); - --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; - --c--components--button--primary-text--background--color-hover: var( - --c--theme--colors--primary-100 - ); - --c--components--button--primary-text--background--color-active: var( - --c--theme--colors--primary-100 - ); - --c--components--button--primary-text--color-hover: var( - --c--theme--colors--primary-text - ); - --c--components--button--primary-text--color: var( - --c--theme--colors--primary-800 - ); - --c--components--button--secondary--background--color-hover: #f6f6f6; - --c--components--button--secondary--background--color-active: #ededed; - --c--components--button--secondary--border--color: var( - --c--theme--colors--greyscale-300 - ); - --c--components--button--secondary--border--color-hover: var( - --c--theme--colors--greyscale-300 - ); - --c--components--button--secondary--color: var( - --c--theme--colors--primary-text - ); - --c--components--button--tertiary-text--background--color-hover: var( - --c--theme--colors--greyscale-100 - ); - --c--components--button--tertiary-text--color-hover: var( - --c--theme--colors--primary-text - ); - --c--components--button--tertiary-text--color: var( - --c--theme--colors--primary-600 - ); - --c--components--datagrid--header--color: var( - --c--theme--colors--primary-text - ); - --c--components--datagrid--header--size: var(--c--theme--font--sizes--s); - --c--components--datagrid--body--background-color: transparent; - --c--components--datagrid--body--background-color-hover: #f4f4fd; - --c--components--datagrid--pagination--background-color: transparent; - --c--components--datagrid--pagination--background-color-active: var( - --c--theme--colors--primary-300 - ); - --c--components--datagrid--pagination--border-color: var( - --c--theme--colors--primary-400 - ); - --c--components--forms-checkbox--border-radius: 0; - --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text); - --c--components--forms-checkbox--text--color: var( - --c--theme--colors--greyscale-text - ); - --c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--t); - --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-field--footer-font-size: var( - --c--theme--font--sizes--t - ); - --c--components--forms-field--footer-color: var( - --c--theme--colors--greyscale-text - ); - --c--components--forms-input--border-radius: 4px; - --c--components--forms-input--background-color: #fff; - --c--components--forms-input--border-color: var( - --c--theme--colors--primary-text - ); - --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-input--font-size: 14px; - --c--components--forms-labelledbox--label-color--big: var( - --c--theme--colors--primary-text - ); - --c--components--forms-radio--accent-color: var( - --c--theme--colors--primary-600 - ); - --c--components--forms-select--item-font-size: 14px; - --c--components--forms-select--border-radius: 4px; - --c--components--forms-select--border-radius-hover: 4px; - --c--components--forms-select--background-color: #fff; - --c--components--forms-select--border-color: var( - --c--theme--colors--primary-text - ); - --c--components--forms-select--border-color-hover: var( - --c--theme--colors--primary-text - ); - --c--components--forms-select--box-shadow-color: var( - --c--theme--colors--primary-text - ); - --c--components--forms-switch--handle-border-radius: 2px; - --c--components--forms-switch--rail-border-radius: 4px; - --c--components--forms-switch--accent-color: var( - --c--theme--colors--primary-text - ); - --c--components--forms-textarea--border-radius: 0; - --c--components--la-gauffre--activated: true; - --c--components--home-proconnect--activated: true; -} - .clr-secondary-text { color: var(--c--theme--colors--secondary-text); } @@ -890,18 +781,6 @@ color: var(--c--theme--colors--danger-text); } -.clr-card-border { - color: var(--c--theme--colors--card-border); -} - -.clr-primary-bg { - color: var(--c--theme--colors--primary-bg); -} - -.clr-primary-action { - color: var(--c--theme--colors--primary-action); -} - .clr-primary-050 { color: var(--c--theme--colors--primary-050); } @@ -910,18 +789,42 @@ color: var(--c--theme--colors--primary-150); } -.clr-primary-950 { - color: var(--c--theme--colors--primary-950); +.clr-greyscale-text { + color: var(--c--theme--colors--greyscale-text); } -.clr-info-150 { - color: var(--c--theme--colors--info-150); +.clr-greyscale-050 { + color: var(--c--theme--colors--greyscale-050); +} + +.clr-greyscale-250 { + color: var(--c--theme--colors--greyscale-250); +} + +.clr-greyscale-350 { + color: var(--c--theme--colors--greyscale-350); +} + +.clr-greyscale-750 { + color: var(--c--theme--colors--greyscale-750); +} + +.clr-greyscale-950 { + color: var(--c--theme--colors--greyscale-950); } .clr-greyscale-1000 { color: var(--c--theme--colors--greyscale-1000); } +.clr-primary-action { + color: var(--c--theme--colors--primary-action); +} + +.clr-primary-bg { + color: var(--c--theme--colors--primary-bg); +} + .clr-blue-400 { color: var(--c--theme--colors--blue-400); } @@ -1322,18 +1225,6 @@ background-color: var(--c--theme--colors--danger-text); } -.bg-card-border { - background-color: var(--c--theme--colors--card-border); -} - -.bg-primary-bg { - background-color: var(--c--theme--colors--primary-bg); -} - -.bg-primary-action { - background-color: var(--c--theme--colors--primary-action); -} - .bg-primary-050 { background-color: var(--c--theme--colors--primary-050); } @@ -1342,18 +1233,42 @@ background-color: var(--c--theme--colors--primary-150); } -.bg-primary-950 { - background-color: var(--c--theme--colors--primary-950); +.bg-greyscale-text { + background-color: var(--c--theme--colors--greyscale-text); } -.bg-info-150 { - background-color: var(--c--theme--colors--info-150); +.bg-greyscale-050 { + background-color: var(--c--theme--colors--greyscale-050); +} + +.bg-greyscale-250 { + background-color: var(--c--theme--colors--greyscale-250); +} + +.bg-greyscale-350 { + background-color: var(--c--theme--colors--greyscale-350); +} + +.bg-greyscale-750 { + background-color: var(--c--theme--colors--greyscale-750); +} + +.bg-greyscale-950 { + background-color: var(--c--theme--colors--greyscale-950); } .bg-greyscale-1000 { background-color: var(--c--theme--colors--greyscale-1000); } +.bg-primary-action { + background-color: var(--c--theme--colors--primary-action); +} + +.bg-primary-bg { + background-color: var(--c--theme--colors--primary-bg); +} + .bg-blue-400 { background-color: var(--c--theme--colors--blue-400); } diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 3703cef4..7e49af89 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -3,84 +3,87 @@ export const tokens = { default: { theme: { colors: { - 'secondary-text': '#555F6B', - 'secondary-100': '#F2F7FC', - 'secondary-200': '#EBF3FA', - 'secondary-300': '#E2EEF8', - 'secondary-400': '#DDEAF7', - 'secondary-500': '#D4E5F5', - 'secondary-600': '#C1D0DF', - 'secondary-700': '#97A3AE', - 'secondary-800': '#757E87', - 'secondary-900': '#596067', - 'info-text': '#fff', - 'info-100': '#EBF2FC', - 'info-200': '#8CB5EA', - 'info-300': '#5894E1', - 'info-400': '#377FDB', - 'info-500': '#055FD2', - 'info-600': '#0556BF', - 'info-700': '#044395', - 'info-800': '#033474', - 'info-900': '#022858', - 'greyscale-100': '#FAFAFB', - 'greyscale-200': '#F3F4F4', - 'greyscale-300': '#E7E8EA', - 'greyscale-400': '#C2C6CA', - 'greyscale-500': '#9EA3AA', - 'greyscale-600': '#79818A', - 'greyscale-700': '#555F6B', - 'greyscale-800': '#303C4B', - 'greyscale-900': '#0C1A2B', + 'secondary-text': '#fff', + 'secondary-100': '#fee9ea', + 'secondary-200': '#fedfdf', + 'secondary-300': '#fdbfbf', + 'secondary-400': '#e1020f', + 'secondary-500': '#c91a1f', + 'secondary-600': '#5e2b2b', + 'secondary-700': '#3b2424', + 'secondary-800': '#341f1f', + 'secondary-900': '#2b1919', + 'info-text': '#0078f3', + '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', + 'greyscale-100': '#eee', + 'greyscale-200': '#E5E5E5', + 'greyscale-300': '#CECECE', + 'greyscale-400': '#929292', + 'greyscale-500': '#7C7C7C', + 'greyscale-600': '#666666', + 'greyscale-700': '#3A3A3A', + 'greyscale-800': '#2A2A2A', + 'greyscale-900': '#242424', 'greyscale-000': '#fff', - 'primary-100': '#EDF5FA', - 'primary-200': '#8CB5EA', - 'primary-300': '#5894E1', - 'primary-400': '#377FDB', - 'primary-500': '#055FD2', - 'primary-600': '#0556BF', - 'primary-700': '#044395', - 'primary-800': '#033474', - 'primary-900': '#022858', - 'success-100': '#EFFCD3', - 'success-200': '#DBFAA9', - 'success-300': '#BEF27C', - 'success-400': '#A0E659', - 'success-500': '#76D628', - 'success-600': '#5AB81D', - 'success-700': '#419A14', - 'success-800': '#2C7C0C', - 'success-900': '#1D6607', - 'warning-100': '#FFF8CD', - 'warning-200': '#FFEF9B', - 'warning-300': '#FFE469', - 'warning-400': '#FFDA43', - 'warning-500': '#FFC805', - 'warning-600': '#DBA603', - 'warning-700': '#B78702', - 'warning-800': '#936901', - 'warning-900': '#7A5400', - 'danger-100': '#F4B0B0', - 'danger-200': '#EE8A8A', - 'danger-300': '#E65454', - 'danger-400': '#E13333', - 'danger-500': '#DA0000', - 'danger-600': '#C60000', - 'danger-700': '#9B0000', - 'danger-800': '#780000', - 'danger-900': '#5C0000', - 'primary-text': '#fff', - 'success-text': '#fff', - 'warning-text': '#fff', - 'danger-text': '#fff', - 'card-border': '#ededed', - 'primary-bg': '#FAFAFA', - 'primary-action': '#1212FF', + 'primary-100': '#ECECFE', + 'primary-200': '#E3E3FD', + 'primary-300': '#CACAFB', + 'primary-400': '#8585F6', + 'primary-500': '#6A6AF4', + 'primary-600': '#313178', + 'primary-700': '#272747', + 'primary-800': '#000091', + 'primary-900': '#21213F', + 'success-100': '#dffee6', + 'success-200': '#b8fec9', + 'success-300': '#88fdaa', + 'success-400': '#3bea7e', + 'success-500': '#1f8d49', + 'success-600': '#18753c', + 'success-700': '#204129', + 'success-800': '#1e2e22', + 'success-900': '#19281d', + 'warning-100': '#fff4f3', + 'warning-200': '#ffe9e6', + 'warning-300': '#ffded9', + 'warning-400': '#ffbeb4', + 'warning-500': '#d64d00', + 'warning-600': '#b34000', + 'warning-700': '#5e2c21', + 'warning-800': '#3e241e', + 'warning-900': '#361e19', + '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': '#391C1C', + 'primary-text': '#000091', + 'success-text': '#1f8d49', + 'warning-text': '#d64d00', + 'danger-text': '#FFF', 'primary-050': '#F5F5FE', - 'primary-150': '#E5EEFA', - 'primary-950': '#1B1B35', - 'info-150': '#E5EEFA', + 'primary-150': '#F4F4FD', + 'greyscale-text': '#303C4B', + 'greyscale-050': '#F6F6F6', + 'greyscale-250': '#ddd', + 'greyscale-350': '#ddd', + 'greyscale-750': '#353535', + 'greyscale-950': '#1E1E1E', 'greyscale-1000': '#161616', + 'primary-action': '#1212FF', + 'primary-bg': '#FAFAFA', 'blue-400': '#7AB1E8', 'blue-500': '#417DC4', 'blue-600': '#3558A2', @@ -145,10 +148,7 @@ export const tokens = { extrabold: 800, black: 900, }, - families: { - base: '"Roboto Flex Variable", sans-serif', - accent: '"Roboto Flex Variable", sans-serif', - }, + families: { base: 'Marianne', accent: 'Marianne' }, letterSpacings: { h1: 'normal', h2: 'normal', @@ -202,141 +202,164 @@ export const tokens = { xl: '1200px', xxl: '1400px', xxs: '320px', + mobile: '768px', + tablet: '1024px', + }, + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', }, - logo: { src: '', widthHeader: '', widthFooter: '', alt: '' }, }, components: { - datagrid: { - header: { - weight: 'var(--c--theme--font--weights--extrabold)', - size: 'var(--c--theme--font--sizes--ml)', - }, - cell: { - color: 'var(--c--theme--colors--primary-500)', - size: 'var(--c--theme--font--sizes--ml)', - }, - }, - 'forms-checkbox': { - 'background-color': { hover: '#055fd214' }, - color: 'var(--c--theme--colors--primary-500)', - 'font-size': 'var(--c--theme--font--sizes--ml)', - }, - 'forms-datepicker': { - 'border-color': 'var(--c--theme--colors--primary-500)', - 'value-color': 'var(--c--theme--colors--primary-500)', - 'border-radius': { - hover: 'var(--c--components--forms-datepicker--border-radius)', - focus: 'var(--c--components--forms-datepicker--border-radius)', - }, - }, - 'forms-field': { - color: 'var(--c--theme--colors--primary-500)', - 'value-color': 'var(--c--theme--colors--primary-500)', - width: 'auto', - }, - 'forms-input': { - 'value-color': 'var(--c--theme--colors--primary-500)', - 'border-color': 'var(--c--theme--colors--primary-500)', - color: { - error: 'var(--c--theme--colors--danger-500)', - 'error-hover': 'var(--c--theme--colors--danger-500)', - 'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)', - }, - }, - 'forms-labelledbox': { - 'label-color': { - small: 'var(--c--theme--colors--primary-500)', - 'small-disabled': 'var(--c--theme--colors--greyscale-400)', - big: { disabled: 'var(--c--theme--colors--greyscale-400)' }, - }, - }, - 'forms-select': { - 'border-color': 'var(--c--theme--colors--primary-500)', - 'border-color-disabled-hover': - 'var(--c--theme--colors--greyscale-200)', - 'border-radius': { - hover: 'var(--c--components--forms-select--border-radius)', - focus: 'var(--c--components--forms-select--border-radius)', - }, - 'font-size': 'var(--c--theme--font--sizes--ml)', - 'menu-background-color': '#fff', - 'item-background-color': { - hover: 'var(--c--theme--colors--primary-300)', - }, - }, - 'forms-switch': { - 'accent-color': 'var(--c--theme--colors--primary-400)', - }, - 'forms-textarea': { - 'border-color': 'var(--c--components--forms-textarea--border-color)', - 'border-color-hover': - 'var(--c--components--forms-textarea--border-color)', - 'border-radius': { - hover: 'var(--c--components--forms-textarea--border-radius)', - focus: 'var(--c--components--forms-textarea--border-radius)', - }, - color: 'var(--c--theme--colors--primary-500)', - disabled: { - 'border-color-hover': 'var(--c--theme--colors--greyscale-200)', - }, - }, - modal: { 'background-color': '#fff' }, + modal: { 'width-small': '342px' }, button: { - 'border-radius': { - active: 'var(--c--components--button--border-radius)', + 'medium-height': '40px', + 'medium-text-height': '40px', + 'border-radius': '4px', + 'small-height': '26px', + primary: { + 'background--color': 'var(--c--theme--colors--primary-text)', + 'background--color-hover': '#1212ff', + 'background--color-active': '#2323ff', + 'background--color-disabled': + 'var(--c--theme--colors--greyscale-100)', + color: '#fff', + 'color-hover': '#fff', + 'color-active': '#fff', + 'color-focus-visible': '#fff', + disabled: 'var(--c--theme--colors--greyscale-500)', }, - 'medium-height': 'auto', - 'small-height': 'auto', - success: { - color: 'white', - 'color-disabled': 'white', - 'color-hover': 'white', - background: { - color: 'var(--c--theme--colors--success-600)', - 'color-disabled': 'var(--c--theme--colors--greyscale-300)', - 'color-hover': 'var(--c--theme--colors--success-800)', - }, + 'primary-text': { + 'background--color': 'var(--c--theme--colors--primary-text)', + 'background--color-hover': 'var(--c--theme--colors--greyscale-100)', + 'background--color-active': 'var(--c--theme--colors--primary-100)', + 'background--color-focus-visible': '#fff', + 'background--color-disabled': + 'var(--c--theme--colors--greyscale-000)', + color: 'var(--c--theme--colors--primary-800)', + 'color-hover': 'var(--c--theme--colors--primary-800)', + disabled: 'var(--c--theme--colors--greyscale-400)', + }, + secondary: { + 'background--color-hover': '#F6F6F6', + 'background--color-active': '#EDEDED', + 'background--color-focus-visible': + 'var(--c--theme--colors--greyscale-000)', + 'background--disabled': 'var(--c--theme--colors--greyscale-000)', + color: 'var(--c--theme--colors--primary-800)', + 'border--color': 'var(--c--theme--colors--greyscale-300)', + 'border--color-hover': 'var(--c--theme--colors--greyscale-300)', + 'border--color-disabled': 'var(--c--theme--colors--greyscale-300)', + disabled: 'var(--c--theme--colors--greyscale-400)', + }, + tertiary: { + 'background--color': 'var(--c--theme--colors--primary-100)', + 'background--color-focus-visible': + 'var(--c--theme--colors--primary-100)', + 'background--color-hover': 'var(--c--theme--colors--primary-300)', + 'background--color-active': 'var(--c--theme--colors--primary-300)', + 'background--disabled': 'var(--c--theme--colors--primary-050)', + color: 'var(--c--theme--colors--primary-800)', + disabled: 'var(--c--theme--colors--primary-300)', + }, + 'tertiary-text': { + 'background--color-hover': 'var(--c--theme--colors--greyscale-100)', + 'color-hover': 'var(--c--theme--colors--primary-text)', + color: 'var(--c--theme--colors--primary-600)', }, danger: { 'color-hover': 'white', - background: { - color: 'var(--c--theme--colors--danger-600)', - 'color-hover': '#FF2725', - 'color-disabled': 'var(--c--theme--colors--danger-100)', - }, + 'background--color': 'var(--c--theme--colors--danger-600)', + 'background--color-hover': '#FF2725', + 'background--color-focus-visible': + 'var(--c--theme--colors--danger-600)', + 'background--color-disabled': + 'var(--c--theme--colors--greyscale-100)', + 'color-disabled': 'var(--c--theme--colors--greyscale-400)', }, - primary: { - color: 'var(--c--theme--colors--primary-text)', - 'color-active': 'var(--c--theme--colors--primary-text)', - background: { - color: 'var(--c--theme--colors--primary-400)', - 'color-active': 'var(--c--theme--colors--primary-500)', - }, - border: { 'color-active': 'transparent' }, - }, - secondary: { - color: 'var(--c--theme--colors--primary-500)', - 'color-hover': 'var(--c--theme--colors--primary-text)', - background: { - color: 'white', - 'color-hover': 'var(--c--theme--colors--primary-700)', - }, - border: { color: 'var(--c--theme--colors--greyscale-300)' }, - }, - tertiary: { - color: 'var(--c--theme--colors--primary-text)', - 'color-disabled': 'var(--c--theme--colors--greyscale-600)', - background: { - color: 'var(--c--theme--colors--primary-100)', - 'color-hover': 'var(--c--theme--colors--primary-300)', - 'color-active': 'var(--c--theme--colors--primary-100)', - 'color-disabled': 'var(--c--theme--colors--greyscale-200)', - }, - }, - disabled: { color: 'white', background: { color: '#b3cef0' } }, }, - 'la-gauffre': { activated: false }, - 'home-proconnect': { activated: false }, + datagrid: { + 'header--color': '#666666', + 'header--size': '12px', + 'header--weight': '500', + 'body--background-color-hover': '#eee', + }, + 'forms-checkbox': { + 'border-radius': '4px', + 'border-color': 'var(--c--theme--colors--primary-800)', + 'background-color--hover': 'var(--c--theme--colors--greyscale-100)', + 'border--color-disabled': 'var(--c--theme--colors--greyscale-200)', + 'border--color': 'var(--c--theme--colors--primary-800)', + 'background--disabled': 'var(--c--theme--colors--greyscale-200)', + 'background--enable': 'var(--c--theme--colors--primary-800)', + 'check--disabled': 'var(--c--theme--colors--greyscale-300)', + 'check--enable': 'var(--c--theme--colors--greyscale-000)', + color: 'var(--c--theme--colors--primary-text)', + 'label--color': 'var(--c--theme--colors--greyscale-1000)', + 'label--size': 'var(--c--theme--font--sizes--sm)', + 'label--weight': '500', + 'text--color': 'var(--c--theme--colors--greyscale-600)', + 'text--size': 'var(--c--theme--font--sizes--s)', + 'text--weight': '400', + 'text--color-disabled': 'var(--c--theme--colors--greyscale-300)', + }, + 'forms-labelledbox': { + 'label-color--small': '#1E1E1E', + 'label-color--small--disabled': '#CECECE', + 'label-color--big': '#1E1E1E', + 'label-color--big--disabled': '#CECECE', + }, + 'forms-radio': { + 'border-color': 'var(--c--theme--colors--primary-800)', + 'background-color': 'var(--c--theme--colors--greyscale-000)', + 'accent-color': 'var(--c--theme--colors--primary-800)', + 'accent-color-disabled': 'var(--c--theme--colors--greyscale-300)', + }, + 'forms-switch': { + 'border--color-disabled': 'var(--c--theme--colors--greyscale-300)', + 'border--color': 'var(--c--theme--colors--primary-800)', + 'handle-background-color': 'white', + 'handle-background-color--disabled': + 'var(--c--theme--colors--greyscale-000)', + 'rail-background-color--disabled': + 'var(--c--theme--colors--greyscale-000)', + 'accent-color': 'var(--c--theme--colors--primary-800)', + }, + 'forms-textarea': { + 'label-color--focus': '#161616', + 'border-radius': '4px', + 'border-color': '#929292', + 'box-shadow--color--hover': '#929292', + 'box-shadow--color--focus': '#000091', + 'value-color': '#1E1E1E', + 'value-color--disabled': '#CECECE', + 'font-size': '14px', + }, + 'forms-input': { + 'label-color--focus': '#161616', + 'border-radius': '4px', + 'border-color': '#929292', + 'box-shadow--color--hover': '#929292', + 'box-shadow--color--focus': '#000091', + 'value-color': '#1E1E1E', + 'value-color--disabled': '#CECECE', + 'font-size': '14px', + }, + 'forms-select': { + 'label-color--focus': '#161616', + 'item-font-size': '14px', + 'border-radius': '4px', + 'border-radius-hover': '4px', + 'border-color': '#929292', + 'box-shadow--color--hover': '#929292', + 'box-shadow--color--focus': '#000091', + 'value-color': '#1E1E1E', + 'font-size': '14px', + }, + 'la-gauffre': { activated: true }, + 'home-proconnect': { activated: true }, }, }, dark: { @@ -391,211 +414,5 @@ export const tokens = { }, }, }, - dsfr: { - theme: { - colors: { - 'card-border': '#E5E5E5', - 'primary-text': '#000091', - 'primary-100': '#ECECFE', - 'primary-150': '#F4F4FD', - 'primary-200': '#E3E3FD', - 'primary-300': '#CACAFB', - 'primary-400': '#8585F6', - 'primary-500': '#6A6AF4', - 'primary-600': '#313178', - 'primary-700': '#272747', - 'primary-800': '#000091', - 'primary-900': '#21213F', - 'secondary-text': '#fff', - 'secondary-100': '#fee9ea', - 'secondary-200': '#fedfdf', - 'secondary-300': '#fdbfbf', - 'secondary-400': '#e1020f', - 'secondary-500': '#c91a1f', - 'secondary-600': '#5e2b2b', - 'secondary-700': '#3b2424', - 'secondary-800': '#341f1f', - 'secondary-900': '#2b1919', - 'greyscale-text': '#303C4B', - 'greyscale-000': '#fff', - 'greyscale-050': '#F6F6F6', - 'greyscale-100': '#eee', - 'greyscale-200': '#E5E5E5', - 'greyscale-250': '#ddd', - 'greyscale-300': '#CECECE', - 'greyscale-350': '#ddd', - 'greyscale-400': '#929292', - 'greyscale-500': '#7C7C7C', - 'greyscale-600': '#666666', - 'greyscale-700': '#3A3A3A', - 'greyscale-750': '#353535', - 'greyscale-800': '#2A2A2A', - 'greyscale-900': '#242424', - 'greyscale-950': '#1E1E1E', - 'greyscale-1000': '#161616', - 'success-text': '#1f8d49', - 'success-100': '#dffee6', - 'success-200': '#b8fec9', - 'success-300': '#88fdaa', - 'success-400': '#3bea7e', - 'success-500': '#1f8d49', - 'success-600': '#18753c', - 'success-700': '#204129', - 'success-800': '#1e2e22', - 'success-900': '#19281d', - 'info-text': '#0078f3', - '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', - 'warning-300': '#ffded9', - 'warning-400': '#ffbeb4', - 'warning-500': '#d64d00', - 'warning-600': '#b34000', - 'warning-700': '#5e2c21', - 'warning-800': '#3e241e', - 'warning-900': '#361e19', - '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': '#391C1C', - }, - font: { families: { accent: 'Marianne', base: 'Marianne' } }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', - }, - }, - components: { - alert: { - 'border-radius': '0', - error: { - 'background-color': 'var(--c--theme--colors--danger-100)', - 'border-left-color': 'var(--c--theme--colors--danger-400)', - close: { - color: 'white', - 'background-color': 'var(--c--theme--colors--danger-400)', - 'background-color-hover': 'var(--c--theme--colors--danger-600)', - }, - }, - }, - modal: { 'width-small': '342px' }, - button: { - 'medium-height': '40px', - 'medium-text-height': '40px', - 'border-radius': '4px', - primary: { - background: { - color: 'var(--c--theme--colors--primary-text)', - 'color-hover': '#1212ff', - 'color-active': '#2323ff', - }, - color: '#fff', - 'color-hover': '#fff', - 'color-active': '#fff', - }, - 'primary-text': { - background: { - 'color-hover': 'var(--c--theme--colors--primary-100)', - 'color-active': 'var(--c--theme--colors--primary-100)', - }, - 'color-hover': 'var(--c--theme--colors--primary-text)', - color: 'var(--c--theme--colors--primary-800)', - }, - secondary: { - background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' }, - border: { - color: 'var(--c--theme--colors--greyscale-300)', - 'color-hover': 'var(--c--theme--colors--greyscale-300)', - }, - color: 'var(--c--theme--colors--primary-text)', - }, - 'tertiary-text': { - background: { - 'color-hover': 'var(--c--theme--colors--greyscale-100)', - }, - 'color-hover': 'var(--c--theme--colors--primary-text)', - color: 'var(--c--theme--colors--primary-600)', - }, - }, - datagrid: { - header: { - color: 'var(--c--theme--colors--primary-text)', - size: 'var(--c--theme--font--sizes--s)', - }, - body: { - 'background-color': 'transparent', - 'background-color-hover': '#F4F4FD', - }, - pagination: { - 'background-color': 'transparent', - 'background-color-active': 'var(--c--theme--colors--primary-300)', - 'border-color': 'var(--c--theme--colors--primary-400)', - }, - }, - 'forms-checkbox': { - 'border-radius': '0', - color: 'var(--c--theme--colors--primary-text)', - text: { - color: 'var(--c--theme--colors--greyscale-text)', - size: 'var(--c--theme--font--sizes--t)', - }, - }, - 'forms-datepicker': { 'border-radius': '0' }, - 'forms-fileuploader': { 'border-radius': '0' }, - 'forms-field': { - color: 'var(--c--theme--colors--primary-text)', - 'footer-font-size': 'var(--c--theme--font--sizes--t)', - 'footer-color': 'var(--c--theme--colors--greyscale-text)', - }, - 'forms-input': { - 'border-radius': '4px', - 'background-color': '#fff', - '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)', - 'font-size': '14px', - }, - 'forms-labelledbox': { - 'label-color': { big: 'var(--c--theme--colors--primary-text)' }, - }, - 'forms-radio': { - 'accent-color': 'var(--c--theme--colors--primary-600)', - }, - 'forms-select': { - 'item-font-size': '14px', - 'border-radius': '4px', - 'border-radius-hover': '4px', - 'background-color': '#fff', - 'border-color': 'var(--c--theme--colors--primary-text)', - 'border-color-hover': 'var(--c--theme--colors--primary-text)', - 'box-shadow-color': 'var(--c--theme--colors--primary-text)', - }, - 'forms-switch': { - 'handle-border-radius': '2px', - 'rail-border-radius': '4px', - 'accent-color': 'var(--c--theme--colors--primary-text)', - }, - 'forms-textarea': { 'border-radius': '0' }, - 'la-gauffre': { activated: true }, - 'home-proconnect': { activated: true }, - }, - }, }, }; diff --git a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx index 3bc853a2..81cc478c 100644 --- a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx +++ b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx @@ -3,7 +3,7 @@ import { create } from 'zustand'; import { tokens } from './cunningham-tokens'; -type Tokens = typeof tokens.themes.default & Partial; +type Tokens = typeof tokens.themes.default; type ColorsTokens = Tokens['theme']['colors']; type FontSizesTokens = Tokens['theme']['font']['sizes']; type SpacingsTokens = Tokens['theme']['spacings']; @@ -28,7 +28,7 @@ export const useCunninghamTheme = create((set, get) => { ) as Tokens; return { - theme: 'dsfr', + theme: 'default', themeTokens: () => currentTheme().theme, colorsTokens: () => currentTheme().theme.colors, componentTokens: () => currentTheme().components, diff --git a/src/frontend/apps/impress/src/pages/globals.css b/src/frontend/apps/impress/src/pages/globals.css index 930d8359..bc15160d 100644 --- a/src/frontend/apps/impress/src/pages/globals.css +++ b/src/frontend/apps/impress/src/pages/globals.css @@ -1,4 +1,7 @@ -@import url('../cunningham/cunningham-style.css'); +@import url('@gouvfr-lasuite/ui-kit/style'); +@import url('../cunningham/cunningham-tokens.css'); +@import url('../cunningham/cunningham-custom-tokens.css'); +@import url('@fontsource/material-icons'); body { margin: 0; @@ -41,3 +44,37 @@ main ::-webkit-scrollbar-thumb:hover, cursor: pointer; outline: inherit; } + +.material-icons-filled { + font-family: 'Material Icons', sans-serif; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + + /* Support for Safari and Chrome. */ + text-rendering: optimizelegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} + +[data-nextjs-dialog-overlay] { + display: none !important; +} + +nextjs-portal { + display: none; +} diff --git a/src/frontend/apps/impress/src/tests/utils.tsx b/src/frontend/apps/impress/src/tests/utils.tsx index a43961ad..b0d7c7de 100644 --- a/src/frontend/apps/impress/src/tests/utils.tsx +++ b/src/frontend/apps/impress/src/tests/utils.tsx @@ -15,7 +15,7 @@ export const AppWrapper = ({ children }: PropsWithChildren) => { return ( - {children} + {children} ); };