refactor: use text colors from text.primary palette

src/components/Alerts/InfoAlert/InfoAlertClickable.tsx

@@ -80,7 +80,7 @@ export const InfoAlertClickable = ({
             <Typography
               variant={'bodySmall'}
               pt={theme.spacing(1.5)}
-              color={theme.palette.mode === 'light' ? '#000000' : '#ffffff'}
+              color={theme.palette.text.primary}
             >
               {subtitle}
             </Typography>

src/components/Blog/BlogArticle/BlogArticle.style.ts

@@ -10,8 +10,8 @@ import {
 
 import { getContrastAlphaColor } from '@/utils/colors';
 import { styled } from '@mui/material/styles';
-import { urbanist } from 'src/fonts/fonts';
 import Image from 'next/image';
+import { urbanist } from 'src/fonts/fonts';
 
 export const BlogArticleImageContainer = styled(Box)(({ theme }) => ({
   width: '100%',
@@ -132,12 +132,7 @@ export const BlogArticleContainer = styled(Container)(({ theme }) => ({
   padding: theme.spacing(1.5, 2, 3),
 
   li: {
-    color: alpha(
-      theme.palette.mode === 'light'
-        ? theme.palette.black.main
-        : theme.palette.white.main,
-      0.75,
-    ),
+    color: alpha(theme.palette.text.primary, 0.75),
     margin: theme.spacing(0.5, 0),
     fontSize: '18px',
     lineHeight: '32px',
@@ -237,12 +232,7 @@ export const Divider = styled(MuiDivider)(({ theme }) => ({
 // Typography:
 
 export const BlogArticleTitle = styled(Typography)(({ theme }) => ({
-  color: alpha(
-    theme.palette.mode === 'light'
-      ? theme.palette.black.main
-      : theme.palette.white.main,
-    0.88,
-  ),
+  color: alpha(theme.palette.text.primary, 0.88),
   marginTop: theme.spacing(4),
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     marginTop: theme.spacing(8),
@@ -269,12 +259,7 @@ export const BlogArticleTitleSkeleton = styled(Skeleton)<SkeletonProps>(
 export const BlogArticleSubtitle = styled(Typography, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<TypographyProps>(({ theme }) => ({
-  color: alpha(
-    theme.palette.mode === 'light'
-      ? theme.palette.black.main
-      : theme.palette.white.main,
-    0.88,
-  ),
+  color: alpha(theme.palette.text.primary, 0.88),
   marginTop: theme.spacing(8),
   marginBottom: theme.spacing(6),
   fontWeight: 700,

src/components/Blog/BlogArticlesBoard/BlogArticlesBoard.style.ts

@@ -1,12 +1,23 @@
-import type { Breakpoint, IconButtonProps } from '@mui/material';
-import { Grid, IconButton, Typography } from '@mui/material';
+import type { Breakpoint } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 
-import { getContrastAlphaColor } from '@/utils/colors';
-import { styled } from '@mui/material/styles';
-import { urbanist } from 'src/fonts/fonts';
+import { alpha, styled } from '@mui/material/styles';
+import { CarouselHeader, CarouselTitle } from '../BlogCarousel';
 
 export const BlogArticlesBoardContainer = styled(Grid)(({ theme }) => ({
-  position: 'relative',
+  display: 'flex',
+  color: theme.palette.text.primary,
+  textDecoration: 'unset',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: theme.spacing(1.5),
+  alignItems: 'center',
+  backgroundColor: theme.palette.bgSecondary.main,
+  boxShadow: theme.palette.shadow.main,
+  borderRadius: '32px',
+  cursor: 'pointer',
+  padding: theme.spacing(6),
+  transition: 'background-color 250ms',
   margin: theme.spacing(6, 2),
   marginBottom: theme.spacing(10),
   [theme.breakpoints.up('lg' as Breakpoint)]: {
@@ -39,60 +50,46 @@ export const ArticlesGrid = styled(Grid)(({ theme }) => ({
   },
 }));
 
-export interface PaginationIndexButtonProps
-  extends Omit<IconButtonProps, 'isDarkMode' | 'isWide' | 'component'> {
-  active: boolean;
-}
-
-export const PaginationIndexButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<PaginationIndexButtonProps>(({ theme, active }) => ({
-  ...(active
-    ? {
-        color:
-          theme.palette.mode === 'light'
-            ? theme.palette.grey[800]
-            : theme.palette.grey[300],
-      }
-    : {
-        color:
-          theme.palette.mode === 'light'
-            ? theme.palette.grey[800]
-            : theme.palette.grey[400],
-      }),
-  width: 40,
-  height: 40,
-  ...(active && {
-    '& .MuiTouchRipple-root': {
-      backgroundColor:
-        theme.palette.mode === 'light'
-          ? theme.palette.alphaDark100.main
-          : theme.palette.alphaLight300.main,
-      zIndex: -1,
-    },
-  }),
-  '&:hover': {
-    backgroundColor:
-      theme.palette.mode === 'dark'
-        ? getContrastAlphaColor(theme, '12%')
-        : getContrastAlphaColor(theme, '4%'),
-  },
+export const BlogArticlesBoardTitle = styled(CarouselTitle)(({ theme }) => ({
+  color: theme.palette.text.primary,
 }));
 
-export const PaginationButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.grey[500],
-  width: 40,
-  height: 40,
+export const BlogArticlesBoardHeader = styled(CarouselHeader)(() => ({}));
+
+export const CategoryTabPanelContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  color: theme.palette.text.primary,
+  textDecoration: 'unset',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: theme.spacing(1.5),
+  alignItems: 'center',
+  backgroundColor: theme.palette.bgSecondary.main,
+  boxShadow: theme.palette.shadow.main,
+  borderRadius: '32px',
+  cursor: 'pointer',
+  padding: theme.spacing(6),
+  transition: 'background-color 250ms',
+  margin: theme.spacing(6, 2),
+  marginBottom: theme.spacing(14.5),
   '&:hover': {
     backgroundColor:
-      theme.palette.mode === 'dark'
-        ? getContrastAlphaColor(theme, '12%')
-        : getContrastAlphaColor(theme, '4%'),
+      theme.palette.mode === 'light'
+        ? alpha(theme.palette.white.main, 1)
+        : alpha(theme.palette.white.main, 0.2),
+  },
+  [theme.breakpoints.up('sm' as Breakpoint)]: {
+    padding: theme.spacing(12, 8),
+    margin: theme.spacing(8),
+    marginBottom: theme.spacing(14.5),
+  },
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    padding: theme.spacing(12, 8),
+    marginTop: theme.spacing(12),
+  },
+  [theme.breakpoints.up('xl' as Breakpoint)]: {
+    margin: theme.spacing(12, 'auto'),
+    marginBottom: theme.spacing(14.5),
+    maxWidth: theme.breakpoints.values.xl,
   },
-}));
-
-export const BlogArticlesBoardTitle = styled(Typography)(({ theme }) => ({
-  fontFamily: urbanist.style.fontFamily,
-  textAlign: 'center',
-  margin: theme.spacing(10, 'auto', 0),
 }));

src/components/Blog/BlogArticlesBoard/BlogArticlesBoardTabs.tsx

@@ -28,9 +28,7 @@ export const BlogArticlesBoardTabs = ({
           ? getContrastAlphaColor(theme, '12%')
           : getContrastAlphaColor(theme, '4%'),
     display: 'flex',
-    // height: openDropdown ? '68px' : 'auto',
     maxHeight: openDropdown ? 1000 : 0,
-    // height: openDropdown ? 'auto' : 68,
     borderRadius: '12px',
     transitionProperty: 'max-height, background-color',
     transitionDuration: '.3s',

src/components/Blog/BlogArticlesCollections/BlogArticlesCollections.style.ts

@@ -0,0 +1,124 @@
+import type { Breakpoint, GridProps } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
+
+import { alpha, styled } from '@mui/material/styles';
+import { urbanist } from 'src/fonts/fonts';
+
+export const BlogArticlesCollectionsContainer = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  color: theme.palette.text.primary,
+  textDecoration: 'unset',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: theme.spacing(1.5),
+  alignItems: 'center',
+  backgroundColor: theme.palette.bgSecondary.main,
+  borderRadius: '32px',
+  cursor: 'pointer',
+  transition: 'background-color 250ms',
+  marginBottom: theme.spacing(14.5),
+  padding: theme.spacing(2),
+  margin: theme.spacing(6, 2, 0),
+  boxShadow: theme.palette.shadow.main,
+  ':last-of-type': {
+    marginBottom: theme.spacing(6),
+  },
+  [theme.breakpoints.up('sm' as Breakpoint)]: {
+    margin: theme.spacing(2, 8, 0),
+    padding: theme.spacing(3),
+    ':last-of-type': {
+      marginBottom: theme.spacing(2),
+    },
+  },
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    padding: theme.spacing(4),
+    margin: theme.spacing(12, 8, 0),
+    ':last-of-type': {
+      marginBottom: theme.spacing(12),
+    },
+  },
+  [theme.breakpoints.up('lg' as Breakpoint)]: {
+    padding: theme.spacing(6),
+  },
+  [theme.breakpoints.up('xl' as Breakpoint)]: {
+    margin: `${theme.spacing(12, 'auto', 0)}`,
+    maxWidth: theme.breakpoints.values.xl,
+    ':last-of-type': {
+      marginBottom: theme.spacing(12),
+    },
+  },
+}));
+
+interface ArticlesGridProps extends GridProps {
+  active?: boolean;
+}
+
+export const ArticlesGrid = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<ArticlesGridProps>(({ theme, active }) => ({
+  ...(active && {
+    margin: theme.spacing(2, 'auto'),
+    display: 'grid',
+    // marginTop: `calc(${theme.spacing(5)} + ${theme.spacing(8)} + ${theme.spacing(6)} )`, // title height + tabs container + actual offset
+    paddingBottom: 0,
+    gridTemplateColumns: '1fr',
+    justifyItems: 'center',
+    gap: theme.spacing(3),
+    [theme.breakpoints.up('md' as Breakpoint)]: {
+      gridTemplateColumns: '1fr 1fr',
+      gap: theme.spacing(4),
+    },
+    [theme.breakpoints.up('lg' as Breakpoint)]: {
+      gridTemplateColumns: '1fr 1fr 1fr',
+    },
+    [theme.breakpoints.up('xl' as Breakpoint)]: {
+      maxWidth: theme.breakpoints.values.xl,
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+  }),
+}));
+
+export const BlogArticlesCollectionsTitle = styled(Typography)(({ theme }) => ({
+  fontFamily: urbanist.style.fontFamily,
+  textAlign: 'center',
+  color: theme.palette.text.primary,
+}));
+
+export const CategoryTabPanelContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  color: theme.palette.text.primary,
+  textDecoration: 'unset',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: theme.spacing(1.5),
+  alignItems: 'center',
+  backgroundColor: theme.palette.bgSecondary.main,
+  boxShadow: theme.palette.shadow.main,
+  borderRadius: '32px',
+  cursor: 'pointer',
+  padding: theme.spacing(6),
+  transition: 'background-color 250ms',
+  margin: theme.spacing(6, 2),
+  marginBottom: theme.spacing(14.5),
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? alpha(theme.palette.white.main, 1)
+        : alpha(theme.palette.white.main, 0.2),
+  },
+  [theme.breakpoints.up('sm' as Breakpoint)]: {
+    padding: theme.spacing(12, 8),
+    margin: theme.spacing(8),
+    marginBottom: theme.spacing(14.5),
+  },
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    padding: theme.spacing(12, 8),
+    marginTop: theme.spacing(12),
+  },
+  [theme.breakpoints.up('xl' as Breakpoint)]: {
+    margin: theme.spacing(12, 'auto'),
+    marginBottom: theme.spacing(14.5),
+    maxWidth: theme.breakpoints.values.xl,
+  },
+}));

src/components/Blog/BlogCarousel/BlogCarousel.style.ts

@@ -46,10 +46,7 @@ export const SeeAllButtonContainer = styled(Box, {
 }));
 
 export const SeeAllButton = styled(ButtonPrimary)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'dark'
-      ? theme.palette.white.main
-      : theme.palette.black.main,
+  color: theme.palette.text.primary,
   backgroundColor:
     theme.palette.mode === 'light'
       ? theme.palette.alphaDark100.main

src/components/Blog/CTAs/InstructionsAccordion/InstructionsAccordionItem.style.ts

@@ -77,12 +77,7 @@ export const InstructionsAccordionToggle = styled(IconButtonTertiary)(
 
 export const InstructionsAccordionItemLabel = styled(Box)(({ theme }) => ({
   marginLeft: theme.spacing(2),
-  color: alpha(
-    theme.palette.mode === 'light'
-      ? theme.palette.black.main
-      : theme.palette.white.main,
-    0.75,
-  ),
+  color: alpha(theme.palette.text.primary, 0.75),
   fontWeight: 600,
   fontSize: '18px',
   lineHeight: '32px',

src/components/Blog/CustomRichBlocks.style.ts

@@ -50,12 +50,7 @@ export const BlogParagraph = styled(Typography, {
 // Headings
 
 export const BlogHeadline = styled(Typography)(({ theme }) => ({
-  color: alpha(
-    theme.palette.mode === 'light'
-      ? theme.palette.black.main
-      : theme.palette.white.main,
-    0.88,
-  ),
+  color: alpha(theme.palette.text.primary, 0.88),
   a: {
     fontWeight: 600,
     textDecorationColor:

src/components/Blog/FeaturedArticle/FeaturedArticle.style.ts

@@ -1,9 +1,9 @@
 import { urbanist } from '@/fonts/fonts';
 import type { BoxProps, Breakpoint, TypographyProps } from '@mui/material';
-import { Box, Skeleton, Typography, lighten } from '@mui/material';
+import { Box, Skeleton, Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import Link from 'next/link';
 import Image from 'next/image';
+import Link from 'next/link';
 
 export const FeaturedArticleLink = styled(Link, {
   shouldForwardProp: (prop) => prop !== 'active',
@@ -207,10 +207,7 @@ export const FeaturedArticleDetails = styled(Box)(({ theme }) => ({
 export const FeaturedArticleTitle = styled(Typography)<TypographyProps>(
   ({ theme }) => ({
     userSelect: 'none',
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.black.main
-        : theme.palette.white.main,
+    color: theme.palette.text.primary,
     marginBottom: theme.spacing(3),
     marginTop: theme.spacing(3),
     overflow: 'hidden',

src/components/Button/Button.style.ts

@@ -12,10 +12,7 @@ const ButtonBase = styled(MuiButton)<MuiButtonProps>(({ theme }) => ({
   fontWeight: 'bold',
   transition: 'background-color 250ms',
   overflow: 'hidden',
-  color:
-    theme.palette.mode === 'dark'
-      ? theme.palette.white.main
-      : theme.palette.black.main,
+  color: theme.palette.text.primary,
   '&:hover': {
     backgroundColor:
       theme.palette.mode === 'dark'