diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index 1990d492..5b3785df 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -3,16 +3,21 @@ const config = { default: { theme: { colors: { - 'card-border': '#ededed', + 'card-border': '#DDDDDD', 'primary-bg': '#FAFAFA', 'primary-100': '#EDF5FA', 'primary-150': '#E5EEFA', 'info-150': '#E5EEFA', + 'grey-400': '#929292', + 'grey-800': '#2A2A2A', }, font: { + letterSpacings: { + h5: 'normal', + }, sizes: { ml: '0.938rem', - xl: '1.50rem', + xl: '1.25rem', t: '0.6875rem', s: '0.75rem', h1: '2.2rem', @@ -28,274 +33,224 @@ const config = { black: 900, }, }, - spacings: { - '0': '0', - none: '0', - auto: 'auto', - bx: '2.2rem', - full: '100%', - }, - 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': '#ffffff', - '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': '#ffffff', - }, - 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-400)', - 'color-hover': 'var(--c--theme--colors--danger-500)', - '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--primary-200)', - }, - }, - tertiary: { - color: 'var(--c--theme--colors--primary-text)', - 'color-disabled': 'var(--c--theme--colors--greyscale-600)', - background: { - 'color-hover': 'var(--c--theme--colors--primary-100)', - 'color-disabled': 'var(--c--theme--colors--greyscale-200)', - }, - }, - disabled: { - color: 'white', - background: { - color: '#b3cef0', - }, - }, - }, - 'la-gauffre': { - activated: false, - }, }, }, dsfr: { theme: { colors: { - 'card-border': '#ededed', - 'primary-text': '#000091', - 'primary-100': '#f5f5fe', - 'primary-150': '#F4F4FD', - 'primary-200': '#ececfe', - 'primary-300': '#e3e3fd', - 'primary-400': '#cacafb', - 'primary-500': '#6a6af4', + // Primary + + 'primary-text': 'var(--c--theme--colors--primary-600)', + 'primary-100': '#F5F5FE', + 'primary-200': '#ECECFE', + 'primary-300': '#E3E3FD', + 'primary-400': '#CACAFB', + 'primary-500': '#6A6AF4', 'primary-600': '#000091', - 'primary-700': '#272747', - 'primary-800': '#21213f', - 'primary-900': '#1c1a36', - 'secondary-text': '#FFFFFF', - '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': '#f6f6f6', - 'greyscale-100': '#eeeeee', - 'greyscale-200': '#e5e5e5', - 'greyscale-300': '#e1e1e1', - 'greyscale-400': '#dddddd', - 'greyscale-500': '#cecece', - 'greyscale-600': '#7b7b7b', - 'greyscale-700': '#666666', - 'greyscale-800': '#2a2a2a', - 'greyscale-900': '#1e1e1e', - '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': '#f4f6ff', - 'info-200': '#e8edff', - 'info-300': '#dde5ff', - 'info-400': '#bdcdff', - 'info-500': '#0078f3', - 'info-600': '#0063cb', - 'info-700': '#f4f6ff', - 'info-800': '#222a3f', - 'info-900': '#1d2437', - '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': '#e1000f', - 'danger-100': '#fef4f4', - 'danger-200': '#fee9e9', - 'danger-300': '#fddede', - 'danger-400': '#fcbfbf', - 'danger-500': '#e1000f', - 'danger-600': '#c9191e', - 'danger-700': '#642727', - 'danger-800': '#412121', - 'danger-900': '#3a1c1c', + 'primary-clicked-100': '#CBCBFA', + 'primary-clicked-200': '#BBBBFC', + 'primary-clicked-300': '#ADADF9', + 'primary-clicked-400': '#8B8BF6', + 'primary-clicked-500': '#AEAEF9', + 'primary-clicked-600': '#2323FF', + 'primary-hover-100': '#DCDCFC', + 'primary-hover-200': '#CECEFC', + 'primary-hover-300': '#C1C1FB', + 'primary-hover-400': '#A1A1F8', + 'primary-hover-500': '#9898F8', + 'primary-hover-600': '#1212FF', + + // secondary + 'secondary-100': '#FEF4F4', + 'secondary-200': '#FEE9E9', + 'secondary-300': '#FDDEDE', + 'secondary-400': '#FCBFBF', + 'secondary-500': '#E1000F', + 'secondary-600': '#C9191E', + 'secondary-clicked-100': '#FAC4C4', + 'secondary-clicked-200': '#FCAFAF', + 'secondary-clicked-300': '#FA9E9E', + 'secondary-clicked-400': '#FA7474', + 'secondary-clicked-500': '#FF4347', + 'secondary-clicked-600': '#F95A5C', + 'secondary-hover-100': '#FCD7D7', + 'secondary-hover-200': '#FDC5C5', + 'secondary-hover-300': '#FBB6B6', + 'secondary-hover-400': '#FB8F8F', + 'secondary-hover-500': '#FF292F', + 'secondary-hover-600': '#F93F42', + + // Greyscale + 'greyscale-000': '#FFFFFF', + 'greyscale-050': '#F6F6F6', + 'greyscale-100': '#EEEEEE', + 'greyscale-200': '#E5E5E5', + 'greyscale-250': '#DDDDDD', + 'greyscale-300': '#CECECE', + 'greyscale-400': '#929292', + 'greyscale-500': '#666666', + 'greyscale-700': '#3A3A3A', + 'greyscale-1000': '#161616', + 'greyscale-clicked-000': '#EDEDED', + 'greyscale-clicked-050': '#CFCFCF', + 'greyscale-clicked-100': '#C1C1C1', + 'greyscale-clicked-200': '#B2B2B2', + 'greyscale-clicked-250': '#A7A7A7', + 'greyscale-clicked-300': '#939393', + 'greyscale-clicked-400': '#CECECE', + 'greyscale-clicked-500': '#A6A6A6', + 'greyscale-clicked-700': '#777777', + 'greyscale-clicked-1000': '#474747', + 'greyscale-hover-000': '#F6F6F6', + 'greyscale-hover-050': '#DFDFDF', + 'greyscale-hover-100': '#D2D2D2', + 'greyscale-hover-200': '#C5C5C5', + 'greyscale-hover-250': '#BBBBBB', + 'greyscale-hover-300': '#A8A8A8', + 'greyscale-hover-400': '#BBBBBB', + 'greyscale-hover-500': '#919191', + 'greyscale-hover-700': '#616161', + 'greyscale-hover-1000': '#343434', + + // 'success-text': '#1f8d49', + 'success-200': '#B8FEC9', + 'success-500': '#18753C', // Same has 600 for cunningham + 'success-600': '#18753C', + 'success-clicked-200': '#34EB7B', + 'success-clicked-600': '#2FC368', + 'success-hover-200': '#46FD89', + 'success-hover-600': '#27A959', + + // 'info-text': '#0078f3', + 'info-200': '#E8EDFF', + 'info-500': '#0063CB', // Same has 600 for cunningham + 'info-600': '#0063CB', + 'info-clicked-200': '#A9BFFF', + 'info-clicked-600': '#6798FF', + 'info-hover-200': '#C2D1FF', + 'info-hover-600': '#3B87FF', + + // 'warning-text': '#d64d00', + 'warning-200': '#FFE9E6', + 'warning-500': '#B34000', // Same has 600 for cunningham + 'warning-600': '#B34000', + 'warning-clicked-200': '#FFB0A2', + 'warning-clicked-600': '#FF7A55', + 'warning-hover-200': '#FFC6BD', + 'warning-hover-600': '#FF6218', + + // Danger + 'danger-200': '#FFE9E9', + 'danger-500': '#CE0500', // Same has 600 for cunningham + 'danger-600': '#CE0500', + 'danger-clicked-200': '#FFAFAF', + 'danger-clicked-600': '#FF4140', + 'danger-hover-200': '#FFC5C5', + 'danger-hover-600': '#FF2725', + + // Cumulus + 'cumulus-100': '#F3F6FE', + 'cumulus-200': '#E6EEFE', + 'cumulus-300': '#DAE6FD', + 'cumulus-400': '#B6CFFB', + 'cumulus-500': '#417DC4', + 'cumulus-600': '#3558A2', + + // emeraude + 'emeraude-100': '#E3FDEB', + 'emeraude-200': '#C3FAD5', + 'emeraude-300': '#9EF9BE', + 'emeraude-400': '#6FE49D', + 'emeraude-500': '#00A95F', + 'emeraude-600': '#297254', + + // glycine + 'glycine-100': '#FEF3FD', + 'glycine-200': '#FEE7FC', + 'glycine-300': '#FDDBFA', + 'glycine-400': '#FBB8F6', + 'glycine-500': '#A558A0', + 'glycine-600': '#6E445A', + + // terre-battue + 'terre-battue-100': '#FEF7DA', + 'terre-battue-200': '#FCEEAC', + 'terre-battue-300': '#FBE769', + 'terre-battue-400': '#E2CF58', + 'terre-battue-500': '#B7A73F', + 'terre-battue-600': '#66673D', + + // tilleul-verveine + 'tilleul-verveine-100': '#FEF7DA', + 'tilleul-verveine-200': '#FCEEAC', + 'tilleul-verveine-300': '#FBE769', + 'tilleul-verveine-400': '#E2CF58', + 'tilleul-verveine-500': '#B7A73F', + 'tilleul-verveine-600': '#66673D', + + // Focus + 'focus-500': '#0A76F6', + }, + spacings: { + '050V': '2px', + '100V': '4px', + '150V': '6px', + '100W': '8px', + '300V': '12px', + '200W': '16px', + '300W': '24px', + '400W': '32px', + '500W': '40px', + '600W': '48px', + '700W': '56px', + '800W': '64px', + '900W': '72px', + '1200W': '96px', + '1500W': '120px', }, font: { families: { accent: 'Marianne', base: 'Marianne', }, - }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', + sizes: { + xl: '20px', + lg: '18px', + md: '16px', + sm: '14px', + xs: '12px', + h1: '32px', + h2: '28px', + h3: '24px', + h4: '22px', + h5: '20px', + h6: '18px', + 'title-alt-xl': '80px', + 'title-alt-lg': '72px', + 'title-alt-md': '64px', + 'title-alt-sm': '56px', + 'title-alt-xs': '48px', + }, }, }, components: { alert: { 'border-radius': '0', + 'background-color': 'var(--c--theme--colors--greyscale-000)', + }, + modal: { + 'box-shadow': '0px 6px 18px 0px rgba(0, 0, 18, 0.16);', }, button: { 'medium-height': '48px', 'border-radius': '4px', + 'medium-text-height': '48px', primary: { background: { - color: 'var(--c--theme--colors--primary-text)', - 'color-hover': '#1212ff', - 'color-active': '#2323ff', + color: 'var(--c--theme--colors--primary-600)', + 'color-hover': 'var(--c--theme--colors--primary-hover-600)', + 'color-active': 'var(--c--theme--colors--primary-600)', + 'color-focus': 'var(--c--theme--colors--focus-500)', }, color: '#ffffff', 'color-hover': '#ffffff', @@ -303,33 +258,51 @@ const config = { }, '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--greyscale-hover-000)', + 'color-active': 'var(--c--theme--colors--greyscale-clicked-000)', }, - 'color-hover': 'var(--c--theme--colors--primary-text)', + 'color-disabled': 'var(--c--theme--colors--greyscale-400)', + color: 'var(--c--theme--colors--primary-600)', + 'color-hover': 'var(--c--theme--colors--primary-600)', }, secondary: { background: { - 'color-hover': '#F6F6F6', + color: 'var(--c--theme--colors--greyscale-000)', + 'color-hover': 'var(--c--theme--colors--greyscale-hover-000)', 'color-active': '#EDEDED', }, border: { - color: 'var(--c--theme--colors--primary-600)', - 'color-hover': 'var(--c--theme--colors--primary-600)', + color: 'var(--c--theme--colors--greyscale-250)', + 'color-hover': 'var(--c--theme--colors--greyscale-250)', }, - color: 'var(--c--theme--colors--primary-text)', + color: 'var(--c--theme--colors--primary-600)', + ['color-hover']: 'var(--c--theme--colors--primary-600)', + 'color-disabled': 'var(--c--theme--colors--greyscale-400)', + }, + tertiary: { + background: { + color: 'var(--c--theme--colors--primary-300)', + 'color-hover': 'var(--c--theme--colors--primary-hover-300)', + 'color-active': 'var(--c--theme--colors--primary-clicked-300)', + }, + border: { + color: 'var(--c--theme--colors--primary-500)', + 'color-hover': 'var(--c--theme--colors--greyscale-250)', + }, + color: 'var(--c--theme--colors--primary-600)', + ['color-hover']: 'var(--c--theme--colors--primary-600)', + ['color-disabled']: 'var(--c--theme--colors--primary-400)', }, 'tertiary-text': { background: { 'color-hover': 'var(--c--theme--colors--primary-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)', + color: 'var(--c--theme--colors--greyscale-500)', size: 'var(--c--theme--font--sizes--s)', }, body: { @@ -339,60 +312,48 @@ const config = { 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', + // '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)', + // 'border-radius': '0', }, 'forms-input': { - 'border-radius': '4px', - 'background-color': '#ffffff', - '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': '#ffffff', - '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)', + // 'background-color': 'var(--c--theme--colors--greyscale-050)', + // 'border-radius': '5px 5px 0 0', + // 'border-color': 'var(--c--theme--colors--greyscale-100)', + // 'border-color--focus': 'var(--c--theme--colors--greyscale-1000)', + // 'border-width': '0 0 2px 0', + // 'label-color--focus': + // 'var(--c--components--forms-labelledbox--label-color--small)', }, 'forms-textarea': { - 'border-radius': '0', + // 'background-color': 'var(--c--theme--colors--greyscale-050)', + // 'border-radius': '5px 5px 0 0', + // 'border-color': 'var(--c--theme--colors--greyscale-100)', + // 'border-color--focus': 'var(--c--theme--colors--greyscale-1000)', + // 'border-width': '0 0 2px 0', + // 'border-color--hover': 'var(--c--theme--colors--greyscale-1000)', + // 'label-color--focus': + // 'var(--c--components--forms-labelledbox--label-color--small)', + }, + 'forms-select': { + // 'background-color': 'var(--c--theme--colors--greyscale-100)', + // 'border-radius': '0', + // 'border-color': 'var(--c--theme--colors--greyscale-1000)', + // 'border-width': '0 0 2px 0', + // 'border-color--focus': '#0974F6', + // 'border-color--hover': 'var(--c--theme--colors--greyscale-1000)', + // 'label-color--focus': + // 'var(--c--components--forms-labelledbox--label-color--big)', + }, + 'forms-switch': { + // 'accent-color': '#2323ff', + }, + 'forms-checkbox': { + // 'accent-color': '#2323ff', }, 'la-gauffre': { activated: true, diff --git a/src/frontend/apps/impress/next.config.js b/src/frontend/apps/impress/next.config.js index 16d2bbaa..eedc859b 100644 --- a/src/frontend/apps/impress/next.config.js +++ b/src/frontend/apps/impress/next.config.js @@ -1,4 +1,5 @@ const crypto = require('crypto'); +const path = require('path'); const { InjectManifest } = require('workbox-webpack-plugin'); @@ -11,6 +12,9 @@ const nextConfig = { images: { unoptimized: true, }, + sassOptions: { + includePaths: [path.join(__dirname, 'styles')], + }, compiler: { // Enables the styled-components SWC transform styledComponents: true, diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json index a4de232f..8c0e2da0 100644 --- a/src/frontend/apps/impress/package.json +++ b/src/frontend/apps/impress/package.json @@ -22,6 +22,7 @@ "@hocuspocus/provider": "2.13.7", "@openfun/cunningham-react": "2.9.4", "@tanstack/react-query": "5.59.15", + "classnames": "2.5.1", "i18next": "23.16.2", "i18next-browser-languagedetector": "8.0.0", "idb": "8.0.0", @@ -59,6 +60,7 @@ "jest-environment-jsdom": "29.7.0", "node-fetch": "2.7.0", "prettier": "3.3.3", + "sass": "1.80.4", "stylelint": "16.10.0", "stylelint-config-standard": "36.0.1", "stylelint-prettier": "5.0.2", diff --git a/src/frontend/apps/impress/src/components/Link.tsx b/src/frontend/apps/impress/src/components/Link.tsx index b84de0d5..4e1f66d4 100644 --- a/src/frontend/apps/impress/src/components/Link.tsx +++ b/src/frontend/apps/impress/src/components/Link.tsx @@ -7,7 +7,6 @@ export interface LinkProps { export const StyledLink = styled(Link)` text-decoration: none; - color: #ffffff33; &[aria-current='page'] { color: #ffffff; } diff --git a/src/frontend/apps/impress/src/components/icons/Icon.tsx b/src/frontend/apps/impress/src/components/icons/Icon.tsx new file mode 100644 index 00000000..2da5975d --- /dev/null +++ b/src/frontend/apps/impress/src/components/icons/Icon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +type Props = { + icon: string; + className?: string; +}; +export const Icon = ({ icon, className }: Props) => { + return {icon}; +}; diff --git a/src/frontend/apps/impress/src/components/separator/HorizontalSeparator.tsx b/src/frontend/apps/impress/src/components/separator/HorizontalSeparator.tsx new file mode 100644 index 00000000..5edc8c59 --- /dev/null +++ b/src/frontend/apps/impress/src/components/separator/HorizontalSeparator.tsx @@ -0,0 +1,25 @@ +import classNames from 'classnames'; + +import style from './separator.module.scss'; + +export enum SeparatorVariant { + LIGHT = 'light', + DARK = 'dark', +} + +type Props = { + variant?: SeparatorVariant; +}; + +export const HorizontalSeparator = ({ + variant = SeparatorVariant.LIGHT, +}: Props) => { + return ( +
+ ); +}; diff --git a/src/frontend/apps/impress/src/components/separator/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separator/SeparatedSection.tsx new file mode 100644 index 00000000..5489118c --- /dev/null +++ b/src/frontend/apps/impress/src/components/separator/SeparatedSection.tsx @@ -0,0 +1,23 @@ +import classNames from 'classnames'; +import { PropsWithChildren } from 'react'; + +import styles from './separator.module.scss'; + +type Props = { + showSeparator?: boolean; +}; + +export const SeparatedSection = ({ + showSeparator = true, + children, +}: PropsWithChildren) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/frontend/apps/impress/src/components/separator/separator.module.scss b/src/frontend/apps/impress/src/components/separator/separator.module.scss new file mode 100644 index 00000000..b7269e08 --- /dev/null +++ b/src/frontend/apps/impress/src/components/separator/separator.module.scss @@ -0,0 +1,20 @@ +.horizontal { + width: 100%; + height: 1px; + + &.light { + background-color: var(--c--theme--colors--greyscale-100); + } + + &.dark { + background-color: #e5e5e533; + } +} + +.separatedContainer { + padding: var(--c--theme--spacings--200W) var(--c--theme--spacings--300V); + + &.showSeparator { + border-bottom: 1px solid var(--c--theme--colors--greyscale-200); + } +} 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..b6f02294 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-custom-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-custom-tokens.css @@ -1,17 +1,4 @@ :root { - /** - * Input - */ - --c--components--forms-input--border-radius--hover: var( - --c--components--forms-input--border-radius - ); - --c--components--forms-input--border-radius--focus: var( - --c--components--forms-input--border-radius - ); - --c--components--forms-input--border-color--hover: var( - --c--components--forms-input--border-color - ); - /** * Datepicker **/ diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 3250fca1..713e0862 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -1,9 +1,9 @@ @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'); +@import './cunningham-tokens'; +@import './cunningham-custom-tokens'; +@import '../assets/fonts/Marianne/Marianne-font'; .c__input, .c__field, @@ -12,221 +12,20 @@ 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-weight: var(--c--theme--font--sizes--sm); 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; + /*border: none;*/ + /*border-top: 1px var(--c--theme--colors--greyscale-300) solid;*/ + /*border-bottom: 1px var(--c--theme--colors--greyscale-300) solid;*/ } .c__datagrid__table__container > table tbody { @@ -239,19 +38,6 @@ input:-webkit-autofill:focus { ); } -.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; @@ -261,7 +47,6 @@ input:-webkit-autofill:focus { 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 { @@ -321,23 +106,6 @@ input:-webkit-autofill:focus { 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 */ @@ -351,8 +119,12 @@ input:-webkit-autofill:focus { background-color: transparent; } +.c__button--nano.c__button--with-icon--left { + padding: 0 var(--c--theme--spacings--100W); +} + .c__button--medium { - padding: 0.9rem var(--c--theme--spacings--s); + padding: var(--c--theme--spacings--100W); } .c__button--small { @@ -364,6 +136,12 @@ input:-webkit-autofill:focus { var(--c--theme--spacings--s); } +.c__button:focus-visible { + box-shadow: 0 0 0 2px + var(--c--components--button--primary--background--color-focus); +} + +/* Button Primary */ .c__button--primary { background-color: var(--c--components--button--primary--background--color); color: var(--c--components--button--primary--color); @@ -378,34 +156,69 @@ input:-webkit-autofill:focus { .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); + background-color: var(--c--components--button--primary--background--color); + color: var(--c--components--button--primary--color); } -.c__button--primary-text:active, -.c__button--primary-text.c__button--active { +/* Button Primary-text */ + +.c__button--primary-text { border: none; - background-color: var( - --c--components--button--primary-text--background--color-active - ); + color: var(--c--components--button--primary-text--color); } .c__button--primary-text:hover, -.c__button--primary-text:focus-visible { +.c__button--primary-text.c__button--active { 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--primary-text:active, +.c__button--primary-text.c__button--active { + background-color: var( + --c--components--button--primary-text--background--color-active + ); } +.c__button--primary-text:disabled { + background-color: transparent; + color: var(--c--components--button--primary-text--color-disabled); +} + +/* Button tertiary */ +.c__button--tertiary { + background-color: var(--c--components--button--tertiary--background--color); + color: var(--c--components--button--tertiary--color); +} +.c__button--tertiary:disabled { + background-color: var(--c--components--button--tertiary--background--color); + color: var(--c--components--button--tertiary--color-disabled); +} + +.c__button--tertiary:hover, +.c__button--tertiary.c__button--active { + background-color: var( + --c--components--button--tertiary--background--color-hover + ); + color: var(--c--components--button--tertiary--color); +} + +.c__button--tertiary:active, +.c__button--tertiary.c__button--active { + background-color: var( + --c--components--button--tertiary--background--color-active + ); + border-color: transparent; +} + +/* Button tertiary-text */ +.c__button--tertiary-text { + border: none; +} + +/* Button success */ .c__button--success { background-color: var(--c--components--button--success--background--color); color: var(--c--components--button--success--color); @@ -426,12 +239,18 @@ input:-webkit-autofill:focus { color: var(--c--components--button--success--color-disabled); } +/* Button secondary */ .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:disabled { + background-color: var(--c--theme--colors--greyscale-000); + color: var(--c--components--button--secondary--color-disabled); +} + .c__button--secondary:hover, .c__button--secondary:focus-visible { background-color: var( @@ -441,111 +260,60 @@ input:-webkit-autofill:focus { border: 1px solid var(--c--components--button--secondary--border--color-hover); } -.c__button--tertiary { - color: var(--c--components--button--tertiary--color); - border: none; -} - -.c__button--tertiary:hover, -.c__button--tertiary:focus-visible { +.c__button--secondary:active, +.c__button--secondary.c__button--active { background-color: var( - --c--components--button--tertiary--background--color-hover - ); - color: var(--c--components--button--tertiary--color); -} - -.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 + --c--components--button--secondary--background--color-active ); } +/* Button danger */ + /** * Modal */ + +.c__modal__title { + text-align: start; + font-size: var(--c--theme--font--sizes--h6); + padding: 0; +} + .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 .c__button--tertiary-text:hover,*/ +/*.c__modal__close .c__button--tertiary-text:focus-visible {*/ +/* box-shadow: none;*/ +/*}*/ -.c__modal__close button { - padding: 1.5rem 1rem; -} +/*.c__modal__close .c__button {*/ +/* right: 5px;*/ +/* top: 5px;*/ +/* padding: 1.5rem 1rem;*/ +/*}*/ -.c__modal--full .c__modal__content { - overflow-y: auto; -} - -@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; - } -} +/*!***/ +/* * Toast*/ +/**!*/ +/*.c__toast__container {*/ +/* z-index: 10000;*/ +/*}*/ /** - * Toast -*/ + * Alert + */ + .c__toast__container { - z-index: 10000; + z-index: 1001; } - -/** - * Tooltip -*/ -.c__tooltip { - padding: 4px 6px; +.c__alert--success { + border-color: var(--c--theme--colors--success-600); +} +.c__alert--info { + border-color: var(--c--theme--colors--info-600); +} +.c__alert--error { + border-color: var(--c--theme--colors--danger-600); } diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 3d87ac17..27554920 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -28,7 +28,7 @@ --c--theme--colors--greyscale-700: #555f6b; --c--theme--colors--greyscale-800: #303c4b; --c--theme--colors--greyscale-900: #0c1a2b; - --c--theme--colors--greyscale-000: #fff; + --c--theme--colors--greyscale-000: #ffffff; --c--theme--colors--primary-100: #edf5fa; --c--theme--colors--primary-200: #8cb5ea; --c--theme--colors--primary-300: #5894e1; @@ -69,10 +69,12 @@ --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--card-border: #dddddd; --c--theme--colors--primary-bg: #fafafa; --c--theme--colors--primary-150: #e5eefa; --c--theme--colors--info-150: #e5eefa; + --c--theme--colors--grey-400: #929292; + --c--theme--colors--grey-800: #2a2a2a; --c--theme--font--sizes--h1: 2.2rem; --c--theme--font--sizes--h2: 1.7rem; --c--theme--font--sizes--h3: 1.37rem; @@ -83,7 +85,7 @@ --c--theme--font--sizes--m: 0.8125rem; --c--theme--font--sizes--s: 0.75rem; --c--theme--font--sizes--ml: 0.938rem; - --c--theme--font--sizes--xl: 1.5rem; + --c--theme--font--sizes--xl: 1.25rem; --c--theme--font--sizes--t: 0.6875rem; --c--theme--font--weights--thin: 100; --c--theme--font--weights--light: 300; @@ -98,194 +100,28 @@ --c--theme--font--letterspacings--h2: normal; --c--theme--font--letterspacings--h3: normal; --c--theme--font--letterspacings--h4: normal; - --c--theme--font--letterspacings--h5: 1px; + --c--theme--font--letterspacings--h5: normal; --c--theme--font--letterspacings--h6: normal; --c--theme--font--letterspacings--l: normal; --c--theme--font--letterspacings--m: normal; --c--theme--font--letterspacings--s: normal; - --c--theme--spacings--0: 0; --c--theme--spacings--xl: 4rem; --c--theme--spacings--l: 3rem; --c--theme--spacings--b: 1.625rem; --c--theme--spacings--s: 1rem; --c--theme--spacings--t: 0.5rem; --c--theme--spacings--st: 0.25rem; - --c--theme--spacings--none: 0; - --c--theme--spacings--auto: auto; - --c--theme--spacings--bx: 2.2rem; - --c--theme--spacings--full: 100%; --c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --c--theme--transitions--duration: 250ms; - --c--theme--breakpoints--xs: 480px; + --c--theme--breakpoints--xs: 0; --c--theme--breakpoints--sm: 576px; --c--theme--breakpoints--md: 768px; --c--theme--breakpoints--lg: 992px; --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-400 - ); - --c--components--button--danger--background--color-hover: var( - --c--theme--colors--danger-500 - ); - --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--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--secondary--border--color: var( - --c--theme--colors--primary-200 - ); - --c--components--button--tertiary--color: var( - --c--theme--colors--primary-text - ); - --c--components--button--tertiary--color-disabled: var( - --c--theme--colors--greyscale-600 - ); - --c--components--button--tertiary--background--color-hover: var( - --c--theme--colors--primary-100 - ); - --c--components--button--tertiary--background--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; } - .cunningham-theme--dark { --c--theme--colors--greyscale-100: #182536; --c--theme--colors--greyscale-200: #303c4b; @@ -329,122 +165,254 @@ --c--theme--colors--danger-300: #f09898; --c--theme--colors--danger-400: #ed8585; --c--theme--colors--danger-500: #e96666; - --c--theme--colors--danger-600: #d66; + --c--theme--colors--danger-600: #dd6666; --c--theme--colors--danger-700: #c36666; --c--theme--colors--danger-800: #ae6666; --c--theme--colors--danger-900: #9d6666; } - .cunningham-theme--dsfr { - --c--theme--colors--card-border: #ededed; - --c--theme--colors--primary-text: #000091; + --c--theme--colors--primary-text: var(--c--theme--colors--primary-600); --c--theme--colors--primary-100: #f5f5fe; - --c--theme--colors--primary-150: #f4f4fd; --c--theme--colors--primary-200: #ececfe; --c--theme--colors--primary-300: #e3e3fd; --c--theme--colors--primary-400: #cacafb; --c--theme--colors--primary-500: #6a6af4; --c--theme--colors--primary-600: #000091; - --c--theme--colors--primary-700: #272747; - --c--theme--colors--primary-800: #21213f; - --c--theme--colors--primary-900: #1c1a36; - --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: #f6f6f6; - --c--theme--colors--greyscale-100: #eee; + --c--theme--colors--primary-clicked-100: #cbcbfa; + --c--theme--colors--primary-clicked-200: #bbbbfc; + --c--theme--colors--primary-clicked-300: #adadf9; + --c--theme--colors--primary-clicked-400: #8b8bf6; + --c--theme--colors--primary-clicked-500: #aeaef9; + --c--theme--colors--primary-clicked-600: #2323ff; + --c--theme--colors--primary-hover-100: #dcdcfc; + --c--theme--colors--primary-hover-200: #cecefc; + --c--theme--colors--primary-hover-300: #c1c1fb; + --c--theme--colors--primary-hover-400: #a1a1f8; + --c--theme--colors--primary-hover-500: #9898f8; + --c--theme--colors--primary-hover-600: #1212ff; + --c--theme--colors--secondary-100: #fef4f4; + --c--theme--colors--secondary-200: #fee9e9; + --c--theme--colors--secondary-300: #fddede; + --c--theme--colors--secondary-400: #fcbfbf; + --c--theme--colors--secondary-500: #e1000f; + --c--theme--colors--secondary-600: #c9191e; + --c--theme--colors--secondary-clicked-100: #fac4c4; + --c--theme--colors--secondary-clicked-200: #fcafaf; + --c--theme--colors--secondary-clicked-300: #fa9e9e; + --c--theme--colors--secondary-clicked-400: #fa7474; + --c--theme--colors--secondary-clicked-500: #ff4347; + --c--theme--colors--secondary-clicked-600: #f95a5c; + --c--theme--colors--secondary-hover-100: #fcd7d7; + --c--theme--colors--secondary-hover-200: #fdc5c5; + --c--theme--colors--secondary-hover-300: #fbb6b6; + --c--theme--colors--secondary-hover-400: #fb8f8f; + --c--theme--colors--secondary-hover-500: #ff292f; + --c--theme--colors--secondary-hover-600: #f93f42; + --c--theme--colors--greyscale-000: #ffffff; + --c--theme--colors--greyscale-050: #f6f6f6; + --c--theme--colors--greyscale-100: #eeeeee; --c--theme--colors--greyscale-200: #e5e5e5; - --c--theme--colors--greyscale-300: #e1e1e1; - --c--theme--colors--greyscale-400: #ddd; - --c--theme--colors--greyscale-500: #cecece; - --c--theme--colors--greyscale-600: #7b7b7b; - --c--theme--colors--greyscale-700: #666; - --c--theme--colors--greyscale-800: #2a2a2a; - --c--theme--colors--greyscale-900: #1e1e1e; - --c--theme--colors--success-text: #1f8d49; - --c--theme--colors--success-100: #dffee6; + --c--theme--colors--greyscale-250: #dddddd; + --c--theme--colors--greyscale-300: #cecece; + --c--theme--colors--greyscale-400: #929292; + --c--theme--colors--greyscale-500: #666666; + --c--theme--colors--greyscale-700: #3a3a3a; + --c--theme--colors--greyscale-1000: #161616; + --c--theme--colors--greyscale-clicked-000: #ededed; + --c--theme--colors--greyscale-clicked-050: #cfcfcf; + --c--theme--colors--greyscale-clicked-100: #c1c1c1; + --c--theme--colors--greyscale-clicked-200: #b2b2b2; + --c--theme--colors--greyscale-clicked-250: #a7a7a7; + --c--theme--colors--greyscale-clicked-300: #939393; + --c--theme--colors--greyscale-clicked-400: #cecece; + --c--theme--colors--greyscale-clicked-500: #a6a6a6; + --c--theme--colors--greyscale-clicked-700: #777777; + --c--theme--colors--greyscale-clicked-1000: #474747; + --c--theme--colors--greyscale-hover-000: #f6f6f6; + --c--theme--colors--greyscale-hover-050: #dfdfdf; + --c--theme--colors--greyscale-hover-100: #d2d2d2; + --c--theme--colors--greyscale-hover-200: #c5c5c5; + --c--theme--colors--greyscale-hover-250: #bbbbbb; + --c--theme--colors--greyscale-hover-300: #a8a8a8; + --c--theme--colors--greyscale-hover-400: #bbbbbb; + --c--theme--colors--greyscale-hover-500: #919191; + --c--theme--colors--greyscale-hover-700: #616161; + --c--theme--colors--greyscale-hover-1000: #343434; --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-500: #18753c; --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: #f4f6ff; + --c--theme--colors--success-clicked-200: #34eb7b; + --c--theme--colors--success-clicked-600: #2fc368; + --c--theme--colors--success-hover-200: #46fd89; + --c--theme--colors--success-hover-600: #27a959; --c--theme--colors--info-200: #e8edff; - --c--theme--colors--info-300: #dde5ff; - --c--theme--colors--info-400: #bdcdff; - --c--theme--colors--info-500: #0078f3; + --c--theme--colors--info-500: #0063cb; --c--theme--colors--info-600: #0063cb; - --c--theme--colors--info-700: #f4f6ff; - --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--info-clicked-200: #a9bfff; + --c--theme--colors--info-clicked-600: #6798ff; + --c--theme--colors--info-hover-200: #c2d1ff; + --c--theme--colors--info-hover-600: #3b87ff; --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-500: #b34000; --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: #e1000f; - --c--theme--colors--danger-100: #fef4f4; - --c--theme--colors--danger-200: #fee9e9; - --c--theme--colors--danger-300: #fddede; - --c--theme--colors--danger-400: #fcbfbf; - --c--theme--colors--danger-500: #e1000f; - --c--theme--colors--danger-600: #c9191e; - --c--theme--colors--danger-700: #642727; - --c--theme--colors--danger-800: #412121; - --c--theme--colors--danger-900: #3a1c1c; - --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--theme--colors--warning-clicked-200: #ffb0a2; + --c--theme--colors--warning-clicked-600: #ff7a55; + --c--theme--colors--warning-hover-200: #ffc6bd; + --c--theme--colors--warning-hover-600: #ff6218; + --c--theme--colors--danger-200: #ffe9e9; + --c--theme--colors--danger-500: #ce0500; + --c--theme--colors--danger-600: #ce0500; + --c--theme--colors--danger-clicked-200: #ffafaf; + --c--theme--colors--danger-clicked-600: #ff4140; + --c--theme--colors--danger-hover-200: #ffc5c5; + --c--theme--colors--danger-hover-600: #ff2725; + --c--theme--colors--cumulus-100: #f3f6fe; + --c--theme--colors--cumulus-200: #e6eefe; + --c--theme--colors--cumulus-300: #dae6fd; + --c--theme--colors--cumulus-400: #b6cffb; + --c--theme--colors--cumulus-500: #417dc4; + --c--theme--colors--cumulus-600: #3558a2; + --c--theme--colors--emeraude-100: #e3fdeb; + --c--theme--colors--emeraude-200: #c3fad5; + --c--theme--colors--emeraude-300: #9ef9be; + --c--theme--colors--emeraude-400: #6fe49d; + --c--theme--colors--emeraude-500: #00a95f; + --c--theme--colors--emeraude-600: #297254; + --c--theme--colors--glycine-100: #fef3fd; + --c--theme--colors--glycine-200: #fee7fc; + --c--theme--colors--glycine-300: #fddbfa; + --c--theme--colors--glycine-400: #fbb8f6; + --c--theme--colors--glycine-500: #a558a0; + --c--theme--colors--glycine-600: #6e445a; + --c--theme--colors--terre-battue-100: #fef7da; + --c--theme--colors--terre-battue-200: #fceeac; + --c--theme--colors--terre-battue-300: #fbe769; + --c--theme--colors--terre-battue-400: #e2cf58; + --c--theme--colors--terre-battue-500: #b7a73f; + --c--theme--colors--terre-battue-600: #66673d; + --c--theme--colors--tilleul-verveine-100: #fef7da; + --c--theme--colors--tilleul-verveine-200: #fceeac; + --c--theme--colors--tilleul-verveine-300: #fbe769; + --c--theme--colors--tilleul-verveine-400: #e2cf58; + --c--theme--colors--tilleul-verveine-500: #b7a73f; + --c--theme--colors--tilleul-verveine-600: #66673d; + --c--theme--colors--focus-500: #0a76f6; + --c--theme--spacings--050V: 2px; + --c--theme--spacings--100V: 4px; + --c--theme--spacings--150V: 6px; + --c--theme--spacings--100W: 8px; + --c--theme--spacings--300V: 12px; + --c--theme--spacings--200W: 16px; + --c--theme--spacings--300W: 24px; + --c--theme--spacings--400W: 32px; + --c--theme--spacings--500W: 40px; + --c--theme--spacings--600W: 48px; + --c--theme--spacings--700W: 56px; + --c--theme--spacings--800W: 64px; + --c--theme--spacings--900W: 72px; + --c--theme--spacings--1200W: 96px; + --c--theme--spacings--1500W: 120px; + --c--theme--font--families--accent: Marianne; + --c--theme--font--families--base: Marianne; + --c--theme--font--sizes--xl: 20px; + --c--theme--font--sizes--lg: 18px; + --c--theme--font--sizes--md: 16px; + --c--theme--font--sizes--sm: 14px; + --c--theme--font--sizes--xs: 12px; + --c--theme--font--sizes--h1: 32px; + --c--theme--font--sizes--h2: 28px; + --c--theme--font--sizes--h3: 24px; + --c--theme--font--sizes--h4: 22px; + --c--theme--font--sizes--h5: 20px; + --c--theme--font--sizes--h6: 18px; + --c--theme--font--sizes--title-alt-xl: 80px; + --c--theme--font--sizes--title-alt-lg: 72px; + --c--theme--font--sizes--title-alt-md: 64px; + --c--theme--font--sizes--title-alt-sm: 56px; + --c--theme--font--sizes--title-alt-xs: 48px; --c--components--alert--border-radius: 0; + --c--components--alert--background-color: var( + --c--theme--colors--greyscale-000 + ); + --c--components--modal--box-shadow: 0px 6px 18px 0px rgba(0, 0, 18, 0.16); --c--components--button--medium-height: 48px; --c--components--button--border-radius: 4px; + --c--components--button--medium-text-height: 48px; --c--components--button--primary--background--color: var( - --c--theme--colors--primary-text + --c--theme--colors--primary-600 ); - --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--background--color-hover: var( + --c--theme--colors--primary-hover-600 + ); + --c--components--button--primary--background--color-active: var( + --c--theme--colors--primary-600 + ); + --c--components--button--primary--background--color-focus: var( + --c--theme--colors--focus-500 + ); + --c--components--button--primary--color: #ffffff; + --c--components--button--primary--color-hover: #ffffff; + --c--components--button--primary--color-active: #ffffff; --c--components--button--primary-text--background--color-hover: var( - --c--theme--colors--primary-100 + --c--theme--colors--greyscale-hover-000 ); --c--components--button--primary-text--background--color-active: var( - --c--theme--colors--primary-100 + --c--theme--colors--greyscale-clicked-000 + ); + --c--components--button--primary-text--color-disabled: var( + --c--theme--colors--greyscale-400 + ); + --c--components--button--primary-text--color: var( + --c--theme--colors--primary-600 ); --c--components--button--primary-text--color-hover: var( - --c--theme--colors--primary-text + --c--theme--colors--primary-600 + ); + --c--components--button--secondary--background--color: var( + --c--theme--colors--greyscale-000 + ); + --c--components--button--secondary--background--color-hover: var( + --c--theme--colors--greyscale-hover-000 ); - --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--primary-600 + --c--theme--colors--greyscale-250 ); --c--components--button--secondary--border--color-hover: var( - --c--theme--colors--primary-600 + --c--theme--colors--greyscale-250 ); --c--components--button--secondary--color: var( - --c--theme--colors--primary-text + --c--theme--colors--primary-600 + ); + --c--components--button--secondary--color-hover: var( + --c--theme--colors--primary-600 + ); + --c--components--button--secondary--color-disabled: var( + --c--theme--colors--greyscale-400 + ); + --c--components--button--tertiary--background--color: var( + --c--theme--colors--primary-300 + ); + --c--components--button--tertiary--background--color-hover: var( + --c--theme--colors--primary-hover-300 + ); + --c--components--button--tertiary--background--color-active: var( + --c--theme--colors--primary-clicked-300 + ); + --c--components--button--tertiary--border--color: var( + --c--theme--colors--primary-500 + ); + --c--components--button--tertiary--border--color-hover: var( + --c--theme--colors--greyscale-250 + ); + --c--components--button--tertiary--color: var( + --c--theme--colors--primary-600 + ); + --c--components--button--tertiary--color-hover: var( + --c--theme--colors--primary-600 + ); + --c--components--button--tertiary--color-disabled: var( + --c--theme--colors--primary-400 ); --c--components--button--tertiary-text--background--color-hover: var( --c--theme--colors--primary-100 @@ -452,11 +420,8 @@ --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--theme--colors--greyscale-500 ); --c--components--datagrid--header--size: var(--c--theme--font--sizes--s); --c--components--datagrid--body--background-color: transparent; @@ -465,1188 +430,716 @@ --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; } - .clr-secondary-text { color: var(--c--theme--colors--secondary-text); } - .clr-secondary-100 { color: var(--c--theme--colors--secondary-100); } - .clr-secondary-200 { color: var(--c--theme--colors--secondary-200); } - .clr-secondary-300 { color: var(--c--theme--colors--secondary-300); } - .clr-secondary-400 { color: var(--c--theme--colors--secondary-400); } - .clr-secondary-500 { color: var(--c--theme--colors--secondary-500); } - .clr-secondary-600 { color: var(--c--theme--colors--secondary-600); } - .clr-secondary-700 { color: var(--c--theme--colors--secondary-700); } - .clr-secondary-800 { color: var(--c--theme--colors--secondary-800); } - .clr-secondary-900 { color: var(--c--theme--colors--secondary-900); } - .clr-info-text { color: var(--c--theme--colors--info-text); } - .clr-info-100 { color: var(--c--theme--colors--info-100); } - .clr-info-200 { color: var(--c--theme--colors--info-200); } - .clr-info-300 { color: var(--c--theme--colors--info-300); } - .clr-info-400 { color: var(--c--theme--colors--info-400); } - .clr-info-500 { color: var(--c--theme--colors--info-500); } - .clr-info-600 { color: var(--c--theme--colors--info-600); } - .clr-info-700 { color: var(--c--theme--colors--info-700); } - .clr-info-800 { color: var(--c--theme--colors--info-800); } - .clr-info-900 { color: var(--c--theme--colors--info-900); } - .clr-greyscale-100 { color: var(--c--theme--colors--greyscale-100); } - .clr-greyscale-200 { color: var(--c--theme--colors--greyscale-200); } - .clr-greyscale-300 { color: var(--c--theme--colors--greyscale-300); } - .clr-greyscale-400 { color: var(--c--theme--colors--greyscale-400); } - .clr-greyscale-500 { color: var(--c--theme--colors--greyscale-500); } - .clr-greyscale-600 { color: var(--c--theme--colors--greyscale-600); } - .clr-greyscale-700 { color: var(--c--theme--colors--greyscale-700); } - .clr-greyscale-800 { color: var(--c--theme--colors--greyscale-800); } - .clr-greyscale-900 { color: var(--c--theme--colors--greyscale-900); } - .clr-greyscale-000 { color: var(--c--theme--colors--greyscale-000); } - .clr-primary-100 { color: var(--c--theme--colors--primary-100); } - .clr-primary-200 { color: var(--c--theme--colors--primary-200); } - .clr-primary-300 { color: var(--c--theme--colors--primary-300); } - .clr-primary-400 { color: var(--c--theme--colors--primary-400); } - .clr-primary-500 { color: var(--c--theme--colors--primary-500); } - .clr-primary-600 { color: var(--c--theme--colors--primary-600); } - .clr-primary-700 { color: var(--c--theme--colors--primary-700); } - .clr-primary-800 { color: var(--c--theme--colors--primary-800); } - .clr-primary-900 { color: var(--c--theme--colors--primary-900); } - .clr-success-100 { color: var(--c--theme--colors--success-100); } - .clr-success-200 { color: var(--c--theme--colors--success-200); } - .clr-success-300 { color: var(--c--theme--colors--success-300); } - .clr-success-400 { color: var(--c--theme--colors--success-400); } - .clr-success-500 { color: var(--c--theme--colors--success-500); } - .clr-success-600 { color: var(--c--theme--colors--success-600); } - .clr-success-700 { color: var(--c--theme--colors--success-700); } - .clr-success-800 { color: var(--c--theme--colors--success-800); } - .clr-success-900 { color: var(--c--theme--colors--success-900); } - .clr-warning-100 { color: var(--c--theme--colors--warning-100); } - .clr-warning-200 { color: var(--c--theme--colors--warning-200); } - .clr-warning-300 { color: var(--c--theme--colors--warning-300); } - .clr-warning-400 { color: var(--c--theme--colors--warning-400); } - .clr-warning-500 { color: var(--c--theme--colors--warning-500); } - .clr-warning-600 { color: var(--c--theme--colors--warning-600); } - .clr-warning-700 { color: var(--c--theme--colors--warning-700); } - .clr-warning-800 { color: var(--c--theme--colors--warning-800); } - .clr-warning-900 { color: var(--c--theme--colors--warning-900); } - .clr-danger-100 { color: var(--c--theme--colors--danger-100); } - .clr-danger-200 { color: var(--c--theme--colors--danger-200); } - .clr-danger-300 { color: var(--c--theme--colors--danger-300); } - .clr-danger-400 { color: var(--c--theme--colors--danger-400); } - .clr-danger-500 { color: var(--c--theme--colors--danger-500); } - .clr-danger-600 { color: var(--c--theme--colors--danger-600); } - .clr-danger-700 { color: var(--c--theme--colors--danger-700); } - .clr-danger-800 { color: var(--c--theme--colors--danger-800); } - .clr-danger-900 { color: var(--c--theme--colors--danger-900); } - .clr-primary-text { color: var(--c--theme--colors--primary-text); } - .clr-success-text { color: var(--c--theme--colors--success-text); } - .clr-warning-text { color: var(--c--theme--colors--warning-text); } - .clr-danger-text { 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-150 { color: var(--c--theme--colors--primary-150); } - .clr-info-150 { color: var(--c--theme--colors--info-150); } - +.clr-grey-400 { + color: var(--c--theme--colors--grey-400); +} +.clr-grey-800 { + color: var(--c--theme--colors--grey-800); +} .bg-secondary-text { background-color: var(--c--theme--colors--secondary-text); } - .bg-secondary-100 { background-color: var(--c--theme--colors--secondary-100); } - .bg-secondary-200 { background-color: var(--c--theme--colors--secondary-200); } - .bg-secondary-300 { background-color: var(--c--theme--colors--secondary-300); } - .bg-secondary-400 { background-color: var(--c--theme--colors--secondary-400); } - .bg-secondary-500 { background-color: var(--c--theme--colors--secondary-500); } - .bg-secondary-600 { background-color: var(--c--theme--colors--secondary-600); } - .bg-secondary-700 { background-color: var(--c--theme--colors--secondary-700); } - .bg-secondary-800 { background-color: var(--c--theme--colors--secondary-800); } - .bg-secondary-900 { background-color: var(--c--theme--colors--secondary-900); } - .bg-info-text { background-color: var(--c--theme--colors--info-text); } - .bg-info-100 { background-color: var(--c--theme--colors--info-100); } - .bg-info-200 { background-color: var(--c--theme--colors--info-200); } - .bg-info-300 { background-color: var(--c--theme--colors--info-300); } - .bg-info-400 { background-color: var(--c--theme--colors--info-400); } - .bg-info-500 { background-color: var(--c--theme--colors--info-500); } - .bg-info-600 { background-color: var(--c--theme--colors--info-600); } - .bg-info-700 { background-color: var(--c--theme--colors--info-700); } - .bg-info-800 { background-color: var(--c--theme--colors--info-800); } - .bg-info-900 { background-color: var(--c--theme--colors--info-900); } - .bg-greyscale-100 { background-color: var(--c--theme--colors--greyscale-100); } - .bg-greyscale-200 { background-color: var(--c--theme--colors--greyscale-200); } - .bg-greyscale-300 { background-color: var(--c--theme--colors--greyscale-300); } - .bg-greyscale-400 { background-color: var(--c--theme--colors--greyscale-400); } - .bg-greyscale-500 { background-color: var(--c--theme--colors--greyscale-500); } - .bg-greyscale-600 { background-color: var(--c--theme--colors--greyscale-600); } - .bg-greyscale-700 { background-color: var(--c--theme--colors--greyscale-700); } - .bg-greyscale-800 { background-color: var(--c--theme--colors--greyscale-800); } - .bg-greyscale-900 { background-color: var(--c--theme--colors--greyscale-900); } - .bg-greyscale-000 { background-color: var(--c--theme--colors--greyscale-000); } - .bg-primary-100 { background-color: var(--c--theme--colors--primary-100); } - .bg-primary-200 { background-color: var(--c--theme--colors--primary-200); } - .bg-primary-300 { background-color: var(--c--theme--colors--primary-300); } - .bg-primary-400 { background-color: var(--c--theme--colors--primary-400); } - .bg-primary-500 { background-color: var(--c--theme--colors--primary-500); } - .bg-primary-600 { background-color: var(--c--theme--colors--primary-600); } - .bg-primary-700 { background-color: var(--c--theme--colors--primary-700); } - .bg-primary-800 { background-color: var(--c--theme--colors--primary-800); } - .bg-primary-900 { background-color: var(--c--theme--colors--primary-900); } - .bg-success-100 { background-color: var(--c--theme--colors--success-100); } - .bg-success-200 { background-color: var(--c--theme--colors--success-200); } - .bg-success-300 { background-color: var(--c--theme--colors--success-300); } - .bg-success-400 { background-color: var(--c--theme--colors--success-400); } - .bg-success-500 { background-color: var(--c--theme--colors--success-500); } - .bg-success-600 { background-color: var(--c--theme--colors--success-600); } - .bg-success-700 { background-color: var(--c--theme--colors--success-700); } - .bg-success-800 { background-color: var(--c--theme--colors--success-800); } - .bg-success-900 { background-color: var(--c--theme--colors--success-900); } - .bg-warning-100 { background-color: var(--c--theme--colors--warning-100); } - .bg-warning-200 { background-color: var(--c--theme--colors--warning-200); } - .bg-warning-300 { background-color: var(--c--theme--colors--warning-300); } - .bg-warning-400 { background-color: var(--c--theme--colors--warning-400); } - .bg-warning-500 { background-color: var(--c--theme--colors--warning-500); } - .bg-warning-600 { background-color: var(--c--theme--colors--warning-600); } - .bg-warning-700 { background-color: var(--c--theme--colors--warning-700); } - .bg-warning-800 { background-color: var(--c--theme--colors--warning-800); } - .bg-warning-900 { background-color: var(--c--theme--colors--warning-900); } - .bg-danger-100 { background-color: var(--c--theme--colors--danger-100); } - .bg-danger-200 { background-color: var(--c--theme--colors--danger-200); } - .bg-danger-300 { background-color: var(--c--theme--colors--danger-300); } - .bg-danger-400 { background-color: var(--c--theme--colors--danger-400); } - .bg-danger-500 { background-color: var(--c--theme--colors--danger-500); } - .bg-danger-600 { background-color: var(--c--theme--colors--danger-600); } - .bg-danger-700 { background-color: var(--c--theme--colors--danger-700); } - .bg-danger-800 { background-color: var(--c--theme--colors--danger-800); } - .bg-danger-900 { background-color: var(--c--theme--colors--danger-900); } - .bg-primary-text { background-color: var(--c--theme--colors--primary-text); } - .bg-success-text { background-color: var(--c--theme--colors--success-text); } - .bg-warning-text { background-color: var(--c--theme--colors--warning-text); } - .bg-danger-text { 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-150 { background-color: var(--c--theme--colors--primary-150); } - .bg-info-150 { background-color: var(--c--theme--colors--info-150); } - +.bg-grey-400 { + background-color: var(--c--theme--colors--grey-400); +} +.bg-grey-800 { + background-color: var(--c--theme--colors--grey-800); +} .fw-thin { font-weight: var(--c--theme--font--weights--thin); } - .fw-light { font-weight: var(--c--theme--font--weights--light); } - .fw-regular { font-weight: var(--c--theme--font--weights--regular); } - .fw-medium { font-weight: var(--c--theme--font--weights--medium); } - .fw-bold { font-weight: var(--c--theme--font--weights--bold); } - .fw-extrabold { font-weight: var(--c--theme--font--weights--extrabold); } - .fw-black { font-weight: var(--c--theme--font--weights--black); } - .fs-h1 { font-size: var(--c--theme--font--sizes--h1); letter-spacing: var(--c--theme--font--letterspacings--h1); } - .fs-h2 { font-size: var(--c--theme--font--sizes--h2); letter-spacing: var(--c--theme--font--letterspacings--h2); } - .fs-h3 { font-size: var(--c--theme--font--sizes--h3); letter-spacing: var(--c--theme--font--letterspacings--h3); } - .fs-h4 { font-size: var(--c--theme--font--sizes--h4); letter-spacing: var(--c--theme--font--letterspacings--h4); } - .fs-h5 { font-size: var(--c--theme--font--sizes--h5); letter-spacing: var(--c--theme--font--letterspacings--h5); } - .fs-h6 { font-size: var(--c--theme--font--sizes--h6); letter-spacing: var(--c--theme--font--letterspacings--h6); } - .fs-l { font-size: var(--c--theme--font--sizes--l); letter-spacing: var(--c--theme--font--letterspacings--l); } - .fs-m { font-size: var(--c--theme--font--sizes--m); letter-spacing: var(--c--theme--font--letterspacings--m); } - .fs-s { font-size: var(--c--theme--font--sizes--s); letter-spacing: var(--c--theme--font--letterspacings--s); } - .fs-ml { font-size: var(--c--theme--font--sizes--ml); letter-spacing: var(--c--theme--font--letterspacings--ml); } - .fs-xl { font-size: var(--c--theme--font--sizes--xl); letter-spacing: var(--c--theme--font--letterspacings--xl); } - .fs-t { font-size: var(--c--theme--font--sizes--t); letter-spacing: var(--c--theme--font--letterspacings--t); } - .f-base { font-family: var(--c--theme--font--families--base); } - .f-accent { font-family: var(--c--theme--font--families--accent); } - -.m-0 { - margin: var(--c--theme--spacings--0); -} - -.mb-0 { - margin-bottom: var(--c--theme--spacings--0); -} - -.mt-0 { - margin-top: var(--c--theme--spacings--0); -} - -.ml-0 { - margin-left: var(--c--theme--spacings--0); -} - -.mr-0 { - margin-right: var(--c--theme--spacings--0); -} - .m-xl { margin: var(--c--theme--spacings--xl); } - .mb-xl { margin-bottom: var(--c--theme--spacings--xl); } - .mt-xl { margin-top: var(--c--theme--spacings--xl); } - .ml-xl { margin-left: var(--c--theme--spacings--xl); } - .mr-xl { margin-right: var(--c--theme--spacings--xl); } - .m-l { margin: var(--c--theme--spacings--l); } - .mb-l { margin-bottom: var(--c--theme--spacings--l); } - .mt-l { margin-top: var(--c--theme--spacings--l); } - .ml-l { margin-left: var(--c--theme--spacings--l); } - .mr-l { margin-right: var(--c--theme--spacings--l); } - .m-b { margin: var(--c--theme--spacings--b); } - .mb-b { margin-bottom: var(--c--theme--spacings--b); } - .mt-b { margin-top: var(--c--theme--spacings--b); } - .ml-b { margin-left: var(--c--theme--spacings--b); } - .mr-b { margin-right: var(--c--theme--spacings--b); } - .m-s { margin: var(--c--theme--spacings--s); } - .mb-s { margin-bottom: var(--c--theme--spacings--s); } - .mt-s { margin-top: var(--c--theme--spacings--s); } - .ml-s { margin-left: var(--c--theme--spacings--s); } - .mr-s { margin-right: var(--c--theme--spacings--s); } - .m-t { margin: var(--c--theme--spacings--t); } - .mb-t { margin-bottom: var(--c--theme--spacings--t); } - .mt-t { margin-top: var(--c--theme--spacings--t); } - .ml-t { margin-left: var(--c--theme--spacings--t); } - .mr-t { margin-right: var(--c--theme--spacings--t); } - .m-st { margin: var(--c--theme--spacings--st); } - .mb-st { margin-bottom: var(--c--theme--spacings--st); } - .mt-st { margin-top: var(--c--theme--spacings--st); } - .ml-st { margin-left: var(--c--theme--spacings--st); } - .mr-st { margin-right: var(--c--theme--spacings--st); } - -.m-none { - margin: var(--c--theme--spacings--none); -} - -.mb-none { - margin-bottom: var(--c--theme--spacings--none); -} - -.mt-none { - margin-top: var(--c--theme--spacings--none); -} - -.ml-none { - margin-left: var(--c--theme--spacings--none); -} - -.mr-none { - margin-right: var(--c--theme--spacings--none); -} - -.m-auto { - margin: var(--c--theme--spacings--auto); -} - -.mb-auto { - margin-bottom: var(--c--theme--spacings--auto); -} - -.mt-auto { - margin-top: var(--c--theme--spacings--auto); -} - -.ml-auto { - margin-left: var(--c--theme--spacings--auto); -} - -.mr-auto { - margin-right: var(--c--theme--spacings--auto); -} - -.m-bx { - margin: var(--c--theme--spacings--bx); -} - -.mb-bx { - margin-bottom: var(--c--theme--spacings--bx); -} - -.mt-bx { - margin-top: var(--c--theme--spacings--bx); -} - -.ml-bx { - margin-left: var(--c--theme--spacings--bx); -} - -.mr-bx { - margin-right: var(--c--theme--spacings--bx); -} - -.m-full { - margin: var(--c--theme--spacings--full); -} - -.mb-full { - margin-bottom: var(--c--theme--spacings--full); -} - -.mt-full { - margin-top: var(--c--theme--spacings--full); -} - -.ml-full { - margin-left: var(--c--theme--spacings--full); -} - -.mr-full { - margin-right: var(--c--theme--spacings--full); -} - -.p-0 { - padding: var(--c--theme--spacings--0); -} - -.pb-0 { - padding-bottom: var(--c--theme--spacings--0); -} - -.pt-0 { - padding-top: var(--c--theme--spacings--0); -} - -.pl-0 { - padding-left: var(--c--theme--spacings--0); -} - -.pr-0 { - padding-right: var(--c--theme--spacings--0); -} - .p-xl { padding: var(--c--theme--spacings--xl); } - .pb-xl { padding-bottom: var(--c--theme--spacings--xl); } - .pt-xl { padding-top: var(--c--theme--spacings--xl); } - .pl-xl { padding-left: var(--c--theme--spacings--xl); } - .pr-xl { padding-right: var(--c--theme--spacings--xl); } - .p-l { padding: var(--c--theme--spacings--l); } - .pb-l { padding-bottom: var(--c--theme--spacings--l); } - .pt-l { padding-top: var(--c--theme--spacings--l); } - .pl-l { padding-left: var(--c--theme--spacings--l); } - .pr-l { padding-right: var(--c--theme--spacings--l); } - .p-b { padding: var(--c--theme--spacings--b); } - .pb-b { padding-bottom: var(--c--theme--spacings--b); } - .pt-b { padding-top: var(--c--theme--spacings--b); } - .pl-b { padding-left: var(--c--theme--spacings--b); } - .pr-b { padding-right: var(--c--theme--spacings--b); } - .p-s { padding: var(--c--theme--spacings--s); } - .pb-s { padding-bottom: var(--c--theme--spacings--s); } - .pt-s { padding-top: var(--c--theme--spacings--s); } - .pl-s { padding-left: var(--c--theme--spacings--s); } - .pr-s { padding-right: var(--c--theme--spacings--s); } - .p-t { padding: var(--c--theme--spacings--t); } - .pb-t { padding-bottom: var(--c--theme--spacings--t); } - .pt-t { padding-top: var(--c--theme--spacings--t); } - .pl-t { padding-left: var(--c--theme--spacings--t); } - .pr-t { padding-right: var(--c--theme--spacings--t); } - .p-st { padding: var(--c--theme--spacings--st); } - .pb-st { padding-bottom: var(--c--theme--spacings--st); } - .pt-st { padding-top: var(--c--theme--spacings--st); } - .pl-st { padding-left: var(--c--theme--spacings--st); } - .pr-st { padding-right: var(--c--theme--spacings--st); } - -.p-none { - padding: var(--c--theme--spacings--none); -} - -.pb-none { - padding-bottom: var(--c--theme--spacings--none); -} - -.pt-none { - padding-top: var(--c--theme--spacings--none); -} - -.pl-none { - padding-left: var(--c--theme--spacings--none); -} - -.pr-none { - padding-right: var(--c--theme--spacings--none); -} - -.p-auto { - padding: var(--c--theme--spacings--auto); -} - -.pb-auto { - padding-bottom: var(--c--theme--spacings--auto); -} - -.pt-auto { - padding-top: var(--c--theme--spacings--auto); -} - -.pl-auto { - padding-left: var(--c--theme--spacings--auto); -} - -.pr-auto { - padding-right: var(--c--theme--spacings--auto); -} - -.p-bx { - padding: var(--c--theme--spacings--bx); -} - -.pb-bx { - padding-bottom: var(--c--theme--spacings--bx); -} - -.pt-bx { - padding-top: var(--c--theme--spacings--bx); -} - -.pl-bx { - padding-left: var(--c--theme--spacings--bx); -} - -.pr-bx { - padding-right: var(--c--theme--spacings--bx); -} - -.p-full { - padding: var(--c--theme--spacings--full); -} - -.pb-full { - padding-bottom: var(--c--theme--spacings--full); -} - -.pt-full { - padding-top: var(--c--theme--spacings--full); -} - -.pl-full { - padding-left: var(--c--theme--spacings--full); -} - -.pr-full { - padding-right: var(--c--theme--spacings--full); -} diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 4e6bfdda..9c67c89a 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -73,10 +73,12 @@ export const tokens = { 'success-text': '#FFFFFF', 'warning-text': '#FFFFFF', 'danger-text': '#FFFFFF', - 'card-border': '#ededed', + 'card-border': '#DDDDDD', 'primary-bg': '#FAFAFA', 'primary-150': '#E5EEFA', 'info-150': '#E5EEFA', + 'grey-400': '#929292', + 'grey-800': '#2A2A2A', }, font: { sizes: { @@ -90,7 +92,7 @@ export const tokens = { m: '0.8125rem', s: '0.75rem', ml: '0.938rem', - xl: '1.50rem', + xl: '1.25rem', t: '0.6875rem', }, weights: { @@ -111,7 +113,7 @@ export const tokens = { h2: 'normal', h3: 'normal', h4: 'normal', - h5: '1px', + h5: 'normal', h6: 'normal', l: 'normal', m: 'normal', @@ -119,17 +121,12 @@ export const tokens = { }, }, spacings: { - '0': '0', xl: '4rem', l: '3rem', b: '1.625rem', s: '1rem', t: '0.5rem', st: '0.25rem', - none: '0', - auto: 'auto', - bx: '2.2rem', - full: '100%', }, transitions: { 'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)', @@ -138,145 +135,13 @@ export const tokens = { duration: '250ms', }, breakpoints: { - xs: '480px', + xs: 0, sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1400px', - xxs: '320px', }, - 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': '#ffffff', - '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': '#ffffff' }, - 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-400)', - 'color-hover': 'var(--c--theme--colors--danger-500)', - '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--primary-200)' }, - }, - tertiary: { - color: 'var(--c--theme--colors--primary-text)', - 'color-disabled': 'var(--c--theme--colors--greyscale-600)', - background: { - 'color-hover': 'var(--c--theme--colors--primary-100)', - 'color-disabled': 'var(--c--theme--colors--greyscale-200)', - }, - }, - disabled: { color: 'white', background: { color: '#b3cef0' } }, - }, - 'la-gauffre': { activated: false }, }, }, dark: { @@ -334,98 +199,188 @@ export const tokens = { dsfr: { theme: { colors: { - 'card-border': '#ededed', - 'primary-text': '#000091', - 'primary-100': '#f5f5fe', - 'primary-150': '#F4F4FD', - 'primary-200': '#ececfe', - 'primary-300': '#e3e3fd', - 'primary-400': '#cacafb', - 'primary-500': '#6a6af4', + 'primary-text': 'var(--c--theme--colors--primary-600)', + 'primary-100': '#F5F5FE', + 'primary-200': '#ECECFE', + 'primary-300': '#E3E3FD', + 'primary-400': '#CACAFB', + 'primary-500': '#6A6AF4', 'primary-600': '#000091', - 'primary-700': '#272747', - 'primary-800': '#21213f', - 'primary-900': '#1c1a36', - 'secondary-text': '#FFFFFF', - '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': '#f6f6f6', - 'greyscale-100': '#eeeeee', - 'greyscale-200': '#e5e5e5', - 'greyscale-300': '#e1e1e1', - 'greyscale-400': '#dddddd', - 'greyscale-500': '#cecece', - 'greyscale-600': '#7b7b7b', - 'greyscale-700': '#666666', - 'greyscale-800': '#2a2a2a', - 'greyscale-900': '#1e1e1e', - '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': '#f4f6ff', - 'info-200': '#e8edff', - 'info-300': '#dde5ff', - 'info-400': '#bdcdff', - 'info-500': '#0078f3', - 'info-600': '#0063cb', - 'info-700': '#f4f6ff', - 'info-800': '#222a3f', - 'info-900': '#1d2437', - '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': '#e1000f', - 'danger-100': '#fef4f4', - 'danger-200': '#fee9e9', - 'danger-300': '#fddede', - 'danger-400': '#fcbfbf', - 'danger-500': '#e1000f', - 'danger-600': '#c9191e', - 'danger-700': '#642727', - 'danger-800': '#412121', - 'danger-900': '#3a1c1c', + 'primary-clicked-100': '#CBCBFA', + 'primary-clicked-200': '#BBBBFC', + 'primary-clicked-300': '#ADADF9', + 'primary-clicked-400': '#8B8BF6', + 'primary-clicked-500': '#AEAEF9', + 'primary-clicked-600': '#2323FF', + 'primary-hover-100': '#DCDCFC', + 'primary-hover-200': '#CECEFC', + 'primary-hover-300': '#C1C1FB', + 'primary-hover-400': '#A1A1F8', + 'primary-hover-500': '#9898F8', + 'primary-hover-600': '#1212FF', + 'secondary-100': '#FEF4F4', + 'secondary-200': '#FEE9E9', + 'secondary-300': '#FDDEDE', + 'secondary-400': '#FCBFBF', + 'secondary-500': '#E1000F', + 'secondary-600': '#C9191E', + 'secondary-clicked-100': '#FAC4C4', + 'secondary-clicked-200': '#FCAFAF', + 'secondary-clicked-300': '#FA9E9E', + 'secondary-clicked-400': '#FA7474', + 'secondary-clicked-500': '#FF4347', + 'secondary-clicked-600': '#F95A5C', + 'secondary-hover-100': '#FCD7D7', + 'secondary-hover-200': '#FDC5C5', + 'secondary-hover-300': '#FBB6B6', + 'secondary-hover-400': '#FB8F8F', + 'secondary-hover-500': '#FF292F', + 'secondary-hover-600': '#F93F42', + 'greyscale-000': '#FFFFFF', + 'greyscale-050': '#F6F6F6', + 'greyscale-100': '#EEEEEE', + 'greyscale-200': '#E5E5E5', + 'greyscale-250': '#DDDDDD', + 'greyscale-300': '#CECECE', + 'greyscale-400': '#929292', + 'greyscale-500': '#666666', + 'greyscale-700': '#3A3A3A', + 'greyscale-1000': '#161616', + 'greyscale-clicked-000': '#EDEDED', + 'greyscale-clicked-050': '#CFCFCF', + 'greyscale-clicked-100': '#C1C1C1', + 'greyscale-clicked-200': '#B2B2B2', + 'greyscale-clicked-250': '#A7A7A7', + 'greyscale-clicked-300': '#939393', + 'greyscale-clicked-400': '#CECECE', + 'greyscale-clicked-500': '#A6A6A6', + 'greyscale-clicked-700': '#777777', + 'greyscale-clicked-1000': '#474747', + 'greyscale-hover-000': '#F6F6F6', + 'greyscale-hover-050': '#DFDFDF', + 'greyscale-hover-100': '#D2D2D2', + 'greyscale-hover-200': '#C5C5C5', + 'greyscale-hover-250': '#BBBBBB', + 'greyscale-hover-300': '#A8A8A8', + 'greyscale-hover-400': '#BBBBBB', + 'greyscale-hover-500': '#919191', + 'greyscale-hover-700': '#616161', + 'greyscale-hover-1000': '#343434', + 'success-200': '#B8FEC9', + 'success-500': '#18753C', + 'success-600': '#18753C', + 'success-clicked-200': '#34EB7B', + 'success-clicked-600': '#2FC368', + 'success-hover-200': '#46FD89', + 'success-hover-600': '#27A959', + 'info-200': '#E8EDFF', + 'info-500': '#0063CB', + 'info-600': '#0063CB', + 'info-clicked-200': '#A9BFFF', + 'info-clicked-600': '#6798FF', + 'info-hover-200': '#C2D1FF', + 'info-hover-600': '#3B87FF', + 'warning-200': '#FFE9E6', + 'warning-500': '#B34000', + 'warning-600': '#B34000', + 'warning-clicked-200': '#FFB0A2', + 'warning-clicked-600': '#FF7A55', + 'warning-hover-200': '#FFC6BD', + 'warning-hover-600': '#FF6218', + 'danger-200': '#FFE9E9', + 'danger-500': '#CE0500', + 'danger-600': '#CE0500', + 'danger-clicked-200': '#FFAFAF', + 'danger-clicked-600': '#FF4140', + 'danger-hover-200': '#FFC5C5', + 'danger-hover-600': '#FF2725', + 'cumulus-100': '#F3F6FE', + 'cumulus-200': '#E6EEFE', + 'cumulus-300': '#DAE6FD', + 'cumulus-400': '#B6CFFB', + 'cumulus-500': '#417DC4', + 'cumulus-600': '#3558A2', + 'emeraude-100': '#E3FDEB', + 'emeraude-200': '#C3FAD5', + 'emeraude-300': '#9EF9BE', + 'emeraude-400': '#6FE49D', + 'emeraude-500': '#00A95F', + 'emeraude-600': '#297254', + 'glycine-100': '#FEF3FD', + 'glycine-200': '#FEE7FC', + 'glycine-300': '#FDDBFA', + 'glycine-400': '#FBB8F6', + 'glycine-500': '#A558A0', + 'glycine-600': '#6E445A', + 'terre-battue-100': '#FEF7DA', + 'terre-battue-200': '#FCEEAC', + 'terre-battue-300': '#FBE769', + 'terre-battue-400': '#E2CF58', + 'terre-battue-500': '#B7A73F', + 'terre-battue-600': '#66673D', + 'tilleul-verveine-100': '#FEF7DA', + 'tilleul-verveine-200': '#FCEEAC', + 'tilleul-verveine-300': '#FBE769', + 'tilleul-verveine-400': '#E2CF58', + 'tilleul-verveine-500': '#B7A73F', + 'tilleul-verveine-600': '#66673D', + 'focus-500': '#0A76F6', }, - font: { families: { accent: 'Marianne', base: 'Marianne' } }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', + spacings: { + '050V': '2px', + '100V': '4px', + '150V': '6px', + '100W': '8px', + '300V': '12px', + '200W': '16px', + '300W': '24px', + '400W': '32px', + '500W': '40px', + '600W': '48px', + '700W': '56px', + '800W': '64px', + '900W': '72px', + '1200W': '96px', + '1500W': '120px', + }, + font: { + families: { accent: 'Marianne', base: 'Marianne' }, + sizes: { + xl: '20px', + lg: '18px', + md: '16px', + sm: '14px', + xs: '12px', + h1: '32px', + h2: '28px', + h3: '24px', + h4: '22px', + h5: '20px', + h6: '18px', + 'title-alt-xl': '80px', + 'title-alt-lg': '72px', + 'title-alt-md': '64px', + 'title-alt-sm': '56px', + 'title-alt-xs': '48px', + }, }, }, components: { - alert: { 'border-radius': '0' }, + alert: { + 'border-radius': '0', + 'background-color': 'var(--c--theme--colors--greyscale-000)', + }, + modal: { 'box-shadow': '0px 6px 18px 0px rgba(0, 0, 18, 0.16);' }, button: { 'medium-height': '48px', 'border-radius': '4px', + 'medium-text-height': '48px', primary: { background: { - color: 'var(--c--theme--colors--primary-text)', - 'color-hover': '#1212ff', - 'color-active': '#2323ff', + color: 'var(--c--theme--colors--primary-600)', + 'color-hover': 'var(--c--theme--colors--primary-hover-600)', + 'color-active': 'var(--c--theme--colors--primary-600)', + 'color-focus': 'var(--c--theme--colors--focus-500)', }, color: '#ffffff', 'color-hover': '#ffffff', @@ -433,30 +388,51 @@ export const tokens = { }, '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--greyscale-hover-000)', + 'color-active': 'var(--c--theme--colors--greyscale-clicked-000)', }, - 'color-hover': 'var(--c--theme--colors--primary-text)', + 'color-disabled': 'var(--c--theme--colors--greyscale-400)', + color: 'var(--c--theme--colors--primary-600)', + 'color-hover': 'var(--c--theme--colors--primary-600)', }, secondary: { - background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' }, - border: { - color: 'var(--c--theme--colors--primary-600)', - 'color-hover': 'var(--c--theme--colors--primary-600)', + background: { + color: 'var(--c--theme--colors--greyscale-000)', + 'color-hover': 'var(--c--theme--colors--greyscale-hover-000)', + 'color-active': '#EDEDED', }, - color: 'var(--c--theme--colors--primary-text)', + border: { + color: 'var(--c--theme--colors--greyscale-250)', + 'color-hover': 'var(--c--theme--colors--greyscale-250)', + }, + color: 'var(--c--theme--colors--primary-600)', + 'color-hover': 'var(--c--theme--colors--primary-600)', + 'color-disabled': 'var(--c--theme--colors--greyscale-400)', + }, + tertiary: { + background: { + color: 'var(--c--theme--colors--primary-300)', + 'color-hover': 'var(--c--theme--colors--primary-hover-300)', + 'color-active': 'var(--c--theme--colors--primary-clicked-300)', + }, + border: { + color: 'var(--c--theme--colors--primary-500)', + 'color-hover': 'var(--c--theme--colors--greyscale-250)', + }, + color: 'var(--c--theme--colors--primary-600)', + 'color-hover': 'var(--c--theme--colors--primary-600)', + 'color-disabled': 'var(--c--theme--colors--primary-400)', }, 'tertiary-text': { background: { 'color-hover': 'var(--c--theme--colors--primary-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)', + color: 'var(--c--theme--colors--greyscale-500)', size: 'var(--c--theme--font--sizes--s)', }, body: { @@ -466,53 +442,15 @@ export const tokens = { 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': '#ffffff', - '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': '#ffffff', - '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' }, + 'forms-datepicker': {}, + 'forms-fileuploader': {}, + 'forms-input': {}, + 'forms-textarea': {}, + 'forms-select': {}, + 'forms-switch': {}, + 'forms-checkbox': {}, 'la-gauffre': { activated: true }, }, }, diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx index 3aa67e42..2cc6dcb6 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx @@ -4,7 +4,7 @@ import { SortModel, usePagination, } from '@openfun/cunningham-react'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { createGlobalStyle } from 'styled-components'; @@ -118,7 +118,7 @@ export const DocsGrid = () => { renderCell: ({ row }) => { return ( - + {row.title} @@ -131,7 +131,9 @@ export const DocsGrid = () => { renderCell: ({ row }) => { return ( - {formatDate(row.created_at)} + + {formatDate(row.created_at)} + ); }, @@ -142,7 +144,9 @@ export const DocsGrid = () => { renderCell: ({ row }) => { return ( - {formatDate(row.updated_at)} + + {formatDate(row.updated_at)} + ); }, @@ -153,7 +157,7 @@ export const DocsGrid = () => { renderCell: ({ row }) => { return ( - + {transRole(currentDocRole(row.abilities))} @@ -166,7 +170,9 @@ export const DocsGrid = () => { renderCell: ({ row }) => { return ( - {row.accesses.length} + + {row.accesses.length} + ); }, diff --git a/src/frontend/apps/impress/src/layouts/docs/DocsHeaderLayout.tsx b/src/frontend/apps/impress/src/layouts/docs/DocsHeaderLayout.tsx new file mode 100644 index 00000000..6e4ef47b --- /dev/null +++ b/src/frontend/apps/impress/src/layouts/docs/DocsHeaderLayout.tsx @@ -0,0 +1,44 @@ +import { Button } from '@openfun/cunningham-react'; + +import { StyledLink } from '@/components'; +import { Icon } from '@/components/icons/Icon'; +import { ButtonLogin } from '@/core'; +import { LaGaufre } from '@/features/header/components/LaGaufre'; +import { LanguagePicker } from '@/features/language'; +import { useResponsiveStore } from '@/stores'; + +import { default as IconDocs } from './assets/logo-docs.svg'; +import styles from './docs-layout.module.scss'; + +export const DocsHeaderLayout = () => { + const { isResponsive, toggleMobileMenu } = useResponsiveStore(); + + return ( +
+ {isResponsive && ( +
+ ); +}; diff --git a/src/frontend/apps/impress/src/layouts/docs/DocsLayout.tsx b/src/frontend/apps/impress/src/layouts/docs/DocsLayout.tsx new file mode 100644 index 00000000..87719558 --- /dev/null +++ b/src/frontend/apps/impress/src/layouts/docs/DocsLayout.tsx @@ -0,0 +1,32 @@ +import { PropsWithChildren, ReactNode } from 'react'; + +import { Box } from '@/components'; + +import { DocsHeaderLayout } from './DocsHeaderLayout'; +import { DocsLeftLayout } from './DocsLeftLayout'; +import styles from './docs-layout.module.scss'; + +type Props = { + leftContent?: ReactNode; + backgroundStyle?: 'white' | 'grey'; +}; +export const DocsLayout = ({ + children, + backgroundStyle = 'grey', + leftContent, +}: PropsWithChildren) => { + return ( +
+ + + {leftContent} +
+ {children} +
+ +
+ ); +}; diff --git a/src/frontend/apps/impress/src/layouts/docs/DocsLeftLayout.tsx b/src/frontend/apps/impress/src/layouts/docs/DocsLeftLayout.tsx new file mode 100644 index 00000000..91864881 --- /dev/null +++ b/src/frontend/apps/impress/src/layouts/docs/DocsLeftLayout.tsx @@ -0,0 +1,83 @@ +import { Button } from '@openfun/cunningham-react'; +import classNames from 'classnames'; +import { useRouter } from 'next/navigation'; +import { PropsWithChildren, ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Icon } from '@/components/icons/Icon'; +import { HorizontalSeparator } from '@/components/separator/HorizontalSeparator'; +import { SeparatedSection } from '@/components/separator/SeparatedSection'; +import { ButtonLogin } from '@/core'; +import { useCreateDoc } from '@/features/docs'; +import { LanguagePicker } from '@/features/language'; +import { useResponsiveStore } from '@/stores'; + +import styles from './docs-layout.module.scss'; + +export const DocsLeftLayout = ({ children }: PropsWithChildren) => { + const { t } = useTranslation(); + const router = useRouter(); + const { isMobileMenuOpen, ...responsiveStore } = useResponsiveStore(); + + const { mutate: createDoc } = useCreateDoc({ + onSuccess: (doc) => { + router.push(`/docs/${doc.id}`); + responsiveStore.toggleMobileMenu(); + }, + }); + + const goToHome = () => { + router.push('/'); + responsiveStore.toggleMobileMenu(); + }; + + const createNewDoc = () => { + createDoc({ title: t('Untitled document') }); + }; + + const getContent = (): ReactNode => { + return ( +
+ +
+
+
+ +
+ + {children} +
+ ); + }; + + return ( + <> +
{getContent()}
+
+ {getContent()} + +
+ + + +
+
+ + ); +}; diff --git a/src/frontend/apps/impress/src/layouts/docs/assets/logo-docs.svg b/src/frontend/apps/impress/src/layouts/docs/assets/logo-docs.svg new file mode 100644 index 00000000..4f26ae3b --- /dev/null +++ b/src/frontend/apps/impress/src/layouts/docs/assets/logo-docs.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/frontend/apps/impress/src/layouts/docs/docs-layout.module.scss b/src/frontend/apps/impress/src/layouts/docs/docs-layout.module.scss new file mode 100644 index 00000000..72a1f770 --- /dev/null +++ b/src/frontend/apps/impress/src/layouts/docs/docs-layout.module.scss @@ -0,0 +1,90 @@ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--c--theme--spacings--200W); + height: 52px; + background-color: var(--c--theme--colors--greyscale-000); + border-bottom: 1px solid var(--c--theme--colors--greyscale-200, #e5e5e5); +} + +.iconContainer { + display: flex; + align-items: center; + gap: var(--c--theme--spacings--150V); + color: var(--c--theme--colors--primary-600); + font-weight: var(--c--theme--font--weights--bold); +} + +.rightContainer { + display: flex; + align-items: center; + gap: var(--c--theme--spacings--300V); +} + + +.mainContent { + display: flex; + justify-content: center; + flex: 1; + padding: var(--c--theme--spacings--200W) var(--c--theme--spacings--200W); + overflow-y: scroll; + height: calc(100dvh - 52px); + + &.grey { + background-color: var(--c--theme--colors--greyscale-050); + } + &.white { + background-color: var(--c--theme--colors--greyscale-000); + } +} + +.leftNavigationBar { + min-width: 300px; + width: 300px; + max-width: 300px; + height: calc(100dvh - 52px); + border-right: 1px solid var(--c--theme--colors--greyscale-200); +} + +.leftNavigationBarHeader { + display: flex; + justify-content: space-between; + align-items: center; +} + +.leftNavigationBarResponsive { + z-index: 999; + width: 100dvw; + height: calc(100dvh - 52px); + border-right: 1px solid var(--c--theme--colors--greyscale-200); + position: fixed; + left: -100vw; + background-color: var(--c--theme--colors--greyscale-000); + transition: 0.15s; + + &.openNavigationMenu { + left: 0; + } +} + +.responsiveMenuActions { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: var(--c--theme--spacings--200W); +} + +@media (min-width: 1025px) { + .leftNavigationBarResponsive { + display: none; + } +} + +@media (max-width: 1024px) { + .leftNavigationBar { + display: none; + } +} diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx index b9d73257..4c3c22cb 100644 --- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx +++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx @@ -10,7 +10,7 @@ import { TextErrors } from '@/components/TextErrors'; import { useAuthStore } from '@/core/auth'; import { DocEditor } from '@/features/docs/doc-editor'; import { KEY_DOC, useDoc, useDocStore } from '@/features/docs/doc-management'; -import { MainLayout } from '@/layouts'; +import { DocsLayout } from '@/layouts/docs/DocsLayout'; import { useBroadcastStore } from '@/stores'; import { NextPageWithLayout } from '@/types/next'; @@ -28,9 +28,11 @@ export function DocLayout() { - - - + + + + + ); } diff --git a/src/frontend/apps/impress/src/pages/docs/index.tsx b/src/frontend/apps/impress/src/pages/docs/index.tsx index 86414d94..35fdfa98 100644 --- a/src/frontend/apps/impress/src/pages/docs/index.tsx +++ b/src/frontend/apps/impress/src/pages/docs/index.tsx @@ -1,15 +1,20 @@ import type { ReactElement } from 'react'; -import { DocsGridContainer } from '@/features/docs/docs-grid'; -import { MainLayout } from '@/layouts'; +import { Box } from '@/components'; +import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid'; +import { DocsLayout } from '@/layouts/docs/DocsLayout'; import { NextPageWithLayout } from '@/types/next'; const Page: NextPageWithLayout = () => { - return ; + return ( + + + + ); }; Page.getLayout = function getLayout(page: ReactElement) { - return {page}; + return {page}; }; export default Page; diff --git a/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx b/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx index 1ca49370..7521b8b5 100644 --- a/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx +++ b/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx @@ -4,41 +4,74 @@ export type ScreenSize = 'small-mobile' | 'mobile' | 'tablet' | 'desktop'; export interface UseResponsiveStore { isMobile: boolean; + isTablet: boolean; + isMobileMenuOpen: boolean; isSmallMobile: boolean; screenSize: ScreenSize; screenWidth: number; setScreenSize: (size: ScreenSize) => void; + toggleMobileMenu: () => void; + isResponsive: boolean; initializeResizeListener: () => () => void; } const initialState = { isMobile: false, + isTablet: false, isSmallMobile: false, + isResponsive: false, + isMobileMenuOpen: false, screenSize: 'desktop' as ScreenSize, screenWidth: 0, }; -export const useResponsiveStore = create((set) => ({ +export const useResponsiveStore = create((set, get) => ({ isMobile: initialState.isMobile, + isTablet: initialState.isTablet, isSmallMobile: initialState.isSmallMobile, screenSize: initialState.screenSize, + isMobileMenuOpen: initialState.isMobileMenuOpen, screenWidth: initialState.screenWidth, setScreenSize: (size: ScreenSize) => set(() => ({ screenSize: size })), + isResponsive: initialState.isResponsive, + toggleMobileMenu: () => { + set((old) => ({ isMobileMenuOpen: !old.isMobileMenuOpen })); + }, initializeResizeListener: () => { const resizeHandler = () => { const width = window.innerWidth; if (width < 560) { set({ + isResponsive: true, screenSize: 'small-mobile', isMobile: true, + isTablet: false, isSmallMobile: true, }); } else if (width < 768) { - set({ screenSize: 'mobile', isMobile: true, isSmallMobile: false }); + set({ + isResponsive: true, + screenSize: 'mobile', + isTablet: false, + isMobile: true, + isSmallMobile: false, + }); } else if (width >= 768 && width < 1024) { - set({ screenSize: 'tablet', isMobile: false, isSmallMobile: false }); + set({ + isResponsive: true, + screenSize: 'tablet', + isTablet: true, + isMobile: false, + isSmallMobile: false, + }); } else { - set({ screenSize: 'desktop', isMobile: false, isSmallMobile: false }); + set({ + isResponsive: false, + screenSize: 'desktop', + isTablet: false, + isMobile: false, + isSmallMobile: false, + }); } set({ screenWidth: width });