💄(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.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/assets/loader.svg

@@ -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 { loopCheckDocMediaStatus } from '../../api';
@@ -125,7 +125,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>

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.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;

src/frontend/apps/impress/src/features/docs/doc-editor/styles.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)}
            · 

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.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>