From 8c8248156a8e5fb1e96aabdf0fb2b541f2368dfa Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 11:34:48 +0700
Subject: [PATCH 01/27] init theme-style-overrides

---
 .../src/v6.0.0/theme-style-overrides/index.js |   1 +
 .../theme-style-overrides.js                  | 597 ++++++++++++++++++
 .../theme-style-overrides.test.js             |  37 ++
 3 files changed, 635 insertions(+)
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js

diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js
new file mode 100644
index 00000000000000..27705a88fc775d
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js
@@ -0,0 +1 @@
+export { default } from './theme-style-overrides';
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
new file mode 100644
index 00000000000000..7ebe5a69916536
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
@@ -0,0 +1,597 @@
+const MAX_DEPTH = 20;
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function styledV6(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  function createBuildStyle(key, upperBuildStyle) {
+    return function buildStyle(styleExpression) {
+      if (key) {
+        if (key.type === 'Identifier' || key.type === 'StringLiteral') {
+          return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
+        }
+        if (key.type === 'TemplateLiteral') {
+          return upperBuildStyle(
+            j.objectExpression([
+              {
+                ...j.objectProperty(key, styleExpression),
+                computed: true,
+              },
+            ]),
+          );
+        }
+      }
+      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
+    };
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+   */
+  function getIdentifierKey(node) {
+    if (node.type === 'MemberExpression') {
+      return node.property;
+    }
+    return node;
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+   */
+  function getObjectKey(node) {
+    let tempNode = { ...node };
+    while (tempNode.type === 'UnaryExpression') {
+      tempNode = tempNode.argument;
+    }
+    while (tempNode.type === 'MemberExpression') {
+      tempNode = tempNode.object;
+    }
+    return tempNode;
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
+   * @param {import('ast-types').namedTypes.BinaryExpression} addtional
+   */
+  function objectToArrowFunction(objectExpression, addtional) {
+    const paramKeys = new Set();
+    let left;
+    objectExpression.properties.forEach((prop, index) => {
+      paramKeys.add(prop.key.name);
+      const result = j.binaryExpression('===', prop.key, prop.value);
+      if (index === 0) {
+        left = result;
+      } else {
+        left = j.logicalExpression('&&', left, result);
+      }
+    });
+    if (addtional) {
+      paramKeys.add(getObjectKey(addtional.left).name);
+    }
+    return buildArrowFunctionAST(
+      paramKeys,
+      addtional ? j.logicalExpression('&&', left, addtional) : left,
+    );
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node
+   */
+  function inverseBinaryExpression(node) {
+    if (node.type === 'Identifier') {
+      return j.unaryExpression('!', node);
+    }
+    if (node.operator === '===') {
+      return { ...node, operator: '!==' };
+    }
+    if (node.operator === '!==') {
+      return { ...node, operator: '===' };
+    }
+    if (node.operator === '!') {
+      if (node.argument?.operator === '!') {
+        return node.argument;
+      }
+      return j.unaryExpression('!', node);
+    }
+    return node;
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.ObjectExpression} node
+   */
+  function removeProperty(parentNode, child) {
+    if (parentNode) {
+      if (parentNode.type === 'ObjectExpression') {
+        parentNode.properties = parentNode.properties.filter(
+          (prop) => prop !== child && prop.value !== child,
+        );
+      }
+    }
+  }
+
+  function buildObjectAST(jsObject) {
+    const result = j.objectExpression([]);
+    Object.entries(jsObject).forEach(([key, value]) => {
+      result.properties.push(j.objectProperty(j.identifier(key), value));
+    });
+    return result;
+  }
+
+  function buildArrowFunctionAST(params, body) {
+    return j.arrowFunctionExpression(
+      [
+        j.objectPattern(
+          [...params].map((k) => ({
+            ...j.objectProperty(j.identifier(k), j.identifier(k)),
+            shorthand: true,
+          })),
+        ),
+      ],
+      body,
+    );
+  }
+
+  /**
+   *
+   * @param {{ properties: any[] }} node
+   * @param {Record<string, any[]>} modeStyles
+   */
+  function appendPaletteModeStyles(node, modeStyles) {
+    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+      node.properties.push(
+        j.spreadElement(
+          j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
+            j.stringLiteral(mode),
+            j.objectExpression(objectStyles),
+          ]),
+        ),
+      );
+    });
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   */
+  function buildProps(node) {
+    const properties = [];
+    const variables = new Set();
+    let isAllEqual = true;
+    let tempNode = { ...node };
+    function assignProperties(_node) {
+      if (_node.type === 'BinaryExpression') {
+        variables.add(getObjectKey(_node.left).name);
+        if (_node.operator === '===') {
+          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
+        } else {
+          isAllEqual = false;
+        }
+      }
+      if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
+        isAllEqual = false;
+        variables.add(getObjectKey(_node).name);
+      }
+      if (_node.type === 'UnaryExpression') {
+        isAllEqual = false;
+        if (_node.argument.type === 'UnaryExpression') {
+          // handle `!!variable`
+          variables.add(getObjectKey(_node.argument.argument).name);
+        } else {
+          // handle `!variable`
+          variables.add(getObjectKey(_node.argument).name);
+        }
+      }
+    }
+    let counter = 0;
+    if (tempNode.type !== 'LogicalExpression') {
+      assignProperties(tempNode);
+    } else {
+      while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) {
+        counter += 1;
+        if (tempNode.operator !== '&&') {
+          isAllEqual = false;
+        }
+
+        assignProperties(tempNode.right);
+        if (tempNode.left.type !== 'LogicalExpression') {
+          assignProperties(tempNode.left);
+          break;
+        }
+
+        tempNode = { ...tempNode.left };
+      }
+    }
+
+    if (!isAllEqual) {
+      return buildArrowFunctionAST(variables, node);
+    }
+    return j.objectExpression(properties);
+  }
+
+  function mergeProps(parentProps, currentProps) {
+    if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') {
+      return j.objectExpression([...parentProps.properties, ...currentProps.properties]);
+    }
+    const parentArrow =
+      parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps;
+    const currentArrow =
+      currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
+    const variables = new Set();
+    [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => {
+      variables.add(param.key.name);
+    });
+    return buildArrowFunctionAST(
+      variables,
+      j.logicalExpression('&&', parentArrow.body, currentArrow.body),
+    );
+  }
+
+  function isThemePaletteMode(node) {
+    return (
+      node.type === 'MemberExpression' &&
+      node.object.type === 'MemberExpression' &&
+      node.object.object.name === 'theme' &&
+      node.object.property.name === 'palette' &&
+      node.property.name === 'mode'
+    );
+  }
+
+  let shouldTransform = false;
+
+  root.find(j.ArrowFunctionExpression).forEach((path) => {
+    const styles = [];
+    let args = [];
+
+    if (path.parent.parent.parent.get('key', 'name').value === 'styleOverrides') {
+      args = [path.node];
+    }
+
+    // 1. collecting styles that should be tranformed
+    args.forEach((arg) => {
+      if (
+        arg.type === 'ArrowFunctionExpression' &&
+        arg.params[0] &&
+        arg.params[0].type === 'ObjectPattern'
+      ) {
+        styles.push(arg);
+      }
+    });
+
+    if (!shouldTransform && styles.length > 0) {
+      shouldTransform = true;
+    }
+
+    // 2. Find logical spread expressions to convert to variants
+    styles.forEach((style) => {
+      const parameters = new Set();
+      style.params.forEach((param) => {
+        if (param.type === 'ObjectPattern') {
+          param.properties.forEach((prop) => {
+            parameters.add(prop.key.name);
+          });
+        }
+      });
+      const variants = [];
+
+      if (style.body.type === 'LogicalExpression') {
+        if (
+          style.params[0] &&
+          style.params[0].type === 'ObjectPattern' &&
+          style.params[0].properties.some((prop) => prop.key.name !== 'theme')
+        ) {
+          // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
+          style.body = j.objectExpression([
+            j.objectProperty(
+              j.identifier('variants'),
+              j.arrayExpression([
+                j.objectExpression([
+                  j.objectProperty(j.identifier('props'), buildProps(style.body.left)),
+                  j.objectProperty(j.identifier('style'), style.body.right),
+                ]),
+              ]),
+            ),
+          ]);
+        }
+      } else if (style.body.type === 'ConditionalExpression') {
+        // skip ConditionalExpression
+      } else {
+        let objectExpression = style.body;
+        let counter = 0;
+        while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
+          counter += 1;
+          if (objectExpression.type === 'BlockStatement') {
+            objectExpression = objectExpression.body.find(
+              (item) => item.type === 'ReturnStatement',
+            ).argument;
+          }
+        }
+
+        recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() });
+
+        if (variants.length) {
+          objectExpression.properties.push(
+            j.objectProperty(
+              j.identifier('variants'),
+              j.arrayExpression(
+                variants.filter((variant) => {
+                  const props = variant.properties.find((prop) => prop.key.name === 'props');
+                  const styleVal = variant.properties.find((prop) => prop.key.name === 'style');
+                  return (
+                    props &&
+                    styleVal &&
+                    styleVal.value.properties.length > 0 &&
+                    (props.value.type === 'ArrowFunctionExpression' ||
+                      props.value.properties.length > 0)
+                  );
+                }),
+              ),
+            ),
+          );
+        }
+      }
+
+      function recurseObjectExpression(data) {
+        if (data.node.type === 'ObjectExpression') {
+          const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+          data.node.properties.forEach((prop) => {
+            if (prop.type === 'ObjectProperty') {
+              recurseObjectExpression({
+                ...data,
+                node: prop.value,
+                parentNode: data.node,
+                key: prop.key,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                replaceValue: (newValue) => {
+                  prop.value = newValue;
+                },
+                modeStyles,
+              });
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: prop,
+                parentNode: data.node,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              });
+            }
+          });
+          appendPaletteModeStyles(data.node, modeStyles);
+        }
+        if (data.node.type === 'SpreadElement') {
+          if (data.node.argument.type === 'LogicalExpression') {
+            const paramName = getObjectKey(data.node.argument.left)?.name;
+            if (paramName && !parameters.has(paramName)) {
+              return;
+            }
+
+            const scopeProps = buildProps(data.node.argument.left);
+            const variant = {
+              props: data.props ? mergeProps(data.props, scopeProps) : scopeProps,
+              style: data.node.argument.right,
+            };
+
+            const lastLength = variants.push({}); // preserve the order of the recursive calls
+
+            const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+            variant.style.properties.forEach((prop) => {
+              if (prop.type === 'ObjectProperty') {
+                recurseObjectExpression({
+                  ...data,
+                  node: prop.value,
+                  parentNode: variant.style,
+                  props: variant.props,
+                  key: prop.key,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                  replaceValue: (newValue) => {
+                    prop.value = newValue;
+                  },
+                  modeStyles,
+                });
+              } else {
+                recurseObjectExpression({
+                  ...data,
+                  node: prop,
+                  parentNode: variant.style,
+                  props: variant.props,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                });
+              }
+            });
+            appendPaletteModeStyles(variant.style, modeStyles);
+            variant.style = data.buildStyle(variant.style);
+            variants[lastLength - 1] = buildObjectAST(variant);
+            removeProperty(data.parentNode, data.node);
+          }
+          if (data.node.argument.type === 'ConditionalExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument,
+              parentNode: data.node,
+            });
+            removeProperty(data.parentNode, data.node);
+          }
+        }
+        if (data.node.type === 'ConditionalExpression') {
+          if (
+            data.node.test.type === 'BinaryExpression' ||
+            data.node.test.type === 'UnaryExpression' ||
+            data.node.test.type === 'Identifier'
+          ) {
+            let leftName = getObjectKey(data.node.test)?.name;
+            if (data.node.test.left) {
+              leftName = getObjectKey(data.node.test.left)?.name;
+            }
+            if (data.node.test.argument) {
+              leftName = getObjectKey(data.node.test.argument)?.name;
+            }
+            if (parameters.has(leftName) && leftName !== 'theme') {
+              let props = buildProps(data.node.test);
+              if (data.props) {
+                props = mergeProps(data.props, props);
+              }
+              const styleVal = data.buildStyle(data.node.consequent);
+              const variant = {
+                props,
+                style: styleVal,
+              };
+              variants.push(buildObjectAST(variant));
+
+              // create another variant with inverted condition
+              let props2 = buildProps(inverseBinaryExpression(data.node.test));
+              if (data.props) {
+                props2 = mergeProps(data.props, props2);
+              }
+              const styleVal2 = data.buildStyle(data.node.alternate);
+              const variant2 = {
+                props: props2,
+                style: styleVal2,
+              };
+              variants.push(buildObjectAST(variant2));
+              if (data.parentNode?.type === 'ObjectExpression') {
+                removeProperty(data.parentNode, data.node);
+              }
+            }
+            if (
+              leftName === 'theme' &&
+              data.parentNode?.type === 'ObjectExpression' &&
+              data.node.test?.type === 'BinaryExpression' &&
+              isThemePaletteMode(data.node.test.left)
+            ) {
+              if (
+                data.node.consequent.type !== 'ObjectExpression' &&
+                data.node.alternate.type !== 'ObjectExpression'
+              ) {
+                if (data.modeStyles) {
+                  if (!data.modeStyles[data.node.test.right.value]) {
+                    data.modeStyles[data.node.test.right.value] = [];
+                  }
+                  data.modeStyles[data.node.test.right.value].push(
+                    j.objectProperty(data.key, data.node.consequent),
+                  );
+                }
+                data.replaceValue?.(data.node.alternate);
+              }
+            }
+          }
+        }
+        if (data.node.type === 'TemplateLiteral') {
+          if (data.parentNode?.type === 'ObjectExpression') {
+            const modeStyles = {};
+            data.node.expressions.forEach((expression, index) => {
+              recurseObjectExpression({
+                ...data,
+                node: expression,
+                parentNode: data.parentNode,
+                buildStyle: createBuildStyle(data.key, data.buildStyle),
+                replaceValue: (newValue) => {
+                  data.node.expressions[index] = newValue;
+                },
+                modeStyles,
+              });
+            });
+            if (data.modeStyles) {
+              Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+                const clonedNode = {
+                  ...data.node,
+                  expressions: data.node.expressions.map((expression) => ({ ...expression })),
+                };
+                clonedNode.expressions = objectStyles.map((item) => item.value);
+
+                if (!data.modeStyles[mode]) {
+                  data.modeStyles[mode] = [];
+                }
+                data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
+              });
+            }
+          }
+        }
+        if (
+          data.key &&
+          data.key.type === 'Identifier' &&
+          data.node.type === 'MemberExpression' &&
+          data.node.object.type === 'ObjectExpression' &&
+          parameters.has(getObjectKey(data.node.property).name)
+        ) {
+          data.node.object.properties.forEach((prop) => {
+            variants.push(
+              buildObjectAST({
+                props: j.objectExpression([
+                  j.objectProperty(
+                    getIdentifierKey(data.node.property),
+                    j.stringLiteral(prop.key.name),
+                  ),
+                ]),
+                style: data.buildStyle(prop.value),
+              }),
+            );
+          });
+          removeProperty(data.parentNode, data.node);
+        }
+      }
+
+      style.params.forEach((param) => {
+        if (param.type === 'ObjectPattern') {
+          param.properties = param.properties.filter((prop) => prop.key.name === 'theme');
+        }
+      });
+    });
+
+    // Replace arrow function with object expression if the arg properties is empty
+    args.forEach((arg, index) => {
+      if (
+        arg.type === 'ArrowFunctionExpression' &&
+        arg.params[0] &&
+        arg.params[0].type === 'ObjectPattern' &&
+        arg.params[0].properties.length === 0
+      ) {
+        if (arg.body.type === 'ObjectExpression') {
+          args[index] = arg.body;
+        }
+        if (arg.body.type === 'BlockStatement') {
+          const returnStatement = arg.body.body.find((item) => item.type === 'ReturnStatement');
+          if (returnStatement) {
+            args[index] = returnStatement.argument;
+          }
+        }
+      }
+    });
+  });
+
+  const transformed = root.toSource(printOptions);
+
+  if (shouldTransform) {
+    // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249
+    // need to remove them manually
+    const lines = [];
+    let isInStyled = false;
+    let spaceMatch;
+    transformed.split('\n').forEach((line) => {
+      if (!isInStyled) {
+        lines.push(line);
+      } else if (line !== '') {
+        if (spaceMatch && line.match(/^\s+/)?.[0] === spaceMatch?.[0]) {
+          isInStyled = false;
+          spaceMatch = null;
+        }
+        lines.push(line);
+      }
+      if (line.includes('styleOverrides')) {
+        isInStyled = true;
+        spaceMatch = line.match(/^\s+/);
+      }
+    });
+    return lines.join('\n');
+  }
+
+  return transformed;
+}
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
new file mode 100644
index 00000000000000..b9d7fab07be0fe
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
@@ -0,0 +1,37 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './theme-style-overrides';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('v6.0.0', () => {
+    describe('basic theme-style-overrides', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/BasicStyled.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/BasicStyled.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/BasicStyled.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/BasicStyled.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

From ded14624b9ec21c27739e83e1927e28d30c2bb1b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 22 Apr 2024 18:21:54 +0700
Subject: [PATCH 02/27] fix MemberExpression case

---
 .../src/v6.0.0/styled/styled-v6.js            |  7 ++--
 .../test-cases/ConditionalStyled.actual.js    | 27 ++++++++++++
 .../test-cases/ConditionalStyled.expected.js  | 41 +++++++++++++++++++
 3 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
index eeef1e63699534..8a4d25fcc4ec2c 100644
--- a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
+++ b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
@@ -84,10 +84,10 @@ export default function styledV6(file, api, options) {
 
   /**
    *
-   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node
+   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
    */
   function inverseBinaryExpression(node) {
-    if (node.type === 'Identifier') {
+    if (node.type === 'Identifier' || node.type === 'MemberExpression') {
       return j.unaryExpression('!', node);
     }
     if (node.operator === '===') {
@@ -439,7 +439,8 @@ export default function styledV6(file, api, options) {
           if (
             data.node.test.type === 'BinaryExpression' ||
             data.node.test.type === 'UnaryExpression' ||
-            data.node.test.type === 'Identifier'
+            data.node.test.type === 'Identifier' ||
+            data.node.test.type === 'MemberExpression'
           ) {
             let leftName = getObjectKey(data.node.test)?.name;
             if (data.node.test.left) {
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js
index c697bd74b69d85..284ff75cbd4d8b 100644
--- a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js
+++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js
@@ -123,3 +123,30 @@ const StyledAppContainer = styled(AppContainer, {
     },
   };
 });
+
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [styles.root, ownerState.dividers && styles.dividers];
+  },
+})(({ theme, ownerState }) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  ...(ownerState.dividers
+    ? {
+        padding: '16px 24px',
+        borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+        borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      }
+    : {
+        [`.${dialogTitleClasses.root} + &`]: {
+          paddingTop: 0,
+        },
+      }),
+}));
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js
index 462436559d07e9..94648e44467afd 100644
--- a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js
+++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js
@@ -230,3 +230,44 @@ const StyledAppContainer = styled(AppContainer, {
     }]
   };
 });
+
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [styles.root, ownerState.dividers && styles.dividers];
+  },
+})(({
+  theme
+}) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  variants: [{
+    props: (
+      {
+        ownerState
+      }
+    ) => ownerState.dividers,
+    style: {
+          padding: '16px 24px',
+          borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+          borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+        }
+  }, {
+    props: (
+      {
+        ownerState
+      }
+    ) => !ownerState.dividers,
+    style: {
+          [`.${dialogTitleClasses.root} + &`]: {
+            paddingTop: 0,
+          },
+        }
+  }]
+}));

From 149d475f3c50dd4f22b48edac9bc44f5a41da7cd Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 11:38:24 +0700
Subject: [PATCH 03/27] update styled-v6

---
 .../src/v6.0.0/styled/styled-v6.js            | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
