Expose "categories" colors to CSS custom properties and tailwind

frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx

@@ -1,11 +1,10 @@
 import SVG from 'react-inlinesvg';
-import getConfig from 'next/config';
-import styled from 'styled-components';
 
 import { optimizeAndDefineColor } from 'stylesheet';
 import { Link } from 'components/Link';
-import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
 import { ActivityFilter } from 'modules/activities/interface';
+import { cn } from 'services/utils/cn';
+import { getActivityColorClassName } from 'components/pages/search/components/ResultCard/getActivityColor';
 
 interface Props {
   iconUrl: string;
@@ -14,42 +13,17 @@ interface Props {
   type: ActivityFilter['type'];
 }
 
-const {
-  publicRuntimeConfig: { colors },
-} = getConfig();
-
-const getColor = (type: ActivityFilter['type']) => {
-  if (type === 'PRACTICE') {
-    return getActivityColor('practices');
-  }
-  if (type === 'OUTDOOR_PRACTICE') {
-    return getActivityColor('outdoorPractice');
-  }
-  if (type === 'CATEGORY') {
-    return getActivityColor('categories');
-  }
-  if (type === 'TOURISTIC_EVENT_TYPE') {
-    return getActivityColor('event');
-  }
-  return colors.primary3;
-};
-
-export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label, type }) => {
+export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label, type = null }) => {
   return (
-    <StyleLink
-      $color={getColor(type)}
+    <Link
       href={href}
-      className={`flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition`}
+      className={cn(
+        'flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition',
+        getActivityColorClassName(type, { withColorHover: true }),
+      )}
     >
       <SVG src={iconUrl} className="h-9 desktop:w-12" preProcessor={optimizeAndDefineColor()} />
       <span className="w-20 text-sm mt-2 text-ellipsis overflow-hidden">{label}</span>
-    </StyleLink>
+    </Link>
   );
 };
-
-const StyleLink = styled(Link)<{ $color?: string }>`
-  &:hover,
-  &:focus {
-    color: ${props => props.$color};
-  }
-`;

frontend/src/components/CardIcon/CardIcon.tsx

@@ -2,19 +2,20 @@ import { optimizeAndDefineColor } from 'stylesheet';
 import SVG from 'react-inlinesvg';
 import styled from 'styled-components';
 import Image from 'next/image';
