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

♻️(frontend) refacto useCunninghamTheme

Browse Source 
Refacto useCunninghamTheme, we don't need a function
to have access to the tokens anymore.
This commit is contained in:
Anthony LC
2025-04-22 10:38:51 +02:00
parent 419079ac69
commit 101cef7d70
46 changed files with 158 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/apps/impress/src/components/Card.tsx
View File

@@ -18,7 +18,7 @@ export const Card = ({
$background="white"
$radius="4px"
$css={css`
border: 1px solid ${colorsTokens()['greyscale-200']};
border: 1px solid ${colorsTokens['greyscale-200']};
${$css}
`}
{...props}

16
src/frontend/apps/impress/src/components/DropdownMenu.tsx
View File

@@ -35,9 +35,7 @@ export const DropdownMenu = ({
label,
topMessage,
}: PropsWithChildren<DropdownMenuProps>) => {
const theme = useCunninghamTheme();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const [isOpen, setIsOpen] = useState(false);
const blockButtonRef = useRef<HTMLDivElement>(null);
@@ -120,11 +118,11 @@ export const DropdownMenu = ({
key={option.label}
$align="center"
$justify="space-between"
$background={colors['greyscale-000']}
$color={colors['primary-600']}
$background={colorsTokens['greyscale-000']}
$color={colorsTokens['primary-600']}
$padding={{ vertical: 'xs', horizontal: 'base' }}
$width="100%"
$gap={spacings['base']}
$gap={spacingsTokens['base']}
$css={css`
border: none;
${index === 0 &&
@@ -148,7 +146,11 @@ export const DropdownMenu = ({
}
`}
>
<Box $direction="row" $align="center" $gap={spacings['base']}>
<Box
$direction="row"
$align="center"
$gap={spacingsTokens['base']}
>
{option.icon && (
<Icon
$size="20px"

3
src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
View File

@@ -27,7 +27,6 @@ export const QuickSearchInput = ({
}: Props) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
if (children) {
return (
@@ -44,7 +43,7 @@ export const QuickSearchInput = ({
$direction="row"
$align="center"
className="quick-search-input"
$gap={spacing['2xs']}
$gap={spacingsTokens['2xs']}
$padding={{ all: 'base' }}
>
{!loading && <Icon iconName="search" $variation="600" />}

3
src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
View File

@@ -17,7 +17,6 @@ export const QuickSearchItemContent = ({
right,
}: QuickSearchItemContentProps) => {
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isDesktop } = useResponsiveStore();
@@ -32,7 +31,7 @@ export const QuickSearchItemContent = ({
<Box
$direction="row"
$align="center"
$gap={spacings['2xs']}
$gap={spacingsTokens['2xs']}
$width="100%"
>
{left}

2
src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
View File

@@ -26,7 +26,7 @@ export const HorizontalSeparator = ({
$background={
variant === SeparatorVariant.DARK
? '#e5e5e533'
: colorsTokens()['greyscale-100']
: colorsTokens['greyscale-100']
}
className="--docs--horizontal-separator"
/>

8
src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
View File

@@ -13,17 +13,15 @@ export const SeparatedSection = ({
showSeparator = true,
children,
}: PropsWithChildren<Props>) => {
const theme = useCunninghamTheme();
const colors = theme.colorsTokens();
const spacings = theme.spacingsTokens();
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
return (
<Box
$css={css`
width: 100%;
padding: ${spacings['sm']} 0;
padding: ${spacingsTokens['sm']} 0;
${showSeparator &&
css`
border-bottom: 1px solid ${colors?.['greyscale-200']};
border-bottom: 1px solid ${colorsTokens['greyscale-200']};
`}
`}
>

2
src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx
View File

@@ -4,7 +4,7 @@ describe('<useCunninghamTheme />', () => {
it('has the logo correctly set', () => {
const { themeTokens, setTheme } = useCunninghamTheme.getState();
setTheme('default');
const logo = themeTokens().logo;
const logo = themeTokens.logo;
expect(logo?.src).toBe('/assets/logo-gouv.svg');
expect(logo?.widthHeader).toBe('110px');
expect(logo?.widthFooter).toBe('220px');

66
src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
View File

@@ -3,39 +3,53 @@ import { create } from 'zustand';
import { tokens } from './cunningham-tokens';
type Tokens = typeof tokens.themes.default;
type Tokens = typeof tokens.themes.default &
Partial<(typeof tokens.themes)[keyof typeof tokens.themes]>;
type ColorsTokens = Tokens['theme']['colors'];
type FontSizesTokens = Tokens['theme']['font']['sizes'];
type SpacingsTokens = Tokens['theme']['spacings'];
type ComponentTokens = Tokens['components'];
export type Theme = keyof typeof tokens.themes;
interface AuthStore {
theme: string;
interface ThemeStore {
theme: Theme;
setTheme: (theme: Theme) => void;
themeTokens: () => Partial<Tokens['theme']>;
colorsTokens: () => Partial<ColorsTokens>;
fontSizesTokens: () => Partial<FontSizesTokens>;
spacingsTokens: () => Partial<SpacingsTokens>;
componentTokens: () => ComponentTokens;
themeTokens: Partial<Tokens['theme']>;
colorsTokens: Partial<ColorsTokens>;
fontSizesTokens: Partial<FontSizesTokens>;
spacingsTokens: Partial<SpacingsTokens>;
componentTokens: ComponentTokens;
}
export const useCunninghamTheme = create<AuthStore>((set, get) => {
const currentTheme = () =>
merge(
tokens.themes['default'],
tokens.themes[get().theme as keyof typeof tokens.themes],
) as Tokens;
const getMergedTokens = (theme: Theme) => {
return merge({}, tokens.themes['default'], tokens.themes[theme]);
};
return {
theme: 'default',
themeTokens: () => currentTheme().theme,
colorsTokens: () => currentTheme().theme.colors,
componentTokens: () => currentTheme().components,
spacingsTokens: () => currentTheme().theme.spacings,
fontSizesTokens: () => currentTheme().theme.font.sizes,
setTheme: (theme: Theme) => {
set({ theme });
},
};
});
const DEFAULT_THEME: Theme = 'default';
const defaultTokens = getMergedTokens(DEFAULT_THEME);
const initialState: ThemeStore = {
theme: DEFAULT_THEME,
setTheme: () => {},
themeTokens: defaultTokens.theme,
colorsTokens: defaultTokens.theme.colors,
componentTokens: defaultTokens.components,
spacingsTokens: defaultTokens.theme.spacings,
fontSizesTokens: defaultTokens.theme.font.sizes,
};
export const useCunninghamTheme = create<ThemeStore>((set) => ({
...initialState,
setTheme: (theme: Theme) => {
const newTokens = getMergedTokens(theme);
set({
theme,
themeTokens: newTokens.theme,
colorsTokens: newTokens.theme.colors,
componentTokens: newTokens.components,
spacingsTokens: newTokens.theme.spacings,
fontSizesTokens: newTokens.theme.font.sizes,
});
},
}));

2
src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
View File

@@ -67,7 +67,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
</Box>
<Box
$background={colorsTokens()['primary-bg']}
$background={colorsTokens['primary-bg']}
$direction="row"
$width="100%"
$css="overflow-x: clip; flex: 1;"

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

@@ -22,9 +22,9 @@ export const DividerBlock = createReactBlockSpec(
<Box
as="hr"
$width="100%"
$background={colorsTokens()['greyscale-300']}
$background={colorsTokens['greyscale-300']}
$margin="1rem 0"
$css={`border: 1px solid ${colorsTokens()['greyscale-300']};`}
$css={`border: 1px solid ${colorsTokens['greyscale-300']};`}
/>
);
},

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

@@ -27,7 +27,7 @@ export const QuoteBlock = createReactBlockSpec(
$margin="0 0 1rem 0"
$padding="0.5rem 1rem"
style={{
borderLeft: `4px solid ${colorsTokens()['greyscale-300']}`,
borderLeft: `4px solid ${colorsTokens['greyscale-300']}`,
fontStyle: 'italic',
flexGrow: 1,
}}

2
src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/dividerDocx.tsx
View File

@@ -14,7 +14,7 @@ export const blockMappingDividerDocx: DocsExporterDocx['mappings']['blockMapping
},
border: {
top: {
color: colorsTokens()['greyscale-300'],
color: colorsTokens['greyscale-300'],
size: 1,
style: 'single',
space: 1,

2
src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/dividerPDF.tsx
View File

@@ -12,7 +12,7 @@ export const blockMappingDividerPDF: DocsExporterPDF['mappings']['blockMapping']
<Text
style={{
marginVertical: 10,
backgroundColor: colorsTokens()['greyscale-300'],
backgroundColor: colorsTokens['greyscale-300'],
height: '2px',
}}
/>

14
src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
View File

@@ -22,8 +22,6 @@ interface DocHeaderProps {
export const DocHeader = ({ doc }: DocHeaderProps) => {
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const spacings = spacingsTokens();
const colors = colorsTokens();
const { t } = useTranslation();
const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
@@ -36,21 +34,21 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
<Box
$width="100%"
$padding={{ top: isDesktop ? '4xl' : 'md' }}
$gap={spacings['base']}
$gap={spacingsTokens['base']}
aria-label={t('It is the card information about the document.')}
className="--docs--doc-header"
>
{(docIsPublic || docIsAuth) && (
<Box
aria-label={t('Public document')}
$color={colors['primary-800']}
$background={colors['primary-050']}
$radius={spacings['3xs']}
$color={colorsTokens['primary-800']}
$background={colorsTokens['primary-050']}
$radius={spacingsTokens['3xs']}
$direction="row"
$padding="xs"
$flex={1}
$align="center"
$gap={spacings['3xs']}
$gap={spacingsTokens['3xs']}
$css={css`
border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
`}
@@ -82,7 +80,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
$align="center"
$maxWidth="100%"
>
<Box $gap={spacings['3xs']} $overflow="auto">
<Box $gap={spacingsTokens['3xs']} $overflow="auto">
<DocTitle doc={doc} />
<Box $direction="row">

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

@@ -116,7 +116,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
onBlurCapture={(event) =>
handleTitleSubmit(event.target.textContent || '')
}
$color={colorsTokens()['greyscale-1000']}
$color={colorsTokens['greyscale-1000']}
$minHeight="40px"
$padding={{ right: 'big' }}
$css={css`

9
src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
View File

@@ -47,9 +47,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const [isModalExportOpen, setIsModalExportOpen] = useState(false);
const selectHistoryModal = useModal();
@@ -182,7 +179,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
$direction="row"
$align="center"
$margin={{ left: 'auto' }}
$gap={spacings['2xs']}
$gap={spacingsTokens['2xs']}
>
{!isSmallMobile && (
<>
@@ -245,12 +242,12 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
$css={css`
border-radius: 4px;
&:hover {
background-color: ${colors['greyscale-100']};
background-color: ${colorsTokens['greyscale-100']};
}
${isSmallMobile
? css`
padding: 10px;
border: 1px solid ${colors['greyscale-300']};
border: 1px solid ${colorsTokens['greyscale-300']};
`
: ''}
`}

3
src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
View File

@@ -12,7 +12,6 @@ interface DocVersionHeaderProps {
export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { t } = useTranslation();
return (
@@ -20,7 +19,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
<Box
$width="100%"
$padding={{ vertical: 'base' }}
$gap={spacings['base']}
$gap={spacingsTokens['base']}
aria-label={t('It is the document title')}
className="--docs--doc-version-header"
>

14
src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
View File

@@ -43,8 +43,6 @@ export const DocShareAddMemberList = ({
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const [invitationRole, setInvitationRole] = useState<Role>(Role.EDITOR);
const canShare = doc.abilities.accesses_manage;
const spacing = spacingsTokens();
const color = colorsTokens();
const { mutateAsync: createInvitation } = useCreateDocInvitation();
const { mutateAsync: createDocAccess } = useCreateDocAccess();
@@ -115,12 +113,12 @@ export const DocShareAddMemberList = ({
<Box
data-testid="doc-share-add-member-list"
$direction="row"
$padding={spacing.sm}
$padding={spacingsTokens.sm}
$align="center"
$background={color['greyscale-050']}
$radius={spacing['3xs']}
$background={colorsTokens['greyscale-050']}
$radius={spacingsTokens['3xs']}
$css={css`
border: 1px solid ${color['greyscale-200']};
border: 1px solid ${colorsTokens['greyscale-200']};
`}
className="--docs--doc-share-add-member-list"
>
@@ -129,7 +127,7 @@ export const DocShareAddMemberList = ({
$align="center"
$wrap="wrap"
$flex={1}
$gap={spacing.xs}
$gap={spacingsTokens.xs}
>
{selectedUsers.map((user) => (
<DocShareAddMemberListItem
@@ -139,7 +137,7 @@ export const DocShareAddMemberList = ({
/>
))}
</Box>
<Box $direction="row" $align="center" $gap={spacing.xs}>
<Box $direction="row" $align="center" $gap={spacingsTokens.xs}>
<DocRoleDropdown
canUpdate={canShare}
currentRole={invitationRole}

20
src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
View File

@@ -12,27 +12,25 @@ type Props = {
export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
const { spacingsTokens, colorsTokens, fontSizesTokens } =
useCunninghamTheme();
const spacing = spacingsTokens();
const color = colorsTokens();
const fontSize = fontSizesTokens();
return (
<Box
data-testid={`doc-share-add-member-${user.email}`}
$radius={spacing['3xs']}
$radius={spacingsTokens['3xs']}
$direction="row"
$height="fit-content"
$justify="center"
$align="center"
$gap={spacing['3xs']}
$background={color['greyscale-250']}
$gap={spacingsTokens['3xs']}
$background={colorsTokens['greyscale-250']}
$padding={{
left: spacing['xs'],
right: spacing['4xs'],
vertical: spacing['4xs'],
left: spacingsTokens['xs'],
right: spacingsTokens['4xs'],
vertical: spacingsTokens['4xs'],
}}
$css={css`
color: ${color['greyscale-1000']};
font-size: ${fontSize['xs']};
color: ${colorsTokens['greyscale-1000']};
font-size: ${fontSizesTokens['xs']};
`}
className="--docs--doc-share-add-member-list-item"
>

3
src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
View File

@@ -24,7 +24,6 @@ type Props = {
export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const fakeUser: User = {
id: invitation.email,
full_name: invitation.email,
@@ -91,7 +90,7 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
alwaysShowRight={true}
user={fakeUser}
right={
<Box $direction="row" $align="center" $gap={spacing['2xs']}>
<Box $direction="row" $align="center" $gap={spacingsTokens['2xs']}>
<DocRoleDropdown
currentRole={invitation.role}
onSelectRole={onUpdate}

3
src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
View File

@@ -27,7 +27,6 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
const { toast } = useToastProvider();
const { isDesktop } = useResponsiveStore();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const isNotAllowed =
isOtherOwner || !!isLastOwner || !doc.abilities.accesses_manage;
@@ -78,7 +77,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
alwaysShowRight={true}
user={access.user}
right={
<Box $direction="row" $align="center" $gap={spacing['2xs']}>
<Box $direction="row" $align="center" $gap={spacingsTokens['2xs']}>
<DocRoleDropdown
currentRole={access.role}
onSelectRole={onUpdate}

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

@@ -32,8 +32,6 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
const { toast } = useToastProvider();
const { isDesktop } = useResponsiveStore();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const colors = colorsTokens();
const canManage = doc.abilities.accesses_manage;
const [linkReach, setLinkReach] = useState<LinkReach>(doc.link_reach);
const [docLinkRole, setDocLinkRole] = useState<LinkRole>(doc.link_role);
@@ -90,7 +88,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
<Box
$padding={{ horizontal: 'base' }}
aria-label={t('Doc visibility card')}
$gap={spacing['base']}
$gap={spacingsTokens['base']}
className="--docs--doc-visibility"
>
<Text $weight="700" $size="sm" $variation="700">
@@ -100,7 +98,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
$direction="row"
$align="center"
$justify="space-between"
$gap={spacing['xs']}
$gap={spacingsTokens['xs']}
$width="100%"
$wrap="nowrap"
>
@@ -108,18 +106,18 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
$direction="row"
$align={isDesktop ? 'center' : undefined}
$padding={{ horizontal: '2xs' }}
$gap={canManage ? spacing['3xs'] : spacing['base']}
$gap={canManage ? spacingsTokens['3xs'] : spacingsTokens['base']}
>
<DropdownMenu
label={t('Visibility')}
arrowCss={css`
color: ${colors['primary-800']} !important;
color: ${colorsTokens['primary-800']} !important;
`}
disabled={!canManage}
showArrow={true}
options={linkReachOptions}
>
<Box $direction="row" $align="center" $gap={spacing['3xs']}>
<Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
<Icon
$theme={canManage ? 'primary' : 'greyscale'}
$variation={canManage ? '800' : '600'}
@@ -142,7 +140,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
)}
</Box>
{showLinkRoleOptions && (
<Box $direction="row" $align="center" $gap={spacing['3xs']}>
<Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
{linkReach !== LinkReach.RESTRICTED && (
<DropdownMenu
disabled={!canManage}

8
src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
View File

@@ -23,8 +23,6 @@ export const SearchUserRow = ({
}: Props) => {
const hasFullName = user.full_name != null && user.full_name !== '';
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
return (
<QuickSearchItemContent
@@ -34,12 +32,14 @@ export const SearchUserRow = ({
<Box
$direction="row"
$align="center"
$gap={spacings['xs']}
$gap={spacingsTokens['xs']}
className="--docs--search-user-row"
>
<UserAvatar
user={user}
background={isInvitation ? colors['greyscale-400'] : undefined}
background={
isInvitation ? colorsTokens['greyscale-400'] : undefined
}
/>
<Box $direction="column">
<Text $size="sm" $weight="500" $variation="1000">

2
src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
View File

@@ -58,7 +58,7 @@ export const Heading = ({
});
}}
$radius="4px"
$background={isActive ? `${colorsTokens()['greyscale-100']}` : 'none'}
$background={isActive ? `${colorsTokens['greyscale-100']}` : 'none'}
$css="text-align: left;"
className="--docs--table-content-heading"
>

3
src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
View File

@@ -13,7 +13,6 @@ export const TableContent = () => {
const { headings } = useHeadingStore();
const { editor } = useEditorStore();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
@@ -158,7 +157,7 @@ export const TableContent = () => {
</BoxButton>
</Box>
<Box
$gap={spacing['3xs']}
$gap={spacingsTokens['3xs']}
$css={css`
overflow-y: auto;
`}

7
src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
View File

@@ -24,7 +24,6 @@ export const VersionItem = ({
isActive,
}: VersionItemProps) => {
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
@@ -33,13 +32,13 @@ export const VersionItem = ({
<Box
$width="100%"
as="li"
$background={isActive ? colorsTokens()['greyscale-100'] : 'transparent'}
$radius={spacing['3xs']}
$background={isActive ? colorsTokens['greyscale-100'] : 'transparent'}
$radius={spacingsTokens['3xs']}
$css={`
cursor: pointer;
&:hover {
background: ${colorsTokens()['greyscale-100']};
background: ${colorsTokens['greyscale-100']};
}
`}
$hasTransition

5
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
View File

@@ -22,7 +22,6 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
const { isDesktop } = useResponsiveStore();
const { flexLeft, flexRight } = useResponsiveDocGrid();
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const shareModal = useModal();
const isPublic = doc.link_reach === LinkReach.PUBLIC;
const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
@@ -63,7 +62,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
data-testid={`docs-grid-name-${doc.id}`}
$direction="row"
$align="center"
$gap={spacings.xs}
$gap={spacingsTokens.xs}
$flex={flexLeft}
$padding={{ right: isDesktop ? 'md' : '3xs' }}
$maxWidth="100%"
@@ -119,7 +118,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
</StyledLink>
)}
<Box $direction="row" $align="center" $gap={spacings.lg}>
<Box $direction="row" $align="center" $gap={spacingsTokens.lg}>
{isDesktop && (
<DocsGridItemSharedButton
doc={doc}

5
src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
View File

@@ -34,13 +34,12 @@ export const SimpleDocItem = ({
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const spacings = spacingsTokens();
const { untitledDocument } = useTrans();
return (
<Box
$direction="row"
$gap={spacings.sm}
$gap={spacingsTokens.sm}
$overflow="auto"
className="--docs--simple-doc-item"
>
@@ -73,7 +72,7 @@ export const SimpleDocItem = ({
<Box
$direction="row"
$align="center"
$gap={spacings['3xs']}
$gap={spacingsTokens['3xs']}
$margin={{ top: '-2px' }}
>
<Text $variation="600" $size="xs">

2
src/frontend/apps/impress/src/features/footer/Footer.tsx
View File

@@ -18,7 +18,7 @@ const BlueStripe = styled.div`
export const Footer = () => {
const { t } = useTranslation();
const { themeTokens } = useCunninghamTheme();
const logo = themeTokens().logo;
const logo = themeTokens.logo;
return (
<Box $position="relative" as="footer" className="--docs--footer">

17
src/frontend/apps/impress/src/features/header/components/Header.tsx
View File

@@ -16,12 +16,9 @@ import { Title } from './Title';
export const Header = () => {
const { t } = useTranslation();
const theme = useCunninghamTheme();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
return (
<Box
as="header"
@@ -35,9 +32,9 @@ export const Header = () => {
align-items: center;
justify-content: space-between;
height: ${HEADER_HEIGHT}px;
padding: 0 ${spacings['base']};
background-color: ${colors['greyscale-000']};
border-bottom: 1px solid ${colors['greyscale-200']};
padding: 0 ${spacingsTokens['base']};
background-color: ${colorsTokens['greyscale-000']};
border-bottom: 1px solid ${colorsTokens['greyscale-200']};
`}
className="--docs--header"
>
@@ -45,7 +42,7 @@ export const Header = () => {
<StyledLink href="/">
<Box
$align="center"
$gap={spacings['3xs']}
$gap={spacingsTokens['3xs']}
$direction="row"
$position="relative"
$height="fit-content"
@@ -56,11 +53,11 @@ export const Header = () => {
</Box>
</StyledLink>
{!isDesktop ? (
<Box $direction="row" $gap={spacings['sm']}>
<Box $direction="row" $gap={spacingsTokens['sm']}>
<LaGaufre />
</Box>
) : (
<Box $align="center" $gap={spacings['sm']} $direction="row">
<Box $align="center" $gap={spacingsTokens['sm']} $direction="row">
<ButtonLogin />
<LanguagePicker />
<LaGaufre />

2
src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
View File

@@ -15,7 +15,7 @@ const GaufreStyle = createGlobalStyle`
export const LaGaufre = () => {
const { componentTokens } = useCunninghamTheme();
if (!componentTokens()['la-gauffre'].activated) {
if (!componentTokens['la-gauffre'].activated) {
return null;
}

5
src/frontend/apps/impress/src/features/header/components/Title.tsx
View File

@@ -6,14 +6,13 @@ import { useCunninghamTheme } from '@/cunningham';
export const Title = () => {
const { t } = useTranslation();
const theme = useCunninghamTheme();
const spacings = theme.spacingsTokens();
const { spacingsTokens } = useCunninghamTheme();
return (
<Box
$direction="row"
$align="center"
$gap={spacings['2xs']}
$gap={spacingsTokens['2xs']}
className="--docs--title"
>
<Text

5
src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
View File

@@ -16,9 +16,8 @@ import { getHeaderHeight } from './HomeHeader';
export default function HomeBanner() {
const { t } = useTranslation();
const { componentTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isMobile, isSmallMobile } = useResponsiveStore();
const withProConnect = componentTokens()['home-proconnect'].activated;
const withProConnect = componentTokens['home-proconnect'].activated;
return (
<Box
@@ -45,7 +44,7 @@ export default function HomeBanner() {
$width={!isMobile ? '50%' : '100%'}
$justify="center"
$align="center"
$gap={spacings['sm']}
$gap={spacingsTokens['sm']}
>
<Image src={DocLogo} alt="DocLogo" width={64} />
<Text

7
src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
View File

@@ -10,7 +10,7 @@ import { useResponsiveStore } from '@/stores';
export function HomeBottom() {
const { componentTokens } = useCunninghamTheme();
const withProConnect = componentTokens()['home-proconnect'].activated;
const withProConnect = componentTokens['home-proconnect'].activated;
if (!withProConnect) {
return null;
@@ -22,7 +22,6 @@ export function HomeBottom() {
function HomeProConnect() {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isMobile } = useResponsiveStore();
const parentGap = '230px';
@@ -33,14 +32,14 @@ function HomeProConnect() {
className="--docs--home-proconnect"
>
<Box
$gap={spacings['md']}
$gap={spacingsTokens['md']}
$direction="column"
$align="center"
$margin={{ top: isMobile ? 'none' : `-${parentGap}` }}
>
<Box
$align="center"
$gap={spacings['3xs']}
$gap={spacingsTokens['3xs']}
$direction="row"
$position="relative"
$height="fit-content"

2
src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
View File

@@ -74,7 +74,7 @@ export function HomeContent() {
<Box
$css={css`
& a {
color: ${colorsTokens()['primary-600']};
color: ${colorsTokens['primary-600']};
}
`}
>

5
src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
View File

@@ -18,8 +18,7 @@ export const getHeaderHeight = (isSmallMobile: boolean) =>
export const HomeHeader = () => {
const { t } = useTranslation();
const { themeTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const logo = themeTokens().logo;
const logo = themeTokens.logo;
const { isSmallMobile } = useResponsiveStore();
return (
@@ -57,7 +56,7 @@ export const HomeHeader = () => {
)}
<Box
$align="center"
$gap={spacings['3xs']}
$gap={spacingsTokens['3xs']}
$direction="row"
$position="relative"
$height="fit-content"

15
src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
View File

@@ -36,7 +36,6 @@ export const HomeSection = ({
}: HomeSectionProps) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isSmallMobile } = useResponsiveStore();
@@ -97,17 +96,17 @@ export const HomeSection = ({
>
<Box
$direction={direction}
$gap={!isSmallDevice ? spacings['lg'] : spacings['sm']}
$gap={!isSmallDevice ? spacingsTokens['lg'] : spacingsTokens['sm']}
$maxHeight="100%"
$height="auto"
$width="100%"
>
<Box
$gap={spacings['sm']}
$gap={spacingsTokens['sm']}
$maxWidth="850px"
$css={direction === 'column' ? '100%' : `flex-basis: ${textWidth};`}
>
<Box $direction="row" $gap={spacings['sm']} $wrap="wrap">
<Box $direction="row" $gap={spacingsTokens['sm']} $wrap="wrap">
<SectionTag tag={tag} />
{availableSoon && (
<SectionTag tag={t('Available soon')} availableSoon />
@@ -200,14 +199,14 @@ const SectionTag = ({
availableSoon?: boolean;
}) => {
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
return (
<Box
$background={
!availableSoon ? colors['primary-100'] : colors['warning-100']
!availableSoon
? colorsTokens['primary-100']
: colorsTokens['warning-100']
}
$padding={{ horizontal: spacings['sm'], vertical: '6px' }}
$padding={{ horizontal: spacingsTokens['sm'], vertical: '6px' }}
$css={css`
align-self: flex-start;
border-radius: 4px;

12
src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
View File

@@ -13,8 +13,6 @@ export const LeftPanelTargetFilters = () => {
const pathname = usePathname();
const { togglePanel } = useLeftPanelStore();
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const colors = colorsTokens();
const searchParams = useSearchParams();
const target =
@@ -52,7 +50,7 @@ export const LeftPanelTargetFilters = () => {
<Box
$justify="center"
$padding={{ horizontal: 'sm' }}
$gap={spacing['2xs']}
$gap={spacingsTokens['2xs']}
className="--docs--left-panel-target-filters"
>
{defaultQueries.map((query) => {
@@ -67,17 +65,17 @@ export const LeftPanelTargetFilters = () => {
aria-selected={isActive}
$align="center"
$justify="flex-start"
$gap={spacing['xs']}
$radius={spacing['3xs']}
$gap={spacingsTokens['xs']}
$radius={spacingsTokens['3xs']}
$padding={{ all: '2xs' }}
$css={css`
cursor: pointer;
background-color: ${isActive
? colors['greyscale-100']
? colorsTokens['greyscale-100']
: undefined};
font-weight: ${isActive ? 700 : undefined};
&:hover {
background-color: ${colors['greyscale-100']};
background-color: ${colorsTokens['greyscale-100']};
}
`}
>

14
src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
View File

@@ -23,12 +23,10 @@ const MobileLeftPanelStyle = createGlobalStyle`
export const LeftPanel = () => {
const { isDesktop } = useResponsiveStore();
const theme = useCunninghamTheme();
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const { togglePanel, isPanelOpen } = useLeftPanelStore();
const pathname = usePathname();
const colors = theme.colorsTokens();
const spacings = theme.spacingsTokens();
useEffect(() => {
togglePanel(false);
@@ -44,7 +42,7 @@ export const LeftPanel = () => {
width: 300px;
min-width: 300px;
overflow: hidden;
border-right: 1px solid ${colors['greyscale-200']};
border-right: 1px solid ${colorsTokens['greyscale-200']};
`}
className="--docs--left-panel-desktop"
>
@@ -81,13 +79,17 @@ export const LeftPanel = () => {
width: 100%;
justify-content: center;
align-items: center;
gap: ${spacings['base']};
gap: ${spacingsTokens['base']};
`}
>
<LeftPanelHeader />
<LeftPanelContent />
<SeparatedSection showSeparator={false}>
<Box $justify="center" $align="center" $gap={spacings['sm']}>
<Box
$justify="center"
$align="center"
$gap={spacingsTokens['sm']}
>
<ButtonLogin />
<LanguagePicker />
</Box>

3
src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
View File

@@ -8,7 +8,6 @@ import { SimpleDocItem } from '@/docs/docs-grid';
export const LeftPanelDocContent = () => {
const { currentDoc } = useDocStore();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
if (!currentDoc) {
return null;
}
@@ -24,7 +23,7 @@ export const LeftPanelDocContent = () => {
<Box $padding={{ horizontal: 'sm' }}>
<Box
$css={css`
padding: ${spacing['2xs']};
padding: ${spacingsTokens['2xs']};
border-radius: 4px;
background-color: var(--c--theme--colors--greyscale-100);
`}

4
src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
View File

@@ -16,14 +16,14 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
const shareModal = useModal();
const { spacingsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const spacing = spacingsTokens();
return (
<Box
$direction="row"
$align="center"
$justify="space-between"
$css={css`
padding: ${spacing['2xs']};
padding: ${spacingsTokens['2xs']};
border-radius: 4px;
.pinned-actions {
opacity: ${isDesktop ? 0 : 1};

3
src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
View File

@@ -10,7 +10,6 @@ export const LeftPanelFavorites = () => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
const docs = useInfiniteDocs({
page: 1,
@@ -29,7 +28,7 @@ export const LeftPanelFavorites = () => {
<Box
$justify="center"
$padding={{ horizontal: 'sm', top: 'sm' }}
$gap={spacing['2xs']}
$gap={spacingsTokens['2xs']}
$height="100%"
data-testid="left-panel-favorites"
>

5
src/frontend/apps/impress/src/layouts/MainLayout.tsx
View File

@@ -19,7 +19,6 @@ export function MainLayout({
}: PropsWithChildren<MainLayoutProps>) {
const { isDesktop } = useResponsiveStore();
const { colorsTokens } = useCunninghamTheme();
const colors = colorsTokens();
const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
return (
@@ -43,8 +42,8 @@ export function MainLayout({
}}
$background={
currentBackgroundColor === 'white'
? colors['greyscale-000']
: colors['greyscale-050']
? colorsTokens['greyscale-000']
: colorsTokens['greyscale-050']
}
$css={css`
overflow-y: auto;

2
src/frontend/apps/impress/src/pages/accessibility/index.tsx
View File

@@ -14,7 +14,7 @@ const Page: NextPageWithLayout = () => {
<Box>
<Box
as="h1"
$background={colorsTokens()['primary-100']}
$background={colorsTokens['primary-100']}
$margin="none"
$padding="large"
>

2
src/frontend/apps/impress/src/pages/legal-notice/index.tsx
View File

@@ -14,7 +14,7 @@ const Page: NextPageWithLayout = () => {
<Box>
<Box
as="h1"
$background={colorsTokens()['primary-100']}
$background={colorsTokens['primary-100']}
$margin="none"
$padding="large"
>

2
src/frontend/apps/impress/src/pages/personal-data-cookies/index.tsx
View File

@@ -14,7 +14,7 @@ const Page: NextPageWithLayout = () => {
<Box>
<Box
as="h1"
$background={colorsTokens()['primary-100']}
$background={colorsTokens['primary-100']}
$margin="none"
$padding="large"
>