index 8a4d25fcc4ec2c..eb0743665a7b44 100644
--- a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
+++ b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
@@ -15,7 +15,7 @@ export default function styledV6(file, api, options) {
         if (key.type === 'Identifier' || key.type === 'StringLiteral') {
           return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
         }
-        if (key.type === 'TemplateLiteral') {
+        if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
           return upperBuildStyle(
             j.objectExpression([
               {
@@ -343,7 +343,7 @@ export default function styledV6(file, api, options) {
                   return (
                     props &&
                     styleVal &&
-                    styleVal.value.properties.length > 0 &&
+                    (!styleVal.value.properties || styleVal.value.properties.length > 0) &&
                     (props.value.type === 'ArrowFunctionExpression' ||
                       props.value.properties.length > 0)
                   );
@@ -384,7 +384,7 @@ export default function styledV6(file, api, options) {
         if (data.node.type === 'SpreadElement') {
           if (data.node.argument.type === 'LogicalExpression') {
             const paramName = getObjectKey(data.node.argument.left)?.name;
-            if (paramName && !parameters.has(paramName)) {
+            if (paramName && (paramName === 'theme' || !parameters.has(paramName))) {
               return;
             }
 
@@ -397,30 +397,32 @@ export default function styledV6(file, api, options) {
             const lastLength = variants.push({}); // preserve the order of the recursive calls
 
             const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
-            variant.style.properties.forEach((prop) => {
-              if (prop.type === 'ObjectProperty') {
-                recurseObjectExpression({
-                  ...data,
-                  node: prop.value,
-                  parentNode: variant.style,
-                  props: variant.props,
-                  key: prop.key,
-                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                  replaceValue: (newValue) => {
-                    prop.value = newValue;
-                  },
-                  modeStyles,
-                });
-              } else {
-                recurseObjectExpression({
-                  ...data,
-                  node: prop,
-                  parentNode: variant.style,
-                  props: variant.props,
-                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                });
-              }
-            });
+            if (variant.style.type === 'ObjectExpression') {
+              variant.style.properties.forEach((prop) => {
+                if (prop.type === 'ObjectProperty') {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop.value,
+                    parentNode: variant.style,
+                    props: variant.props,
+                    key: prop.key,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                    replaceValue: (newValue) => {
+                      prop.value = newValue;
+                    },
+                    modeStyles,
+                  });
+                } else {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop,
+                    parentNode: variant.style,
+                    props: variant.props,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                  });
+                }
+              });
+            }
             appendPaletteModeStyles(variant.style, modeStyles);
             variant.style = data.buildStyle(variant.style);
             variants[lastLength - 1] = buildObjectAST(variant);

From a73639302b0d1e273bfc4fdf530e71824cfb5046 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 11:56:27 +0700
Subject: [PATCH 04/27] move logic to util

---
 .../mui-codemod/src/util/migrateToVariants.js | 518 ++++++++++++++++++
 .../src/v6.0.0/styled/styled-v6.js            | 517 +----------------
 2 files changed, 520 insertions(+), 515 deletions(-)
 create mode 100644 packages/mui-codemod/src/util/migrateToVariants.js

diff --git a/packages/mui-codemod/src/util/migrateToVariants.js b/packages/mui-codemod/src/util/migrateToVariants.js
new file mode 100644
index 00000000000000..c62ec47bca6cc6
--- /dev/null
+++ b/packages/mui-codemod/src/util/migrateToVariants.js
@@ -0,0 +1,518 @@
+const MAX_DEPTH = 20;
+
+export default function migrateToVariants(j, styles) {
+  function createBuildStyle(key, upperBuildStyle) {
+    return function buildStyle(styleExpression) {
+      if (key) {
+        if (key.type === 'Identifier' || key.type === 'StringLiteral') {
+          return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
+        }
+        if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
+          return upperBuildStyle(
+            j.objectExpression([
+              {
+                ...j.objectProperty(key, styleExpression),
+                computed: true,
+              },
+            ]),
+          );
+        }
+      }
+      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
+    };
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+   */
+  function getIdentifierKey(node) {
+    if (node.type === 'MemberExpression') {
+      return node.property;
+    }
+    return node;
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+   */
+  function getObjectKey(node) {
+    let tempNode = { ...node };
+    while (tempNode.type === 'UnaryExpression') {
+      tempNode = tempNode.argument;
+    }
+    while (tempNode.type === 'MemberExpression') {
+      tempNode = tempNode.object;
+    }
+    return tempNode;
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
+   * @param {import('ast-types').namedTypes.BinaryExpression} addtional
+   */
+  function objectToArrowFunction(objectExpression, addtional) {
+    const paramKeys = new Set();
+    let left;
+    objectExpression.properties.forEach((prop, index) => {
+      paramKeys.add(prop.key.name);
+      const result = j.binaryExpression('===', prop.key, prop.value);
+      if (index === 0) {
+        left = result;
+      } else {
+        left = j.logicalExpression('&&', left, result);
+      }
+    });
+    if (addtional) {
+      paramKeys.add(getObjectKey(addtional.left).name);
+    }
+    return buildArrowFunctionAST(
+      paramKeys,
+      addtional ? j.logicalExpression('&&', left, addtional) : left,
+    );
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   */
+  function inverseBinaryExpression(node) {
+    if (node.type === 'Identifier' || node.type === 'MemberExpression') {
+      return j.unaryExpression('!', node);
+    }
+    if (node.operator === '===') {
+      return { ...node, operator: '!==' };
+    }
+    if (node.operator === '!==') {
+      return { ...node, operator: '===' };
+    }
+    if (node.operator === '!') {
+      if (node.argument?.operator === '!') {
+        return node.argument;
+      }
+      return j.unaryExpression('!', node);
+    }
+    return node;
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.ObjectExpression} node
+   */
+  function removeProperty(parentNode, child) {
+    if (parentNode) {
+      if (parentNode.type === 'ObjectExpression') {
+        parentNode.properties = parentNode.properties.filter(
+          (prop) => prop !== child && prop.value !== child,
+        );
+      }
+    }
+  }
+
+  function buildObjectAST(jsObject) {
+    const result = j.objectExpression([]);
+    Object.entries(jsObject).forEach(([key, value]) => {
+      result.properties.push(j.objectProperty(j.identifier(key), value));
+    });
+    return result;
+  }
+
+  function buildArrowFunctionAST(params, body) {
+    return j.arrowFunctionExpression(
+      [
+        j.objectPattern(
+          [...params].map((k) => ({
+            ...j.objectProperty(j.identifier(k), j.identifier(k)),
+            shorthand: true,
+          })),
+        ),
+      ],
+      body,
+    );
+  }
+
+  /**
+   *
+   * @param {{ properties: any[] }} node
+   * @param {Record<string, any[]>} modeStyles
+   */
+  function appendPaletteModeStyles(node, modeStyles) {
+    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+      node.properties.push(
+        j.spreadElement(
+          j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
+            j.stringLiteral(mode),
+            j.objectExpression(objectStyles),
+          ]),
+        ),
+      );
+    });
+  }
+
+  /**
+   *
+   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   */
+  function buildProps(node) {
+    const properties = [];
+    const variables = new Set();
+    let isAllEqual = true;
+    let tempNode = { ...node };
+    function assignProperties(_node) {
+      if (_node.type === 'BinaryExpression') {
+        variables.add(getObjectKey(_node.left).name);
+        if (_node.operator === '===') {
+          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
+        } else {
+          isAllEqual = false;
+        }
+      }
+      if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
+        isAllEqual = false;
+        variables.add(getObjectKey(_node).name);
+      }
+      if (_node.type === 'UnaryExpression') {
+        isAllEqual = false;
+        if (_node.argument.type === 'UnaryExpression') {
+          // handle `!!variable`
+          variables.add(getObjectKey(_node.argument.argument).name);
+        } else {
+          // handle `!variable`
+          variables.add(getObjectKey(_node.argument).name);
+        }
+      }
+    }
+    let counter = 0;
+    if (tempNode.type !== 'LogicalExpression') {
+      assignProperties(tempNode);
+    } else {
+      while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) {
+        counter += 1;
+        if (tempNode.operator !== '&&') {
+          isAllEqual = false;
+        }
+
+        assignProperties(tempNode.right);
+        if (tempNode.left.type !== 'LogicalExpression') {
+          assignProperties(tempNode.left);
+          break;
+        }
+
+        tempNode = { ...tempNode.left };
+      }
+    }
+
+    if (!isAllEqual) {
+      return buildArrowFunctionAST(variables, node);
+    }
+    return j.objectExpression(properties);
+  }
+
+  function mergeProps(parentProps, currentProps) {
+    if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') {
+      return j.objectExpression([...parentProps.properties, ...currentProps.properties]);
+    }
+    const parentArrow =
+      parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps;
+    const currentArrow =
+      currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
+    const variables = new Set();
+    [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => {
+      variables.add(param.key.name);
+    });
+    return buildArrowFunctionAST(
+      variables,
+      j.logicalExpression('&&', parentArrow.body, currentArrow.body),
+    );
+  }
+
+  function isThemePaletteMode(node) {
+    return (
+      node.type === 'MemberExpression' &&
+      node.object.type === 'MemberExpression' &&
+      node.object.object.name === 'theme' &&
+      node.object.property.name === 'palette' &&
+      node.property.name === 'mode'
+    );
+  }
+
+  // 2. Find logical spread expressions to convert to variants
+  styles.forEach((style) => {
+    const parameters = new Set();
+    style.params.forEach((param) => {
+      if (param.type === 'ObjectPattern') {
+        param.properties.forEach((prop) => {
+          parameters.add(prop.key.name);
+        });
+      }
+    });
+    const variants = [];
+
+    if (style.body.type === 'LogicalExpression') {
+      if (
+        style.params[0] &&
+        style.params[0].type === 'ObjectPattern' &&
+        style.params[0].properties.some((prop) => prop.key.name !== 'theme')
+      ) {
+        // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
+        style.body = j.objectExpression([
+          j.objectProperty(
+            j.identifier('variants'),
+            j.arrayExpression([
+              j.objectExpression([
+                j.objectProperty(j.identifier('props'), buildProps(style.body.left)),
+                j.objectProperty(j.identifier('style'), style.body.right),
+              ]),
+            ]),
+          ),
+        ]);
+      }
+    } else if (style.body.type === 'ConditionalExpression') {
+      // skip ConditionalExpression
+    } else {
+      let objectExpression = style.body;
+      let counter = 0;
+      while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
+        counter += 1;
+        if (objectExpression.type === 'BlockStatement') {
+          objectExpression = objectExpression.body.find(
+            (item) => item.type === 'ReturnStatement',
+          ).argument;
+        }
+      }
+
+      recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() });
+
+      if (variants.length) {
+        objectExpression.properties.push(
+          j.objectProperty(
+            j.identifier('variants'),
+            j.arrayExpression(
+              variants.filter((variant) => {
+                const props = variant.properties.find((prop) => prop.key.name === 'props');
+                const styleVal = variant.properties.find((prop) => prop.key.name === 'style');
+                return (
+                  props &&
+                  styleVal &&
+                  (!styleVal.value.properties || styleVal.value.properties.length > 0) &&
+                  (props.value.type === 'ArrowFunctionExpression' ||
+                    props.value.properties.length > 0)
+                );
+              }),
+            ),
+          ),
+        );
+      }
+    }
+
+    function recurseObjectExpression(data) {
+      if (data.node.type === 'ObjectExpression') {
+        const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+        data.node.properties.forEach((prop) => {
+          if (prop.type === 'ObjectProperty') {
+            recurseObjectExpression({
+              ...data,
+              node: prop.value,
+              parentNode: data.node,
+              key: prop.key,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              replaceValue: (newValue) => {
+                prop.value = newValue;
+              },
+              modeStyles,
+            });
+          } else {
+            recurseObjectExpression({
+              ...data,
+              node: prop,
+              parentNode: data.node,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle),
+            });
+          }
+        });
+        appendPaletteModeStyles(data.node, modeStyles);
+      }
+      if (data.node.type === 'SpreadElement') {
+        if (data.node.argument.type === 'LogicalExpression') {
+          const paramName = getObjectKey(data.node.argument.left)?.name;
+          if (paramName && (paramName === 'theme' || !parameters.has(paramName))) {
+            return;
+          }
+
+          const scopeProps = buildProps(data.node.argument.left);
+          const variant = {
+            props: data.props ? mergeProps(data.props, scopeProps) : scopeProps,
+            style: data.node.argument.right,
+          };
+
+          const lastLength = variants.push({}); // preserve the order of the recursive calls
+
+          const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+          if (variant.style.type === 'ObjectExpression') {
+            variant.style.properties.forEach((prop) => {
+              if (prop.type === 'ObjectProperty') {
+                recurseObjectExpression({
+                  ...data,
+                  node: prop.value,
+                  parentNode: variant.style,
+                  props: variant.props,
+                  key: prop.key,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                  replaceValue: (newValue) => {
+                    prop.value = newValue;
+                  },
+                  modeStyles,
+                });
+              } else {
+                recurseObjectExpression({
+                  ...data,
+                  node: prop,
+                  parentNode: variant.style,
+                  props: variant.props,
+                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                });
+              }
+            });
+          }
+          appendPaletteModeStyles(variant.style, modeStyles);
+          variant.style = data.buildStyle(variant.style);
+          variants[lastLength - 1] = buildObjectAST(variant);
+          removeProperty(data.parentNode, data.node);
+        }
+        if (data.node.argument.type === 'ConditionalExpression') {
+          recurseObjectExpression({
+            ...data,
+            node: data.node.argument,
+            parentNode: data.node,
+          });
+          removeProperty(data.parentNode, data.node);
+        }
+      }
+      if (data.node.type === 'ConditionalExpression') {
+        if (
+          data.node.test.type === 'BinaryExpression' ||
+          data.node.test.type === 'UnaryExpression' ||
+          data.node.test.type === 'Identifier' ||
+          data.node.test.type === 'MemberExpression'
+        ) {
+          let leftName = getObjectKey(data.node.test)?.name;
+          if (data.node.test.left) {
+            leftName = getObjectKey(data.node.test.left)?.name;
+          }
+          if (data.node.test.argument) {
+            leftName = getObjectKey(data.node.test.argument)?.name;
+          }
+          if (parameters.has(leftName) && leftName !== 'theme') {
+            let props = buildProps(data.node.test);
+            if (data.props) {
+              props = mergeProps(data.props, props);
+            }
+            const styleVal = data.buildStyle(data.node.consequent);
+            const variant = {
+              props,
+              style: styleVal,
+            };
+            variants.push(buildObjectAST(variant));
+
+            // create another variant with inverted condition
+            let props2 = buildProps(inverseBinaryExpression(data.node.test));
+            if (data.props) {
+              props2 = mergeProps(data.props, props2);
+            }
+            const styleVal2 = data.buildStyle(data.node.alternate);
+            const variant2 = {
+              props: props2,
+              style: styleVal2,
+            };
+            variants.push(buildObjectAST(variant2));
+            if (data.parentNode?.type === 'ObjectExpression') {
+              removeProperty(data.parentNode, data.node);
+            }
+          }
+          if (
+            leftName === 'theme' &&
+            data.parentNode?.type === 'ObjectExpression' &&
+            data.node.test?.type === 'BinaryExpression' &&
+            isThemePaletteMode(data.node.test.left)
+          ) {
+            if (
+              data.node.consequent.type !== 'ObjectExpression' &&
+              data.node.alternate.type !== 'ObjectExpression'
+            ) {
+              if (data.modeStyles) {
+                if (!data.modeStyles[data.node.test.right.value]) {
+                  data.modeStyles[data.node.test.right.value] = [];
+                }
+                data.modeStyles[data.node.test.right.value].push(
+                  j.objectProperty(data.key, data.node.consequent),
+                );
+              }
+              data.replaceValue?.(data.node.alternate);
+            }
+          }
+        }
+      }
+      if (data.node.type === 'TemplateLiteral') {
+        if (data.parentNode?.type === 'ObjectExpression') {
+          const modeStyles = {};
+          data.node.expressions.forEach((expression, index) => {
+            recurseObjectExpression({
+              ...data,
+              node: expression,
+              parentNode: data.parentNode,
+              buildStyle: createBuildStyle(data.key, data.buildStyle),
+              replaceValue: (newValue) => {
+                data.node.expressions[index] = newValue;
+              },
+              modeStyles,
+            });
+          });
+          if (data.modeStyles) {
+            Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+              const clonedNode = {
+                ...data.node,
+                expressions: data.node.expressions.map((expression) => ({ ...expression })),
+              };
+              clonedNode.expressions = objectStyles.map((item) => item.value);
+
+              if (!data.modeStyles[mode]) {
+                data.modeStyles[mode] = [];
+              }
+              data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
+            });
+          }
+        }
+      }
+      if (
+        data.key &&
+        data.key.type === 'Identifier' &&
+        data.node.type === 'MemberExpression' &&
+        data.node.object.type === 'ObjectExpression' &&
+        parameters.has(getObjectKey(data.node.property).name)
+      ) {
+        data.node.object.properties.forEach((prop) => {
+          variants.push(
+            buildObjectAST({
+              props: j.objectExpression([
+                j.objectProperty(
+                  getIdentifierKey(data.node.property),
+                  j.stringLiteral(prop.key.name),
+                ),
+              ]),
+              style: data.buildStyle(prop.value),
+            }),
+          );
+        });
+        removeProperty(data.parentNode, data.node);
+      }
+    }
+
+    style.params.forEach((param) => {
+      if (param.type === 'ObjectPattern') {
+        param.properties = param.properties.filter((prop) => prop.key.name === 'theme');
+      }
+    });
+  });
+}
diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
index eb0743665a7b44..269e75f07407df 100644
--- a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
+++ b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
@@ -1,4 +1,4 @@
-const MAX_DEPTH = 20;
+import migrateToVariants from '../../util/migrateToVariants';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -9,243 +9,6 @@ export default function styledV6(file, api, options) {
   const root = j(file.source);
   const printOptions = options.printOptions;
 
-  function createBuildStyle(key, upperBuildStyle) {
-    return function buildStyle(styleExpression) {
-      if (key) {
-        if (key.type === 'Identifier' || key.type === 'StringLiteral') {
-          return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
-        }
-        if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
-          return upperBuildStyle(
-            j.objectExpression([
-              {
-                ...j.objectProperty(key, styleExpression),
-                computed: true,
-              },
-            ]),
-          );
-        }
-      }
-      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
-    };
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getIdentifierKey(node) {
-    if (node.type === 'MemberExpression') {
-      return node.property;
-    }
-    return node;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getObjectKey(node) {
-    let tempNode = { ...node };
-    while (tempNode.type === 'UnaryExpression') {
-      tempNode = tempNode.argument;
-    }
-    while (tempNode.type === 'MemberExpression') {
-      tempNode = tempNode.object;
-    }
-    return tempNode;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
-   * @param {import('ast-types').namedTypes.BinaryExpression} addtional
-   */
-  function objectToArrowFunction(objectExpression, addtional) {
-    const paramKeys = new Set();
-    let left;
-    objectExpression.properties.forEach((prop, index) => {
-      paramKeys.add(prop.key.name);
-      const result = j.binaryExpression('===', prop.key, prop.value);
-      if (index === 0) {
-        left = result;
-      } else {
-        left = j.logicalExpression('&&', left, result);
-      }
-    });
-    if (addtional) {
-      paramKeys.add(getObjectKey(addtional.left).name);
-    }
-    return buildArrowFunctionAST(
-      paramKeys,
-      addtional ? j.logicalExpression('&&', left, addtional) : left,
-    );
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
-   */
-  function inverseBinaryExpression(node) {
-    if (node.type === 'Identifier' || node.type === 'MemberExpression') {
-      return j.unaryExpression('!', node);
-    }
-    if (node.operator === '===') {
-      return { ...node, operator: '!==' };
-    }
-    if (node.operator === '!==') {
-      return { ...node, operator: '===' };
-    }
-    if (node.operator === '!') {
-      if (node.argument?.operator === '!') {
-        return node.argument;
-      }
-      return j.unaryExpression('!', node);
-    }
-    return node;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} node
-   */
-  function removeProperty(parentNode, child) {
-    if (parentNode) {
-      if (parentNode.type === 'ObjectExpression') {
-        parentNode.properties = parentNode.properties.filter(
-          (prop) => prop !== child && prop.value !== child,
-        );
-      }
-    }
-  }
-
-  function buildObjectAST(jsObject) {
-    const result = j.objectExpression([]);
-    Object.entries(jsObject).forEach(([key, value]) => {
-      result.properties.push(j.objectProperty(j.identifier(key), value));
-    });
-    return result;
-  }
-
-  function buildArrowFunctionAST(params, body) {
-    return j.arrowFunctionExpression(
-      [
-        j.objectPattern(
-          [...params].map((k) => ({
-            ...j.objectProperty(j.identifier(k), j.identifier(k)),
-            shorthand: true,
-          })),
-        ),
-      ],
-      body,
-    );
-  }
-
-  /**
-   *
-   * @param {{ properties: any[] }} node
-   * @param {Record<string, any[]>} modeStyles
-   */
-  function appendPaletteModeStyles(node, modeStyles) {
-    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
-      node.properties.push(
-        j.spreadElement(
-          j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
-            j.stringLiteral(mode),
-            j.objectExpression(objectStyles),
-          ]),
-        ),
-      );
-    });
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
-   */
-  function buildProps(node) {
-    const properties = [];
-    const variables = new Set();
-    let isAllEqual = true;
-    let tempNode = { ...node };
-    function assignProperties(_node) {
-      if (_node.type === 'BinaryExpression') {
-        variables.add(getObjectKey(_node.left).name);
-        if (_node.operator === '===') {
-          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
-        } else {
-          isAllEqual = false;
-        }
-      }
-      if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
-        isAllEqual = false;
-        variables.add(getObjectKey(_node).name);
-      }
-      if (_node.type === 'UnaryExpression') {
-        isAllEqual = false;
-        if (_node.argument.type === 'UnaryExpression') {
-          // handle `!!variable`
-          variables.add(getObjectKey(_node.argument.argument).name);
-        } else {
-          // handle `!variable`
-          variables.add(getObjectKey(_node.argument).name);
-        }
-      }
-    }
-    let counter = 0;
-    if (tempNode.type !== 'LogicalExpression') {
-      assignProperties(tempNode);
-    } else {
-      while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) {
-        counter += 1;
-        if (tempNode.operator !== '&&') {
-          isAllEqual = false;
-        }
-
-        assignProperties(tempNode.right);
-        if (tempNode.left.type !== 'LogicalExpression') {
-          assignProperties(tempNode.left);
-          break;
-        }
-
-        tempNode = { ...tempNode.left };
-      }
-    }
-
-    if (!isAllEqual) {
-      return buildArrowFunctionAST(variables, node);
-    }
-    return j.objectExpression(properties);
-  }
-
-  function mergeProps(parentProps, currentProps) {
-    if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') {
-      return j.objectExpression([...parentProps.properties, ...currentProps.properties]);
-    }
-    const parentArrow =
-      parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps;
-    const currentArrow =
-      currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
-    const variables = new Set();
-    [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => {
-      variables.add(param.key.name);
-    });
-    return buildArrowFunctionAST(
-      variables,
-      j.logicalExpression('&&', parentArrow.body, currentArrow.body),
-    );
-  }
-
-  function isThemePaletteMode(node) {
-    return (
-      node.type === 'MemberExpression' &&
-      node.object.type === 'MemberExpression' &&
-      node.object.object.name === 'theme' &&
-      node.object.property.name === 'palette' &&
-      node.property.name === 'mode'
-    );
-  }
-
   let shouldTransform = false;
 
   root.find(j.CallExpression).forEach((path) => {
@@ -285,283 +48,7 @@ export default function styledV6(file, api, options) {
       shouldTransform = true;
     }
 
-    // 2. Find logical spread expressions to convert to variants
-    styles.forEach((style) => {
-      const parameters = new Set();
-      style.params.forEach((param) => {
-        if (param.type === 'ObjectPattern') {
-          param.properties.forEach((prop) => {
-            parameters.add(prop.key.name);
-          });
-        }
-      });
-      const variants = [];
-
-      if (style.body.type === 'LogicalExpression') {
-        if (
-          style.params[0] &&
-          style.params[0].type === 'ObjectPattern' &&
-          style.params[0].properties.some((prop) => prop.key.name !== 'theme')
-        ) {
-          // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
-          style.body = j.objectExpression([
-            j.objectProperty(
-              j.identifier('variants'),
-              j.arrayExpression([
-                j.objectExpression([
-                  j.objectProperty(j.identifier('props'), buildProps(style.body.left)),
-                  j.objectProperty(j.identifier('style'), style.body.right),
-                ]),
-              ]),
-            ),
-          ]);
-        }
-      } else if (style.body.type === 'ConditionalExpression') {
-        // skip ConditionalExpression
-      } else {
-        let objectExpression = style.body;
-        let counter = 0;
-        while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
-          counter += 1;
-          if (objectExpression.type === 'BlockStatement') {
-            objectExpression = objectExpression.body.find(
-              (item) => item.type === 'ReturnStatement',
-            ).argument;
-          }
-        }
-
-        recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() });
-
-        if (variants.length) {
-          objectExpression.properties.push(
-            j.objectProperty(
-              j.identifier('variants'),
-              j.arrayExpression(
-                variants.filter((variant) => {
-                  const props = variant.properties.find((prop) => prop.key.name === 'props');
-                  const styleVal = variant.properties.find((prop) => prop.key.name === 'style');
-                  return (
-                    props &&
-                    styleVal &&
-                    (!styleVal.value.properties || styleVal.value.properties.length > 0) &&
-                    (props.value.type === 'ArrowFunctionExpression' ||
-                      props.value.properties.length > 0)
-                  );
-                }),
-              ),
-            ),
-          );
-        }
-      }
-
-      function recurseObjectExpression(data) {
-        if (data.node.type === 'ObjectExpression') {
-          const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
-          data.node.properties.forEach((prop) => {
-            if (prop.type === 'ObjectProperty') {
-              recurseObjectExpression({
-                ...data,
-                node: prop.value,
-                parentNode: data.node,
-                key: prop.key,
-                buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                replaceValue: (newValue) => {
-                  prop.value = newValue;
-                },
-                modeStyles,
-              });
-            } else {
-              recurseObjectExpression({
-                ...data,
-                node: prop,
-                parentNode: data.node,
-                buildStyle: createBuildStyle(prop.key, data.buildStyle),
-              });
-            }
-          });
-          appendPaletteModeStyles(data.node, modeStyles);
-        }
-        if (data.node.type === 'SpreadElement') {
-          if (data.node.argument.type === 'LogicalExpression') {
-            const paramName = getObjectKey(data.node.argument.left)?.name;
-            if (paramName && (paramName === 'theme' || !parameters.has(paramName))) {
-              return;
-            }
-
-            const scopeProps = buildProps(data.node.argument.left);
-            const variant = {
-              props: data.props ? mergeProps(data.props, scopeProps) : scopeProps,
-              style: data.node.argument.right,
-            };
-
-            const lastLength = variants.push({}); // preserve the order of the recursive calls
-
-            const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
-            if (variant.style.type === 'ObjectExpression') {
-              variant.style.properties.forEach((prop) => {
-                if (prop.type === 'ObjectProperty') {
-                  recurseObjectExpression({
-                    ...data,
-                    node: prop.value,
-                    parentNode: variant.style,
-                    props: variant.props,
-                    key: prop.key,
-                    buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                    replaceValue: (newValue) => {
-                      prop.value = newValue;
-                    },
-                    modeStyles,
-                  });
-                } else {
-                  recurseObjectExpression({
-                    ...data,
-                    node: prop,
-                    parentNode: variant.style,
-                    props: variant.props,
-                    buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                  });
-                }
-              });
-            }
-            appendPaletteModeStyles(variant.style, modeStyles);
-            variant.style = data.buildStyle(variant.style);
-            variants[lastLength - 1] = buildObjectAST(variant);
-            removeProperty(data.parentNode, data.node);
-          }
-          if (data.node.argument.type === 'ConditionalExpression') {
-            recurseObjectExpression({
-              ...data,
-              node: data.node.argument,
-              parentNode: data.node,
-            });
-            removeProperty(data.parentNode, data.node);
-          }
-        }
-        if (data.node.type === 'ConditionalExpression') {
-          if (
-            data.node.test.type === 'BinaryExpression' ||
-            data.node.test.type === 'UnaryExpression' ||
-            data.node.test.type === 'Identifier' ||
-            data.node.test.type === 'MemberExpression'
-          ) {
-            let leftName = getObjectKey(data.node.test)?.name;
-            if (data.node.test.left) {
-              leftName = getObjectKey(data.node.test.left)?.name;
-            }
-            if (data.node.test.argument) {
-              leftName = getObjectKey(data.node.test.argument)?.name;
-            }
-            if (parameters.has(leftName) && leftName !== 'theme') {
-              let props = buildProps(data.node.test);
-              if (data.props) {
-                props = mergeProps(data.props, props);
-              }
-              const styleVal = data.buildStyle(data.node.consequent);
-              const variant = {
-                props,
-                style: styleVal,
-              };
-              variants.push(buildObjectAST(variant));
-
-              // create another variant with inverted condition
-              let props2 = buildProps(inverseBinaryExpression(data.node.test));
-              if (data.props) {
-                props2 = mergeProps(data.props, props2);
-              }
-              const styleVal2 = data.buildStyle(data.node.alternate);
-              const variant2 = {
-                props: props2,
-                style: styleVal2,
-              };
-              variants.push(buildObjectAST(variant2));
-              if (data.parentNode?.type === 'ObjectExpression') {
-                removeProperty(data.parentNode, data.node);
-              }
-            }
-            if (
-              leftName === 'theme' &&
-              data.parentNode?.type === 'ObjectExpression' &&
-              data.node.test?.type === 'BinaryExpression' &&
-              isThemePaletteMode(data.node.test.left)
-            ) {
-              if (
-                data.node.consequent.type !== 'ObjectExpression' &&
-                data.node.alternate.type !== 'ObjectExpression'
-              ) {
-                if (data.modeStyles) {
-                  if (!data.modeStyles[data.node.test.right.value]) {
-                    data.modeStyles[data.node.test.right.value] = [];
-                  }
-                  data.modeStyles[data.node.test.right.value].push(
-                    j.objectProperty(data.key, data.node.consequent),
-                  );
-                }
-                data.replaceValue?.(data.node.alternate);
-              }
-            }
-          }
-        }
-        if (data.node.type === 'TemplateLiteral') {
-          if (data.parentNode?.type === 'ObjectExpression') {
-            const modeStyles = {};
-            data.node.expressions.forEach((expression, index) => {
-              recurseObjectExpression({
-                ...data,
-                node: expression,
-                parentNode: data.parentNode,
-                buildStyle: createBuildStyle(data.key, data.buildStyle),
-                replaceValue: (newValue) => {
-                  data.node.expressions[index] = newValue;
-                },
-                modeStyles,
-              });
-            });
-            if (data.modeStyles) {
-              Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
-                const clonedNode = {
-                  ...data.node,
-                  expressions: data.node.expressions.map((expression) => ({ ...expression })),
-                };
-                clonedNode.expressions = objectStyles.map((item) => item.value);
-
-                if (!data.modeStyles[mode]) {
-                  data.modeStyles[mode] = [];
-                }
-                data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
-              });
-            }
-          }
-        }
-        if (
-          data.key &&
-          data.key.type === 'Identifier' &&
-          data.node.type === 'MemberExpression' &&
-          data.node.object.type === 'ObjectExpression' &&
-          parameters.has(getObjectKey(data.node.property).name)
-        ) {
-          data.node.object.properties.forEach((prop) => {
-            variants.push(
-              buildObjectAST({
-                props: j.objectExpression([
-                  j.objectProperty(
-                    getIdentifierKey(data.node.property),
-                    j.stringLiteral(prop.key.name),
-                  ),
-                ]),
-                style: data.buildStyle(prop.value),
-              }),
-            );
-          });
-          removeProperty(data.parentNode, data.node);
-        }
-      }
-
-      style.params.forEach((param) => {
-        if (param.type === 'ObjectPattern') {
-          param.properties = param.properties.filter((prop) => prop.key.name === 'theme');
-        }
-      });
-    });
+    migrateToVariants(j, styles);
 
     // Replace arrow function with object expression if the arg properties is empty
     args.forEach((arg, index) => {

From 8000a565ba574e7a5c6a9a2f3afd10ed8db34edc Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 13:58:51 +0700
Subject: [PATCH 05/27] apply migrateToVariant

---
 .../mui-codemod/src/util/migrateToVariants.js |  75 ++-
 .../theme-style-overrides.js                  | 534 +-----------------
 2 files changed, 71 insertions(+), 538 deletions(-)

diff --git a/packages/mui-codemod/src/util/migrateToVariants.js b/packages/mui-codemod/src/util/migrateToVariants.js
index c62ec47bca6cc6..c8508c67b2f2d9 100644
--- a/packages/mui-codemod/src/util/migrateToVariants.js
+++ b/packages/mui-codemod/src/util/migrateToVariants.js
@@ -1,7 +1,22 @@
 const MAX_DEPTH = 20;
-
+/**
+ *
+ * @param {import('jscodeshift').API['j']} j
+ * @param {any[]} styles
+ */
 export default function migrateToVariants(j, styles) {
-  function createBuildStyle(key, upperBuildStyle) {
+  function createBuildStyle(key, upperBuildStyle, applyStylesMode) {
+    if (applyStylesMode) {
+      upperBuildStyle = (styleExpression) =>
+        j.objectExpression([
+          j.spreadElement(
+            j.callExpression(
+              j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')),
+              [j.stringLiteral(applyStylesMode), styleExpression],
+            ),
+          ),
+        ]);
+    }
     return function buildStyle(styleExpression) {
       if (key) {
         if (key.type === 'Identifier' || key.type === 'StringLiteral') {
@@ -136,7 +151,7 @@ export default function migrateToVariants(j, styles) {
   /**
    *
    * @param {{ properties: any[] }} node
-   * @param {Record<string, any[]>} modeStyles
+   * @param {Record<string, any[] | import('ast-types').namedTypes.ObjectExpression>} modeStyles
    */
   function appendPaletteModeStyles(node, modeStyles) {
     Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
@@ -144,7 +159,7 @@ export default function migrateToVariants(j, styles) {
         j.spreadElement(
           j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
             j.stringLiteral(mode),
-            j.objectExpression(objectStyles),
+            Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles,
           ]),
         ),
       );
@@ -336,8 +351,42 @@ export default function migrateToVariants(j, styles) {
       }
       if (data.node.type === 'SpreadElement') {
         if (data.node.argument.type === 'LogicalExpression') {
-          const paramName = getObjectKey(data.node.argument.left)?.name;
-          if (paramName && (paramName === 'theme' || !parameters.has(paramName))) {
+          const paramName =
+            data.node.argument.left.type === 'BinaryExpression'
+              ? getObjectKey(data.node.argument.left.left)?.name
+              : getObjectKey(data.node.argument.left)?.name;
+          if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') {
+            if (data.node.argument.right.type === 'ObjectExpression') {
+              const mode = data.node.argument.left.right.value;
+              data.node.argument.right.properties.forEach((prop) => {
+                if (prop.type === 'ObjectProperty') {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop.value,
+                    parentNode: data.node.argument.right,
+                    key: prop.key,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                    replaceValue: (newValue) => {
+                      prop.value = newValue;
+                    },
+                  });
+                } else {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop,
+                    parentNode: data.node.argument.right,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                  });
+                }
+              });
+              appendPaletteModeStyles(data.parentNode, {
+                [mode]: data.node.argument.right,
+              });
+            }
+            removeProperty(data.parentNode, data.node);
+            return;
+          }
+          if (paramName && !parameters.has(paramName)) {
             return;
           }
 
@@ -514,5 +563,19 @@ export default function migrateToVariants(j, styles) {
         param.properties = param.properties.filter((prop) => prop.key.name === 'theme');
       }
     });
+
+    if (style.body.type === 'ObjectExpression') {
+      // Remove empty `...theme.applyStyles('...', {})`
+      style.body.properties = style.body.properties.filter((prop) => {
+        if (
+          prop.argument?.callee?.object?.name === 'theme' &&
+          typeof prop.argument?.arguments[0]?.value === 'string' &&
+          !prop.argument?.arguments?.[1]?.properties?.length
+        ) {
+          return false;
+        }
+        return true;
+      });
+    }
   });
 }
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
index 7ebe5a69916536..f9133d0267474e 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
@@ -1,4 +1,4 @@
-const MAX_DEPTH = 20;
+import migrateToVariants from '../../util/migrateToVariants';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -9,243 +9,6 @@ export default function styledV6(file, api, options) {
   const root = j(file.source);
   const printOptions = options.printOptions;
 
-  function createBuildStyle(key, upperBuildStyle) {
-    return function buildStyle(styleExpression) {
-      if (key) {
-        if (key.type === 'Identifier' || key.type === 'StringLiteral') {
-          return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
-        }
-        if (key.type === 'TemplateLiteral') {
-          return upperBuildStyle(
-            j.objectExpression([
-              {
-                ...j.objectProperty(key, styleExpression),
-                computed: true,
-              },
-            ]),
-          );
-        }
-      }
-      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
-    };
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getIdentifierKey(node) {
-    if (node.type === 'MemberExpression') {
-      return node.property;
-    }
-    return node;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getObjectKey(node) {
-    let tempNode = { ...node };
-    while (tempNode.type === 'UnaryExpression') {
-      tempNode = tempNode.argument;
-    }
-    while (tempNode.type === 'MemberExpression') {
-      tempNode = tempNode.object;
-    }
-    return tempNode;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
-   * @param {import('ast-types').namedTypes.BinaryExpression} addtional
-   */
-  function objectToArrowFunction(objectExpression, addtional) {
-    const paramKeys = new Set();
-    let left;
-    objectExpression.properties.forEach((prop, index) => {
-      paramKeys.add(prop.key.name);
-      const result = j.binaryExpression('===', prop.key, prop.value);
-      if (index === 0) {
-        left = result;
-      } else {
-        left = j.logicalExpression('&&', left, result);
-      }
-    });
-    if (addtional) {
-      paramKeys.add(getObjectKey(addtional.left).name);
-    }
-    return buildArrowFunctionAST(
-      paramKeys,
-      addtional ? j.logicalExpression('&&', left, addtional) : left,
-    );
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node
-   */
-  function inverseBinaryExpression(node) {
-    if (node.type === 'Identifier') {
-      return j.unaryExpression('!', node);
-    }
-    if (node.operator === '===') {
-      return { ...node, operator: '!==' };
-    }
-    if (node.operator === '!==') {
-      return { ...node, operator: '===' };
-    }
-    if (node.operator === '!') {
-      if (node.argument?.operator === '!') {
-        return node.argument;
-      }
-      return j.unaryExpression('!', node);
-    }
-    return node;
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} node
-   */
-  function removeProperty(parentNode, child) {
-    if (parentNode) {
-      if (parentNode.type === 'ObjectExpression') {
-        parentNode.properties = parentNode.properties.filter(
-          (prop) => prop !== child && prop.value !== child,
-        );
-      }
-    }
-  }
-
-  function buildObjectAST(jsObject) {
-    const result = j.objectExpression([]);
-    Object.entries(jsObject).forEach(([key, value]) => {
-      result.properties.push(j.objectProperty(j.identifier(key), value));
-    });
-    return result;
-  }
-
-  function buildArrowFunctionAST(params, body) {
-    return j.arrowFunctionExpression(
-      [
-        j.objectPattern(
-          [...params].map((k) => ({
-            ...j.objectProperty(j.identifier(k), j.identifier(k)),
-            shorthand: true,
-          })),
-        ),
-      ],
-      body,
-    );
-  }
-
-  /**
-   *
-   * @param {{ properties: any[] }} node
-   * @param {Record<string, any[]>} modeStyles
-   */
-  function appendPaletteModeStyles(node, modeStyles) {
-    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
-      node.properties.push(
-        j.spreadElement(
-          j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
-            j.stringLiteral(mode),
-            j.objectExpression(objectStyles),
-          ]),
-        ),
-      );
-    });
-  }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
-   */
-  function buildProps(node) {
-    const properties = [];
-    const variables = new Set();
-    let isAllEqual = true;
-    let tempNode = { ...node };
-    function assignProperties(_node) {
-      if (_node.type === 'BinaryExpression') {
-        variables.add(getObjectKey(_node.left).name);
-        if (_node.operator === '===') {
-          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
-        } else {
-          isAllEqual = false;
-        }
-      }
-      if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
-        isAllEqual = false;
-        variables.add(getObjectKey(_node).name);
-      }
-      if (_node.type === 'UnaryExpression') {
-        isAllEqual = false;
-        if (_node.argument.type === 'UnaryExpression') {
-          // handle `!!variable`
-          variables.add(getObjectKey(_node.argument.argument).name);
-        } else {
-          // handle `!variable`
-          variables.add(getObjectKey(_node.argument).name);
-        }
-      }
-    }
-    let counter = 0;
-    if (tempNode.type !== 'LogicalExpression') {
-      assignProperties(tempNode);
-    } else {
-      while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) {
-        counter += 1;
-        if (tempNode.operator !== '&&') {
-          isAllEqual = false;
-        }
-
-        assignProperties(tempNode.right);
-        if (tempNode.left.type !== 'LogicalExpression') {
-          assignProperties(tempNode.left);
-          break;
-        }
-
-        tempNode = { ...tempNode.left };
-      }
-    }
-
-    if (!isAllEqual) {
-      return buildArrowFunctionAST(variables, node);
-    }
-    return j.objectExpression(properties);
-  }
-
-  function mergeProps(parentProps, currentProps) {
-    if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') {
-      return j.objectExpression([...parentProps.properties, ...currentProps.properties]);
-    }
-    const parentArrow =
-      parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps;
-    const currentArrow =
-      currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
-    const variables = new Set();
-    [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => {
-      variables.add(param.key.name);
-    });
-    return buildArrowFunctionAST(
-      variables,
-      j.logicalExpression('&&', parentArrow.body, currentArrow.body),
-    );
-  }
-
-  function isThemePaletteMode(node) {
-    return (
-      node.type === 'MemberExpression' &&
-      node.object.type === 'MemberExpression' &&
-      node.object.object.name === 'theme' &&
-      node.object.property.name === 'palette' &&
-      node.property.name === 'mode'
-    );
-  }
-
   let shouldTransform = false;
 
   root.find(j.ArrowFunctionExpression).forEach((path) => {
@@ -271,300 +34,7 @@ export default function styledV6(file, api, options) {
       shouldTransform = true;
     }
 
-    // 2. Find logical spread expressions to convert to variants
-    styles.forEach((style) => {
-      const parameters = new Set();
-      style.params.forEach((param) => {
-        if (param.type === 'ObjectPattern') {
-          param.properties.forEach((prop) => {
-            parameters.add(prop.key.name);
-          });
-        }
-      });
-      const variants = [];
-
-      if (style.body.type === 'LogicalExpression') {
-        if (
-          style.params[0] &&
-          style.params[0].type === 'ObjectPattern' &&
-          style.params[0].properties.some((prop) => prop.key.name !== 'theme')
-        ) {
-          // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
-          style.body = j.objectExpression([
-            j.objectProperty(
-              j.identifier('variants'),
-              j.arrayExpression([
-                j.objectExpression([
-                  j.objectProperty(j.identifier('props'), buildProps(style.body.left)),
-                  j.objectProperty(j.identifier('style'), style.body.right),
-                ]),
-              ]),
-            ),
-          ]);
-        }
-      } else if (style.body.type === 'ConditionalExpression') {
-        // skip ConditionalExpression
-      } else {
-        let objectExpression = style.body;
-        let counter = 0;
-        while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
-          counter += 1;
-          if (objectExpression.type === 'BlockStatement') {
-            objectExpression = objectExpression.body.find(
-              (item) => item.type === 'ReturnStatement',
-            ).argument;
-          }
-        }
-
-        recurseObjectExpression({ node: objectExpression, buildStyle: createBuildStyle() });
-
-        if (variants.length) {
-          objectExpression.properties.push(
-            j.objectProperty(
-              j.identifier('variants'),
-              j.arrayExpression(
-                variants.filter((variant) => {
-                  const props = variant.properties.find((prop) => prop.key.name === 'props');
-                  const styleVal = variant.properties.find((prop) => prop.key.name === 'style');
-                  return (
-                    props &&
-                    styleVal &&
-                    styleVal.value.properties.length > 0 &&
-                    (props.value.type === 'ArrowFunctionExpression' ||
-                      props.value.properties.length > 0)
-                  );
-                }),
-              ),
-            ),
-          );
-        }
-      }
-
-      function recurseObjectExpression(data) {
-        if (data.node.type === 'ObjectExpression') {
-          const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
-          data.node.properties.forEach((prop) => {
-            if (prop.type === 'ObjectProperty') {
-              recurseObjectExpression({
-                ...data,
-                node: prop.value,
-                parentNode: data.node,
-                key: prop.key,
-                buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                replaceValue: (newValue) => {
-                  prop.value = newValue;
-                },
-                modeStyles,
-              });
-            } else {
-              recurseObjectExpression({
-                ...data,
-                node: prop,
-                parentNode: data.node,
-                buildStyle: createBuildStyle(prop.key, data.buildStyle),
-              });
-            }
-          });
-          appendPaletteModeStyles(data.node, modeStyles);
-        }
-        if (data.node.type === 'SpreadElement') {
-          if (data.node.argument.type === 'LogicalExpression') {
-            const paramName = getObjectKey(data.node.argument.left)?.name;
-            if (paramName && !parameters.has(paramName)) {
-              return;
-            }
-
-            const scopeProps = buildProps(data.node.argument.left);
-            const variant = {
-              props: data.props ? mergeProps(data.props, scopeProps) : scopeProps,
-              style: data.node.argument.right,
-            };
-
-            const lastLength = variants.push({}); // preserve the order of the recursive calls
-
-            const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
-            variant.style.properties.forEach((prop) => {
-              if (prop.type === 'ObjectProperty') {
-                recurseObjectExpression({
-                  ...data,
-                  node: prop.value,
-                  parentNode: variant.style,
-                  props: variant.props,
-                  key: prop.key,
-                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                  replaceValue: (newValue) => {
-                    prop.value = newValue;
-                  },
-                  modeStyles,
-                });
-              } else {
-                recurseObjectExpression({
-                  ...data,
-                  node: prop,
-                  parentNode: variant.style,
-                  props: variant.props,
-                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                });
-              }
-            });
-            appendPaletteModeStyles(variant.style, modeStyles);
-            variant.style = data.buildStyle(variant.style);
-            variants[lastLength - 1] = buildObjectAST(variant);
-            removeProperty(data.parentNode, data.node);
-          }
-          if (data.node.argument.type === 'ConditionalExpression') {
-            recurseObjectExpression({
-              ...data,
-              node: data.node.argument,
-              parentNode: data.node,
-            });
-            removeProperty(data.parentNode, data.node);
-          }
-        }
-        if (data.node.type === 'ConditionalExpression') {
-          if (
-            data.node.test.type === 'BinaryExpression' ||
-            data.node.test.type === 'UnaryExpression' ||
-            data.node.test.type === 'Identifier'
-          ) {
-            let leftName = getObjectKey(data.node.test)?.name;
-            if (data.node.test.left) {
-              leftName = getObjectKey(data.node.test.left)?.name;
-            }
-            if (data.node.test.argument) {
-              leftName = getObjectKey(data.node.test.argument)?.name;
-            }
-            if (parameters.has(leftName) && leftName !== 'theme') {
-              let props = buildProps(data.node.test);
-              if (data.props) {
-                props = mergeProps(data.props, props);
-              }
-              const styleVal = data.buildStyle(data.node.consequent);
-              const variant = {
-                props,
-                style: styleVal,
-              };
-              variants.push(buildObjectAST(variant));
-
-              // create another variant with inverted condition
-              let props2 = buildProps(inverseBinaryExpression(data.node.test));
-              if (data.props) {
-                props2 = mergeProps(data.props, props2);
-              }
-              const styleVal2 = data.buildStyle(data.node.alternate);
-              const variant2 = {
-                props: props2,
-                style: styleVal2,
-              };
-              variants.push(buildObjectAST(variant2));
-              if (data.parentNode?.type === 'ObjectExpression') {
-                removeProperty(data.parentNode, data.node);
-              }
-            }
-            if (
-              leftName === 'theme' &&
-              data.parentNode?.type === 'ObjectExpression' &&
-              data.node.test?.type === 'BinaryExpression' &&
-              isThemePaletteMode(data.node.test.left)
-            ) {
-              if (
-                data.node.consequent.type !== 'ObjectExpression' &&
-                data.node.alternate.type !== 'ObjectExpression'
-              ) {
-                if (data.modeStyles) {
-                  if (!data.modeStyles[data.node.test.right.value]) {
-                    data.modeStyles[data.node.test.right.value] = [];
-                  }
-                  data.modeStyles[data.node.test.right.value].push(
-                    j.objectProperty(data.key, data.node.consequent),
-                  );
-                }
-                data.replaceValue?.(data.node.alternate);
-              }
-            }
-          }
-        }
-        if (data.node.type === 'TemplateLiteral') {
-          if (data.parentNode?.type === 'ObjectExpression') {
-            const modeStyles = {};
-            data.node.expressions.forEach((expression, index) => {
-              recurseObjectExpression({
-                ...data,
-                node: expression,
-                parentNode: data.parentNode,
-                buildStyle: createBuildStyle(data.key, data.buildStyle),
-                replaceValue: (newValue) => {
-                  data.node.expressions[index] = newValue;
-                },
-                modeStyles,
-              });
-            });
-            if (data.modeStyles) {
-              Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
-                const clonedNode = {
-                  ...data.node,
-                  expressions: data.node.expressions.map((expression) => ({ ...expression })),
-                };
-                clonedNode.expressions = objectStyles.map((item) => item.value);
-
-                if (!data.modeStyles[mode]) {
-                  data.modeStyles[mode] = [];
-                }
-                data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
-              });
-            }
-          }
-        }
-        if (
-          data.key &&
-          data.key.type === 'Identifier' &&
-          data.node.type === 'MemberExpression' &&
-          data.node.object.type === 'ObjectExpression' &&
-          parameters.has(getObjectKey(data.node.property).name)
-        ) {
-          data.node.object.properties.forEach((prop) => {
-            variants.push(
-              buildObjectAST({
-                props: j.objectExpression([
-                  j.objectProperty(
-                    getIdentifierKey(data.node.property),
-                    j.stringLiteral(prop.key.name),
-                  ),
-                ]),
-                style: data.buildStyle(prop.value),
-              }),
-            );
-          });
-          removeProperty(data.parentNode, data.node);
-        }
-      }
-
-      style.params.forEach((param) => {
-        if (param.type === 'ObjectPattern') {
-          param.properties = param.properties.filter((prop) => prop.key.name === 'theme');
-        }
-      });
-    });
-
-    // Replace arrow function with object expression if the arg properties is empty
-    args.forEach((arg, index) => {
-      if (
-        arg.type === 'ArrowFunctionExpression' &&
-        arg.params[0] &&
-        arg.params[0].type === 'ObjectPattern' &&
-        arg.params[0].properties.length === 0
-      ) {
-        if (arg.body.type === 'ObjectExpression') {
-          args[index] = arg.body;
-        }
-        if (arg.body.type === 'BlockStatement') {
-          const returnStatement = arg.body.body.find((item) => item.type === 'ReturnStatement');
-          if (returnStatement) {
-            args[index] = returnStatement.argument;
-          }
-        }
-      }
-    });
+    migrateToVariants(j, styles);
   });
 
   const transformed = root.toSource(printOptions);

