diff --git a/docs/public/static/components-gallery/base-theme.css b/docs/public/static/components-gallery/base-theme.css
index 84dec677784904..665f49387d54f2 100644
--- a/docs/public/static/components-gallery/base-theme.css
+++ b/docs/public/static/components-gallery/base-theme.css
@@ -23,11 +23,11 @@
 
   --canvas: #fff;
 
-  --font-color-soft: hsla(var(--grey-800));
-  --font-color-hard: hsla(var(--grey-900));
+  --font-color-soft: hsl(var(--grey-800));
+  --font-color-hard: hsl(var(--grey-900));
   --font-color-onDark: #fff;
-  --font-color-interactive: hsla(var(--primary-500));
-  --font-color-placeholder: hsla(var(--grey-600));
+  --font-color-interactive: hsl(var(--primary-500));
+  --font-color-placeholder: hsl(var(--grey-600));
 
   --h1-font-family: 'Inter', sans-serif;
   --h1-font-weight: 500;
@@ -80,47 +80,48 @@
     var(--caption-font-family);
 
   --bg-default: #fff;
-  --bg-soft: hsla(var(--grey-50), 0.9);
-  --bg-hard: hsla(var(--grey-100), 0.8);
-  --bg-highlight: hsla(var(--primary-600));
-  --bg-overlay: hsla(0, 0, 0, 0.3);
-
-  --bg-button: hsla(var(--primary-500));
-  --bg-button-hover: hsla(var(--primary-700));
-  --bg-button-active: hsla(var(--primary-800));
-  --bg-button-disabled: hsla(var(--grey-100), 0.5);
-  --border-solid-button: 1px solid hsla(var(--primary-500));
-
-  --bg-input-base: hsla(var(--grey-50), 0.5);
-  --bg-input-hover: hsla(var(--grey-50));
-  --bg-input-active: hsla(var(--grey-200));
-  --bg-input-disabled: hsla(var(--grey-100));
-
-  --bg-switch-track: hsla(var(--grey-300), 0.6);
-  --bg-select-option: hsla(var(--primary-100), 0.8);
-
-  --border-default: 1px solid hsla(var(--grey-300));
-  --border-soft: 1px solid hsla(var(--grey-300), 0.8);
-  --border-hard: 1px solid hsla(var(--grey-500));
-  --border-interactive: 1px solid hsla(var(--primary-400));
-  --border-transparent: 1px solid hsla(0, 0, 0, 0);
-  --border-active-switch: 1px solid hsla(var(--primary-100));
-
-  --shadow-elevation-1: 0px 1px 2px 0px hsla(0, 0, 0, 0.15);
-  --shadow-elevation-2: 0px 2px 4px 0px hsla(var(--grey-700), 0.2);
+  --bg-soft: hsl(var(--grey-50), 0.9);
+  --bg-hard: hsl(var(--grey-100), 0.8);
+  --bg-highlight: hsl(var(--primary-600));
+  --bg-overlay: hsl(0deg 0 0 / 0.3);
+
+  --bg-button: hsl(var(--primary-500));
+  --bg-button-hover: hsl(var(--primary-700));
+  --bg-button-active: hsl(var(--primary-800));
+  --bg-button-disabled: hsl(var(--grey-100), 0.5);
+  --border-solid-button: 1px solid hsl(var(--primary-500));
+
+  --bg-input-base: hsl(var(--grey-50), 0.5);
+  --bg-input-hover: hsl(var(--grey-50));
+  --bg-input-active: hsl(var(--grey-200));
+  --bg-input-disabled: hsl(var(--grey-100));
+
+  --bg-switch-track: hsl(var(--grey-300), 0.6);
+  --bg-select-option: hsl(var(--primary-100), 0.8);
+
+  --border-default: 1px solid hsl(var(--grey-300));
+  --border-soft: 1px solid hsl(var(--grey-300), 0.8);
+  --border-hard: 1px solid hsl(var(--grey-500));
+  --border-interactive: 1px solid hsl(var(--primary-400));
+  --border-transparent: 1px solid hsl(0deg 0 0 / 0);
+  --border-active-switch: 1px solid hsl(var(--primary-100));
+
+  --shadow-elevation-1: 0px 1px 2px 0px hsl(0deg 0 0 / 0.15);
+  --shadow-elevation-2: 0px 2px 4px 0px hsl(var(--grey-700), 0.2);
   --shadow-elevation-3:
