chore: use token for all of the theme text

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -1,8 +1,8 @@
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import { useTheme } from '@mui/material/styles';
 import { useCallback, useState } from 'react';
 import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
-import { CULTURED, DARK_SLATE_GRAY, WHITE } from '../../theme';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
 import {
@@ -50,13 +50,14 @@ export interface StyleProps {
  * @description A functional component that renders the filter sidebar.
  * @param {Array} value - The data to be filtered.
  * @param {Function} setData - A function to set the filtered data.
- * @param {Array} lists - An array of filter sections and it's options lists.
+ * @param {Array} lists - An array of filter sections and its options lists.
  */
 const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
   lists,
   setData,
   value = {}
 }) => {
+  const theme = useTheme(); // Get the current theme
   const [openDrawer, setOpenDrawer] = useState<boolean>(false);
 
   const handleDrawerOpen = useCallback(() => {
@@ -68,8 +69,8 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
   }, []);
 
   const styleProps: StyleProps = {
-    backgroundColor: WHITE,
-    sectionTitleBackgroundColor: CULTURED
+    backgroundColor: theme.palette.background.default,
+    sectionTitleBackgroundColor: theme.palette.background.surfaces
   };
 
   return (
@@ -84,14 +85,14 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
       </FiltersCardDiv>
       <FilterDrawerDiv>
         <FilterButton variant="contained" onClick={handleDrawerOpen}>
-          <FilterAltIcon height="20" width="20" fill={WHITE} />
+          <FilterAltIcon height="20" width="20" fill={theme.palette.text.default} />
           <FilterText>Filters</FilterText>
         </FilterButton>
 
         <Drawer anchor="bottom" open={openDrawer} variant="temporary" onClose={handleDrawerClose}>
           <Box sx={{ overflowY: 'hidden', height: '90vh' }}>
             <FiltersDrawerHeader>
-              <Typography variant="h6" sx={{ color: WHITE }} component="div">
+              <Typography variant="h6" sx={{ color: theme.palette.text.default }} component="div">
                 Filters
               </Typography>
               <CloseBtn onClick={handleDrawerClose}>
@@ -102,7 +103,7 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
               style={{
                 height: '75vh',
                 overflowY: 'auto',
-                background: WHITE
+                background: theme.palette.background.default
               }}
             >
               <CatalogFilterSidebarState
@@ -112,7 +113,8 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
                 styleProps={styleProps}
               />
             </Box>
-            <Box sx={{ backgroundColor: DARK_SLATE_GRAY, height: '5vh' }} />
+            <Box sx={{ backgroundColor: theme.palette.border.strong, height: '5vh' }} />
+            {/* Use theme-aware color */}
           </Box>
         </Drawer>
       </FilterDrawerDiv>

src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx

@@ -6,6 +6,7 @@ import {
   StyleProps
 } from './CatalogFilterSidebar';
 import FilterSection from './FilterSection';
+
 /**
  * @component CatalogFilterSidebarState
  * @description A functional component that manages the filter state.

src/custom/CatalogFilterSection/style.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@mui/material/styles';
 import { Box, Button, InputAdornment, ListItemButton } from '../../base';
-import { CARIBBEAN_GREEN, CHINESE_SILVER, CULTURED, DARK_SLATE_GRAY, KEPPEL } from '../../theme';
 import { StyleProps } from './CatalogFilterSidebar';
 
 export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -31,44 +30,44 @@ export const LabelDiv = styled('div')(() => ({
   alignItems: 'center'
 }));
 
-export const FilterButton = styled(Button)(() => ({
-  backgroundColor: KEPPEL,
+export const FilterButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.primary.brand?.default,
   '&:hover': {
-    backgroundColor: CARIBBEAN_GREEN
+    backgroundColor: theme.palette.background.default
   },
   height: '3.5rem',
   ['@media (max-width:450px)']: {
     minWidth: '0px'
   }
 }));
 
-export const FiltersDrawerHeader = styled(Box)(() => ({
+export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '0.5rem 1rem',
-  backgroundColor: DARK_SLATE_GRAY,
+  backgroundColor: theme.palette.border.strong,
   height: '10vh',
   boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)',
   marginBottom: '0.625rem'
 }));
 
-export const CheckBoxButton = styled(ListItemButton)(() => ({
+export const CheckBoxButton = styled(ListItemButton)(({ theme }) => ({
   padding: '0.25rem 2rem',
   borderBottom: '1px solid',
-  borderBottomColor: CHINESE_SILVER
+  borderBottomColor: theme.palette.text.disabled
 }));
 
-export const FilterTitleButton = styled(ListItemButton)(() => ({
-  backgroundColor: CULTURED,
+export const FilterTitleButton = styled(ListItemButton)(({ theme }) => ({
+  backgroundColor: theme.palette.background.surfaces,
   borderRadius: '0.5rem',
   marginTop: 2,
   display: 'flex',
   justifyContent: 'space-between'
 }));
 
-export const InputAdornmentEnd = styled(InputAdornment)(() => ({
-  borderLeft: `1px solid ${CHINESE_SILVER}`,
+export const InputAdornmentEnd = styled(InputAdornment)(({ theme }) => ({
+  borderLeft: `1px solid ${theme.palette.text.disabled}`,
   height: '30px',
   paddingLeft: '10px',
   '@media (max-width: 590px)': {