♻️(frontend) Update theme colors

src/frontend/apps/impress/package.json

@@ -35,11 +35,11 @@
     "@fontsource-variable/material-symbols-outlined": "5.2.28",
     "@fontsource/material-icons": "5.2.7",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.16.2",
+    "@gouvfr-lasuite/ui-kit": "0.18.0",
     "@hocuspocus/provider": "3.4.0",
     "@mantine/core": "8.3.6",
     "@mantine/hooks": "8.3.6",
-    "@openfun/cunningham-react": "3.2.3",
+    "@openfun/cunningham-react": "4.0.0",
     "@react-pdf/renderer": "4.3.1",
     "@sentry/nextjs": "10.22.0",
     "@tanstack/react-query": "5.90.6",

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

@@ -14,6 +14,7 @@ export interface BoxProps {
   as?: HTMLElementType;
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
+  $border?: CSSProperties['border'];
   $color?: CSSProperties['color'];
   $css?: string | RuleSet<object>;
   $cursor?: CSSProperties['cursor'];
@@ -36,41 +37,33 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $shrink?: CSSProperties['flexShrink'];
+  $layer?: 'background' | 'content' | 'border';
+  $scope?: 'surface' | 'semantic' | 'palette' | (string & {});
   $theme?:
-    | 'primary'
-    | 'primary-text'
-    | 'secondary'
-    | 'secondary-text'
+    | 'brand'
+    | 'error'
+    | 'gray'
     | 'info'
     | 'success'
     | 'warning'
-    | 'danger'
-    | 'greyscale';
+    | 'neutral'
+    | 'contextual'
+    | 'disabled'
+    | (string & {});
   $transition?: CSSProperties['transition'];
-  $variation?:
-    | 'text'
-    | '000'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900'
-    | '1000';
+  $variation?: 'primary' | 'secondary' | 'tertiary' | (string & {});
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
+  $withThemeBG?: boolean;
+  $withThemeInherited?: boolean;
+  $withThemeBorder?: boolean;
   $zIndex?: CSSProperties['zIndex'];
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
 
 export const Box = styled('div')<BoxProps>`
   ${({ $align }) => $align && `align-items: ${$align};`}
-  ${({ $background }) => $background && `background: ${$background};`}
-  ${({ $color }) => $color && `color: ${$color};`}
   ${({ $cursor }) => $cursor && `cursor: ${$cursor};`}
   ${({ $direction }) => `flex-direction: ${$direction || 'column'};`}
   ${({ $display, as }) =>
@@ -80,9 +73,9 @@ export const Box = styled('div')<BoxProps>`
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
     $hasTransition && $hasTransition === 'slow'
-      ? `transition: all 0.5s ease-in-out;`
+      ? `transition: all 0.5s var(--c--globals--transitions--ease-out);`
       : $hasTransition
-        ? `transition: all 0.3s ease-in-out;`
+        ? `transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);`
         : ''}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
   ${({ $margin }) => $margin && stylesMargin($margin)}
