[DEV] test step between receipice and direct managemnt

front/app-build.json

@@ -1,6 +1,6 @@
 {
-  "display": "2025-01-13",
+  "display": "2025-01-14",
-  "version": "0.0.1-dev\n - 2025-01-13T21:39:39+01:00",
+  "version": "0.0.1-dev\n - 2025-01-14T20:19:20+01:00",
   "commit": "0.0.1-dev\n",
-  "date": "2025-01-13T21:39:39+01:00"
+  "date": "2025-01-14T20:19:20+01:00"
 }

front/package.json

@@ -38,9 +38,10 @@
     "css-mediaquery": "0.1.2",
     "dayjs": "1.11.13",
     "history": "5.3.0",
+    "next-themes": "^0.4.4",
     "react": "18.3.1",
-    "react-error-boundary": "5.0.0",
     "react-dom": "18.3.1",
+    "react-error-boundary": "5.0.0",
     "react-icons": "5.4.0",
     "react-router-dom": "7.1.1",
     "react-select": "5.9.0",

front/pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       history:
         specifier: 5.3.0
         version: 5.3.0
+      next-themes:
+        specifier: ^0.4.4
+        version: 0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: 18.3.1
         version: 18.3.1
@@ -3820,6 +3823,12 @@ packages:
     resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
     engines: {node: '>= 0.4.0'}
 
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
@@ -9838,6 +9847,11 @@ snapshots:
 
   netmask@2.0.2: {}
 
+  next-themes@0.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   node-domexception@1.0.0: {}
 
   node-eval@2.0.0:

front/src/App.tsx

@@ -17,7 +17,6 @@ import {
   SelectValueText,
   Stack,
   Text,
-  defaultSystem,
   useDisclosure,
 } from '@chakra-ui/react';
 
@@ -26,6 +25,7 @@ import { App as SpaApp } from '@/scene/App';
 import { USERS, USERS_COLLECTION } from '@/service/session';
 import { hashLocalData } from '@/utils/sso';
 import { Toaster } from './components/ui/toaster';
