@mui/codemod 7.1.1 → 7.3.0

package/README.md

@@ -1083,6 +1083,28 @@ CSS transforms:
 npx @mui/codemod@latest deprecations/dialog-classes <path>
 ```
 
+#### `dialog-props`
+
+JS transforms:
+
+```diff
+ <Dialog
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+- TransitionComponent={CustomTransition}
++ slots={{ transition: CustomTransition }}
+- TransitionProps={CustomTransitionProps}
++ slotProps={{ transition: CustomTransitionProps }}
+ />
+     },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@latest deprecations/dialog-props <path>
+```
+
 #### `drawer-classes`
 
 JS transforms:
@@ -2134,6 +2156,27 @@ npx @mui/codemod@latest deprecations/typography-props <path>
 
 ### v7.0.0
 
+#### `theme-color-functions`
+
+```bash
+npx @mui/codemod@latest v7.0.0/theme-color-functions <path>
+```
+
+Replace the usage of the `alpha()`, `lighten()`, and `darken()` functions from `@mui/system/colorManipulator` to use the `theme` object instead.
+
+```diff
+- import { alpha, lighten, darken } from '@mui/system/colorManipulator';
+
+- alpha(theme.palette.primary.main, 0.8)
++ theme.alpha((theme.vars || theme).palette.primary.main, 0.8)
+
+- lighten(theme.palette.primary.main, 0.1)
++ theme.lighten(theme.palette.primary.main, 0.1)
+
+- darken(theme.palette.primary.main, 0.3)
++ theme.darken(theme.palette.primary.main, 0.3)
+```
+
 #### `grid-props`
 
 <!-- #npm-tag-reference -->

package/deprecations/all/deprecations-all.js

@@ -20,6 +20,7 @@ var _circularProgressClasses = _interopRequireDefault(require("../circular-progr
 var _dividerProps = _interopRequireDefault(require("../divider-props"));
 var _drawerClasses = _interopRequireDefault(require("../drawer-classes"));
 var _dialogClasses = _interopRequireDefault(require("../dialog-classes"));
+var _dialogProps = _interopRequireDefault(require("../dialog-props"));
 var _filledInputProps = _interopRequireDefault(require("../filled-input-props"));
 var _formControlLabelProps = _interopRequireDefault(require("../form-control-label-props"));
 var _imageListItemBarClasses = _interopRequireDefault(require("../image-list-item-bar-classes"));
@@ -76,6 +77,7 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _dividerProps.default)(file, api, options);
   file.source = (0, _drawerClasses.default)(file, api, options);
   file.source = (0, _dialogClasses.default)(file, api, options);
+  file.source = (0, _dialogProps.default)(file, api, options);
   file.source = (0, _filledInputProps.default)(file, api, options);
   file.source = (0, _formControlLabelProps.default)(file, api, options);
   file.source = (0, _imageListItemBarClasses.default)(file, api, options);

package/deprecations/dialog-props/dialog-props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _movePropIntoSlots = _interopRequireDefault(require("../utils/movePropIntoSlots"));
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _movePropIntoSlots.default)(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Dialog',
+    propName: 'TransitionComponent',
+    slotName: 'transition'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Dialog',
+    propName: 'TransitionProps',
+    slotName: 'transition'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Dialog',
+    propName: 'PaperProps',
+    slotName: 'paper'
+  });
+  return root.toSource(printOptions);
+}

package/deprecations/dialog-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _dialogProps.default;
+  }
+});
+var _dialogProps = _interopRequireDefault(require("./dialog-props"));

package/deprecations/dialog-props/test-cases/actual.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div'
+  },
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    ...outerSlots
+  },
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  TransitionComponent: ComponentTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  },
+  PaperProps: PaperProps
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiDialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});

package/deprecations/dialog-props/test-cases/expected.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  slots: {
+    ...outerSlots,
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiDialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});

package/deprecations/dialog-props/test-cases/package.actual.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Dialog = _interopRequireDefault(require("@org/ui/material/Dialog"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div'
+  },
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    ...outerSlots
+  },
+  PaperProps: PaperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  TransitionComponent: ComponentTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  },
+  PaperProps: PaperProps
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiDialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});

package/deprecations/dialog-props/test-cases/package.expected.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Dialog = _interopRequireDefault(require("@org/ui/material/Dialog"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Dialog, {
+  slots: {
+    ...outerSlots,
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiDialog, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  PaperProps: PaperProps
+});

package/deprecations/dialog-props/test-cases/theme.actual.js

@@ -0,0 +1,36 @@
+"use strict";
+
+fn({
+  MuiDialog: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      PaperProps: PaperProps
+    }
+  }
+});
+fn({
+  MuiDialog: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div'
+      },
+      PaperProps: PaperProps
+    }
+  }
+});
+fn({
+  MuiDialog: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      },
+      PaperProps: PaperProps
+    }
+  }
+});

package/deprecations/dialog-props/test-cases/theme.expected.js

@@ -0,0 +1,43 @@
+"use strict";
+
+fn({
+  MuiDialog: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps,
+        paper: PaperProps
+      }
+    }
+  }
+});
+fn({
+  MuiDialog: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps,
+        paper: PaperProps
+      }
+    }
+  }
+});
+fn({
+  MuiDialog: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps,
+        paper: PaperProps
+      }
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "7.1.1",
+  "version": "7.3.0",
   "author": "MUI Team",
   "description": "Codemod scripts for Material UI.",
   "bin": "./codemod.js",
@@ -23,32 +23,46 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/runtime": "^7.27.1",
-    "@babel/traverse": "^7.27.1",
+    "@babel/core": "^7.28.0",
+    "@babel/runtime": "^7.28.2",
+    "@babel/traverse": "^7.28.0",
     "jscodeshift": "^17.1.2",
     "jscodeshift-add-imports": "^1.0.11",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "yargs": "^17.7.2"
   },
-  "devDependencies": {
-    "@types/chai": "^4.3.20",
-    "@types/jscodeshift": "0.12.0",
-    "chai": "^4.5.0"
-  },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "engines": {
     "node": ">=14.0.0"
   },
-  "scripts": {
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.?(c|m)[jt]s?(x)'",
-    "prebuild": "rimraf build",
-    "build": "node ../../scripts/build.mjs node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build",
-    "release": "pnpm build && pnpm publish"
+  "private": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      }
+    },
+    "./*": {
+      "require": {
+        "types": "./*/index.d.ts",
+        "default": "./*/index.js"
+      },
+      "import": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
+      }
+    },
+    "./esm": null,
+    "./modern": null
   }
 }

package/v5.0.0/top-level-imports.js

@@ -62,7 +62,7 @@ function transformer(fileInfo, api, options) {
             break;
           }
         case 'ImportSpecifier':
-          if (!whitelist.has(specifier.imported.name) == null && specifier.imported.name !== 'withStyles') {
+          if (!whitelist.has(specifier.imported.name) && specifier.imported.name !== 'withStyles') {
             return;
           }
           resultSpecifiers.push(specifier);

package/v5.0.0/top-level-imports.test/actual.js

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/styles");
-var _material = require("@mui/material");
 var _styles2 = require("@mui/material/styles");
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
@@ -59,4 +58,5 @@ var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
 var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
 var _Zoom = _interopRequireDefault(require("@mui/material/Zoom"));
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
-var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _colors = require("@mui/material/colors");

package/v5.0.0/top-level-imports.test/expected.js

@@ -3,4 +3,6 @@
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/styles");
+var _styles2 = require("@mui/material/styles");
+var _colors = require("@mui/material/colors");
 var _material = require("@mui/material");

package/v7.0.0/theme-color-functions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _themeColorFunctions.default;
+  }
+});
+var _themeColorFunctions = _interopRequireDefault(require("./theme-color-functions"));

package/v7.0.0/theme-color-functions/test-cases/actual.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Value = styled('div')(({
+  theme
+}) => ({
+  width: '100%',
+  height: '100%',
+  lineHeight: '100%',
+  paddingRight: 8,
+  fontVariantNumeric: 'tabular-nums',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  '&.good': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)` : (0, _colorManipulator.alpha)(theme.palette.success.main, 0.3)
+  },
+  '&.bad': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.error.mainChannel} /  0.3)` : (0, _colorManipulator.alpha)(theme.palette.error.main, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/darken-basic.actual.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Button = styled('button')(({
+  theme
+}) => ({
+  backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.1),
+  '&:active': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.3)
+  },
+  '&:disabled': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.action.disabled, 0.1)
+  }
+}));
+const Card = styled('div')(({
+  theme
+}) => ({
+  boxShadow: `0 2px 4px ${(0, _colorManipulator.darken)(theme.palette.background.paper, 0.15)}`,
+  borderColor: (0, _colorManipulator.darken)(theme.palette.divider, 0.2)
+}));

package/v7.0.0/theme-color-functions/test-cases/darken-basic.expected.js

@@ -0,0 +1,19 @@
+"use strict";
+
+const Button = styled('button')(({
+  theme
+}) => ({
+  backgroundColor: theme.darken(theme.palette.primary.main, 0.1),
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.main, 0.3)
+  },
+  '&:disabled': {
+    backgroundColor: theme.darken(theme.palette.action.disabled, 0.1)
+  }
+}));
+const Card = styled('div')(({
+  theme
+}) => ({
+  boxShadow: `0 2px 4px ${theme.darken(theme.palette.background.paper, 0.15)}`,
+  borderColor: theme.darken(theme.palette.divider, 0.2)
+}));

package/v7.0.0/theme-color-functions/test-cases/expected.js

@@ -0,0 +1,20 @@
+"use strict";
+
+const Value = styled('div')(({
+  theme
+}) => ({
+  width: '100%',
+  height: '100%',
+  lineHeight: '100%',
+  paddingRight: 8,
+  fontVariantNumeric: 'tabular-nums',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  '&.good': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.success.main, 0.3)
+  },
+  '&.bad': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.error.main, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/lighten-basic.actual.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.main, 0.2),
+  color: (0, _colorManipulator.lighten)(theme.palette.text.primary, 0.5),
+  border: `1px solid ${(0, _colorManipulator.lighten)(theme.palette.divider, 0.1)}`,
+  '&:hover': {
+    backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.dark, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/lighten-basic.expected.js

@@ -0,0 +1,12 @@
+"use strict";
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.lighten(theme.palette.primary.main, 0.2),
+  color: theme.lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${theme.lighten(theme.palette.divider, 0.1)}`,
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.dark, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mixed-functions.actual.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const ComplexComponent = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.1),
+  border: `2px solid ${(0, _colorManipulator.lighten)(theme.palette.primary.main, 0.5)}`,
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.2)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.2),
+    borderColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.dark, 0.1),
+    color: (0, _colorManipulator.lighten)(theme.palette.primary.contrastText, 0.3)
+  }
+}));