From 473266d14411366527845ed2f25c60827edff575 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 14:48:09 +0700
Subject: [PATCH 06/27] add test case

---
 .../test-cases/basicTheme.actual.js           | 513 +++++++++++++++
 .../test-cases/basicTheme.expected.js         | 603 ++++++++++++++++++
 .../theme-style-overrides.test.js             |   8 +-
 3 files changed, 1120 insertions(+), 4 deletions(-)
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.actual.js
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.expected.js

diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.actual.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.actual.js
new file mode 100644
index 00000000000000..05d986c8e991e3
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.actual.js
@@ -0,0 +1,513 @@
+export default function getCheckoutTheme(mode) {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiAlert: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: 10,
+            backgroundColor: orange[100],
+            color: theme.palette.text.primary,
+            border: `1px solid ${alpha(orange[300], 0.5)}`,
+            '& .MuiAlert-icon': {
+              color: orange[500],
+            },
+            ...(theme.palette.mode === 'dark' && {
+              backgroundColor: `${alpha(orange[900], 0.5)}`,
+              border: `1px solid ${alpha(orange[800], 0.5)}`,
+            }),
+          }),
+        },
+      },
+      MuiButtonBase: {
+        defaultProps: {
+          disableTouchRipple: true,
+          disableRipple: true,
+        },
+        styleOverrides: {
+          root: {
+            boxSizing: 'border-box',
+            transition: 'all 100ms ease',
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(brand[400], 0.5)}`,
+              outlineOffset: '2px',
+            },
+          },
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            boxShadow: 'none',
+            borderRadius: theme.shape.borderRadius,
+            textTransform: 'none',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
+              },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
+              },
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.3),
+                  },
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[700], 0.3),
+                  },
+                }),
+            }),
+          }),
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            transition: 'all 100ms ease',
+            backgroundColor: gray[50],
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${alpha(gray[200], 0.5)}`,
+            boxShadow: 'none',
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
+              backgroundColor: alpha(gray[800], 0.6),
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(gray[800], 0.5)})`,
+              }),
+            }),
+          }),
+        },
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          disableRipple: true,
+          icon: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />,
+          checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            margin: 10,
+            height: 16,
+            width: 16,
+            borderRadius: 5,
+            border: '1px solid ',
+            borderColor: alpha(gray[300], 0.8),
+            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
+            transition: 'border-color 120ms ease-in',
+            backgroundColor: alpha(gray[100], 0.4),
+            '&:hover': {
+              borderColor: brand[300],
+            },
+            '&.Mui-focusVisible': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              borderColor: brand[400],
+            },
+            '&.Mui-checked': {
+              color: 'white',
+              backgroundColor: brand[500],
+              borderColor: brand[500],
+              boxShadow: `none`,
+              '&:hover': {
+                backgroundColor: brand[600],
+              },
+            },
+            ...(theme.palette.mode === 'dark' && {
+              borderColor: alpha(gray[700], 0.5),
+              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+              backgroundColor: alpha(gray[900], 0.8),
+              '&:hover': {
+                borderColor: brand[300],
+              },
+              '&.Mui-focusVisible': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+            }),
+          }),
+        },
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderColor: `${alpha(gray[200], 0.8)}`,
+            ...(theme.palette.mode === 'dark' && {
+              borderColor: `${alpha(gray[700], 0.4)}`,
+            }),
+          }),
+        },
+      },
+      MuiFormLabel: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            typography: theme.typography.caption,
+            marginBottom: 8,
+          }),
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
+            color: brand[500],
+            '&:hover': {
+              backgroundColor: alpha(brand[300], 0.3),
+              borderColor: brand[200],
+            },
+            ...(theme.palette.mode === 'dark' && {
+              color: brand[200],
+              '&:hover': {
+                backgroundColor: alpha(brand[600], 0.3),
+                borderColor: brand[700],
+              },
+            }),
+          }),
+        },
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            border: 'none',
+          },
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: 'none',
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: brand[700],
+            fontWeight: 500,
+            position: 'relative',
+            textDecoration: 'none',
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              width: 0,
+              height: '1px',
+              bottom: 0,
+              left: 0,
+              backgroundColor: brand[200],
+              opacity: 0.7,
+              transition: 'width 0.3s ease, opacity 0.3s ease',
+            },
+            '&:hover::before': {
+              width: '100%',
+              opacity: 1,
+            },
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '4px',
+              borderRadius: '2px',
+            },
+            ...(theme.palette.mode === 'dark' && {
+              color: brand[200],
+            }),
+          }),
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          notchedOutline: {
+            border: 'none',
+          },
+          input: {
+            paddingLeft: 10,
+          },
+          root: ({ theme, ownerState }) => ({
+            'input:-webkit-autofill': {
+              WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
+              maxHeight: '4px',
+              borderRadius: '8px',
+            },
+            '& .MuiInputBase-input': {
+              fontSize: '1rem',
+              '&::placeholder': {
+                opacity: 0.7,
+                color: gray[500],
+              },
+            },
+            boxSizing: 'border-box',
+            flexGrow: 1,
+            height: '40px',
+            borderRadius: theme.shape.borderRadius,
+            border: '1px solid',
+            borderColor: alpha(gray[300], 0.8),
+            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset',
+            transition: 'border-color 120ms ease-in',
+            backgroundColor: alpha(gray[100], 0.4),
+            '&:hover': {
+              borderColor: brand[300],
+            },
+            '&.Mui-focused': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              borderColor: brand[400],
+            },
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
+              'input:-webkit-autofill': {
+                WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
+                maxHeight: '6px',
+                borderRadius: '8px',
+              },
+              '& .MuiInputBase-input': {
+                fontSize: '1rem',
+                '&::placeholder': {
+                  opacity: 1,
+                  color: gray[500],
+                },
+              },
+              borderColor: alpha(gray[700], 0.5),
+              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+              backgroundColor: alpha(gray[900], 0.8),
+              transition: 'border-color 120ms ease-in',
+              '&:hover': {
+                borderColor: brand[300],
+              },
+              '&.Mui-focused': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
+                },
+              }),
+            }),
+          }),
+        },
+      },
+      MuiPaper: {
+        defaultProps: {
+          elevation: 0,
+        },
+      },
+      MuiStack: {
+        defaultProps: {
+          useFlexGap: true,
+        },
+      },
+      MuiStepConnector: {
+        styleOverrides: {
+          line: ({ theme }) => ({
+            borderTop: '1px solid',
+            borderColor: theme.palette.divider,
+            flex: 1,
+            borderRadius: '99px',
+          }),
+        },
+      },
+      MuiStepIcon: {
+        variants: [
+          {
+            props: { completed: true },
+            style: () => ({
+              width: 12,
+              height: 12,
+            }),
+          },
+        ],
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: 'transparent',
+            border: `1px solid ${gray[400]}`,
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            '& text': {
+              display: 'none',
+            },
+            '&.Mui-active': {
+              border: 'none',
+              color: theme.palette.primary.main,
+            },
+            '&.Mui-completed': {
+              border: 'none',
+              color: theme.palette.success.main,
+            },
+            ...(theme.palette.mode === 'dark' && {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light,
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light,
+              },
+            }),
+          }),
+        },
+      },
+      MuiStepLabel: {
+        styleOverrides: {
+          label: ({ theme }) => ({
+            '&.Mui-completed': {
+              opacity: 0.6,
+              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
+            },
+          }),
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`,
+            '& .Mui-selected': {
+              color: brand[500],
+            },
+            ...(theme.palette.mode === 'dark' && {
+              '& .Mui-selected': {
+                color: 'hsl(0, 0%, 100%)',
+              },
+              boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`,
+            }),
+          }),
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: '12px 16px',
+            textTransform: 'none',
+            borderRadius: theme.shape.borderRadius,
+            fontWeight: 500,
+            ...(theme.palette.mode === 'dark' && {
+              color: gray[400],
+              '&.Mui-selected': { color: brand[300] },
+            }),
+          }),
+        },
+      },
+    },
+  };
+}
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.expected.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.expected.js
new file mode 100644
index 00000000000000..d554705aaca41e
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.expected.js
@@ -0,0 +1,603 @@
+export default function getCheckoutTheme(mode) {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiAlert: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: 10,
+            backgroundColor: orange[100],
+            color: theme.palette.text.primary,
+            border: `1px solid ${alpha(orange[300], 0.5)}`,
+            '& .MuiAlert-icon': {
+              color: orange[500],
+            },
+            ...theme.applyStyles("dark", {
+              backgroundColor: `${alpha(orange[900], 0.5)}`,
+              border: `1px solid ${alpha(orange[800], 0.5)}`,
+            }),
+          }),
+        },
+      },
+      MuiButtonBase: {
+        defaultProps: {
+          disableTouchRipple: true,
+          disableRipple: true,
+        },
+        styleOverrides: {
+          root: {
+            boxSizing: 'border-box',
+            transition: 'all 100ms ease',
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(brand[400], 0.5)}`,
+              outlineOffset: '2px',
+            },
+          },
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: ({
+            theme
+          }) => ({
+            boxShadow: 'none',
+            borderRadius: theme.shape.borderRadius,
+            textTransform: 'none',
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
+          }),
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({
+            theme
+          }) => ({
+            transition: 'all 100ms ease',
+            backgroundColor: gray[50],
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${alpha(gray[200], 0.5)}`,
+            boxShadow: 'none',
+            ...theme.applyStyles("dark", {
+              backgroundColor: alpha(gray[800], 0.6),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
+            }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(gray[800], 0.5)})`,
+                })
+              }
+            }]
+          }),
+        },
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          disableRipple: true,
+          icon: <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />,
+          checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            margin: 10,
+            height: 16,
+            width: 16,
+            borderRadius: 5,
+            border: '1px solid ',
+            borderColor: alpha(gray[300], 0.8),
+            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
+            transition: 'border-color 120ms ease-in',
+            backgroundColor: alpha(gray[100], 0.4),
+            '&:hover': {
+              borderColor: brand[300],
+            },
+            '&.Mui-focusVisible': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              borderColor: brand[400],
+            },
+            '&.Mui-checked': {
+              color: 'white',
+              backgroundColor: brand[500],
+              borderColor: brand[500],
+              boxShadow: `none`,
+              '&:hover': {
+                backgroundColor: brand[600],
+              },
+            },
+            ...theme.applyStyles("dark", {
+              borderColor: alpha(gray[700], 0.5),
+              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+              backgroundColor: alpha(gray[900], 0.8),
+              '&:hover': {
+                borderColor: brand[300],
+              },
+              '&.Mui-focusVisible': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+            }),
+          }),
+        },
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderColor: `${alpha(gray[200], 0.8)}`,
+            ...theme.applyStyles("dark", {
+              borderColor: `${alpha(gray[700], 0.4)}`,
+            }),
+          }),
+        },
+      },
+      MuiFormLabel: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            typography: theme.typography.caption,
+            marginBottom: 8,
+          }),
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: ({
+            theme
+          }) => ({
+            color: brand[500],
+            '&:hover': {
+              backgroundColor: alpha(brand[300], 0.3),
+              borderColor: brand[200],
+            },
+            ...theme.applyStyles("dark", {
+              color: brand[200],
+              '&:hover': {
+                backgroundColor: alpha(brand[600], 0.3),
+                borderColor: brand[700],
+              },
+            }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
+          }),
+        },
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            border: 'none',
+          },
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: 'none',
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: brand[700],
+            fontWeight: 500,
+            position: 'relative',
+            textDecoration: 'none',
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              width: 0,
+              height: '1px',
+              bottom: 0,
+              left: 0,
+              backgroundColor: brand[200],
+              opacity: 0.7,
+              transition: 'width 0.3s ease, opacity 0.3s ease',
+            },
+            '&:hover::before': {
+              width: '100%',
+              opacity: 1,
+            },
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '4px',
+              borderRadius: '2px',
+            },
+            ...theme.applyStyles("dark", {
+              color: brand[200],
+            }),
+          }),
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          notchedOutline: {
+            border: 'none',
+          },
+          input: {
+            paddingLeft: 10,
+          },
+          root: ({
+            theme
+          }) => ({
+            'input:-webkit-autofill': {
+              WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
+              maxHeight: '4px',
+              borderRadius: '8px',
+            },
+            '& .MuiInputBase-input': {
+              fontSize: '1rem',
+              '&::placeholder': {
+                opacity: 0.7,
+                color: gray[500],
+              },
+            },
+            boxSizing: 'border-box',
+            flexGrow: 1,
+            height: '40px',
+            borderRadius: theme.shape.borderRadius,
+            border: '1px solid',
+            borderColor: alpha(gray[300], 0.8),
+            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset',
+            transition: 'border-color 120ms ease-in',
+            backgroundColor: alpha(gray[100], 0.4),
+            '&:hover': {
+              borderColor: brand[300],
+            },
+            '&.Mui-focused': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              borderColor: brand[400],
+            },
+            ...theme.applyStyles("dark", {
+              'input:-webkit-autofill': {
+                WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
+                maxHeight: '6px',
+                borderRadius: '8px',
+              },
+              '& .MuiInputBase-input': {
+                fontSize: '1rem',
+                '&::placeholder': {
+                  opacity: 1,
+                  color: gray[500],
+                },
+              },
+              borderColor: alpha(gray[700], 0.5),
+              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+              backgroundColor: alpha(gray[900], 0.8),
+              transition: 'border-color 120ms ease-in',
+              '&:hover': {
+                borderColor: brand[300],
+              },
+              '&.Mui-focused': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
+              },
+              style: {
+                borderColor: red[200],
+                color: red[500],
+                '& + .MuiFormHelperText-root': {
+                  color: red[500],
+                },
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
+          }),
+        },
+      },
+      MuiPaper: {
+        defaultProps: {
+          elevation: 0,
+        },
+      },
+      MuiStack: {
+        defaultProps: {
+          useFlexGap: true,
+        },
+      },
+      MuiStepConnector: {
+        styleOverrides: {
+          line: ({ theme }) => ({
+            borderTop: '1px solid',
+            borderColor: theme.palette.divider,
+            flex: 1,
+            borderRadius: '99px',
+          }),
+        },
+      },
+      MuiStepIcon: {
+        variants: [
+          {
+            props: { completed: true },
+            style: () => ({
+              width: 12,
+              height: 12,
+            }),
+          },
+        ],
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: 'transparent',
+            border: `1px solid ${gray[400]}`,
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            '& text': {
+              display: 'none',
+            },
+            '&.Mui-active': {
+              border: 'none',
+              color: theme.palette.primary.main,
+            },
+            '&.Mui-completed': {
+              border: 'none',
+              color: theme.palette.success.main,
+            },
+            ...theme.applyStyles("dark", {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light,
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light,
+              },
+            }),
+          }),
+        },
+      },
+      MuiStepLabel: {
+        styleOverrides: {
+          label: ({ theme }) => ({
+            '&.Mui-completed': {
+              opacity: 0.6,
+              ...theme.applyStyles("dark", { opacity: 0.5 }),
+            },
+          }),
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`,
+            '& .Mui-selected': {
+              color: brand[500],
+            },
+            ...theme.applyStyles("dark", {
+              '& .Mui-selected': {
+                color: 'hsl(0, 0%, 100%)',
+              },
+              boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`,
+            }),
+          }),
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: '12px 16px',
+            textTransform: 'none',
+            borderRadius: theme.shape.borderRadius,
+            fontWeight: 500,
+            ...theme.applyStyles("dark", {
+              color: gray[400],
+              '&.Mui-selected': { color: brand[300] },
+            }),
+          }),
+        },
+      },
+    },
+  };
+}
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
index b9d7fab07be0fe..7c4ccef3da0bd4 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
@@ -13,23 +13,23 @@ describe('@mui/codemod', () => {
     describe('basic theme-style-overrides', () => {
       it('transforms props as needed', () => {
         const actual = transform(
-          { source: read('./test-cases/BasicStyled.actual.js') },
+          { source: read('./test-cases/basicTheme.actual.js') },
           { jscodeshift },
           {},
         );
 
-        const expected = read('./test-cases/BasicStyled.expected.js');
+        const expected = read('./test-cases/basicTheme.expected.js');
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
 
       it('should be idempotent', () => {
         const actual = transform(
-          { source: read('./test-cases/BasicStyled.expected.js') },
+          { source: read('./test-cases/basicTheme.expected.js') },
           { jscodeshift },
           {},
         );
 
-        const expected = read('./test-cases/BasicStyled.expected.js');
+        const expected = read('./test-cases/basicTheme.expected.js');
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
     });

From 2f424583d0fed933b8725cb6c70d0b273429259d Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 14:56:45 +0700
Subject: [PATCH 07/27] migrate landing page theme

---
 .../templates/landing-page/getLPTheme.js      | 407 +++++++++++-------
 .../templates/landing-page/getLPTheme.tsx     | 407 +++++++++++-------
 2 files changed, 510 insertions(+), 304 deletions(-)

diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
index 8ae6d57199e6fc..3723f03ffcb007 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
@@ -225,7 +225,7 @@ export default function getLPTheme(mode) {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -239,7 +239,7 @@ export default function getLPTheme(mode) {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -268,156 +268,233 @@ export default function getLPTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -443,7 +520,7 @@ export default function getLPTheme(mode) {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -467,7 +544,7 @@ export default function getLPTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -483,27 +560,39 @@ export default function getLPTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -544,7 +633,7 @@ export default function getLPTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -559,7 +648,7 @@ export default function getLPTheme(mode) {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[200],
             }),
           }),
@@ -573,7 +662,7 @@ export default function getLPTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -603,14 +692,7 @@ export default function getLPTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -635,14 +717,35 @@ export default function getLPTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -684,7 +787,7 @@ export default function getLPTheme(mode) {
               height: 16,
               margin: 2,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               width: 36,
               height: 24,
               padding: 0,
@@ -727,7 +830,7 @@ export default function getLPTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -743,7 +846,7 @@ export default function getLPTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
index c513c17f63b408..d4c7065da765d8 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
@@ -244,7 +244,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -258,7 +258,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -287,156 +287,233 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -462,7 +539,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -486,7 +563,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -502,27 +579,39 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -563,7 +652,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -578,7 +667,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[200],
             }),
           }),
@@ -592,7 +681,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -622,14 +711,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -654,14 +736,35 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -703,7 +806,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               height: 16,
               margin: 2,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               width: 36,
               height: 24,
               padding: 0,
@@ -746,7 +849,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -762,7 +865,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 3c620473eefcd0f5b3a83cd8c219e9d1851afed1 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 15:11:38 +0700
Subject: [PATCH 08/27] migrate checkout theme

---
 .../templates/checkout/getCheckoutTheme.js    | 405 +++++++++++-------
 .../templates/checkout/getCheckoutTheme.tsx   | 405 +++++++++++-------
 2 files changed, 508 insertions(+), 302 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
index 300aba317f8cf6..85a246860b4f91 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
@@ -205,7 +205,7 @@ export default function getCheckoutTheme(mode) {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -230,156 +230,233 @@ export default function getCheckoutTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -421,7 +498,7 @@ export default function getCheckoutTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -441,7 +518,7 @@ export default function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -457,27 +534,39 @@ export default function getCheckoutTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -518,7 +607,7 @@ export default function getCheckoutTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -532,7 +621,7 @@ export default function getCheckoutTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -562,14 +651,7 @@ export default function getCheckoutTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -594,14 +676,35 @@ export default function getCheckoutTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -653,7 +756,7 @@ export default function getCheckoutTheme(mode) {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -672,7 +775,7 @@ export default function getCheckoutTheme(mode) {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
+              ...theme.applyStyles('dark', { opacity: 0.5 }),
             },
           }),
         },
@@ -685,7 +788,7 @@ export default function getCheckoutTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -701,7 +804,7 @@ export default function getCheckoutTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
index 89ddbb5ec4c39d..f027a0d7461a96 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
@@ -223,7 +223,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -248,156 +248,233 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -439,7 +516,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -459,7 +536,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -475,27 +552,39 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -536,7 +625,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -550,7 +639,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -580,14 +669,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -612,14 +694,35 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -671,7 +774,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -690,7 +793,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
+              ...theme.applyStyles('dark', { opacity: 0.5 }),
             },
           }),
         },
