💄(frontend) align colors with theme from figma

Some colors were not exactly the same as the ones in figma, this commit aligns them with the theme tokens.
2026-02-10 15:01:12 +01:00
parent f4cb66d6b6
commit 75c7811755
7 changed files with 80 additions and 35 deletions
--- 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

--- 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
--- 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"
--- 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' ? (
        <Warning />
      ) : (
-        <Loader style={{ animation: 'spin 1.5s linear infinite' }} />
+        <Icon
+          $theme="brand"
+          $layer="border"
+          icon={<Loader style={{ animation: 'spin 1.5s linear infinite' }} />}
+        />
      )}
      <Text>{block.props.information}</Text>
    </Box>
--- 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;
--- 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)}
          &nbsp;·&nbsp;
--- 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}
          >
            <Box
-              $theme={canManage ? 'brand' : 'gray'}
-              $variation={canManage ? 'tertiary' : 'primary'}
+              $theme={canManage ? 'brand' : 'neutral'}
+              $variation="tertiary"
              $direction="row"
              $align="center"
              $gap={spacingsTokens['3xs']}
@@ -229,7 +229,11 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
              }
              label={t('Document access mode')}
            >
-              <Text $weight="initial" $theme="brand" $variation="tertiary">
+              <Text
+                $weight="initial"
+                $theme={!canManage ? 'neutral' : 'brand'}
+                $variation={!canManage ? 'secondary' : 'tertiary'}
+              >
                {linkModeTranslations[docLinkRole]}
              </Text>
            </DropdownMenu>