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

✨(frontend) refactor and theme token update

Browse Source 
The configuration file has been simplified by importing configurations
from @gouvfr-lasuite/ui-kit . Colors and components have been updated to
reflect the new values. Additionally, adjustments have been made to
global styles, including the addition of styles for Material icons. Form
components have also been modified to incorporate the new style
properties.
This commit is contained in:
Nathan Panchout
2025-03-20 17:18:22 +01:00
committed by Anthony LC
parent 69ca4af539
commit 1abf529891
12 changed files with 716 additions and 2006 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -8,6 +8,10 @@ and this project adheres to
## [Unreleased]
## Changed
- ♻️(frontend) Integrate UI kit #783
## [2.6.0] - 2025-03-21
## Added

2
env.d/development/common.dist
View File

@@ -61,4 +61,4 @@ COLLABORATION_SERVER_SECRET=my-secret
COLLABORATION_WS_URL=ws://localhost:8083/collaboration/ws/
# Frontend
FRONTEND_THEME=dsfr
FRONTEND_THEME=default

4
src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
View File

@@ -8,7 +8,7 @@ const config = {
CRISP_WEBSITE_ID: null,
COLLABORATION_WS_URL: 'ws://localhost:8083/collaboration/ws/',
ENVIRONMENT: 'development',
FRONTEND_THEME: 'dsfr',
FRONTEND_THEME: 'default',
MEDIA_BASE_URL: 'http://localhost:8083',
LANGUAGES: [
['en-us', 'English'],
@@ -159,7 +159,7 @@ test.describe('Config: Not loggued', () => {
expect(response.ok()).toBeTruthy();
const jsonResponse = await response.json();
expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr');
expect(jsonResponse.FRONTEND_THEME).toStrictEqual('default');
const footer = page.locator('footer').first();
// alt 'Gouvernement Logo' comes from the theme

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

@@ -1,492 +1,55 @@
const config = {
themes: {
default: {
theme: {
colors: {
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-action': '#1212FF',
'primary-050': '#F5F5FE',
'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA',
'greyscale-000': '#fff',
'greyscale-1000': '#161616',
'blue-400': '#7AB1E8',
'blue-500': '#417DC4',
'blue-600': '#3558A2',
'brown-400': '#E6BE92',
'brown-500': '#BD987A',
'brown-600': '#745B47',
'cyan-400': '#34BAB5',
'cyan-500': '#009099',
'cyan-600': '#006A6F',
'gold-400': '#FFCA00',
'gold-500': '#C3992A',
'gold-600': '#695240',
'green-400': '#34CB6A',
'green-500': '#00A95F',
'green-600': '#297254',
'olive-400': '#99C221',
'olive-500': '#68A532',
'olive-600': '#447049',
'orange-400': '#FF732C',
'orange-500': '#E4794A',
'orange-600': '#755348',
'pink-400': '#FFB7AE',
'pink-500': '#E18B76',
'pink-600': '#8D533E',
'purple-400': '#CE70CC',
'purple-500': '#A558A0',
'purple-600': '#6E445A',
'yellow-400': '#D8C634',
'yellow-500': '#B7A73F',
'yellow-600': '#66673D',
},
font: {
sizes: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem',
xl: '1.25rem',
t: '0.6875rem',
s: '0.75rem',
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
'xl-alt': '5rem',
'lg-alt': '4.5rem',
'md-alt': '4rem',
'sm-alt': '3.5rem',
'xs-alt': '3rem',
},
weights: {
thin: 100,
extrabold: 800,
black: 900,
},
},
spacings: {
'0': '0',
none: '0',
auto: 'auto',
bx: '2.2rem',
full: '100%',
'4xs': '0.125rem',
'3xs': '0.25rem',
'2xs': '0.375rem',
xs: '0.5rem',
sm: '0.75rem',
base: '1rem',
md: '1.5rem',
lg: '2rem',
xl: '2.5rem',
xxl: '3rem',
xxxl: '3.5rem',
'4xl': '4rem',
'5xl': '4.5rem',
'6xl': '6rem',
'7xl': '7.5rem',
},
breakpoints: {
xxs: '320px',
xs: '480px',
},
logo: {
src: '',
widthHeader: '',
widthFooter: '',
alt: '',
},
},
components: {
datagrid: {
header: {
weight: 'var(--c--theme--font--weights--extrabold)',
size: 'var(--c--theme--font--sizes--ml)',
},
cell: {
color: 'var(--c--theme--colors--primary-500)',
size: 'var(--c--theme--font--sizes--ml)',
},
},
'forms-checkbox': {
'background-color': {
hover: '#055fd214',
},
color: 'var(--c--theme--colors--primary-500)',
'font-size': 'var(--c--theme--font--sizes--ml)',
},
'forms-datepicker': {
'border-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
'border-radius': {
hover: 'var(--c--components--forms-datepicker--border-radius)',
focus: 'var(--c--components--forms-datepicker--border-radius)',
},
},
'forms-field': {
color: 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
width: 'auto',
},
'forms-input': {
'value-color': 'var(--c--theme--colors--primary-500)',
'border-color': 'var(--c--theme--colors--primary-500)',
color: {
error: 'var(--c--theme--colors--danger-500)',
'error-hover': 'var(--c--theme--colors--danger-500)',
'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)',
},
},
'forms-labelledbox': {
'label-color': {
small: 'var(--c--theme--colors--primary-500)',
'small-disabled': 'var(--c--theme--colors--greyscale-400)',
big: {
disabled: 'var(--c--theme--colors--greyscale-400)',
},
},
},
'forms-select': {
'border-color': 'var(--c--theme--colors--primary-500)',
'border-color-disabled-hover':
'var(--c--theme--colors--greyscale-200)',
'border-radius': {
hover: 'var(--c--components--forms-select--border-radius)',
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#fff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-300)',
},
},
'forms-switch': {
'accent-color': 'var(--c--theme--colors--primary-400)',
},
'forms-textarea': {
'border-color': 'var(--c--components--forms-textarea--border-color)',
'border-color-hover':
'var(--c--components--forms-textarea--border-color)',
'border-radius': {
hover: 'var(--c--components--forms-textarea--border-radius)',
focus: 'var(--c--components--forms-textarea--border-radius)',
},
color: 'var(--c--theme--colors--primary-500)',
disabled: {
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
},
},
modal: {
'background-color': '#fff',
},
button: {
'border-radius': {
active: 'var(--c--components--button--border-radius)',
},
'medium-height': 'auto',
'small-height': 'auto',
success: {
color: 'white',
'color-disabled': 'white',
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--success-600)',
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--success-800)',
},
},
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
primary: {
color: 'var(--c--theme--colors--primary-text)',
'color-active': 'var(--c--theme--colors--primary-text)',
background: {
color: 'var(--c--theme--colors--primary-400)',
'color-active': 'var(--c--theme--colors--primary-500)',
},
border: {
'color-active': 'transparent',
},
},
secondary: {
color: 'var(--c--theme--colors--primary-500)',
'color-hover': 'var(--c--theme--colors--primary-text)',
background: {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: {
color: 'var(--c--theme--colors--greyscale-300)',
},
},
tertiary: {
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
disabled: {
color: 'white',
background: {
color: '#b3cef0',
},
},
},
'la-gauffre': {
activated: false,
},
'home-proconnect': {
activated: false,
},
},
import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit';
const customColors = {
'primary-action': '#1212FF',
'primary-bg': '#FAFAFA',
'blue-400': '#7AB1E8',
'blue-500': '#417DC4',
'blue-600': '#3558A2',
'brown-400': '#E6BE92',
'brown-500': '#BD987A',
'brown-600': '#745B47',
'cyan-400': '#34BAB5',
'cyan-500': '#009099',
'cyan-600': '#006A6F',
'gold-400': '#FFCA00',
'gold-500': '#C3992A',
'gold-600': '#695240',
'green-400': '#34CB6A',
'green-500': '#00A95F',
'green-600': '#297254',
'olive-400': '#99C221',
'olive-500': '#68A532',
'olive-600': '#447049',
'orange-400': '#FF732C',
'orange-500': '#E4794A',
'orange-600': '#755348',
'pink-400': '#FFB7AE',
'pink-500': '#E18B76',
'pink-600': '#8D533E',
'purple-400': '#CE70CC',
'purple-500': '#A558A0',
'purple-600': '#6E445A',
'yellow-400': '#D8C634',
'yellow-500': '#B7A73F',
'yellow-600': '#66673D',
};
tokens.themes.default.theme.colors = {
...tokens.themes.default.theme.colors,
...customColors,
};
tokens.themes.default.components = {
...tokens.themes.default.components,
...{
'la-gauffre': {
activated: true,
},
dsfr: {
theme: {
colors: {
'card-border': '#E5E5E5',
'primary-text': '#000091',
'primary-100': '#ECECFE',
'primary-150': '#F4F4FD',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-700': '#272747',
'primary-800': '#000091',
'primary-900': '#21213F',
'secondary-text': '#fff',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
'secondary-400': '#e1020f',
'secondary-500': '#c91a1f',
'secondary-600': '#5e2b2b',
'secondary-700': '#3b2424',
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-text': '#303C4B',
'greyscale-000': '#fff',
'greyscale-050': '#F6F6F6',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-250': '#ddd',
'greyscale-300': '#CECECE',
'greyscale-350': '#ddd',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-750': '#353535',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#391C1C',
},
font: {
families: {
accent: 'Marianne',
base: 'Marianne',
},
},
logo: {
src: '/assets/logo-gouv.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'Gouvernement Logo',
},
},
components: {
alert: {
'border-radius': '0',
error: {
'background-color': 'var(--c--theme--colors--danger-100)',
'border-left-color': 'var(--c--theme--colors--danger-400)',
close: {
color: 'white',
'background-color': 'var(--c--theme--colors--danger-400)',
'background-color-hover': 'var(--c--theme--colors--danger-600)',
},
},
},
modal: {
'width-small': '342px',
},
button: {
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
color: 'var(--c--theme--colors--primary-text)',
'color-hover': '#1212ff',
'color-active': '#2323ff',
},
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
},
'primary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-800)',
},
secondary: {
background: {
'color-hover': '#F6F6F6',
'color-active': '#EDEDED',
},
border: {
color: 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
},
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-text)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
'background-color': 'transparent',
'background-color-hover': '#F4F4FD',
},
pagination: {
'background-color': 'transparent',
'background-color-active': 'var(--c--theme--colors--primary-300)',
'border-color': 'var(--c--theme--colors--primary-400)',
},
},
'forms-checkbox': {
'border-radius': '0',
color: 'var(--c--theme--colors--primary-text)',
text: {
color: 'var(--c--theme--colors--greyscale-text)',
size: 'var(--c--theme--font--sizes--t)',
},
},
'forms-datepicker': {
'border-radius': '0',
},
'forms-fileuploader': {
'border-radius': '0',
},
'forms-field': {
color: 'var(--c--theme--colors--primary-text)',
'footer-font-size': 'var(--c--theme--font--sizes--t)',
'footer-color': 'var(--c--theme--colors--greyscale-text)',
},
'forms-input': {
'border-radius': '4px',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
'value-color': 'var(--c--theme--colors--primary-text)',
'font-size': '14px',
},
'forms-labelledbox': {
'label-color': {
big: 'var(--c--theme--colors--primary-text)',
},
},
'forms-radio': {
'accent-color': 'var(--c--theme--colors--primary-600)',
},
'forms-select': {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'border-color-hover': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
},
'forms-switch': {
'handle-border-radius': '2px',
'rail-border-radius': '4px',
'accent-color': 'var(--c--theme--colors--primary-text)',
},
'forms-textarea': {
'border-radius': '0',
},
'la-gauffre': {
activated: true,
},
'home-proconnect': {
activated: true,
},
},
'home-proconnect': {
activated: true,
},
},
};
export default config;
export default tokens;

4
src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx
View File

@@ -1,9 +1,9 @@
import { useCunninghamTheme } from '../useCunninghamTheme';
describe('<useCunninghamTheme />', () => {
it('has the dsfr logo correctly set', () => {
it('has the logo correctly set', () => {
const { themeTokens, setTheme } = useCunninghamTheme.getState();
setTheme('dsfr');
setTheme('default');
const logo = themeTokens().logo;
expect(logo?.src).toBe('/assets/logo-gouv.svg');
expect(logo?.widthHeader).toBe('110px');

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

@@ -25,4 +25,11 @@
--c--components--forms-select--value-color--disabled: var(
--c--theme--colors--greyscale-400
);
/**
* Button
**/
--c--components--button--border-radius--active: var(
--c--components--button--border-radius
);
}

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

@@ -1,633 +0,0 @@
@import url('@openfun/cunningham-react/icons');
@import url('@openfun/cunningham-react/style');
@import url('@openfun/cunningham-react/fonts');
@import url('./cunningham-tokens.css');
@import url('./cunningham-custom-tokens.css');
@import url('../assets/fonts/Marianne/Marianne-font.css');
.c__input,
.c__field,
.c__select,
.c__datagrid {
font-family: var(--c--theme--font--families--base);
}
.c__field {
line-height: initial;
}
.c__field .c__field__footer {
padding: 2px 0 0;
font-size: var(--c--components--forms-field--footer-font-size);
color: var(--c--components--forms-field--footer-color);
}
.labelled-box label {
color: var(--c--theme--colors--primary-text);
}
.labelled-box--disabled label {
color: var(--c--components--forms-labelledbox--label-color--small-disabled);
}
.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
top: 50%;
transform: translateY(-50%);
}
/**
* Input
* TextArea
*/
.c__input__wrapper,
.c__textarea__wrapper {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
}
.c__input__wrapper:has(input[readonly]),
.c__input__wrapper:has(input[readonly]) * {
cursor: default;
}
.c__textarea__wrapper:has(input.border-none),
.c__textarea__wrapper:has(input.border-none) *,
.c__input__wrapper:has(input.border-none),
.c__input__wrapper:has(input.border-none) * {
border: none;
}
.c__input__wrapper:hover,
.c__textarea__wrapper:hover {
box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
}
.c__textarea__wrapper--disabled:hover,
.c__input__wrapper--disabled:hover,
.c__input__wrapper:hover:has(input[readonly]) {
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 0;
}
.c__input__wrapper--disabled {
color: var(--c--components--forms-input--value-color--disabled);
}
.c__input__wrapper .labelled-box__label.placeholder {
cursor: inherit;
}
.c__input__wrapper .c__input,
.c__textarea__wrapper .c__textarea {
width: 100%;
}
.c__input__wrapper--disabled .c__input {
color: var(--c--components--forms-input--value-color--disabled);
}
.c__input__wrapper--error .c__input {
color: var(--c--components--forms-input--color--error);
}
.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover {
border-color: var(--c--components--forms-input--border--color-error-hover);
color: var(--c--components--forms-input--color--error-hover);
}
.c__input__wrapper--error:hover {
box-shadow: var(--c--components--forms-input--color--box-shadow-error-hover) 0
0 0 2px;
}
.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover label {
color: var(--c--components--forms-input--border--color-error-hover);
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition:
background-color 0s 600000s,
color 0s 600000s;
}
.c__textarea__wrapper .c__textarea {
color: var(--c--components--forms-textarea--color);
}
.c__textarea__wrapper:hover {
border-color: var(--c--components--forms-textarea--border-color-hover);
}
.c__textarea__wrapper--disabled:hover {
border-color: var(
--c--components--forms-textarea--disabled--border-color-hover
);
}
/**
* Select
*/
.c_select__no_border .c__select .c__select__wrapper,
.c_select__no_border .c__select .c__select__wrapper:hover,
.c_select__no_border
.c__select:not(.c__select--disabled)
.c__select__wrapper:hover {
border: none;
box-shadow: none;
}
.c__select__wrapper {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
min-height: var(--c--components--forms-select--height);
height: auto;
}
.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
}
.c__select__wrapper:hover {
border-radius: var(--c--components--forms-select--border-radius-hover);
border-color: var(--c--components--forms-select--border-color-hover);
}
.c__select--disabled .c__select__wrapper:hover {
border-color: var(--c--components--forms-select--border-color-disabled-hover);
}
.c__select--disabled .c__select__wrapper label,
.c__select--disabled .c__select__wrapper input,
.c__select--disabled .c__select__wrapper {
cursor: not-allowed;
}
.c__select__menu__item {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
}
.c__select--disabled .c__select__wrapper label,
.c__select--disabled .c__select__wrapper input,
.c_select__no_bg .c__select__wrapper {
background: none;
}
.c__select__wrapper:focus-within .labelled-box--disabled label {
color: var(--c--components--forms-labelledbox--label-color--small-disabled);
}
.c__select__wrapper .labelled-box {
display: flex;
gap: 0.6rem;
flex-direction: column;
align-items: flex-start;
}
.c__select__wrapper .labelled-box .labelled-box__children {
padding: unset;
padding-right: 5rem;
}
.c__select__wrapper .labelled-box .c__select__inner__actions {
right: 0;
top: 50%;
position: absolute;
}
.c__select__wrapper label {
position: relative;
padding-right: 5rem;
max-width: none;
}
.c__select__wrapper .c__select__inner__actions__open:focus {
outline: none;
}
.c__select__wrapper .labelled-box__label.c__offscreen {
display: none;
}
/**
* DataGrid
*/
.c__datagrid__table__container {
overflow: auto;
}
.c__datagrid__table__container > table th .c__datagrid__header {
color: var(--c--components--datagrid--header--color);
font-weight: var(--c--components--datagrid--header--weight);
font-size: var(--c--components--datagrid--header--size);
padding-block: 2rem;
}
.c__datagrid__table__container > table tbody tr {
border: none;
border-top: 1px var(--c--theme--colors--greyscale-100) solid;
border-bottom: 1px var(--c--theme--colors--greyscale-100) solid;
}
.c__datagrid__table__container > table tbody {
background-color: var(--c--components--datagrid--body--background-color);
}
.c__datagrid__table__container > table tbody tr:hover {
background-color: var(
--c--components--datagrid--body--background-color-hover
);
}
.c__datagrid__table__container > table {
table-layout: auto;
}
.c__datagrid__table__container > table td {
white-space: break-spaces;
}
.c__datagrid__table__container > table th:first-child,
.c__datagrid__table__container > table td:first-child {
padding-left: 2rem;
}
.c__datagrid > .c__pagination {
padding-inline: 1rem;
justify-content: flex-end;
}
.c__pagination__list {
gap: 3px;
border-radius: 4px;
background: var(--c--components--datagrid--pagination--background-color);
border-color: var(--c--components--datagrid--pagination--border-color);
}
.c__pagination__list .c__button--tertiary-text.c__button--active {
background-color: var(
--c--components--datagrid--pagination--background-color-active
);
color: var(--c--theme--colors--greyscale-800);
}
.c__pagination__list .c__button--tertiary-text:disabled {
display: none;
}
@media (width <= 380px) {
.c__datagrid > .c__pagination {
flex-direction: column;
align-items: center;
gap: 1rem;
}
}
/**
* Date picker
*/
.c__popover.c__popover--borderless {
z-index: 3;
}
.c__date-picker__wrapper {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
}
.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 2px;
}
.c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover
.c__date-picker__wrapper {
box-shadow: var(--c--theme--colors--danger-300) 0 0 0 2px;
}
.c__date-picker__wrapper button[aria-label='Clear date'],
.c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * {
color: var(--c--theme--colors--danger-300);
}
/**
* Checkbox
*/
.c__checkbox:focus-within {
border-color: transparent;
background-color: transparent;
}
.c__checkbox {
transition: all 0.8s ease-in-out;
}
.c__checkbox .c__field__text {
color: var(--c--components--forms-checkbox--text--color);
font-size: var(--c--components--forms-checkbox--text--size);
}
.c__checkbox.c__checkbox--disabled .c__field__text {
color: var(--c--theme--colors--greyscale-600);
}
.c__switch.c__checkbox--disabled .c__switch__rail {
cursor: not-allowed;
}
.c__checkbox.c__checkbox--disabled .c__checkbox__label {
color: var(--c--theme--colors--greyscale-400);
}
/**
* Button
*/
.c__button {
text-decoration: none;
}
.c__button:hover.c__button-no-bg,
.c__button.c__button-no-bg,
.c__button:disabled.c__button-no-bg {
background-color: transparent;
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--3xs);
gap: var(--c--theme--spacings--3xs);
}
.c__button--nano.c__button--icon-only {
width: auto;
}
.c__button--nano.c__button--icon-only.c__button--full-width {
width: 100%;
}
.c__button--medium {
height: auto;
min-height: var(--c--components--button--medium-height);
}
.c__button--small {
padding: 0.6rem 0.75rem;
}
.c__button--with-icon--right {
padding: 0.7rem var(--c--theme--spacings--t) 0.7rem
var(--c--theme--spacings--s);
}
.c__button--primary {
background-color: var(--c--components--button--primary--background--color);
color: var(--c--components--button--primary--color);
}
.c__button--primary:hover {
background-color: var(
--c--components--button--primary--background--color-hover
);
color: var(--c--components--button--primary--color-hover);
}
.c__button--primary:active,
.c__button--primary.c__button--active {
background-color: var(
--c--components--button--primary--background--color-active
);
color: var(--c--components--button--primary--color-active);
border-color: var(--c--components--button--primary--border--color-active);
}
.c__button--primary-text:active,
.c__button--primary-text.c__button--active {
border: none;
background-color: var(
--c--components--button--primary-text--background--color-active
);
}
.c__button--primary-text {
color: var(--c--components--button--primary-text--color);
}
.c__button--primary-text:hover,
.c__button--primary-text:focus-visible {
background-color: var(
--c--components--button--primary-text--background--color-hover
);
color: var(--c--components--button--primary-text--color-hover);
}
.c__button:disabled {
background-color: var(--c--components--button--disabled--background--color);
color: var(--c--components--button--disabled--color);
}
.c__button--success {
background-color: var(--c--components--button--success--background--color);
color: var(--c--components--button--success--color);
}
.c__button--success:hover,
.c__button--success:focus-visible {
background-color: var(
--c--components--button--success--background--color-hover
);
color: var(--c--components--button--success--color-hover);
}
.c__button--success:disabled {
background-color: var(
--c--components--button--success--background--color-disabled
);
color: var(--c--components--button--success--color-disabled);
}
.c__button--secondary {
background-color: var(--c--components--button--secondary--background--color);
color: var(--c--components--button--secondary--color);
border: 1px solid var(--c--components--button--secondary--border--color);
}
.c__button--secondary:hover,
.c__button--secondary:focus-visible {
background-color: var(
--c--components--button--secondary--background--color-hover
);
color: var(--c--components--button--secondary--color-hover);
border: 1px solid var(--c--components--button--secondary--border--color-hover);
}
.c__button--tertiary {
background-color: var(--c--components--button--tertiary--background--color);
color: var(--c--components--button--tertiary--color);
border: none;
}
.c__button--tertiary:hover,
.c__button--tertiary:focus-visible {
background-color: var(
--c--components--button--tertiary--background--color-hover
);
color: var(--c--components--button--tertiary--color);
}
.c__button--tertiary:active {
background-color: var(
--c--components--button--tertiary--background--color-active
);
color: var(--c--components--button--tertiary--color-active);
}
.c__button--tertiary:disabled {
background-color: var(
--c--components--button--tertiary--background--color-disabled
);
color: var(--c--components--button--tertiary--color-disabled);
}
.c__button--tertiary-text {
border: none;
color: var(--c--components--button--tertiary-text--color);
}
.c__button--tertiary-text:hover,
.c__button--tertiary-text:focus-visible {
background-color: var(
--c--components--button--tertiary-text--background--color-hover
);
color: var(--c--components--button--tertiary-text--color-hover);
}
.c__button--tertiary-text:disabled {
background-color: var(
--c--components--button--tertiary-text--background--color-disabled
);
color: var(--c--components--button--tertiary-text--color-disabled);
}
.c__button--danger {
background-color: var(--c--components--button--danger--background--color);
}
.c__button--danger:hover,
.c__button--danger:focus-visible {
background-color: var(
--c--components--button--danger--background--color-hover
);
color: var(--c--components--button--danger--color-hover);
}
.c__button--danger:disabled {
background-color: var(
--c--components--button--danger--background--color-disabled
);
}
/**
* Modal
*/
.c__modal__backdrop {
z-index: 1000;
}
.c__modal__close .c__button--tertiary-text:hover,
.c__modal__close .c__button--tertiary-text:focus-visible {
box-shadow: none;
}
.c__modal__close button {
padding: 0;
font-size: 88px;
width: 28px !important;
height: 28px;
}
.c__modal__close button .material-icons {
padding: 0;
font-size: 24px;
color: var(--c--theme--colors--greyscale-600);
}
.c__modal__close .c__button {
padding: 0 !important;
top: -0.65rem;
right: -0.65rem;
}
.c__modal--full .c__modal__content {
overflow-y: auto;
}
.c__modal__title {
padding: 0;
font-size: 1.125rem;
margin-bottom: var(--c--theme--spacings--2xs);
}
@media screen and (width <= 420px) {
.c__modal__scroller {
padding: 0.7rem;
}
.c__modal__title h2 {
font-size: 1rem;
}
}
@media (width <= 576px) {
.c__modal__footer--sided {
gap: 0.5rem;
flex-direction: column-reverse;
}
}
.c__modal__scroller:has(.noPadding) {
padding: 0 !important;
.c__modal__close .c__button {
right: 5px;
top: 5px;
padding: 1.5rem 1rem;
}
.c__modal__title {
font-size: var(--c--theme--font--sizes--xs);
padding: var(--c--theme--spacings--base);
margin-bottom: 0;
}
}
/**
* Toast
*/
.c__toast__container {
z-index: 10000;
}
/**
* Tooltip
*/
.c__tooltip {
padding: 4px 6px;
}
/**
* Alert
*/
.c__alert--error {
background-color: var(--c--components--alert--error--background-color);
border-left-color: var(--c--components--alert--error--border-left-color);
}
.c__alert--error .c__button--tertiary {
background-color: var(--c--components--alert--error--close--background-color);
color: var(--c--components--alert--error--close--color);
}
.c__alert.c__alert--error .c__button--tertiary:hover {
background-color: var(
--c--components--alert--error--close--background-color-hover
);
}

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

@@ -1,82 +1,85 @@
:root {
--c--theme--colors--secondary-text: var(--c--theme--colors--greyscale-700);
--c--theme--colors--secondary-100: #f2f7fc;
--c--theme--colors--secondary-200: #ebf3fa;
--c--theme--colors--secondary-300: #e2eef8;
--c--theme--colors--secondary-400: #ddeaf7;
--c--theme--colors--secondary-500: #d4e5f5;
--c--theme--colors--secondary-600: #c1d0df;
--c--theme--colors--secondary-700: #97a3ae;
--c--theme--colors--secondary-800: #757e87;
--c--theme--colors--secondary-900: #596067;
--c--theme--colors--info-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--info-100: #ebf2fc;
--c--theme--colors--info-200: #8cb5ea;
--c--theme--colors--info-300: #5894e1;
--c--theme--colors--info-400: #377fdb;
--c--theme--colors--info-500: #055fd2;
--c--theme--colors--info-600: #0556bf;
--c--theme--colors--info-700: #044395;
--c--theme--colors--info-800: #033474;
--c--theme--colors--info-900: #022858;
--c--theme--colors--greyscale-100: #fafafb;
--c--theme--colors--greyscale-200: #f3f4f4;
--c--theme--colors--greyscale-300: #e7e8ea;
--c--theme--colors--greyscale-400: #c2c6ca;
--c--theme--colors--greyscale-500: #9ea3aa;
--c--theme--colors--greyscale-600: #79818a;
--c--theme--colors--greyscale-700: #555f6b;
--c--theme--colors--greyscale-800: #303c4b;
--c--theme--colors--greyscale-900: #0c1a2b;
--c--theme--colors--secondary-text: #fff;
--c--theme--colors--secondary-100: #fee9ea;
--c--theme--colors--secondary-200: #fedfdf;
--c--theme--colors--secondary-300: #fdbfbf;
--c--theme--colors--secondary-400: #e1020f;
--c--theme--colors--secondary-500: #c91a1f;
--c--theme--colors--secondary-600: #5e2b2b;
--c--theme--colors--secondary-700: #3b2424;
--c--theme--colors--secondary-800: #341f1f;
--c--theme--colors--secondary-900: #2b1919;
--c--theme--colors--info-text: #0078f3;
--c--theme--colors--info-100: #e8edff;
--c--theme--colors--info-200: #dde5ff;
--c--theme--colors--info-300: #bccdff;
--c--theme--colors--info-400: #518fff;
--c--theme--colors--info-500: #0078f3;
--c--theme--colors--info-600: #0063cb;
--c--theme--colors--info-700: #273961;
--c--theme--colors--info-800: #222a3f;
--c--theme--colors--info-900: #1d2437;
--c--theme--colors--greyscale-100: #eee;
--c--theme--colors--greyscale-200: #e5e5e5;
--c--theme--colors--greyscale-300: #cecece;
--c--theme--colors--greyscale-400: #929292;
--c--theme--colors--greyscale-500: #7c7c7c;
--c--theme--colors--greyscale-600: #666;
--c--theme--colors--greyscale-700: #3a3a3a;
--c--theme--colors--greyscale-800: #2a2a2a;
--c--theme--colors--greyscale-900: #242424;
--c--theme--colors--greyscale-000: #fff;
--c--theme--colors--primary-100: #edf5fa;
--c--theme--colors--primary-200: #8cb5ea;
--c--theme--colors--primary-300: #5894e1;
--c--theme--colors--primary-400: #377fdb;
--c--theme--colors--primary-500: #055fd2;
--c--theme--colors--primary-600: #0556bf;
--c--theme--colors--primary-700: #044395;
--c--theme--colors--primary-800: #033474;
--c--theme--colors--primary-900: #022858;
--c--theme--colors--success-100: #effcd3;
--c--theme--colors--success-200: #dbfaa9;
--c--theme--colors--success-300: #bef27c;
--c--theme--colors--success-400: #a0e659;
--c--theme--colors--success-500: #76d628;
--c--theme--colors--success-600: #5ab81d;
--c--theme--colors--success-700: #419a14;
--c--theme--colors--success-800: #2c7c0c;
--c--theme--colors--success-900: #1d6607;
--c--theme--colors--warning-100: #fff8cd;
--c--theme--colors--warning-200: #ffef9b;
--c--theme--colors--warning-300: #ffe469;
--c--theme--colors--warning-400: #ffda43;
--c--theme--colors--warning-500: #ffc805;
--c--theme--colors--warning-600: #dba603;
--c--theme--colors--warning-700: #b78702;
--c--theme--colors--warning-800: #936901;
--c--theme--colors--warning-900: #7a5400;
--c--theme--colors--danger-100: #f4b0b0;
--c--theme--colors--danger-200: #ee8a8a;
--c--theme--colors--danger-300: #e65454;
--c--theme--colors--danger-400: #e13333;
--c--theme--colors--danger-500: #da0000;
--c--theme--colors--danger-600: #c60000;
--c--theme--colors--danger-700: #9b0000;
--c--theme--colors--danger-800: #780000;
--c--theme--colors--danger-900: #5c0000;
--c--theme--colors--primary-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--success-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-bg: #fafafa;
--c--theme--colors--primary-action: #1212ff;
--c--theme--colors--primary-100: #ececfe;
--c--theme--colors--primary-200: #e3e3fd;
--c--theme--colors--primary-300: #cacafb;
--c--theme--colors--primary-400: #8585f6;
--c--theme--colors--primary-500: #6a6af4;
--c--theme--colors--primary-600: #313178;
--c--theme--colors--primary-700: #272747;
--c--theme--colors--primary-800: #000091;
--c--theme--colors--primary-900: #21213f;
--c--theme--colors--success-100: #dffee6;
--c--theme--colors--success-200: #b8fec9;
--c--theme--colors--success-300: #88fdaa;
--c--theme--colors--success-400: #3bea7e;
--c--theme--colors--success-500: #1f8d49;
--c--theme--colors--success-600: #18753c;
--c--theme--colors--success-700: #204129;
--c--theme--colors--success-800: #1e2e22;
--c--theme--colors--success-900: #19281d;
--c--theme--colors--warning-100: #fff4f3;
--c--theme--colors--warning-200: #ffe9e6;
--c--theme--colors--warning-300: #ffded9;
--c--theme--colors--warning-400: #ffbeb4;
--c--theme--colors--warning-500: #d64d00;
--c--theme--colors--warning-600: #b34000;
--c--theme--colors--warning-700: #5e2c21;
--c--theme--colors--warning-800: #3e241e;
--c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-100: #ffe9e9;
--c--theme--colors--danger-200: #fdd;
--c--theme--colors--danger-300: #ffbdbd;
--c--theme--colors--danger-400: #ff5655;
--c--theme--colors--danger-500: #f60700;
--c--theme--colors--danger-600: #ce0500;
--c--theme--colors--danger-700: #642626;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #391c1c;
--c--theme--colors--primary-text: #000091;
--c--theme--colors--success-text: #1f8d49;
--c--theme--colors--warning-text: #d64d00;
--c--theme--colors--danger-text: #fff;
--c--theme--colors--primary-050: #f5f5fe;
--c--theme--colors--primary-150: #e5eefa;
--c--theme--colors--primary-950: #1b1b35;
--c--theme--colors--info-150: #e5eefa;
--c--theme--colors--primary-150: #f4f4fd;
--c--theme--colors--greyscale-text: #303c4b;
--c--theme--colors--greyscale-050: #f6f6f6;
--c--theme--colors--greyscale-250: #ddd;
--c--theme--colors--greyscale-350: #ddd;
--c--theme--colors--greyscale-750: #353535;
--c--theme--colors--greyscale-950: #1e1e1e;
--c--theme--colors--greyscale-1000: #161616;
--c--theme--colors--primary-action: #1212ff;
--c--theme--colors--primary-bg: #fafafa;
--c--theme--colors--blue-400: #7ab1e8;
--c--theme--colors--blue-500: #417dc4;
--c--theme--colors--blue-600: #3558a2;
@@ -135,8 +138,8 @@
--c--theme--font--weights--bold: 600;
--c--theme--font--weights--extrabold: 800;
--c--theme--font--weights--black: 900;
--c--theme--font--families--base: 'Roboto Flex Variable', sans-serif;
--c--theme--font--families--accent: 'Roboto Flex Variable', sans-serif;
--c--theme--font--families--base: marianne;
--c--theme--font--families--accent: marianne;
--c--theme--font--letterspacings--h1: normal;
--c--theme--font--letterspacings--h2: normal;
--c--theme--font--letterspacings--h3: normal;
@@ -182,170 +185,271 @@
--c--theme--breakpoints--xl: 1200px;
--c--theme--breakpoints--xxl: 1400px;
--c--theme--breakpoints--xxs: 320px;
--c--theme--logo--src: ;
--c--theme--logo--widthheader: ;
--c--theme--logo--widthfooter: ;
--c--theme--logo--alt: ;
--c--components--datagrid--header--weight: var(
--c--theme--font--weights--extrabold
);
--c--components--datagrid--header--size: var(--c--theme--font--sizes--ml);
--c--components--datagrid--cell--color: var(--c--theme--colors--primary-500);
--c--components--datagrid--cell--size: var(--c--theme--font--sizes--ml);
--c--components--forms-checkbox--background-color--hover: #055fd214;
--c--components--forms-checkbox--color: var(--c--theme--colors--primary-500);
--c--components--forms-checkbox--font-size: var(--c--theme--font--sizes--ml);
--c--components--forms-datepicker--border-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-datepicker--value-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-datepicker--border-radius--hover: var(
--c--components--forms-datepicker--border-radius
);
--c--components--forms-datepicker--border-radius--focus: var(
--c--components--forms-datepicker--border-radius
);
--c--components--forms-field--color: var(--c--theme--colors--primary-500);
--c--components--forms-field--value-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-field--width: auto;
--c--components--forms-input--value-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-input--border-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-input--color--error: var(
--c--theme--colors--danger-500
);
--c--components--forms-input--color--error-hover: var(
--c--theme--colors--danger-500
);
--c--components--forms-input--color--box-shadow-error-hover: var(
--c--theme--colors--danger-500
);
--c--components--forms-labelledbox--label-color--small: var(
--c--theme--colors--primary-500
);
--c--components--forms-labelledbox--label-color--small-disabled: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-labelledbox--label-color--big--disabled: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-select--border-color: var(
--c--theme--colors--primary-500
);
--c--components--forms-select--border-color-disabled-hover: var(
--c--theme--colors--greyscale-200
);
--c--components--forms-select--border-radius--hover: var(
--c--components--forms-select--border-radius
);
--c--components--forms-select--border-radius--focus: var(
--c--components--forms-select--border-radius
);
--c--components--forms-select--font-size: var(--c--theme--font--sizes--ml);
--c--components--forms-select--menu-background-color: #fff;
--c--components--forms-select--item-background-color--hover: var(
--c--theme--colors--primary-300
);
--c--components--forms-switch--accent-color: var(
--c--theme--colors--primary-400
);
--c--components--forms-textarea--border-color: var(
--c--components--forms-textarea--border-color
);
--c--components--forms-textarea--border-color-hover: var(
--c--components--forms-textarea--border-color
);
--c--components--forms-textarea--border-radius--hover: var(
--c--components--forms-textarea--border-radius
);
--c--components--forms-textarea--border-radius--focus: var(
--c--components--forms-textarea--border-radius
);
--c--components--forms-textarea--color: var(--c--theme--colors--primary-500);
--c--components--forms-textarea--disabled--border-color-hover: var(
--c--theme--colors--greyscale-200
);
--c--components--modal--background-color: #fff;
--c--components--button--border-radius--active: var(
--c--components--button--border-radius
);
--c--components--button--medium-height: auto;
--c--components--button--small-height: auto;
--c--components--button--success--color: white;
--c--components--button--success--color-disabled: white;
--c--components--button--success--color-hover: white;
--c--components--button--success--background--color: var(
--c--theme--colors--success-600
);
--c--components--button--success--background--color-disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--button--success--background--color-hover: var(
--c--theme--colors--success-800
);
--c--components--button--danger--color-hover: white;
--c--components--button--danger--background--color: var(
--c--theme--colors--danger-600
);
--c--components--button--danger--background--color-hover: #ff2725;
--c--components--button--danger--background--color-disabled: var(
--c--theme--colors--danger-100
);
--c--components--button--primary--color: var(
--c--theme--colors--primary-text
);
--c--components--button--primary--color-active: var(
--c--theme--colors--primary-text
);
--c--theme--breakpoints--mobile: 768px;
--c--theme--breakpoints--tablet: 1024px;
--c--theme--logo--src: /assets/logo-gouv.svg;
--c--theme--logo--widthheader: 110px;
--c--theme--logo--widthfooter: 220px;
--c--theme--logo--alt: gouvernement logo;
--c--components--modal--width-small: 342px;
--c--components--button--medium-height: 40px;
--c--components--button--medium-text-height: 40px;
--c--components--button--border-radius: 4px;
--c--components--button--small-height: 26px;
--c--components--button--primary--background--color: var(
--c--theme--colors--primary-400
);
--c--components--button--primary--background--color-active: var(
--c--theme--colors--primary-500
);
--c--components--button--primary--border--color-active: transparent;
--c--components--button--secondary--color: var(
--c--theme--colors--primary-500
);
--c--components--button--secondary--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--button--secondary--background--color: white;
--c--components--button--secondary--background--color-hover: var(
--c--theme--colors--primary-700
--c--components--button--primary--background--color-hover: #1212ff;
--c--components--button--primary--background--color-active: #2323ff;
--c--components--button--primary--background--color-disabled: var(
--c--theme--colors--greyscale-100
);
--c--components--button--primary--color: #fff;
--c--components--button--primary--color-hover: #fff;
--c--components--button--primary--color-active: #fff;
--c--components--button--primary--color-focus-visible: #fff;
--c--components--button--primary--disabled: var(
--c--theme--colors--greyscale-500
);
--c--components--button--primary-text--background--color: var(
--c--theme--colors--primary-text
);
--c--components--button--primary-text--background--color-hover: var(
--c--theme--colors--greyscale-100
);
--c--components--button--primary-text--background--color-active: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--background--color-focus-visible: #fff;
--c--components--button--primary-text--background--color-disabled: var(
--c--theme--colors--greyscale-000
);
--c--components--button--primary-text--color: var(
--c--theme--colors--primary-800
);
--c--components--button--primary-text--color-hover: var(
--c--theme--colors--primary-800
);
--c--components--button--primary-text--disabled: var(
--c--theme--colors--greyscale-400
);
--c--components--button--secondary--background--color-hover: #f6f6f6;
--c--components--button--secondary--background--color-active: #ededed;
--c--components--button--secondary--background--color-focus-visible: var(
--c--theme--colors--greyscale-000
);
--c--components--button--secondary--background--disabled: var(
--c--theme--colors--greyscale-000
);
--c--components--button--secondary--color: var(
--c--theme--colors--primary-800
);
--c--components--button--secondary--border--color: var(
--c--theme--colors--greyscale-300
);
--c--components--button--tertiary--color: var(
--c--theme--colors--primary-text
--c--components--button--secondary--border--color-hover: var(
--c--theme--colors--greyscale-300
);
--c--components--button--tertiary--color-disabled: var(
--c--theme--colors--greyscale-600
--c--components--button--secondary--border--color-disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--button--secondary--disabled: var(
--c--theme--colors--greyscale-400
);
--c--components--button--tertiary--background--color: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary--background--color-focus-visible: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary--background--color-hover: var(
--c--theme--colors--primary-300
);
--c--components--button--tertiary--background--color-active: var(
--c--theme--colors--primary-100
--c--theme--colors--primary-300
);
--c--components--button--tertiary--background--color-disabled: var(
--c--components--button--tertiary--background--disabled: var(
--c--theme--colors--primary-050
);
--c--components--button--tertiary--color: var(
--c--theme--colors--primary-800
);
--c--components--button--tertiary--disabled: var(
--c--theme--colors--primary-300
);
--c--components--button--tertiary-text--background--color-hover: var(
--c--theme--colors--greyscale-100
);
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--button--tertiary-text--color: var(
--c--theme--colors--primary-600
);
--c--components--button--danger--color-hover: white;
--c--components--button--danger--background--color: var(
--c--theme--colors--danger-600
);
--c--components--button--danger--background--color-hover: #ff2725;
--c--components--button--danger--background--color-focus-visible: var(
--c--theme--colors--danger-600
);
--c--components--button--danger--background--color-disabled: var(
--c--theme--colors--greyscale-100
);
--c--components--button--danger--color-disabled: var(
--c--theme--colors--greyscale-400
);
--c--components--datagrid--header--color: var(
--c--theme--colors--greyscale-600
);
--c--components--datagrid--header--size: 12px;
--c--components--datagrid--header--weight: 500;
--c--components--datagrid--body--background-color-hover: var(
--c--theme--colors--greyscale-100
);
--c--components--forms-checkbox--border-radius: 4px;
--c--components--forms-checkbox--border-color: var(
--c--theme--colors--primary-800
);
--c--components--forms-checkbox--background-color--hover: var(
--c--theme--colors--greyscale-100
);
--c--components--forms-checkbox--border--color-disabled: var(
--c--theme--colors--greyscale-200
);
--c--components--button--disabled--color: white;
--c--components--button--disabled--background--color: #b3cef0;
--c--components--la-gauffre--activated: false;
--c--components--home-proconnect--activated: false;
--c--components--forms-checkbox--border--color: var(
--c--theme--colors--primary-800
);
--c--components--forms-checkbox--background--disabled: var(
--c--theme--colors--greyscale-200
);
--c--components--forms-checkbox--background--enable: var(
--c--theme--colors--primary-800
);
--c--components--forms-checkbox--check--disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-checkbox--check--enable: var(
--c--theme--colors--greyscale-000
);
--c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
--c--components--forms-checkbox--label--color: var(
--c--theme--colors--greyscale-1000
);
--c--components--forms-checkbox--label--size: var(
--c--theme--font--sizes--sm
);
--c--components--forms-checkbox--label--weight: 500;
--c--components--forms-checkbox--text--color: var(
--c--theme--colors--greyscale-600
);
--c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--s);
--c--components--forms-checkbox--text--weight: 400;
--c--components--forms-checkbox--text--color-disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-labelledbox--label-color--small: var(
--c--theme--colors--greyscale-950
);
--c--components--forms-labelledbox--label-color--small--disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-labelledbox--label-color--big: var(
--c--theme--colors--greyscale-950
);
--c--components--forms-labelledbox--label-color--big--disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-radio--border-color: var(
--c--theme--colors--primary-800
);
--c--components--forms-radio--background-color: var(
--c--theme--colors--greyscale-000
);
--c--components--forms-radio--accent-color: var(
--c--theme--colors--primary-800
);
--c--components--forms-radio--accent-color-disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-switch--border--color-disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-switch--border--color: var(
--c--theme--colors--primary-800
);
--c--components--forms-switch--handle-background-color: white;
--c--components--forms-switch--handle-background-color--disabled: var(
--c--theme--colors--greyscale-000
);
--c--components--forms-switch--rail-background-color--disabled: var(
--c--theme--colors--greyscale-000
);
--c--components--forms-switch--accent-color: var(
--c--theme--colors--primary-800
);
--c--components--forms-textarea--label-color--focus: var(
--c--theme--colors--greyscale-1000
);
--c--components--forms-textarea--border-radius: 4px;
--c--components--forms-textarea--border-color: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-textarea--box-shadow--color--hover: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-textarea--box-shadow--color--focus: var(
--c--theme--colors--primary-800
);
--c--components--forms-textarea--value-color: var(
--c--theme--colors--greyscale-950
);
--c--components--forms-textarea--value-color--disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-textarea--font-size: 14px;
--c--components--forms-input--label-color--focus: var(
--c--theme--colors--greyscale-1000
);
--c--components--forms-input--border-radius: 4px;
--c--components--forms-input--border-color: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-input--box-shadow--color--hover: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-input--box-shadow--color--focus: var(
--c--theme--colors--primary-800
);
--c--components--forms-input--value-color: var(
--c--theme--colors--greyscale-950
);
--c--components--forms-input--value-color--disabled: var(
--c--theme--colors--greyscale-300
);
--c--components--forms-input--font-size: 14px;
--c--components--forms-select--label-color--focus: var(
--c--theme--colors--greyscale-1000
);
--c--components--forms-select--item-font-size: 14px;
--c--components--forms-select--border-radius: 4px;
--c--components--forms-select--border-radius-hover: 4px;
--c--components--forms-select--border-color: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-select--box-shadow--color--hover: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-select--box-shadow--color--focus: var(
--c--theme--colors--primary-800
);
--c--components--forms-select--value-color: var(
--c--theme--colors--greyscale-950
);
--c--components--forms-select--font-size: 14px;
--c--components--la-gauffre--activated: true;
--c--components--home-proconnect--activated: true;
}
.cunningham-theme--dark {
@@ -397,219 +501,6 @@
--c--theme--colors--danger-900: #9d6666;
}
.cunningham-theme--dsfr {
--c--theme--colors--card-border: #e5e5e5;
--c--theme--colors--primary-text: #000091;
--c--theme--colors--primary-100: #ececfe;
--c--theme--colors--primary-150: #f4f4fd;
--c--theme--colors--primary-200: #e3e3fd;
--c--theme--colors--primary-300: #cacafb;
--c--theme--colors--primary-400: #8585f6;
--c--theme--colors--primary-500: #6a6af4;
--c--theme--colors--primary-600: #313178;
--c--theme--colors--primary-700: #272747;
--c--theme--colors--primary-800: #000091;
--c--theme--colors--primary-900: #21213f;
--c--theme--colors--secondary-text: #fff;
--c--theme--colors--secondary-100: #fee9ea;
--c--theme--colors--secondary-200: #fedfdf;
--c--theme--colors--secondary-300: #fdbfbf;
--c--theme--colors--secondary-400: #e1020f;
--c--theme--colors--secondary-500: #c91a1f;
--c--theme--colors--secondary-600: #5e2b2b;
--c--theme--colors--secondary-700: #3b2424;
--c--theme--colors--secondary-800: #341f1f;
--c--theme--colors--secondary-900: #2b1919;
--c--theme--colors--greyscale-text: #303c4b;
--c--theme--colors--greyscale-000: #fff;
--c--theme--colors--greyscale-050: #f6f6f6;
--c--theme--colors--greyscale-100: #eee;
--c--theme--colors--greyscale-200: #e5e5e5;
--c--theme--colors--greyscale-250: #ddd;
--c--theme--colors--greyscale-300: #cecece;
--c--theme--colors--greyscale-350: #ddd;
--c--theme--colors--greyscale-400: #929292;
--c--theme--colors--greyscale-500: #7c7c7c;
--c--theme--colors--greyscale-600: #666;
--c--theme--colors--greyscale-700: #3a3a3a;
--c--theme--colors--greyscale-750: #353535;
--c--theme--colors--greyscale-800: #2a2a2a;
--c--theme--colors--greyscale-900: #242424;
--c--theme--colors--greyscale-950: #1e1e1e;
--c--theme--colors--greyscale-1000: #161616;
--c--theme--colors--success-text: #1f8d49;
--c--theme--colors--success-100: #dffee6;
--c--theme--colors--success-200: #b8fec9;
--c--theme--colors--success-300: #88fdaa;
--c--theme--colors--success-400: #3bea7e;
--c--theme--colors--success-500: #1f8d49;
--c--theme--colors--success-600: #18753c;
--c--theme--colors--success-700: #204129;
--c--theme--colors--success-800: #1e2e22;
--c--theme--colors--success-900: #19281d;
--c--theme--colors--info-text: #0078f3;
--c--theme--colors--info-100: #e8edff;
--c--theme--colors--info-200: #dde5ff;
--c--theme--colors--info-300: #bccdff;
--c--theme--colors--info-400: #518fff;
--c--theme--colors--info-500: #0078f3;
--c--theme--colors--info-600: #0063cb;
--c--theme--colors--info-700: #273961;
--c--theme--colors--info-800: #222a3f;
--c--theme--colors--info-900: #1d2437;
--c--theme--colors--warning-text: #d64d00;
--c--theme--colors--warning-100: #fff4f3;
--c--theme--colors--warning-200: #ffe9e6;
--c--theme--colors--warning-300: #ffded9;
--c--theme--colors--warning-400: #ffbeb4;
--c--theme--colors--warning-500: #d64d00;
--c--theme--colors--warning-600: #b34000;
--c--theme--colors--warning-700: #5e2c21;
--c--theme--colors--warning-800: #3e241e;
--c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-text: #fff;
--c--theme--colors--danger-100: #ffe9e9;
--c--theme--colors--danger-200: #fdd;
--c--theme--colors--danger-300: #ffbdbd;
--c--theme--colors--danger-400: #ff5655;
--c--theme--colors--danger-500: #f60700;
--c--theme--colors--danger-600: #ce0500;
--c--theme--colors--danger-700: #642626;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #391c1c;
--c--theme--font--families--accent: marianne;
--c--theme--font--families--base: marianne;
--c--theme--logo--src: /assets/logo-gouv.svg;
--c--theme--logo--widthHeader: 110px;
--c--theme--logo--widthFooter: 220px;
--c--theme--logo--alt: gouvernement logo;
--c--components--alert--border-radius: 0;
--c--components--alert--error--background-color: var(
--c--theme--colors--danger-100
);
--c--components--alert--error--border-left-color: var(
--c--theme--colors--danger-400
);
--c--components--alert--error--close--color: white;
--c--components--alert--error--close--background-color: var(
--c--theme--colors--danger-400
);
--c--components--alert--error--close--background-color-hover: var(
--c--theme--colors--danger-600
);
--c--components--modal--width-small: 342px;
--c--components--button--medium-height: 40px;
--c--components--button--medium-text-height: 40px;
--c--components--button--border-radius: 4px;
--c--components--button--primary--background--color: var(
--c--theme--colors--primary-text
);
--c--components--button--primary--background--color-hover: #1212ff;
--c--components--button--primary--background--color-active: #2323ff;
--c--components--button--primary--color: #fff;
--c--components--button--primary--color-hover: #fff;
--c--components--button--primary--color-active: #fff;
--c--components--button--primary-text--background--color-hover: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--background--color-active: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--button--primary-text--color: var(
--c--theme--colors--primary-800
);
--c--components--button--secondary--background--color-hover: #f6f6f6;
--c--components--button--secondary--background--color-active: #ededed;
--c--components--button--secondary--border--color: var(
--c--theme--colors--greyscale-300
);
--c--components--button--secondary--border--color-hover: var(
--c--theme--colors--greyscale-300
);
--c--components--button--secondary--color: var(
--c--theme--colors--primary-text
);
--c--components--button--tertiary-text--background--color-hover: var(
--c--theme--colors--greyscale-100
);
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--button--tertiary-text--color: var(
--c--theme--colors--primary-600
);
--c--components--datagrid--header--color: var(
--c--theme--colors--primary-text
);
--c--components--datagrid--header--size: var(--c--theme--font--sizes--s);
--c--components--datagrid--body--background-color: transparent;
--c--components--datagrid--body--background-color-hover: #f4f4fd;
--c--components--datagrid--pagination--background-color: transparent;
--c--components--datagrid--pagination--background-color-active: var(
--c--theme--colors--primary-300
);
--c--components--datagrid--pagination--border-color: var(
--c--theme--colors--primary-400
);
--c--components--forms-checkbox--border-radius: 0;
--c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
--c--components--forms-checkbox--text--color: var(
--c--theme--colors--greyscale-text
);
--c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--t);
--c--components--forms-datepicker--border-radius: 0;
--c--components--forms-fileuploader--border-radius: 0;
--c--components--forms-field--color: var(--c--theme--colors--primary-text);
--c--components--forms-field--footer-font-size: var(
--c--theme--font--sizes--t
);
--c--components--forms-field--footer-color: var(
--c--theme--colors--greyscale-text
);
--c--components--forms-input--border-radius: 4px;
--c--components--forms-input--background-color: #fff;
--c--components--forms-input--border-color: var(
--c--theme--colors--primary-text
);
--c--components--forms-input--box-shadow-color: var(
--c--theme--colors--primary-text
);
--c--components--forms-input--value-color: var(
--c--theme--colors--primary-text
);
--c--components--forms-input--font-size: 14px;
--c--components--forms-labelledbox--label-color--big: var(
--c--theme--colors--primary-text
);
--c--components--forms-radio--accent-color: var(
--c--theme--colors--primary-600
);
--c--components--forms-select--item-font-size: 14px;
--c--components--forms-select--border-radius: 4px;
--c--components--forms-select--border-radius-hover: 4px;
--c--components--forms-select--background-color: #fff;
--c--components--forms-select--border-color: var(
--c--theme--colors--primary-text
);
--c--components--forms-select--border-color-hover: var(
--c--theme--colors--primary-text
);
--c--components--forms-select--box-shadow-color: var(
--c--theme--colors--primary-text
);
--c--components--forms-switch--handle-border-radius: 2px;
--c--components--forms-switch--rail-border-radius: 4px;
--c--components--forms-switch--accent-color: var(
--c--theme--colors--primary-text
);
--c--components--forms-textarea--border-radius: 0;
--c--components--la-gauffre--activated: true;
--c--components--home-proconnect--activated: true;
}
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);
}
@@ -890,18 +781,6 @@
color: var(--c--theme--colors--danger-text);
}
.clr-card-border {
color: var(--c--theme--colors--card-border);
}
.clr-primary-bg {
color: var(--c--theme--colors--primary-bg);
}
.clr-primary-action {
color: var(--c--theme--colors--primary-action);
}
.clr-primary-050 {
color: var(--c--theme--colors--primary-050);
}
@@ -910,18 +789,42 @@
color: var(--c--theme--colors--primary-150);
}
.clr-primary-950 {
color: var(--c--theme--colors--primary-950);
.clr-greyscale-text {
color: var(--c--theme--colors--greyscale-text);
}
.clr-info-150 {
color: var(--c--theme--colors--info-150);
.clr-greyscale-050 {
color: var(--c--theme--colors--greyscale-050);
}
.clr-greyscale-250 {
color: var(--c--theme--colors--greyscale-250);
}
.clr-greyscale-350 {
color: var(--c--theme--colors--greyscale-350);
}
.clr-greyscale-750 {
color: var(--c--theme--colors--greyscale-750);
}
.clr-greyscale-950 {
color: var(--c--theme--colors--greyscale-950);
}
.clr-greyscale-1000 {
color: var(--c--theme--colors--greyscale-1000);
}
.clr-primary-action {
color: var(--c--theme--colors--primary-action);
}
.clr-primary-bg {
color: var(--c--theme--colors--primary-bg);
}
.clr-blue-400 {
color: var(--c--theme--colors--blue-400);
}
@@ -1322,18 +1225,6 @@
background-color: var(--c--theme--colors--danger-text);
}
.bg-card-border {
background-color: var(--c--theme--colors--card-border);
}
.bg-primary-bg {
background-color: var(--c--theme--colors--primary-bg);
}
.bg-primary-action {
background-color: var(--c--theme--colors--primary-action);
}
.bg-primary-050 {
background-color: var(--c--theme--colors--primary-050);
}
@@ -1342,18 +1233,42 @@
background-color: var(--c--theme--colors--primary-150);
}
.bg-primary-950 {
background-color: var(--c--theme--colors--primary-950);
.bg-greyscale-text {
background-color: var(--c--theme--colors--greyscale-text);
}
.bg-info-150 {
background-color: var(--c--theme--colors--info-150);
.bg-greyscale-050 {
background-color: var(--c--theme--colors--greyscale-050);
}
.bg-greyscale-250 {
background-color: var(--c--theme--colors--greyscale-250);
}
.bg-greyscale-350 {
background-color: var(--c--theme--colors--greyscale-350);
}
.bg-greyscale-750 {
background-color: var(--c--theme--colors--greyscale-750);
}
.bg-greyscale-950 {
background-color: var(--c--theme--colors--greyscale-950);
}
.bg-greyscale-1000 {
background-color: var(--c--theme--colors--greyscale-1000);
}
.bg-primary-action {
background-color: var(--c--theme--colors--primary-action);
}
.bg-primary-bg {
background-color: var(--c--theme--colors--primary-bg);
}
.bg-blue-400 {
background-color: var(--c--theme--colors--blue-400);
}

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

@@ -3,84 +3,87 @@ export const tokens = {
default: {
theme: {
colors: {
'secondary-text': '#555F6B',
'secondary-100': '#F2F7FC',
'secondary-200': '#EBF3FA',
'secondary-300': '#E2EEF8',
'secondary-400': '#DDEAF7',
'secondary-500': '#D4E5F5',
'secondary-600': '#C1D0DF',
'secondary-700': '#97A3AE',
'secondary-800': '#757E87',
'secondary-900': '#596067',
'info-text': '#fff',
'info-100': '#EBF2FC',
'info-200': '#8CB5EA',
'info-300': '#5894E1',
'info-400': '#377FDB',
'info-500': '#055FD2',
'info-600': '#0556BF',
'info-700': '#044395',
'info-800': '#033474',
'info-900': '#022858',
'greyscale-100': '#FAFAFB',
'greyscale-200': '#F3F4F4',
'greyscale-300': '#E7E8EA',
'greyscale-400': '#C2C6CA',
'greyscale-500': '#9EA3AA',
'greyscale-600': '#79818A',
'greyscale-700': '#555F6B',
'greyscale-800': '#303C4B',
'greyscale-900': '#0C1A2B',
'secondary-text': '#fff',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
'secondary-400': '#e1020f',
'secondary-500': '#c91a1f',
'secondary-600': '#5e2b2b',
'secondary-700': '#3b2424',
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'info-text': '#0078f3',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-300': '#CECECE',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-000': '#fff',
'primary-100': '#EDF5FA',
'primary-200': '#8CB5EA',
'primary-300': '#5894E1',
'primary-400': '#377FDB',
'primary-500': '#055FD2',
'primary-600': '#0556BF',
'primary-700': '#044395',
'primary-800': '#033474',
'primary-900': '#022858',
'success-100': '#EFFCD3',
'success-200': '#DBFAA9',
'success-300': '#BEF27C',
'success-400': '#A0E659',
'success-500': '#76D628',
'success-600': '#5AB81D',
'success-700': '#419A14',
'success-800': '#2C7C0C',
'success-900': '#1D6607',
'warning-100': '#FFF8CD',
'warning-200': '#FFEF9B',
'warning-300': '#FFE469',
'warning-400': '#FFDA43',
'warning-500': '#FFC805',
'warning-600': '#DBA603',
'warning-700': '#B78702',
'warning-800': '#936901',
'warning-900': '#7A5400',
'danger-100': '#F4B0B0',
'danger-200': '#EE8A8A',
'danger-300': '#E65454',
'danger-400': '#E13333',
'danger-500': '#DA0000',
'danger-600': '#C60000',
'danger-700': '#9B0000',
'danger-800': '#780000',
'danger-900': '#5C0000',
'primary-text': '#fff',
'success-text': '#fff',
'warning-text': '#fff',
'danger-text': '#fff',
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-action': '#1212FF',
'primary-100': '#ECECFE',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-700': '#272747',
'primary-800': '#000091',
'primary-900': '#21213F',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#391C1C',
'primary-text': '#000091',
'success-text': '#1f8d49',
'warning-text': '#d64d00',
'danger-text': '#FFF',
'primary-050': '#F5F5FE',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA',
'primary-150': '#F4F4FD',
'greyscale-text': '#303C4B',
'greyscale-050': '#F6F6F6',
'greyscale-250': '#ddd',
'greyscale-350': '#ddd',
'greyscale-750': '#353535',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'primary-action': '#1212FF',
'primary-bg': '#FAFAFA',
'blue-400': '#7AB1E8',
'blue-500': '#417DC4',
'blue-600': '#3558A2',
@@ -145,10 +148,7 @@ export const tokens = {
extrabold: 800,
black: 900,
},
families: {
base: '"Roboto Flex Variable", sans-serif',
accent: '"Roboto Flex Variable", sans-serif',
},
families: { base: 'Marianne', accent: 'Marianne' },
letterSpacings: {
h1: 'normal',
h2: 'normal',
@@ -202,141 +202,164 @@ export const tokens = {
xl: '1200px',
xxl: '1400px',
xxs: '320px',
mobile: '768px',
tablet: '1024px',
},
logo: {
src: '/assets/logo-gouv.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'Gouvernement Logo',
},
logo: { src: '', widthHeader: '', widthFooter: '', alt: '' },
},
components: {
datagrid: {
header: {
weight: 'var(--c--theme--font--weights--extrabold)',
size: 'var(--c--theme--font--sizes--ml)',
},
cell: {
color: 'var(--c--theme--colors--primary-500)',
size: 'var(--c--theme--font--sizes--ml)',
},
},
'forms-checkbox': {
'background-color': { hover: '#055fd214' },
color: 'var(--c--theme--colors--primary-500)',
'font-size': 'var(--c--theme--font--sizes--ml)',
},
'forms-datepicker': {
'border-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
'border-radius': {
hover: 'var(--c--components--forms-datepicker--border-radius)',
focus: 'var(--c--components--forms-datepicker--border-radius)',
},
},
'forms-field': {
color: 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
width: 'auto',
},
'forms-input': {
'value-color': 'var(--c--theme--colors--primary-500)',
'border-color': 'var(--c--theme--colors--primary-500)',
color: {
error: 'var(--c--theme--colors--danger-500)',
'error-hover': 'var(--c--theme--colors--danger-500)',
'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)',
},
},
'forms-labelledbox': {
'label-color': {
small: 'var(--c--theme--colors--primary-500)',
'small-disabled': 'var(--c--theme--colors--greyscale-400)',
big: { disabled: 'var(--c--theme--colors--greyscale-400)' },
},
},
'forms-select': {
'border-color': 'var(--c--theme--colors--primary-500)',
'border-color-disabled-hover':
'var(--c--theme--colors--greyscale-200)',
'border-radius': {
hover: 'var(--c--components--forms-select--border-radius)',
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#fff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-300)',
},
},
'forms-switch': {
'accent-color': 'var(--c--theme--colors--primary-400)',
},
'forms-textarea': {
'border-color': 'var(--c--components--forms-textarea--border-color)',
'border-color-hover':
'var(--c--components--forms-textarea--border-color)',
'border-radius': {
hover: 'var(--c--components--forms-textarea--border-radius)',
focus: 'var(--c--components--forms-textarea--border-radius)',
},
color: 'var(--c--theme--colors--primary-500)',
disabled: {
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
},
},
modal: { 'background-color': '#fff' },
modal: { 'width-small': '342px' },
button: {
'border-radius': {
active: 'var(--c--components--button--border-radius)',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
'small-height': '26px',
primary: {
'background--color': 'var(--c--theme--colors--primary-text)',
'background--color-hover': '#1212ff',
'background--color-active': '#2323ff',
'background--color-disabled':
'var(--c--theme--colors--greyscale-100)',
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
'color-focus-visible': '#fff',
disabled: 'var(--c--theme--colors--greyscale-500)',
},
'medium-height': 'auto',
'small-height': 'auto',
success: {
color: 'white',
'color-disabled': 'white',
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--success-600)',
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--success-800)',
},
'primary-text': {
'background--color': 'var(--c--theme--colors--primary-text)',
'background--color-hover': 'var(--c--theme--colors--greyscale-100)',
'background--color-active': 'var(--c--theme--colors--primary-100)',
'background--color-focus-visible': '#fff',
'background--color-disabled':
'var(--c--theme--colors--greyscale-000)',
color: 'var(--c--theme--colors--primary-800)',
'color-hover': 'var(--c--theme--colors--primary-800)',
disabled: 'var(--c--theme--colors--greyscale-400)',
},
secondary: {
'background--color-hover': '#F6F6F6',
'background--color-active': '#EDEDED',
'background--color-focus-visible':
'var(--c--theme--colors--greyscale-000)',
'background--disabled': 'var(--c--theme--colors--greyscale-000)',
color: 'var(--c--theme--colors--primary-800)',
'border--color': 'var(--c--theme--colors--greyscale-300)',
'border--color-hover': 'var(--c--theme--colors--greyscale-300)',
'border--color-disabled': 'var(--c--theme--colors--greyscale-300)',
disabled: 'var(--c--theme--colors--greyscale-400)',
},
tertiary: {
'background--color': 'var(--c--theme--colors--primary-100)',
'background--color-focus-visible':
'var(--c--theme--colors--primary-100)',
'background--color-hover': 'var(--c--theme--colors--primary-300)',
'background--color-active': 'var(--c--theme--colors--primary-300)',
'background--disabled': 'var(--c--theme--colors--primary-050)',
color: 'var(--c--theme--colors--primary-800)',
disabled: 'var(--c--theme--colors--primary-300)',
},
'tertiary-text': {
'background--color-hover': 'var(--c--theme--colors--greyscale-100)',
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
},
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
'background--color': 'var(--c--theme--colors--danger-600)',
'background--color-hover': '#FF2725',
'background--color-focus-visible':
'var(--c--theme--colors--danger-600)',
'background--color-disabled':
'var(--c--theme--colors--greyscale-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-400)',
},
primary: {
color: 'var(--c--theme--colors--primary-text)',
'color-active': 'var(--c--theme--colors--primary-text)',
background: {
color: 'var(--c--theme--colors--primary-400)',
'color-active': 'var(--c--theme--colors--primary-500)',
},
border: { 'color-active': 'transparent' },
},
secondary: {
color: 'var(--c--theme--colors--primary-500)',
'color-hover': 'var(--c--theme--colors--primary-text)',
background: {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: { color: 'var(--c--theme--colors--greyscale-300)' },
},
tertiary: {
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
disabled: { color: 'white', background: { color: '#b3cef0' } },
},
'la-gauffre': { activated: false },
'home-proconnect': { activated: false },
datagrid: {
'header--color': '#666666',
'header--size': '12px',
'header--weight': '500',
'body--background-color-hover': '#eee',
},
'forms-checkbox': {
'border-radius': '4px',
'border-color': 'var(--c--theme--colors--primary-800)',
'background-color--hover': 'var(--c--theme--colors--greyscale-100)',
'border--color-disabled': 'var(--c--theme--colors--greyscale-200)',
'border--color': 'var(--c--theme--colors--primary-800)',
'background--disabled': 'var(--c--theme--colors--greyscale-200)',
'background--enable': 'var(--c--theme--colors--primary-800)',
'check--disabled': 'var(--c--theme--colors--greyscale-300)',
'check--enable': 'var(--c--theme--colors--greyscale-000)',
color: 'var(--c--theme--colors--primary-text)',
'label--color': 'var(--c--theme--colors--greyscale-1000)',
'label--size': 'var(--c--theme--font--sizes--sm)',
'label--weight': '500',
'text--color': 'var(--c--theme--colors--greyscale-600)',
'text--size': 'var(--c--theme--font--sizes--s)',
'text--weight': '400',
'text--color-disabled': 'var(--c--theme--colors--greyscale-300)',
},
'forms-labelledbox': {
'label-color--small': '#1E1E1E',
'label-color--small--disabled': '#CECECE',
'label-color--big': '#1E1E1E',
'label-color--big--disabled': '#CECECE',
},
'forms-radio': {
'border-color': 'var(--c--theme--colors--primary-800)',
'background-color': 'var(--c--theme--colors--greyscale-000)',
'accent-color': 'var(--c--theme--colors--primary-800)',
'accent-color-disabled': 'var(--c--theme--colors--greyscale-300)',
},
'forms-switch': {
'border--color-disabled': 'var(--c--theme--colors--greyscale-300)',
'border--color': 'var(--c--theme--colors--primary-800)',
'handle-background-color': 'white',
'handle-background-color--disabled':
'var(--c--theme--colors--greyscale-000)',
'rail-background-color--disabled':
'var(--c--theme--colors--greyscale-000)',
'accent-color': 'var(--c--theme--colors--primary-800)',
},
'forms-textarea': {
'label-color--focus': '#161616',
'border-radius': '4px',
'border-color': '#929292',
'box-shadow--color--hover': '#929292',
'box-shadow--color--focus': '#000091',
'value-color': '#1E1E1E',
'value-color--disabled': '#CECECE',
'font-size': '14px',
},
'forms-input': {
'label-color--focus': '#161616',
'border-radius': '4px',
'border-color': '#929292',
'box-shadow--color--hover': '#929292',
'box-shadow--color--focus': '#000091',
'value-color': '#1E1E1E',
'value-color--disabled': '#CECECE',
'font-size': '14px',
},
'forms-select': {
'label-color--focus': '#161616',
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'border-color': '#929292',
'box-shadow--color--hover': '#929292',
'box-shadow--color--focus': '#000091',
'value-color': '#1E1E1E',
'font-size': '14px',
},
'la-gauffre': { activated: true },
'home-proconnect': { activated: true },
},
},
dark: {
@@ -391,211 +414,5 @@ export const tokens = {
},
},
},
dsfr: {
theme: {
colors: {
'card-border': '#E5E5E5',
'primary-text': '#000091',
'primary-100': '#ECECFE',
'primary-150': '#F4F4FD',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-700': '#272747',
'primary-800': '#000091',
'primary-900': '#21213F',
'secondary-text': '#fff',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
'secondary-400': '#e1020f',
'secondary-500': '#c91a1f',
'secondary-600': '#5e2b2b',
'secondary-700': '#3b2424',
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-text': '#303C4B',
'greyscale-000': '#fff',
'greyscale-050': '#F6F6F6',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-250': '#ddd',
'greyscale-300': '#CECECE',
'greyscale-350': '#ddd',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-750': '#353535',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
'success-300': '#88fdaa',
'success-400': '#3bea7e',
'success-500': '#1f8d49',
'success-600': '#18753c',
'success-700': '#204129',
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
'warning-300': '#ffded9',
'warning-400': '#ffbeb4',
'warning-500': '#d64d00',
'warning-600': '#b34000',
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#391C1C',
},
font: { families: { accent: 'Marianne', base: 'Marianne' } },
logo: {
src: '/assets/logo-gouv.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'Gouvernement Logo',
},
},
components: {
alert: {
'border-radius': '0',
error: {
'background-color': 'var(--c--theme--colors--danger-100)',
'border-left-color': 'var(--c--theme--colors--danger-400)',
close: {
color: 'white',
'background-color': 'var(--c--theme--colors--danger-400)',
'background-color-hover': 'var(--c--theme--colors--danger-600)',
},
},
},
modal: { 'width-small': '342px' },
button: {
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
color: 'var(--c--theme--colors--primary-text)',
'color-hover': '#1212ff',
'color-active': '#2323ff',
},
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
},
'primary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-800)',
},
secondary: {
background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
border: {
color: 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
},
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-text)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
'background-color': 'transparent',
'background-color-hover': '#F4F4FD',
},
pagination: {
'background-color': 'transparent',
'background-color-active': 'var(--c--theme--colors--primary-300)',
'border-color': 'var(--c--theme--colors--primary-400)',
},
},
'forms-checkbox': {
'border-radius': '0',
color: 'var(--c--theme--colors--primary-text)',
text: {
color: 'var(--c--theme--colors--greyscale-text)',
size: 'var(--c--theme--font--sizes--t)',
},
},
'forms-datepicker': { 'border-radius': '0' },
'forms-fileuploader': { 'border-radius': '0' },
'forms-field': {
color: 'var(--c--theme--colors--primary-text)',
'footer-font-size': 'var(--c--theme--font--sizes--t)',
'footer-color': 'var(--c--theme--colors--greyscale-text)',
},
'forms-input': {
'border-radius': '4px',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
'value-color': 'var(--c--theme--colors--primary-text)',
'font-size': '14px',
},
'forms-labelledbox': {
'label-color': { big: 'var(--c--theme--colors--primary-text)' },
},
'forms-radio': {
'accent-color': 'var(--c--theme--colors--primary-600)',
},
'forms-select': {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'border-color-hover': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
},
'forms-switch': {
'handle-border-radius': '2px',
'rail-border-radius': '4px',
'accent-color': 'var(--c--theme--colors--primary-text)',
},
'forms-textarea': { 'border-radius': '0' },
'la-gauffre': { activated: true },
'home-proconnect': { activated: true },
},
},
},
};