@@ -703,7 +806,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -719,7 +822,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From ca60151056ac668c13f0895d191e0095e702e618 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 15:11:48 +0700
Subject: [PATCH 09/27] migrate sign-in theme

---
 .../templates/sign-in/getSignInTheme.js       | 399 +++++++++++-------
 .../templates/sign-in/getSignInTheme.tsx      | 384 ++++++++++-------
 2 files changed, 488 insertions(+), 295 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
index 224b3d9596dd45..f3072d497aebae 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
@@ -213,155 +213,232 @@ export default function getSignInTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${alpha(gray[200], 0.5)}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.2)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${alpha(gray[200], 0.5)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -403,7 +480,7 @@ export default function getSignInTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -434,7 +511,7 @@ export default function getSignInTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -450,27 +527,39 @@ export default function getSignInTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -511,7 +600,7 @@ export default function getSignInTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -525,7 +614,7 @@ export default function getSignInTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -555,14 +644,7 @@ export default function getSignInTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -587,14 +669,35 @@ export default function getSignInTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -616,7 +719,7 @@ export default function getSignInTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -632,7 +735,7 @@ export default function getSignInTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
index 4c655afff4d56c..afe40745d8da7f 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
@@ -231,155 +231,221 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${alpha(gray[200], 0.5)}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.2)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.2)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${alpha(gray[200], 0.5)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -421,7 +487,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -452,7 +518,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -468,27 +534,38 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -529,7 +606,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -543,7 +620,9 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -573,14 +652,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -604,15 +676,33 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -634,7 +724,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -650,7 +740,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From ad6a748a72f9db775bddc6890d7ee370323a2572 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 15:11:54 +0700
Subject: [PATCH 10/27] migrate sign-in side theme

---
 .../sign-in-side/getSignInSideTheme.js        | 399 +++++++++++-------
 .../sign-in-side/getSignInSideTheme.tsx       | 384 ++++++++++-------
 2 files changed, 488 insertions(+), 295 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
index e39de16cbf5e55..9f91f0efccfe9f 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
@@ -213,156 +213,233 @@ export default function getSignInSideTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -404,7 +481,7 @@ export default function getSignInSideTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -435,7 +512,7 @@ export default function getSignInSideTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -451,27 +528,39 @@ export default function getSignInSideTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -512,7 +601,7 @@ export default function getSignInSideTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -526,7 +615,7 @@ export default function getSignInSideTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -556,14 +645,7 @@ export default function getSignInSideTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -588,14 +670,35 @@ export default function getSignInSideTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -617,7 +720,7 @@ export default function getSignInSideTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -633,7 +736,7 @@ export default function getSignInSideTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
index 20e9329142a520..bfec5def2b1b3e 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
@@ -231,156 +231,222 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -422,7 +488,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -453,7 +519,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -469,27 +535,38 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -530,7 +607,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -544,7 +621,9 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -574,14 +653,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -605,15 +677,33 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -635,7 +725,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -651,7 +741,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 587dbfd27f21add5e746fb2193fba73f7d397cf6 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 15:12:22 +0700
Subject: [PATCH 11/27] migrate sign-up theme

---
 .../templates/sign-up/getSignUpTheme.js       | 399 +++++++++++-------
 .../templates/sign-up/getSignUpTheme.tsx      | 384 ++++++++++-------
 2 files changed, 488 insertions(+), 295 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
index e066b0a2d08458..920f9946bb05db 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
@@ -213,156 +213,233 @@ export default function getSignUpTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -404,7 +481,7 @@ export default function getSignUpTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -435,7 +512,7 @@ export default function getSignUpTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -451,27 +528,39 @@ export default function getSignUpTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -512,7 +601,7 @@ export default function getSignUpTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -526,7 +615,7 @@ export default function getSignUpTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -556,14 +645,7 @@ export default function getSignUpTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -588,14 +670,35 @@ export default function getSignUpTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -617,7 +720,7 @@ export default function getSignUpTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -633,7 +736,7 @@ export default function getSignUpTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
index 19490022c87ad3..56f02c91754e59 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
@@ -231,156 +231,222 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -422,7 +488,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -453,7 +519,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -469,27 +535,38 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -530,7 +607,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -544,7 +621,9 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -574,14 +653,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -605,15 +677,33 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -635,7 +725,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -651,7 +741,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From ae08d4e690ac46acf5f982a8ddf11904c734e93e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 15:38:04 +0700
Subject: [PATCH 12/27] add readme

---
 packages/mui-codemod/README.md | 66 ++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 46c86981bd51b8..51135d37f408a6 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -1077,8 +1077,74 @@ npx @mui/codemod@next deprecations/step-connector-classes <path>
 
 ### v6.0.0
 
+#### `theme-v6`
+
+```bash
+npx @mui/codemod@next v6.0.0/theme-v6 <path>
+```
+
+Update the theme creation from `@mui/system@v5` to be compatible with `@pigment-css/react`.
+
+- replace palette mode conditional with `theme.applyStyles()`
+- replace `ownerState` with `variants`
+- move theme variants to the root slot
+
+```diff
+  createTheme({
+    components: {
+      MuiButton: {
+-        variants: [
+-          {
+-            props: { color: 'primary' },
+-            style: {
+-              color: 'red',
+-            },
+-          },
+-        ],
+        styleOverrides: {
+-          root: ({ theme, ownerState }) => ({
++          root: ({ theme }) => ({
+            ...ownerState.variant === 'contained' && {
+              backgroundColor: alpha(theme.palette.primary.main, 0.8),
+              ...theme.palette.mode === 'dark' && {
+                backgroundColor: alpha(theme.palette.primary.light, 0.9),
+              }
+            },
++           variants: [
++             {
++               prop: { variant: 'contained' },
++               style: {
++                 backgroundColor: alpha(theme.palette.primary.main, 0.8),
++               },
++             },
++             {
++               prop: { variant: 'contained' },
++               style: {
++                 ...theme.applyStyles('dark', {
++                   backgroundColor: alpha(theme.palette.primary.light, 0.9),
++                 })
++               },
++             },
++             {
++               prop: { color: 'primary' },
++               style: {
++                 color: 'red',
++               },
++             },
++           ],
+          })
+        }
+      }
+    }
+  })
+```
+
 #### `styled-v6`
 
+```bash
+npx @mui/codemod@next v6.0.0/styled-v6 <path>
+```
+
 Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`.
 
 This codemod transforms the styles based on props to `variants` by looking for `styled` calls:

From 6696bf91d876f1cfa0b2890508614862caf22f8a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 15:39:17 +0700
Subject: [PATCH 13/27] rename to theme-v6

---
 .../mui-codemod/src/v6.0.0/theme-style-overrides/index.js     | 1 -
 packages/mui-codemod/src/v6.0.0/theme-v6/index.js             | 1 +
 .../test-cases/basicTheme.actual.js                           | 0
 .../test-cases/basicTheme.expected.js                         | 0
 .../theme-style-overrides.js => theme-v6/theme-v6.js}         | 0
 .../theme-v6.test.js}                                         | 4 ++--
 6 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-v6/index.js
 rename packages/mui-codemod/src/v6.0.0/{theme-style-overrides => theme-v6}/test-cases/basicTheme.actual.js (100%)
 rename packages/mui-codemod/src/v6.0.0/{theme-style-overrides => theme-v6}/test-cases/basicTheme.expected.js (100%)
 rename packages/mui-codemod/src/v6.0.0/{theme-style-overrides/theme-style-overrides.js => theme-v6/theme-v6.js} (100%)
 rename packages/mui-codemod/src/v6.0.0/{theme-style-overrides/theme-style-overrides.test.js => theme-v6/theme-v6.test.js} (91%)

diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js b/packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js
deleted file mode 100644
index 27705a88fc775d..00000000000000
--- a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './theme-style-overrides';
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/index.js b/packages/mui-codemod/src/v6.0.0/theme-v6/index.js
new file mode 100644
index 00000000000000..109bf88c72774c
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/index.js
@@ -0,0 +1 @@
+export { default } from './theme-v6';
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.actual.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.actual.js
similarity index 100%
rename from packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.actual.js
rename to packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.actual.js
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.expected.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js
similarity index 100%
rename from packages/mui-codemod/src/v6.0.0/theme-style-overrides/test-cases/basicTheme.expected.js
rename to packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
similarity index 100%
rename from packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.js
rename to packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
diff --git a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js
similarity index 91%
rename from packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
rename to packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js
index 7c4ccef3da0bd4..ab19475754ba3d 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-style-overrides/theme-style-overrides.test.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js
@@ -1,7 +1,7 @@
 import path from 'path';
 import { expect } from 'chai';
 import { jscodeshift } from '../../../testUtils';
-import transform from './theme-style-overrides';
+import transform from './theme-v6';
 import readFile from '../../util/readFile';
 
 function read(fileName) {
@@ -10,7 +10,7 @@ function read(fileName) {
 
 describe('@mui/codemod', () => {
   describe('v6.0.0', () => {
-    describe('basic theme-style-overrides', () => {
+    describe('theme-v6', () => {
       it('transforms props as needed', () => {
         const actual = transform(
           { source: read('./test-cases/basicTheme.actual.js') },

From a6853aec479d984d8a6fa0070ff63001575c3e12 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:35:06 +0700
Subject: [PATCH 14/27] move theme variants to root slot

---
 .../src/util/getReturnExpression.js           | 14 ++++
 .../test-cases/basicTheme.expected.js         | 20 +++---
 .../test-cases/themeVariants.actual.js        | 56 ++++++++++++++++
 .../test-cases/themeVariants.expected.js      | 66 +++++++++++++++++++
 .../src/v6.0.0/theme-v6/theme-v6.js           | 39 +++++++++++
 .../src/v6.0.0/theme-v6/theme-v6.test.js      | 28 +++++++-
 6 files changed, 211 insertions(+), 12 deletions(-)
 create mode 100644 packages/mui-codemod/src/util/getReturnExpression.js
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js
 create mode 100644 packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js

diff --git a/packages/mui-codemod/src/util/getReturnExpression.js b/packages/mui-codemod/src/util/getReturnExpression.js
new file mode 100644
index 00000000000000..b14830121fa4f5
--- /dev/null
+++ b/packages/mui-codemod/src/util/getReturnExpression.js
@@ -0,0 +1,14 @@
+/**
+ * @param {import('ast-types').namedTypes.ArrowFunctionExpression | import('ast-types').namedTypes.FunctionExpression} node
+ */
+export default function getReturnExpression(node) {
+  let body = node.body;
+  if (body === 'BlockStatement') {
+    body = body.body;
+  }
+
+  if (Array.isArray(body)) {
+    return body.find((statement) => statement.type === 'ReturnStatement')?.argument;
+  }
+  return body;
+}
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js
index d554705aaca41e..72d8d0a1d226bd 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/basicTheme.expected.js
@@ -516,15 +516,6 @@ export default function getCheckoutTheme(mode) {
         },
       },
       MuiStepIcon: {
-        variants: [
-          {
-            props: { completed: true },
-            style: () => ({
-              width: 12,
-              height: 12,
-            }),
-          },
-        ],
         styleOverrides: {
           root: ({ theme }) => ({
             color: 'transparent',
@@ -554,8 +545,17 @@ export default function getCheckoutTheme(mode) {
                 color: theme.palette.success.light,
               },
             }),
+            variants: [
+              {
+                props: { completed: true },
+                style: ({
+                  width: 12,
+                  height: 12
+                }),
+              },
+            ]
           }),
-        },
+        }
       },
       MuiStepLabel: {
         styleOverrides: {
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js
new file mode 100644
index 00000000000000..bdd99e5b12c3d4
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.actual.js
@@ -0,0 +1,56 @@
+export default function getCheckoutTheme(mode) {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiStepIcon: {
+        variants: [
+          {
+            props: { completed: true },
+            style: () => ({
+              width: 12,
+              height: 12,
+            }),
+          },
+        ],
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            color: 'transparent',
+            border: `1px solid ${gray[400]}`,
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            '& text': {
+              display: 'none',
+            },
+            '&.Mui-active': {
+              border: 'none',
+              color: theme.palette.primary.main,
+            },
+            '&.Mui-completed': {
+              border: 'none',
+              color: theme.palette.success.main,
+            },
+            ...(ownerState.size === 'large' && {
+              width: 20,
+              height: 20,
+            }),
+            ...(theme.palette.mode === 'dark' && {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light,
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light,
+              },
+              ...(ownerState.variant === 'shadow' && {
+                boxShadow: theme.shadows[2],
+              }),
+            }),
+          }),
+        },
+      },
+    },
+  };
+}
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js
new file mode 100644
index 00000000000000..8f5660247befd8
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/test-cases/themeVariants.expected.js
@@ -0,0 +1,66 @@
+export default function getCheckoutTheme(mode) {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiStepIcon: {
+        styleOverrides: {
+          root: ({
+            theme
+          }) => ({
+            color: 'transparent',
+            border: `1px solid ${gray[400]}`,
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            '& text': {
+              display: 'none',
+            },
+            '&.Mui-active': {
+              border: 'none',
+              color: theme.palette.primary.main,
+            },
+            '&.Mui-completed': {
+              border: 'none',
+              color: theme.palette.success.main,
+            },
+            ...theme.applyStyles("dark", {
+              border: `1px solid ${gray[700]}`,
+              '&.Mui-active': {
+                border: 'none',
+                color: theme.palette.primary.light,
+              },
+              '&.Mui-completed': {
+                border: 'none',
+                color: theme.palette.success.light,
+              }
+            }),
+            variants: [{
+              props: {
+                size: 'large'
+              },
+              style: {
+                width: 20,
+                height: 20,
+              }
+            }, {
+              props: {
+                variant: 'shadow'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  boxShadow: theme.shadows[2],
+                })
+              }
+            }, {
+              props: { completed: true },
+              style: ({
+                width: 12,
+                height: 12
+              }),
+            }]
+          }),
+        }
+      },
+    },
+  };
+}
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
index f9133d0267474e..00b08bad9afdd9 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
@@ -1,3 +1,4 @@
+import getReturnExpression from '../../util/getReturnExpression';
 import migrateToVariants from '../../util/migrateToVariants';
 
 /**
@@ -35,6 +36,44 @@ export default function styledV6(file, api, options) {
     }
 
     migrateToVariants(j, styles);
+
+    if (path.parent.get('key', 'name').value === 'root') {
+      const componentTheme = path.parent.parent.parent.parent.get('properties');
+      if (componentTheme.node.type === 'ObjectExpression') {
+        componentTheme.node.properties.forEach((prop) => {
+          if (prop.key.name === 'variants') {
+            prop.value.elements = prop.value.elements.map((element) => {
+              const styleIndex = element.properties.findIndex(
+                (styleProp) =>
+                  styleProp.type === 'ObjectProperty' && styleProp.key.name === 'style',
+              );
+              if (
+                styleIndex !== -1 &&
+                element.properties[styleIndex].value.type !== 'ObjectExpression'
+              ) {
+                element.properties[styleIndex].value = getReturnExpression(
+                  element.properties[styleIndex].value,
+                );
+              }
+              return element;
+            });
+            const stylesNode = getReturnExpression(path.node);
+            const variantsNode = stylesNode?.properties.find(
+              (styleProp) =>
+                styleProp.type === 'ObjectProperty' && styleProp.key.name === 'variants',
+            );
+            if (variantsNode) {
+              variantsNode.value.elements.push(...prop.value.elements);
+            } else {
+              stylesNode.properties.push(j.property('init', j.identifier('variants'), prop.value));
+            }
+          }
+        });
+        componentTheme.node.properties = componentTheme.node.properties.filter(
+          (prop) => prop.key.name !== 'variants',
+        );
+      }
+    }
   });
 
   const transformed = root.toSource(printOptions);
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js
index ab19475754ba3d..57ecbada5bfcde 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.test.js
@@ -9,8 +9,8 @@ function read(fileName) {
 }
 
 describe('@mui/codemod', () => {
-  describe('v6.0.0', () => {
-    describe('theme-v6', () => {
+  describe('v6.0.0 - theme-v6', () => {
+    describe('styleOverrides', () => {
       it('transforms props as needed', () => {
         const actual = transform(
           { source: read('./test-cases/basicTheme.actual.js') },
@@ -33,5 +33,29 @@ describe('@mui/codemod', () => {
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
     });
+
+    describe('theme variants to root slot', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/themeVariants.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/themeVariants.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/themeVariants.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/themeVariants.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
   });
 });

From d6bd25fb475a50037deca5661311fc86e7d3c549 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:35:57 +0700
Subject: [PATCH 15/27] Revert "migrate landing page theme"

This reverts commit 2f424583d0fed933b8725cb6c70d0b273429259d.
---
 .../templates/landing-page/getLPTheme.js      | 407 +++++++-----------
 .../templates/landing-page/getLPTheme.tsx     | 407 +++++++-----------
 2 files changed, 304 insertions(+), 510 deletions(-)

diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
index 3723f03ffcb007..8ae6d57199e6fc 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
@@ -225,7 +225,7 @@ export default function getLPTheme(mode) {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -239,7 +239,7 @@ export default function getLPTheme(mode) {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -268,233 +268,156 @@ export default function getLPTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -520,7 +443,7 @@ export default function getLPTheme(mode) {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -544,7 +467,7 @@ export default function getLPTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -560,39 +483,27 @@ export default function getLPTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -633,7 +544,7 @@ export default function getLPTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -648,7 +559,7 @@ export default function getLPTheme(mode) {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[200],
             }),
           }),
@@ -662,7 +573,7 @@ export default function getLPTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -692,7 +603,14 @@ export default function getLPTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -717,35 +635,14 @@ export default function getLPTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -787,7 +684,7 @@ export default function getLPTheme(mode) {
               height: 16,
               margin: 2,
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               width: 36,
               height: 24,
               padding: 0,
@@ -830,7 +727,7 @@ export default function getLPTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -846,7 +743,7 @@ export default function getLPTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
index d4c7065da765d8..c513c17f63b408 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
@@ -244,7 +244,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -258,7 +258,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -287,233 +287,156 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -539,7 +462,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -563,7 +486,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -579,39 +502,27 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -652,7 +563,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -667,7 +578,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[200],
             }),
           }),
@@ -681,7 +592,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -711,7 +622,14 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -736,35 +654,14 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -806,7 +703,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               height: 16,
               margin: 2,
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               width: 36,
               height: 24,
               padding: 0,
@@ -849,7 +746,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -865,7 +762,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 33593835efc9417e1539361b43bf12fa9a4eb8ff Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:36:03 +0700
Subject: [PATCH 16/27] Revert "migrate checkout theme"

This reverts commit 3c620473eefcd0f5b3a83cd8c219e9d1851afed1.
---
 .../templates/checkout/getCheckoutTheme.js    | 405 +++++++-----------
 .../templates/checkout/getCheckoutTheme.tsx   | 405 +++++++-----------
 2 files changed, 302 insertions(+), 508 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
index 85a246860b4f91..300aba317f8cf6 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
@@ -205,7 +205,7 @@ export default function getCheckoutTheme(mode) {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -230,233 +230,156 @@ export default function getCheckoutTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -498,7 +421,7 @@ export default function getCheckoutTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -518,7 +441,7 @@ export default function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -534,39 +457,27 @@ export default function getCheckoutTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -607,7 +518,7 @@ export default function getCheckoutTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -621,7 +532,7 @@ export default function getCheckoutTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -651,7 +562,14 @@ export default function getCheckoutTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -676,35 +594,14 @@ export default function getCheckoutTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -756,7 +653,7 @@ export default function getCheckoutTheme(mode) {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -775,7 +672,7 @@ export default function getCheckoutTheme(mode) {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...theme.applyStyles('dark', { opacity: 0.5 }),
+              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
             },
           }),
         },
@@ -788,7 +685,7 @@ export default function getCheckoutTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -804,7 +701,7 @@ export default function getCheckoutTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
index f027a0d7461a96..89ddbb5ec4c39d 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
@@ -223,7 +223,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -248,233 +248,156 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -516,7 +439,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -536,7 +459,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -552,39 +475,27 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -625,7 +536,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -639,7 +550,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -669,7 +580,14 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -694,35 +612,14 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -774,7 +671,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -793,7 +690,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...theme.applyStyles('dark', { opacity: 0.5 }),
+              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
             },
           }),
         },
@@ -806,7 +703,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -822,7 +719,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 04dac56bcd5fcfe5ab97609067a05a5587969a67 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:36:07 +0700
Subject: [PATCH 17/27] Revert "migrate sign-in theme"

This reverts commit ca60151056ac668c13f0895d191e0095e702e618.
---
 .../templates/sign-in/getSignInTheme.js       | 399 +++++++-----------
 .../templates/sign-in/getSignInTheme.tsx      | 384 +++++++----------
 2 files changed, 295 insertions(+), 488 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
index f3072d497aebae..224b3d9596dd45 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
@@ -213,232 +213,155 @@ export default function getSignInTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${alpha(gray[200], 0.5)}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.2)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${alpha(gray[200], 0.5)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -480,7 +403,7 @@ export default function getSignInTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -511,7 +434,7 @@ export default function getSignInTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -527,39 +450,27 @@ export default function getSignInTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -600,7 +511,7 @@ export default function getSignInTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -614,7 +525,7 @@ export default function getSignInTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -644,7 +555,14 @@ export default function getSignInTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -669,35 +587,14 @@ export default function getSignInTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -719,7 +616,7 @@ export default function getSignInTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -735,7 +632,7 @@ export default function getSignInTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
index afe40745d8da7f..4c655afff4d56c 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
@@ -231,221 +231,155 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
                   backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
                   backgroundImage: 'none',
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.3),
+                  },
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
                   color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  })
-              }
-            }]
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
-              backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.2)}`
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${alpha(gray[200], 0.5)}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${alpha(gray[200], 0.5)}`,
+            ...(theme.palette.mode === 'dark' && {
+              backgroundColor: alpha(gray[800], 0.6),
+              border: `1px solid ${alpha(gray[700], 0.2)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
                 boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
+            }),
           }),
         },
       },
