♻️(frontend) refacto useCunninghamTheme

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

Author: AntoLC

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

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

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 {
-  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;
-
-  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 getMergedTokens = (theme: Theme) => {
+  return merge({}, tokens.themes['default'], tokens.themes[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,
+    });
+  },
+}));

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