-    0px 4px 16px -4px hsla(var(--grey-700), 0.2), 0px 1px 2px -1px hsla(var(--grey-700), 0.1);
-  --shadow-elevation-4: 0px 8px 32px -4px hsla(0, 0, 0, 0.25), 0px 1px 2px -1px hsla(0, 0, 0, 0.15);
+    0px 4px 16px -4px hsl(var(--grey-700), 0.2), 0px 1px 2px -1px hsl(var(--grey-700), 0.1);
+  --shadow-elevation-4:
+    0px 8px 32px -4px hsl(0deg 0 0 / 0.25), 0px 1px 2px -1px hsl(0deg 0 0 / 0.15);
 
   --shadow-interactive-button:
-    0 -2px 0.5px 0 hsla(var(--primary-700), 0.4) inset,
-    0 2px 0.5px 0 hsla(var(--primary-400), 0.6) inset, 0 1px 0.5px 0 hsla(var(--primary-900), 0.3);
+    0 -2px 0.5px 0 hsl(var(--primary-700), 0.4) inset,
+    0 2px 0.5px 0 hsl(var(--primary-400), 0.6) inset, 0 1px 0.5px 0 hsl(var(--primary-900), 0.3);
   --shadow-outlined-button:
-    0 -2px 0.5px 0 hsla(var(--grey-100), 0.5) inset, 0 1px 0.5px 0 hsla(var(--grey-500), 0.2);
-  --shadow-input: 0px 1px 2px hsla(var(--primary-300), 0.2);
-  --shadow-interactive-switch-track: 0px 1px 1px 0px hsla(0, 0, 0, 0.05) inset;
-  --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsla(0, 0, 0, 0.3);
-  --shadow-interactive-focus-visible: 0 0 0 4px hsla(var(--primary-300), 0.5);
+    0 -2px 0.5px 0 hsl(var(--grey-100), 0.5) inset, 0 1px 0.5px 0 hsl(var(--grey-500), 0.2);
+  --shadow-input: 0px 1px 2px hsl(var(--primary-300), 0.2);
+  --shadow-interactive-switch-track: 0px 1px 1px 0px hsl(0deg 0 0 / 0.05) inset;
+  --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsl(0deg 0 0 / 0.3);
+  --shadow-interactive-focus-visible: 0 0 0 4px hsl(var(--primary-300), 0.5);
 
   --border-radius-sm: 4px;
   --border-radius-md: 6px;
@@ -133,56 +134,57 @@
   .GalleryContainer,
   .GalleryMenu,
   .GalleryPopup,