@@ -96,11 +89,85 @@ export const Box = styled('div')<BoxProps>`
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`}
-  ${({ $theme, $variation }) => {
-    if (!$theme || !$variation) {
+  ${({
+    $layer = 'border',
+    $theme = 'brand',
+    $variation = 'primary',
+    $scope = 'semantic',
+    $border,
+    $withThemeBorder,
+    $withThemeInherited,
+  }) => {
+    if ($border) {
+      return `border: ${$border};`;
+    }
+
+    if (!$layer || !$scope || !$theme || !$withThemeBorder) {
+      return '';
+    }
+
+    if ($withThemeInherited) {
+      return `border: inherit;`;
+    }
+
+    return `border: 1px solid var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`;
+  }}
+  ${({
+    $layer = 'background',
+    $theme = 'brand',
+    $variation = 'primary',
+    $scope = 'semantic',
+    $background,
+    $withThemeBG,
+    $withThemeInherited,
+  }) => {
+    if ($background) {
+      return `background: ${$background};`;
+    }
+
+    if (!$layer || !$scope || !$theme || !$withThemeBG) {
       return '';
     }
-    return `color: var(--c--theme--colors--${$theme}-${$variation});`;
+
+    if ($withThemeInherited) {
+      return `background: inherit;`;
+    }
+
+    return `background: var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`;
+  }}
+  ${({
+    $layer = 'content',
+    $theme = 'neutral',
+    $variation = 'primary',
+    $scope = 'semantic',
+    $color,
+    $withThemeBG,
+    $withThemeInherited,
+  }) => {
+    if ($color) {
+      return `color: ${$color};`;
+    }
+
+    if (!$layer || !$scope) {
+      return '';
+    }
+
+    // There is a special case when primary with background
+    if (
+      $withThemeBG &&
+      $layer === 'content' &&
+      $scope === 'semantic' &&
+      $variation === 'primary' &&
+      $theme
+    ) {
+      $variation = `on-${$theme}`;
+    }
+
+    if ($withThemeInherited) {
+      return `color: inherit;`;
+    }
+
+    return `color: var(--c--contextuals--${$layer}--${$scope}${$theme ? `--${$theme}` : ''}${$variation ? `--${$variation}` : ''});`;
   }}
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
@@ -121,7 +188,7 @@ export const Box = styled('div')<BoxProps>`
     return (
       effect &&
       ` 
-        transition: all 0.3s ease-in-out;
+        transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);
         ${effect}
       `
     );

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

@@ -24,8 +24,8 @@ export type BoxButtonType = BoxType & {
  */
 const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
-    const theme = props.$theme || 'greyscale';
-    const variation = props.$variation || '400';
+    const theme = props.$theme || 'gray';
+    const variation = props.$variation || 'primary';
 
     return (
       <Box
@@ -40,13 +40,12 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           border: none;
           outline: none;
           font-family: inherit;
-          color: ${props.disabled
-            ? `var(--c--theme--colors--${theme}-400) !important`
-            : `inherit`};
-
+          color: ${props.disabled &&
+          `var(--c--contextuals--content--semantic--disabled--primary)`};
           &:focus-visible {
             transition: none;
-            outline: 2px solid var(--c--theme--colors--${theme}-${variation});
+            outline: 2px solid
+              var(--c--contextuals--content--semantic--${theme}--${variation});
             border-radius: 1px;
             outline-offset: 4px;
           }

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

@@ -1,27 +1,23 @@
 import { PropsWithChildren } from 'react';
-import { css } from 'styled-components';
-
-import { useCunninghamTheme } from '@/cunningham';
 
 import { Box, BoxType } from '.';
 
 export const Card = ({
   children,
   className,
-  $css,
   ...props
 }: PropsWithChildren<BoxType>) => {
-  const { colorsTokens } = useCunninghamTheme();
-
   return (
     <Box
+      role="region"
+      $withThemeBG
+      $withThemeBorder
       className={`--docs--card ${className || ''}`}
-      $background="white"
       $radius="4px"
-      $css={css`
-        border: 1px solid ${colorsTokens['greyscale-200']};
-        ${$css}
-      `}
+      $padding={{ horizontal: 'xs', vertical: '3xs' }}
+      $scope={props.$theme ? props.$scope || 'semantic' : 'surface'}
+      $theme={props.$theme || 'primary'}
+      $variation={props.$theme ? props.$variation || 'tertiary' : ''}
       {...props}
     >
       {children}

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

@@ -17,7 +17,8 @@ const StyledPopover = styled(Popover)`
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
   border: 1px solid #dddddd;
-  transition: opacity 0.2s ease-in-out;
+  transition: opacity var(--c--globals--transitions--duration)
+    var(--c--globals--transitions--ease-out);
 `;
 
 interface StyledButtonProps {
@@ -32,13 +33,14 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   font-size: 0.938rem;
   padding: 0;
   border-radius: 4px;
+  color: var(--c--contextuals--content--semantic--brand--tertiary);
   &:hover {
     background-color: var(
-      --c--components--button--primary-text--background--color-hover
+      --c--contextuals--background--semantic--brand--tertiary-hover
     );
   }
   &:focus-visible {
-    box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
+    box-shadow: 0 0 0 2px var(--c--globals--colors--tertiary-400);
     border-radius: 4px;
   }
   ${({ $css }) => $css};

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

@@ -13,7 +13,7 @@ export const Icon = ({
   iconName,
   disabled,
   variant = 'outlined',
-  $variation = 'text',
+  $theme = 'neutral',
   ...textProps
 }: IconProps) => {
   const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
@@ -28,7 +28,7 @@ export const Icon = ({
         'material-icons': variant === 'outlined',
         'material-symbols-outlined': variant === 'symbols-outlined',
       })}
-      $variation={disabled ? '300' : $variation}
+      $theme={disabled ? 'disabled' : $theme}
       aria-disabled={disabled}
       {...textProps}
     >

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

@@ -39,7 +39,8 @@ export const InfiniteScroll = ({
         {!isLoading && hasMore && (
           <Button
             onClick={() => void next()}
-            color="primary-text"
+            color="brand"
+            variant="bordered"
             icon={<Icon iconName="arrow_downward" />}
           >
             {buttonLabel ?? t('Load more')}

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

@@ -24,12 +24,12 @@ export const LoadMoreText = ({
       className="--docs--load-more"
     >
       <Icon
-        $theme="primary"
-        $variation="800"
+        $theme="brand"
+        $variation="secondary"
         iconName="arrow_downward"
         $size="md"
       />
-      <Text $theme="primary" $variation="800">
+      <Text $theme="brand" $variation="secondary">
         {t('Load more')}
       </Text>
     </Box>

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

@@ -5,7 +5,7 @@ import { tokens } from '@/cunningham';
 
 import { Box, BoxProps } from './Box';
 
-const { sizes } = tokens.themes.default.theme.font;
+const { sizes } = tokens.themes.default.globals.font;
 type TextSizes = keyof typeof sizes;
 
 export interface TextProps extends BoxProps {
@@ -27,24 +27,14 @@ export const TextStyled = styled(Box)<TextProps>`
   ${({ $size }) =>
     $size &&
     `font-size: ${$size in sizes ? sizes[$size as TextSizes] : $size};`}
-  ${({ $color }) => $color && `color: ${$color};`}
   ${({ $ellipsis }) =>
     $ellipsis &&
     `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`}
 `;
 
 const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <TextStyled
-        ref={ref}
-        as="span"
-        $theme="greyscale"
-        $variation="text"
-        className={className}
-        {...props}
-      />
-    );
+  (props, ref) => {
+    return <TextStyled ref={ref} as="span" {...props} />;
   },
 );