@@ -487,7 +421,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -518,7 +452,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -534,38 +468,27 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
           }),
         },
       },
@@ -606,7 +529,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -620,9 +543,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -652,7 +573,14 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -676,33 +604,15 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
                 '& + .MuiFormHelperText-root': {
-                  color: red[500],
-                },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
                   color: red[300],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[300],
-                  },
-                })
-              }
-            }]
+                },
+              }),
+            }),
           }),
         },
       },
@@ -724,7 +634,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -740,7 +650,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 7e040d8cb4c39be3bf5843630ef372810309aec5 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:36:11 +0700
Subject: [PATCH 18/27] Revert "migrate sign-in side theme"

This reverts commit ad6a748a72f9db775bddc6890d7ee370323a2572.
---
 .../sign-in-side/getSignInSideTheme.js        | 399 +++++++-----------
 .../sign-in-side/getSignInSideTheme.tsx       | 384 +++++++----------
 2 files changed, 295 insertions(+), 488 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
index 9f91f0efccfe9f..e39de16cbf5e55 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
@@ -213,233 +213,156 @@ export default function getSignInSideTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -481,7 +404,7 @@ export default function getSignInSideTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -512,7 +435,7 @@ export default function getSignInSideTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -528,39 +451,27 @@ export default function getSignInSideTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -601,7 +512,7 @@ export default function getSignInSideTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -615,7 +526,7 @@ export default function getSignInSideTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -645,7 +556,14 @@ export default function getSignInSideTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -670,35 +588,14 @@ export default function getSignInSideTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -720,7 +617,7 @@ export default function getSignInSideTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -736,7 +633,7 @@ export default function getSignInSideTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
index bfec5def2b1b3e..20e9329142a520 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
@@ -231,222 +231,156 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
                   backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
                   backgroundImage: 'none',
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.3),
+                  },
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
                   color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  })