+import { systemTheme } from './theme/theme';
 
 const AppEnvHint = () => {
   const dialog = useDisclosure();
@@ -120,8 +120,9 @@ const AppEnvHint = () => {
 };
 
 const App = () => {
+
   return (
-    <ChakraProvider value={defaultSystem}>
+    <ChakraProvider value={systemTheme}>
       <AppEnvHint />
       <SpaApp />
       <Toaster />

front/src/components/AudioPlayer.tsx

@@ -2,6 +2,7 @@ import { SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import {
   Box,
+  Button,
   Flex,
   IconButton,
   Slider,
@@ -31,8 +32,9 @@ import { useSpecificArtists } from '@/service/Artist';
 import { useSpecificGender } from '@/service/Gender';
 import { useSpecificTrack } from '@/service/Track';
 import { DataUrlAccess } from '@/utils/data-url-access';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Icon } from './Icon';
 
 export enum PlayMode {
   PLAY_ONE,
@@ -62,7 +64,6 @@ const formatTime = (time) => {
 };
 
 export const AudioPlayer = ({ }: AudioPlayerProps) => {
-  const { mode } = useThemeMode();
   const { playTrackList, trackOffset, previous, next, first } =
     useActivePlaylistService();
   const audioRef = useRef<HTMLAudioElement>(null);
@@ -85,7 +86,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
         : ''
     );
   }, [dataTrack, setMediaSource]);
-  const backColor = mode('back.100', 'back.800');
+  const backColor = useColorModeValue('back.100', 'back.800');
   const configButton = {
     borderRadius: 'full',
     backgroundColor: '#00000000',
@@ -93,6 +94,9 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
       boxShadow: 'outline-over',
       bgColor: 'brand.500',
     },
+    width: "50px",
+    height: "50px",
+    padding: "5px",
   };
 
   useEffect(() => {
@@ -285,11 +289,11 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
               aria-label={'Play'}
               onClick={onPlay}
             >
-              isPlaying ? (
+              {isPlaying ? (
-              <MdPause size="30px" />
+                <MdPause size="30px" />
               ) : (
-              <MdPlayArrow size="30px" />
+                <MdPlayArrow size="30px" />
-              )
+              )}
             </IconButton>
             <IconButton
               {...configButton}
@@ -311,18 +315,18 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
               {...configButton}
               aria-label={'jump 15sec in future'}
               onClick={onFastForward}
-            ><MdFastForward size="30px" /></IconButton>
+            ><MdFastForward style={{ width: "100%", height: "100%" }} /></IconButton>
             <IconButton
               {...configButton}
               aria-label={'Next track'}
               marginRight="auto"
               onClick={onNavigateNext}
-            ><MdNavigateNext size="30px" /></IconButton>
+            ><MdNavigateNext style={{ width: "100%", height: "100%" }} /></IconButton>
             <IconButton
               {...configButton}
               aria-label={'continue to the end'}
               onClick={onTypePlay}
-            >playModeIcon[playingMode]</IconButton>
+            >{playModeIcon[playingMode]}</IconButton>
           </Flex>
         </Flex>
       )}

front/src/components/Layout/PageLayoutInfoCenter.tsx

@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { colors } from '@/theme/foundations/colors';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 
 export type LayoutProps = FlexProps & {
   children: ReactNode;
@@ -22,7 +22,6 @@ export const PageLayoutInfoCenter = ({
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  const { mode } = useThemeMode();
   return (
     <PageLayout>
       <Flex
@@ -34,7 +33,7 @@ export const PageLayoutInfoCenter = ({
         borderRadius="8px"
         padding="10px"
         boxShadow={'0px 0px 16px ' + colors.back[900]}
-        backgroundColor={mode('#FFFFFF', '#000000')}
+        backgroundColor={useColorModeValue('#FFFFFF', '#000000')}
         {...rest}
       >
         {children}

front/src/components/TopBar/TopBar.tsx

@@ -2,12 +2,6 @@ import { ReactNode } from 'react';
 
 import {
   Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerContent,
-  DrawerHeader,
-  DrawerRoot,
   Flex,
   HStack,
   IconButton,
@@ -29,15 +23,22 @@ import { useServiceContext } from '@/service/ServiceContext';
 import { SessionState } from '@/service/SessionState';
 import { colors } from '@/theme/foundations/colors';
 import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
-import { useThemeMode } from '@/utils/theme-tools';
 import { useSessionService } from '@/service/session';
 import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
+import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
+import {
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerRoot,
+} from '@/components/ui/drawer';
+import { Button } from '../ui/themed';
 
 export const TOP_BAR_HEIGHT = '50px';
 
 export const BUTTON_TOP_BAR_PROPERTY = {
-  colorPalette: '@menu',
+  theme: '@menu',
   height: TOP_BAR_HEIGHT,
 };
 
@@ -47,11 +48,11 @@ export type TopBarProps = {
 };
 
 export const TopBar = ({ title, children }: TopBarProps) => {
-  const { mode, colorMode, toggleColorMode } = useThemeMode();
+  const { colorMode, toggleColorMode } = useColorMode();
   const { clearToken } = useSessionService();
 
   const { session } = useServiceContext();
-  const backColor = mode('back.100', 'back.800');
+  const backColor = useColorModeValue('back.100', 'back.800');
   const drawerDisclose = useDisclosure();
   const onChangeTheme = () => {
     drawerDisclose.onOpen();
@@ -120,7 +121,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
       <Flex right="0">
         {session?.state !== SessionState.CONNECTED && (
           <>
-            <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onSignIn}>
+            <Button {...BUTTON_TOP_BAR_PROPERTY} theme="@primary" onClick={onSignIn}>
               <LuLogIn />
               <Text paddingLeft="3px" fontWeight="bold">
                 Sign-in
@@ -149,7 +150,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
               ><MdSupervisedUserCircle /></IconButton>
             </MenuTrigger>
             <MenuContent>
-              <MenuItem value="user" valueText="user" _hover={{}} color={mode('brand.800', 'brand.200')}>
+              <MenuItem value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}>
                 <MdSupervisedUserCircle />
                 <Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
               </MenuItem>
@@ -171,71 +172,69 @@ export const TopBar = ({ title, children }: TopBarProps) => {
           </MenuRoot>
         )}
       </Flex>
-      <Drawer.Root
+      <DrawerRoot
         placement="start"
         onOpenChange={drawerDisclose.onClose}
         open={drawerDisclose.open}
         data-testid="top-bar_drawer-root"
       >
-        <Drawer.Positioner>
+        <DrawerContent
-          <Drawer.Content
+          data-testid="top-bar_drawer-content">
-            data-testid="top-bar_drawer-content">
+          <DrawerHeader
-            <Drawer.Header
+            paddingY="auto"
-              paddingY="auto"
+            as="button"
-              as="button"
+            onClick={drawerDisclose.onClose}
-              onClick={drawerDisclose.onClose}
+            boxShadow={'0px 2px 4px ' + colors.back[900]}
-              boxShadow={'0px 2px 4px ' + colors.back[900]}
+            backgroundColor={backColor}
-              backgroundColor={backColor}
+            color={useColorModeValue('brand.900', 'brand.50')}
-              color={mode('brand.900', 'brand.50')}
+            textTransform="uppercase"
-              textTransform="uppercase"
+          >
+            <HStack height={TOP_BAR_HEIGHT}>
+              <LuArrowBigLeft />
+              <Text as="span" paddingLeft="3px">
+                Karusic
+              </Text>
+            </HStack>
+          </DrawerHeader>
+          <DrawerBody paddingX="0px">
+            <Button
+              background="#00000000"
+              borderRadius="0px"
+              onClick={onSelectHome}
+              width="full"
             >
-              <HStack height={TOP_BAR_HEIGHT}>
+              <MdHome />
-                <LuArrowBigLeft />
+              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                <Text as="span" paddingLeft="3px">
+                Home
-                  Karusic
+              </Text>
-                </Text>
+            </Button>
-              </HStack>
+            <hr />
-            </Drawer.Header>
+            <Button
-            <Drawer.Body paddingX="0px">
+              background="#00000000"
-              <Button
+              borderRadius="0px"
-                background="#00000000"
+              onClick={onSelectOnAir}
-                borderRadius="0px"
+              width="full"
-                onClick={onSelectHome}
+            >
-                width="full"
+              <MdOutlinePlaylistPlay />
-              >
+              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                <MdHome />
+                On air
-                <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
+              </Text>
-                  Home
+            </Button>
-                </Text>
+            <hr />
-              </Button>
+            <Button
-              <hr />
+              background="#00000000"
-              <Button
+              borderRadius="0px"
-                background="#00000000"
+              onClick={onSelectAdd}
-                borderRadius="0px"
+              width="full"
-                onClick={onSelectOnAir}
+            >
-                width="full"
+              <MdOutlineUploadFile />
-              >
+              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                <MdOutlinePlaylistPlay />
+                Add Media
-                <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
+              </Text>
-                  On air
+            </Button>
-                </Text>
+          </DrawerBody>
-              </Button>
+        </DrawerContent>
-              <hr />
+      </DrawerRoot>
-              <Button
-                background="#00000000"
-                borderRadius="0px"
-                onClick={onSelectAdd}
-                width="full"
-              >
-                <MdOutlineUploadFile />
-                <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                  Add Media
-                </Text>
-              </Button>
-            </Drawer.Body>
-          </Drawer.Content>
-        </Drawer.Positioner>
-      </Drawer.Root>
     </Flex>
   );
 };

front/src/components/contextMenu/ContextMenu.tsx

@@ -5,6 +5,8 @@ import {
 } from '@chakra-ui/react';
 import { LuMenu } from 'react-icons/lu';
 import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
+import { Button } from '../ui/themed';
+import { customVariant } from '@/theme/recipes/button';
 
 export type MenuElement = {
   name: string;
@@ -15,6 +17,21 @@ export type ContextMenuProps = {
   elements?: MenuElement[];
 };
 
+const theme = {
+  plop: {
+    bg: { _light: 'red', _dark: 'brand.300', _pink: "orange" },
+    _hover: { bg: { _light: 'green', _dark: 'brand.400', _pink: "black" } },
+    // bg: { _light: 'brand.600', _dark: 'brand.300' },
+    // _hover: { bg: { _light: 'brand.700', _dark: 'brand.400' } },
+    /*
+    bgActive: { _light: 'brand.600', _dark: 'brand.300' },
+    color: { _light: 'white', _dark: 'brand.900' },
+    colorHover: { _light: 'brand.800', _dark: 'brand.100' },
+    boxShadowHover: 'outline-over'
+    */
+  }
+};
+
 export const ContextMenu = ({ elements }: ContextMenuProps) => {
   if (!elements) {
     return <></>;
@@ -25,9 +42,9 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
       <MenuTrigger asChild
         data-testid="context-menu_trigger">
         {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
-        <IconButton as='span'>
+        <Button {...theme.plop} /*theme="@primary"*/>
           <LuMenu />
-        </IconButton>
+        </Button>
       </MenuTrigger>
       <MenuContent
         data-testid="context-menu_content">
@@ -38,6 +55,6 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
           </MenuItem>
         ))}
       </MenuContent>
-    </MenuRoot>
+    </MenuRoot >
   );
 };

front/src/components/popup/AlbumEditPopUp.tsx

@@ -1,17 +1,9 @@
 import { useRef, useState } from 'react';
 
 import {
-  Button,
   Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
   Text,
   useDisclosure,
-  DialogRoot,
-  DialogCloseTrigger,
 } from '@chakra-ui/react';
 import {
   MdAdminPanelSettings,
@@ -32,6 +24,8 @@ import { useAlbumService, useSpecificAlbum } from '@/service/Album';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksWithAlbumId } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
+import { Button } from '../ui/themed';
 
 export type AlbumEditPopUpProps = {};
 
@@ -174,7 +168,7 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
                 <Button
                   onClick={disclosure.onOpen}
                   marginRight="auto"
-                  colorPalette="red"
+                  theme="@danger"
                   disabled={countTracksOfAnAlbum !== 0}
                 >
                   <MdDeleteForever /> Remove Media

front/src/components/popup/ArtistEditPopUp.tsx

@@ -1,17 +1,11 @@
 import { useRef, useState } from 'react';
 
 import {
-  Button,
   Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
   Text,
   useDisclosure,
-  DialogRoot,
 } from '@chakra-ui/react';
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 import {
   MdAdminPanelSettings,
   MdDeleteForever,
@@ -31,6 +25,7 @@ import { useArtistService, useSpecificArtist } from '@/service/Artist';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAnArtist } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '../ui/themed';
 
 export type ArtistEditPopUpProps = {};
 
@@ -171,7 +166,7 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
                 <Button
                   onClick={disclosure.onOpen}
                   marginRight="auto"
-                  colorPalette="red"
+                  theme="@danger"
                   disabled={countTracksOnAnArtist !== 0}
                 >
                   <MdDeleteForever /> Remove Media

front/src/components/popup/ConfirmPopUp.tsx

@@ -2,14 +2,10 @@ import { useRef } from 'react';
 
 import {
   Button,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogRoot,
   UseDisclosureReturn,
 } from '@chakra-ui/react';
 
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 export type ConfirmPopUpProps = {
   title: string;
   body: string;

front/src/components/popup/GenderEditPopUp.tsx

@@ -1,16 +1,9 @@
 import { useRef, useState } from 'react';
 
 import {
-  Button,
   Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
   Text,
   useDisclosure,
-  DialogRoot,
 } from '@chakra-ui/react';
 import {
   MdAdminPanelSettings,
@@ -18,6 +11,8 @@ import {
   MdEdit,
   MdWarning,
 } from 'react-icons/md';
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { Gender, GenderResource } from '@/back-api';
@@ -31,6 +26,7 @@ import { useGenderService, useSpecificGender } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAGender } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '../ui/themed';
 
 export type GenderEditPopUpProps = {};
 
@@ -170,7 +166,7 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
                 <Button
                   onClick={disclosure.onOpen}
                   marginRight="auto"
-                  colorPalette="red"
+                  theme="@danger"
                   disabled={countTracksOnAGender !== 0}
                 >
                   <MdDeleteForever /> Remove gender

front/src/components/popup/PopUpUploadProgress.tsx

@@ -1,37 +1,13 @@
-import { ReactElement, useRef, useState } from 'react';
+import { useRef } from 'react';
 
 import {
-  Button,
   Flex,
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
   Progress,
   Text,
-  useDisclosure,
-  DialogRoot,
 } from '@chakra-ui/react';
-import {
-  MdAdminPanelSettings,
-  MdDeleteForever,
-  MdEdit,
-  MdWarning,
-} from 'react-icons/md';
-import { useNavigate, useParams } from 'react-router-dom';
 
-import { Artist, ArtistResource } from '@/back-api';
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
-import { FormCovers } from '@/components/form/FormCovers';
+import { Button } from '../ui/themed';
-import { FormGroup } from '@/components/form/FormGroup';
-import { FormInput } from '@/components/form/FormInput';
-import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
-import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
-import { useArtistService, useSpecificArtist } from '@/service/Artist';
-import { useServiceContext } from '@/service/ServiceContext';
-import { useCountTracksOfAnArtist } from '@/service/Track';
-import { isNullOrUndefined } from '@/utils/validator';
 
 export type PopUpUploadProgressProps = {
   title: string;
@@ -112,7 +88,7 @@ export const PopUpUploadProgress = ({
         </DialogBody>
         <DialogFooter>
           {isFinished ? (
-            <Button onClick={onClose} colorPalette="@success">
+            <Button onClick={onClose} theme="@success">
               Ok
             </Button>
           ) : (

front/src/components/popup/TrackEditPopUp.tsx

@@ -1,15 +1,12 @@
 import { useRef, useState } from 'react';
 
 import {
-  Button,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogRoot,
   Text,
   useDisclosure,
 } from '@chakra-ui/react';
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
+
 import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -28,6 +25,7 @@ import { useOrderedGenders } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useSpecificTrack, useTrackService } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '../ui/themed';
 
 export type TrackEditPopUpProps = {};
 
@@ -115,7 +113,7 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
                 <Button
                   onClick={disclosure.onOpen}
                   marginRight="auto"
-                  colorPalette="@danger"
+                  theme="@danger"
                 >
                   <MdDeleteForever /> Remove Media
                 </Button>

front/src/components/ui/close-button.tsx

@@ -0,0 +1,17 @@
+import type { ButtonProps } from "@chakra-ui/react"
+import { IconButton as ChakraIconButton } from "@chakra-ui/react"
+import * as React from "react"
+import { LuX } from "react-icons/lu"
+
+export type CloseButtonProps = ButtonProps
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  return (
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  )
+})

front/src/components/ui/color-mode.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { ThemeProvider, useTheme, ThemeProviderProps } from "next-themes"
+
+export interface ColorModeProviderProps extends ThemeProviderProps { }
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" themes={['pink', 'dark', 'light']} disableTransitionOnChange {...props} />
+  )
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    console.log(`plop: ${resolvedTheme}`);
+    setTheme(resolvedTheme === "light" ? "pink" : resolvedTheme === "pink" ? "dark" : "light")
+  }
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode()
+  return colorMode === "light" ? light : dark
+}

front/src/components/ui/dialog.tsx

@@ -0,0 +1,62 @@
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  backdrop?: boolean
+}
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>(function DialogContent(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    ...rest
+  } = props
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  )
+})
+
+export const DialogCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDialog.CloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  return (
+    <ChakraDialog.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref}>
+        {props.children}
+      </CloseButton>
+    </ChakraDialog.CloseTrigger>
+  )
+})
+
+export const DialogRoot = ChakraDialog.Root
+export const DialogFooter = ChakraDialog.Footer
+export const DialogHeader = ChakraDialog.Header
+export const DialogBody = ChakraDialog.Body
+export const DialogBackdrop = ChakraDialog.Backdrop
+export const DialogTitle = ChakraDialog.Title
+export const DialogDescription = ChakraDialog.Description
+export const DialogTrigger = ChakraDialog.Trigger
+export const DialogActionTrigger = ChakraDialog.ActionTrigger

front/src/components/ui/drawer.tsx

@@ -0,0 +1,52 @@
+import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface DrawerContentProps extends ChakraDrawer.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  offset?: ChakraDrawer.ContentProps["padding"]
+}
+
+export const DrawerContent = React.forwardRef<
+  HTMLDivElement,
+  DrawerContentProps
+>(function DrawerContent(props, ref) {
+  const { children, portalled = true, portalRef, offset, ...rest } = props
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraDrawer.Positioner padding={offset}>
+        <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDrawer.Content>
+      </ChakraDrawer.Positioner>
+    </Portal>
+  )
+})
+
+export const DrawerCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDrawer.CloseTriggerProps
+>(function DrawerCloseTrigger(props, ref) {
+  return (
+    <ChakraDrawer.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref} />
+    </ChakraDrawer.CloseTrigger>
+  )
+})
+
+export const DrawerTrigger = ChakraDrawer.Trigger
+export const DrawerRoot = ChakraDrawer.Root
+export const DrawerFooter = ChakraDrawer.Footer
+export const DrawerHeader = ChakraDrawer.Header
+export const DrawerBody = ChakraDrawer.Body
+export const DrawerBackdrop = ChakraDrawer.Backdrop
+export const DrawerDescription = ChakraDrawer.Description
+export const DrawerTitle = ChakraDrawer.Title
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger

front/src/components/ui/themed.tsx

@@ -0,0 +1,7 @@
+
+import buttonRecipe from '@/theme/recipes/button';
+import { chakra } from '@chakra-ui/react';
+
+// we export the element with the application recipe theme.
+// cf doc: https://www.chakra-ui.com/docs/theming/recipes
+export const Button = chakra("button", buttonRecipe)

front/src/errors/ErrorBoundary.tsx

@@ -1,12 +1,10 @@
 import React, { FC } from 'react';
 
 import {
-  Alert,
   AlertDescription,
   AlertRoot,
   AlertTitle,
   Box,
-  Button,
   Collapsible,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -14,7 +12,8 @@ import {
   FallbackProps,
   ErrorBoundary as ReactErrorBoundary,
 } from 'react-error-boundary';
-import { LuChevronDown, LuChevronUp } from 'react-icons/lu';
+import { Button } from '@/components/ui/themed';
+import { LuChevronUp, LuChevronDown } from 'react-icons/lu';
 
 const ErrorFallback = ({ error }: FallbackProps) => {
   const { open, onToggle } = useDisclosure();
@@ -26,13 +25,12 @@ const ErrorFallback = ({ error }: FallbackProps) => {
           <AlertTitle>An unexpected error has occurred.</AlertTitle>
           <AlertDescription display="block" lineHeight="1.4">
             <Button
-              colorPalette="link"
+              theme="@secondary"
               color="red.800"
-              size="sm"
+              //size="sm"
-              //rightIcon={open ? <LuChevronUp /> : <LuChevronDown />}
               onClick={onToggle}
             >
-              Show details
+              Show details {open ? <LuChevronUp /> : <LuChevronDown />}
             </Button>
             <Collapsible.Root open={open}>
               <Collapsible.Content>

front/src/main.tsx

@@ -3,6 +3,7 @@ import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from '@/App';
+import { ColorModeProvider } from './components/ui/color-mode';
 
 // Render the app
 const rootElement = document.getElementById('root');
@@ -10,7 +11,9 @@ if (rootElement && !rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <App />
+      <ColorModeProvider>
+        <App />
+      </ColorModeProvider>
     </StrictMode>
   );
 }

front/src/scene/album/AlbumDetailPage.tsx

@@ -15,13 +15,12 @@ import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
 import { useTracksOfAnAlbum } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
 
 export const AlbumDetailPage = () => {
   const { albumId } = useParams();
   const albumIdInt = albumId ? parseInt(albumId, 10) : undefined;
-  const { mode } = useThemeMode();
   const { playInList } = useActivePlaylistService();
   const { dataAlbum } = useSpecificAlbum(albumIdInt);
   const { tracksOnAnAlbum } = useTracksOfAnAlbum(albumIdInt);
@@ -107,13 +106,13 @@ export const AlbumDetailPage = () => {
               //height="60px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
             >
               <DisplayTrackFull

front/src/scene/album/AlbumsPage.tsx

@@ -9,14 +9,13 @@ import { SearchInput } from '@/components/SearchInput';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { DisplayAlbum } from '@/components/album/DisplayAlbum';
 import { useOrderedAlbums } from '@/service/Album';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_SPACING, BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
 import { Flex, HStack } from '@chakra-ui/react';
 
 export const AlbumsPage = () => {
   const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
   const { isLoading, dataAlbums } = useOrderedAlbums(filterTitle);
-  const { mode } = useThemeMode();
   const navigate = useNavigate();
   const onSelectItem = (albumId: number) => {
     navigate(`/album/${albumId}`);
@@ -44,13 +43,13 @@ export const AlbumsPage = () => {
               height={BASE_WRAP_HEIGHT}
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
               onClick={() => onSelectItem(data.id)}
             >

front/src/scene/artist/ArtistAlbumDetailPage.tsx

@@ -15,13 +15,12 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
 import { useSpecificArtist } from '@/service/Artist';
 import { useTracksOfAnAlbum } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 
 export const ArtistAlbumDetailPage = () => {
   const { artistId, albumId } = useParams();
   const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
   const albumIdInt = albumId ? parseInt(albumId, 10) : undefined;
-  const { mode } = useThemeMode();
   const { playInList } = useActivePlaylistService();
   const { dataArtist } = useSpecificArtist(artistIdInt);
   const { dataAlbum } = useSpecificAlbum(albumIdInt);
@@ -124,13 +123,13 @@ export const ArtistAlbumDetailPage = () => {
               height="60px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
             >
               <DisplayTrack

front/src/scene/artist/ArtistDetailPage.tsx

@@ -12,13 +12,12 @@ import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
 import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
 import { useSpecificArtist } from '@/service/Artist';
 import { useAlbumIdsOfAnArtist } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
 
 export const ArtistDetailPage = () => {
   const { artistId } = useParams();
   const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
-  const { mode } = useThemeMode();
   const navigate = useNavigate();
   const onSelectItem = (albumId: number) => {
     navigate(`/artist/${artistIdInt}/album/${albumId}`);
@@ -96,13 +95,13 @@ export const ArtistDetailPage = () => {
               height={BASE_WRAP_HEIGHT}
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
               onClick={() => onSelectItem(data)}
             >

front/src/scene/artist/ArtistsPage.tsx

@@ -11,7 +11,7 @@ import { PageLayout } from '@/components/Layout/PageLayout';
 import { SearchInput } from '@/components/SearchInput';
 import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
 import { useOrderedArtists } from '@/service/Artist';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
 import { MdOutlineForkRight } from 'react-icons/md';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
@@ -21,7 +21,6 @@ import { DataTools, TypeCheck } from '@/utils/data-tools';
 const LIMIT_RANDOM_VALUES = 25;
 
 export const ArtistsPage = () => {
-  const { mode } = useThemeMode();
   const [filterName, setFilterName] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
   const { playInList } = useActivePlaylistService();
@@ -72,13 +71,13 @@ export const ArtistsPage = () => {
               height={BASE_WRAP_HEIGHT}
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
               onClick={() => onSelectItem(data)}
             >

front/src/scene/gender/GenderDetailPage.tsx

@@ -16,12 +16,11 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificGender } from '@/service/Gender';
 import { useTracksOfAGender } from '@/service/Track';
 //import { useTracksOfAGender } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 
 export const GenderDetailPage = () => {
   const { genderId } = useParams();
   const genderIdInt = genderId ? parseInt(genderId, 10) : undefined;
-  const { mode } = useThemeMode();
   const { playInList } = useActivePlaylistService();
   const { dataGender } = useSpecificGender(genderIdInt);
   const { tracksOnAGender } = useTracksOfAGender(genderIdInt);
@@ -102,13 +101,13 @@ export const GenderDetailPage = () => {
               //height="60px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
             >
               <DisplayTrackFull

front/src/scene/gender/GendersPage.tsx

@@ -9,13 +9,12 @@ import { SearchInput } from '@/components/SearchInput';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { DisplayGender } from '@/components/gender/DisplayGender';
 import { useOrderedGenders } from '@/service/Gender';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { Flex, HStack } from '@chakra-ui/react';
 
 export const GendersPage = () => {
   const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
   const { isLoading, dataGenders } = useOrderedGenders(filterTitle);
-  const { mode } = useThemeMode();
   const navigate = useNavigate();
   const onSelectItem = (genderId: number) => {
     navigate(`/gender/${genderId}`);
@@ -43,13 +42,13 @@ export const GendersPage = () => {
               height="120px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
               onClick={() => onSelectItem(data.id)}
             >

front/src/scene/home/AddPage.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 
 import {
-  Button,
   Flex,
   Input,
   Table,
@@ -32,6 +31,7 @@ import { useGenderService, useOrderedGenders } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useTrackService } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
+import { Button } from '@/components/ui/themed';
 
 export class ElementList {
   constructor(
@@ -540,7 +540,7 @@ export const AddPage = () => {
               </Table.Root>
               <Flex marginY="15px">
                 <Button
-                  colorPalette="@primary"
+                  theme="@primary"
                   onClick={sendFile}
                   disabled={!needSend}
                   marginLeft="auto"

front/src/scene/home/HomePage.tsx

@@ -7,7 +7,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
-import { useThemeMode } from '@/utils/theme-tools';
+
+import { useColorModeValue } from '@/components/ui/color-mode';
 
 type HomeListType = {
   id: number;
@@ -19,37 +20,36 @@ const homeList: HomeListType[] = [
   {
     id: 1,
     name: 'Genders',
-    icon: <LuCrown size="60%" height="full" />,
+    icon: <LuCrown style={{ width: "100px", height: "100px" }} />,
     to: 'gender',
   },
   {
     id: 2,
     name: 'Artists',
-    icon: <MdGroup size="60%" height="full" />,
+    icon: <MdGroup style={{ width: "100px", height: "100px" }} />,
     to: 'artist',
   },
   {
     id: 3,
     name: 'Albums',
-    icon: <LuDisc3 size="60%" height="full" />,
+    icon: <LuDisc3 style={{ width: "100px", height: "100px" }} />,
     to: 'album',
   },
   {
     id: 4,
     name: 'Tracks',
-    icon: <LuFileAudio size="60%" height="full" />,
+    icon: <LuFileAudio style={{ width: "100px", height: "100px" }} />,
     to: 'track',
   },
   {
     id: 5,
     name: 'Playlists',
-    icon: <LuEar size="60%" height="full" />,
+    icon: <LuEar style={{ width: "100px", height: "100px" }} />,
     to: 'playlists',
   },
 ];
 
 export const HomePage = () => {
-  const { mode } = useThemeMode();
   const navigate = useNavigate();
   const onSelectItem = (data: HomeListType) => {
     navigate(data.to);
@@ -65,13 +65,13 @@ export const HomePage = () => {
               height="190px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data.id}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
               onClick={() => onSelectItem(data)}
             >

front/src/scene/onAir/OnAirPage.tsx

@@ -1,26 +1,18 @@
-import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
-import { LuDisc3 } from 'react-icons/lu';
+import { Route, Routes, useNavigate } from 'react-router-dom';
-import { MdEdit } from 'react-icons/md';
-import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
 
-import { Covers } from '@/components/Cover';
 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
-import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
+import { TopBar } from '@/components/TopBar/TopBar';
 import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
 import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
-import { DisplayTrack } from '@/components/track/DisplayTrack';
-import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
-import { useSpecificAlbum } from '@/service/Album';
+import { useColorModeValue } from '@/components/ui/color-mode';
-import { useTracksOfAnAlbum } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
 import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
 import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';
 
 export const OnAirPage = () => {
-  const { mode } = useThemeMode();
   const { playInList } = useActivePlaylistService();
   const { playTrackList, trackOffset, setNewPlaylist } = useActivePlaylistService();
   const navigate = useNavigate();
@@ -92,13 +84,13 @@ export const OnAirPage = () => {
               //height="60px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
             >
               <DisplayTrackFullId

front/src/scene/track/TrackSelectionPage.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
 import { DataTools, TypeCheck } from '@/utils/data-tools';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 
 export const alphabet = [
   'a',
@@ -39,7 +39,6 @@ export const alphabet = [
 const possibilities = [...alphabet, '^^'];
 
 export const TrackSelectionPage = () => {
-  const { mode } = useThemeMode();
   const navigate = useNavigate();
   const onSelectItem = (data: string) => {
     navigate(`/track/${data}`);
@@ -55,13 +54,13 @@ export const TrackSelectionPage = () => {
               height="75px"
               border="1px"
               borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
+              backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
               key={data}
               padding="5px"
               as="button"
               _hover={{
                 boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
+                bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
               }}
               onClick={() => onSelectItem(data)}
             >

front/src/scene/track/TracksStartLetterDetailPage.tsx

@@ -1,22 +1,20 @@
 import { ReactElement } from 'react';
 
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
-import { DisplayTrack } from '@/components/track/DisplayTrack';
 import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
 import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
 import { alphabet } from '@/scene/track/TrackSelectionPage';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
-import { useTrackService, useTracksWithStartName } from '@/service/Track';
+import { useTracksWithStartName } from '@/service/Track';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
 
 export const TracksStartLetterDetailPage = () => {
   const { startLetter } = useParams();
-  const { mode } = useThemeMode();
   const { isLoading, tracksStartsWith } = useTracksWithStartName(
     startLetter !== '^^'
       ? startLetter
@@ -63,13 +61,13 @@ export const TracksStartLetterDetailPage = () => {
                 //height="60px"
                 border="1px"
                 borderColor="brand.900"
-                backgroundColor={mode('#FFFFFF88', '#00000088')}
+                backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
                 key={data}
                 padding="5px"
                 as="button"
                 _hover={{
                   boxShadow: 'outline-over',
-                  bgColor: mode('#FFFFFFF7', '#000000F7'),
+                  bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
                 }}
               >
                 <DisplayTrackSkeleton />
@@ -82,13 +80,13 @@ export const TracksStartLetterDetailPage = () => {
                 //height="60px"
                 border="1px"
                 borderColor="brand.900"
-                backgroundColor={mode('#FFFFFF88', '#00000088')}
+                backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
                 key={data.id}
                 padding="5px"
                 as="button"
                 _hover={{
                   boxShadow: 'outline-over',
-                  bgColor: mode('#FFFFFFF7', '#000000F7'),
+                  bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
                 }}
               >
                 <DisplayTrackFull

front/src/theme/foundations/index.ts

@@ -0,0 +1,9 @@
+import { colors } from './colors';
+import { shadows } from './shadows';
+
+const foundations = {
+  colors,
+  shadows,
+};
+
+export default foundations;

front/src/theme/foundations/shadows.ts

@@ -0,0 +1,21 @@
+import { colors } from './colors';
+
+const createOutline = (colorScheme = 'gray') =>
+  `0 0 0 3px ${colorScheme}.500/3`;
+
+export const shadows = {
+  outline: createOutline('brand'),
+  'outline-brand': '0 0 0 1px brand.900',
+  'outline-gray': createOutline('gray'),
+  'outline-over': `4px 4px 5px #00000088`,
+  'outline-darkgray': `0 0 0 3px gray.500/8`,
+  'outline-success': createOutline('success'),
+  'outline-warning': createOutline('warning'),
+  'outline-error': createOutline('error'),
+  'outline-doing': createOutline('doing'),
+  'outline-paused': createOutline('paused'),
+  layout: '0 0 24px 1px rgba(0, 0, 0, 0.05)',
+  smooth: 'inset 0px 0px 16px rgba(0, 0, 0, 0.05)',
+  // smooth-light is used for dark backgrounds
+  'smooth-light': 'inset 0px 0px 16px rgba(255, 255, 255, 0.1)',
+};

front/src/theme/recipes/badge.ts

@@ -0,0 +1,24 @@
+export default {
+  sizes: {
+    '2xs': {
+      fontSize: '0.5em',
+    },
+    xs: {
+      fontSize: '0.6em',
+    },
+    sm: {
+      fontSize: '0.7em',
+    },
+    md: {
+      fontSize: '0.8em',
+      textTransform: 'none',
+    },
+    lg: {
+      fontSize: '0.9em',
+      textTransform: 'none',
+    },
+  },
+  defaultProps: {
+    size: 'md',
+  },
+};

front/src/theme/recipes/button.ts

@@ -0,0 +1,109 @@
+import { defineRecipe, defineStyle, RecipeVariantRecord, SystemStyleObject } from '@chakra-ui/react';
+
+// https://medium.com/@a.heydari.dev/simplifying-chakra-ui-v3-recipes-vs-chakra-factory-a-developers-perspective-4020b62f1b4d
+
+// const shimmer = keyframes`
+//   100% {
+//     transform: translateX(100%);
+//   }
+// `;
+
+export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => {
+  return defineStyle({
+    bg,
+    color,
+    border: '1px solid transparent',
+    _focus: {
+      border: '1px solid',
+      borderColor: 'black',
+    },
+    _hover: {
+      bg: bgHover,
+      color: colorHover,
+      boxShadow: boxShadowHover,
+      _disabled: {
+        bg,
+        boxShadow: 'none',
+      },
+    },
+    _active: {
+      bg: bgActive,
+    },
+  });
+};
+
+const buttonRecipe = defineRecipe({
+  variants: {
+    theme: {
+      "@primary":
+        customVariant({
+          bg: { _light: 'brand.600', _dark: 'brand.300' },
+          bgHover: { _light: 'brand.700', _dark: 'brand.400' },
+          bgActive: { _light: 'brand.600', _dark: 'brand.300' },
+          color: { _light: 'white', _dark: 'brand.900' },
+          colorHover: { _light: 'brand.800', _dark: 'brand.100' },
+          boxShadowHover: 'outline-over'
+        }),
+      "@secondary":
+        customVariant({
+          bg: { _light: 'brand.100', _dark: 'brand.900' },
+          bgHover: { _light: 'brand.200', _dark: 'brand.800' },
+          bgActive: { _light: 'brand.300', _dark: 'brand.700' },
+          color: { _light: 'brand.700', _dark: 'brand.50' },
+          colorHover: { _light: 'brand.800', _dark: 'brand.100' },
+          boxShadowHover: 'outline-over',
+        }),
+      "@danger":
+        customVariant({
+          bg: { _light: 'error.600', _dark: 'error.600' },
+          bgHover: { _light: 'error.700', _dark: 'error.500' },
+          bgActive: { _light: 'error.600', _dark: 'error.500' },
+          color: { _light: 'white', _dark: 'error.900' },
+          colorHover: { _light: 'error.700', _dark: 'error.900' },
+          boxShadowHover: 'outline-over',
+        }),
+      "@success":
+        customVariant({
+          bg: { _light: 'green.300', _dark: 'green.300' },
+          bgHover: { _light: 'green.400', _dark: 'green.400' },
+          bgActive: { _light: 'green.500', _dark: 'green.400' },
+          color: { _light: 'white', _dark: 'green.900' },
+          colorHover: { _light: 'green.500', _dark: 'green.900' },
+          boxShadowHover: 'outline-over',
+        }),
+
+      "@progress":
+        defineStyle({
+          bg: { _light: `brand.500`, _dark: `brand.300` },
+          overflow: 'hidden',
+          /*
+          _after: !props.isLoading
+            ? {
+              content: '""',
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              transform: 'translateX(-100%)',
+              bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`,
+            }
+            : undefined,
+            */
+        }),
+
+      "@menu": defineStyle({
+        bg: 'back.100',
+        color: 'brand.900',
+        borderRadius: 0,
+        border: 0,
+        _hover: { background: 'back.300' },
+        _focus: { border: 'none' },
+        fontSize: '20px',
+        textTransform: 'uppercase',
+      }),
+    },
+  },
+});
+
+export default buttonRecipe;

front/src/theme/recipes/checkbox.ts

@@ -0,0 +1,5 @@
+export default {
+  defaultProps: {
+    colorScheme: 'brand',
+  },
+};

front/src/theme/recipes/drawer.ts

@@ -0,0 +1,29 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+const drawerRecipe = defineRecipe({
+    base: {
+        bg: { _light: 'white', _dark: 'gray.800' },
+        color: { _light: 'gray.900', _dark: 'whiteAlpha.900' },
+        boxShadow: { _light: 'lg', _dark: 'dark-lg' },
+        padding: 4,
+        borderRadius: 'md',
+    },
+    variants: {
+        variant: {
+            solid: {
+                bg: { _light: 'blue.500', _dark: 'blue.300' },
+                color: 'white',
+            },
+            outline: {
+                border: '1px solid',
+                borderColor: { _light: 'gray.300', _dark: 'whiteAlpha.300' },
+                bg: { _light: 'white', _dark: 'gray.900' },
+            },
+        }
+    },
+    defaultVariants: {
+        variant: 'solid',
+    },
+});
+
+export default drawerRecipe;

front/src/theme/recipes/flex.ts

@@ -0,0 +1,20 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+
+const flexTheme = defineRecipe({
+  variants: {
+    variant: {
+      '@menu': {
+        bg: { _light: 'back.100', _dark: 'back.800' },
+        color: { _light: 'brand.900', _dark: 'brand.100' },
+        borderRadius: 0,
+        border: 0,
+        _hover: { background: { _light: 'back.300', _dark: 'back.600' } },
+        _focus: { border: 'none' },
+        fontSize: '20px',
+      },
+    },
+  },
+});
+
+export default flexTheme;

front/src/theme/recipes/index.ts

@@ -0,0 +1,13 @@
+export { default as Badge } from './badge';
+export { default as Button } from './button';
+export { default as Checkbox } from './checkbox';
+export { default as Input } from './input';
+//export { default as NumberInput } from './numberInput.ts_';
+export { default as Popover } from './popover';
+export { default as Radio } from './radio';
+export { default as Select } from './select';
+export { default as Switch } from './switch';
+export { default as Textarea } from './textarea';
+//export { default as Modal } from './modal';
+export { default as Flex } from './flex';
+export { default as Drawer } from './drawer';

front/src/theme/recipes/input.ts

@@ -0,0 +1,21 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+const inputTheme = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
+          borderColor: { _light: 'gray.200', _dark: 'whiteAlpha.100' },
+          color: { _light: 'gray.800', _dark: 'gray.50' },
+          _focus: {
+            borderColor: { _light: 'gray.800', _dark: 'gray.50' },
+            boxShadow: `0 0 0 1px gray.800`,
+          },
+        },
+      },
+    },
+  },
+});
+
+export default inputTheme;

front/src/theme/recipes/modal.ts__

@@ -0,0 +1,17 @@
+import { modalAnatomy as parts } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyle = definePartsStyle({
+  header: {
+    textAlign: 'center',
+  },
+});
+
+const modalTheme = defineMultiStyleConfig({
+  baseStyle,
+});
+
+export default modalTheme;

front/src/theme/recipes/numberInput.ts_

@@ -0,0 +1,27 @@
+import { numberInputAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+import { getColor, mode } from '@chakra-ui/theme-tools';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(numberInputAnatomy.keys);
+
+const baseStyle = definePartsStyle((props) => {
+
+  return {
+    field: {
+      border: 0,
+      _focusVisible: {
+        borderColor: {_light:'brand.500', _dark:'brand.300'},
+        boxShadow: `0 0 0 1px 'brand.500'`,
+        ring: '1px',
+        ringColor: {_light:'brand.500', _dark:'brand.300'},
+        ringOffset: '1px',
+        ringOffsetColor: {_light:'brand.500', _dark:'brand.300'},
+      },
+    },
+  };
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});

front/src/theme/recipes/popover.ts

@@ -0,0 +1,77 @@
+export default {
+  sizes: {
+    '3xs': {
+      content: {
+        width: '3xs',
+      },
+    },
+    '2xs': {
+      content: {
+        width: '2xs',
+      },
+    },
+    xs: {
+      content: {
+        width: 'xs',
+      },
+    },
+    sm: {
+      content: {
+        width: 'sm',
+      },
+    },
+    md: {
+      content: {
+        width: 'md',
+      },
+    },
+    lg: {
+      content: {
+        width: 'lg',
+      },
+    },
+    xl: {
+      content: {
+        width: 'xl',
+      },
+    },
+    '2xl': {
+      content: {
+        width: '2xl',
+      },
+    },
+    '3xl': {
+      content: {
+        width: '3xl',
+      },
+    },
+    '4xl': {
+      content: {
+        width: '4xl',
+      },
+    },
+    '5xl': {
+      content: {
+        width: '5xl',
+      },
+    },
+    '6xl': {
+      content: {
+        width: '6xl',
+      },
+    },
+    '7xl': {
+      content: {
+        width: '7xl',
+      },
+    },
+    '8xl': {
+      content: {
+        width: '8xl',
+      },
+    },
+  },
+  defaultProps: {
+    size: 'xs',
+  },
+};

front/src/theme/recipes/radio.ts

@@ -0,0 +1,5 @@
+export default {
+  defaultProps: {
+    colorScheme: 'brand',
+  },
+};

front/src/theme/recipes/select.ts

@@ -0,0 +1,20 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+const selectTheme = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        field: {
+          bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
+          borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' },
+          _focus: {
+            borderColor: { _light: 'brand.500', _dark: 'brand.300' },
+            boxShadow: `0 0 0 1px black`,
+          },
+        },
+      },
+    },
+  },
+});
+
+export default selectTheme;

front/src/theme/recipes/switch.ts

@@ -0,0 +1,5 @@
+export default {
+  defaultProps: {
+    colorScheme: 'brand',
+  },
+};

front/src/theme/recipes/textarea.ts

@@ -0,0 +1,18 @@
+import { defineRecipe } from '@chakra-ui/react';
+
+
+const textAreaTheme = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
+        borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' },
+        _focus: {
+          borderColor: { _light: 'brand.500', _dark: 'brand.300' },
+          boxShadow: `0 0 0 1px brand.500`,
+        },
+      },
+    }
+  },
+});
+export default textAreaTheme;

front/src/theme/styleguide/buttons.stories.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, IconButton, VStack } from '@chakra-ui/react';
+import { Group, VStack } from '@chakra-ui/react';
 import { HiMinus, HiPlus } from 'react-icons/hi';
 
 const meta = {
@@ -19,8 +19,8 @@ export const Default = {
 export const Primary = {
   render: () => (
     <Group>
-      <Button colorPalette="@primary">Primary Button</Button>
+      <Button theme="@primary">Primary Button</Button>
-      <IconButton colorPalette="@primary" aria-label="Add" ><HiPlus /></IconButton>
+      <IconButton theme="@primary" aria-label="Add" ><HiPlus /></IconButton>
     </Group>
   ),
 };
@@ -28,8 +28,8 @@ export const Primary = {
 export const Secondary = {
   render: () => (
     <Group>
-      <Button colorPalette="@secondary">Secondary Button</Button>
+      <Button theme="@secondary">Secondary Button</Button>
-      <IconButton colorPalette="@secondary" aria-label="Add" ><HiPlus /></IconButton>
+      <IconButton theme="@secondary" aria-label="Add" ><HiPlus /></IconButton>
     </Group>
   ),
 };
@@ -37,8 +37,8 @@ export const Secondary = {
 export const Danger = {
   render: () => (
     <Group>
-      <Button colorPalette="@danger">Danger Button</Button>
+      <Button theme="@danger">Danger Button</Button>
-      <IconButton colorPalette="@danger" aria-label="Remove"><HiMinus /></IconButton>
+      <IconButton theme="@danger" aria-label="Remove"><HiMinus /></IconButton>
     </Group>
   ),
 };
@@ -58,7 +58,7 @@ export const Progress = {
         </Button>
         <IconButton
           variant="solid"
-          colorPalette="red"
+          theme="@danger"
           aria-label="Remove"
         ><HiMinus /></IconButton>
       </VStack>

front/src/theme/styles.ts

@@ -1,13 +1,4 @@
-// import { Styles } from '@chakra-ui/theme-tools';
+import { Styles } from '@chakra-ui/theme-tools';
-// import { mode } from '@chakra-ui/theme-tools';
 
-// export const styles: Styles = {
+export const styles: Styles = {
-//   global: (props) => ({
+};
-//     body: {
-//       overflowY: 'none',
-//       bg: mode('back.50', 'back.700')(props),
-//       color: mode('text.900', 'text.50')(props),
-//       fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
-//     },
-//   }),
-// };

front/src/theme/theme.ts

@@ -1,9 +1,23 @@
-
+import * as recipes from './recipes';
-import { createSystem, defaultConfig } from "@chakra-ui/react"
+import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
 import { colors } from "./foundations/colors"
 
-export const system = createSystem(defaultConfig, {
+const baseTheme: SystemConfig = {
+  globalCss: {
+    body: {
+      overflowY: 'none',
+      bg: { _light: 'back.50', _dark: 'back.700' },
+      color: { _light: 'text.900', _dark: 'text.50' },
+      fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
+    },
+    svg: {
+      width: "32px",
+      height: "32px",
+      aspectRatio: "square",
+    }
+  },
   theme: {
+    ...recipes,
     tokens: {
       fonts: {
         heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
@@ -25,4 +39,6 @@ export const system = createSystem(defaultConfig, {
       },
     },
   },
-})
+};
+const config = mergeConfigs(defaultConfig, baseTheme);
+export const systemTheme = createSystem(config);

front/src/utils/theme-tools.ts

@@ -1,20 +0,0 @@
-import { useCallback } from 'react';
-
-export const useThemeMode = () => {
-  //const { colorMode, toggleColorMode, setColorMode } = useColorMode();
-  const colorMode = "dark";
-  const toggleColorMode = () => { }
-  const setColorMode = (_value: string) => { }
-
-  const mode = useCallback(
-    (lightValue, darkValue) => (colorMode === 'dark' ? darkValue : lightValue),
-    [colorMode]
-  );
-
-  return {
-    toggleColorMode,
-    setColorMode,
-    mode,
-    colorMode,
-  };
-};

front/tsconfig.json

@@ -38,7 +38,9 @@
   "include": [
     "next-env.d.ts",
     "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.tsx",
+    "src/theme/recipes/numberInput.ts_",
+    "src/theme/recipes/modal.ts__"
   ],
   "exclude": [
     "node_modules"