>;
+}
+
+const customGradientIds = {
+ subscriptions: 'x-theming-subscriptions-gradient',
+ expansion: 'x-theming-expansion-gradient',
+ runRate: 'x-theming-run-rate-gradient',
+};
+
+const customChartColors = {
+ subscriptions: `url(#${customGradientIds.subscriptions})`,
+ expansion: `url(#${customGradientIds.expansion})`,
+ runRate: `url(#${customGradientIds.runRate})`,
+};
+
+const materialChartColors = {
+ subscriptions: '#1976d2',
+ expansion: '#9c27b0',
+ runRate: '#2e7d32',
+};
+
+const customLegendColors = {
+ subscriptions:
+ 'linear-gradient(180deg, hsl(210, 100%, 30%) 0%, hsl(210, 100%, 45%) 55%, hsl(210, 100%, 60%) 100%)',
+ expansion: 'linear-gradient(180deg, #7C3AED 0%, #A78BFA 100%)',
+ runRate: 'linear-gradient(90deg, #101322 0%, hsl(210, 100%, 45%) 52%, #7C3AED 100%)',
+};
+
+const legendItems = [
+ { label: 'Subscriptions', key: 'subscriptions' },
+ { label: 'Expansion', key: 'expansion' },
+ { label: 'Run rate', key: 'runRate' },
+] as const;
+
+const customThemeCode = `
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: 'hsl(210, 100%, 45%)',
+ light: 'hsl(210, 100%, 90%)',
+ dark: 'hsl(210, 100%, 30%)',
+ },
+ secondary: {
+ main: '#101322',
+ light: '#E4E8F4',
+ dark: '#020617',
+ },
+ warning: {
+ main: '#7C3AED',
+ light: '#EDE9FE',
+ dark: '#4C1D95',
+ },
+ success: {
+ main: 'hsl(210, 100%, 45%)',
+ light: 'hsl(210, 100%, 90%)',
+ dark: 'hsl(210, 100%, 30%)',
+ },
+ text: {
+ primary: '#101322',
+ secondary: '#5D667A',
+ },
+ background: {
+ paper: '#FFFFFF',
+ default: '#F8FAFF',
+ },
+ divider: '#E2E8F6',
+ },
+ typography: {
+ fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+ subtitle2: {
+ fontSize: 16,
+ fontWeight: 700,
+ },
+ caption: {
+ fontSize: 12,
+ },
+ },
+ shape: {
+ borderRadius: 14,
+ },
+ components: {
+ MuiChartsAxis: {
+ styleOverrides: {
+ root: {
+ [\`& .\${axisClasses.line}, & .\${axisClasses.tick}\`]: {
+ stroke: alpha('#101322', 0.1),
+ },
+ [\`& .\${axisClasses.tickLabel}\`]: {
+ fill: '#5D667A',
+ fontSize: 12,
+ fontWeight: 600,
+ },
+ },
},
- {
- field: 'filledQuantity',
- headerName: 'Filled',
- ...baseFilledQuantityCol,
- width: customized ? 130 : 150,
- sortable: false,
- editable: true,
- ...(customized && {
+ },
+ MuiChartsGrid: {
+ styleOverrides: {
+ root: {
+ [\`& .\${chartsGridClasses.line}\`]: {
+ stroke: alpha('#101322', 0.07),
+ strokeDasharray: '2 8',
+ strokeWidth: 0.9,
+ },
+ },
+ },
+ },
+ },
+});
+
+
+
+ {/* alpha gradients */}
+
+
+
+
+
+`;
+
+const materialThemeCode = `
+const theme = createTheme({
+ cssVariables: {
+ colorSchemeSelector: 'data-mui-color-scheme',
+ },
+ colorSchemes: {
+ light: true,
+ dark: true,
+ },
+});
+
+
+
+
+
+
+
+
+
+`;
+
+function CustomChartGradients() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function ThemedComposedChart({ custom }: { custom: boolean }) {
+ const [codeOpen, setCodeOpen] = React.useState(false);
+ const chartColors = custom ? customChartColors : materialChartColors;
+ const legendColors = custom ? customLegendColors : materialChartColors;
+ const code = custom ? customThemeCode : materialThemeCode;
+ const chartSeries = [
+ {
+ id: 'subscriptions',
+ type: 'bar' as const,
+ label: 'Subscriptions',
+ data: subscriptionsData,
+ color: chartColors.subscriptions,
+ },
+ {
+ id: 'expansion',
+ type: 'bar' as const,
+ label: 'Expansion',
+ data: expansionData,
+ color: chartColors.expansion,
+ },
+ {
+ id: 'runRate',
+ type: 'line' as const,
+ label: 'Run rate',
+ data: runRateData,
+ color: chartColors.runRate,
+ curve: 'monotoneX' as const,
+ showMark: custom,
+ },
+ ];
+
+ return (
+ {
- return ;
+ flexDirection: 'column',
+ bgcolor: 'background.paper',
+ borderColor: 'divider',
+ },
+ custom && customGlassPanelSx,
+ ]}
+ >
+ {
- return ;
+ custom && {
+ py: 2,
+ background: `linear-gradient(90deg, ${alpha(
+ customThemeTokens.accentLight,
+ 0.46,
+ )} 0%, ${alpha('#FFFFFF', 0.42)} 52%, ${alpha(
+ customThemeTokens.violetLight,
+ 0.4,
+ )} 100%)`,
+ '[data-mui-color-scheme="dark"] &': {
+ borderColor: alpha(customThemeTokens.accentBright, 0.18),
+ background: `linear-gradient(90deg, ${alpha(
+ customThemeTokens.accent,
+ 0.16,
+ )} 0%, ${alpha('#FFFFFF', 0.04)} 52%, ${alpha(customThemeTokens.violet, 0.12)} 100%)`,
+ },
},
- }),
- },
- {
- field: 'status',
- headerName: 'Status',
- ...baseStatusCol,
- width: 150,
- sortable: false,
- editable: true,
- ...(customized && {
+ ]}
+ >
+
+
+ Revenue composition
+
+
+ Monthly subscriptions, expansion, and run-rate trend.
+
+
+ setCodeOpen((open) => !open)}
+ sx={[
+ {
+ font: 'inherit',
+ flexShrink: 0,
+ display: { xs: 'none', sm: 'inline-flex' },
+ alignItems: 'center',
+ px: 1.25,
+ py: 0.75,
+ border: '1px solid',
+ borderColor: 'divider',
+ borderRadius: 1,
+ color: 'text.secondary',
+ fontSize: 13,
+ fontWeight: 500,
+ lineHeight: 1,
+ cursor: 'pointer',
+ backgroundColor: 'background.paper',
+ '&:hover': {
+ borderColor: 'text.secondary',
+ },
+ },
+ custom && {
+ color: customThemeTokens.ink,
+ background: alpha('#FFFFFF', 0.58),
+ borderColor: alpha(customThemeTokens.accent, 0.16),
+ backdropFilter: 'blur(12px)',
+ boxShadow: `0 8px 18px ${alpha(customThemeTokens.accentDark, 0.08)}`,
+ '[data-mui-color-scheme="dark"] &': {
+ color: '#F8FBFF',
+ background: alpha('#06183B', 0.56),
+ borderColor: alpha(customThemeTokens.accentBright, 0.34),
+ boxShadow: `0 0 16px ${alpha(customThemeTokens.accentBright, 0.22)}`,
+ },
+ },
+ ]}
+ >
+ {codeOpen ? 'View Chart' : 'View Code'}
+
+
+
+ {codeOpen ? (
+
+
+
+ ) : (
+
+
+
+
+
+ $1.84M
+
+
+ Annualized run rate
+
+
+
+ +18.4%
+
+
+
+
+
+ {custom ? : null}
+
+
+
+
+ index % 2 === 0}
+ />
+
+
+
+
+
+
+
+ {legendItems.map((item) => (
+
+
+ {item.label}
+
+ ))}
+
+
+
+ )}
+
+ );
+}
+
+function ThemedMiniDataGrid({ custom }: { custom: boolean }) {
+ return (
+ {
- return ;
+ flexDirection: 'column',
+ bgcolor: 'background.paper',
+ borderColor: 'divider',
+ },
+ custom && customGlassPanelSx,
+ ]}
+ >
+ {
- return ;
+ custom && {
+ py: 2,
+ background: `linear-gradient(90deg, ${alpha(
+ customThemeTokens.accentLight,
+ 0.46,
+ )} 0%, ${alpha('#FFFFFF', 0.42)} 52%, ${alpha(
+ customThemeTokens.violetLight,
+ 0.4,
+ )} 100%)`,
+ '[data-mui-color-scheme="dark"] &': {
+ borderColor: alpha(customThemeTokens.accentBright, 0.18),
+ background: `linear-gradient(90deg, ${alpha(
+ customThemeTokens.accent,
+ 0.16,
+ )} 0%, ${alpha('#FFFFFF', 0.04)} 52%, ${alpha(customThemeTokens.violet, 0.12)} 100%)`,
+ },
},
- }),
- },
- ];
- return columns;
+ ]}
+ >
+
+
+ Account health
+
+
+ A compact Data Grid preview with custom cell renderers.
+
+
+
+
+
+
+
+
+ );
+}
+
+function ThemedPreviewCarousel({ custom, previewId, setPreviewId }: ThemedPreviewCarouselProps) {
+ const selectedPreviewIndex = previewItems.findIndex((item) => item.id === previewId);
+
+ const handlePrevious = () => {
+ setPreviewId(
+ previewItems[(selectedPreviewIndex - 1 + previewItems.length) % previewItems.length].id,
+ );
+ };
+
+ const handleNext = () => {
+ setPreviewId(previewItems[(selectedPreviewIndex + 1) % previewItems.length].id);
+ };
+
+ let preview = ;
+
+ if (previewId === 'dataGrid') {
+ preview = ;
}
+
+ if (previewId === 'scheduler') {
+ preview = ;
+ }
+
+ return (
+
+
+
+ {previewItems.map((item) => {
+ const selected = item.id === previewId;
+
+ return (
+ setPreviewId(item.id)}
+ sx={[
+ {
+ font: 'inherit',
+ border: 0,
+ borderRadius: 999,
+ px: 1.25,
+ py: 0.625,
+ color: selected ? 'primary.main' : 'text.secondary',
+ bgcolor: selected ? 'action.selected' : 'transparent',
+ fontSize: 13,
+ fontWeight: 700,
+ lineHeight: 1,
+ cursor: 'pointer',
+ whiteSpace: 'nowrap',
+ outline: 0,
+ '&:focus-visible': {
+ boxShadow: `0 0 0 3px ${alpha('#1976d2', 0.18)}`,
+ },
+ },
+ custom && {
+ '&:focus-visible': {
+ boxShadow: `0 0 0 3px ${alpha(customThemeTokens.accent, 0.16)}`,
+ },
+ '[data-mui-color-scheme="dark"] &': {
+ color: alpha('#DDEBFF', 0.72),
+ },
+ },
+ custom &&
+ selected && {
+ color: customThemeTokens.accentDark,
+ background: `linear-gradient(135deg, ${alpha(
+ customThemeTokens.accentLight,
+ 0.68,
+ )} 0%, ${alpha('#FFFFFF', 0.56)} 48%, ${alpha(
+ customThemeTokens.violetLight,
+ 0.58,
+ )} 100%)`,
+ boxShadow: `0 8px 18px ${alpha(
+ customThemeTokens.accent,
+ 0.14,
+ )}, inset 0 0 0 1px ${alpha(customThemeTokens.accent, 0.16)}`,
+ '[data-mui-color-scheme="dark"] &': {
+ color: '#F8FBFF',
+ background: `linear-gradient(135deg, ${alpha(
+ customThemeTokens.accent,
+ 0.34,
+ )} 0%, ${alpha('#FFFFFF', 0.08)} 48%, ${alpha(
+ customThemeTokens.violet,
+ 0.24,
+ )} 100%)`,
+ boxShadow: `0 0 18px ${alpha(
+ customThemeTokens.accentBright,
+ 0.32,
+ )}, inset 0 0 0 1px ${alpha(customThemeTokens.accentBright, 0.28)}`,
+ },
+ '&:focus-visible': {
+ boxShadow: `0 0 0 3px ${alpha(
+ customThemeTokens.accent,
+ 0.16,
+ )}, 0 8px 18px ${alpha(
+ customThemeTokens.accent,
+ 0.14,
+ )}, inset 0 0 0 1px ${alpha(customThemeTokens.accent, 0.16)}`,
+ },
+ },
+ ]}
+ >
+ {item.label}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {preview}
+
+ );
+}
+
+function CustomThemePreview({
+ previewId,
+ setPreviewId,
+}: Pick) {
+ return (
+
+
+
+ );
+}
+
+function MaterialThemePreview({
+ previewId,
+ setPreviewId,
+}: Pick) {
+ return (
+
+
+
+ );
+}
+
+export default function XTheming() {
+ const [customized, setCustomized] = React.useState(true);
+ const [previewId, setPreviewId] = React.useState('charts');
+
return (
@@ -103,7 +1655,7 @@ export default function XTheming() {
Advanced and beautiful