-              }
-            }]
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
-              backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
+            ...(theme.palette.mode === 'dark' && {
+              backgroundColor: alpha(gray[800], 0.6),
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
                 boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
+            }),
           }),
         },
       },
@@ -488,7 +422,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -519,7 +453,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -535,38 +469,27 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
           }),
         },
       },
@@ -607,7 +530,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -621,9 +544,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -653,7 +574,14 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -677,33 +605,15 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
                 '& + .MuiFormHelperText-root': {
-                  color: red[500],
-                },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
                   color: red[300],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[300],
-                  },
-                })
-              }
-            }]
+                },
+              }),
+            }),
           }),
         },
       },
@@ -725,7 +635,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -741,7 +651,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 453b4ef345814b0b2bd20761846d9bdc7b8cb6af Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:36:15 +0700
Subject: [PATCH 19/27] Revert "migrate sign-up theme"

This reverts commit 587dbfd27f21add5e746fb2193fba73f7d397cf6.
---
 .../templates/sign-up/getSignUpTheme.js       | 399 +++++++-----------
 .../templates/sign-up/getSignUpTheme.tsx      | 384 +++++++----------
 2 files changed, 295 insertions(+), 488 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
index 920f9946bb05db..e066b0a2d08458 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
@@ -213,233 +213,156 @@ export default function getSignUpTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
                 },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                 },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
+                  boxShadow: 'none',
                 },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
+                '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
+                  backgroundColor: alpha(brand[300], 0.3),
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
                 },
-              },
-              {
-                props: {
-                  variant: 'outlined',
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundImage: 'none',
                 },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(gray[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
+                  color: brand[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles('dark', {
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+            }),
+            ...(theme.palette.mode === 'dark' && {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
             }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
           }),
         },
       },
@@ -481,7 +404,7 @@ export default function getSignUpTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -512,7 +435,7 @@ export default function getSignUpTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -528,39 +451,27 @@ export default function getSignUpTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
           }),
         },
       },
@@ -601,7 +512,7 @@ export default function getSignUpTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -615,7 +526,7 @@ export default function getSignUpTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -645,7 +556,14 @@ export default function getSignUpTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles('dark', {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -670,35 +588,14 @@ export default function getSignUpTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
+                '& + .MuiFormHelperText-root': {
+                  color: red[300],
                 },
-              },
-            ],
+              }),
+            }),
           }),
         },
       },
