[docs] SectionHeadline configurable for Toolpad

mui · Aug 12, 2022 · daba0de · daba0de
1 parent 3920540
commit daba0de
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
@@ -2,20 +2,33 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
+interface SectionHeadlineTheme {
+  overlineColor?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+}
+
 export default function SectionHeadline({
   overline,
   title,
   description,
+  localTheme,
 }: {
   overline: React.ReactNode;
   title: React.ReactNode;
   description?: React.ReactNode;
+  localTheme?: (mode?: string) => SectionHeadlineTheme;
 }) {
   const globalTheme = useTheme();
   const mode = globalTheme.palette.mode;
-  const overlineColor = mode === 'dark' ? 'primary.400' : 'primary.600';
-  const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
-  const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
+  const defaultOverlineColor = mode === 'dark' ? 'primary.400' : 'primary.600';
+  const defaultTitleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
+  const defaultDescriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
+
+  const overlineColor: string = localTheme?.(mode)?.overlineColor ?? defaultOverlineColor;
+  const titleColor: string = localTheme?.(mode)?.titleColor ?? defaultTitleColor;
+  const descriptionColor: string = localTheme?.(mode)?.descriptionColor ?? defaultDescriptionColor;
+
   return (
     <React.Fragment>
       <Typography