4
src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
View File

@@ -3,7 +3,7 @@ import { create } from 'zustand';
import { tokens } from './cunningham-tokens';
type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
type Tokens = typeof tokens.themes.default;
type ColorsTokens = Tokens['theme']['colors'];
type FontSizesTokens = Tokens['theme']['font']['sizes'];
type SpacingsTokens = Tokens['theme']['spacings'];
@@ -28,7 +28,7 @@ export const useCunninghamTheme = create<AuthStore>((set, get) => {
) as Tokens;
return {
theme: 'dsfr',
theme: 'default',
themeTokens: () => currentTheme().theme,
colorsTokens: () => currentTheme().theme.colors,
componentTokens: () => currentTheme().components,

39
src/frontend/apps/impress/src/pages/globals.css
View File

@@ -1,4 +1,7 @@
@import url('../cunningham/cunningham-style.css');
@import url('@gouvfr-lasuite/ui-kit/style');
@import url('../cunningham/cunningham-tokens.css');
@import url('../cunningham/cunningham-custom-tokens.css');
@import url('@fontsource/material-icons');
body {
margin: 0;
@@ -41,3 +44,37 @@ main ::-webkit-scrollbar-thumb:hover,
cursor: pointer;
outline: inherit;
}
.material-icons-filled {
font-family: 'Material Icons', sans-serif;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizelegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
[data-nextjs-dialog-overlay] {
display: none !important;
}
nextjs-portal {
display: none;
}

2
src/frontend/apps/impress/src/tests/utils.tsx
View File

@@ -15,7 +15,7 @@ export const AppWrapper = ({ children }: PropsWithChildren) => {
return (
<QueryClientProvider client={queryClient}>
<CunninghamProvider theme="dsfr">{children}</CunninghamProvider>
<CunninghamProvider theme="default">{children}</CunninghamProvider>
</QueryClientProvider>
);
};