@@ -720,7 +617,7 @@ export default function getSignUpTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -736,7 +633,7 @@ export default function getSignUpTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles('dark', {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
index 56f02c91754e59..19490022c87ad3 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
@@ -231,222 +231,156 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+            ...(ownerState.size === 'small' && {
+              height: '2rem', // 32px
+              padding: '0 0.5rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem', // 40px
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: 'white',
+                backgroundColor: brand[300],
+                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                border: `1px solid ${brand[500]}`,
+                '&:hover': {
+                  backgroundColor: brand[700],
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: brand[700],
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                },
+              }),
+            ...(ownerState.variant === 'outlined' && {
+              color: brand[700],
+              backgroundColor: alpha(brand[300], 0.1),
+              borderColor: alpha(brand[200], 0.8),
+              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+              '&:hover': {
+                backgroundColor: alpha(brand[300], 0.2),
+                borderColor: alpha(brand[300], 0.5),
+                boxShadow: 'none',
               },
-              style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+              '&:active': {
+                backgroundColor: alpha(brand[300], 0.3),
+                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                backgroundImage: 'none',
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                backgroundColor: alpha(gray[300], 0.1),
+                borderColor: alpha(gray[300], 0.5),
+                color: gray[700],
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
+                  backgroundColor: alpha(gray[300], 0.3),
+                  borderColor: alpha(gray[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
+                  backgroundColor: alpha(gray[300], 0.4),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                  backgroundImage: 'none',
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: brand[700],
+                '&:hover': {
                   backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                },
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'info' && {
+                color: gray[700],
+                '&:hover': {
+                  backgroundColor: alpha(gray[300], 0.3),
+                },
+              }),
+            ...(theme.palette.mode === 'dark' && {
+              ...(ownerState.variant === 'outlined' && {
+                color: brand[200],
+                backgroundColor: alpha(brand[600], 0.1),
+                borderColor: alpha(brand[600], 0.6),
+                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                '&:hover': {
+                  backgroundColor: alpha(brand[700], 0.2),
+                  borderColor: alpha(brand[700], 0.5),
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[800], 0.2),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
                   backgroundImage: 'none',
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'info' && {
+                  color: gray[200],
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(gray[700], 0.3),
+                  },
+                }),
+              ...(ownerState.variant === 'outlined' &&
+                ownerState.color === 'secondary' && {
+                  color: gray[300],
+                  backgroundColor: alpha(gray[600], 0.1),
+                  borderColor: alpha(gray[700], 0.5),
+                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(gray[700], 0.2),
+                    borderColor: alpha(gray[700], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundColor: alpha(gray[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                }),
+              ...(ownerState.variant === 'text' &&
+                ownerState.color === 'primary' && {
                   color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
+                    backgroundColor: alpha(brand[700], 0.3),
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  })
-              }
-            }]
+                }),
+            }),
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
-              backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+            ...(ownerState.variant === 'outlined' && {
+              border: `1px solid ${gray[200]}`,
+              boxShadow: 'none',
+              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
+            ...(theme.palette.mode === 'dark' && {
+              backgroundColor: alpha(gray[800], 0.6),
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
+              ...(ownerState.variant === 'outlined' && {
+                border: `1px solid ${alpha(gray[700], 0.4)}`,
                 boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                  gray[800],
+                  0.5,
+                )})`,
+              }),
+            }),
           }),
         },
       },
@@ -488,7 +422,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -519,7 +453,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -535,38 +469,27 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'small' && {
+              height: '2rem',
+              width: '2rem',
+            }),
+            ...(ownerState.size === 'medium' && {
+              height: '2.5rem',
+              width: '2.5rem',
+            }),
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
           }),
         },
       },
@@ -607,7 +530,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: brand[200],
             }),
           }),
@@ -621,9 +544,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme, ownerState }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -653,7 +574,14 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...(ownerState.color === 'error' && {
+              borderColor: red[200],
+              color: red[500],
+              '& + .MuiFormHelperText-root': {
+                color: red[500],
+              },
+            }),
+            ...(theme.palette.mode === 'dark' && {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -677,33 +605,15 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
+              ...(ownerState.color === 'error' && {
+                borderColor: red[700],
+                color: red[300],
                 '& + .MuiFormHelperText-root': {
-                  color: red[500],
-                },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
                   color: red[300],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[300],
-                  },
-                })
-              }
-            }]
+                },
+              }),
+            }),
           }),
         },
       },
@@ -725,7 +635,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -741,7 +651,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...(theme.palette.mode === 'dark' && {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 9d939a7a23bc6f51f0eb0cae54efe43e9f3bcec7 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:38:53 +0700
Subject: [PATCH 20/27] migrate checkout theme

---
 .../templates/checkout/getCheckoutTheme.js    | 423 +++++++++++-------
 .../templates/checkout/getCheckoutTheme.tsx   | 410 ++++++++++-------
 2 files changed, 513 insertions(+), 320 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
index 300aba317f8cf6..8ea211451f883d 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
@@ -205,7 +205,7 @@ export default function getCheckoutTheme(mode) {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -230,156 +230,233 @@ export default function getCheckoutTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -421,7 +498,7 @@ export default function getCheckoutTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -441,7 +518,7 @@ export default function getCheckoutTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -457,27 +534,39 @@ export default function getCheckoutTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -518,7 +607,7 @@ export default function getCheckoutTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -532,7 +621,7 @@ export default function getCheckoutTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -562,14 +651,7 @@ export default function getCheckoutTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -594,14 +676,35 @@ export default function getCheckoutTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -626,15 +729,6 @@ export default function getCheckoutTheme(mode) {
         },
       },
       MuiStepIcon: {
-        variants: [
-          {
-            props: { completed: true },
-            style: () => ({
-              width: 12,
-              height: 12,
-            }),
-          },
-        ],
         styleOverrides: {
           root: ({ theme }) => ({
             color: 'transparent',
@@ -653,7 +747,7 @@ export default function getCheckoutTheme(mode) {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -664,6 +758,15 @@ export default function getCheckoutTheme(mode) {
                 color: theme.palette.success.light,
               },
             }),
+            variants: [
+              {
+                props: { completed: true },
+                style: {
+                  width: 12,
+                  height: 12,
+                },
+              },
+            ],
           }),
         },
       },
@@ -672,7 +775,7 @@ export default function getCheckoutTheme(mode) {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
+              ...theme.applyStyles('dark', { opacity: 0.5 }),
             },
           }),
         },
@@ -685,7 +788,7 @@ export default function getCheckoutTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -701,7 +804,7 @@ export default function getCheckoutTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
index 89ddbb5ec4c39d..d1f2c907359167 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
@@ -223,7 +223,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -248,156 +248,222 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -439,7 +505,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -459,7 +525,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -475,27 +541,38 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -536,7 +613,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -550,7 +627,9 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -580,14 +659,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -611,15 +683,33 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -644,15 +734,6 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
         },
       },
       MuiStepIcon: {
-        variants: [
-          {
-            props: { completed: true },
-            style: () => ({
-              width: 12,
-              height: 12,
-            }),
-          },
-        ],
         styleOverrides: {
           root: ({ theme }) => ({
             color: 'transparent',
@@ -671,7 +752,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -682,15 +763,24 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 color: theme.palette.success.light,
               },
             }),
+            variants: [
+              {
+                props: { completed: true },
+                style: ({
+                  width: 12,
+                  height: 12
+                }),
+              },
+            ]
           }),
-        },
+        }
       },
       MuiStepLabel: {
         styleOverrides: {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...(theme.palette.mode === 'dark' && { opacity: 0.5 }),
+              ...theme.applyStyles("dark", { opacity: 0.5 }),
             },
           }),
         },
@@ -703,7 +793,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -719,7 +809,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From f0e79d34e13c920a267ffc15ad602e09141b7a54 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:39:00 +0700
Subject: [PATCH 21/27] migrate landing page theme

---
 .../templates/landing-page/getLPTheme.js      | 407 +++++++++++-------
 .../templates/landing-page/getLPTheme.tsx     | 392 ++++++++++-------
 2 files changed, 496 insertions(+), 303 deletions(-)

diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
index 8ae6d57199e6fc..3723f03ffcb007 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
@@ -225,7 +225,7 @@ export default function getLPTheme(mode) {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -239,7 +239,7 @@ export default function getLPTheme(mode) {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -268,156 +268,233 @@ export default function getLPTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -443,7 +520,7 @@ export default function getLPTheme(mode) {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -467,7 +544,7 @@ export default function getLPTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -483,27 +560,39 @@ export default function getLPTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -544,7 +633,7 @@ export default function getLPTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -559,7 +648,7 @@ export default function getLPTheme(mode) {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[200],
             }),
           }),
@@ -573,7 +662,7 @@ export default function getLPTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -603,14 +692,7 @@ export default function getLPTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -635,14 +717,35 @@ export default function getLPTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -684,7 +787,7 @@ export default function getLPTheme(mode) {
               height: 16,
               margin: 2,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               width: 36,
               height: 24,
               padding: 0,
@@ -727,7 +830,7 @@ export default function getLPTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -743,7 +846,7 @@ export default function getLPTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
index c513c17f63b408..4e846a98eff604 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
@@ -244,7 +244,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -258,7 +258,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -287,156 +287,222 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -462,7 +528,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -486,7 +552,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -502,27 +568,38 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -563,7 +640,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -578,7 +655,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[200],
             }),
           }),
@@ -592,7 +669,9 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -622,14 +701,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -653,15 +725,33 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -703,7 +793,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               height: 16,
               margin: 2,
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               width: 36,
               height: 24,
               padding: 0,
@@ -746,7 +836,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -762,7 +852,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 50be4667ad7266b141485ffb06253b65d8d6050c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:39:06 +0700
Subject: [PATCH 22/27] migrate sign in theme

---
 .../templates/sign-in/getSignInTheme.js       | 399 +++++++++++-------
 .../templates/sign-in/getSignInTheme.tsx      | 384 ++++++++++-------
 2 files changed, 488 insertions(+), 295 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
index 224b3d9596dd45..f3072d497aebae 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
@@ -213,155 +213,232 @@ export default function getSignInTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${alpha(gray[200], 0.5)}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.2)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${alpha(gray[200], 0.5)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -403,7 +480,7 @@ export default function getSignInTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -434,7 +511,7 @@ export default function getSignInTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -450,27 +527,39 @@ export default function getSignInTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -511,7 +600,7 @@ export default function getSignInTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -525,7 +614,7 @@ export default function getSignInTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -555,14 +644,7 @@ export default function getSignInTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -587,14 +669,35 @@ export default function getSignInTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -616,7 +719,7 @@ export default function getSignInTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -632,7 +735,7 @@ export default function getSignInTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
index 4c655afff4d56c..afe40745d8da7f 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
@@ -231,155 +231,221 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${alpha(gray[200], 0.5)}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.2)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.2)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${alpha(gray[200], 0.5)}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -421,7 +487,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -452,7 +518,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -468,27 +534,38 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -529,7 +606,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -543,7 +620,9 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -573,14 +652,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -604,15 +676,33 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -634,7 +724,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -650,7 +740,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From ff2a5c42c49d79e981733b22390fe2d2bb05774e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:39:13 +0700
Subject: [PATCH 23/27] migrate sign-in-side them

---
 .../sign-in-side/getSignInSideTheme.js        | 399 +++++++++++-------
 .../sign-in-side/getSignInSideTheme.tsx       | 384 ++++++++++-------
 2 files changed, 488 insertions(+), 295 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
index e39de16cbf5e55..9f91f0efccfe9f 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
@@ -213,156 +213,233 @@ export default function getSignInSideTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -404,7 +481,7 @@ export default function getSignInSideTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -435,7 +512,7 @@ export default function getSignInSideTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -451,27 +528,39 @@ export default function getSignInSideTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -512,7 +601,7 @@ export default function getSignInSideTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -526,7 +615,7 @@ export default function getSignInSideTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -556,14 +645,7 @@ export default function getSignInSideTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -588,14 +670,35 @@ export default function getSignInSideTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -617,7 +720,7 @@ export default function getSignInSideTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -633,7 +736,7 @@ export default function getSignInSideTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
index 20e9329142a520..bfec5def2b1b3e 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
@@ -231,156 +231,222 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -422,7 +488,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -453,7 +519,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -469,27 +535,38 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -530,7 +607,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -544,7 +621,9 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -574,14 +653,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -605,15 +677,33 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -635,7 +725,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -651,7 +741,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 9660dd4bea191176653985c3b3d23db0a0a9f04f Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 29 Apr 2024 16:39:22 +0700
Subject: [PATCH 24/27] migrate sign-up theme

---
 .../templates/sign-up/getSignUpTheme.js       | 399 +++++++++++-------
 .../templates/sign-up/getSignUpTheme.tsx      | 384 ++++++++++-------
 2 files changed, 488 insertions(+), 295 deletions(-)

diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
index e066b0a2d08458..920f9946bb05db 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
@@ -213,156 +213,233 @@ export default function getSignUpTheme(mode) {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
+            variants: [
+              {
+                props: {
+                  size: 'small',
                 },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
                 },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
                 },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
-                color: brand[700],
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
-                  boxShadow: 'none',
+                style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
-                  color: brand[200],
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[300], 0.3),
                   },
-                }),
-            }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
               border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -404,7 +481,7 @@ export default function getSignUpTheme(mode) {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -435,7 +512,7 @@ export default function getSignUpTheme(mode) {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -451,27 +528,39 @@ export default function getSignUpTheme(mode) {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -512,7 +601,7 @@ export default function getSignUpTheme(mode) {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -526,7 +615,7 @@ export default function getSignUpTheme(mode) {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -556,14 +645,7 @@ export default function getSignUpTheme(mode) {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -588,14 +670,35 @@ export default function getSignUpTheme(mode) {
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
-                '& + .MuiFormHelperText-root': {
-                  color: red[300],
-                },
-              }),
             }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -617,7 +720,7 @@ export default function getSignUpTheme(mode) {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -633,7 +736,7 @@ export default function getSignUpTheme(mode) {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
index 19490022c87ad3..56f02c91754e59 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
@@ -231,156 +231,222 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            ...(ownerState.size === 'small' && {
-              height: '2rem', // 32px
-              padding: '0 0.5rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem', // 40px
-            }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: 'white',
-                backgroundColor: brand[300],
-                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                border: `1px solid ${brand[500]}`,
-                '&:hover': {
-                  backgroundColor: brand[700],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: brand[700],
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                },
-              }),
-            ...(ownerState.variant === 'outlined' && {
-              color: brand[700],
-              backgroundColor: alpha(brand[300], 0.1),
-              borderColor: alpha(brand[200], 0.8),
-              boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-              '&:hover': {
-                backgroundColor: alpha(brand[300], 0.2),
-                borderColor: alpha(brand[300], 0.5),
-                boxShadow: 'none',
+            variants: [{
+              props: {
+                size: 'small'
               },
-              '&:active': {
-                backgroundColor: alpha(brand[300], 0.3),
-                boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                backgroundImage: 'none',
+              style: {
+                height: '2rem', // 32px
+                padding: '0 0.5rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
               },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                backgroundColor: alpha(gray[300], 0.1),
-                borderColor: alpha(gray[300], 0.5),
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                  borderColor: alpha(gray[300], 0.5),
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[300], 0.4),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'primary' && {
+              style: {
+                height: '2.5rem', // 40px
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'contained'
+              },
+              style: {
+                  color: 'white',
+                  backgroundColor: brand[300],
+                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+                  border: `1px solid ${brand[500]}`,
+                  '&:hover': {
+                    backgroundColor: brand[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
                 color: brand[700],
+                backgroundColor: alpha(brand[300], 0.1),
+                borderColor: alpha(brand[200], 0.8),
+                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                 '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                },
-              }),
-            ...(ownerState.variant === 'text' &&
-              ownerState.color === 'info' && {
-                color: gray[700],
-                '&:hover': {
-                  backgroundColor: alpha(gray[300], 0.3),
-                },
-              }),
-            ...(theme.palette.mode === 'dark' && {
-              ...(ownerState.variant === 'outlined' && {
-                color: brand[200],
-                backgroundColor: alpha(brand[600], 0.1),
-                borderColor: alpha(brand[600], 0.6),
-                boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[700], 0.2),
-                  borderColor: alpha(brand[700], 0.5),
+                  backgroundColor: alpha(brand[300], 0.2),
+                  borderColor: alpha(brand[300], 0.5),
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: alpha(brand[800], 0.2),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                  backgroundColor: alpha(brand[300], 0.3),
+                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                   backgroundImage: 'none',
                 },
-              }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'info' && {
-                  color: gray[200],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.3),
-                  },
-                }),
-              ...(ownerState.variant === 'outlined' &&
-                ownerState.color === 'secondary' && {
-                  color: gray[300],
-                  backgroundColor: alpha(gray[600], 0.1),
-                  borderColor: alpha(gray[700], 0.5),
-                  boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
                   '&:hover': {
-                    backgroundColor: alpha(gray[700], 0.2),
-                    borderColor: alpha(gray[700], 0.5),
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }),
-              ...(ownerState.variant === 'text' &&
-                ownerState.color === 'primary' && {
+                }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
                   color: brand[200],
+                  backgroundColor: alpha(brand[600], 0.1),
+                  borderColor: alpha(brand[600], 0.6),
+                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                   '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.3),
+                    backgroundColor: alpha(brand[700], 0.2),
+                    borderColor: alpha(brand[700], 0.5),
+                    boxShadow: 'none',
                   },
-                }),
-            }),
+                  '&:active': {
+                    backgroundColor: alpha(brand[800], 0.2),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundImage: 'none',
+                  },
+                })
+              }
+            }, {
+              props: {
+                color: 'info',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'secondary',
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  })
+              }
+            }, {
+              props: {
+                color: 'primary',
+                variant: 'text'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  })
+              }
+            }]
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...(ownerState.variant === 'outlined' && {
-              border: `1px solid ${gray[200]}`,
-              boxShadow: 'none',
-              background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-              ...(ownerState.variant === 'outlined' && {
-                border: `1px solid ${alpha(gray[700], 0.4)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                  gray[800],
-                  0.5,
-                )})`,
-              }),
+              border: `1px solid ${alpha(gray[700], 0.3)}`
             }),
+            variants: [{
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                border: `1px solid ${gray[200]}`,
+                boxShadow: 'none',
+                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+              }
+            }, {
+              props: {
+                variant: 'outlined'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                    gray[800],
+                    0.5,
+                  )})`,
+                })
+              }
+            }]
           }),
         },
       },
@@ -422,7 +488,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -453,7 +519,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -469,27 +535,38 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            ...(ownerState.size === 'small' && {
-              height: '2rem',
-              width: '2rem',
-            }),
-            ...(ownerState.size === 'medium' && {
-              height: '2.5rem',
-              width: '2.5rem',
-            }),
+          root: ({
+            theme
+          }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
+            variants: [{
+              props: {
+                size: 'small'
+              },
+              style: {
+                height: '2rem',
+                width: '2rem',
+              }
+            }, {
+              props: {
+                size: 'medium'
+              },
+              style: {
+                height: '2.5rem',
+                width: '2.5rem',
+              }
+            }]
           }),
         },
       },
@@ -530,7 +607,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: brand[200],
             }),
           }),
@@ -544,7 +621,9 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({ theme, ownerState }) => ({
+          root: ({
+            theme
+          }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -574,14 +653,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...(ownerState.color === 'error' && {
-              borderColor: red[200],
-              color: red[500],
-              '& + .MuiFormHelperText-root': {
-                color: red[500],
-              },
-            }),
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -605,15 +677,33 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
+              }
+            }),
+            variants: [{
+              props: {
+                color: 'error'
               },
-              ...(ownerState.color === 'error' && {
-                borderColor: red[700],
-                color: red[300],
+              style: {
+                borderColor: red[200],
+                color: red[500],
                 '& + .MuiFormHelperText-root': {
-                  color: red[300],
+                  color: red[500],
                 },
-              }),
-            }),
+              }
+            }, {
+              props: {
+                color: 'error'
+              },
+              style: {
+                ...theme.applyStyles("dark", {
+                  borderColor: red[700],
+                  color: red[300],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[300],
+                  },
+                })
+              }
+            }]
           }),
         },
       },
@@ -635,7 +725,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -651,7 +741,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...(theme.palette.mode === 'dark' && {
+            ...theme.applyStyles("dark", {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 080c38129c71e8a1d3719ec90fae31ef794e652d Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 30 Apr 2024 20:00:06 +0700
Subject: [PATCH 25/27] run prettier

---
 .../templates/checkout/getCheckoutTheme.tsx   | 391 +++++++++--------
 .../templates/landing-page/getLPTheme.tsx     | 403 +++++++++---------
 .../sign-in-side/getSignInSideTheme.tsx       | 375 ++++++++--------
 .../templates/sign-in/getSignInTheme.tsx      | 375 ++++++++--------
 .../templates/sign-up/getSignUpTheme.tsx      | 375 ++++++++--------
 5 files changed, 992 insertions(+), 927 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
index d1f2c907359167..6c80342b05c947 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
@@ -223,7 +223,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -248,33 +248,34 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -288,33 +289,35 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  variant: 'outlined',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
                   backgroundColor: alpha(gray[300], 0.1),
                   borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
@@ -328,71 +331,76 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
                   color: brand[700],
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
-                  },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[200],
                     '&:hover': {
                       backgroundColor: alpha(gray[700], 0.3),
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -407,63 +415,66 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
               },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+            ],
           }),
         },
       },
@@ -505,7 +516,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -525,7 +536,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -541,38 +552,39 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -613,7 +625,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -627,9 +639,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -659,7 +669,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -683,33 +693,36 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
                   color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
-                  '& + .MuiFormHelperText-root': {
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
                     color: red[300],
-                  },
-                })
-              }
-            }]
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -752,7 +765,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -766,21 +779,21 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             variants: [
               {
                 props: { completed: true },
-                style: ({
+                style: {
                   width: 12,
-                  height: 12
-                }),
+                  height: 12,
+                },
               },
-            ]
+            ],
           }),
-        }
+        },
       },
       MuiStepLabel: {
         styleOverrides: {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...theme.applyStyles("dark", { opacity: 0.5 }),
+              ...theme.applyStyles('dark', { opacity: 0.5 }),
             },
           }),
         },
@@ -793,7 +806,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -809,7 +822,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
index 4e846a98eff604..d4c7065da765d8 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
@@ -244,7 +244,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -258,7 +258,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -287,33 +287,34 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
-              },
-              style: {
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -327,33 +328,35 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
                   backgroundColor: alpha(gray[300], 0.1),
                   borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
@@ -367,71 +370,76 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
                   color: brand[700],
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
-                  },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[200],
                     '&:hover': {
                       backgroundColor: alpha(gray[700], 0.3),
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -446,63 +454,66 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -528,7 +539,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -552,7 +563,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -568,38 +579,39 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
-              },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
+              },
+            ],
           }),
         },
       },
@@ -640,7 +652,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -655,7 +667,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[200],
             }),
           }),
@@ -669,9 +681,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -701,7 +711,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -725,33 +735,36 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
+              },
             }),
-            variants: [{
-              props: {
-                color: 'error'
-              },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
                   color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
-                  '& + .MuiFormHelperText-root': {
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
                     color: red[300],
-                  },
-                })
-              }
-            }]
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -793,7 +806,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               height: 16,
               margin: 2,
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               width: 36,
               height: 24,
               padding: 0,
@@ -836,7 +849,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -852,7 +865,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
index bfec5def2b1b3e..879af8347bc71a 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
@@ -231,33 +231,34 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -271,33 +272,35 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  variant: 'outlined',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
                   backgroundColor: alpha(gray[300], 0.1),
                   borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
@@ -311,71 +314,76 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
                   color: brand[700],
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
-                  },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[200],
                     '&:hover': {
                       backgroundColor: alpha(gray[700], 0.3),
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -390,63 +398,66 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
               },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+            ],
           }),
         },
       },
@@ -488,7 +499,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -519,7 +530,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -535,38 +546,39 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -607,7 +619,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -621,9 +633,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -653,7 +663,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -677,33 +687,36 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
                   color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
-                  '& + .MuiFormHelperText-root': {
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
                     color: red[300],
-                  },
-                })
-              }
-            }]
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -725,7 +738,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -741,7 +754,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
index afe40745d8da7f..1fcf2372f8f38a 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
@@ -231,33 +231,34 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -271,33 +272,35 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  variant: 'outlined',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
                   backgroundColor: alpha(gray[300], 0.1),
                   borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
@@ -311,71 +314,76 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
                   color: brand[700],
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
-                  },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[200],
                     '&:hover': {
                       backgroundColor: alpha(gray[700], 0.3),
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -390,62 +398,65 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.2)}`
+              border: `1px solid ${alpha(gray[700], 0.2)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${alpha(gray[200], 0.5)}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
               },
