diff --git a/CHANGELOG.md b/CHANGELOG.md index a65e887..8e75f24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to ### Added +- ✨(front) add ui kit - 🧱(files) allow to use S3 storage without external access #849 ### Changed diff --git a/src/frontend/apps/conversations/cunningham.ts b/src/frontend/apps/conversations/cunningham.ts index ee74fa4..8138be6 100644 --- a/src/frontend/apps/conversations/cunningham.ts +++ b/src/frontend/apps/conversations/cunningham.ts @@ -1,474 +1,862 @@ -import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit'; +import { getThemesFromGlobals } from '@gouvfr-lasuite/cunningham-tokens'; -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', +export const commonTokenOverrides = { + components: { + favicon: { + 'png-light': '/assets/favicon-light.png', + 'png-dark': '/assets/favicon-dark.png', + }, + modal: { + 'width-small': '342px', + }, + tooltip: { + padding: '4px 8px', + }, + button: { + 'medium-height': '40px', + 'medium-text-height': '40px', + 'border-radius': '4px', + 'border-radius--active': '4px', + 'border-radius--focus': '4px', + }, + datagrid: { + 'header--color': 'ref(contextuals.content.semantic.neutral.primary)', + 'header--size': '12px', + 'header--weight': '500', + 'body--background-color-hover': + 'ref(contextuals.background.semantic.neutral.tertiary)', + }, + 'forms-checkbox': { + 'font-size': 'ref(globals.font.sizes.sm)', + }, + badge: { + 'font-size': 'ref(globals.font.sizes.xs)', + 'border-radius': '12px', + 'padding-inline': 'ref(globals.spacings.xs)', + 'padding-block': 'ref(globals.spacings.2xs)', + accent: { + 'background-color': + 'ref(contextuals.background.semantic.brand.secondary)', + color: 'ref(contextuals.content.semantic.brand.secondary)', + }, + neutral: { + 'background-color': + 'ref(contextuals.background.semantic.neutral.secondary)', + color: 'ref(contextuals.content.semantic.neutral.secondary)', + }, + danger: { + 'background-color': + 'ref(contextuals.background.semantic.error.secondary)', + color: 'ref(contextuals.content.semantic.error.secondary)', + }, + success: { + 'background-color': + 'ref(contextuals.background.semantic.success.secondary)', + color: 'ref(contextuals.content.semantic.success.secondary)', + }, + warning: { + 'background-color': + 'ref(contextuals.background.semantic.warning.secondary)', + color: 'ref(contextuals.content.semantic.warning.secondary)', + }, + info: { + 'background-color': + 'ref(contextuals.background.semantic.info.secondary)', + color: 'ref(contextuals.content.semantic.info.secondary)', + }, + }, + }, }; -tokens.themes.default.theme = { - ...tokens.themes.default.theme, - ...{ +export const commonGlobals = { + components: { + 'la-gaufre': false, + 'home-proconnect': false, logo: { src: '', alt: '', widthHeader: '', widthFooter: '', }, - colors: { - ...tokens.themes.default.theme.colors, - ...customColors, + }, + 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, + }, + families: { + accent: 'Marianne, Inter, Roboto Flex Variable, sans-serif', + base: 'Marianne, Inter, Roboto Flex Variable, sans-serif', + }, + }, + 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', + '2xl': '3rem', + xxxl: '3.5rem', + '3xl': '3.5rem', + '4xl': '4rem', + '5xl': '4.5rem', + '6xl': '6rem', + '7xl': '7.5rem', + }, + breakpoints: { + xxs: '320px', + xs: '480px', + mobile: '768px', + tablet: '1024px', + }, +}; + +export const whiteLabelGlobals = { + colors: { + 'logo-1-light': '#4844AD', + 'logo-2-light': '#4844AD', + 'logo-1-dark': '#BEC5F0', + 'logo-2-dark': '#BEC5F0', + 'brand-050': '#EEF1FA', + 'brand-100': '#DDE2F5', + 'brand-150': '#CED3F1', + 'brand-200': '#BEC5F0', + 'brand-250': '#AFB5F1', + 'brand-300': '#A0A5F6', + 'brand-350': '#8F94FD', + 'brand-400': '#8184FC', + 'brand-450': '#7576EE', + 'brand-500': '#6969DF', + 'brand-550': '#5E5CD0', + 'brand-600': '#534FC2', + 'brand-650': '#4844AD', + 'brand-700': '#3E3B98', + 'brand-750': '#36347D', + 'brand-800': '#2D2F5F', + 'brand-850': '#262848', + 'brand-900': '#1C1E32', + 'brand-950': '#11131F', + 'gray-000': '#FFFFFF', + 'gray-025': '#F8F8F9', + 'gray-050': '#F0F0F3', + 'gray-100': '#E2E2EA', + 'gray-150': '#D3D4E0', + 'gray-200': '#C5C6D5', + 'gray-250': '#B7B7CB', + 'gray-300': '#A9A9BF', + 'gray-350': '#9C9CB2', + 'gray-400': '#8F8FA4', + 'gray-450': '#828297', + 'gray-500': '#75758A', + 'gray-550': '#69697D', + 'gray-600': '#5D5D70', + 'gray-650': '#515164', + 'gray-700': '#454558', + 'gray-750': '#3A3A4C', + 'gray-800': '#2F303D', + 'gray-850': '#25252F', + 'gray-900': '#1B1B23', + 'gray-950': '#111114', + 'gray-1000': '#000000', + 'info-050': '#EAF2F9', + 'info-100': '#D5E4F3', + 'info-150': '#BFD7F0', + 'info-200': '#A7CAEE', + 'info-250': '#8DBDEF', + 'info-300': '#6EB0F2', + 'info-350': '#50A2F5', + 'info-400': '#3593F4', + 'info-450': '#1185ED', + 'info-500': '#0077DE', + 'info-550': '#0069CF', + 'info-600': '#005BC0', + 'info-650': '#0D4EAA', + 'info-700': '#124394', + 'info-750': '#163878', + 'info-800': '#192F5A', + 'info-850': '#192541', + 'info-900': '#141B2D', + 'info-950': '#0C111C', + 'success-050': '#E8F1EA', + 'success-100': '#CFE4D4', + 'success-150': '#BAD9C1', + 'success-200': '#A2CFAD', + 'success-250': '#86C597', + 'success-300': '#6CBA83', + 'success-350': '#4FB070', + 'success-400': '#40A363', + 'success-450': '#309556', + 'success-500': '#1E884A', + 'success-550': '#027B3E', + 'success-600': '#016D31', + 'success-650': '#006024', + 'success-700': '#005317', + 'success-750': '#0D4511', + 'success-800': '#11380E', + 'success-850': '#132A11', + 'success-900': '#101E0F', + 'success-950': '#091209', + 'warning-050': '#F8F0E9', + 'warning-100': '#F1E0D3', + 'warning-150': '#ECD0BC', + 'warning-200': '#E8C0A4', + 'warning-250': '#E8AE8A', + 'warning-300': '#EB9970', + 'warning-350': '#E98456', + 'warning-400': '#E57036', + 'warning-450': '#DA5E18', + 'warning-500': '#CB5000', + 'warning-550': '#BC4200', + 'warning-600': '#AD3300', + 'warning-650': '#9E2300', + 'warning-700': '#882011', + 'warning-750': '#731E16', + 'warning-800': '#58201A', + 'warning-850': '#401D18', + 'warning-900': '#2E1714', + 'warning-950': '#1D0F0D', + 'error-050': '#F9EFEC', + 'error-100': '#F4DFD9', + 'error-150': '#F0CEC6', + 'error-200': '#EEBCB2', + 'error-250': '#EEA99D', + 'error-300': '#EF9486', + 'error-350': '#F37C6E', + 'error-400': '#F65F53', + 'error-450': '#F0463D', + 'error-500': '#E82322', + 'error-550': '#D7010E', + 'error-600': '#C00100', + 'error-650': '#AA0000', + 'error-700': '#910C06', + 'error-750': '#731E16', + 'error-800': '#58201A', + 'error-850': '#401D18', + 'error-900': '#2E1714', + 'error-950': '#1D0F0D', + 'red-050': '#FAEFEE', + 'red-100': '#F4DEDD', + 'red-150': '#F1CDCB', + 'red-200': '#EFBBBA', + 'red-250': '#EEA8A8', + 'red-300': '#F09394', + 'red-350': '#F37B7E', + 'red-400': '#EF6569', + 'red-450': '#E94A55', + 'red-500': '#DA3B49', + 'red-550': '#CA2A3C', + 'red-600': '#BB1330', + 'red-650': '#A90021', + 'red-700': '#910A13', + 'red-750': '#731E16', + 'red-800': '#58201A', + 'red-850': '#411D18', + 'red-900': '#2E1714', + 'red-950': '#1D0F0D', + 'orange-050': '#F8F0E9', + 'orange-100': '#F1E0D3', + 'orange-150': '#ECD0BD', + 'orange-200': '#EABFA6', + 'orange-250': '#EBAC90', + 'orange-300': '#EC9772', + 'orange-350': '#E5845A', + 'orange-400': '#D6774D', + 'orange-450': '#C86A40', + 'orange-500': '#B95D33', + 'orange-550': '#AB5025', + 'orange-600': '#9D4315', + 'orange-650': '#8F3600', + 'orange-700': '#812900', + 'orange-750': '#6C2511', + 'orange-800': '#572017', + 'orange-850': '#401D18', + 'orange-900': '#2E1714', + 'orange-950': '#1D0F0D', + 'brown-050': '#F6F0E8', + 'brown-100': '#F1E0D3', + 'brown-150': '#EBD0BA', + 'brown-200': '#E2C0A6', + 'brown-250': '#D4B398', + 'brown-300': '#C6A58B', + 'brown-350': '#B8987E', + 'brown-400': '#AA8B71', + 'brown-450': '#9D7E65', + 'brown-500': '#8F7158', + 'brown-550': '#82654C', + 'brown-600': '#765841', + 'brown-650': '#694C35', + 'brown-700': '#5D412A', + 'brown-750': '#51361E', + 'brown-800': '#452A13', + 'brown-850': '#392008', + 'brown-900': '#29180A', + 'brown-950': '#1B0F08', + 'yellow-050': '#F3F0E7', + 'yellow-100': '#E9E2CF', + 'yellow-150': '#E1D4B7', + 'yellow-200': '#D9C599', + 'yellow-250': '#D2B677', + 'yellow-300': '#CAA756', + 'yellow-350': '#C2972E', + 'yellow-400': '#B98900', + 'yellow-450': '#AB7B00', + 'yellow-500': '#9D6E00', + 'yellow-550': '#916100', + 'yellow-600': '#855400', + 'yellow-650': '#784700', + 'yellow-700': '#6C3A00', + 'yellow-750': '#5F2E00', + 'yellow-800': '#512302', + 'yellow-850': '#3E1D10', + 'yellow-900': '#2D1711', + 'yellow-950': '#1D0F0D', + 'green-050': '#E6F1E9', + 'green-100': '#CFE4D5', + 'green-150': '#B8D8C1', + 'green-200': '#A0CFAE', + 'green-250': '#84C59A', + 'green-300': '#65BA86', + 'green-350': '#45B173', + 'green-400': '#23A562', + 'green-450': '#029755', + 'green-500': '#008948', + 'green-550': '#017B3B', + 'green-600': '#006E2E', + 'green-650': '#006022', + 'green-700': '#005314', + 'green-750': '#0D4510', + 'green-800': '#11380E', + 'green-850': '#132A11', + 'green-900': '#101E0F', + 'green-950': '#091209', + 'blue-1-050': '#EBF1F9', + 'blue-1-100': '#D6E4F4', + 'blue-1-150': '#C1D7F0', + 'blue-1-200': '#AACAEF', + 'blue-1-250': '#8FBCEF', + 'blue-1-300': '#7CAFEB', + 'blue-1-350': '#68A1E4', + 'blue-1-400': '#5B94D6', + 'blue-1-450': '#4E86C7', + 'blue-1-500': '#4279B9', + 'blue-1-550': '#356CAC', + 'blue-1-600': '#28609E', + 'blue-1-650': '#1B5390', + 'blue-1-700': '#0B4783', + 'blue-1-750': '#0F3C6E', + 'blue-1-800': '#133059', + 'blue-1-850': '#152641', + 'blue-1-900': '#121C2D', + 'blue-1-950': '#0B111C', + 'blue-2-050': '#E7F3F4', + 'blue-2-100': '#CEE7E9', + 'blue-2-150': '#B2DCE0', + 'blue-2-200': '#91D1D7', + 'blue-2-250': '#68C7D0', + 'blue-2-300': '#43BBC5', + 'blue-2-350': '#00AFBA', + 'blue-2-400': '#01A0AA', + 'blue-2-450': '#00929D', + 'blue-2-500': '#00848F', + 'blue-2-550': '#007682', + 'blue-2-600': '#016874', + 'blue-2-650': '#005B67', + 'blue-2-700': '#004E5A', + 'blue-2-750': '#00424E', + 'blue-2-800': '#003642', + 'blue-2-850': '#002A38', + 'blue-2-900': '#061E28', + 'blue-2-950': '#071219', + 'purple-050': '#F7F0F6', + 'purple-100': '#EEE0EE', + 'purple-150': '#E7D1E7', + 'purple-200': '#DBBFE4', + 'purple-250': '#D3AEE2', + 'purple-300': '#CB99E1', + 'purple-350': '#C188D9', + 'purple-400': '#B47BCB', + 'purple-450': '#A66EBD', + 'purple-500': '#9961AF', + 'purple-550': '#8B55A1', + 'purple-600': '#7E4894', + 'purple-650': '#723C87', + 'purple-700': '#633376', + 'purple-750': '#552A65', + 'purple-800': '#452551', + 'purple-850': '#35213D', + 'purple-900': '#261A2C', + 'purple-950': '#17111C', + 'pink-050': '#F8EFF4', + 'pink-100': '#F0DFEA', + 'pink-150': '#EACEDF', + 'pink-200': '#E9BBD1', + 'pink-250': '#E9A7C2', + 'pink-300': '#E095B4', + 'pink-350': '#D685A8', + 'pink-400': '#C7799B', + 'pink-450': '#B86C8D', + 'pink-500': '#AA5F80', + 'pink-550': '#9C5374', + 'pink-600': '#8E4767', + 'pink-650': '#813B5B', + 'pink-700': '#732E4F', + 'pink-750': '#632643', + 'pink-800': '#521F38', + 'pink-850': '#3E1C2B', + 'pink-900': '#2D171F', + 'pink-950': '#1C0E12', + 'black-000': '#1B1B2300', + 'black-050': '#1B1B230D', + 'black-100': '#1B1B231A', + 'black-150': '#1B1B2326', + 'black-200': '#1B1B2333', + 'black-250': '#1B1B2340', + 'black-300': '#1B1B234D', + 'black-350': '#1B1B2359', + 'black-400': '#1B1B2366', + 'black-450': '#1B1B2373', + 'black-500': '#1B1B2380', + 'black-550': '#1B1B238C', + 'black-600': '#1B1B2399', + 'black-650': '#1B1B23A6', + 'black-700': '#1B1B23B2', + 'black-750': '#1B1B23BF', + 'black-800': '#1B1B23CC', + 'black-850': '#1B1B23D9', + 'black-900': '#1B1B23E5', + 'black-950': '#111114F2', + 'white-000': '#F8F8F900', + 'white-050': '#F8F8F90D', + 'white-100': '#F8F8F91A', + 'white-150': '#F8F8F926', + 'white-200': '#F8F8F933', + 'white-250': '#F8F8F940', + 'white-300': '#F8F8F94D', + 'white-350': '#F8F8F959', + 'white-400': '#F8F8F966', + 'white-450': '#F8F8F973', + 'white-500': '#F8F8F980', + 'white-550': '#F8F8F98C', + 'white-600': '#F8F8F999', + 'white-650': '#F8F8F9A6', + 'white-700': '#F8F8F9B2', + 'white-750': '#F8F8F9BF', + 'white-800': '#F8F8F9CC', + 'white-850': '#F8F8F9D9', + 'white-900': '#F8F8F9E5', + 'white-950': '#F8F8F9F2', + 'white-975': '#F8F8F9F9', + }, + ...commonGlobals, + font: { + ...commonGlobals.font, + families: { + base: 'Hanken Grotesk, Inter, Roboto Flex Variable, sans-serif', + accent: 'Hanken Grotesk, Inter, Roboto Flex Variable, sans-serif', }, }, }; -tokens.themes.default.components = { - ...tokens.themes.default.components, - ...{ - modal: { - 'width-small': '360px', - }, - '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', +export const dsfrGlobals = { + ...commonGlobals, + components: { + ...commonGlobals.components, + 'la-gaufre': true, + 'home-proconnect': true, + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', }, }, + colors: { + 'logo-1': '#2845C1', + 'logo-2': '#C83F49', + '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', + 'gray-100': '#DFE2EA', + 'gray-150': '#CFD5DE', + 'gray-200': '#C1C7D3', + 'gray-250': '#B2B9C7', + 'gray-300': '#A4ABBC', + 'gray-350': '#969EB0', + 'gray-400': '#8891A4', + 'gray-450': '#7B8498', + 'gray-500': '#6D778C', + 'gray-550': '#626A80', + 'gray-600': '#555E74', + 'gray-650': '#4A5267', + 'gray-700': '#3F4759', + 'gray-750': '#363B4C', + 'gray-800': '#2B303D', + 'gray-850': '#222631', + 'gray-900': '#181B24', + 'gray-950': '#0F1117', + 'gray-1000': '#000000', + 'info-050': '#E7F2FF', + 'info-100': '#CFE5FF', + 'info-150': '#B7D7FF', + 'info-200': '#A0CAFE', + 'info-250': '#8CBCF9', + 'info-300': '#77AEF4', + 'info-350': '#63A0EE', + 'info-400': '#5092E7', + 'info-450': '#4185DC', + 'info-500': '#3677CC', + 'info-550': '#2F6ABB', + 'info-600': '#265EAA', + 'info-650': '#28528F', + 'info-700': '#274775', + 'info-750': '#243C5E', + 'info-800': '#20314A', + 'info-850': '#1B2637', + 'info-900': '#141C27', + 'info-950': '#0D1118', + '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', + 'warning-050': '#FFEEDF', + 'warning-100': '#FFDCBE', + 'warning-150': '#FFCA9C', + 'warning-200': '#FFB778', + 'warning-250': '#FDA54F', + 'warning-300': '#F59425', + 'warning-350': '#E78613', + 'warning-400': '#D7790C', + 'warning-450': '#C86C08', + 'warning-500': '#B85F03', + 'warning-550': '#A75400', + 'warning-600': '#984800', + 'warning-650': '#814112', + 'warning-700': '#6C3A19', + 'warning-750': '#58321C', + 'warning-800': '#452A1A', + 'warning-850': '#352117', + 'warning-900': '#261813', + 'warning-950': '#170F0C', + 'error-050': '#FFEDEB', + 'error-100': '#FFDAD7', + 'error-150': '#FFC7C2', + 'error-200': '#FFB3AD', + 'error-250': '#FF9F99', + 'error-300': '#FF8984', + 'error-350': '#FF706E', + 'error-400': '#FB5759', + 'error-450': '#F63A45', + 'error-500': '#E32C39', + 'error-550': '#CF202D', + 'error-600': '#BD0F23', + 'error-650': '#9D2227', + 'error-700': '#812727', + 'error-750': '#672624', + 'error-800': '#512220', + 'error-850': '#3D1C1B', + 'error-900': '#2A1614', + 'error-950': '#190E0D', + 'red-050': '#FFEDEB', + 'red-100': '#FFDAD7', + 'red-150': '#FFC7C2', + 'red-200': '#FFB3AD', + 'red-250': '#FF9F99', + 'red-300': '#FF8984', + 'red-350': '#FF706E', + 'red-400': '#FB5759', + 'red-450': '#F63A45', + 'red-500': '#E32C39', + 'red-550': '#CF202D', + 'red-600': '#BD0F23', + 'red-650': '#9D2227', + 'red-700': '#812727', + 'red-750': '#672624', + 'red-800': '#512220', + 'red-850': '#3D1C1B', + 'red-900': '#410003', + 'red-950': '#190E0D', + 'orange-050': '#FCEDEB', + 'orange-100': '#F8DCD7', + 'orange-150': '#F1CCC5', + 'orange-200': '#EABCB4', + 'orange-250': '#E2ACA2', + 'orange-300': '#DA9C92', + 'orange-350': '#D28C81', + 'orange-400': '#CA7C70', + 'orange-450': '#BE6E62', + 'orange-500': '#AE6257', + 'orange-550': '#9E564D', + 'orange-600': '#8F4B42', + 'orange-650': '#79443D', + 'orange-700': '#643C37', + 'orange-750': '#513430', + 'orange-800': '#412B28', + 'orange-850': '#312220', + 'orange-900': '#231918', + 'orange-950': '#150F0F', + 'brown-050': '#F9EFEA', + 'brown-100': '#F3DFD3', + 'brown-150': '#EACFC1', + 'brown-200': '#E2BFAE', + 'brown-250': '#D8B19C', + 'brown-300': '#D0A189', + 'brown-350': '#C3937B', + 'brown-400': '#B5866D', + 'brown-450': '#A77A62', + 'brown-500': '#996D57', + 'brown-550': '#8B614D', + 'brown-600': '#7C5542', + 'brown-650': '#6A4C3C', + 'brown-700': '#594236', + 'brown-750': '#49382F', + 'brown-800': '#3B2E28', + 'brown-850': '#2D2420', + 'brown-900': '#201A18', + 'brown-950': '#13100F', + 'yellow-050': '#FDF1C5', + 'yellow-100': '#FBE18E', + 'yellow-150': '#F4D261', + 'yellow-200': '#EAC244', + 'yellow-250': '#DFB41B', + 'yellow-300': '#D1A516', + 'yellow-350': '#C49711', + 'yellow-400': '#B78A0C', + 'yellow-450': '#A87D07', + 'yellow-500': '#9B6F02', + 'yellow-550': '#8D6300', + 'yellow-600': '#7F5600', + 'yellow-650': '#6E4C11', + 'yellow-700': '#5D4219', + 'yellow-750': '#4D371B', + 'yellow-800': '#3D2E1A', + 'yellow-850': '#2F2417', + 'yellow-900': '#221A12', + 'yellow-950': '#14100C', + 'green-050': '#E7F9B3', + 'green-100': '#D5EC98', + 'green-150': '#C5DE86', + 'green-200': '#B5D174', + 'green-250': '#A5C464', + 'green-300': '#95B755', + 'green-350': '#85AA45', + 'green-400': '#769D39', + 'green-450': '#688F30', + 'green-500': '#5A8228', + 'green-550': '#4D7621', + 'green-600': '#416919', + 'green-650': '#3A5B20', + 'green-700': '#324E22', + 'green-750': '#2C4122', + 'green-800': '#24351D', + 'green-850': '#1D2919', + 'green-900': '#161E13', + 'green-950': '#0E120C', + 'blue-1-050': '#E7F2FF', + 'blue-1-100': '#CFE5FF', + 'blue-1-150': '#B7D7FF', + 'blue-1-200': '#A0CAFE', + 'blue-1-250': '#8CBCF9', + 'blue-1-300': '#77AEF4', + 'blue-1-350': '#63A0EE', + 'blue-1-400': '#5092E7', + 'blue-1-450': '#4185DC', + 'blue-1-500': '#3677CC', + 'blue-1-550': '#2F6ABB', + 'blue-1-600': '#265EAA', + 'blue-1-650': '#28528F', + 'blue-1-700': '#274775', + 'blue-1-750': '#243C5E', + 'blue-1-800': '#20314A', + 'blue-1-850': '#1B2637', + 'blue-1-900': '#141C27', + 'blue-1-950': '#0D1118', + 'blue-2-050': '#E2F4FD', + 'blue-2-100': '#C4E8F8', + 'blue-2-150': '#AADCF2', + 'blue-2-200': '#93CFEB', + 'blue-2-250': '#7CC2E2', + 'blue-2-300': '#6CB4D6', + 'blue-2-350': '#5CA7C9', + 'blue-2-400': '#5099BC', + 'blue-2-450': '#458BAE', + 'blue-2-500': '#3A7EA0', + 'blue-2-550': '#327191', + 'blue-2-600': '#286483', + 'blue-2-650': '#2B5770', + 'blue-2-700': '#294A5E', + 'blue-2-750': '#263E4D', + 'blue-2-800': '#22323D', + 'blue-2-850': '#1C272E', + 'blue-2-900': '#151D21', + 'blue-2-950': '#0E1114', + 'purple-050': '#F5EEFF', + 'purple-100': '#ECDCFF', + 'purple-150': '#E2CBFF', + 'purple-200': '#D9B9FF', + 'purple-250': '#D0A7FF', + 'purple-300': '#C894FE', + 'purple-350': '#BE83FA', + 'purple-400': '#B570F5', + 'purple-450': '#AB5EF0', + 'purple-500': '#A04BE8', + 'purple-550': '#933CDB', + 'purple-600': '#8530C8', + 'purple-650': '#7033A5', + 'purple-700': '#5D3185', + 'purple-750': '#4C2C6A', + 'purple-800': '#3C2652', + 'purple-850': '#2D203C', + 'purple-900': '#21182A', + 'purple-950': '#130F19', + 'pink-050': '#FFEBF6', + 'pink-100': '#FFD8ED', + 'pink-150': '#FCC4E3', + 'pink-200': '#F7B2D9', + 'pink-250': '#F29FCE', + 'pink-300': '#ED8CC3', + 'pink-350': '#E779B8', + 'pink-400': '#E264AD', + 'pink-450': '#D2579E', + 'pink-500': '#C24B8E', + 'pink-550': '#B0417F', + 'pink-600': '#9F3670', + 'pink-650': '#873560', + 'pink-700': '#6F3250', + 'pink-750': '#5A2C43', + 'pink-800': '#472635', + 'pink-850': '#351F29', + 'pink-900': '#26171D', + 'pink-950': '#170F12', + 'black-000': '#181B2400', + 'black-050': '#181B240D', + 'black-100': '#181B241A', + 'black-150': '#181B2426', + 'black-200': '#181B2433', + 'black-250': '#181B2440', + 'black-300': '#181B244D', + 'black-350': '#181B2459', + 'black-400': '#181B2466', + 'black-450': '#181B2473', + 'black-500': '#181B2480', + 'black-550': '#181B248C', + 'black-600': '#181B2499', + 'black-650': '#181B24A6', + 'black-700': '#181B24B2', + 'black-750': '#181B24BF', + 'black-800': '#181B24CC', + 'black-850': '#181B24D9', + 'black-900': '#181B24E5', + 'black-950': '#0F1117F2', + 'white-000': '#F6F8F900', + 'white-050': '#F6F8F90D', + 'white-100': '#F6F8F91A', + 'white-150': '#F6F8F926', + 'white-200': '#F6F8F933', + 'white-250': '#F6F8F940', + 'white-300': '#F6F8F94D', + 'white-350': '#F6F8F959', + 'white-400': '#F6F8F966', + 'white-450': '#F6F8F973', + 'white-500': '#F6F8F980', + 'white-550': '#F6F8F98C', + 'white-600': '#F6F8F999', + 'white-650': '#F6F8F9A6', + 'white-700': '#F6F8F9B2', + 'white-750': '#F6F8F9BF', + 'white-800': '#F6F8F9CC', + 'white-850': '#F6F8F9D9', + 'white-900': '#F6F8F9E5', + 'white-950': '#F6F8F9F2', + 'white-975': '#F6F8F9F9', + }, }; -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 whiteLabelThemes = getThemesFromGlobals(whiteLabelGlobals, { + overrides: commonTokenOverrides, +}); +const dsfrThemes = getThemesFromGlobals(dsfrGlobals, { + overrides: commonTokenOverrides, +}); -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', - }, - }, - }, - 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)', - }, - }, - }, - modal: { - 'width-small': '360px', - }, - 'image-system-filter': 'saturate(0.2)', - }, - }, -}; +if (dsfrThemes.dark?.globals?.colors) { + dsfrThemes.dark.globals.colors['logo-1'] = '#95ABFF'; + dsfrThemes.dark.globals.colors['logo-2'] = '#E78087'; +} -const config = { - ...tokens, +console.log(dsfrThemes); + +const themes = { themes: { - ...tokens.themes, - ...dsfrTheme, - ...genericTheme, + default: whiteLabelThemes.light, + dark: whiteLabelThemes.dark, + dsfr: dsfrThemes.light, + 'dsfr-dark': dsfrThemes.dark, }, }; +const config = { ...themes }; + export default config; diff --git a/src/frontend/apps/conversations/package.json b/src/frontend/apps/conversations/package.json index b06736c..e0e32a5 100644 --- a/src/frontend/apps/conversations/package.json +++ b/src/frontend/apps/conversations/package.json @@ -22,9 +22,10 @@ "@emoji-mart/data": "1.2.1", "@emoji-mart/react": "1.1.1", "@fontsource/material-icons": "5.2.5", + "@gouvfr-lasuite/cunningham-tokens": "^3.1.0", "@gouvfr-lasuite/integration": "1.0.3", - "@gouvfr-lasuite/ui-kit": "0.7.0", - "@openfun/cunningham-react": "3.1.0", + "@gouvfr-lasuite/ui-kit": "0.18.4", + "@openfun/cunningham-react": "4.0.0", "@react-pdf/renderer": "4.3.0", "@sentry/nextjs": "9.26.0", "@tanstack/react-query": "5.80.5", diff --git a/src/frontend/apps/conversations/public/assets/icon-assistant.svg b/src/frontend/apps/conversations/public/assets/icon-assistant.svg index df2bc17..365f01b 100644 --- a/src/frontend/apps/conversations/public/assets/icon-assistant.svg +++ b/src/frontend/apps/conversations/public/assets/icon-assistant.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/src/frontend/apps/conversations/src/assets/icons/left-panel-bold.svg b/src/frontend/apps/conversations/src/assets/icons/left-panel-bold.svg index fab0e9a..05fc382 100644 --- a/src/frontend/apps/conversations/src/assets/icons/left-panel-bold.svg +++ b/src/frontend/apps/conversations/src/assets/icons/left-panel-bold.svg @@ -1,3 +1,3 @@ - + diff --git a/src/frontend/apps/conversations/src/assets/logo/assistant.svg b/src/frontend/apps/conversations/src/assets/logo/assistant.svg index 7d3e00c..1a821e5 100644 --- a/src/frontend/apps/conversations/src/assets/logo/assistant.svg +++ b/src/frontend/apps/conversations/src/assets/logo/assistant.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/src/frontend/apps/conversations/src/assets/logo/logo-assistant-beta.svg b/src/frontend/apps/conversations/src/assets/logo/logo-assistant-beta.svg index 156042d..ef384eb 100644 --- a/src/frontend/apps/conversations/src/assets/logo/logo-assistant-beta.svg +++ b/src/frontend/apps/conversations/src/assets/logo/logo-assistant-beta.svg @@ -1,21 +1,21 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + diff --git a/src/frontend/apps/conversations/src/assets/logo/logo-assistant.svg b/src/frontend/apps/conversations/src/assets/logo/logo-assistant.svg index 8ad8fa9..c950dfe 100644 --- a/src/frontend/apps/conversations/src/assets/logo/logo-assistant.svg +++ b/src/frontend/apps/conversations/src/assets/logo/logo-assistant.svg @@ -1,30 +1,30 @@ - - - - - - - + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - + + diff --git a/src/frontend/apps/conversations/src/assets/logo/logo-beta.svg b/src/frontend/apps/conversations/src/assets/logo/logo-beta.svg index 1d24da0..499f2d7 100644 --- a/src/frontend/apps/conversations/src/assets/logo/logo-beta.svg +++ b/src/frontend/apps/conversations/src/assets/logo/logo-beta.svg @@ -1,20 +1,20 @@ - - - - - - - + + + + + + + - - - - + + + + - - + + diff --git a/src/frontend/apps/conversations/src/components/Box.tsx b/src/frontend/apps/conversations/src/components/Box.tsx index 84e3205..dd57c6f 100644 --- a/src/frontend/apps/conversations/src/components/Box.tsx +++ b/src/frontend/apps/conversations/src/components/Box.tsx @@ -14,8 +14,10 @@ export interface BoxProps { as?: HTMLElementType; $align?: CSSProperties['alignItems']; $background?: CSSProperties['background']; + $border?: CSSProperties['border']; $color?: CSSProperties['color']; $css?: string | RuleSet; + $cursor?: CSSProperties['cursor']; $direction?: CSSProperties['flexDirection']; $display?: CSSProperties['display']; $effect?: 'show' | 'hide'; @@ -37,28 +39,44 @@ export interface BoxProps { $shrink?: CSSProperties['flexShrink']; $transition?: CSSProperties['transition']; $width?: CSSProperties['width']; - $wrap?: CSSProperties['flexWrap']; $zIndex?: CSSProperties['zIndex']; + $wrap?: CSSProperties['flexWrap']; + // Theming props + $layer?: 'background' | 'content' | 'border'; + $theme?: + | 'brand' + | 'error' + | 'gray' + | 'info' + | 'success' + | 'warning' + | 'neutral' + | 'contextual' + | 'disabled' + | (string & {}); + $scope?: 'surface' | 'semantic' | 'palette' | (string & {}); + $variation?: 'primary' | 'secondary' | 'tertiary' | (string & {}); + $withThemeBG?: boolean; + $withThemeBorder?: boolean; + $withThemeInherited?: boolean; } export type BoxType = ComponentPropsWithRef; export const Box = styled('div')` - display: flex; - flex-direction: column; ${({ $align }) => $align && `align-items: ${$align};`} - ${({ $background }) => $background && `background: ${$background};`} - ${({ $color }) => $color && `color: ${$color};`} - ${({ $direction }) => $direction && `flex-direction: ${$direction};`} - ${({ $display }) => $display && `display: ${$display};`} + ${({ $cursor }) => $cursor && `cursor: ${$cursor};`} + ${({ $direction }) => `flex-direction: ${$direction || 'column'};`} + ${({ $display, as }) => + `display: ${$display || (as?.match('span|input') ? 'inline-flex' : 'flex')};`} ${({ $flex }) => $flex && `flex: ${$flex};`} ${({ $gap }) => $gap && `gap: ${$gap};`} ${({ $height }) => $height && `height: ${$height};`} ${({ $hasTransition }) => $hasTransition && $hasTransition === 'slow' - ? `transition: all 0.5s ease-in-out;` + ? `transition: all 0.5s var(--c--globals--transitions--ease-out);` : $hasTransition - ? `transition: all 0.3s ease-in-out;` + ? `transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);` : ''} ${({ $justify }) => $justify && `justify-content: ${$justify};`} ${({ $margin }) => $margin && stylesMargin($margin)} @@ -72,6 +90,86 @@ export const Box = styled('div')` ${({ $position }) => $position && `position: ${$position};`} ${({ $radius }) => $radius && `border-radius: ${$radius};`} ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`} + ${({ + $layer = 'border', + $theme = 'brand', + $variation = 'primary', + $scope = 'semantic', + $border, + $withThemeBorder, + $withThemeInherited, + }) => { + if ($border) { + return `border: ${$border};`; + } + + if (!$layer || !$scope || !$theme || !$withThemeBorder) { + return ''; + } + + if ($withThemeInherited) { + return `border: inherit;`; + } + + return `border: 1px solid var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`; + }} + ${({ + $layer = 'background', + $theme = 'brand', + $variation = 'primary', + $scope = 'semantic', + $background, + $withThemeBG, + $withThemeInherited, + }) => { + if ($background) { + return `background: ${$background};`; + } + + if (!$layer || !$scope || !$theme || !$withThemeBG) { + return ''; + } + + if ($withThemeInherited) { + return `background: inherit;`; + } + + return `background: var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`; + }} + ${({ + $layer = 'content', + $theme = 'neutral', + $variation = 'primary', + $scope = 'semantic', + $color, + $withThemeBG, + $withThemeInherited, + }) => { + if ($color) { + return `color: ${$color};`; + } + + if (!$layer || !$scope) { + return ''; + } + + // There is a special case when primary with background + if ( + $withThemeBG && + $layer === 'content' && + $scope === 'semantic' && + $variation === 'primary' && + $theme + ) { + $variation = `on-${$theme}`; + } + + if ($withThemeInherited) { + return `color: inherit;`; + } + + return `color: var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`; + }} ${({ $transition }) => $transition && `transition: ${$transition};`} ${({ $width }) => $width && `width: ${$width};`} ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`} @@ -91,7 +189,7 @@ export const Box = styled('div')` return ( effect && ` - transition: all 0.3s ease-in-out; + transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out); ${effect} ` ); diff --git a/src/frontend/apps/conversations/src/components/BoxButton.tsx b/src/frontend/apps/conversations/src/components/BoxButton.tsx index 3b8d775..6443a0e 100644 --- a/src/frontend/apps/conversations/src/components/BoxButton.tsx +++ b/src/frontend/apps/conversations/src/components/BoxButton.tsx @@ -39,12 +39,12 @@ const BoxButton = forwardRef( font-family: inherit; color: ${props.disabled - ? 'var(--c--theme--colors--greyscale-400) !important' + ? 'var(--c--theme--colors--gray-400) !important' : 'inherit'}; ${$css || ''} `} {...props} - className={`--docs--box-button ${props.className || ''}`} + className={`--conversations--box-button ${props.className || ''}`} onClick={(event: React.MouseEvent) => { if (props.disabled) { return; diff --git a/src/frontend/apps/conversations/src/components/Card.tsx b/src/frontend/apps/conversations/src/components/Card.tsx index 9e884bf..ce69885 100644 --- a/src/frontend/apps/conversations/src/components/Card.tsx +++ b/src/frontend/apps/conversations/src/components/Card.tsx @@ -1,26 +1,13 @@ import { PropsWithChildren } from 'react'; -import { css } from 'styled-components'; - -import { useCunninghamTheme } from '@/cunningham'; import { Box, BoxType } from '.'; -export const Card = ({ - children, - $css, - ...props -}: PropsWithChildren) => { - const { colorsTokens } = useCunninghamTheme(); - +export const Card = ({ children, ...props }: PropsWithChildren) => { return ( {children} diff --git a/src/frontend/apps/conversations/src/components/DropButton.tsx b/src/frontend/apps/conversations/src/components/DropButton.tsx index de2cb9f..88e8451 100644 --- a/src/frontend/apps/conversations/src/components/DropButton.tsx +++ b/src/frontend/apps/conversations/src/components/DropButton.tsx @@ -13,11 +13,13 @@ import { useCunninghamTheme } from '@/cunningham'; import { BoxProps } from './Box'; const StyledPopover = styled(Popover)` - background-color: white; - border-radius: 4px; - box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); - border: 1px solid #dddddd; - transition: opacity 0.2s ease-in-out; + background-color: var(--c--contextuals--background--surface--primary); + border-radius: var(--c--globals--spacings--st); + box-shadow: 0 0 6px 0 rgba(0, 0, 145, 0.1); + border: 1px solid var(--c--contextuals--border--surface--primary); + transition: opacity var(--c--globals--transitions--duration) + var(--c--globals--transitions--ease-out); + color: var(--c--contextuals--content--semantic--brand--tertiary); `; interface StyledButtonProps { @@ -28,16 +30,23 @@ const StyledButton = styled(Button)` border: none; background: none; outline: none; - transition: background 0.2s ease-in-out; - font-weight: 500; - font-size: 0.938rem; - padding: 0; - - &:focus-visible { - outline: 2px solid #3e5de7; - outline-offset: 2px; + font-weight: var(--c--components--button--font-weight); + font-size: var(--c--components--button--medium-font-size); + padding: var(--c--globals--spacings--0); + border-radius: var(--c--globals--spacings--st); + color: var(--c--contextuals--content--semantic--brand--tertiary); + &:hover { + background-color: var( + --c--contextuals--background--semantic--contextual--primary + ); + } + &:focus-visible { + box-shadow: 0 0 0 2px var(--c--globals--colors--brand-400); + background-color: var( + --c--contextuals--background--semantic--brand--tertiary-hover + ); + border-radius: var(--c--globals--spacings--st); } - ${({ $css }) => $css}; `; @@ -47,6 +56,7 @@ export interface DropButtonProps { isOpen?: boolean; onOpenChange?: (isOpen: boolean) => void; label?: string; + testId?: string; } export const DropButton = ({ @@ -56,6 +66,7 @@ export const DropButton = ({ onOpenChange, children, label, + testId, }: PropsWithChildren) => { const { themeTokens } = useCunninghamTheme(); const font = themeTokens['font']?.['families']['base']; @@ -78,6 +89,7 @@ export const DropButton = ({ ref={triggerRef} onPress={() => onOpenChangeHandler(true)} aria-label={label} + data-testid={testId} $css={css` font-family: ${font}; ${buttonCss}; diff --git a/src/frontend/apps/conversations/src/components/DropdownMenu.tsx b/src/frontend/apps/conversations/src/components/DropdownMenu.tsx index 8ca682f..f884826 100644 --- a/src/frontend/apps/conversations/src/components/DropdownMenu.tsx +++ b/src/frontend/apps/conversations/src/components/DropdownMenu.tsx @@ -33,7 +33,7 @@ export const DropdownMenu = ({ label, topMessage, }: PropsWithChildren) => { - const { spacingsTokens, colorsTokens } = useCunninghamTheme(); + const { spacingsTokens } = useCunninghamTheme(); const [isOpen, setIsOpen] = useState(false); const [buttonWidth, setButtonWidth] = useState(undefined); const blockButtonRef = useRef(null); @@ -64,14 +64,20 @@ export const DropdownMenu = ({ {children} @@ -89,7 +95,8 @@ export const DropdownMenu = ({ > {topMessage && ( @@ -162,9 +173,10 @@ export const DropdownMenu = ({ {option.icon && ( {option.isSelected && ( - +