+import { cn } from 'services/utils/cn';
+import { getActivityColorClassName } from 'components/pages/search/components/ResultCard/getActivityColor';
 
 interface IconProps {
   className?: string;
   iconUri?: string;
-  color?: string;
+  type?: string;
 }
 interface Props extends IconProps {
   iconName?: string;
 }
 
 const Wrapper = styled.div<{ color?: string }>`
   z-index: 100;
-  background: ${props => props.color};
   max-width: 32px;
   transition: max-width 0.6s;
 
@@ -23,13 +24,9 @@ const Wrapper = styled.div<{ color?: string }>`
   }
 `;
 
-const NoImg = styled.span<{ color?: string }>`
-  background: ${props => props.color};
-`;
-
-const Icon: React.FC<IconProps> = ({ iconUri = '', className = '', color }) => {
+const Icon: React.FC<IconProps> = ({ iconUri = '', className = '' }) => {
   if (!iconUri) {
-    return <NoImg color={color} className={`block rounded-full ${className}`} />;
+    return <span className={cn('block rounded-full', className)} />;
   }
   if (RegExp(/(.*).svg/).test(iconUri)) {
     return (
@@ -43,16 +40,22 @@ const Icon: React.FC<IconProps> = ({ iconUri = '', className = '', color }) => {
   return <Image loading="lazy" className={className} src={iconUri} alt="" width={28} height={28} />;
 };
 
-export const CardIcon: React.FC<Props> = ({ iconUri = '', iconName = '', color }) => {
+export const CardIcon: React.FC<Props> = ({ iconUri = '', iconName = '', type = null }) => {
   if (!iconName && !iconUri) {
     return null;
   }
+
   return (
     <Wrapper
-      className="absolute top-4 left-4 h-8 flex items-center rounded-full shadow-sm text-white border-2 border-white border-solid overflow-hidden"
-      color={color}
+      className={cn(
+        'absolute top-4 left-4 h-8 flex items-center rounded-full shadow-sm text-white border-2 border-white border-solid overflow-hidden',
+        getActivityColorClassName(type, { withBackground: true }),
+      )}
     >
-      <Icon color={color} iconUri={iconUri} className="size-7 shrink-0" />
+      <Icon
+        iconUri={iconUri}
+        className={cn('size-7 shrink-0', getActivityColorClassName(type, { withBackground: true }))}
+      />
       {iconName && <div className="pr-3 whitespace-nowrap">{iconName}</div>}
     </Wrapper>
   );

frontend/src/components/Map/components/HoverableMarker.tsx

@@ -2,7 +2,6 @@
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
 import React, { ReactNode, useMemo } from 'react';
 import { Marker } from 'react-leaflet';
-import { ContentType } from 'modules/interface';
 import { TrekChildMarker } from '../Markers/TrekChildMarker';
 import { TrekMarker } from '../Markers/TrekMarker';
 
@@ -18,7 +17,7 @@
 
 interface TrekOrTouristicContentProps extends BaseProps {
   pictogramUri?: string;
-  type?: ContentType | null;
+  type?: string | null;
 }
 
 interface TrekChildProps extends BaseProps {
@@ -32,7 +31,7 @@
 export const HoverableMarker: React.FC<TrekOrTouristicContentProps | TrekChildProps> = props => {
   const { hoveredCardId } = useListAndMapContext();
   const isCorrespondingCardHovered = props.id === hoveredCardId;
-  const color = getActivityColor(props.type);
+  const color = getActivityColor(props.type ?? null);
 
   return useMemo(
     () => (
@@ -51,6 +50,6 @@
         {props.children}
       </Marker>
     ),
     [props.id, isCorrespondingCardHovered, color],
   );
 };

frontend/src/components/Map/components/HoverablePolygon.tsx

@@ -1,5 +1,4 @@
 import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
-import { ContentType } from 'modules/interface';
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
 import { useMemo } from 'react';
 import { Polygon } from 'react-leaflet';
@@ -10,7 +9,7 @@ const DEFAULT_WEIGHT = 3;
 interface Props {
   id: string;
   positions: [number, number][][];
-  type: ContentType | null;
+  type: string | null;
 }
 
 export const HoverablePolygon: React.FC<Props> = props => {

frontend/src/components/Map/components/HoverablePolyline.tsx

@@ -1,5 +1,4 @@
 import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
-import { ContentType } from 'modules/interface';
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
 import { useMemo } from 'react';
 import { Polyline } from 'react-leaflet';
@@ -10,7 +9,7 @@ const DEFAULT_WEIGHT = 3;
 interface Props {
   id: string;
   positions: [number, number][];
-  type: ContentType | null;
+  type: string | null;
 }
 
 export const HoverablePolyline: React.FC<Props> = props => {

frontend/src/components/MobileFilterMenu/MobileFilterMenu.tsx

@@ -3,7 +3,6 @@ import MobileBottomClear from 'components/pages/search/components/FilterBar/Mobi
 import Slide from 'react-burger-menu/lib/menus/slide';
 
 import { Cross } from 'components/Icons/Cross';
-import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
 import { CATEGORY_ID, EVENT_ID, OUTDOOR_ID, PRACTICE_ID } from 'modules/filters/constant';
 import useCounter from 'components/pages/search/hooks/useCounter';
 import { FormattedMessage } from 'react-intl';
@@ -80,7 +79,7 @@ export const MobileFilterMenu: React.FC<Props> = ({
           );
           return (
             <MobileFilterMenuSection
-              color={getActivityColor(item.id)}
+              type={item.id}
               title={name}
               key={item.id}
               onClick={item.onSelect}

frontend/src/components/MobileFilterMenu/MobileFilterMenuSection/index.tsx

@@ -1,21 +1,25 @@
 import { ChevronDown } from 'components/Icons/ChevronDown';
+import { getActivityColorClassName } from 'components/pages/search/components/ResultCard/getActivityColor';
+import { cn } from 'services/utils/cn';
 
 export interface Props {
   title: string | React.ReactElement;
   onClick?: () => void;
   numberSelected: number;
-  color: string;
+  type: string;
 }
 
 export const MobileFilterMenuSection: React.FC<Props> = ({
   title,
   onClick,
   numberSelected,
-  color,
+  type = null,
 }) => {
-  const classNameSectionName = `font-bold text-Mobile-C1 w-full ${
-    numberSelected > 0 ? 'text-primary1' : 'text-greyDarkColored'
-  }`;
+  const classNameSectionName = cn(
+    'font-bold text-Mobile-C1 w-full',
+    numberSelected > 0 ? 'text-primary1' : 'text-greyDarkColored',
+    getActivityColorClassName(type, { withColor: true }),
+  );
 
   return (
     <button
@@ -25,19 +29,21 @@ export const MobileFilterMenuSection: React.FC<Props> = ({
     >
       {numberSelected > 0 && (
         <span
-          className="bg-primary1 text-white text-center rounded-full size-6 font-bold mr-2"
-          style={{ backgroundColor: color }}
+          className={cn(
+            'bg-primary1 text-white text-center rounded-full size-6 font-bold mr-2',
+            getActivityColorClassName(type, { withBackground: true }),
+          )}
         >
           {numberSelected}
         </span>
       )}
-      <span className={classNameSectionName} style={{ color }}>
-        {title}
-      </span>
+      <span className={classNameSectionName}>{title}</span>
       <ChevronDown
-        className="-rotate-90 text-primary1 ml-auto"
+        className={cn(
+          '-rotate-90 text-primary1 ml-auto',
+          getActivityColorClassName(type, { withColor: true }),
+        )}
         size={24}
-        color={color}
         aria-hidden
       />
     </button>

frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx

@@ -4,7 +4,6 @@ import { Link } from 'components/Link';
 import { Modal } from 'components/Modal';
 import { DetailsCoverCarousel } from 'components/pages/details/components/DetailsCoverCarousel';
 import { HtmlText } from 'components/pages/details/utils';
-import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
 import useHasMounted from 'hooks/useHasMounted';
 import parse from 'html-react-parser';
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
@@ -166,7 +165,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
                 </>
               )}
             </Modal>
-            <CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
+            <CardIcon iconUri={iconUri} iconName={iconName} type={type} />
           </div>
         </div>
         <div ref={detailsCardRef} className="p-2 desktop:p-6">