-              style: {
-                border: `1px solid ${alpha(gray[200], 0.5)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+            ],
           }),
         },
       },
@@ -487,7 +498,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -518,7 +529,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -534,38 +545,39 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -606,7 +618,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -620,9 +632,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -652,7 +662,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -676,33 +686,36 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
                   color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
-                  '& + .MuiFormHelperText-root': {
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
                     color: red[300],
-                  },
-                })
-              }
-            }]
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -724,7 +737,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -740,7 +753,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
index 56f02c91754e59..0973b5644caef7 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
@@ -231,33 +231,34 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -271,33 +272,35 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  variant: 'outlined',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
                   backgroundColor: alpha(gray[300], 0.1),
                   borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
@@ -311,71 +314,76 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
                   color: brand[700],
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
-                  },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[200],
                     '&:hover': {
                       backgroundColor: alpha(gray[700], 0.3),
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -390,63 +398,66 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
+                  boxShadow: 'none',
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                },
               },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+            ],
           }),
         },
       },
@@ -488,7 +499,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -519,7 +530,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -535,38 +546,39 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -607,7 +619,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -621,9 +633,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -653,7 +663,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -677,33 +687,36 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[200],
                   color: red[500],
+                  '& + .MuiFormHelperText-root': {
+                    color: red[500],
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
-                  '& + .MuiFormHelperText-root': {
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
                     color: red[300],
-                  },
-                })
-              }
-            }]
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -725,7 +738,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -741,7 +754,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 615d338fa8e9a42fc161b877ac42367ef33bbdc1 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Tue, 30 Apr 2024 15:57:58 -0300
Subject: [PATCH 26/27] Merge matching props (dark styles)

---
 .../templates/checkout/getCheckoutTheme.tsx   | 385 ++++++++----------
 .../templates/landing-page/getLPTheme.tsx     | 376 ++++++++---------
 .../sign-in-side/getSignInSideTheme.tsx       | 368 ++++++++---------
 .../templates/sign-in/getSignInTheme.tsx      | 368 ++++++++---------
 .../templates/sign-up/getSignUpTheme.tsx      | 368 ++++++++---------
 5 files changed, 856 insertions(+), 1009 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
index d1f2c907359167..4063e8ab0a66c9 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx
@@ -223,7 +223,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiAlert-icon': {
               color: orange[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: `${alpha(orange[900], 0.5)}`,
               border: `1px solid ${alpha(orange[800], 0.5)}`,
             }),
@@ -248,33 +248,34 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -288,33 +289,35 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
+                },
               },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
+              {
+                props: {
+                  variant: 'outlined',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                 },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
                   backgroundColor: alpha(gray[300], 0.1),
                   borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
@@ -328,142 +331,119 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
                   color: brand[700],
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                    backgroundImage: 'none',
-                  },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  ...theme.applyStyles('dark', {
                     color: gray[200],
                     '&:hover': {
                       backgroundColor: alpha(gray[700], 0.3),
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
                     '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
                       boxShadow: 'none',
                     },
                     '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  })
-              }
-            }]
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -505,7 +485,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -525,7 +505,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -541,38 +521,39 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -613,7 +594,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -627,9 +608,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -659,7 +638,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -683,33 +662,29 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
-                  color: red[500],
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
                   '& + .MuiFormHelperText-root': {
-                    color: red[300],
+                    color: red[500],
                   },
-                })
-              }
-            }]
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -752,7 +727,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
               border: 'none',
               color: theme.palette.success.main,
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               border: `1px solid ${gray[700]}`,
               '&.Mui-active': {
                 border: 'none',
@@ -766,21 +741,21 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             variants: [
               {
                 props: { completed: true },
-                style: ({
+                style: {
                   width: 12,
-                  height: 12
-                }),
+                  height: 12,
+                },
               },
-            ]
+            ],
           }),
-        }
+        },
       },
       MuiStepLabel: {
         styleOverrides: {
           label: ({ theme }) => ({
             '&.Mui-completed': {
               opacity: 0.6,
-              ...theme.applyStyles("dark", { opacity: 0.5 }),
+              ...theme.applyStyles('dark', { opacity: 0.5 }),
             },
           }),
         },
@@ -793,7 +768,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -809,7 +784,7 @@ export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
index 4e846a98eff604..9aede559b0d583 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.tsx
@@ -244,7 +244,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: gray[900],
               borderColor: gray[800],
             }),
@@ -258,7 +258,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             borderRadius: 8,
             '&:hover': { backgroundColor: gray[100] },
             '&:focus-visible': { backgroundColor: 'transparent' },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '&:hover': { backgroundColor: gray[800] },
             }),
           }),
@@ -287,33 +287,34 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -327,111 +328,65 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -446,63 +401,81 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -528,7 +501,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .MuiChip-icon': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(brand[500], 0.2)}`,
               backgroundColor: `${alpha(brand[900], 0.5)}`,
               '&:hover': {
@@ -552,7 +525,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -568,38 +541,39 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -640,7 +614,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -655,7 +629,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             fontSize: '0.875rem',
             fontWeight: 500,
             borderRadius: theme.shape.borderRadius,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[200],
             }),
           }),
@@ -669,9 +643,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -701,7 +673,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -725,33 +697,29 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
-                  color: red[500],
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
                   '& + .MuiFormHelperText-root': {
-                    color: red[300],
+                    color: red[500],
                   },
-                })
-              }
-            }]
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -793,7 +761,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
               height: 16,
               margin: 2,
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               width: 36,
               height: 24,
               padding: 0,
@@ -836,7 +804,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -852,7 +820,7 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
index bfec5def2b1b3e..1fddb2216b0ddc 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx
@@ -231,33 +231,34 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -271,111 +272,65 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -390,63 +345,81 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -488,7 +461,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -519,7 +492,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -535,38 +508,39 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -607,7 +581,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -621,9 +595,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -653,7 +625,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -677,33 +649,29 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
-                  color: red[500],
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
                   '& + .MuiFormHelperText-root': {
-                    color: red[300],
+                    color: red[500],
                   },
-                })
-              }
-            }]
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -725,7 +693,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -741,7 +709,7 @@ export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
index afe40745d8da7f..75952ee86f3428 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx
@@ -231,33 +231,34 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -271,111 +272,65 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -390,62 +345,80 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.1)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.2)}`
+              border: `1px solid ${alpha(gray[700], 0.2)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${alpha(gray[200], 0.5)}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${alpha(gray[200], 0.5)}`,
                   boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -487,7 +460,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -518,7 +491,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -534,38 +507,39 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -606,7 +580,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -620,9 +594,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -652,7 +624,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -676,33 +648,29 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
-                  color: red[500],
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
                   '& + .MuiFormHelperText-root': {
-                    color: red[300],
+                    color: red[500],
                   },
-                })
-              }
-            }]
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -724,7 +692,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -740,7 +708,7 @@ export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
index 56f02c91754e59..49d69b56765951 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
@@ -231,33 +231,34 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             boxShadow: 'none',
             borderRadius: theme.shape.borderRadius,
             textTransform: 'none',
-            variants: [{
-              props: {
-                size: 'small'
-              },
-              style: {
-                height: '2rem', // 32px
-                padding: '0 0.5rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
               },
-              style: {
-                height: '2.5rem', // 40px
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'contained'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
                   color: 'white',
                   backgroundColor: brand[300],
                   backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
@@ -271,111 +272,65 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                     backgroundColor: brand[700],
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
                   },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                color: brand[700],
-                backgroundColor: alpha(brand[300], 0.1),
-                borderColor: alpha(brand[200], 0.8),
-                boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                '&:hover': {
-                  backgroundColor: alpha(brand[300], 0.2),
-                  borderColor: alpha(brand[300], 0.5),
-                  boxShadow: 'none',
                 },
-                '&:active': {
-                  backgroundColor: alpha(brand[300], 0.3),
-                  boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                  backgroundImage: 'none',
-                },
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
               },
-              style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  backgroundColor: alpha(brand[300], 0.1),
+                  borderColor: alpha(brand[200], 0.8),
+                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
                   '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
+                    backgroundColor: alpha(brand[300], 0.2),
+                    borderColor: alpha(brand[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
-              },
-              style: {
-                  color: brand[700],
-                  '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
+                    backgroundImage: 'none',
                   },
-                }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    backgroundColor: alpha(brand[600], 0.1),
+                    borderColor: alpha(brand[600], 0.6),
+                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.2),
+                      borderColor: alpha(brand[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
+                },
               },
-              style: {
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
                   color: gray[700],
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
-                  },
-                }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  color: brand[200],
-                  backgroundColor: alpha(brand[600], 0.1),
-                  borderColor: alpha(brand[600], 0.6),
-                  boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[700], 0.2),
-                    borderColor: alpha(brand[700], 0.5),
+                    borderColor: alpha(gray[300], 0.5),
                     boxShadow: 'none',
                   },
                   '&:active': {
-                    backgroundColor: alpha(brand[800], 0.2),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                })
-              }
-            }, {
-              props: {
-                color: 'info',
-                variant: 'text'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  })
-              }
-            }, {
-              props: {
-                color: 'secondary',
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
+                  ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
                     borderColor: alpha(gray[700], 0.5),
@@ -390,63 +345,81 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                       boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
                       backgroundImage: 'none',
                     },
-                  })
-              }
-            }, {
-              props: {
-                color: 'primary',
-                variant: 'text'
+                  }),
+                },
               },
-              style: {
-                ...theme.applyStyles("dark", {
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
                       backgroundColor: alpha(brand[700], 0.3),
                     },
-                  })
-              }
-            }]
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
       MuiCard: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             transition: 'all 100ms ease',
             backgroundColor: gray[50],
             borderRadius: theme.shape.borderRadius,
             border: `1px solid ${alpha(gray[200], 0.5)}`,
             boxShadow: 'none',
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`
+              border: `1px solid ${alpha(gray[700], 0.3)}`,
             }),
-            variants: [{
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                border: `1px solid ${gray[200]}`,
-                boxShadow: 'none',
-                background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-              }
-            }, {
-              props: {
-                variant: 'outlined'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  border: `1px solid ${alpha(gray[700], 0.4)}`,
+            variants: [
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
-                  background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                    gray[800],
-                    0.5,
-                  )})`,
-                })
-              }
-            }]
+                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  ...theme.applyStyles('dark', {
+                    border: `1px solid ${alpha(gray[700], 0.4)}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                      gray[800],
+                      0.5,
+                    )})`,
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -488,7 +461,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 backgroundColor: brand[600],
               },
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: alpha(gray[700], 0.5),
               boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
               backgroundColor: alpha(gray[900], 0.8),
@@ -519,7 +492,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
         styleOverrides: {
           root: ({ theme }) => ({
             borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               borderColor: `${alpha(gray[700], 0.4)}`,
             }),
           }),
@@ -535,38 +508,39 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
       },
       MuiIconButton: {
         styleOverrides: {
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             color: brand[500],
             '&:hover': {
               backgroundColor: alpha(brand[300], 0.3),
               borderColor: brand[200],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
               '&:hover': {
                 backgroundColor: alpha(brand[600], 0.3),
                 borderColor: brand[700],
               },
             }),
-            variants: [{
-              props: {
-                size: 'small'
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  width: '2rem',
+                },
               },
-              style: {
-                height: '2rem',
-                width: '2rem',
-              }
-            }, {
-              props: {
-                size: 'medium'
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                  width: '2.5rem',
+                },
               },
-              style: {
-                height: '2.5rem',
-                width: '2.5rem',
-              }
-            }]
+            ],
           }),
         },
       },
@@ -607,7 +581,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '4px',
               borderRadius: '2px',
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: brand[200],
             }),
           }),
@@ -621,9 +595,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
           input: {
             paddingLeft: 10,
           },
-          root: ({
-            theme
-          }) => ({
+          root: ({ theme }) => ({
             'input:-webkit-autofill': {
               WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
               maxHeight: '4px',
@@ -653,7 +625,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
               outlineOffset: '2px',
               borderColor: brand[400],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               'input:-webkit-autofill': {
                 WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
                 maxHeight: '6px',
@@ -677,33 +649,29 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
                 borderColor: brand[400],
                 outline: `3px solid ${alpha(brand[500], 0.5)}`,
                 outlineOffset: '2px',
-              }
-            }),
-            variants: [{
-              props: {
-                color: 'error'
               },
-              style: {
-                borderColor: red[200],
-                color: red[500],
-                '& + .MuiFormHelperText-root': {
-                  color: red[500],
+            }),
+            variants: [
+              {
+                props: {
+                  color: 'error',
                 },
-              }
-            }, {
-              props: {
-                color: 'error'
-              },
-              style: {
-                ...theme.applyStyles("dark", {
-                  borderColor: red[700],
-                  color: red[300],
+                style: {
+                  borderColor: red[200],
+                  color: red[500],
                   '& + .MuiFormHelperText-root': {
-                    color: red[300],
+                    color: red[500],
                   },
-                })
-              }
-            }]
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[700],
+                    color: red[300],
+                    '& + .MuiFormHelperText-root': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
           }),
         },
       },
@@ -725,7 +693,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             '& .Mui-selected': {
               color: brand[500],
             },
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               '& .Mui-selected': {
                 color: 'hsl(0, 0%, 100%)',
               },
@@ -741,7 +709,7 @@ export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
             textTransform: 'none',
             borderRadius: theme.shape.borderRadius,
             fontWeight: 500,
-            ...theme.applyStyles("dark", {
+            ...theme.applyStyles('dark', {
               color: gray[400],
               '&.Mui-selected': { color: brand[300] },
             }),

From 3d906e19fe9744ec683f0bcf900572aea1da381c Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Tue, 30 Apr 2024 15:58:45 -0300
Subject: [PATCH 27/27] Run docs:typescript:formatted

---
 .../templates/checkout/getCheckoutTheme.js    |  94 +++++---------
 .../templates/landing-page/getLPTheme.js      | 115 ++++++------------
 .../sign-in-side/getSignInSideTheme.js        | 115 ++++++------------
 .../templates/sign-in/getSignInTheme.js       | 115 ++++++------------
 .../templates/sign-up/getSignUpTheme.js       | 115 ++++++------------
 5 files changed, 168 insertions(+), 386 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
index 8ea211451f883d..e9588f9f73d94a 100644
--- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
+++ b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js
@@ -313,6 +313,22 @@ export default function getCheckoutTheme(mode) {
                     boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
+                  ...theme.applyStyles('dark', {
+                    color: gray[300],
+                    backgroundColor: alpha(gray[600], 0.1),
+                    borderColor: alpha(gray[700], 0.5),
+                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.2),
+                      borderColor: alpha(gray[700], 0.5),
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[800], 0.2),
+                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
+                      backgroundImage: 'none',
+                    },
+                  }),
                 },
               },
               {
@@ -325,6 +341,12 @@ export default function getCheckoutTheme(mode) {
                   '&:hover': {
                     backgroundColor: alpha(brand[300], 0.3),
                   },
+                  ...theme.applyStyles('dark', {
+                    color: brand[200],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[700], 0.3),
+                    },
+                  }),
                 },
               },
               {
@@ -337,6 +359,12 @@ export default function getCheckoutTheme(mode) {
                   '&:hover': {
                     backgroundColor: alpha(gray[300], 0.3),
                   },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
                 },
               },
               {
@@ -362,58 +390,6 @@ export default function getCheckoutTheme(mode) {
                   }),
                 },
               },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
             ],
           }),
         },
@@ -439,13 +415,6 @@ export default function getCheckoutTheme(mode) {
                   border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
                   background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     border: `1px solid ${alpha(gray[700], 0.4)}`,
                     boxShadow: 'none',
@@ -688,13 +657,6 @@ export default function getCheckoutTheme(mode) {
                   '& + .MuiFormHelperText-root': {
                     color: red[500],
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     borderColor: red[700],
                     color: red[300],
diff --git a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
index 3723f03ffcb007..ee5fe72b1a3def 100644
--- a/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
+++ b/docs/data/material/getting-started/templates/landing-page/getLPTheme.js
@@ -330,58 +330,6 @@ export default function getLPTheme(mode) {
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     backgroundColor: alpha(brand[600], 0.1),
@@ -400,26 +348,25 @@ export default function getLPTheme(mode) {
                   }),
                 },
               },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
               {
                 props: {
                   color: 'secondary',
                   variant: 'outlined',
                 },
                 style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                   ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
@@ -444,6 +391,10 @@ export default function getLPTheme(mode) {
                   variant: 'text',
                 },
                 style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
@@ -452,6 +403,24 @@ export default function getLPTheme(mode) {
                   }),
                 },
               },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
             ],
           }),
         },
@@ -477,13 +446,6 @@ export default function getLPTheme(mode) {
                   border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
                   background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     border: `1px solid ${alpha(gray[700], 0.4)}`,
                     boxShadow: 'none',
@@ -729,13 +691,6 @@ export default function getLPTheme(mode) {
                   '& + .MuiFormHelperText-root': {
                     color: red[500],
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     borderColor: red[700],
                     color: red[300],
diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
index 9f91f0efccfe9f..406f3df6e4fe32 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js
@@ -275,58 +275,6 @@ export default function getSignInSideTheme(mode) {
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     backgroundColor: alpha(brand[600], 0.1),
@@ -345,26 +293,25 @@ export default function getSignInSideTheme(mode) {
                   }),
                 },
               },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
               {
                 props: {
                   color: 'secondary',
                   variant: 'outlined',
                 },
                 style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                   ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
@@ -389,6 +336,10 @@ export default function getSignInSideTheme(mode) {
                   variant: 'text',
                 },
                 style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
@@ -397,6 +348,24 @@ export default function getSignInSideTheme(mode) {
                   }),
                 },
               },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
             ],
           }),
         },
@@ -422,13 +391,6 @@ export default function getSignInSideTheme(mode) {
                   border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
                   background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     border: `1px solid ${alpha(gray[700], 0.4)}`,
                     boxShadow: 'none',
@@ -682,13 +644,6 @@ export default function getSignInSideTheme(mode) {
                   '& + .MuiFormHelperText-root': {
                     color: red[500],
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     borderColor: red[700],
                     color: red[300],
diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
index f3072d497aebae..e0a4984d4885d5 100644
--- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
+++ b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js
@@ -275,58 +275,6 @@ export default function getSignInTheme(mode) {
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     backgroundColor: alpha(brand[600], 0.1),
@@ -345,26 +293,25 @@ export default function getSignInTheme(mode) {
                   }),
                 },
               },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
               {
                 props: {
                   color: 'secondary',
                   variant: 'outlined',
                 },
                 style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                   ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
@@ -389,6 +336,10 @@ export default function getSignInTheme(mode) {
                   variant: 'text',
                 },
                 style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
@@ -397,6 +348,24 @@ export default function getSignInTheme(mode) {
                   }),
                 },
               },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
             ],
           }),
         },
@@ -421,13 +390,6 @@ export default function getSignInTheme(mode) {
                   border: `1px solid ${alpha(gray[200], 0.5)}`,
                   boxShadow: 'none',
                   background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     border: `1px solid ${alpha(gray[700], 0.4)}`,
                     boxShadow: 'none',
@@ -681,13 +643,6 @@ export default function getSignInTheme(mode) {
                   '& + .MuiFormHelperText-root': {
                     color: red[500],
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     borderColor: red[700],
                     color: red[300],
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
index 920f9946bb05db..515951fceaa92d 100644
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
+++ b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
@@ -275,58 +275,6 @@ export default function getSignUpTheme(mode) {
                     boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
                     backgroundImage: 'none',
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     backgroundColor: alpha(brand[600], 0.1),
@@ -345,26 +293,25 @@ export default function getSignUpTheme(mode) {
                   }),
                 },
               },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
               {
                 props: {
                   color: 'secondary',
                   variant: 'outlined',
                 },
                 style: {
+                  backgroundColor: alpha(gray[300], 0.1),
+                  borderColor: alpha(gray[300], 0.5),
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                    borderColor: alpha(gray[300], 0.5),
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(gray[300], 0.4),
+                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
+                    backgroundImage: 'none',
+                  },
                   ...theme.applyStyles('dark', {
                     color: gray[300],
                     backgroundColor: alpha(gray[600], 0.1),
@@ -389,6 +336,10 @@ export default function getSignUpTheme(mode) {
                   variant: 'text',
                 },
                 style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[300], 0.3),
+                  },
                   ...theme.applyStyles('dark', {
                     color: brand[200],
                     '&:hover': {
@@ -397,6 +348,24 @@ export default function getSignUpTheme(mode) {
                   }),
                 },
               },
+              {
+                props: {
+                  color: 'info',
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[700],
+                  '&:hover': {
+                    backgroundColor: alpha(gray[300], 0.3),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[200],
+                    '&:hover': {
+                      backgroundColor: alpha(gray[700], 0.3),
+                    },
+                  }),
+                },
+              },
             ],
           }),
         },
@@ -422,13 +391,6 @@ export default function getSignUpTheme(mode) {
                   border: `1px solid ${gray[200]}`,
                   boxShadow: 'none',
                   background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     border: `1px solid ${alpha(gray[700], 0.4)}`,
                     boxShadow: 'none',
@@ -682,13 +644,6 @@ export default function getSignUpTheme(mode) {
                   '& + .MuiFormHelperText-root': {
                     color: red[500],
                   },
-                },
-              },
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
                   ...theme.applyStyles('dark', {
                     borderColor: red[700],
                     color: red[300],