♻️(frontend) refacto useCunninghamTheme

Refacto useCunninghamTheme, we don't need a function
to have access to the tokens anymore.

src/frontend/apps/impress/src/components/Card.tsx

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

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -35,9 +35,7 @@ export const DropdownMenu = ({
   label,
   topMessage,
 }: PropsWithChildren<DropdownMenuProps>) => {
-  const theme = useCunninghamTheme();
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
-  const spacings = theme.spacingsTokens();
-  const colors = theme.colorsTokens();
   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']}
+              $background={colorsTokens['greyscale-000']}
-              $color={colors['primary-600']}
+              $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"

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

@@ -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" />}

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

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

src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx

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

src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx

@@ -13,17 +13,15 @@ export const SeparatedSection = ({
   showSeparator = true,
   children,
 }: PropsWithChildren<Props>) => {
-  const theme = useCunninghamTheme();
+  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
-  const colors = theme.colorsTokens();
-  const spacings = theme.spacingsTokens();
   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']};
         `}
       `}
     >

src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx

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

src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx

@@ -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 {
+interface ThemeStore {
-  theme: string;
+  theme: Theme;
   setTheme: (theme: Theme) => void;
-  themeTokens: () => Partial<Tokens['theme']>;
+  themeTokens: Partial<Tokens['theme']>;
-  colorsTokens: () => Partial<ColorsTokens>;
+  colorsTokens: Partial<ColorsTokens>;
-  fontSizesTokens: () => Partial<FontSizesTokens>;
+  fontSizesTokens: Partial<FontSizesTokens>;
-  spacingsTokens: () => Partial<SpacingsTokens>;
+  spacingsTokens: Partial<SpacingsTokens>;
-  componentTokens: () => ComponentTokens;
+  componentTokens: ComponentTokens;
 }
 
-export const useCunninghamTheme = create<AuthStore>((set, get) => {
+const getMergedTokens = (theme: Theme) => {
-  const currentTheme = () =>
+  return merge({}, tokens.themes['default'], tokens.themes[theme]);
-    merge(
+};
-      tokens.themes['default'],
-      tokens.themes[get().theme as keyof typeof tokens.themes],
-    ) as Tokens;
 
-  return {
+const DEFAULT_THEME: Theme = 'default';
-    theme: 'default',
+const defaultTokens = getMergedTokens(DEFAULT_THEME);
-    themeTokens: () => currentTheme().theme,
+
-    colorsTokens: () => currentTheme().theme.colors,
+const initialState: ThemeStore = {
-    componentTokens: () => currentTheme().components,
+  theme: DEFAULT_THEME,
-    spacingsTokens: () => currentTheme().theme.spacings,
+  setTheme: () => {},
-    fontSizesTokens: () => currentTheme().theme.font.sizes,
+  themeTokens: defaultTokens.theme,
-    setTheme: (theme: Theme) => {
+  colorsTokens: defaultTokens.theme.colors,
-      set({ theme });
+  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,
+    });
+  },
+}));

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

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

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

@@ -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']};`}
         />
       );
     },

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

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

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

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

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

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

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

@@ -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']}
+            $color={colorsTokens['primary-800']}
-            $background={colors['primary-050']}
+            $background={colorsTokens['primary-050']}
-            $radius={spacings['3xs']}
+            $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">

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

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

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

@@ -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']};
                   `
                 : ''}
             `}

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

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

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

@@ -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']}
+      $background={colorsTokens['greyscale-050']}
-      $radius={spacing['3xs']}
+      $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}

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

@@ -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']}
+      $gap={spacingsTokens['3xs']}
-      $background={color['greyscale-250']}
+      $background={colorsTokens['greyscale-250']}
       $padding={{
-        left: spacing['xs'],
+        left: spacingsTokens['xs'],
-        right: spacing['4xs'],
+        right: spacingsTokens['4xs'],
-        vertical: spacing['4xs'],
+        vertical: spacingsTokens['4xs'],
       }}
       $css={css`
-        color: ${color['greyscale-1000']};
+        color: ${colorsTokens['greyscale-1000']};
-        font-size: ${fontSize['xs']};
+        font-size: ${fontSizesTokens['xs']};
       `}
       className="--docs--doc-share-add-member-list-item"
     >

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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'}
+        $background={isActive ? colorsTokens['greyscale-100'] : 'transparent'}
-        $radius={spacing['3xs']}
+        $radius={spacingsTokens['3xs']}
         $css={`
           cursor: pointer;
 
           &:hover {
-            background: ${colorsTokens()['greyscale-100']};
+            background: ${colorsTokens['greyscale-100']};
           }
         `}
         $hasTransition

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

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

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

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

src/frontend/apps/impress/src/features/footer/Footer.tsx

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

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -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']};
+        padding: 0 ${spacingsTokens['base']};
-        background-color: ${colors['greyscale-000']};
+        background-color: ${colorsTokens['greyscale-000']};
-        border-bottom: 1px solid ${colors['greyscale-200']};
+        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 />

src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx

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

src/frontend/apps/impress/src/features/header/components/Title.tsx

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

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

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

src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx

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

src/frontend/apps/impress/src/features/home/components/HomeContent.tsx

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

src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx

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

src/frontend/apps/impress/src/features/home/components/HomeSection.tsx

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

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

@@ -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']}
+            $gap={spacingsTokens['xs']}
-            $radius={spacing['3xs']}
+            $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']};
               }
             `}
           >

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

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

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

@@ -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);
             `}

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

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

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

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

src/frontend/apps/impress/src/layouts/MainLayout.tsx

@@ -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']
+              ? colorsTokens['greyscale-000']
-              : colors['greyscale-050']
+              : colorsTokens['greyscale-050']
           }
           $css={css`
             overflow-y: auto;

src/frontend/apps/impress/src/pages/accessibility/index.tsx

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

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

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

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

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