feat: add 'dimmed' as a valid color option for Typography component

Author: drumnation

src/shared-components/atoms/Typography/Typography.styles.ts

@@ -6,7 +6,7 @@ import { MantineTheme, MantineSpacing, rem, MantineGradient } from '@mantine/cor
 export interface TypographyStylesProps {
   variant: 'h1' | 'h2' | 'h3' | 'body' | 'caption';
   weight: 'regular' | 'medium' | 'semibold' | 'bold';
-  color: 'primary' | 'secondary' | 'light' | 'gradient' | 'inherit';
+  color: 'primary' | 'secondary' | 'light' | 'gradient' | 'inherit' | 'dimmed';
   mt?: MantineSpacing | (string & {}) | number; // Updated type
   mb?: MantineSpacing | (string & {}) | number; // Updated type
   ml?: MantineSpacing | (string & {}) | number; // Updated type
@@ -124,6 +124,13 @@ export const getTypographyStyles = (
         color: theme.colors.gray[4],
       };
       break;
+    case 'dimmed':
+      // Set dimmed color that is slightly muted
+      styles.color = theme.colors.gray[6];
+      styles['[data-mantine-color-scheme="dark"] &'] = {
+        color: theme.colors.dark[2],
+      };
+      break;
     case 'gradient':
       // Define gradient using theme tokens
       const gradient: MantineGradient = { from: theme.primaryColor, to: 'cyan', deg: 45 }; // Adjust 'cyan' if needed

src/shared-components/atoms/Typography/Typography.types.ts

@@ -2,7 +2,7 @@ import { ReactNode, ElementType } from 'react';
 
 export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption';
 export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
-export type TypographyColor = 'primary' | 'secondary' | 'light' | 'gradient' | 'inherit';
+export type TypographyColor = 'primary' | 'secondary' | 'light' | 'gradient' | 'inherit' | 'dimmed';
 
 export interface TypographyProps {
   children: ReactNode;