fix: skeleton not using theme variables (#9712)

Fix linked to this discord issue:
https://discord.com/channels/1130383047699738754/1329509340494692444

---------

Co-authored-by: Weiko <corentin@twenty.com>

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
+import { ANIMATION } from 'twenty-ui';
 
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useTheme } from '@emotion/react';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 
 const StyledAnimatedContainer = styled(motion.div)`
@@ -47,6 +48,7 @@ const StyledSkeletonTitleContainer = styled.div`
 
 export const LeftPanelSkeletonLoader = () => {
   const isMobile = useIsMobile();
+  const theme = useTheme();
 
   return (
     <StyledAnimatedContainer
@@ -62,8 +64,8 @@ export const LeftPanelSkeletonLoader = () => {
       <StyledItemsContainer>
         <StyledSkeletonTitleContainer>
           <SkeletonTheme
-            baseColor={GRAY_SCALE.gray15}
+            baseColor={theme.background.tertiary}
-            highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+            highlightColor={theme.background.transparent.lighter}
             borderRadius={4}
           >
             <Skeleton

packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx

@@ -1,7 +1,7 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
 
 const StyledSkeletonContainer = styled.div`
   align-items: flex-start;
@@ -20,11 +20,13 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({
   title?: boolean;
   length: number;
 }) => {
+  const theme = useTheme();
+
   return (
     <StyledSkeletonContainer>
       <SkeletonTheme
-        baseColor={GRAY_SCALE.gray15}
+        baseColor={theme.background.tertiary}
-        highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+        highlightColor={theme.background.transparent.lighter}
         borderRadius={4}
       >
         {title && (

packages/twenty-front/src/loading/components/RightDrawerSkeletonLoader.tsx

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
-import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
 const StyledRightDrawerContainer = styled.div`
@@ -11,10 +11,12 @@ const StyledRightDrawerContainer = styled.div`
 `;
 
 const StyledSkeletonLoader = () => {
+  const theme = useTheme();
+
   return (
     <SkeletonTheme
-      baseColor={GRAY_SCALE.gray15}
+      baseColor={theme.background.tertiary}
-      highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+      highlightColor={theme.background.transparent.lighter}
       borderRadius={4}
     >
       <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.m} width={140} />

packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx

@@ -1,16 +1,11 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import {
+import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui';
-  BACKGROUND_LIGHT,
-  BORDER_COMMON,
-  BORDER_LIGHT,
-  GRAY_SCALE,
-  MOBILE_VIEWPORT,
-} from 'twenty-ui';
 
 const StyledMainContainer = styled.div`
-  background: ${BACKGROUND_LIGHT.noisy};
+  background: ${({ theme }) => theme.background.noisy};
   box-sizing: border-box;
   display: flex;
   flex: 1 1 auto;
@@ -27,8 +22,8 @@ const StyledMainContainer = styled.div`
 `;
 
 const StyledPanel = styled.div`
-  background: ${BACKGROUND_LIGHT.primary};
+  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${BORDER_LIGHT.color.medium};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${BORDER_COMMON.radius.md};
   height: 100%;
   overflow: auto;
@@ -54,11 +49,13 @@ const StyledRightPanelFlexContainer = styled.div`
 `;
 
 const StyledSkeletonHeaderLoader = () => {
+  const theme = useTheme();
+
   return (
     <StyledHeaderContainer>
       <SkeletonTheme
-        baseColor={GRAY_SCALE.gray15}
+        baseColor={theme.background.tertiary}
-        highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+        highlightColor={theme.background.transparent.lighter}
         borderRadius={4}
       >
         <Skeleton
@@ -71,10 +68,12 @@ const StyledSkeletonHeaderLoader = () => {
 };
 
 const StyledSkeletonAddLoader = () => {
+  const theme = useTheme();
+
   return (
     <SkeletonTheme
-      baseColor={GRAY_SCALE.gray15}
+      baseColor={theme.background.tertiary}
-      highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+      highlightColor={theme.background.transparent.lighter}
       borderRadius={4}
     >
       <Skeleton width={132} height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />

packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
-import { BACKGROUND_LIGHT, MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
 import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
 
 const StyledContainer = styled.div`
-  background: ${BACKGROUND_LIGHT.noisy};
+  background: ${({ theme }) => theme.background.noisy};
   box-sizing: border-box;
   display: flex;
   flex-direction: row;

packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx

@@ -42,6 +42,7 @@ export const SKELETON_LOADER_HEIGHT_SIZES = {
 
 const SkeletonColumnLoader = ({ height }: { height: number }) => {
   const theme = useTheme();
+
   return (
     <SkeletonTheme
       baseColor={theme.background.tertiary}