electron-rare/conversations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧(ui-kit) change colors variables

Browse Source 
update ui-kit colors for default and darkmode
This commit is contained in:
Eléonore Voisin
2025-11-13 09:54:05 +01:00
parent a5bc974e5d
commit fe112cffc7
12 changed files with 8979 additions and 2797 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/apps/conversations/cunningham.ts
+487 -453
View File
@@ -1,474 +1,508 @@
import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit';
import { cunninghamConfig } from '@gouvfr-lasuite/ui-kit';
const customColors = {
'primary-action': '#1212FF',
'primary-bg': '#FAFAFA',
'primary-focus': '#0A76F6',
'secondary-icon': 'var(--c--theme--colors--primary-text)',
'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',
};
// TODO: Temporary solution to override the default button tertiary text color, waiting for the new ui-kit to be released
tokens.themes.default.theme = {
...tokens.themes.default.theme,
...{
logo: {
src: '',
alt: '',
widthHeader: '',
widthFooter: '',
},
colors: {
...tokens.themes.default.theme.colors,
...customColors,
},
/**
* Deep merge function that recursively merges objects
* @param target - The target object to merge into
* @param source - The source object to merge from
* @returns A new object with deeply merged properties
*
* @example
* const obj1 = { a: { x: 1, y: 2 }, b: 3 };
* const obj2 = { a: { y: 3, z: 4 }, c: 5 };
* const merged = deepMerge(obj1, obj2);
* // Result: { a: { x: 1, y: 3, z: 4 }, b: 3, c: 5 }
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function deepMerge(target: any, source: any): any {
const result = { ...target };
for (const key in source) {
if (source.hasOwnProperty(key)) {
const sourceValue = source[key];
const targetValue = result[key];
if (
sourceValue &&
typeof sourceValue === 'object' &&
!Array.isArray(sourceValue) &&
targetValue &&
typeof targetValue === 'object' &&
!Array.isArray(targetValue)
) {
// Recursively merge nested objects
result[key] = deepMerge(targetValue, sourceValue);
} else if (sourceValue !== undefined) {
// Override with source value
result[key] = sourceValue;
}
}
}
return result;
}
const themesImages = {
anct: {
favicon: '/assets/anct_favicon.png',
logo: '/assets/anct_logo_alpha.svg',
'logo-icon': '/assets/anct_logo-icon.svg',
},
dark: {
favicon: '/assets/favicon.png',
logo: '/assets/logo_alpha.svg',
'logo-icon': '/assets/logo-icon_alpha.svg',
},
default: {
favicon: '/assets/favicon.png',
logo: '/assets/logo_alpha.svg',
'logo-icon': '/assets/logo-icon_alpha.svg',
},
};
tokens.themes.default.components = {
...tokens.themes.default.components,
...{
modal: {
'width-small': '360px',
const getComponents = (theme: keyof typeof themesImages) => {
return {
datagrid: {
'body--background-color-hover':
'ref(contextuals.background.semantic.contextual.primary)',
},
'la-gaufre': false,
'home-proconnect': false,
alpha: false,
beta: false,
'image-system-filter': '',
favicon: {
ico: '/assets/favicon.ico',
'png-light': '/assets/icon-assistant.svg',
'png-dark': '/assets/icon-assistant.svg',
src: `'${themesImages[theme].favicon}'`,
},
},
logo: {
src: `url('${themesImages[theme].logo}')`,
},
'logo-icon': {
src: `url('${themesImages[theme]['logo-icon']}')`,
},
};
};
const dsfrTheme = {
dsfr: {
theme: {
colors: {
'primary-action': '#3E5DE7',
'primary-focus': '#3E5DE7',
'primary-text': '#3E5DE7',
'primary-050': '#EDF0FF',
'primary-100': '#DAE2FF',
'primary-150': '#C8D3FF',
'primary-200': '#B5C4FF',
'primary-250': '#A2B6FF',
'primary-300': '#90A7FF',
'primary-350': '#7E98FF',
'primary-400': '#6C89FE',
'primary-450': '#5C7AF7',
'primary-500': '#4C6CEF',
'primary-550': '#3E5DE7',
'primary-600': '#304DDF',
'primary-650': '#2845C1',
'primary-700': '#223E9E',
'primary-750': '#1F367D',
'primary-800': '#1B2E5F',
'primary-850': '#172446',
'primary-900': '#121B30',
'primary-950': '#0C111A',
'secondary-text': '#fff',
'secondary-000': '#fff',
'secondary-025': '#F6F8F9',
'secondary-050': '#EEF1F4',
'secondary-100': '#DFE2EA',
'secondary-150': '#CFD5DE',
'secondary-200': '#C1C7D3',
'secondary-250': '#B2B9C7',
'secondary-300': '#A4ABBC',
'secondary-350': '#969EB0',
'secondary-400': '#8891A4',
'secondary-450': '#7B8498',
'secondary-500': '#6D778C',
'secondary-550': '#626A80',
'secondary-600': '#555E74',
'secondary-650': '#4A5267',
'secondary-700': '#3F4759',
'secondary-750': '#363B4C',
'secondary-800': '#2B303D',
'secondary-850': '#222631',
'secondary-900': '#181B24',
'secondary-950': '#0F1117',
'secondary-1000': '#000000',
'greyscale-text': '#3C3B38',
'greyscale-000': '#fff',
'greyscale-025': '#F6F8F9',
'greyscale-050': '#EEF1F4',
'greyscale-100': '#DFE2EA',
'greyscale-150': '#CFD5DE',
'greyscale-200': '#C1C7D3',
'greyscale-250': '#B2B9C7',
'greyscale-300': '#A4ABBC',
'greyscale-350': '#969EB0',
'greyscale-400': '#8891A4',
'greyscale-450': '#7B8498',
'greyscale-500': '#6D778C',
'greyscale-550': '#626A80',
'greyscale-600': '#555E74',
'greyscale-650': '#4A5267',
'greyscale-700': '#3F4759',
'greyscale-750': '#363B4C',
'greyscale-800': '#2B303D',
'greyscale-850': '#222631',
'greyscale-900': '#181B24',
'greyscale-950': '#0F1117',
'greyscale-1000': '#000000',
'success-text': '#234935',
'success-50': '#DEF7E6',
'success-100': '#BAEECF',
'success-150': '#A5E2C0',
'success-200': '#95D4B3',
'success-250': '#85C6A7',
'success-300': '#74B99B',
'success-350': '#65AB8F',
'success-400': '#579E84',
'success-450': '#4B9079',
'success-500': '#40836F',
'success-550': '#367664',
'success-600': '#2B695A',
'success-650': '#2C5A50',
'success-700': '#2A4D45',
'success-750': '#26403C',
'success-800': '#213430',
'success-850': '#1B2826',
'success-900': '#151D1C',
'success-950': '#0D1212',
// 'info-text': '#212445',
// 'info-50': '#F2F6FB',
// 'info-100': '#E2E9F5',
// 'info-200': '#CCD8EE',
// 'info-300': '#A9C0E3',
// 'info-400': '#809DD4',
// 'info-500': '#617BC7',
// 'info-600': '#4A5CBF',
// 'info-700': '#3E49B2',
// 'info-800': '#353C8F',
// 'info-900': '#303771',
// 'info-950': '#212445',
// 'warning-text': '#D97C3A',
// 'warning-50': '#FDF7F1',
// 'warning-100': '#FBEDDC',
// 'warning-200': '#F5D9B9',
// 'warning-300': '#EDBE8C',
// 'warning-400': '#E2985C',
// 'warning-500': '#D97C3A',
// 'warning-600': '#C96330',
// 'warning-700': '#A34B32',
// 'warning-800': '#813B2C',
// 'warning-900': '#693327',
// 'warning-950': '#381713',
// 'danger-action': '#C0182A',
// 'danger-text': '#FFF',
// 'danger-050': '#FDF5F4',
// 'danger-100': '#FBEBE8',
// 'danger-200': '#F9E0DC',
// 'danger-300': '#F3C3BD',
// 'danger-400': '#E26552',
// 'danger-500': '#C91F00',
// 'danger-600': '#A71901',
// 'danger-700': '#562C2B',
// 'danger-800': '#392425',
// 'danger-900': '#311F20',
// 'danger-950': '#2A191A',
// 'blue-400': '#8BAECC',
// 'blue-500': '#567AA2',
// 'blue-600': '#455784',
// 'brown-400': '#E4C090',
// 'brown-500': '#BA9977',
// 'brown-600': '#735C45',
// 'cyan-400': '#5CBEC9',
// 'cyan-500': '#43A1B3',
// 'cyan-600': '#39809B',
// 'gold-400': '#ECBF50',
// 'gold-500': '#DFA038',
// 'gold-600': '#C17B31',
// 'green-400': '#5DBD9A',
// 'green-500': '#3AA183',
// 'green-600': '#2A816D',
// 'olive-400': '#AFD662',
// 'olive-500': '#90BB4B',
// 'olive-600': '#6E9441',
// 'orange-400': '#E2985C',
// 'orange-500': '#D97C3A',
// 'orange-600': '#C96330',
// 'pink-400': '#BE8FC8',
// 'pink-500': '#A563B1',
// 'pink-600': '#8B44A5',
// 'purple-400': '#BE8FC8',
// 'purple-500': '#A563B1',
// 'purple-600': '#8B44A5',
// 'yellow-400': '#EDC947',
// 'yellow-500': '#DBB13A',
// 'yellow-600': '#B88A34',
},
logo: {
src: '/assets/logo-gouv.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'Gouvernement Logo',
},
},
components: {
button: {
primary: {
'background--color': '#3E5DE7',
'background--color-hover': '#2845C1',
'background--color-active': '#2845C1',
'background--color-disabled': '#eee',
color: '#EDF0FF',
'color-hover': '#fff',
'color-active': '#fff',
'color-focus-visible': '#fff',
disabled: '#7C7C7C',
},
'primary-text': {
color: '#3E5DE7',
'color-hover': '#000091',
'background--color-hover': '#EEF1F4',
disabled: '#929292',
},
secondary: {
'background--color': '#DAE2FF',
'background--color-hover': '#C8D3FF',
'background--color-active': '#C8D3FF',
'background--color-disabled': '#eee',
color: '#304DDF',
'color-hover': '#304DDF',
disabled: '#7C7C7C',
'border--color': '#DAE2FF',
'border--color-hover': '#C8D3FF',
},
tertiary: {
'background--color': 'transparent',
'background--color-hover': '#f2f5f4',
'background--color-active': '#CFD5DE',
'background--color-disabled': '#eee',
color: '#3E5DE7',
'color-hover': '#3E5DE7',
'border--color': '#CFD5DE',
'border--color-hover': '#CFD5DE',
},
bordered: {
'background--color': 'transparent',
'background--color-hover': '#f2f5f4',
'background--color-active': '#CFD5DE',
'background--color-disabled': '#eee',
color: '#3E5DE7',
'color-hover': '#3E5DE7',
'border--color': '#CFD5DE',
'border--color-hover': '#CFD5DE',
},
info: {
'background--color': '#cfe5ff',
'background--color-hover': '#b7d7ff',
color: '#265eaa',
},
},
'la-gaufre': true,
'home-proconnect': true,
alpha: true,
beta: true,
favicon: {
ico: '/assets/favicon.ico',
'png-light': '/assets/icon-assistant.svg',
'png-dark': '/assets/icon-assistant.svg',
},
},
},
};
const genericTheme = {
generic: {
theme: {
colors: {
'primary-action': '#206EBD',
'primary-focus': '#1E64BF',
'primary-text': '#2E2C28',
'primary-050': '#F8F8F7',
'primary-100': '#F0EFEC',
'primary-150': '#F4F4FD',
'primary-200': '#E8E7E4',
'primary-300': '#CFCDC9',
'primary-400': '#979592',
'primary-500': '#82807D',
'primary-600': '#3F3D39',
'primary-700': '#2E2C28',
'primary-800': '#302E29',
'primary-900': '#282622',
'primary-950': '#201F1C',
'secondary-text': '#fff',
'secondary-50': '#F4F7FA',
'secondary-100': '#D7E3EE',
'secondary-200': '#B8CCE1',
'secondary-300': '#99B4D3',
'secondary-400': '#7595BE',
'secondary-500': '#5874A0',
'secondary-600': '#3A5383',
'secondary-700': '#1E3462',
'secondary-800': '#091B41',
'secondary-900': '#08183B',
'secondary-950': '#071636',
'greyscale-text': '#3C3B38',
'greyscale-000': '#fff',
'greyscale-050': '#F8F7F7',
'greyscale-100': '#F3F3F2',
'greyscale-200': '#ECEBEA',
'greyscale-250': '#E4E3E2',
'greyscale-300': '#D3D2CF',
'greyscale-350': '#eee',
'greyscale-400': '#96948E',
'greyscale-500': '#817E77',
'greyscale-550': '#626A80',
'greyscale-600': '#6A6862',
'greyscale-700': '#3C3B38',
'greyscale-750': '#383632',
'greyscale-800': '#2D2B27',
'greyscale-900': '#262522',
'greyscale-950': '#201F1C',
'greyscale-1000': '#181714',
'success-text': '#234935',
'success-50': '#F3FBF5',
'success-100': '#E4F7EA',
'success-200': '#CAEED4',
'success-300': '#A0E0B5',
'success-400': '#6CC88C',
'success-500': '#6CC88C',
'success-600': '#358D5C',
'success-700': '#2D704B',
'success-800': '#28583F',
'success-900': '#234935',
'success-950': '#0F281B',
'info-text': '#212445',
'info-50': '#F2F6FB',
'info-100': '#E2E9F5',
'info-200': '#CCD8EE',
'info-300': '#A9C0E3',
'info-400': '#809DD4',
'info-500': '#617BC7',
'info-600': '#4A5CBF',
'info-700': '#3E49B2',
'info-800': '#353C8F',
'info-900': '#303771',
'info-950': '#212445',
'warning-text': '#D97C3A',
'warning-50': '#FDF7F1',
'warning-100': '#FBEDDC',
'warning-200': '#F5D9B9',
'warning-300': '#EDBE8C',
'warning-400': '#E2985C',
'warning-500': '#D97C3A',
'warning-600': '#C96330',
'warning-700': '#A34B32',
'warning-800': '#813B2C',
'warning-900': '#693327',
'warning-950': '#381713',
'danger-action': '#C0182A',
'danger-text': '#FFF',
'danger-050': '#FDF5F4',
'danger-100': '#FBEBE8',
'danger-200': '#F9E0DC',
'danger-300': '#F3C3BD',
'danger-400': '#E26552',
'danger-500': '#C91F00',
'danger-600': '#A71901',
'danger-700': '#562C2B',
'danger-800': '#392425',
'danger-900': '#311F20',
'danger-950': '#2A191A',
'blue-400': '#8BAECC',
'blue-500': '#567AA2',
'blue-600': '#455784',
'brown-400': '#E4C090',
'brown-500': '#BA9977',
'brown-600': '#735C45',
'cyan-400': '#5CBEC9',
'cyan-500': '#43A1B3',
'cyan-600': '#39809B',
'gold-400': '#ECBF50',
'gold-500': '#DFA038',
'gold-600': '#C17B31',
'green-400': '#5DBD9A',
'green-500': '#3AA183',
'green-600': '#2A816D',
'olive-400': '#AFD662',
'olive-500': '#90BB4B',
'olive-600': '#6E9441',
'orange-400': '#E2985C',
'orange-500': '#D97C3A',
'orange-600': '#C96330',
'pink-400': '#BE8FC8',
'pink-500': '#A563B1',
'pink-600': '#8B44A5',
'purple-400': '#BE8FC8',
'purple-500': '#A563B1',
'purple-600': '#8B44A5',
'yellow-400': '#EDC947',
'yellow-500': '#DBB13A',
'yellow-600': '#B88A34',
},
font: {
families: {
base: 'Inter, Roboto Flex Variable, sans-serif',
accent: 'Inter, Roboto Flex Variable, sans-serif',
const defaultConfig = deepMerge(cunninghamConfig, {
themes: {
anct: {
components: getComponents('anct'),
globals: {
colors: {
'brand-050': '#EEF0FA',
'brand-100': '#DDE2F5',
'brand-150': '#CDD3F0',
'brand-200': '#BCC5EC',
'brand-250': '#ACB7E7',
'brand-300': '#9BA9E2',
'brand-350': '#8B9BDE',
'brand-400': '#7B8DD8',
'brand-450': '#6B7FD3',
'brand-500': '#5A71CF',
'brand-550': '#4A62CB',
'brand-600': '#3954C6',
'brand-650': '#2D4AAE',
'brand-700': '#2B428A',
'brand-750': '#28396C',
'brand-800': '#232F51',
'brand-850': '#1D253C',
'brand-900': '#161B2A',
'brand-950': '#0F1118',
'gray-000': '#FFFFFF',
'gray-025': '#F7F8F8',
'gray-050': '#F0F1F2',
'gray-100': '#E1E2E6',
'gray-150': '#D2D4DA',
'gray-200': '#C3C6CE',
'gray-250': '#B5B9C2',
'gray-300': '#A7ABB6',
'gray-350': '#999EAB',
'gray-400': '#8B919F',
'gray-450': '#7D8494',
'gray-500': '#707789',
'gray-550': '#636A7E',
'gray-600': '#565E73',
'gray-650': '#4A5267',
'gray-700': '#3F4758',
'gray-750': '#353B4A',
'gray-800': '#2B303C',
'gray-850': '#22262F',
'gray-900': '#191B22',
'gray-950': '#0F1115',
'gray-1000': '#000000',
'info-050': '#EEF1F6',
'info-100': '#DEE2ED',
'info-150': '#CDD4E5',
'info-200': '#BDC7DC',
'info-250': '#ADB9D4',
'info-300': '#9DABCB',
'info-350': '#8E9EC3',
'info-400': '#7E90BB',
'info-450': '#6F83B3',
'info-500': '#6076AB',
'info-550': '#5169A3',
'info-600': '#445D98',
'info-650': '#3F527C',
'info-700': '#384666',
'info-750': '#323B52',
'info-800': '#29303F',
'info-850': '#212630',
'info-900': '#191C22',
'info-950': '#101114',
'success-050': '#E5F4F2',
'success-100': '#CBE8E6',
'success-150': '#B1DDD9',
'success-200': '#97D1CC',
'success-250': '#7DC6BF',
'success-300': '#62BAB2',
'success-350': '#47ADA5',
'success-400': '#29A197',
'success-450': '#0C9488',
'success-500': '#01867B',
'success-550': '#01786E',
'success-600': '#026A61',
'success-650': '#1C5C55',
'success-700': '#224E49',
'success-750': '#23403E',
'success-800': '#1F3432',
'success-850': '#1A2827',
'success-900': '#131D1B',
'success-950': '#0D1212',
'warning-050': '#F7EFEB',
'warning-100': '#EEE0D8',
'warning-150': '#E6D0C4',
'warning-200': '#DDC1B1',
'warning-250': '#D5B29E',
'warning-300': '#CDA28B',
'warning-350': '#C59377',
'warning-400': '#BC8464',
'warning-450': '#B47551',
'warning-500': '#AC653E',
'warning-550': '#A3552B',
'warning-600': '#9A4516',
'warning-650': '#893B19',
'warning-700': '#6F371F',
'warning-750': '#59311F',
'warning-800': '#452A1D',
'warning-850': '#342119',
'warning-900': '#241913',
'warning-950': '#16100C',
'error-050': '#F8EFEF',
'error-100': '#F0DEDF',
'error-150': '#E9CECF',
'error-200': '#E2BEBF',
'error-250': '#DBAEAF',
'error-300': '#D49DA0',
'error-350': '#CD8D90',
'error-400': '#C57D80',
'error-450': '#BE6C70',
'error-500': '#B65C5F',
'error-550': '#AF4A4E',
'error-600': '#A6383D',
'error-650': '#93302F',
'error-700': '#782F2E',
'error-750': '#5F2C2B',
'error-800': '#492725',
'error-850': '#37201F',
'error-900': '#261817',
'error-950': '#170F0F',
'red-050': '#F8EFEF',
'red-100': '#F0DEDF',
'red-150': '#E9CECF',
'red-200': '#E2BEBF',
'red-250': '#DBAEAF',
'red-300': '#D49DA0',
'red-350': '#CD8D90',
'red-400': '#C57D80',
'red-450': '#BE6C70',
'red-500': '#B65C5F',
'red-550': '#AF4A4E',
'red-600': '#A6383D',
'red-650': '#93302F',
'red-700': '#782F2E',
'red-750': '#5F2C2B',
'red-800': '#492725',
'red-850': '#37201F',
'red-900': '#261817',
'red-950': '#170F0F',
'orange-050': '#F5F0EE',
'orange-100': '#EAE1DC',
'orange-150': '#E0D1CB',
'orange-200': '#D6C3BA',
'orange-250': '#CCB4AA',
'orange-300': '#C2A599',
'orange-350': '#B89788',
'orange-400': '#AE8978',
'orange-450': '#A47A68',
'orange-500': '#9B6C58',
'orange-550': '#915E48',
'orange-600': '#885038',
'orange-650': '#794530',
'orange-700': '#633E2E',
'orange-750': '#4F352A',
'orange-800': '#3E2C24',
'orange-850': '#2F231E',
'orange-900': '#221A17',
'orange-950': '#14100F',
'brown-050': '#F2F0EF',
'brown-100': '#E6E2DF',
'brown-150': '#D9D3CF',
'brown-200': '#CDC5BF',
'brown-250': '#C1B7B0',
'brown-300': '#B5A9A0',
'brown-350': '#A99B91',
'brown-400': '#9D8E82',
'brown-450': '#918174',
'brown-500': '#867465',
'brown-550': '#7B6757',
'brown-600': '#705A49',
'brown-650': '#624F40',
'brown-700': '#524439',
'brown-750': '#433A32',
'brown-800': '#362F2A',
'brown-850': '#2A2522',
'brown-900': '#1D1B19',
'brown-950': '#121110',
'yellow-050': '#FEF0CB',
'yellow-100': '#FDE094',
'yellow-150': '#FCCF59',
'yellow-200': '#F3BF38',
'yellow-250': '#E2B234',
'yellow-300': '#D1A530',
'yellow-350': '#C1982D',
'yellow-400': '#B18C29',
'yellow-450': '#A17F25',
'yellow-500': '#927322',
'yellow-550': '#82671E',
'yellow-600': '#735B1B',
'yellow-650': '#625023',
'yellow-700': '#534526',
'yellow-750': '#443A25',
'yellow-800': '#363021',
'yellow-850': '#29261C',
'yellow-900': '#1D1B15',
'yellow-950': '#13110E',
'green-050': '#E5F4F2',
'green-100': '#CBE8E6',
'green-150': '#B1DDD9',
'green-200': '#97D1CC',
'green-250': '#7DC6BF',
'green-300': '#62BAB2',
'green-350': '#47ADA5',
'green-400': '#29A197',
'green-450': '#0C9488',
'green-500': '#01867B',
'green-550': '#01786E',
'green-600': '#026A61',
'green-650': '#1C5C55',
'green-700': '#224E49',
'green-750': '#23403E',
'green-800': '#1F3432',
'green-850': '#1A2827',
'green-900': '#131D1B',
'green-950': '#0D1212',
'blue1-050': '#EEF0FA',
'blue1-100': '#DDE2F5',
'blue1-150': '#CDD3F0',
'blue1-200': '#BCC5EC',
'blue1-250': '#ACB7E7',
'blue1-300': '#9BA9E2',
'blue1-350': '#8B9BDE',
'blue1-400': '#7B8DD8',
'blue1-450': '#6B7FD3',
'blue1-500': '#5A71CF',
'blue1-550': '#4A62CB',
'blue1-600': '#3954C6',
'blue1-650': '#2D4AAE',
'blue1-700': '#2B428A',
'blue1-750': '#28396C',
'blue1-800': '#232F51',
'blue1-850': '#1D253C',
'blue1-900': '#161B2A',
'blue1-950': '#0F1118',
'blue2-050': '#EEF1F6',
'blue2-100': '#DEE2ED',
'blue2-150': '#CDD4E5',
'blue2-200': '#BDC7DC',
'blue2-250': '#ADB9D4',
'blue2-300': '#9DABCB',
'blue2-350': '#8E9EC3',
'blue2-400': '#7E90BB',
'blue2-450': '#6F83B3',
'blue2-500': '#6076AB',
'blue2-550': '#5169A3',
'blue2-600': '#445D98',
'blue2-650': '#3F527C',
'blue2-700': '#384666',
'blue2-750': '#323B52',
'blue2-800': '#29303F',
'blue2-850': '#212630',
'blue2-900': '#191C22',
'blue2-950': '#101114',
'purple-050': '#F4EFF4',
'purple-100': '#E9E0E8',
'purple-150': '#DDD0DD',
'purple-200': '#D3C1D2',
'purple-250': '#C8B2C7',
'purple-300': '#BDA3BC',
'purple-350': '#B295B1',
'purple-400': '#A886A7',
'purple-450': '#9D789C',
'purple-500': '#936992',
'purple-550': '#895B87',
'purple-600': '#7F4D7D',
'purple-650': '#70426E',
'purple-700': '#5D3B5B',
'purple-750': '#4B334A',
'purple-800': '#3C2B3B',
'purple-850': '#2D222C',
'purple-900': '#20191F',
'purple-950': '#141013',
'pink-050': '#F5EFF2',
'pink-100': '#ECDFE6',
'pink-150': '#E3CFD9',
'pink-200': '#D9BFCD',
'pink-250': '#D0B0C1',
'pink-300': '#C7A0B5',
'pink-350': '#BE91A9',
'pink-400': '#B5829C',
'pink-450': '#AB7391',
'pink-500': '#A36385',
'pink-550': '#995478',
'pink-600': '#90456C',
'pink-650': '#803B5E',
'pink-700': '#69364F',
'pink-750': '#543042',
'pink-800': '#422935',
'pink-850': '#312128',
'pink-900': '#22191D',
'pink-950': '#150F11',
},
},
},
components: {
button: {
primary: {
background: {
'color-hover': 'var(--c--theme--colors--primary-focus)',
'color-active': 'var(--c--theme--colors--primary-focus)',
'color-focus': 'var(--c--theme--colors--primary-focus)',
dark: {
globals: cunninghamConfig.themes.default.globals,
components: getComponents('dark'),
},
default: {
components: getComponents('default'),
},
dsfr: {
globals: {
colors: {
'brand-050': '#EDF0FF',
'brand-100': '#DAE2FF',
'brand-150': '#C8D3FF',
'brand-200': '#B5C4FF',
'brand-250': '#A2B6FF',
'brand-300': '#90A7FF',
'brand-350': '#7E98FF',
'brand-400': '#6C89FE',
'brand-450': '#5C7AF7',
'brand-500': '#4C6CEF',
'brand-550': '#3E5DE7',
'brand-600': '#304DDF',
'brand-650': '#2845C1',
'brand-700': '#223E9E',
'brand-750': '#1F367D',
'brand-800': '#1B2E5F',
'brand-850': '#172446',
'brand-900': '#121B30',
'brand-950': '#0C111A',
'success-050': '#DEF7E6',
'success-100': '#BAEECF',
'success-150': '#A5E2C0',
'success-200': '#95D4B3',
'success-250': '#85C6A7',
'success-300': '#74B99B',
'success-350': '#65AB8F',
'success-400': '#579E84',
'success-450': '#4B9079',
'success-500': '#40836F',
'success-550': '#367664',
'success-600': '#2B695A',
'success-650': '#2C5A50',
'success-700': '#2A4D45',
'success-750': '#26403C',
'success-800': '#213430',
'success-850': '#1B2826',
'success-900': '#151D1C',
'success-950': '#0D1212',
},
logo: {
src: '/assets/logo-gouv.svg',
widthHeader: '110px',
widthFooter: '220px',
alt: 'Gouvernement Logo',
},
},
components: {
...getComponents('default'),
button: {
primary: {
'background--color': '#3E5DE7',
'background--color-hover': '#2845C1',
'background--color-active': '#2845C1',
'background--color-disabled': '#eee',
color: '#EDF0FF',
'color-hover': '#fff',
'color-active': '#fff',
'color-focus-visible': '#fff',
disabled: '#7C7C7C',
},
'primary-text': {
color: '#3E5DE7',
'color-hover': '#000091',
'background--color-hover': '#EEF1F4',
disabled: '#929292',
},
secondary: {
'background--color': '#DAE2FF',
'background--color-hover': '#C8D3FF',
'background--color-active': '#C8D3FF',
'background--color-disabled': '#eee',
color: '#304DDF',
'color-hover': '#304DDF',
disabled: '#7C7C7C',
'border--color': '#DAE2FF',
'border--color-hover': '#C8D3FF',
},
tertiary: {
'background--color': 'transparent',
'background--color-hover': '#f2f5f4',
'background--color-active': '#CFD5DE',
'background--color-disabled': '#eee',
color: '#3E5DE7',
'color-hover': '#3E5DE7',
'border--color': '#CFD5DE',
'border--color-hover': '#CFD5DE',
},
bordered: {
'background--color': 'transparent',
'background--color-hover': '#f2f5f4',
'background--color-active': '#CFD5DE',
'background--color-disabled': '#eee',
color: '#3E5DE7',
'color-hover': '#3E5DE7',
'border--color': '#CFD5DE',
'border--color-hover': '#CFD5DE',
},
info: {
'background--color': '#cfe5ff',
'background--color-hover': '#b7d7ff',
color: '#265eaa',
},
},
'la-gaufre': true,
'home-proconnect': true,
alpha: true,
beta: true,
favicon: {
ico: '/assets/favicon.ico',
'png-light': '/assets/icon-assistant.svg',
'png-dark': '/assets/icon-assistant.svg',
},
},
modal: {
'width-small': '360px',
},
'image-system-filter': 'saturate(0.2)',
},
},
};
});
const config = {
...tokens,
themes: {
...tokens.themes,
...dsfrTheme,
...genericTheme,
},
};
const config = defaultConfig;
export default config;
src/frontend/apps/conversations/package.json
+4 -4
View File
@@ -22,8 +22,8 @@
"@emoji-mart/react": "1.1.1",
"@fontsource/material-icons": "5.2.5",
"@gouvfr-lasuite/integration": "1.0.3",
"@gouvfr-lasuite/ui-kit": "0.7.0",
"@openfun/cunningham-react": "3.1.0",
"@gouvfr-lasuite/ui-kit": "0.17.2",
"@openfun/cunningham-react": "4.0.0",
"@react-pdf/renderer": "4.3.0",
"@sentry/nextjs": "9.26.0",
"@tanstack/react-query": "5.80.5",
@@ -40,9 +40,9 @@
"micromark-extension-llm-math": "3.1.1-20250610",
"next": "15.3.3",
"posthog-js": "1.249.3",
"react": "*",
"react": "19.1.0",
"react-aria-components": "1.9.0",
"react-dom": "18.3.1",
"react-dom": "19.1.0",
"react-i18next": "15.5.2",
"react-intersection-observer": "9.16.0",
"react-lottie": "^1.2.10",
src/frontend/apps/conversations/src/components/BoxButton.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
font-family: inherit;
color: ${props.disabled
? 'var(--c--theme--colors--greyscale-400) !important'
? 'var(--c--theme--colors--gray-400) !important'
: 'inherit'};
${$css || ''}
`}
src/frontend/apps/conversations/src/components/Text.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { tokens } from '@/cunningham';
import { Box, BoxProps } from './Box';
const { sizes } = tokens.themes.default.theme.font;
const { sizes } = tokens.themes.default.globals.font;
type TextSizes = keyof typeof sizes;
export interface TextProps extends BoxProps {
src/frontend/apps/conversations/src/cunningham/cunningham-tokens.css
+6623 -1730
View File
File diff suppressed because it is too large Load Diff
src/frontend/apps/conversations/src/cunningham/cunningham-tokens.ts
+1824 -569
View File
File diff suppressed because it is too large Load Diff
src/frontend/apps/conversations/src/cunningham/useCunninghamTheme.tsx
+13 -13
View File
@@ -5,9 +5,9 @@ import { tokens } from './cunningham-tokens';
type Tokens = typeof tokens.themes.default &
Partial<(typeof tokens.themes)[keyof typeof tokens.themes]>;
type ColorsTokens = Tokens['theme']['colors'];
type FontSizesTokens = Tokens['theme']['font']['sizes'];
type SpacingsTokens = Tokens['theme']['spacings'];
type ColorsTokens = Tokens['globals']['colors'];
type FontSizesTokens = Tokens['globals']['font']['sizes'];
type SpacingsTokens = Tokens['globals']['spacings'];
type ComponentTokens = Tokens['components'] & {
alpha?: boolean;
beta?: boolean;
@@ -22,25 +22,25 @@ interface ThemeStore {
setTheme: (theme: Theme) => void;
spacingsTokens: Partial<SpacingsTokens>;
theme: Theme;
themeTokens: Partial<Tokens['theme']>;
themeTokens: Partial<Tokens['globals']>;
}
const getMergedTokens = (theme: Theme) => {
return merge({}, tokens.themes['default'], tokens.themes[theme]);
};
const DEFAULT_THEME: Theme = 'generic';
const DEFAULT_THEME: Theme = 'default';
const defaultTokens = getMergedTokens(DEFAULT_THEME);
const initialState: ThemeStore = {
colorsTokens: defaultTokens.theme.colors,
colorsTokens: defaultTokens.globals.colors,
componentTokens: defaultTokens.components,
currentTokens: tokens.themes[DEFAULT_THEME] as Partial<Tokens>,
fontSizesTokens: defaultTokens.theme.font.sizes,
fontSizesTokens: defaultTokens.globals.font.sizes,
setTheme: () => {},
spacingsTokens: defaultTokens.theme.spacings,
spacingsTokens: defaultTokens.globals.spacings,
theme: DEFAULT_THEME,
themeTokens: defaultTokens.theme,
themeTokens: defaultTokens.globals,
};
export const useCunninghamTheme = create<ThemeStore>((set) => ({
@@ -49,13 +49,13 @@ export const useCunninghamTheme = create<ThemeStore>((set) => ({
const newTokens = getMergedTokens(theme);
set({
colorsTokens: newTokens.theme.colors,
colorsTokens: newTokens.globals.colors,
componentTokens: newTokens.components,
currentTokens: tokens.themes[theme] as Partial<Tokens>,
fontSizesTokens: newTokens.theme.font.sizes,
spacingsTokens: newTokens.theme.spacings,
fontSizesTokens: newTokens.globals.font.sizes,
spacingsTokens: newTokens.globals.spacings,
theme,
themeTokens: newTokens.theme,
themeTokens: newTokens.globals,
});
},
}));
src/frontend/apps/conversations/src/features/chat/components/InputChat.tsx
+5 -5
View File
@@ -366,7 +366,7 @@ export const InputChat = ({
$css={`
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
border-radius: 12px;
border: 1px solid var(--c--theme--colors--greyscale-200);
border: 1px solid var(--c--theme--colors--gray-200);
position: relative;
background: white;
transition: all 0.2s ease;
@@ -429,7 +429,7 @@ export const InputChat = ({
overflowY: 'auto',
transition: 'all 0.2s ease',
borderRadius: '12px',
color: 'var(--c--theme--colors--greyscale-800)',
color: 'var(--c--theme--colors--gray-800)',
lineHeight: '1.5',
}}
onKeyDown={(e) => {
@@ -452,7 +452,7 @@ export const InputChat = ({
right: 1.5rem;
height: 1.5rem;
pointer-events: none;
color: var(--c--theme--colors--greyscale-500);
color: var(--c--theme--colors--gray-500);
font-size: 1rem;
font-family: inherit;
line-height: 1.5;
@@ -620,7 +620,7 @@ export const InputChat = ({
forceWebSearch
? `
.research-web-button {
background-color: var(--c--theme--colors--primary-100) !important;
background-color: var(--c--theme--colors--brand-100) !important;
}
`
: ''
@@ -643,7 +643,7 @@ export const InputChat = ({
$theme="greyscale"
$variation="550"
$css={`
color: ${forceWebSearch ? 'var(--c--theme--colors--primary-600) !important' : 'var(--c--theme--colors--greyscale-600)'}
color: ${forceWebSearch ? 'var(--c--theme--colors--brand-600) !important' : 'var(--c--theme--colors--gray-600)'}
`}
/>
}
src/frontend/apps/conversations/src/features/feedback/Feedback.tsx
+3 -3
View File
@@ -54,7 +54,7 @@ export const Feedback = (_props: { buttonProps?: Partial<ButtonProps> }) => {
/>
<FeedbackButton
href="https://www.tchap.gouv.fr/#/room/!eAHyPLdVHMxNhKAbaC:agent.dinum.tchap.gouv.fr"
href="https://tchap.gouv.fr/#/room/!eAHyPLdVHMxNhKAbaC:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr&via=agent.culture.tchap.gouv.fr&via=agent.education.tchap.gouv.fr"
icon={<TchapIcon />}
title={t('Write on Tchap')}
description={t('Direct exchange with our team')}
@@ -101,8 +101,8 @@ const FeedbackButton = ({
align-items: center;
transition: all 0.2s ease;
cursor: pointer;
border: 1px solid var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--greyscale-600) !important;
border: 1px solid var(--c--theme--colors--gray-100);
color: var(--c--theme--colors--gray-600) !important;
&:hover {
border-color: #b6d7fb;
src/frontend/apps/conversations/src/features/left-panel/components/ConversationItemActions.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export const ConversationItemActions = ({
$variation="600"
$css={css`
font-size: 1rem;
color: var(--c--theme--colors--primary-text-text);
color: var(--c--theme--colors--brand-600);
pointer-events: none;
`}
/>
src/frontend/apps/conversations/src/pages/globals.css
+10 -10
View File
@@ -67,13 +67,13 @@ nextjs-portal {
}
.c__button--tertiary {
border: 1px solid var(--c--theme--colors--greyscale-150) !important;
border: 1px solid var(--c--theme--colors--gray-150) !important;
}
.c__button--bordered,
.c__button--bordered:hover,
.c__button--bordered:focus {
border: 1px solid var(--c--theme--colors--greyscale-200) !important;
border: 1px solid var(--c--theme--colors--gray-200) !important;
background-color: #fff !important;
}
@@ -87,7 +87,7 @@ nextjs-portal {
.c__button--neutral {
transition: background-color 0.4s !important;
color: var(--c--theme--colors--greyscale-550) !important;
color: var(--c--theme--colors--gray-550) !important;
font-weight: 500 !important;
cursor: pointer !important;
background-color: inherit !important;
@@ -139,11 +139,11 @@ nextjs-portal {
}
ul a {
color: var(--c--theme--colors--greyscale-700) !important;
color: var(--c--theme--colors--gray-700) !important;
}
ul a:hover {
color: var(--c--theme--colors--primary-800) !important;
color: var(--c--theme--colors--brand-800) !important;
}
@keyframes fade-in {
@@ -200,15 +200,15 @@ ul a:hover {
}
.c__button:disabled {
background-color: var(--c--theme--colors--greyscale-100) !important;
color: var(--c--theme--colors--greyscale-300) !important;
background-color: var(--c--theme--colors--gray-100) !important;
color: var(--c--theme--colors--gray-300) !important;
}
.c__button--stop {
font-size: 0.8rem;
padding-right: 9px;
background-color: var(--c--theme--colors--greyscale-550) !important;
color: var(--c--theme--colors--greyscale-050) !important;
background-color: var(--c--theme--colors--gray-550) !important;
color: var(--c--theme--colors--gray-050) !important;
}
@media (width <= 768px) {
@@ -240,7 +240,7 @@ figure[data-rehype-pretty-code-figure] {
figure[data-rehype-pretty-code-figure] > pre {
margin: 0;
border-radius: 8px;
border: 1px solid var(--c--theme--colors--greyscale-500);
border: 1px solid var(--c--theme--colors--gray-500);
padding: clamp(0.75rem, 2vw, 1rem);
overflow-x: auto;
}
src/frontend/apps/conversations/src/utils/styleBuilder.ts
+7 -7
View File
@@ -10,16 +10,16 @@ const {
bx,
l,
...spacingsLight
} = tokens.themes.default.theme.spacings;
} = tokens.themes.default.globals.spacings;
/* eslint-enable @typescript-eslint/no-unused-vars */
const spacings = {
xtiny: tokens.themes.default.theme.spacings['st'],
tiny: tokens.themes.default.theme.spacings['t'],
small: tokens.themes.default.theme.spacings['s'],
big: tokens.themes.default.theme.spacings['b'],
xbig: tokens.themes.default.theme.spacings['bx'],
large: tokens.themes.default.theme.spacings['l'],
xtiny: tokens.themes.default.globals.spacings['st'],
tiny: tokens.themes.default.globals.spacings['t'],
small: tokens.themes.default.globals.spacings['s'],
big: tokens.themes.default.globals.spacings['b'],
xbig: tokens.themes.default.globals.spacings['bx'],
large: tokens.themes.default.globals.spacings['l'],
...spacingsLight,
};