-  .GalleryPopup,
   .GallerySelect-listbox {
     --canvas: #0f0f0f;
 
-    --font-color-soft: hsla(var(--grey-300));
-    --font-color-hard: hsla(var(--grey-50));
-    --font-color-interactive: hsla(var(--primary-300));
+    --font-color-soft: hsl(var(--grey-300));
+    --font-color-hard: hsl(var(--grey-50));
+    --font-color-interactive: hsl(var(--primary-300));
     --font-color-onDark: #fff;
 
-    --bg-default: hsla(var(--grey-900));
-    --bg-soft: hsla(var(--grey-800), 0.6);
-    --bg-hard: hsla(var(--grey-900), 0.8);
-    --bg-highlight: hsla(var(--primary-500));
-    --bg-overlay: hsla(0, 0, 0, 0.6);
-
-    --bg-button-base: hsla(var(--primary-500));
-    --bg-button-hover: hsla(var(--primary-400));
-    --bg-button-active: hsla(var(--primary-600));
-    --bg-button-disabled: hsla(var(--grey-900));
-    --border-solid-button: 1px solid hsla(var(--primary-600));
-
-    --bg-input-base: hsla(var(--grey-900, 0.5));
-    --bg-input-hover: hsla(var(--grey-900));
-    --bg-input-active: hsla(var(--grey-700));
-    --bg-input-disabled: hsla(var(--grey-800));
-
-    --bg-switch-track: hsla(var(--grey-700), 0.5);
-    --bg-select-option: hsla(var(--primary-300), 0.2);
-
-    --border-default: 1px solid hsla(var(--grey-800));
-    --border-soft: 1px solid hsla(var(--grey-800), 0.8);
-    --border-hard: 1px solid hsla(var(--grey-700));
-    --border-interactive: 1px solid hsla(var(--primary-200));
+    --bg-default: hsl(var(--grey-900));
+    --bg-soft: hsl(var(--grey-800), 0.6);
+    --bg-hard: hsl(var(--grey-900), 0.8);
+    --bg-highlight: hsl(var(--primary-500));
+    --bg-overlay: hsl(0deg 0 0 / 0.6);
+
+    --bg-button-base: hsl(var(--primary-500));
+    --bg-button-hover: hsl(var(--primary-400));
+    --bg-button-active: hsl(var(--primary-600));
+    --bg-button-disabled: hsl(var(--grey-900));
+    --border-solid-button: 1px solid hsl(var(--primary-600));
+
+    --bg-input-base: hsl(var(--grey-900, 0.5));
+    --bg-input-hover: hsl(var(--grey-900));
+    --bg-input-active: hsl(var(--grey-700));
+    --bg-input-disabled: hsl(var(--grey-800));
+
+    --bg-switch-track: hsl(var(--grey-700), 0.5);
+    --bg-select-option: hsl(var(--primary-300), 0.2);
+
+    --border-default: 1px solid hsl(var(--grey-800));
+    --border-soft: 1px solid hsl(var(--grey-800), 0.8);
+    --border-hard: 1px solid hsl(var(--grey-700));
+    --border-interactive: 1px solid hsl(var(--primary-200));
     --border-transparent: 1px solid transparent;
-    --border-active-switch: 1px solid hsla(var(--primary-400), 0.4);
+    --border-active-switch: 1px solid hsl(var(--primary-400), 0.4);
 
-    --shadow-elevation-1: 0px 2px 4px -0.5px hsla(0, 0, 0, 0.4);
-    --shadow-elevation-2: 0px 2px 8px 0px hsla(0, 0, 0, 0.3), 0px 2px 4px -0.5px hsla(0, 0, 0, 0.4);
-    --shadow-elevation-3: 0px 4px 8px 0px hsla(0, 0, 0, 0.32), 0px 8px 16px 0px hsla(0, 0, 0, 0.32);
+    --shadow-elevation-1: 0px 2px 4px -0.5px hsl(0deg 0 0 / 0.4);
+    --shadow-elevation-2:
+      0px 2px 8px 0px hsl(0deg 0 0 / 0.3), 0px 2px 4px -0.5px hsl(0deg 0 0 / 0.4);
+    --shadow-elevation-3:
+      0px 4px 8px 0px hsl(0deg 0 0 / 0.32), 0px 8px 16px 0px hsl(0deg 0 0 / 0.32);
     --shadow-elevation-4:
-      0px 2px 24px 0px hsla(0, 0, 0, 0.32), 0px 16px 32px 0px hsla(0, 0, 0, 0.32);
+      0px 2px 24px 0px hsl(0deg 0 0 / 0.32), 0px 16px 32px 0px hsl(0deg 0 0 / 0.32);
 
     --shadow-interactive-button:
-      0 -2px 0.5px 0 hsla(var(--primary-700), 0.4) inset,
-      0 2px 0.5px 0 hsla(var(--primary-400), 0.6) inset, 0 1px 0.5px 0 hsla(var(--primary-900), 0.3);
+      0 -2px 0.5px 0 hsl(var(--primary-700), 0.4) inset,
+      0 2px 0.5px 0 hsl(var(--primary-400), 0.6) inset, 0 1px 0.5px 0 hsl(var(--primary-900), 0.3);
     --shadow-outlined-button:
-      0 -2px 0.5px 0 hsla(0, 0%, 0%, 0.4) inset, 0 1px 0.5px 0 hsla(0, 0%, 0%, 0.9);
-    --shadow-input: 0px 1.5px 0.5px 0px hsla(0, 0%, 0%, 0.9);
-    --shadow-interactive-switch-track: 0px 1px 1px 0px hsla(0, 0, 0, 0.35) inset;
-    --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsla(0, 0, 0, 0.3);
+      0 -2px 0.5px 0 hsl(0deg 0% 0% / 0.4) inset, 0 1px 0.5px 0 hsl(0deg 0% 0% / 0.9);
+    --shadow-input: 0px 1.5px 0.5px 0px hsl(0deg 0% 0% / 0.9);
+    --shadow-interactive-switch-track: 0px 1px 1px 0px hsl(0deg 0 0 / 0.35) inset;
+    --shadow-interactive-switch-thumb: 0px 1px 2px 0px hsl(0deg 0 0 / 0.3);
   }
 }
 
