From 75c7811755feccbfc7bf2231b20f2bb050218c6e Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 10 Feb 2026 15:01:12 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20align=20colors=20with?= =?UTF-8?q?=20theme=20from=20figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Some colors were not exactly the same as the ones in figma, this commit aligns them with the theme tokens. --- CHANGELOG.md | 1 + .../assets/doc-export-regressions.pdf | 36 ++++++------ .../docs/doc-editor/assets/loader.svg | 2 +- .../custom-blocks/UploadLoaderBlock.tsx | 8 ++- .../src/features/docs/doc-editor/styles.tsx | 56 +++++++++++++++---- .../doc-header/components/DocHeaderInfo.tsx | 2 +- .../doc-share/components/DocVisibility.tsx | 10 +++- 7 files changed, 80 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7441defa..a6e8d97c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to - ♿️(frontend) prevent dates from being focusable #1855 - ♿️(frontend) Focus main container after navigation #1854 +- 💄(frontend) align colors and logo with ui-kit v2 #1869 - 🚸(backend) sort user search results by proximity with the active user #1802 - 🚸(oidc) ignore case when fallback on email #1880 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/assets/doc-export-regressions.pdf b/src/frontend/apps/e2e/__tests__/app-impress/assets/doc-export-regressions.pdf index 8bc0166a..51a090c2 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/assets/doc-export-regressions.pdf +++ b/src/frontend/apps/e2e/__tests__/app-impress/assets/doc-export-regressions.pdf @@ -192,10 +192,10 @@ endobj (react-pdf) endobj 55 0 obj -(D:20260128100716Z) +(D:20260210135720Z) endobj 56 0 obj -(chromium-8039-0-doc-export-override-content) +(chromium-4728-0-doc-export-override-content) endobj 52 0 obj << @@ -216,7 +216,7 @@ endobj 58 0 obj << /Type /FontDescriptor -/FontName /FDAZSC+Inter18pt-Regular +/FontName /XWNEXS+Inter18pt-Regular /Flags 4 /FontBBox [-742.1875 -323.242187 2579.589844 1109.375] /ItalicAngle 0 @@ -232,7 +232,7 @@ endobj << /Type /Font /Subtype /CIDFontType2 -/BaseFont /FDAZSC+Inter18pt-Regular +/BaseFont /XWNEXS+Inter18pt-Regular /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) @@ -247,7 +247,7 @@ endobj << /Type /Font /Subtype /Type0 -/BaseFont /FDAZSC+Inter18pt-Regular +/BaseFont /XWNEXS+Inter18pt-Regular /Encoding /Identity-H /DescendantFonts [59 0 R] /ToUnicode 60 0 R @@ -256,7 +256,7 @@ endobj 62 0 obj << /Type /FontDescriptor -/FontName /UEJHFC+Inter18pt-Bold +/FontName /QGXPNV+Inter18pt-Bold /Flags 4 /FontBBox [-790.527344 -334.472656 2580.566406 1114.746094] /ItalicAngle 0 @@ -272,7 +272,7 @@ endobj << /Type /Font /Subtype /CIDFontType2 -/BaseFont /UEJHFC+Inter18pt-Bold +/BaseFont /QGXPNV+Inter18pt-Bold /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) @@ -287,7 +287,7 @@ endobj << /Type /Font /Subtype /Type0 -/BaseFont /UEJHFC+Inter18pt-Bold +/BaseFont /QGXPNV+Inter18pt-Bold /Encoding /Identity-H /DescendantFonts [63 0 R] /ToUnicode 64 0 R @@ -296,7 +296,7 @@ endobj 66 0 obj << /Type /FontDescriptor -/FontName /EUMTON+Inter18pt-Italic +/FontName /SLYFFZ+Inter18pt-Italic /Flags 68 /FontBBox [-747.558594 -323.242187 2595.703125 1109.375] /ItalicAngle -9.398804 @@ -312,7 +312,7 @@ endobj << /Type /Font /Subtype /CIDFontType2 -/BaseFont /EUMTON+Inter18pt-Italic +/BaseFont /SLYFFZ+Inter18pt-Italic /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) @@ -327,7 +327,7 @@ endobj << /Type /Font /Subtype /Type0 -/BaseFont /EUMTON+Inter18pt-Italic +/BaseFont /SLYFFZ+Inter18pt-Italic /Encoding /Identity-H /DescendantFonts [67 0 R] /ToUnicode 68 0 R @@ -336,7 +336,7 @@ endobj 70 0 obj << /Type /FontDescriptor -/FontName /HIJACG+GeistMono-Regular +/FontName /GPERZO+GeistMono-Regular /Flags 5 /FontBBox [-1738 -247 654 1012] /ItalicAngle 0 @@ -352,7 +352,7 @@ endobj << /Type /Font /Subtype /CIDFontType2 -/BaseFont /HIJACG+GeistMono-Regular +/BaseFont /GPERZO+GeistMono-Regular /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) @@ -367,7 +367,7 @@ endobj << /Type /Font /Subtype /Type0 -/BaseFont /HIJACG+GeistMono-Regular +/BaseFont /GPERZO+GeistMono-Regular /Encoding /Identity-H /DescendantFonts [71 0 R] /ToUnicode 72 0 R @@ -376,7 +376,7 @@ endobj 74 0 obj << /Type /FontDescriptor -/FontName /IKVFNP+Inter18pt-BoldItalic +/FontName /CNJFYA+Inter18pt-BoldItalic /Flags 68 /FontBBox [-795.898437 -334.472656 2596.191406 1114.746094] /ItalicAngle -9.398804 @@ -392,7 +392,7 @@ endobj << /Type /Font /Subtype /CIDFontType2 -/BaseFont /IKVFNP+Inter18pt-BoldItalic +/BaseFont /CNJFYA+Inter18pt-BoldItalic /CIDSystemInfo << /Registry (Adobe) /Ordering (Identity) @@ -407,7 +407,7 @@ endobj << /Type /Font /Subtype /Type0 -/BaseFont /IKVFNP+Inter18pt-BoldItalic +/BaseFont /CNJFYA+Inter18pt-BoldItalic /Encoding /Identity-H /DescendantFonts [75 0 R] /ToUnicode 76 0 R @@ -1403,7 +1403,7 @@ trailer /Size 87 /Root 3 0 R /Info 52 0 R -/ID [<2f4ec8da7e87471807031f721b6c9ac2> <2f4ec8da7e87471807031f721b6c9ac2>] +/ID [<4d0627755c809232c991979db9766911> <4d0627755c809232c991979db9766911>] >> startxref 101726 diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/loader.svg b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/loader.svg index c3a51be9..9bcd1060 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/loader.svg +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/loader.svg @@ -4,7 +4,7 @@ height="24" viewBox="0 0 24 24" fill="none" - stroke="#3b82f6" + stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx index 67934a4f..200d99bf 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx @@ -9,7 +9,7 @@ import { createReactBlockSpec } from '@blocknote/react'; import { t } from 'i18next'; import { useEffect } from 'react'; -import { Box, Text } from '@/components'; +import { Box, Icon, Text } from '@/components'; import { useMediaUrl } from '@/core'; import { isSafeUrl } from '@/utils/url'; @@ -126,7 +126,11 @@ const UploadLoaderBlockComponent = ({ {block.props.type === 'warning' ? ( ) : ( - + } + /> )} {block.props.information} diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx index 6c9c1645..6618c074 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -7,17 +7,16 @@ export const cssEditor = css` height: 100%; } - & .bn-editor { - color: var(--c--globals--colors--gray-700); - } - /** - * WCAG Accessibility contrast fixes for BlockNote editor + * Token Mantime */ - .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] - .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before { - color: #767676 !important; - font-weight: 400; + & > .bn-container { + --bn-colors-editor-text: var( + --c--contextuals--content--semantic--neutral--primary + ); + --bn-colors-side-menu: var( + --c--contextuals--content--semantic--neutral--tertiary + ); } /** @@ -97,7 +96,9 @@ export const cssEditor = css` height: 38px; } .bn-side-menu .mantine-UnstyledButton-root svg { - color: #767676 !important; + color: var( + --c--contextuals--content--semantic--neutral--tertiary + ) !important; } /** @@ -158,6 +159,41 @@ export const cssEditor = css` border: 1px solid #d3d2cf; } + /** + * Checklist items + */ + .bn-block-content[data-content-type='checkListItem'] > div > input { + appearance: none; + width: 20px; + height: 20px; + border: 2px solid + var(--c--contextuals--content--semantic--neutral--tertiary); + border-radius: 4px; + cursor: pointer; + position: relative; + align-self: center; + margin-top: 2px; + } + .bn-block-content[data-content-type='checkListItem'] > div > input:checked { + background-color: var(--c--contextuals--content--semantic--brand--tertiary); + border-color: var(--c--contextuals--content--semantic--brand--tertiary); + } + .bn-block-content[data-content-type='checkListItem'] + > div + > input:checked::after { + content: 'check'; + font-family: 'Material Symbols Outlined Variable', sans-serif; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--c--contextuals--content--semantic--overlay--primary); + font-size: 18px; + } + + /** + * Ensure consistent spacing between headings and paragraphs + */ & .bn-block-outer:not(:first-child) { &:has(h1) { margin-top: 32px; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx index 839d6b18..fbc55420 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx @@ -49,7 +49,7 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => { $variation="tertiary" $size="s" $weight="bold" - $theme={isEditable ? 'gray' : 'warning'} + $theme={isEditable ? 'neutral' : 'warning'} > {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}  ·  diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx index 17b3433d..f475697f 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx @@ -180,8 +180,8 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => { options={linkReachOptions} > { } label={t('Document access mode')} > - + {linkModeTranslations[docLinkRole]}