From 29104dfe2d6d407699d58df86629d5cdb62818aa Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 26 Nov 2025 11:30:49 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A5(frontend)=20upgrade=20to=20ui-kit?= =?UTF-8?q?=20v2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Upgrade Docs to Ui-Kit v2 and apply new color scheme from LaSuite design system. This commit will probably create breaking changes if user has custom styles applied to their docs. --- CHANGELOG.md | 1 + .../__tests__/app-impress/left-panel.spec.ts | 11 +- src/frontend/apps/impress/cunningham.ts | 524 +- src/frontend/apps/impress/package.json | 4 +- .../impress/public/assets/favicon-dark.png | Bin 1054 -> 1106 bytes .../impress/public/assets/favicon-light.ico | Bin 5430 -> 0 bytes .../impress/public/assets/favicon-light.png | Bin 1059 -> 1113 bytes .../apps/impress/src/components/Box.tsx | 130 +- .../apps/impress/src/components/BoxButton.tsx | 15 +- .../apps/impress/src/components/Card.tsx | 20 +- .../impress/src/components/DropButton.tsx | 27 +- .../apps/impress/src/components/Icon.tsx | 4 +- .../impress/src/components/InfiniteScroll.tsx | 3 +- .../apps/impress/src/components/Loading.tsx | 6 +- .../apps/impress/src/components/Text.tsx | 16 +- .../impress/src/components/TextErrors.tsx | 12 +- .../components/dropdown-menu/DropdownMenu.tsx | 51 +- .../src/components/filter/FilterDropdown.tsx | 29 +- .../src/components/modal/AlertModal.tsx | 7 +- .../src/components/modal/ButtonCloseModal.tsx | 13 +- .../quick-search/QuickSearchGroup.tsx | 6 +- .../quick-search/QuickSearchInput.tsx | 2 +- .../quick-search/QuickSearchStyle.tsx | 44 +- .../separators/HorizontalSeparator.tsx | 16 +- .../separators/SeparatedSection.tsx | 6 +- .../__tests__/useCunninghamTheme.spec.tsx | 6 +- .../src/cunningham/cunningham-style.css | 19 +- .../src/cunningham/cunningham-tokens.css | 8158 +++++++++++++---- .../src/cunningham/cunningham-tokens.ts | 2218 ++++- .../src/cunningham/useCunninghamTheme.tsx | 28 +- .../features/auth/components/ButtonLogin.tsx | 18 +- .../features/auth/components/UserAvatar.tsx | 7 +- .../BlockNoteToolBar/MarkdownButton.tsx | 2 +- .../ModalConfirmDownloadUnsafe.tsx | 11 +- .../comments/CommentToolbarButton.tsx | 10 +- .../doc-editor/components/comments/styles.tsx | 49 +- .../components/custom-blocks/CalloutBlock.tsx | 4 +- .../InterlinkingLinkInlineContent.tsx | 7 +- .../Interlinking/SearchPage.tsx | 32 +- .../src/features/docs/doc-editor/styles.tsx | 14 +- .../doc-export/components/ModalExport.tsx | 7 +- .../doc-header/components/AlertNetwork.tsx | 49 +- .../doc-header/components/AlertPublic.tsx | 20 +- .../doc-header/components/AlertRestore.tsx | 66 +- .../doc-header/components/BoutonShare.tsx | 12 +- .../doc-header/components/DocHeaderInfo.tsx | 10 +- .../docs/doc-header/components/DocTitle.tsx | 20 +- .../docs/doc-header/components/DocToolBox.tsx | 16 +- .../doc-management/components/DocIcon.tsx | 2 +- .../doc-management/components/DocPage403.tsx | 9 +- .../components/ModalRemoveDoc.tsx | 12 +- .../components/SimpleDocItem.tsx | 11 +- .../components/DocSearchFilters.tsx | 2 +- .../doc-search/components/DocSearchItem.tsx | 6 +- .../doc-search/components/DocSearchModal.tsx | 4 +- .../docs/doc-share/assets/desynchro.svg | 2 +- .../features/docs/doc-share/assets/undo.svg | 2 +- .../components/DocDesynchronized.tsx | 28 +- .../components/DocInheritedShareContent.tsx | 13 +- .../doc-share/components/DocRoleDropdown.tsx | 18 +- .../components/DocShareAccessRequest.tsx | 7 +- .../components/DocShareAddMemberList.tsx | 23 +- .../components/DocShareAddMemberListItem.tsx | 29 +- .../doc-share/components/DocShareModal.tsx | 4 +- .../components/DocShareModalFooter.tsx | 14 +- .../doc-share/components/DocVisibility.tsx | 39 +- .../doc-share/components/SearchUserRow.tsx | 8 +- .../doc-table-content/components/Heading.tsx | 9 +- .../components/TableContent.tsx | 25 +- .../doc-tree/components/DocSubPageItem.tsx | 42 +- .../docs/doc-tree/components/DocTree.tsx | 14 +- .../components/DocTreeItemActions.tsx | 16 +- .../components/ModalConfirmationVersion.tsx | 9 +- .../components/ModalSelectVersion.tsx | 10 +- .../doc-versioning/components/VersionItem.tsx | 6 +- .../components/DocGridContentList.tsx | 31 +- .../docs/docs-grid/components/DocsGrid.tsx | 16 +- .../docs-grid/components/DocsGridActions.tsx | 9 +- .../docs-grid/components/DocsGridItem.tsx | 23 +- .../components/DocsGridItemSharedButton.tsx | 18 +- .../components/DocsGridTrashbinActions.tsx | 11 +- .../docs/docs-grid/components/Droppable.tsx | 6 +- .../impress/src/features/footer/Footer.tsx | 32 +- .../header/components/ButtonTogglePanel.tsx | 8 +- .../src/features/header/components/Header.tsx | 10 +- .../features/header/components/LaGaufre.tsx | 6 + .../src/features/header/components/Title.tsx | 26 +- .../features/home/components/HomeBanner.tsx | 35 +- .../features/home/components/HomeBottom.tsx | 11 +- .../features/home/components/HomeContent.tsx | 168 +- .../features/home/components/HomeSection.tsx | 25 +- .../language/components/LanguagePicker.tsx | 28 +- .../components/LefPanelTargetFilters.tsx | 19 +- .../left-panel/components/LeftPanel.tsx | 8 +- .../components/LeftPanelFavoriteItem.tsx | 13 +- .../components/LeftPanelFavorites.tsx | 3 +- .../left-panel/components/LeftPanelHeader.tsx | 73 +- .../components/LeftPanelHeaderButton.tsx | 4 +- .../components/ResizableLeftPanel.tsx | 5 +- .../components/DocEditorSkeleton.tsx | 16 +- .../skeletons/components/Skeleton.tsx | 2 +- .../apps/impress/src/layouts/MainLayout.tsx | 10 +- src/frontend/apps/impress/src/pages/401.tsx | 3 +- src/frontend/apps/impress/src/pages/404.tsx | 3 +- src/frontend/apps/impress/src/pages/_app.tsx | 1 - .../impress/src/pages/docs/[id]/index.tsx | 23 +- .../apps/impress/src/pages/offline/index.tsx | 2 +- src/frontend/apps/impress/src/tests/utils.tsx | 12 +- .../apps/impress/src/utils/styleBuilder.ts | 14 +- src/frontend/yarn.lock | 18 +- 110 files changed, 9537 insertions(+), 3249 deletions(-) delete mode 100644 src/frontend/apps/impress/public/assets/favicon-light.ico diff --git a/CHANGELOG.md b/CHANGELOG.md index 23cc2102..45ed237a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to ### Changed - ⚡️(sw) stop to cache external resources likes videos #1655 +- 💥(frontend) upgrade to ui-kit v2 ### Fixed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts index 558f28bd..cf5ee4c3 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '@playwright/test'; -import { createDoc } from './utils-common'; +import { createDoc, goToGridDoc, verifyDocName } from './utils-common'; test.describe('Left panel desktop', () => { test.beforeEach(async ({ page }) => { @@ -10,8 +10,12 @@ test.describe('Left panel desktop', () => { test('checks all the elements are visible', async ({ page }) => { await expect(page.getByTestId('left-panel-desktop')).toBeVisible(); await expect(page.getByTestId('left-panel-mobile')).toBeHidden(); - await expect(page.getByTestId('home-button')).toBeVisible(); + await expect(page.getByTestId('home-button')).toBeHidden(); await expect(page.getByTestId('new-doc-button')).toBeVisible(); + + await goToGridDoc(page); + + await expect(page.getByTestId('home-button')).toBeVisible(); }); test('checks resize handle is present and functional on document page', async ({ @@ -88,6 +92,9 @@ test.describe('Left panel mobile', () => { await expect(languageButton).not.toBeInViewport(); await expect(logoutButton).not.toBeInViewport(); + const title = await goToGridDoc(page); + await verifyDocName(page, title); + await header.getByLabel('Open the header menu').click(); await expect(page.getByTestId('left-panel-mobile')).toBeInViewport(); diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index 5accadd3..417134cc 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -1,57 +1,25 @@ import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit'; +import { defaultTokens } from '@openfun/cunningham-react'; +import merge from 'lodash/merge'; -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', +// Uikit does not provide the full list of tokens. +// To be able to override correctly, we need to merge with the default tokens. +let mergedColors = merge( + defaultTokens.globals.colors, + tokens.themes.default.globals.colors, +); + +mergedColors = { + ...mergedColors, + 'logo-1': '#2845C1', }; -tokens.themes.default.theme = { - ...tokens.themes.default.theme, +tokens.themes.default.globals = { + ...tokens.themes.default.globals, ...{ - logo: { - src: '', - alt: '', - widthHeader: '', - widthFooter: '', - }, - colors: { - ...tokens.themes.default.theme.colors, - ...customColors, - }, + colors: mergedColors, font: { - ...tokens.themes.default.theme.font, + ...tokens.themes.default.globals.font, families: { base: 'sans-serif', accent: 'sans-serif', @@ -63,39 +31,24 @@ tokens.themes.default.theme = { tokens.themes.default.components = { ...tokens.themes.default.components, ...{ + logo: { + src: '', + alt: '', + widthHeader: '', + widthFooter: '', + }, 'la-gaufre': false, 'home-proconnect': false, - 'image-system-filter': '', favicon: { - ico: '/assets/favicon-light.ico', 'png-light': '/assets/favicon-light.png', 'png-dark': '/assets/favicon-dark.png', }, - button: { - ...tokens.themes.default.components.button, - primary: { - ...tokens.themes.default.components.button.primary, - ...{ - 'background--disabled': 'var(--c--theme--colors--greyscale-100)', - }, - disabled: 'var(--c--theme--colors--greyscale-400)', - }, - }, }, }; const dsfrTheme = { dsfr: { - theme: { - colors: { - 'secondary-icon': '#C9191E', - }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', - }, + globals: { font: { families: { base: 'Marianne, Inter, Roboto Flex Variable, sans-serif', @@ -104,6 +57,12 @@ const dsfrTheme = { }, }, components: { + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', + }, 'la-gaufre': true, 'home-proconnect': true, favicon: { @@ -117,131 +76,296 @@ const dsfrTheme = { const genericTheme = { generic: { - theme: { + globals: { 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', + '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', + 'blue1-050': '#EBF1F9', + 'blue1-100': '#D6E4F4', + 'blue1-150': '#C1D7F0', + 'blue1-200': '#AACAEF', + 'blue1-250': '#8FBCEF', + 'blue1-300': '#7CAFEB', + 'blue1-350': '#68A1E4', + 'blue1-400': '#5B94D6', + 'blue1-450': '#4E86C7', + 'blue1-500': '#4279B9', + 'blue1-550': '#356CAC', + 'blue1-600': '#28609E', + 'blue1-650': '#1B5390', + 'blue1-700': '#0B4783', + 'blue1-750': '#0F3C6E', + 'blue1-800': '#133059', + 'blue1-850': '#152641', + 'blue1-900': '#121C2D', + 'blue1-950': '#0B111C', + 'blue2-050': '#E7F3F4', + 'blue2-100': '#CEE7E9', + 'blue2-150': '#B2DCE0', + 'blue2-200': '#91D1D7', + 'blue2-250': '#68C7D0', + 'blue2-300': '#43BBC5', + 'blue2-350': '#00AFBA', + 'blue2-400': '#01A0AA', + 'blue2-450': '#00929D', + 'blue2-500': '#00848F', + 'blue2-550': '#007682', + 'blue2-600': '#016874', + 'blue2-650': '#005B67', + 'blue2-700': '#004E5A', + 'blue2-750': '#00424E', + 'blue2-800': '#003642', + 'blue2-850': '#002A38', + 'blue2-900': '#061E28', + 'blue2-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', }, font: { families: { @@ -250,18 +374,6 @@ const genericTheme = { }, }, }, - 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)', - }, }, }; diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json index 5bd8d658..9ace686a 100644 --- a/src/frontend/apps/impress/package.json +++ b/src/frontend/apps/impress/package.json @@ -35,11 +35,11 @@ "@fontsource-variable/material-symbols-outlined": "5.2.28", "@fontsource/material-icons": "5.2.7", "@gouvfr-lasuite/integration": "1.0.3", - "@gouvfr-lasuite/ui-kit": "0.16.2", + "@gouvfr-lasuite/ui-kit": "0.18.0", "@hocuspocus/provider": "3.4.0", "@mantine/core": "8.3.6", "@mantine/hooks": "8.3.6", - "@openfun/cunningham-react": "3.2.3", + "@openfun/cunningham-react": "4.0.0", "@react-pdf/renderer": "4.3.1", "@sentry/nextjs": "10.27.0", "@tanstack/react-query": "5.90.6", diff --git a/src/frontend/apps/impress/public/assets/favicon-dark.png b/src/frontend/apps/impress/public/assets/favicon-dark.png index 1d05fec801204169fe89129616fa3f4e05c2958d..43ea493e63eada9693857ed3fbe1df06e8a0fc2f 100644 GIT binary patch delta 1035 zcmV+m1oZo!2+|0UR)6P7L_t(|0qt2)QsO`m?McuAt9A(|*xW$YKSj%M1NQ{FCs;iJ zcmln_;tjk3s0Dt4Cop>gLX`!IK=yS=YFRWx7#ZNhSCwKUGuG=&&*OE6=o71jpe5q| zzHPt0l9Ngq+rIBR_{#Eqa!u2y?CyTOA_Zs(pxJC&-7eX~A%EqWERmlF(L8QhacdCJ z+5Ud+lIFx*0Wh)WXR=14@dZ*g2xf81#@J$_JeCoaz$+B29LoMMu>mPHO?e)ffhcsgD0N`0p>vhlOw12_a#*Q#SzHHbFGRX=ehG9!S}$%@ac*2hCvR_$S+zD6l7Ff@9llLket!rSqnH^NGVGZGzY-KQ(`uv>3NlKzX^P+D@e*`$1{QUQr3kG@4e94XjaovC z%Cw*YX`umxL|s-Rq*2Q-gqz81w03qfeTA?bVt%<@WG;idwWKOCPcQ#N`KGHgslx&3yh3wBH zGr6k%fL-S^$e`CU-}=` zN`FS#mi!whGka?lz{|_vAsQ#`%Pz%ECxa*#i&iMVfgQ1vtcu+M_#EwhO-9(7EJK>l zqwgRFrKIbnot;L*t8#mr7L0M-Ag;M)7z{>NlQtYrp9}xyjJL$U7iEUFfuA|9@W^z`;SThU)1D3Xltu=cG$PUnr=?JXtjs zL)-%KGKTN9TP|g56E_Fz^>$u}RPds~_XnL!Cf(+75`xnR-?#)lBJ9p#T$PT^X3^AJLRD)35jjbx%Af$a;K-Lrc^uKtiK{M`-2)6f6XfP$1uPzMJI# z8*d<&n86HV@iXOH6Hw04F4<>(v*k6=ll4=2R^fo)D;{{a@m zl7T+HZ+l;PEV*(?EP!R)5bSRVu*(CLo5 zay=Is{f>pljcv{}8&OU*3W)+#$1&r;LhKV}h&h!K14*nGSYK%-(gjU#QqcHkBL^2! zxVyr){C^(ISABU0i$+I5Tn9=$)D6bY9R)aA@wBTun-*uG z3&O;T^TCCMa0ebCk8h+XV4l!5XC$Q1IJW?Ff%ZWhsH@)g?s45bduye;SZPnA5<*Io zL1&s&Xl#bX_KGt1k)chq(W{r{NB2SQ5(DT0qkmuKcB}AMc@?w@3&@51!jl3zH@eD4 zuW&6X6QWAGo0O6i6T_s)My4^Q-EDPBN*2Iid;9fa!|7hDF@g&VO$lX^H){A&YmnGz zOq&v)uUJWm*vrI2q0>-K2^LpQ5*%Y-dHvEdR*XhFD!nU^YF{==NqP!0ZrV<-zvo{eCW(Yj# z5vdp|+%!J`Kd}AQLQd-cKcTNX^wtf4WS-OeHP&c>f80Zid|n3k_5c6?07*qoM6N<$ Ef~=pwTL1t6 diff --git a/src/frontend/apps/impress/public/assets/favicon-light.ico b/src/frontend/apps/impress/public/assets/favicon-light.ico deleted file mode 100644 index b4255b9f049e7c5facd993b9d4ae47164147cad5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5430 zcmds*Ylu}<6vxk)X%V6HvWMlZ8RnkHJ!kJd*Bp$(8-1uz3CsG@gCs&Nn0ySS5oJwS z5~Wb)i%KI5%d(_z8IFYO3Y$dL|X#+fsVjRn#&qfI7;gbPJ#6S{)SW|m&@g@ z^rEpjSL=*BZrp{1LSbk_OT%zKikbsu=6cG!=SO;B6h-Hy^#w{@&--7zNFRreKnK0Z z?C_L++gGNI_csQSxz$(txEtzeX?ZtP^8=kP!dvup6Jwc}2lm+5aZpt-jWGBliGw7(1*y^JUO1 zSD7b!m1qCF-vwK|^o6G6z@Zs&m=^S*fCKk5)+H|^+ncAD&>DKc3 z{Mn+rH@;$r<8+?oI9vKjooFkrF4dU~iVKj`Bl$fgh3EhItHUgzs_J1sT_AcZ{-l;> zjT!5zrWt;yR}y2Jpl`{u{fv8wldZ%|TQ-|LzoL@V3ooC)jGEg{p1qHb574z1-LJE@ zh#JFC#t%=3@Tr4O)uSh>b@pF^$i@$t&WeEyyg~;L8#`{8sGXi(Fe$L z!p|qzlf>p*< z81jCy7n()n+!?LEVn4J2dtb465b1|pVWUtKsRj8aB(9#JuRba<9aDVYR=ckfU(@5F9(x|~bLt+ZeSXU%wo(^F5&!9!mx-@8 zZTyjc*sv2_osg}&f{`TFyJNxL$Dy7gI@5P&0;lTf`0?Y4dfg73$j5Daa z%fa2o_ygmSct6yNt@ZWMB~=3ql96w~%gM*d;6BDaW=YRDNR|JIc+vir6pIU-F>%P#xq5E$OCViMgzgmgi}w-p`lk!l~!k^4ycU9H*nW#R2sbi~J8D03y@? diff --git a/src/frontend/apps/impress/public/assets/favicon-light.png b/src/frontend/apps/impress/public/assets/favicon-light.png index 19cc87d75f8aeb541e5cfecbd80e8781f38408c4..5a33afa069382433826a6230c2a3ff47f6e91ad6 100644 GIT binary patch delta 1042 zcmV+t1nv8y2-ygbR)6kEL_t(|0qt2!Qrkcf?U8>J8=MnFH^4bTl!ZaX%2}q0?+F4Y zz?=YXU<0AD_0pdza87_Z0h1F%tT5Qpq}!4TVXWVvj~Bcu)y#Ni?C$Z*o7XLX59A95 z8A8`vDnLQAELg{%))<2-e#{wT?QVDb93+s61De*VmP%!{P=7FMWGot3!;k5y`p*(a zz25E_#6&U9U@~lF1*)c5t`-W%e#%M0wd_b+xqS*B7#d-UW`20VyNaJ>Y@iJlrmYfjo|N#<9GcOrH60cwo@YD@5@Y zAiaN6#(`n4xAQH^K-`8#r2?rUwgbotBfmacamy;wZGZe3N7hL10Hk}CVmpAk=5S-< z5~YK{t;2AOK-CdtRQE`SY;>a389*Z&u7NC5J^L1EvXBdo+o_G^p=Al}>1q1OX(s|% z7MceKn~g?`*l2$6=H}%H5`u&Sf}_UYH%$f0$-^Q87r{}rq^mSMD?cG2NU#ue27}!{ zL1TQ_Xn%IdlZFfnHFW*rj_P(WLo6gHu&FxAHB&Z{IRj*D%Wc?(vfS7xsY4tFIwwQC z1UVAlh%u{4cL*eaq#bbd5#81dAB#^Wh0*o(_FwOydi{ba3bY^r$T)z)O|^9~k-WW3tqD(Iv zQD)=uv3L*56;g^eCSebvj2w?w(C{gw2?;UB-mE5xH#^~L)`*Qrz)_+X54#G>7g9n4 zLx0L!CyXS_#G9hnlYI-w#Z|1Uk^| z?hKLhzhlsT8WI9>c!|c0plECnD0V<~+gzM(VP`>eBVRZ5`W2-|oEHt^!8FA`szoty z9&Ty>j{iv>)jT@F$cO)D<*cLE9AoD*#rI zumZ{oNOnM1Kv)5y9SVP#9i%huKsytuN0LK~lgN&+LOwV%PW+JUd-XWF=ZfeVPYXsf z1m`O;QLRBzZs5xe+^XY9NJbs;(kU&PJfDVB2{-(+Y{d}ztWVL z$^mQG0*)FEhC{_9bt}qcV&+;K8W$Kk2|YOQnx;gd1IB2%v_nj7k)oJFB8uJ%aUtw? zS7ITqlENykht~MT6SQb6xbYf&47C9yYw`6r&7vw!2S_a)5M^FEbEp=7x3=XfQQ&}T z&{HFlo6g6R9)EDo^+b&6siCN0$zwbmJ#gp4B!RHt@qus|`^qriAUJ}`zUZCrv2 z{og}Z-%!MGO`yR)i4aN8th_2Z^IR87!N-A9asIPWuIL?{TcVKgaX?IZU}GJG3^Izb z@NJOPET)3aB_9WN_{Qq89XbdlY(Q2w3!NMkk(xbb0)M|bpy>0=EG$4c78<~^Q5#>{ zqey+E=vD`89jXX^J&*^xXCr~t`xk;TK^Zp67w7A%`uQeRfax7DEvmN3Q0QH6oPpzD zSJPKoAAG>&ZdF5YdIuDJ6X#c5SCJ7mBCwIvVM(8=hR+cC#QB<~QX^(SlZ=*Ay3~RO zA^3ng!+*1pj{~4fdGz3pns^Z$)lA|d*qEq`34UWHxRTAP1X8sQSVI%i48+vAJy$}A z%OqP2A_Zl0z32%K7J`vVb-?QhmJt}-PiP88;`}WpbiYt4mW59b93y+MTU2ObYDM-d zjg34UP_d;+9cgNz@gjbhUZK=z{Vy}s?tdzU&wo15KucZ|Ev7g6`R6l5_*f_~!Z=_9 zxMLe5g@v!AOoKI|p_G(bABZd)naqazcRgQ{5}`39<#xHkI7KJxtk@ zjDJ?=$N{!Lq+d-6i6*bEefOCrpY;$5_pQ>SX!?D#2 zx9w~g4!NqM*RyPKI5*KwHw!VfkHD=#k2f}fhB&q9mVP%ca0W=V!cnfiaJ}B?05;jW zoUeXCFB~{0)i5uFe`Km1YHYmWW-qP@<5Wj=29t-bx}~>SP1n*ujMTIeGu>WhCvo&$ znH&*A%4PB}?O^z9x!yICo%-Aky?fK!?mcKt-9h8D=^4)mi~kC*c~x}fRTuyO002ov JPDHLkV1nw@#h(BG diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx index 8510b730..dd57c6fa 100644 --- a/src/frontend/apps/impress/src/components/Box.tsx +++ b/src/frontend/apps/impress/src/components/Box.tsx @@ -14,6 +14,7 @@ export interface BoxProps { as?: HTMLElementType; $align?: CSSProperties['alignItems']; $background?: CSSProperties['background']; + $border?: CSSProperties['border']; $color?: CSSProperties['color']; $css?: string | RuleSet; $cursor?: CSSProperties['cursor']; @@ -36,41 +37,34 @@ export interface BoxProps { $position?: CSSProperties['position']; $radius?: CSSProperties['borderRadius']; $shrink?: CSSProperties['flexShrink']; + $transition?: CSSProperties['transition']; + $width?: CSSProperties['width']; + $zIndex?: CSSProperties['zIndex']; + $wrap?: CSSProperties['flexWrap']; + // Theming props + $layer?: 'background' | 'content' | 'border'; $theme?: - | 'primary' - | 'primary-text' - | 'secondary' - | 'secondary-text' + | 'brand' + | 'error' + | 'gray' | 'info' | 'success' | 'warning' - | 'danger' - | 'greyscale'; - $transition?: CSSProperties['transition']; - $variation?: - | 'text' - | '000' - | '100' - | '200' - | '300' - | '400' - | '500' - | '600' - | '700' - | '800' - | '900' - | '1000'; - $width?: CSSProperties['width']; - $wrap?: CSSProperties['flexWrap']; - $zIndex?: CSSProperties['zIndex']; + | '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')` ${({ $align }) => $align && `align-items: ${$align};`} - ${({ $background }) => $background && `background: ${$background};`} - ${({ $color }) => $color && `color: ${$color};`} ${({ $cursor }) => $cursor && `cursor: ${$cursor};`} ${({ $direction }) => `flex-direction: ${$direction || 'column'};`} ${({ $display, as }) => @@ -80,9 +74,9 @@ export const Box = styled('div')` ${({ $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)} @@ -96,11 +90,85 @@ export const Box = styled('div')` ${({ $position }) => $position && `position: ${$position};`} ${({ $radius }) => $radius && `border-radius: ${$radius};`} ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`} - ${({ $theme, $variation }) => { - if (!$theme || !$variation) { + ${({ + $layer = 'border', + $theme = 'brand', + $variation = 'primary', + $scope = 'semantic', + $border, + $withThemeBorder, + $withThemeInherited, + }) => { + if ($border) { + return `border: ${$border};`; + } + + if (!$layer || !$scope || !$theme || !$withThemeBorder) { return ''; } - return `color: var(--c--theme--colors--${$theme}-${$variation});`; + + 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};`} @@ -121,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/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx index 08715116..76c96bcc 100644 --- a/src/frontend/apps/impress/src/components/BoxButton.tsx +++ b/src/frontend/apps/impress/src/components/BoxButton.tsx @@ -24,8 +24,8 @@ export type BoxButtonType = BoxType & { */ const BoxButton = forwardRef( ({ $css, ...props }, ref) => { - const theme = props.$theme || 'greyscale'; - const variation = props.$variation || '400'; + const theme = props.$theme || 'gray'; + const variation = props.$variation || 'primary'; return ( ( border: none; outline: none; font-family: inherit; - color: ${props.disabled - ? `var(--c--theme--colors--${theme}-400) !important` - : `inherit`}; - + color: ${props.disabled && + `var(--c--contextuals--content--semantic--disabled--primary)`}; &:focus-visible { transition: none; - outline: 2px solid var(--c--theme--colors--${theme}-${variation}); + outline: 2px solid + var(--c--contextuals--content--semantic--${theme}--${variation}); border-radius: 1px; - outline-offset: 4px; + outline-offset: var(--c--globals--spacings--st); } ${$css || ''} `} diff --git a/src/frontend/apps/impress/src/components/Card.tsx b/src/frontend/apps/impress/src/components/Card.tsx index 4bc35a7f..b9fe4580 100644 --- a/src/frontend/apps/impress/src/components/Card.tsx +++ b/src/frontend/apps/impress/src/components/Card.tsx @@ -1,27 +1,23 @@ import { PropsWithChildren } from 'react'; -import { css } from 'styled-components'; - -import { useCunninghamTheme } from '@/cunningham'; import { Box, BoxType } from '.'; export const Card = ({ children, className, - $css, ...props }: PropsWithChildren) => { - const { colorsTokens } = useCunninghamTheme(); - return ( {children} diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx index 09772b4b..f3816d57 100644 --- a/src/frontend/apps/impress/src/components/DropButton.tsx +++ b/src/frontend/apps/impress/src/components/DropButton.tsx @@ -14,10 +14,11 @@ 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; + 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); `; interface StyledButtonProps { @@ -28,18 +29,22 @@ const StyledButton = styled(Button)` border: none; background: none; outline: none; - font-weight: 500; - font-size: 0.938rem; - padding: 0; - border-radius: 4px; + 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--components--button--primary-text--background--color-hover + --c--contextuals--background--semantic--contextual--primary ); } &:focus-visible { - box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400); - border-radius: 4px; + 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}; `; diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx index f5c0baa1..39234505 100644 --- a/src/frontend/apps/impress/src/components/Icon.tsx +++ b/src/frontend/apps/impress/src/components/Icon.tsx @@ -13,7 +13,7 @@ export const Icon = ({ iconName, disabled, variant = 'outlined', - $variation = 'text', + $theme = 'neutral', ...textProps }: IconProps) => { const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps; @@ -28,7 +28,7 @@ export const Icon = ({ 'material-icons': variant === 'outlined', 'material-symbols-outlined': variant === 'symbols-outlined', })} - $variation={disabled ? '300' : $variation} + $theme={disabled ? 'disabled' : $theme} aria-disabled={disabled} {...textProps} > diff --git a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx index 5a0ee14b..216de802 100644 --- a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx +++ b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx @@ -39,7 +39,8 @@ export const InfiniteScroll = ({ {!isLoading && hasMore && (