From 4c049193bee3769f98f7869e97eb8a176e234660 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 16:32:49 +0700
Subject: [PATCH 1/2] disable dashboard template MainGrid

---
 test/regressions/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/regressions/index.js b/test/regressions/index.js
index 316406a9456dc9..73cbac1898b670 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -217,6 +217,7 @@ const blacklist = [
   'docs-getting-started-templates', // No public components
   'docs-getting-started-usage/Usage.png', // No public components
   'docs-getting-started-supported-components/MaterialUIComponents.png', // No public components
+  'docs-getting-started-templates-dashboard-components/MainGrid.png', // No public components
   'docs-landing', // Mostly images, redundant
   'docs-production-error', // No components, page for DX
   'docs-styles-advanced', // Redundant

From fb4d3f14f4f6a63f35eef079c8cc5e22c8a372dc Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jan 2025 16:33:06 +0700
Subject: [PATCH 2/2] mask flaky material pigment demo

---
 .../src/pages/fixtures/index.test.js          |  1 +
 .../src/pages/material-ui/react-progress.tsx  |  3 ++-
 apps/pigment-css-vite-app/vite.config.ts      | 19 ++++---------------
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js b/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js
index 499abcd74daa49..fe1c326b1e2c2e 100644
--- a/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js
+++ b/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js
@@ -83,6 +83,7 @@ async function main() {
       path: screenshotPath,
       type: 'png',
       animations: 'disabled',
+      mask: [page.locator('css=[data-playwright-masked]')],
     });
   }
 
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
index badcc6a712d49c..28e5b6c4a6be05 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
@@ -73,7 +73,8 @@ export default function Progress() {
       </section>
       <section>
         <h2> Linear Determinate</h2>
-        <div className="demo-container">
+        <div className="demo-container" data-playwright-masked>
+          {/* masked when taking screenshot with playwright because this demo is a flaky one */}
           <LinearDeterminate />
         </div>
       </section>
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
index 88f1fb06db2f1f..e85469564dc7df 100644
--- a/apps/pigment-css-vite-app/vite.config.ts
+++ b/apps/pigment-css-vite-app/vite.config.ts
@@ -3,23 +3,12 @@ import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { pigment } from '@pigment-css/vite-plugin';
-import { extendTheme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 
-const theme = extendTheme({
-  getSelector: function getSelector(colorScheme, css) {
-    if (colorScheme) {
-      return {
-        [`@media (prefers-color-scheme: ${colorScheme})`]: {
-          ':root': css,
-        },
-      };
-    }
-    return ':root';
-  },
+const theme = createTheme({
+  cssVariables: true,
+  colorSchemes: { light: true, dark: true },
 });
-theme.getColorSchemeSelector = (colorScheme) => {
-  return `@media (prefers-color-scheme: ${colorScheme})`;
-};
 
 export default defineConfig({
   plugins: [