b5f0f06ea3
We want to desaturate the images system in the generic theme to make them less colorful and more in line with the overall theme. We added a special class to the images that need to be desaturated. Other property then desaturated can be apply depending on the theme.
247 lines
6.6 KiB
TypeScript
247 lines
6.6 KiB
TypeScript
import { cunninghamConfig as tokens } 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',
|
|
};
|
|
tokens.themes.default.theme.colors = {
|
|
...tokens.themes.default.theme.colors,
|
|
...customColors,
|
|
};
|
|
|
|
tokens.themes.default.theme = {
|
|
...tokens.themes.default.theme,
|
|
...{
|
|
logo: {
|
|
src: '',
|
|
alt: '',
|
|
widthHeader: '',
|
|
widthFooter: '',
|
|
},
|
|
},
|
|
};
|
|
|
|
tokens.themes.default.components = {
|
|
...tokens.themes.default.components,
|
|
...{
|
|
'la-gaufre': false,
|
|
'home-proconnect': false,
|
|
beta: false,
|
|
'image-system-filter': '',
|
|
},
|
|
};
|
|
|
|
const dsfrTheme = {
|
|
dsfr: {
|
|
theme: {
|
|
colors: {
|
|
'secondary-icon': '#C9191E',
|
|
},
|
|
logo: {
|
|
src: '/assets/logo-gouv.svg',
|
|
widthHeader: '110px',
|
|
widthFooter: '220px',
|
|
alt: 'Gouvernement Logo',
|
|
},
|
|
},
|
|
components: {
|
|
'la-gaufre': true,
|
|
'home-proconnect': true,
|
|
beta: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
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-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',
|
|
},
|
|
},
|
|
},
|
|
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)',
|
|
},
|
|
},
|
|
},
|
|
'image-system-filter': 'saturate(0.2)',
|
|
},
|
|
},
|
|
};
|
|
|
|
const docsTokens = {
|
|
...tokens,
|
|
themes: {
|
|
...tokens.themes,
|
|
...dsfrTheme,
|
|
...genericTheme,
|
|
},
|
|
};
|
|
|
|
export default docsTokens;
|