@@ -474,7 +476,6 @@
 }
 
 .GalleryNumberInput .input {
-  font-family: inherit;
   font: var(--text-body);
   grid-column: 1/2;
   grid-row: 1/3;
@@ -561,7 +562,7 @@
   border-radius: var(--border-radius-md);
   padding: 0.75rem;
   opacity: 1;
-  margin: 0.25rem 0px;
+  margin: 0.25rem 0;
   color: var(--font-color-soft);
   background: var(--bg-default);
   border: var(--border-soft);
@@ -612,7 +613,6 @@
 }
 
 .GallerySelect-listbox {
-  box-sizing: border-box;
   width: 300px;
   font: var(--text-body);
   line-height: var(--button-line-height);
@@ -903,10 +903,6 @@
 
 /* Table pagination styles */
 
-.GalleryTablePaginationDemo th {
-  background-color: var(--bg-default);
-}
-
 .GalleryTablePaginationDemo table {
   font: var(--text-body);
   width: 100%;
diff --git a/package.json b/package.json
index 827b65b8888f95..365818728a8263 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "jsonlint": "code-infra jsonlint",
     "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
     "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
-    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.?(c|m)[jt]s?(x)\" --ignore-path .gitignore",
+    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.?(c|m)[jt]s?(x)\" \"docs/**/*.css\" --ignore-path .lintignore",
     "markdownlint": "markdownlint-cli2 \"**/*.md\"",
     "valelint": "pnpm vale sync && git ls-files | grep -h \".md$\" | xargs pnpm vale --filter='.Level==\"error\"'",
     "prettier": "pretty-quick --ignore-path .lintignore --branch master",
@@ -161,7 +161,6 @@
     "mocha": "^11.7.1",
     "nx": "^20.8.2",
     "nyc": "^17.1.0",
-    "postcss-styled-syntax": "^0.7.1",
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2",
     "process": "^0.11.10",
@@ -170,7 +169,6 @@
     "rimraf": "^6.0.1",
     "serve": "^14.2.4",
     "stylelint": "^16.23.1",
-    "stylelint-config-standard": "^39.0.0",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "tsx": "^4.20.4",
     "typescript": "^5.9.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bad6e3490fef75..f54eff581aa77d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,9 +223,6 @@ importers:
       nyc:
         specifier: ^17.1.0
         version: 17.1.0
-      postcss-styled-syntax:
-        specifier: ^0.7.1
-        version: 0.7.1(postcss@8.5.6)
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
@@ -250,9 +247,6 @@ importers:
       stylelint:
         specifier: ^16.23.1
         version: 16.23.1(typescript@5.9.3)
-      stylelint-config-standard:
-        specifier: ^39.0.0
-        version: 39.0.0(stylelint@16.23.1(typescript@5.9.3))
       tsconfig-paths-webpack-plugin:
         specifier: ^4.2.0
         version: 4.2.0
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index 39707dd541c722..6cd1cfe9bedbfa 100644
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -1,19 +1,12 @@
+import base from '@mui/internal-code-infra/stylelint';
+
+// Note: To debug stylelint config resolution for a specific file, use
+//         pnpm exec stylelint --print-config <path-to-file>
+
+/** @type {import('stylelint').Config} */
 export default {
-  extends: 'stylelint-config-standard',
-  rules: {
-    'alpha-value-notation': null,
-    'custom-property-pattern': null,
-    'media-feature-range-notation': null,
-    'no-empty-source': null,
-    'selector-class-pattern': null,
-    'string-no-newline': null, // not compatible with prettier
-    'value-keyword-case': null,
-  },
+  extends: base,
   overrides: [
-    {
-      files: ['**/*.js', '**/*.cjs', '**/*.mjs', '**/*.mts', '**/*.ts', '**/*.tsx'],
-      customSyntax: 'postcss-styled-syntax',
-    },
     {
       files: [
         'docs/data/material/integrations/interoperability/**/*.js',