studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(frontend) align colors with theme from figma

Browse Source 
Some colors were not exactly the same as the ones
in figma, this commit aligns them with the theme
tokens.
This commit is contained in:
Anthony LC
2026-02-10 15:01:12 +01:00
parent f4cb66d6b6
commit 75c7811755
7 changed files with 80 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/frontend/apps/e2e/__tests__/app-impress/assets/doc-export-regressions.pdf
View File

@@ -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

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

@@ -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"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 598 B

After

Width:  |  Height:  |  Size: 603 B

8
src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx
View File

@@ -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>

56
src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
View File

@@ -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;

2
src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx
View File

@@ -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;

10
src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
View File

@@ -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>