diff --git a/packages/design-system/.eslintrc.js b/packages/design-system/.eslintrc.js
index eb1410d232..77052a5c9e 100644
--- a/packages/design-system/.eslintrc.js
+++ b/packages/design-system/.eslintrc.js
@@ -4,25 +4,25 @@ module.exports = {
 		node: true,
 	},
 	extends: [
-		"plugin:vue/essential",
-		"eslint:recommended",
-		"@vue/typescript/recommended",
-		"@vue/prettier",
-		"@vue/prettier/@typescript-eslint",
+		'plugin:vue/essential',
+		'eslint:recommended',
+		'@vue/typescript/recommended',
+		'@vue/prettier',
+		'@vue/prettier/@typescript-eslint',
 	],
 	parserOptions: {
 		ecmaVersion: 2020,
 	},
 	rules: {
-		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 	},
-	ignorePatterns: ["gulpfile.js"],
+	ignorePatterns: ['gulpfile.js'],
 	overrides: [
 		{
 			files: [
-				"**/__tests__/*.{j,t}s?(x)",
-				"**/tests/unit/**/*.spec.{j,t}s?(x)",
+				'**/__tests__/*.{j,t}s?(x)',
+				'**/tests/unit/**/*.spec.{j,t}s?(x)',
 			],
 			env: {
 				jest: true,
diff --git a/packages/design-system/.github/workflows/deploy.yml b/packages/design-system/.github/workflows/deploy.yml
index 2ab9ccee75..e36ce054ef 100644
--- a/packages/design-system/.github/workflows/deploy.yml
+++ b/packages/design-system/.github/workflows/deploy.yml
@@ -9,7 +9,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     env:
-      NODE_OPTIONS: "--max_old_space_size=4096"
+      NODE_OPTIONS: '--max_old_space_size=4096'
     steps:
       - uses: actions/checkout@v2
       - name: Build and deploy
@@ -37,4 +37,4 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: gh-pages
           force: true
-          directory: "storybook-static"
+          directory: 'storybook-static'
diff --git a/packages/design-system/.storybook/font-awesome-icons.js b/packages/design-system/.storybook/font-awesome-icons.js
index 78410be1d8..e5a2cb11d1 100644
--- a/packages/design-system/.storybook/font-awesome-icons.js
+++ b/packages/design-system/.storybook/font-awesome-icons.js
@@ -1,4 +1,4 @@
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { library } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
 	faAngleDown,
@@ -80,8 +80,8 @@ import {
 	faUndo,
 	faUsers,
 	faClock,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 library.add(faAngleDoubleLeft);
 library.add(faAngleDown);
diff --git a/packages/design-system/.storybook/fonts.scss b/packages/design-system/.storybook/fonts.scss
index 67902a3696..e6e5ab65d6 100644
--- a/packages/design-system/.storybook/fonts.scss
+++ b/packages/design-system/.storybook/fonts.scss
@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index 0b70dedc38..9cd8b91c03 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -1,12 +1,12 @@
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-	stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"storybook-addon-designs",
-		"storybook-addon-themes",
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'storybook-addon-designs',
+		'storybook-addon-themes',
 	],
 	webpackFinal: async (config, { configType }) => {
 		config.module.rules.push({
@@ -15,20 +15,20 @@ module.exports = {
 				{
 					resourceQuery: /module/,
 					use: [
-						"vue-style-loader",
+						'vue-style-loader',
 						{
-							loader: "css-loader",
+							loader: 'css-loader',
 							options: {
 								modules: true,
 							},
 						},
-						"sass-loader",
+						'sass-loader',
 					],
-					include: path.resolve(__dirname, "../"),
+					include: path.resolve(__dirname, '../'),
 				},
 				{
-					use: ["vue-style-loader", "css-loader", "sass-loader"],
-					include: path.resolve(__dirname, "../"),
+					use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+					include: path.resolve(__dirname, '../'),
 				},
 			],
 		});
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
index 5066de4ec9..4629255e49 100644
--- a/packages/design-system/.storybook/preview.js
+++ b/packages/design-system/.storybook/preview.js
@@ -1,7 +1,7 @@
-import "./font-awesome-icons";
-import "./storybook.scss";
+import './font-awesome-icons';
+import './storybook.scss';
 
-import Vue from "vue";
+import Vue from 'vue';
 
 // https://github.com/storybookjs/storybook/issues/6153
 Vue.prototype.toJSON = function () {
@@ -10,7 +10,7 @@ Vue.prototype.toJSON = function () {
 
 export const parameters = {
 	actions: {
-		argTypesRegex: "^on[A-Z].*",
+		argTypesRegex: '^on[A-Z].*',
 	},
 	controls: {
 		matchers: {
@@ -19,42 +19,42 @@ export const parameters = {
 		},
 	},
 	backgrounds: {
-		default: "--color-background-xlight",
+		default: '--color-background-xlight',
 		values: [
 			{
-				name: "--color-background-dark",
-				value: "var(--color-background-dark)",
+				name: '--color-background-dark',
+				value: 'var(--color-background-dark)',
 			},
 			{
-				name: "--color-background-base",
-				value: "var(--color-background-base)",
+				name: '--color-background-base',
+				value: 'var(--color-background-base)',
 			},
 			{
-				name: "--color-background-light",
-				value: "var(--color-background-light)",
+				name: '--color-background-light',
+				value: 'var(--color-background-light)',
 			},
 			{
-				name: "--color-background-lighter",
-				value: "var(--color-background-lighter)",
+				name: '--color-background-lighter',
+				value: 'var(--color-background-lighter)',
 			},
 			{
-				name: "--color-background-xlight",
-				value: "var(--color-background-xlight)",
+				name: '--color-background-xlight',
+				value: 'var(--color-background-xlight)',
 			},
 		],
 	},
 	themes: {
 		list: [
 			{
-				name: "dark",
-				class: "theme-dark",
-				color: "#000",
+				name: 'dark',
+				class: 'theme-dark',
+				color: '#000',
 			},
 		],
 	},
 	options: {
 		storySort: {
-			order: ["Docs", "Styleguide", "Atoms"],
+			order: ['Docs', 'Styleguide', 'Atoms'],
 		},
 	},
 };
diff --git a/packages/design-system/babel.config.js b/packages/design-system/babel.config.js
index 99916a7873..dcd852039e 100644
--- a/packages/design-system/babel.config.js
+++ b/packages/design-system/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-	presets: ["@vue/cli-plugin-babel/preset"],
+	presets: ['@vue/cli-plugin-babel/preset'],
 };
diff --git a/packages/design-system/gulpfile.js b/packages/design-system/gulpfile.js
index c168856ee6..6c78d2b83d 100644
--- a/packages/design-system/gulpfile.js
+++ b/packages/design-system/gulpfile.js
@@ -1,36 +1,36 @@
-"use strict";
+'use strict';
 
-const gulp = require("gulp");
-const sass = require("gulp-dart-sass");
-const autoprefixer = require("gulp-autoprefixer");
-const cleanCSS = require("gulp-clean-css");
+const gulp = require('gulp');
+const sass = require('gulp-dart-sass');
+const autoprefixer = require('gulp-autoprefixer');
+const cleanCSS = require('gulp-clean-css');
 
-gulp.task("build:theme", gulp.series([compileTheme, copyThemeFonts]));
+gulp.task('build:theme', gulp.series([compileTheme, copyThemeFonts]));
 
 gulp.task(
-	"watch:theme",
+	'watch:theme',
 	gulp.series([
-		"build:theme",
+		'build:theme',
 		() => {
-			gulp.watch("./theme/src/**/*.scss", gulp.series(["build:theme"]));
+			gulp.watch('./theme/src/**/*.scss', gulp.series(['build:theme']));
 		},
-	])
+	]),
 );
 
 function compileTheme() {
 	return gulp
-		.src("./theme/src/*.scss")
+		.src('./theme/src/*.scss')
 		.pipe(sass.sync())
 		.pipe(
 			autoprefixer({
-				browsers: ["ie > 9", "last 2 versions"],
+				browsers: ['ie > 9', 'last 2 versions'],
 				cascade: false,
-			})
+			}),
 		)
 		.pipe(cleanCSS())
-		.pipe(gulp.dest("./theme/dist"));
+		.pipe(gulp.dest('./theme/dist'));
 }
 
 function copyThemeFonts() {
-	return gulp.src("./theme/src/fonts/**").pipe(gulp.dest("./theme/dist/fonts"));
+	return gulp.src('./theme/src/fonts/**').pipe(gulp.dest('./theme/dist/fonts'));
 }
diff --git a/packages/design-system/jest.config.js b/packages/design-system/jest.config.js
index c6ec092f1a..ce8dfc33cd 100644
--- a/packages/design-system/jest.config.js
+++ b/packages/design-system/jest.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-	preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+	preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
 };
diff --git a/packages/design-system/src/components/N8nButton/Button.stories.js b/packages/design-system/src/components/N8nButton/Button.stories.js
index ca12ca984d..722892afb6 100644
--- a/packages/design-system/src/components/N8nButton/Button.stories.js
+++ b/packages/design-system/src/components/N8nButton/Button.stories.js
@@ -1,69 +1,69 @@
-import N8nButton from "./Button.vue";
-import { action } from "@storybook/addon-actions";
+import N8nButton from './Button.vue';
+import { action } from '@storybook/addon-actions';
 
 export default {
-	title: "Atoms/Button",
+	title: 'Atoms/Button',
 	component: N8nButton,
 	argTypes: {
 		label: {
-			control: "text",
+			control: 'text',
 		},
 		title: {
-			control: "text",
+			control: 'text',
 		},
 		type: {
-			control: "select",
-			options: ["primary", "outline", "light", "text"],
+			control: 'select',
+			options: ['primary', 'outline', 'light', 'text'],
 		},
 		size: {
 			control: {
-				type: "select",
-				options: ["sm", "md", "lg"],
+				type: 'select',
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 		loading: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 		icon: {
 			control: {
-				type: "text",
+				type: 'text',
 			},
 		},
 		iconSize: {
 			control: {
-				type: "select",
-				options: ["sm", "md", "lg"],
+				type: 'select',
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 		circle: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 		fullWidth: {
-			type: "boolean",
+			type: 'boolean',
 		},
 		theme: {
-			type: "select",
-			options: ["success", "danger", "warning"],
+			type: 'select',
+			options: ['success', 'danger', 'warning'],
 		},
 		float: {
-			type: "select",
-			options: ["left", "right"],
+			type: 'select',
+			options: ['left', 'right'],
 		},
 	},
 	parameters: {
 		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147",
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147',
 		},
 	},
 };
 
 const methods = {
-	onClick: action("click"),
+	onClick: action('click'),
 };
 
 const Template = (args, { argTypes }) => ({
@@ -77,7 +77,7 @@ const Template = (args, { argTypes }) => ({
 
 export const Button = Template.bind({});
 Button.args = {
-	label: "Button",
+	label: 'Button',
 };
 
 const ManyTemplate = (args, { argTypes }) => ({
@@ -92,31 +92,31 @@ const ManyTemplate = (args, { argTypes }) => ({
 
 export const Primary = ManyTemplate.bind({});
 Primary.args = {
-	type: "primary",
-	label: "Button",
+	type: 'primary',
+	label: 'Button',
 };
 
 export const Outline = ManyTemplate.bind({});
 Outline.args = {
-	type: "outline",
-	label: "Button",
+	type: 'outline',
+	label: 'Button',
 };
 
 export const Light = ManyTemplate.bind({});
 Light.args = {
-	type: "light",
-	label: "Button",
+	type: 'light',
+	label: 'Button',
 };
 
 export const WithIcon = ManyTemplate.bind({});
 WithIcon.args = {
-	label: "Button",
-	icon: "plus-circle",
+	label: 'Button',
+	icon: 'plus-circle',
 };
 
 export const Text = ManyTemplate.bind({});
 Text.args = {
-	type: "text",
-	label: "Button",
-	icon: "plus-circle",
+	type: 'text',
+	label: 'Button',
+	icon: 'plus-circle',
 };
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index e673116a6e..8e6eba5a8d 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -30,18 +30,18 @@
 </template>
 
 <script lang="ts">
-import N8nIcon from "../N8nIcon";
-import N8nSpinner from "../N8nSpinner";
-import ElButton from "element-ui/packages/button";
+import N8nIcon from '../N8nIcon';
+import N8nSpinner from '../N8nSpinner';
+import ElButton from 'element-ui/packages/button';
 
 const sizeMap: { [size: string]: string } = {
-	sm: "small",
-	md: "medium",
-	lg: "",
+	sm: 'small',
+	md: 'medium',
+	lg: '',
 };
 
 export default {
-	name: "n8n-button",
+	name: 'n8n-button',
 	props: {
 		label: {
 			type: String,
@@ -51,20 +51,20 @@ export default {
 		},
 		type: {
 			type: String,
-			default: "primary",
+			default: 'primary',
 			validator: (value: string): boolean =>
-				["primary", "outline", "light", "text"].indexOf(value) !== -1,
+				['primary', 'outline', 'light', 'text'].indexOf(value) !== -1,
 		},
 		theme: {
 			type: String,
 			validator: (value: string): boolean =>
-				["success", "warning", "danger"].indexOf(value) !== -1,
+				['success', 'warning', 'danger'].indexOf(value) !== -1,
 		},
 		size: {
 			type: String,
-			default: "md",
+			default: 'md',
 			validator: (value: string): boolean =>
-				["sm", "md", "lg"].indexOf(value) !== -1,
+				['sm', 'md', 'lg'].indexOf(value) !== -1,
 		},
 		loading: {
 			type: Boolean,
@@ -87,7 +87,7 @@ export default {
 		float: {
 			type: String,
 			validator: (value: string): boolean =>
-				["left", "right"].indexOf(value) !== -1,
+				['left', 'right'].indexOf(value) !== -1,
 		},
 		fullWidth: {
 			type: Boolean,
@@ -106,13 +106,13 @@ export default {
 	}): { float?: string; width?: string } => {
 		return {
 			...(props.float ? { float: props.float } : {}),
-			...(props.fullWidth ? { width: "100%" } : {}),
+			...(props.fullWidth ? { width: '100%' } : {}),
 		};
 	},
 	getClass(props: { type: string; theme?: string }): string {
-		return props.type === "text"
-			? "text"
-			: `${props.type}-${props.theme || "primary"}`;
+		return props.type === 'text'
+			? 'text'
+			: `${props.type}-${props.theme || 'primary'}`;
 	},
 };
 </script>
diff --git a/packages/design-system/src/components/N8nButton/index.js b/packages/design-system/src/components/N8nButton/index.js
index e4c0ab2f2c..f477689bf3 100644
--- a/packages/design-system/src/components/N8nButton/index.js
+++ b/packages/design-system/src/components/N8nButton/index.js
@@ -1,3 +1,3 @@
-import N8nButton from "./Button.vue";
+import N8nButton from './Button.vue';
 
 export default N8nButton;
diff --git a/packages/design-system/src/components/N8nIcon/Icon.stories.js b/packages/design-system/src/components/N8nIcon/Icon.stories.js
index 0a2a4ef498..103dc9d80b 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.stories.js
+++ b/packages/design-system/src/components/N8nIcon/Icon.stories.js
@@ -1,21 +1,21 @@
-import N8nIcon from "./Icon.vue";
+import N8nIcon from './Icon.vue';
 
 export default {
-	title: "Atoms/Icon",
+	title: 'Atoms/Icon',
 	component: N8nIcon,
 	argTypes: {
 		icon: {
-			control: "text",
+			control: 'text',
 		},
 		size: {
 			control: {
-				type: "select",
-				options: ["sm", "md", "lg"],
+				type: 'select',
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 		spin: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 	},
@@ -31,15 +31,15 @@ const Template = (args, { argTypes }) => ({
 
 export const Clock = Template.bind({});
 Clock.args = {
-	icon: "clock",
+	icon: 'clock',
 };
 
 export const Plus = Template.bind({});
 Plus.args = {
-	icon: "plus",
+	icon: 'plus',
 };
 
 export const Stop = Template.bind({});
 Stop.args = {
-	icon: "stop",
+	icon: 'stop',
 };
diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index a9aa8af76c..a5bcf4159a 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
-	name: "n8n-icon",
+	name: 'n8n-icon',
 	components: {
 		FontAwesomeIcon,
 	},
@@ -22,9 +22,9 @@ export default {
 		},
 		size: {
 			type: String,
-			default: "md",
+			default: 'md',
 			validator: function (value: string): boolean {
-				return ["sm", "md", "lg"].indexOf(value) !== -1;
+				return ['sm', 'md', 'lg'].indexOf(value) !== -1;
 			},
 		},
 		spin: {
diff --git a/packages/design-system/src/components/N8nIcon/index.js b/packages/design-system/src/components/N8nIcon/index.js
index 3da00c9b7a..aeb12bb638 100644
--- a/packages/design-system/src/components/N8nIcon/index.js
+++ b/packages/design-system/src/components/N8nIcon/index.js
@@ -1,3 +1,3 @@
-import Icon from "./Icon.vue";
+import Icon from './Icon.vue';
 
 export default Icon;
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.js b/packages/design-system/src/components/N8nIconButton/IconButton.stories.js
index e3220c01f1..7cb13bc59e 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.stories.js
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.stories.js
@@ -1,47 +1,47 @@
-import N8nIconButton from "./IconButton.vue";
-import { action } from "@storybook/addon-actions";
+import N8nIconButton from './IconButton.vue';
+import { action } from '@storybook/addon-actions';
 
 export default {
-	title: "Atoms/Icon Button",
+	title: 'Atoms/Icon Button',
 	component: N8nIconButton,
 	argTypes: {
 		type: {
-			control: "select",
-			options: ["primary", "outline", "light", "text"],
+			control: 'select',
+			options: ['primary', 'outline', 'light', 'text'],
 		},
 		title: {
-			control: "text",
+			control: 'text',
 		},
 		size: {
 			control: {
-				type: "select",
-				options: ["sm", "md", "lg", "xl"],
+				type: 'select',
+				options: ['sm', 'md', 'lg', 'xl'],
 			},
 		},
 		loading: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 		icon: {
 			control: {
-				type: "text",
+				type: 'text',
 			},
 		},
 		theme: {
 			control: {
-				type: "select",
-				options: ["success", "warning", "danger"],
+				type: 'select',
+				options: ['success', 'warning', 'danger'],
 			},
 		},
 	},
 	parameters: {
-		backgrounds: { default: "--color-background-light" },
+		backgrounds: { default: '--color-background-light' },
 	},
 };
 
 const methods = {
-	onClick: action("click"),
+	onClick: action('click'),
 };
 
 const Template = (args, { argTypes }) => ({
@@ -55,8 +55,8 @@ const Template = (args, { argTypes }) => ({
 
 export const Button = Template.bind({});
 Button.args = {
-	icon: "plus",
-	title: "my title",
+	icon: 'plus',
+	title: 'my title',
 };
 
 const ManyTemplate = (args, { argTypes }) => ({
@@ -71,28 +71,28 @@ const ManyTemplate = (args, { argTypes }) => ({
 
 export const Primary = ManyTemplate.bind({});
 Primary.args = {
-	icon: "plus",
-	title: "my title",
-	type: "primary",
+	icon: 'plus',
+	title: 'my title',
+	type: 'primary',
 };
 
 export const Outline = ManyTemplate.bind({});
 Outline.args = {
-	icon: "plus",
-	title: "my title",
-	type: "outline",
+	icon: 'plus',
+	title: 'my title',
+	type: 'outline',
 };
 
 export const Light = ManyTemplate.bind({});
 Light.args = {
-	icon: "plus",
-	title: "my title",
-	type: "light",
+	icon: 'plus',
+	title: 'my title',
+	type: 'light',
 };
 
 export const Text = ManyTemplate.bind({});
 Text.args = {
-	icon: "plus",
-	title: "my title",
-	type: "text",
+	icon: 'plus',
+	title: 'my title',
+	type: 'text',
 };
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index 54df23f5ca..ab55b1edb7 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -14,20 +14,20 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import N8nButton from "../N8nButton";
+import Vue from 'vue';
+import N8nButton from '../N8nButton';
 
 const iconSizeMap = {
-	sm: "sm",
-	md: "md",
-	lg: "md",
-	xl: "lg",
+	sm: 'sm',
+	md: 'md',
+	lg: 'md',
+	xl: 'lg',
 };
 
-Vue.component("N8nButton", N8nButton);
+Vue.component('N8nButton', N8nButton);
 
 export default {
-	name: "n8n-icon-button",
+	name: 'n8n-icon-button',
 	props: {
 		type: {
 			type: String,
@@ -38,7 +38,7 @@ export default {
 		size: {
 			type: String,
 			validator: (value: string): boolean =>
-				["sm", "md", "lg", "xl"].indexOf(value) !== -1,
+				['sm', 'md', 'lg', 'xl'].indexOf(value) !== -1,
 		},
 		loading: {
 			type: Boolean,
diff --git a/packages/design-system/src/components/N8nIconButton/index.js b/packages/design-system/src/components/N8nIconButton/index.js
index 1e618378d0..bcad6cbea7 100644
--- a/packages/design-system/src/components/N8nIconButton/index.js
+++ b/packages/design-system/src/components/N8nIconButton/index.js
@@ -1,3 +1,3 @@
-import IconButton from "./IconButton.vue";
+import IconButton from './IconButton.vue';
 
 export default IconButton;
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.stories.js b/packages/design-system/src/components/N8nSpinner/Spinner.stories.js
index 67649f10ff..148b30dd2c 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.stories.js
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.stories.js
@@ -1,13 +1,13 @@
-import N8nSpinner from "./Spinner.vue";
+import N8nSpinner from './Spinner.vue';
 
 export default {
-	title: "Atoms/Spinner",
+	title: 'Atoms/Spinner',
 	component: N8nSpinner,
 	argTypes: {
 		size: {
 			control: {
-				type: "select",
-				options: ["sm", "md", "lg"],
+				type: 'select',
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 	},
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue
index fa56d85bbc..3a2282420b 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import N8nIcon from "../N8nIcon";
+import N8nIcon from '../N8nIcon';
 
 export default {
-	name: "n8n-spinner",
+	name: 'n8n-spinner',
 	components: {
 		N8nIcon,
 	},
@@ -19,7 +19,7 @@ export default {
 		size: {
 			type: String,
 			validator: function (value: string): boolean {
-				return ["sm", "md", "lg"].indexOf(value) !== -1;
+				return ['sm', 'md', 'lg'].indexOf(value) !== -1;
 			},
 		},
 	},
diff --git a/packages/design-system/src/components/N8nSpinner/index.js b/packages/design-system/src/components/N8nSpinner/index.js
index 8e47ef9a10..b6dadd9b52 100644
--- a/packages/design-system/src/components/N8nSpinner/index.js
+++ b/packages/design-system/src/components/N8nSpinner/index.js
@@ -1,3 +1,3 @@
-import Spinner from "./Spinner.vue";
+import Spinner from './Spinner.vue';
 
 export default Spinner;
diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js
index 001d3019e3..22017d88aa 100644
--- a/packages/design-system/src/components/index.js
+++ b/packages/design-system/src/components/index.js
@@ -1,6 +1,6 @@
-import N8nButton from "./N8nButton";
-import N8nIcon from "./N8nIcon";
-import N8nIconButton from "./N8nIconButton";
-import N8nSpinner from "./N8nSpinner";
+import N8nButton from './N8nButton';
+import N8nIcon from './N8nIcon';
+import N8nIconButton from './N8nIconButton';
+import N8nSpinner from './N8nSpinner';
 
 export { N8nButton, N8nIcon, N8nIconButton, N8nSpinner };
diff --git a/packages/design-system/src/docs/Introduction.stories.mdx b/packages/design-system/src/docs/Introduction.stories.mdx
index a358add135..f137d6d7ae 100644
--- a/packages/design-system/src/docs/Introduction.stories.mdx
+++ b/packages/design-system/src/docs/Introduction.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta } from "@storybook/addon-docs";
-import Code from "./assets/code-brackets.svg";
-import Colors from "./assets/colors.svg";
-import Comments from "./assets/comments.svg";
-import Direction from "./assets/direction.svg";
-import Flow from "./assets/flow.svg";
-import Plugin from "./assets/plugin.svg";
-import Repo from "./assets/repo.svg";
-import StackAlt from "./assets/stackalt.svg";
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Docs/Introduction" />
 
@@ -214,6 +214,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-	<span className="tip">Tip</span>Edit the Markdown in{" "}
+	<span className="tip">Tip</span>Edit the Markdown in{' '}
 	<code>src/stories/Introduction.stories.mdx</code>
 </div>
diff --git a/packages/design-system/src/main.js b/packages/design-system/src/main.js
index 39bd9e5683..a214d84b97 100644
--- a/packages/design-system/src/main.js
+++ b/packages/design-system/src/main.js
@@ -1,4 +1,4 @@
-import * as components from "./components";
+import * as components from './components';
 
 for (const key in components) {
 	const component = components[key];
@@ -7,4 +7,4 @@ for (const key in components) {
 	};
 }
 
-export * from "./components";
+export * from './components';
diff --git a/packages/design-system/src/styleguide/ColorCircles.vue b/packages/design-system/src/styleguide/ColorCircles.vue
index 713e534f53..3fc46b3b71 100644
--- a/packages/design-system/src/styleguide/ColorCircles.vue
+++ b/packages/design-system/src/styleguide/ColorCircles.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 
 function hslToHex(h: number, s: number, l: number): string {
 	l /= 100;
@@ -23,24 +23,24 @@ function hslToHex(h: number, s: number, l: number): string {
 		const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
 		return Math.round(255 * color)
 			.toString(16)
-			.padStart(2, "0"); // convert to Hex and prefix "0" if needed
+			.padStart(2, '0'); // convert to Hex and prefix "0" if needed
 	};
 	return `#${f(0)}${f(8)}${f(4)}`;
 }
 
 function getHex(hsl: string): string {
 	const colors = hsl
-		.replace("hsl(", "")
-		.replace(")", "")
-		.replace(/%/g, "")
-		.split(",")
+		.replace('hsl(', '')
+		.replace(')', '')
+		.replace(/%/g, '')
+		.split(',')
 		.map((n: string) => parseFloat(n));
 
 	return hslToHex(colors[0], colors[1], colors[2]);
 }
 
 export default Vue.extend({
-	name: "color-circles",
+	name: 'color-circles',
 	data() {
 		return {
 			observer: null as null | MutationObserver,
@@ -67,12 +67,12 @@ export default Vue.extend({
 		// when theme class is added or removed, reset color values
 		this.observer = new MutationObserver((mutationsList) => {
 			for (const mutation of mutationsList) {
-				if (mutation.type === "attributes") {
+				if (mutation.type === 'attributes') {
 					setColors();
 				}
 			}
 		});
-		const body = document.querySelector("body");
+		const body = document.querySelector('body');
 		if (body) {
 			this.observer.observe(body, { attributes: true });
 		}
diff --git a/packages/design-system/src/styleguide/Sizes.vue b/packages/design-system/src/styleguide/Sizes.vue
index 9ef9e85185..373d6f7a26 100644
--- a/packages/design-system/src/styleguide/Sizes.vue
+++ b/packages/design-system/src/styleguide/Sizes.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 
 export default Vue.extend({
-	name: "sizes",
+	name: 'sizes',
 	data() {
 		return {
 			observer: null as null | MutationObserver,
@@ -42,7 +42,7 @@ export default Vue.extend({
 			(this.variables as string[]).forEach((variable: string) => {
 				const style = getComputedStyle(document.body);
 				const rem = style.getPropertyValue(variable);
-				const px = parseFloat(rem.replace("rem", "")) * 16;
+				const px = parseFloat(rem.replace('rem', '')) * 16;
 
 				Vue.set(this.sizes, variable, { rem, px });
 			});
@@ -53,12 +53,12 @@ export default Vue.extend({
 		// when theme class is added or removed, reset color values
 		this.observer = new MutationObserver((mutationsList) => {
 			for (const mutation of mutationsList) {
-				if (mutation.type === "attributes") {
+				if (mutation.type === 'attributes') {
 					setSizes();
 				}
 			}
 		});
-		const body = document.querySelector("body");
+		const body = document.querySelector('body');
 		if (body) {
 			this.observer.observe(body, { attributes: true });
 		}
diff --git a/packages/design-system/src/styleguide/TextClasses.vue b/packages/design-system/src/styleguide/TextClasses.vue
index f0d1a3b918..0948ebfab9 100644
--- a/packages/design-system/src/styleguide/TextClasses.vue
+++ b/packages/design-system/src/styleguide/TextClasses.vue
@@ -1,7 +1,7 @@
 <template>
 	<table :class="$style.table">
 		<tr v-for="c in classes" :key="c">
-			<td>.{{ c }}{{ postfix ? postfix : "" }}</td>
+			<td>.{{ c }}{{ postfix ? postfix : '' }}</td>
 			<td :class="$style[`${c}${postfix ? postfix : ''}`]">
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in
 				luctus sapien, a suscipit neque.
@@ -12,18 +12,18 @@
 
 <script lang="ts">
 export default {
-	name: "text-classes",
+	name: 'text-classes',
 	data(): { observer: null | MutationObserver; classes: string[] } {
 		return {
 			observer: null as null | MutationObserver,
 			classes: [
-				"heading1",
-				"heading2",
-				"heading3",
-				"heading4",
-				"body-large",
-				"body-medium",
-				"body-small",
+				'heading1',
+				'heading2',
+				'heading3',
+				'heading4',
+				'body-large',
+				'body-medium',
+				'body-small',
 			],
 		};
 	},
diff --git a/packages/design-system/src/styleguide/VariableTable.vue b/packages/design-system/src/styleguide/VariableTable.vue
index bc3fc77d7e..6f7c48dd4f 100644
--- a/packages/design-system/src/styleguide/VariableTable.vue
+++ b/packages/design-system/src/styleguide/VariableTable.vue
@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 
 export default Vue.extend({
-	name: "variable-table",
+	name: 'variable-table',
 	data() {
 		return {
 			observer: null as null | MutationObserver,
@@ -50,12 +50,12 @@ export default Vue.extend({
 		// when theme class is added or removed, reset color values
 		this.observer = new MutationObserver((mutationsList) => {
 			for (const mutation of mutationsList) {
-				if (mutation.type === "attributes") {
+				if (mutation.type === 'attributes') {
 					setValues();
 				}
 			}
 		});
-		const body = document.querySelector("body");
+		const body = document.querySelector('body');
 		if (body) {
 			this.observer.observe(body, { attributes: true });
 		}
diff --git a/packages/design-system/src/styleguide/border.stories.mdx b/packages/design-system/src/styleguide/border.stories.mdx
index 614eb23ae1..d5a83e064d 100644
--- a/packages/design-system/src/styleguide/border.stories.mdx
+++ b/packages/design-system/src/styleguide/border.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import VariableTable from "./VariableTable.vue";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import VariableTable from './VariableTable.vue';
 
 <Meta
 	title="Styleguide/Border"
 	parameters={{
 		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
 		},
 	}}
 />
diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 7c44f4a1e4..16e372bcd3 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import ColorCircles from "./ColorCircles.vue";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import ColorCircles from './ColorCircles.vue';
 
 <Meta
 	title="Styleguide/Colors"
 	parameters={{
 		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23",
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
 		},
 	}}
 />
diff --git a/packages/design-system/src/styleguide/fonts.stories.mdx b/packages/design-system/src/styleguide/fonts.stories.mdx
index 8bd38af1bf..ebf468b385 100644
--- a/packages/design-system/src/styleguide/fonts.stories.mdx
+++ b/packages/design-system/src/styleguide/fonts.stories.mdx
@@ -1,6 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import Sizes from "./Sizes.vue";
-import VariableTable from "./VariableTable.vue";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import Sizes from './Sizes.vue';
+import VariableTable from './VariableTable.vue';
 
 <Meta title="Styleguide/Font" />
 
diff --git a/packages/design-system/src/styleguide/spacing.stories.mdx b/packages/design-system/src/styleguide/spacing.stories.mdx
index 0e0e9bd710..bd604fe1d8 100644
--- a/packages/design-system/src/styleguide/spacing.stories.mdx
+++ b/packages/design-system/src/styleguide/spacing.stories.mdx
@@ -1,13 +1,13 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import Sizes from "./Sizes.vue";
-import TextClasses from "./TextClasses.vue";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import Sizes from './Sizes.vue';
+import TextClasses from './TextClasses.vue';
 
 <Meta
 	title="Styleguide/Spacing"
 	parameters={{
 		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
 		},
 	}}
 />
diff --git a/packages/design-system/src/styleguide/text.stories.mdx b/packages/design-system/src/styleguide/text.stories.mdx
index e5320ad423..f48680afc4 100644
--- a/packages/design-system/src/styleguide/text.stories.mdx
+++ b/packages/design-system/src/styleguide/text.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import TextClasses from "./TextClasses.vue";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import TextClasses from './TextClasses.vue';
 
 <Meta
 	title="Styleguide/Text"
 	parameters={{
 		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
 		},
 	}}
 />
diff --git a/packages/design-system/theme/README.md b/packages/design-system/theme/README.md
index 8d8b44422f..bd20a55e6e 100644
--- a/packages/design-system/theme/README.md
+++ b/packages/design-system/theme/README.md
@@ -20,13 +20,13 @@ npm i element-theme-n8n -S
 Use Sass import
 
 ```css
-@import "element-theme-n8n";
+@import 'element-theme-n8n';
 ```
 
 Or Use webpack
 
 ```javascript
-import "element-theme-n8n";
+import 'element-theme-n8n';
 ```
 
 Or
@@ -41,8 +41,8 @@ Or
 ## Import on demand
 
 ```javascript
-import "element-theme-n8n/dist/input.css";
-import "element-theme-n8n/dist/select.css";
+import 'element-theme-n8n/dist/input.css';
+import 'element-theme-n8n/dist/select.css';
 
 // ...
 ```
diff --git a/packages/design-system/theme/docs.css b/packages/design-system/theme/docs.css
index a45e905a14..2c8df6b64d 100644
--- a/packages/design-system/theme/docs.css
+++ b/packages/design-system/theme/docs.css
@@ -386,7 +386,7 @@
 .header .nav[data-v-70469f40]:after,
 .header .nav[data-v-70469f40]:before {
 	display: table;
-	content: "";
+	content: '';
 }
 .header .nav[data-v-70469f40]:after {
 	clear: both;
@@ -398,7 +398,7 @@
 	padding: 0 20px;
 }
 .header .nav-gap[data-v-70469f40]:before {
-	content: "";
+	content: '';
 	position: absolute;
 	top: calc(50% - 8px);
 	width: 1px;
@@ -459,7 +459,7 @@
 	opacity: 1;
 }
 .header .nav-item a.active[data-v-70469f40]:after {
-	content: "";
+	content: '';
 	display: inline-block;
 	position: absolute;
 	bottom: 0;
@@ -658,7 +658,7 @@
 	color: #333;
 }
 .footer-nav:after {
-	content: "";
+	content: '';
 	display: block;
 	clear: both;
 }
@@ -1110,7 +1110,7 @@
 }
 .demo-form .el-checkbox-group:after,
 .demo-form .el-checkbox-group:before {
-	content: " ";
+	content: ' ';
 	display: table;
 }
 .demo-form .el-checkbox-group:after {
@@ -1192,7 +1192,7 @@ ul.language-list li {
 	margin-bottom: -1px;
 }
 .icon-list li:after {
-	content: "";
+	content: '';
 	height: 100%;
 }
 .icon-list li:after,
@@ -1986,18 +1986,18 @@ textarea {
 	font-family: icomoon;
 	src: url(data:application/vnd.ms-fontobject;base64,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);
 	src: url(data:application/vnd.ms-fontobject;base64,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#iefix)
-			format("embedded-opentype"),
+			format('embedded-opentype'),
 		url(data:font/ttf;base64,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)
-			format("truetype"),
+			format('truetype'),
 		url(data:font/woff;base64,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)
-			format("woff"),
+			format('woff'),
 		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=)
-			format("svg");
+			format('svg');
 	font-weight: 400;
 	font-style: normal;
 }
-[class*=" icon-"],
-[class^="icon-"] {
+[class*=' icon-'],
+[class^='icon-'] {
 	font-family: icomoon !important;
 	speak: none;
 	font-style: normal;
@@ -2009,16 +2009,16 @@ textarea {
 	-moz-osx-font-smoothing: grayscale;
 }
 .icon-rate-face-off:before {
-	content: "\e900";
+	content: '\e900';
 }
 .icon-rate-face-1:before {
-	content: "\e901";
+	content: '\e901';
 }
 .icon-rate-face-2:before {
-	content: "\e902";
+	content: '\e902';
 }
 .icon-rate-face-3:before {
-	content: "\e903";
+	content: '\e903';
 }
 
 .config {
diff --git a/packages/design-system/theme/index.html b/packages/design-system/theme/index.html
index 5415370c6e..17ed2656a2 100644
--- a/packages/design-system/theme/index.html
+++ b/packages/design-system/theme/index.html
@@ -1078,124 +1078,124 @@
 	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
 	<script>
 		const original = {
-			color_primary: "#409EFF",
-			color_success: "#67C23A",
-			color_warning: "#E6A23C",
-			color_danger: "#F56C6C",
-			color_info: "#909399",
-			color_white: "#FFFFFF",
-			color_black: "#000000",
-			color_text_primary: "#303133",
-			color_text_regular: "#606266",
-			color_text_secondary: "#909399",
-			color_text_placeholder: "#C0C4CC",
-			border_color_base: "#DCDFE6",
-			border_color_light: "#E4E7ED",
-			border_color_lighter: "#EBEEF5",
-			border_color_extra_light: "#F2F6FC",
-			font_size_extra_large: "20px",
-			font_size_large: "18px",
-			font_size_medium: "16px",
-			font_size_base: "14px",
-			font_size_small: "13px",
-			font_size_extra_small: "12px",
+			color_primary: '#409EFF',
+			color_success: '#67C23A',
+			color_warning: '#E6A23C',
+			color_danger: '#F56C6C',
+			color_info: '#909399',
+			color_white: '#FFFFFF',
+			color_black: '#000000',
+			color_text_primary: '#303133',
+			color_text_regular: '#606266',
+			color_text_secondary: '#909399',
+			color_text_placeholder: '#C0C4CC',
+			border_color_base: '#DCDFE6',
+			border_color_light: '#E4E7ED',
+			border_color_lighter: '#EBEEF5',
+			border_color_extra_light: '#F2F6FC',
+			font_size_extra_large: '20px',
+			font_size_large: '18px',
+			font_size_medium: '16px',
+			font_size_base: '14px',
+			font_size_small: '13px',
+			font_size_extra_small: '12px',
 			font_weight_primary: 500,
 			font_weight_secondary: 100,
-			font_line_height_primary: "24px",
-			font_line_height_secondary: "16px",
+			font_line_height_primary: '24px',
+			font_line_height_secondary: '16px',
 		};
 
 		Vue.config.devtools = true;
 		new Vue({
-			el: "#app",
+			el: '#app',
 			data() {
 				return {
 					global: {},
-					colorLine: ["Primary", "Success", "Warning", "Danger", "Info"],
-					color_primary: "",
-					color_success: "",
-					color_warning: "",
-					color_danger: "",
-					color_info: "",
-					color_white: "",
-					color_black: "",
-					color_text_primary: "",
-					color_text_regular: "",
-					color_text_secondary: "",
-					color_text_placeholder: "",
-					border_color_base: "",
-					border_color_light: "",
-					border_color_lighter: "",
-					border_color_extra_light: "",
-					font_size_extra_large: "",
-					font_size_large: "",
-					font_size_medium: "",
-					font_size_base: "",
-					font_size_small: "",
-					font_size_extra_small: "",
+					colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
+					color_primary: '',
+					color_success: '',
+					color_warning: '',
+					color_danger: '',
+					color_info: '',
+					color_white: '',
+					color_black: '',
+					color_text_primary: '',
+					color_text_regular: '',
+					color_text_secondary: '',
+					color_text_placeholder: '',
+					border_color_base: '',
+					border_color_light: '',
+					border_color_lighter: '',
+					border_color_extra_light: '',
+					font_size_extra_large: '',
+					font_size_large: '',
+					font_size_medium: '',
+					font_size_base: '',
+					font_size_small: '',
+					font_size_extra_small: '',
 					font_weight_primary: 0,
 					font_weight_secondary: 0,
-					font_line_height_primary: "",
-					font_line_height_secondary: "",
-					radio: "1",
-					radio1: "Washington",
-					radio2: "1",
+					font_line_height_primary: '',
+					font_line_height_secondary: '',
+					radio: '1',
+					radio1: 'Washington',
+					radio2: '1',
 					checked: true,
-					checked1: ["Shanghai"],
+					checked1: ['Shanghai'],
 					checked2: true,
-					input: "Element",
+					input: 'Element',
 					inputNumber: 1,
 					treeData: [
 						{
-							label: "一级 1",
+							label: '一级 1',
 							children: [
 								{
-									label: "二级 1-1",
+									label: '二级 1-1',
 									children: [
 										{
-											label: "三级 1-1-1",
+											label: '三级 1-1-1',
 										},
 									],
 								},
 							],
 						},
 						{
-							label: "一级 2",
+							label: '一级 2',
 							children: [
 								{
-									label: "二级 2-1",
+									label: '二级 2-1',
 									children: [
 										{
-											label: "三级 2-1-1",
+											label: '三级 2-1-1',
 										},
 									],
 								},
 								{
-									label: "二级 2-2",
+									label: '二级 2-2',
 									children: [
 										{
-											label: "三级 2-2-1",
+											label: '三级 2-2-1',
 										},
 									],
 								},
 							],
 						},
 						{
-							label: "一级 3",
+							label: '一级 3',
 							children: [
 								{
-									label: "二级 3-1",
+									label: '二级 3-1',
 									children: [
 										{
-											label: "三级 3-1-1",
+											label: '三级 3-1-1',
 										},
 									],
 								},
 								{
-									label: "二级 3-2",
+									label: '二级 3-2',
 									children: [
 										{
-											label: "三级 3-2-1",
+											label: '三级 3-2-1',
 										},
 									],
 								},
@@ -1204,63 +1204,63 @@
 					],
 					selectOptions: [
 						{
-							value: "Option1",
-							label: "Option1",
+							value: 'Option1',
+							label: 'Option1',
 						},
 						{
-							value: "Option2",
-							label: "Option2",
+							value: 'Option2',
+							label: 'Option2',
 						},
 						{
-							value: "Option3",
-							label: "Option3",
+							value: 'Option3',
+							label: 'Option3',
 						},
 						{
-							value: "Option4",
-							label: "Option4",
+							value: 'Option4',
+							label: 'Option4',
 						},
 						{
-							value: "Option5",
-							label: "Option5",
+							value: 'Option5',
+							label: 'Option5',
 						},
 					],
-					selectValue: "",
+					selectValue: '',
 					cascadeOptions: [
 						{
-							value: "guide",
-							label: "Guide",
+							value: 'guide',
+							label: 'Guide',
 							children: [
 								{
-									value: "disciplines",
-									label: "Disciplines",
+									value: 'disciplines',
+									label: 'Disciplines',
 									children: [
 										{
-											value: "consistency",
-											label: "Consistency",
+											value: 'consistency',
+											label: 'Consistency',
 										},
 										{
-											value: "feedback",
-											label: "Feedback",
+											value: 'feedback',
+											label: 'Feedback',
 										},
 									],
 								},
 							],
 						},
 						{
-							value: "resource",
-							label: "Resource",
+							value: 'resource',
+							label: 'Resource',
 							children: [
 								{
-									value: "axure",
-									label: "Axure Components",
+									value: 'axure',
+									label: 'Axure Components',
 								},
 								{
-									value: "sketch",
-									label: "Sketch Templates",
+									value: 'sketch',
+									label: 'Sketch Templates',
 								},
 								{
-									value: "docs",
-									label: "Design Documentation",
+									value: 'docs',
+									label: 'Design Documentation',
 								},
 							],
 						},
@@ -1268,7 +1268,7 @@
 					cascaderValue: [],
 					switchValue: true,
 					slider: 28,
-					datePicker: "",
+					datePicker: '',
 					rate: null,
 					transferData: (() => {
 						const data = [];
@@ -1284,80 +1284,80 @@
 					transfer: [1, 4],
 					tableData: [
 						{
-							date: "2016-05-03",
-							name: "Tom",
-							address: "No. 189, Grove St, Los Angeles",
+							date: '2016-05-03',
+							name: 'Tom',
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 						{
-							date: "2016-05-02",
-							name: "Tom",
-							address: "No. 189, Grove St, Los Angeles",
+							date: '2016-05-02',
+							name: 'Tom',
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 						{
-							date: "2016-05-04",
-							name: "Tom",
-							address: "No. 189, Grove St, Los Angeles",
+							date: '2016-05-04',
+							name: 'Tom',
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 						{
-							date: "2016-05-01",
-							name: "Tom",
-							address: "No. 189, Grove St, Los Angeles",
+							date: '2016-05-01',
+							name: 'Tom',
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 					],
-					menu: "1",
-					tab: "first",
-					collapse: ["1"],
+					menu: '1',
+					tab: 'first',
+					collapse: ['1'],
 					treeData: [
 						{
-							label: "Level one 1",
+							label: 'Level one 1',
 							children: [
 								{
-									label: "Level two 1-1",
+									label: 'Level two 1-1',
 									children: [
 										{
-											label: "Level three 1-1-1",
+											label: 'Level three 1-1-1',
 										},
 									],
 								},
 							],
 						},
 						{
-							label: "Level one 2",
+							label: 'Level one 2',
 							children: [
 								{
-									label: "Level two 2-1",
+									label: 'Level two 2-1',
 									children: [
 										{
-											label: "Level three 2-1-1",
+											label: 'Level three 2-1-1',
 										},
 									],
 								},
 								{
-									label: "Level two 2-2",
+									label: 'Level two 2-2',
 									children: [
 										{
-											label: "Level three 2-2-1",
+											label: 'Level three 2-2-1',
 										},
 									],
 								},
 							],
 						},
 						{
-							label: "Level one 3",
+							label: 'Level one 3',
 							children: [
 								{
-									label: "Level two 3-1",
+									label: 'Level two 3-1',
 									children: [
 										{
-											label: "Level three 3-1-1",
+											label: 'Level three 3-1-1',
 										},
 									],
 								},
 								{
-									label: "Level two 3-2",
+									label: 'Level two 3-2',
 									children: [
 										{
-											label: "Level three 3-2-1",
+											label: 'Level three 3-2-1',
 										},
 									],
 								},
@@ -1365,13 +1365,13 @@
 						},
 					],
 					defaultTreeProps: {
-						children: "children",
-						label: "label",
+						children: 'children',
+						label: 'label',
 					},
 					avatarData: {
-						url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+						url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
 					},
-					cssVariables: "",
+					cssVariables: '',
 					visible: false,
 				};
 			},
@@ -1380,7 +1380,7 @@
 					immediate: true,
 					handler(value) {
 						Object.keys(original).forEach((v) => {
-							const key = `$--${v.replace(/_/g, "-")}`;
+							const key = `$--${v.replace(/_/g, '-')}`;
 							if (value[key]) {
 								this[v] = value[key];
 							} else {
@@ -1390,43 +1390,43 @@
 					},
 				},
 				color_primary(v) {
-					this.setCssVariable("color-primary-base", v);
+					this.setCssVariable('color-primary-base', v);
 				},
 				color_success(v) {
-					this.setCssVariable("color-success-base", v);
+					this.setCssVariable('color-success-base', v);
 				},
 				color_warning(v) {
-					this.setCssVariable("color-warning-base", v);
+					this.setCssVariable('color-warning-base', v);
 				},
 				color_danger(v) {
-					this.setCssVariable("color-danger-base", v);
+					this.setCssVariable('color-danger-base', v);
 				},
 				color_info(v) {
-					this.setCssVariable("color-info-base", v);
+					this.setCssVariable('color-info-base', v);
 				},
 				color_text_primary(v) {
-					this.setCssVariable("color-text-dark", v);
+					this.setCssVariable('color-text-dark', v);
 				},
 				color_text_regular(v) {
-					this.setCssVariable("color-text-base", v);
+					this.setCssVariable('color-text-base', v);
 				},
 				color_text_secondary(v) {
-					this.setCssVariable("color-text-light", v);
+					this.setCssVariable('color-text-light', v);
 				},
 				color_text_placeholder(v) {
-					this.setCssVariable("color-text-lighter", v);
+					this.setCssVariable('color-text-lighter', v);
 				},
 				border_color_base(v) {
-					this.setCssVariable("border-color-base", v);
+					this.setCssVariable('border-color-base', v);
 				},
 				border_color_light(v) {
-					this.setCssVariable("border-color-light", v);
+					this.setCssVariable('border-color-light', v);
 				},
 				border_color_lighter(v) {
-					this.setCssVariable("border-color-lighter", v);
+					this.setCssVariable('border-color-lighter', v);
 				},
 				border_color_extra_light(v) {
-					this.setCssVariable("border-color-xlight", v);
+					this.setCssVariable('border-color-xlight', v);
 				},
 			},
 			methods: {
@@ -1442,14 +1442,14 @@
 					}
 				},
 				tintColor(c, tint) {
-					const color = c.replace("#", "");
+					const color = c.replace('#', '');
 					let red = parseInt(color.slice(0, 2), 16);
 					let green = parseInt(color.slice(2, 4), 16);
 					let blue = parseInt(color.slice(4, 6), 16);
 
 					if (tint === 0) {
 						// when primary color is in its rgb space
-						return [red, green, blue].join(",");
+						return [red, green, blue].join(',');
 					} else {
 						red += Math.round(tint * (255 - red));
 						green += Math.round(tint * (255 - green));
@@ -1501,8 +1501,8 @@
 
 					return {
 						h: h,
-						s: s + "%",
-						l: l + "%",
+						s: s + '%',
+						l: l + '%',
 					};
 				},
 				setCssVariable(key, color) {
@@ -1513,11 +1513,11 @@
 				},
 				copyCssVariables() {
 					const cssVariables = document
-						.querySelector("html")
-						.getAttribute("style");
+						.querySelector('html')
+						.getAttribute('style');
 					this.cssVariables = cssVariables
 						? cssVariables
-						: "没有进行颜色修改，请先修改颜色！";
+						: '没有进行颜色修改，请先修改颜色！';
 					this.visible = true;
 				},
 			},
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 891a021e93..97395a7879 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -282,7 +282,7 @@
 	--font-weight-regular: 400;
 	--font-weight-semi-bold: 500;
 	--font-weight-bold: 600;
-	--font-family: "Open Sans", sans-serif;
+	--font-family: 'Open Sans', sans-serif;
 
 	--spacing-5xs: 0.125rem;
 	--spacing-4xs: 0.25rem;
diff --git a/packages/design-system/theme/src/breadcrumb.scss b/packages/design-system/theme/src/breadcrumb.scss
index 6f39dc7e1d..629256ab54 100644
--- a/packages/design-system/theme/src/breadcrumb.scss
+++ b/packages/design-system/theme/src/breadcrumb.scss
@@ -12,7 +12,7 @@
 		font-weight: bold;
 		color: var.$color-text-placeholder;
 
-		&[class*="icon"] {
+		&[class*='icon'] {
 			margin: 0 6px;
 			font-weight: normal;
 		}
diff --git a/packages/design-system/theme/src/button.scss b/packages/design-system/theme/src/button.scss
index a76034383c..37709e160e 100644
--- a/packages/design-system/theme/src/button.scss
+++ b/packages/design-system/theme/src/button.scss
@@ -81,7 +81,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 
 		&:before {
 			pointer-events: none;
-			content: "";
+			content: '';
 			position: absolute;
 			left: -1px;
 			top: -1px;
diff --git a/packages/design-system/theme/src/checkbox.scss b/packages/design-system/theme/src/checkbox.scss
index bde002e70b..b91e1ff58d 100644
--- a/packages/design-system/theme/src/checkbox.scss
+++ b/packages/design-system/theme/src/checkbox.scss
@@ -173,7 +173,7 @@
 				border-color: var.$checkbox-checked-input-border-color;
 
 				&::before {
-					content: "";
+					content: '';
 					position: absolute;
 					display: block;
 					background-color: var.$checkbox-checked-icon-color;
@@ -209,7 +209,7 @@
 
 		&::after {
 			box-sizing: content-box;
-			content: "";
+			content: '';
 			border: 1px solid var.$checkbox-checked-icon-color;
 			border-left: 0;
 			border-top: 0;
@@ -281,7 +281,7 @@
 			color: var(--color-primary);
 		}
 
-		& [class*="el-icon-"] {
+		& [class*='el-icon-'] {
 			line-height: 0.9;
 
 			& + span {
diff --git a/packages/design-system/theme/src/col.scss b/packages/design-system/theme/src/col.scss
index 812e337a45..85610c14c5 100644
--- a/packages/design-system/theme/src/col.scss
+++ b/packages/design-system/theme/src/col.scss
@@ -3,7 +3,7 @@
 @use "./common/var.scss";
 @use "./mixins/mixins.scss";
 
-[class*="el-col-"] {
+[class*='el-col-'] {
 	float: left;
 	box-sizing: border-box;
 }
diff --git a/packages/design-system/theme/src/color-picker.scss b/packages/design-system/theme/src/color-picker.scss
index 1ec3a8267e..48d839f5c1 100644
--- a/packages/design-system/theme/src/color-picker.scss
+++ b/packages/design-system/theme/src/color-picker.scss
@@ -111,7 +111,7 @@
 	width: 280px;
 	height: 180px;
 
-	@include mixins.e(("white", "black")) {
+	@include mixins.e(('white', 'black')) {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -119,11 +119,11 @@
 		bottom: 0;
 	}
 
-	@include mixins.e("white") {
+	@include mixins.e('white') {
 		background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
 	}
 
-	@include mixins.e("black") {
+	@include mixins.e('black') {
 		background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
 	}
 
@@ -202,7 +202,7 @@
 		margin-bottom: 6px;
 
 		&::after {
-			content: "";
+			content: '';
 			display: table;
 			clear: both;
 		}
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index 0c6c91d857..e82b2d0ecb 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -246,8 +246,8 @@ $fill-base: $color-white !default;
 
 /* Typography
 -------------------------- */
-$font-path: "fonts" !default;
-$font-display: "auto" !default;
+$font-path: 'fonts' !default;
+$font-display: 'auto' !default;
 /// fontSize|1|Font Size|0
 $font-size-extra-large: var(--font-size-xl) !default;
 /// fontSize|1|Font Size|0
@@ -1118,67 +1118,67 @@ $lg: 1200px !default;
 $xl: 1920px !default;
 
 $breakpoints: (
-	"xs": (
+	'xs': (
 		max-width: $sm - 1,
 	),
-	"sm": (
+	'sm': (
 		min-width: $sm,
 	),
-	"md": (
+	'md': (
 		min-width: $md,
 	),
-	"lg": (
+	'lg': (
 		min-width: $lg,
 	),
-	"xl": (
+	'xl': (
 		min-width: $xl,
 	),
 );
 
 $breakpoints-spec: (
-	"xs-only": (
+	'xs-only': (
 		max-width: $sm - 1,
 	),
-	"sm-and-up": (
+	'sm-and-up': (
 		min-width: $sm,
 	),
-	"sm-only": (
+	'sm-only': (
 		min-width: #{$sm},
 	)
 	and
 	(
 		max-width: #{$md - 1},
 	),
-	"sm-and-down": (
+	'sm-and-down': (
 		max-width: $md - 1,
 	),
-	"md-and-up": (
+	'md-and-up': (
 		min-width: $md,
 	),
-	"md-only": (
+	'md-only': (
 		min-width: #{$md},
 	)
 	and
 	(
 		max-width: #{$lg - 1},
 	),
-	"md-and-down": (
+	'md-and-down': (
 		max-width: $lg - 1,
 	),
-	"lg-and-up": (
+	'lg-and-up': (
 		min-width: $lg,
 	),
-	"lg-only": (
+	'lg-only': (
 		min-width: #{$lg},
 	)
 	and
 	(
 		max-width: #{$xl - 1},
 	),
-	"lg-and-down": (
+	'lg-and-down': (
 		max-width: $xl - 1,
 	),
-	"xl-only": (
+	'xl-only': (
 		min-width: $xl,
 	),
 );
diff --git a/packages/design-system/theme/src/date-picker/date-range-picker.scss b/packages/design-system/theme/src/date-picker/date-range-picker.scss
index 38cc681acf..fc6746b782 100644
--- a/packages/design-system/theme/src/date-picker/date-range-picker.scss
+++ b/packages/design-system/theme/src/date-picker/date-range-picker.scss
@@ -26,11 +26,11 @@
 		text-align: center;
 		height: 28px;
 
-		[class*="arrow-left"] {
+		[class*='arrow-left'] {
 			float: left;
 		}
 
-		[class*="arrow-right"] {
+		[class*='arrow-right'] {
 			float: right;
 		}
 
diff --git a/packages/design-system/theme/src/date-picker/picker-panel.scss b/packages/design-system/theme/src/date-picker/picker-panel.scss
index 3ef7eb3cf0..1dc21f9619 100644
--- a/packages/design-system/theme/src/date-picker/picker-panel.scss
+++ b/packages/design-system/theme/src/date-picker/picker-panel.scss
@@ -13,7 +13,7 @@
 
 	@include mixins.e((body, body-wrapper)) {
 		&::after {
-			content: "";
+			content: '';
 			display: table;
 			clear: both;
 		}
@@ -108,7 +108,7 @@
 	}
 }
 
-.el-picker-panel *[slot="sidebar"],
+.el-picker-panel *[slot='sidebar'],
 .el-picker-panel__sidebar {
 	position: absolute;
 	top: 0;
@@ -121,7 +121,7 @@
 	overflow: auto;
 }
 
-.el-picker-panel *[slot="sidebar"] + .el-picker-panel__body,
+.el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
 .el-picker-panel__sidebar + .el-picker-panel__body {
 	margin-left: 110px;
 }
diff --git a/packages/design-system/theme/src/date-picker/time-picker.scss b/packages/design-system/theme/src/date-picker/time-picker.scss
index 103379da99..8dd5fa1109 100644
--- a/packages/design-system/theme/src/date-picker/time-picker.scss
+++ b/packages/design-system/theme/src/date-picker/time-picker.scss
@@ -21,7 +21,7 @@
 
 		&::after,
 		&::before {
-			content: "";
+			content: '';
 			top: 50%;
 			position: absolute;
 			margin-top: -15px;
diff --git a/packages/design-system/theme/src/date-picker/time-spinner.scss b/packages/design-system/theme/src/date-picker/time-spinner.scss
index e7d250a2fe..d8ae6f18d5 100644
--- a/packages/design-system/theme/src/date-picker/time-spinner.scss
+++ b/packages/design-system/theme/src/date-picker/time-spinner.scss
@@ -79,7 +79,7 @@
 
 		&::after,
 		&::before {
-			content: "";
+			content: '';
 			display: block;
 			width: 100%;
 			height: 80px;
diff --git a/packages/design-system/theme/src/dropdown.scss b/packages/design-system/theme/src/dropdown.scss
index 52e9eefa2b..b523603b4c 100644
--- a/packages/design-system/theme/src/dropdown.scss
+++ b/packages/design-system/theme/src/dropdown.scss
@@ -25,7 +25,7 @@
 		&::before {
 			$gap: 5px;
 
-			content: "";
+			content: '';
 			position: absolute;
 			display: block;
 			width: 1px;
@@ -108,7 +108,7 @@
 			border-top: 1px solid var.$border-color-lighter;
 
 			&:before {
-				content: "";
+				content: '';
 				height: $divided-offset;
 				display: block;
 				margin: 0 -20px;
diff --git a/packages/design-system/theme/src/form.scss b/packages/design-system/theme/src/form.scss
index 19f4b2f8b0..3e555594d8 100644
--- a/packages/design-system/theme/src/form.scss
+++ b/packages/design-system/theme/src/form.scss
@@ -131,10 +131,10 @@
 	}
 
 	@include mixins.when(required) {
-		@include mixins.pseudo("not(.is-no-asterisk)") {
+		@include mixins.pseudo('not(.is-no-asterisk)') {
 			& > .el-form-item__label:before,
 			& .el-form-item__label-wrap > .el-form-item__label:before {
-				content: "*";
+				content: '*';
 				color: var(--color-danger);
 				margin-right: 4px;
 			}
diff --git a/packages/design-system/theme/src/icon.scss b/packages/design-system/theme/src/icon.scss
index 772d13c103..261561d424 100644
--- a/packages/design-system/theme/src/icon.scss
+++ b/packages/design-system/theme/src/icon.scss
@@ -1,19 +1,19 @@
 @use "./common/var";
 
 @font-face {
-	font-family: "element-icons";
-	src: url("#{var.$font-path}/element-icons.woff") format("woff"),
-		/* chrome, firefox */ url("#{var.$font-path}/element-icons.ttf")
-			format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+	font-family: 'element-icons';
+	src: url('#{var.$font-path}/element-icons.woff') format('woff'),
+		/* chrome, firefox */ url('#{var.$font-path}/element-icons.ttf')
+			format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 	font-weight: normal;
 	font-display: var.$font-display;
 	font-style: normal;
 }
 
-[class^="el-icon-"],
-[class*=" el-icon-"] {
+[class^='el-icon-'],
+[class*=' el-icon-'] {
 	/* use !important to prevent issues with browser extensions that change fonts */
-	font-family: "element-icons" !important;
+	font-family: 'element-icons' !important;
 	speak: none;
 	font-style: normal;
 	font-weight: normal;
@@ -29,1123 +29,1123 @@
 }
 
 .el-icon-ice-cream-round:before {
-	content: "\e6a0";
+	content: '\e6a0';
 }
 
 .el-icon-ice-cream-square:before {
-	content: "\e6a3";
+	content: '\e6a3';
 }
 
 .el-icon-lollipop:before {
-	content: "\e6a4";
+	content: '\e6a4';
 }
 
 .el-icon-potato-strips:before {
-	content: "\e6a5";
+	content: '\e6a5';
 }
 
 .el-icon-milk-tea:before {
-	content: "\e6a6";
+	content: '\e6a6';
 }
 
 .el-icon-ice-drink:before {
-	content: "\e6a7";
+	content: '\e6a7';
 }
 
 .el-icon-ice-tea:before {
-	content: "\e6a9";
+	content: '\e6a9';
 }
 
 .el-icon-coffee:before {
-	content: "\e6aa";
+	content: '\e6aa';
 }
 
 .el-icon-orange:before {
-	content: "\e6ab";
+	content: '\e6ab';
 }
 
 .el-icon-pear:before {
-	content: "\e6ac";
+	content: '\e6ac';
 }
 
 .el-icon-apple:before {
-	content: "\e6ad";
+	content: '\e6ad';
 }
 
 .el-icon-cherry:before {
-	content: "\e6ae";
+	content: '\e6ae';
 }
 
 .el-icon-watermelon:before {
-	content: "\e6af";
+	content: '\e6af';
 }
 
 .el-icon-grape:before {
-	content: "\e6b0";
+	content: '\e6b0';
 }
 
 .el-icon-refrigerator:before {
-	content: "\e6b1";
+	content: '\e6b1';
 }
 
 .el-icon-goblet-square-full:before {
-	content: "\e6b2";
+	content: '\e6b2';
 }
 
 .el-icon-goblet-square:before {
-	content: "\e6b3";
+	content: '\e6b3';
 }
 
 .el-icon-goblet-full:before {
-	content: "\e6b4";
+	content: '\e6b4';
 }
 
 .el-icon-goblet:before {
-	content: "\e6b5";
+	content: '\e6b5';
 }
 
 .el-icon-cold-drink:before {
-	content: "\e6b6";
+	content: '\e6b6';
 }
 
 .el-icon-coffee-cup:before {
-	content: "\e6b8";
+	content: '\e6b8';
 }
 
 .el-icon-water-cup:before {
-	content: "\e6b9";
+	content: '\e6b9';
 }
 
 .el-icon-hot-water:before {
-	content: "\e6ba";
+	content: '\e6ba';
 }
 
 .el-icon-ice-cream:before {
-	content: "\e6bb";
+	content: '\e6bb';
 }
 
 .el-icon-dessert:before {
-	content: "\e6bc";
+	content: '\e6bc';
 }
 
 .el-icon-sugar:before {
-	content: "\e6bd";
+	content: '\e6bd';
 }
 
 .el-icon-tableware:before {
-	content: "\e6be";
+	content: '\e6be';
 }
 
 .el-icon-burger:before {
-	content: "\e6bf";
+	content: '\e6bf';
 }
 
 .el-icon-knife-fork:before {
-	content: "\e6c1";
+	content: '\e6c1';
 }
 
 .el-icon-fork-spoon:before {
-	content: "\e6c2";
+	content: '\e6c2';
 }
 
 .el-icon-chicken:before {
-	content: "\e6c3";
+	content: '\e6c3';
 }
 
 .el-icon-food:before {
-	content: "\e6c4";
+	content: '\e6c4';
 }
 
 .el-icon-dish-1:before {
-	content: "\e6c5";
+	content: '\e6c5';
 }
 
 .el-icon-dish:before {
-	content: "\e6c6";
+	content: '\e6c6';
 }
 
 .el-icon-moon-night:before {
-	content: "\e6ee";
+	content: '\e6ee';
 }
 
 .el-icon-moon:before {
-	content: "\e6f0";
+	content: '\e6f0';
 }
 
 .el-icon-cloudy-and-sunny:before {
-	content: "\e6f1";
+	content: '\e6f1';
 }
 
 .el-icon-partly-cloudy:before {
-	content: "\e6f2";
+	content: '\e6f2';
 }
 
 .el-icon-cloudy:before {
-	content: "\e6f3";
+	content: '\e6f3';
 }
 
 .el-icon-sunny:before {
-	content: "\e6f6";
+	content: '\e6f6';
 }
 
 .el-icon-sunset:before {
-	content: "\e6f7";
+	content: '\e6f7';
 }
 
 .el-icon-sunrise-1:before {
-	content: "\e6f8";
+	content: '\e6f8';
 }
 
 .el-icon-sunrise:before {
-	content: "\e6f9";
+	content: '\e6f9';
 }
 
 .el-icon-heavy-rain:before {
-	content: "\e6fa";
+	content: '\e6fa';
 }
 
 .el-icon-lightning:before {
-	content: "\e6fb";
+	content: '\e6fb';
 }
 
 .el-icon-light-rain:before {
-	content: "\e6fc";
+	content: '\e6fc';
 }
 
 .el-icon-wind-power:before {
-	content: "\e6fd";
+	content: '\e6fd';
 }
 
 .el-icon-baseball:before {
-	content: "\e712";
+	content: '\e712';
 }
 
 .el-icon-soccer:before {
-	content: "\e713";
+	content: '\e713';
 }
 
 .el-icon-football:before {
-	content: "\e715";
+	content: '\e715';
 }
 
 .el-icon-basketball:before {
-	content: "\e716";
+	content: '\e716';
 }
 
 .el-icon-ship:before {
-	content: "\e73f";
+	content: '\e73f';
 }
 
 .el-icon-truck:before {
-	content: "\e740";
+	content: '\e740';
 }
 
 .el-icon-bicycle:before {
-	content: "\e741";
+	content: '\e741';
 }
 
 .el-icon-mobile-phone:before {
-	content: "\e6d3";
+	content: '\e6d3';
 }
 
 .el-icon-service:before {
-	content: "\e6d4";
+	content: '\e6d4';
 }
 
 .el-icon-key:before {
-	content: "\e6e2";
+	content: '\e6e2';
 }
 
 .el-icon-unlock:before {
-	content: "\e6e4";
+	content: '\e6e4';
 }
 
 .el-icon-lock:before {
-	content: "\e6e5";
+	content: '\e6e5';
 }
 
 .el-icon-watch:before {
-	content: "\e6fe";
+	content: '\e6fe';
 }
 
 .el-icon-watch-1:before {
-	content: "\e6ff";
+	content: '\e6ff';
 }
 
 .el-icon-timer:before {
-	content: "\e702";
+	content: '\e702';
 }
 
 .el-icon-alarm-clock:before {
-	content: "\e703";
+	content: '\e703';
 }
 
 .el-icon-map-location:before {
-	content: "\e704";
+	content: '\e704';
 }
 
 .el-icon-delete-location:before {
-	content: "\e705";
+	content: '\e705';
 }
 
 .el-icon-add-location:before {
-	content: "\e706";
+	content: '\e706';
 }
 
 .el-icon-location-information:before {
-	content: "\e707";
+	content: '\e707';
 }
 
 .el-icon-location-outline:before {
-	content: "\e708";
+	content: '\e708';
 }
 
 .el-icon-location:before {
-	content: "\e79e";
+	content: '\e79e';
 }
 
 .el-icon-place:before {
-	content: "\e709";
+	content: '\e709';
 }
 
 .el-icon-discover:before {
-	content: "\e70a";
+	content: '\e70a';
 }
 
 .el-icon-first-aid-kit:before {
-	content: "\e70b";
+	content: '\e70b';
 }
 
 .el-icon-trophy-1:before {
-	content: "\e70c";
+	content: '\e70c';
 }
 
 .el-icon-trophy:before {
-	content: "\e70d";
+	content: '\e70d';
 }
 
 .el-icon-medal:before {
-	content: "\e70e";
+	content: '\e70e';
 }
 
 .el-icon-medal-1:before {
-	content: "\e70f";
+	content: '\e70f';
 }
 
 .el-icon-stopwatch:before {
-	content: "\e710";
+	content: '\e710';
 }
 
 .el-icon-mic:before {
-	content: "\e711";
+	content: '\e711';
 }
 
 .el-icon-copy-document:before {
-	content: "\e718";
+	content: '\e718';
 }
 
 .el-icon-full-screen:before {
-	content: "\e719";
+	content: '\e719';
 }
 
 .el-icon-switch-button:before {
-	content: "\e71b";
+	content: '\e71b';
 }
 
 .el-icon-aim:before {
-	content: "\e71c";
+	content: '\e71c';
 }
 
 .el-icon-crop:before {
-	content: "\e71d";
+	content: '\e71d';
 }
 
 .el-icon-odometer:before {
-	content: "\e71e";
+	content: '\e71e';
 }
 
 .el-icon-time:before {
-	content: "\e71f";
+	content: '\e71f';
 }
 
 .el-icon-bangzhu:before {
-	content: "\e724";
+	content: '\e724';
 }
 
 .el-icon-close-notification:before {
-	content: "\e726";
+	content: '\e726';
 }
 
 .el-icon-microphone:before {
-	content: "\e727";
+	content: '\e727';
 }
 
 .el-icon-turn-off-microphone:before {
-	content: "\e728";
+	content: '\e728';
 }
 
 .el-icon-position:before {
-	content: "\e729";
+	content: '\e729';
 }
 
 .el-icon-postcard:before {
-	content: "\e72a";
+	content: '\e72a';
 }
 
 .el-icon-message:before {
-	content: "\e72b";
+	content: '\e72b';
 }
 
 .el-icon-chat-line-square:before {
-	content: "\e72d";
+	content: '\e72d';
 }
 
 .el-icon-chat-dot-square:before {
-	content: "\e72e";
+	content: '\e72e';
 }
 
 .el-icon-chat-dot-round:before {
-	content: "\e72f";
+	content: '\e72f';
 }
 
 .el-icon-chat-square:before {
-	content: "\e730";
+	content: '\e730';
 }
 
 .el-icon-chat-line-round:before {
-	content: "\e731";
+	content: '\e731';
 }
 
 .el-icon-chat-round:before {
-	content: "\e732";
+	content: '\e732';
 }
 
 .el-icon-set-up:before {
-	content: "\e733";
+	content: '\e733';
 }
 
 .el-icon-turn-off:before {
-	content: "\e734";
+	content: '\e734';
 }
 
 .el-icon-open:before {
-	content: "\e735";
+	content: '\e735';
 }
 
 .el-icon-connection:before {
-	content: "\e736";
+	content: '\e736';
 }
 
 .el-icon-link:before {
-	content: "\e737";
+	content: '\e737';
 }
 
 .el-icon-cpu:before {
-	content: "\e738";
+	content: '\e738';
 }
 
 .el-icon-thumb:before {
-	content: "\e739";
+	content: '\e739';
 }
 
 .el-icon-female:before {
-	content: "\e73a";
+	content: '\e73a';
 }
 
 .el-icon-male:before {
-	content: "\e73b";
+	content: '\e73b';
 }
 
 .el-icon-guide:before {
-	content: "\e73c";
+	content: '\e73c';
 }
 
 .el-icon-news:before {
-	content: "\e73e";
+	content: '\e73e';
 }
 
 .el-icon-price-tag:before {
-	content: "\e744";
+	content: '\e744';
 }
 
 .el-icon-discount:before {
-	content: "\e745";
+	content: '\e745';
 }
 
 .el-icon-wallet:before {
-	content: "\e747";
+	content: '\e747';
 }
 
 .el-icon-coin:before {
-	content: "\e748";
+	content: '\e748';
 }
 
 .el-icon-money:before {
-	content: "\e749";
+	content: '\e749';
 }
 
 .el-icon-bank-card:before {
-	content: "\e74a";
+	content: '\e74a';
 }
 
 .el-icon-box:before {
-	content: "\e74b";
+	content: '\e74b';
 }
 
 .el-icon-present:before {
-	content: "\e74c";
+	content: '\e74c';
 }
 
 .el-icon-sell:before {
-	content: "\e6d5";
+	content: '\e6d5';
 }
 
 .el-icon-sold-out:before {
-	content: "\e6d6";
+	content: '\e6d6';
 }
 
 .el-icon-shopping-bag-2:before {
-	content: "\e74d";
+	content: '\e74d';
 }
 
 .el-icon-shopping-bag-1:before {
-	content: "\e74e";
+	content: '\e74e';
 }
 
 .el-icon-shopping-cart-2:before {
-	content: "\e74f";
+	content: '\e74f';
 }
 
 .el-icon-shopping-cart-1:before {
-	content: "\e750";
+	content: '\e750';
 }
 
 .el-icon-shopping-cart-full:before {
-	content: "\e751";
+	content: '\e751';
 }
 
 .el-icon-smoking:before {
-	content: "\e752";
+	content: '\e752';
 }
 
 .el-icon-no-smoking:before {
-	content: "\e753";
+	content: '\e753';
 }
 
 .el-icon-house:before {
-	content: "\e754";
+	content: '\e754';
 }
 
 .el-icon-table-lamp:before {
-	content: "\e755";
+	content: '\e755';
 }
 
 .el-icon-school:before {
-	content: "\e756";
+	content: '\e756';
 }
 
 .el-icon-office-building:before {
-	content: "\e757";
+	content: '\e757';
 }
 
 .el-icon-toilet-paper:before {
-	content: "\e758";
+	content: '\e758';
 }
 
 .el-icon-notebook-2:before {
-	content: "\e759";
+	content: '\e759';
 }
 
 .el-icon-notebook-1:before {
-	content: "\e75a";
+	content: '\e75a';
 }
 
 .el-icon-files:before {
-	content: "\e75b";
+	content: '\e75b';
 }
 
 .el-icon-collection:before {
-	content: "\e75c";
+	content: '\e75c';
 }
 
 .el-icon-receiving:before {
-	content: "\e75d";
+	content: '\e75d';
 }
 
 .el-icon-suitcase-1:before {
-	content: "\e760";
+	content: '\e760';
 }
 
 .el-icon-suitcase:before {
-	content: "\e761";
+	content: '\e761';
 }
 
 .el-icon-film:before {
-	content: "\e763";
+	content: '\e763';
 }
 
 .el-icon-collection-tag:before {
-	content: "\e765";
+	content: '\e765';
 }
 
 .el-icon-data-analysis:before {
-	content: "\e766";
+	content: '\e766';
 }
 
 .el-icon-pie-chart:before {
-	content: "\e767";
+	content: '\e767';
 }
 
 .el-icon-data-board:before {
-	content: "\e768";
+	content: '\e768';
 }
 
 .el-icon-data-line:before {
-	content: "\e76d";
+	content: '\e76d';
 }
 
 .el-icon-reading:before {
-	content: "\e769";
+	content: '\e769';
 }
 
 .el-icon-magic-stick:before {
-	content: "\e76a";
+	content: '\e76a';
 }
 
 .el-icon-coordinate:before {
-	content: "\e76b";
+	content: '\e76b';
 }
 
 .el-icon-mouse:before {
-	content: "\e76c";
+	content: '\e76c';
 }
 
 .el-icon-brush:before {
-	content: "\e76e";
+	content: '\e76e';
 }
 
 .el-icon-headset:before {
-	content: "\e76f";
+	content: '\e76f';
 }
 
 .el-icon-umbrella:before {
-	content: "\e770";
+	content: '\e770';
 }
 
 .el-icon-scissors:before {
-	content: "\e771";
+	content: '\e771';
 }
 
 .el-icon-mobile:before {
-	content: "\e773";
+	content: '\e773';
 }
 
 .el-icon-attract:before {
-	content: "\e774";
+	content: '\e774';
 }
 
 .el-icon-monitor:before {
-	content: "\e775";
+	content: '\e775';
 }
 
 .el-icon-search:before {
-	content: "\e778";
+	content: '\e778';
 }
 
 .el-icon-takeaway-box:before {
-	content: "\e77a";
+	content: '\e77a';
 }
 
 .el-icon-paperclip:before {
-	content: "\e77d";
+	content: '\e77d';
 }
 
 .el-icon-printer:before {
-	content: "\e77e";
+	content: '\e77e';
 }
 
 .el-icon-document-add:before {
-	content: "\e782";
+	content: '\e782';
 }
 
 .el-icon-document:before {
-	content: "\e785";
+	content: '\e785';
 }
 
 .el-icon-document-checked:before {
-	content: "\e786";
+	content: '\e786';
 }
 
 .el-icon-document-copy:before {
-	content: "\e787";
+	content: '\e787';
 }
 
 .el-icon-document-delete:before {
-	content: "\e788";
+	content: '\e788';
 }
 
 .el-icon-document-remove:before {
-	content: "\e789";
+	content: '\e789';
 }
 
 .el-icon-tickets:before {
-	content: "\e78b";
+	content: '\e78b';
 }
 
 .el-icon-folder-checked:before {
-	content: "\e77f";
+	content: '\e77f';
 }
 
 .el-icon-folder-delete:before {
-	content: "\e780";
+	content: '\e780';
 }
 
 .el-icon-folder-remove:before {
-	content: "\e781";
+	content: '\e781';
 }
 
 .el-icon-folder-add:before {
-	content: "\e783";
+	content: '\e783';
 }
 
 .el-icon-folder-opened:before {
-	content: "\e784";
+	content: '\e784';
 }
 
 .el-icon-folder:before {
-	content: "\e78a";
+	content: '\e78a';
 }
 
 .el-icon-edit-outline:before {
-	content: "\e764";
+	content: '\e764';
 }
 
 .el-icon-edit:before {
-	content: "\e78c";
+	content: '\e78c';
 }
 
 .el-icon-date:before {
-	content: "\e78e";
+	content: '\e78e';
 }
 
 .el-icon-c-scale-to-original:before {
-	content: "\e7c6";
+	content: '\e7c6';
 }
 
 .el-icon-view:before {
-	content: "\e6ce";
+	content: '\e6ce';
 }
 
 .el-icon-loading:before {
-	content: "\e6cf";
+	content: '\e6cf';
 }
 
 .el-icon-rank:before {
-	content: "\e6d1";
+	content: '\e6d1';
 }
 
 .el-icon-sort-down:before {
-	content: "\e7c4";
+	content: '\e7c4';
 }
 
 .el-icon-sort-up:before {
-	content: "\e7c5";
+	content: '\e7c5';
 }
 
 .el-icon-sort:before {
-	content: "\e6d2";
+	content: '\e6d2';
 }
 
 .el-icon-finished:before {
-	content: "\e6cd";
+	content: '\e6cd';
 }
 
 .el-icon-refresh-left:before {
-	content: "\e6c7";
+	content: '\e6c7';
 }
 
 .el-icon-refresh-right:before {
-	content: "\e6c8";
+	content: '\e6c8';
 }
 
 .el-icon-refresh:before {
-	content: "\e6d0";
+	content: '\e6d0';
 }
 
 .el-icon-video-play:before {
-	content: "\e7c0";
+	content: '\e7c0';
 }
 
 .el-icon-video-pause:before {
-	content: "\e7c1";
+	content: '\e7c1';
 }
 
 .el-icon-d-arrow-right:before {
-	content: "\e6dc";
+	content: '\e6dc';
 }
 
 .el-icon-d-arrow-left:before {
-	content: "\e6dd";
+	content: '\e6dd';
 }
 
 .el-icon-arrow-up:before {
-	content: "\e6e1";
+	content: '\e6e1';
 }
 
 .el-icon-arrow-down:before {
-	content: "\e6df";
+	content: '\e6df';
 }
 
 .el-icon-arrow-right:before {
-	content: "\e6e0";
+	content: '\e6e0';
 }
 
 .el-icon-arrow-left:before {
-	content: "\e6de";
+	content: '\e6de';
 }
 
 .el-icon-top-right:before {
-	content: "\e6e7";
+	content: '\e6e7';
 }
 
 .el-icon-top-left:before {
-	content: "\e6e8";
+	content: '\e6e8';
 }
 
 .el-icon-top:before {
-	content: "\e6e6";
+	content: '\e6e6';
 }
 
 .el-icon-bottom:before {
-	content: "\e6eb";
+	content: '\e6eb';
 }
 
 .el-icon-right:before {
-	content: "\e6e9";
+	content: '\e6e9';
 }
 
 .el-icon-back:before {
-	content: "\e6ea";
+	content: '\e6ea';
 }
 
 .el-icon-bottom-right:before {
-	content: "\e6ec";
+	content: '\e6ec';
 }
 
 .el-icon-bottom-left:before {
-	content: "\e6ed";
+	content: '\e6ed';
 }
 
 .el-icon-caret-top:before {
-	content: "\e78f";
+	content: '\e78f';
 }
 
 .el-icon-caret-bottom:before {
-	content: "\e790";
+	content: '\e790';
 }
 
 .el-icon-caret-right:before {
-	content: "\e791";
+	content: '\e791';
 }
 
 .el-icon-caret-left:before {
-	content: "\e792";
+	content: '\e792';
 }
 
 .el-icon-d-caret:before {
-	content: "\e79a";
+	content: '\e79a';
 }
 
 .el-icon-share:before {
-	content: "\e793";
+	content: '\e793';
 }
 
 .el-icon-menu:before {
-	content: "\e798";
+	content: '\e798';
 }
 
 .el-icon-s-grid:before {
-	content: "\e7a6";
+	content: '\e7a6';
 }
 
 .el-icon-s-check:before {
-	content: "\e7a7";
+	content: '\e7a7';
 }
 
 .el-icon-s-data:before {
-	content: "\e7a8";
+	content: '\e7a8';
 }
 
 .el-icon-s-opportunity:before {
-	content: "\e7aa";
+	content: '\e7aa';
 }
 
 .el-icon-s-custom:before {
-	content: "\e7ab";
+	content: '\e7ab';
 }
 
 .el-icon-s-claim:before {
-	content: "\e7ad";
+	content: '\e7ad';
 }
 
 .el-icon-s-finance:before {
-	content: "\e7ae";
+	content: '\e7ae';
 }
 
 .el-icon-s-comment:before {
-	content: "\e7af";
+	content: '\e7af';
 }
 
 .el-icon-s-flag:before {
-	content: "\e7b0";
+	content: '\e7b0';
 }
 
 .el-icon-s-marketing:before {
-	content: "\e7b1";
+	content: '\e7b1';
 }
 
 .el-icon-s-shop:before {
-	content: "\e7b4";
+	content: '\e7b4';
 }
 
 .el-icon-s-open:before {
-	content: "\e7b5";
+	content: '\e7b5';
 }
 
 .el-icon-s-management:before {
-	content: "\e7b6";
+	content: '\e7b6';
 }
 
 .el-icon-s-ticket:before {
-	content: "\e7b7";
+	content: '\e7b7';
 }
 
 .el-icon-s-release:before {
-	content: "\e7b8";
+	content: '\e7b8';
 }
 
 .el-icon-s-home:before {
-	content: "\e7b9";
+	content: '\e7b9';
 }
 
 .el-icon-s-promotion:before {
-	content: "\e7ba";
+	content: '\e7ba';
 }
 
 .el-icon-s-operation:before {
-	content: "\e7bb";
+	content: '\e7bb';
 }
 
 .el-icon-s-unfold:before {
-	content: "\e7bc";
+	content: '\e7bc';
 }
 
 .el-icon-s-fold:before {
-	content: "\e7a9";
+	content: '\e7a9';
 }
 
 .el-icon-s-platform:before {
-	content: "\e7bd";
+	content: '\e7bd';
 }
 
 .el-icon-s-order:before {
-	content: "\e7be";
+	content: '\e7be';
 }
 
 .el-icon-s-cooperation:before {
-	content: "\e7bf";
+	content: '\e7bf';
 }
 
 .el-icon-bell:before {
-	content: "\e725";
+	content: '\e725';
 }
 
 .el-icon-message-solid:before {
-	content: "\e799";
+	content: '\e799';
 }
 
 .el-icon-video-camera:before {
-	content: "\e772";
+	content: '\e772';
 }
 
 .el-icon-video-camera-solid:before {
-	content: "\e796";
+	content: '\e796';
 }
 
 .el-icon-camera:before {
-	content: "\e779";
+	content: '\e779';
 }
 
 .el-icon-camera-solid:before {
-	content: "\e79b";
+	content: '\e79b';
 }
 
 .el-icon-download:before {
-	content: "\e77c";
+	content: '\e77c';
 }
 
 .el-icon-upload2:before {
-	content: "\e77b";
+	content: '\e77b';
 }
 
 .el-icon-upload:before {
-	content: "\e7c3";
+	content: '\e7c3';
 }
 
 .el-icon-picture-outline-round:before {
-	content: "\e75f";
+	content: '\e75f';
 }
 
 .el-icon-picture-outline:before {
-	content: "\e75e";
+	content: '\e75e';
 }
 
 .el-icon-picture:before {
-	content: "\e79f";
+	content: '\e79f';
 }
 
 .el-icon-close:before {
-	content: "\e6db";
+	content: '\e6db';
 }
 
 .el-icon-check:before {
-	content: "\e6da";
+	content: '\e6da';
 }
 
 .el-icon-plus:before {
-	content: "\e6d9";
+	content: '\e6d9';
 }
 
 .el-icon-minus:before {
-	content: "\e6d8";
+	content: '\e6d8';
 }
 
 .el-icon-help:before {
-	content: "\e73d";
+	content: '\e73d';
 }
 
 .el-icon-s-help:before {
-	content: "\e7b3";
+	content: '\e7b3';
 }
 
 .el-icon-circle-close:before {
-	content: "\e78d";
+	content: '\e78d';
 }
 
 .el-icon-circle-check:before {
-	content: "\e720";
+	content: '\e720';
 }
 
 .el-icon-circle-plus-outline:before {
-	content: "\e723";
+	content: '\e723';
 }
 
 .el-icon-remove-outline:before {
-	content: "\e722";
+	content: '\e722';
 }
 
 .el-icon-zoom-out:before {
-	content: "\e776";
+	content: '\e776';
 }
 
 .el-icon-zoom-in:before {
-	content: "\e777";
+	content: '\e777';
 }
 
 .el-icon-error:before {
-	content: "\e79d";
+	content: '\e79d';
 }
 
 .el-icon-success:before {
-	content: "\e79c";
+	content: '\e79c';
 }
 
 .el-icon-circle-plus:before {
-	content: "\e7a0";
+	content: '\e7a0';
 }
 
 .el-icon-remove:before {
-	content: "\e7a2";
+	content: '\e7a2';
 }
 
 .el-icon-info:before {
-	content: "\e7a1";
+	content: '\e7a1';
 }
 
 .el-icon-question:before {
-	content: "\e7a4";
+	content: '\e7a4';
 }
 
 .el-icon-warning-outline:before {
-	content: "\e6c9";
+	content: '\e6c9';
 }
 
 .el-icon-warning:before {
-	content: "\e7a3";
+	content: '\e7a3';
 }
 
 .el-icon-goods:before {
-	content: "\e7c2";
+	content: '\e7c2';
 }
 
 .el-icon-s-goods:before {
-	content: "\e7b2";
+	content: '\e7b2';
 }
 
 .el-icon-star-off:before {
-	content: "\e717";
+	content: '\e717';
 }
 
 .el-icon-star-on:before {
-	content: "\e797";
+	content: '\e797';
 }
 
 .el-icon-more-outline:before {
-	content: "\e6cc";
+	content: '\e6cc';
 }
 
 .el-icon-more:before {
-	content: "\e794";
+	content: '\e794';
 }
 
 .el-icon-phone-outline:before {
-	content: "\e6cb";
+	content: '\e6cb';
 }
 
 .el-icon-phone:before {
-	content: "\e795";
+	content: '\e795';
 }
 
 .el-icon-user:before {
-	content: "\e6e3";
+	content: '\e6e3';
 }
 
 .el-icon-user-solid:before {
-	content: "\e7a5";
+	content: '\e7a5';
 }
 
 .el-icon-setting:before {
-	content: "\e6ca";
+	content: '\e6ca';
 }
 
 .el-icon-s-tools:before {
-	content: "\e7ac";
+	content: '\e7ac';
 }
 
 .el-icon-delete:before {
-	content: "\e6d7";
+	content: '\e6d7';
 }
 
 .el-icon-delete-solid:before {
-	content: "\e7c9";
+	content: '\e7c9';
 }
 
 .el-icon-eleme:before {
-	content: "\e7c7";
+	content: '\e7c7';
 }
 
 .el-icon-platform-eleme:before {
-	content: "\e7ca";
+	content: '\e7ca';
 }
 
 .el-icon-loading {
diff --git a/packages/design-system/theme/src/input-number.scss b/packages/design-system/theme/src/input-number.scss
index 62038fc825..95bac89fd9 100644
--- a/packages/design-system/theme/src/input-number.scss
+++ b/packages/design-system/theme/src/input-number.scss
@@ -92,7 +92,7 @@
 			width: var.$input-small-height;
 			font-size: var.$input-small-font-size;
 
-			[class*="el-icon"] {
+			[class*='el-icon'] {
 				transform: scale(0.9);
 			}
 		}
@@ -111,7 +111,7 @@
 			width: var.$input-mini-height;
 			font-size: var.$input-mini-font-size;
 
-			[class*="el-icon"] {
+			[class*='el-icon'] {
 				transform: scale(0.8);
 			}
 		}
@@ -139,7 +139,7 @@
 			height: auto;
 			line-height: #{(var.$input-height - 2) * 0.5};
 
-			[class*="el-icon"] {
+			[class*='el-icon'] {
 				transform: scale(0.8);
 			}
 		}
@@ -159,23 +159,23 @@
 			border-radius: 0 0 var(--border-radius-base) 0;
 		}
 
-		&[class*="medium"] {
-			[class*="increase"],
-			[class*="decrease"] {
+		&[class*='medium'] {
+			[class*='increase'],
+			[class*='decrease'] {
 				line-height: #{(var.$input-medium-height - 2) * 0.5};
 			}
 		}
 
-		&[class*="small"] {
-			[class*="increase"],
-			[class*="decrease"] {
+		&[class*='small'] {
+			[class*='increase'],
+			[class*='decrease'] {
 				line-height: #{(var.$input-small-height - 2) * 0.5};
 			}
 		}
 
-		&[class*="mini"] {
-			[class*="increase"],
-			[class*="decrease"] {
+		&[class*='mini'] {
+			[class*='increase'],
+			[class*='decrease'] {
 				line-height: #{(var.$input-mini-height - 2) * 0.5};
 			}
 		}
diff --git a/packages/design-system/theme/src/input.scss b/packages/design-system/theme/src/input.scss
index f44868c0b8..4cf74e813a 100644
--- a/packages/design-system/theme/src/input.scss
+++ b/packages/design-system/theme/src/input.scss
@@ -167,7 +167,7 @@
 		line-height: var.$input-height;
 
 		&:after {
-			content: "";
+			content: '';
 			height: 100%;
 			width: 0;
 			display: inline-block;
diff --git a/packages/design-system/theme/src/link.scss b/packages/design-system/theme/src/link.scss
index cbe78726b1..44051a781e 100644
--- a/packages/design-system/theme/src/link.scss
+++ b/packages/design-system/theme/src/link.scss
@@ -25,7 +25,7 @@ $typeMap: (
 
 	@include mixins.when(underline) {
 		&:hover:after {
-			content: "";
+			content: '';
 			position: absolute;
 			left: 0;
 			right: 0;
@@ -39,7 +39,7 @@ $typeMap: (
 		cursor: not-allowed;
 	}
 
-	& [class*="el-icon-"] {
+	& [class*='el-icon-'] {
 		& + span {
 			margin-left: 5px;
 		}
diff --git a/packages/design-system/theme/src/menu.scss b/packages/design-system/theme/src/menu.scss
index f8eb861c53..8cd4519279 100644
--- a/packages/design-system/theme/src/menu.scss
+++ b/packages/design-system/theme/src/menu.scss
@@ -134,7 +134,7 @@
 
 		> .el-menu-item,
 		> .el-submenu > .el-submenu__title {
-			[class^="el-icon-"] {
+			[class^='el-icon-'] {
 				margin: 0;
 				vertical-align: middle;
 				width: 24px;
@@ -200,7 +200,7 @@
 @include mixins.b(menu-item) {
 	@include menu-item;
 
-	& [class^="el-icon-"] {
+	& [class^='el-icon-'] {
 		margin-right: 5px;
 		width: 24px;
 		text-align: center;
@@ -262,7 +262,7 @@
 			background: none !important;
 		}
 	}
-	[class^="el-icon-"] {
+	[class^='el-icon-'] {
 		vertical-align: middle;
 		margin-right: 5px;
 		width: 24px;
diff --git a/packages/design-system/theme/src/message-box.scss b/packages/design-system/theme/src/message-box.scss
index 6ab110905f..b449dceaed 100644
--- a/packages/design-system/theme/src/message-box.scss
+++ b/packages/design-system/theme/src/message-box.scss
@@ -28,7 +28,7 @@
 		text-align: center;
 
 		&::after {
-			content: "";
+			content: '';
 			display: inline-block;
 			height: 100%;
 			width: 0;
diff --git a/packages/design-system/theme/src/mixins/config.scss b/packages/design-system/theme/src/mixins/config.scss
index 91d8d0add0..87e29b458c 100644
--- a/packages/design-system/theme/src/mixins/config.scss
+++ b/packages/design-system/theme/src/mixins/config.scss
@@ -1,4 +1,4 @@
-$namespace: "el";
-$element-separator: "__";
-$modifier-separator: "--";
-$state-prefix: "is-";
+$namespace: 'el';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';
diff --git a/packages/design-system/theme/src/mixins/function.scss b/packages/design-system/theme/src/mixins/function.scss
index 90481f59d7..388f28d1ac 100644
--- a/packages/design-system/theme/src/mixins/function.scss
+++ b/packages/design-system/theme/src/mixins/function.scss
@@ -23,7 +23,7 @@
 @function containWhenFlag($selector) {
 	$selector: selectorToString($selector);
 
-	@if string.index($selector, "." + config.$state-prefix) {
+	@if string.index($selector, '.' + config.$state-prefix) {
 		@return true;
 	} @else {
 		@return false;
@@ -33,7 +33,7 @@
 @function containPseudoClass($selector) {
 	$selector: selectorToString($selector);
 
-	@if string.index($selector, ":") {
+	@if string.index($selector, ':') {
 		@return true;
 	} @else {
 		@return false;
diff --git a/packages/design-system/theme/src/mixins/mixins.scss b/packages/design-system/theme/src/mixins/mixins.scss
index 614c222576..b13964a0bd 100644
--- a/packages/design-system/theme/src/mixins/mixins.scss
+++ b/packages/design-system/theme/src/mixins/mixins.scss
@@ -71,7 +71,7 @@
 /* BEM
  -------------------------- */
 @mixin b($block) {
-	$B: config.$namespace + "-" + $block !global;
+	$B: config.$namespace + '-' + $block !global;
 
 	.#{$B} {
 		@content;
@@ -81,14 +81,14 @@
 @mixin e($element) {
 	$E: $element !global;
 	$selector: &;
-	$currentSelector: "";
+	$currentSelector: '';
 	@each $unit in $element {
 		$currentSelector: #{$currentSelector +
-			"." +
+			'.' +
 			$B +
 			config.$element-separator +
 			$unit +
-			","};
+			','};
 	}
 
 	@if function.hitAllSpecialNestRule($selector) {
@@ -110,13 +110,13 @@
 
 @mixin m($modifier) {
 	$selector: &;
-	$currentSelector: "";
+	$currentSelector: '';
 	@each $unit in $modifier {
 		$currentSelector: #{$currentSelector +
 			& +
 			config.$modifier-separator +
 			$unit +
-			","};
+			','};
 	}
 
 	@at-root {
@@ -128,7 +128,7 @@
 
 @mixin configurable-m($modifier, $E-flag: false) {
 	$selector: &;
-	$interpolation: "";
+	$interpolation: '';
 
 	@if $E-flag {
 		$interpolation: config.$element-separator + $E-flag;
@@ -144,12 +144,12 @@
 }
 
 @mixin spec-selector(
-	$specSelector: "",
+	$specSelector: '',
 	$element: $E,
 	$modifier: false,
 	$block: $B
 ) {
-	$modifierCombo: "";
+	$modifierCombo: '';
 
 	@if $modifier {
 		$modifierCombo: config.$modifier-separator + $modifier;
@@ -167,7 +167,7 @@
 
 @mixin meb($modifier: false, $element: $E, $block: $B) {
 	$selector: &;
-	$modifierCombo: "";
+	$modifierCombo: '';
 
 	@if $modifier {
 		$modifierCombo: config.$modifier-separator + $modifier;
@@ -191,11 +191,11 @@
 }
 
 @mixin extend-rule($name) {
-	@extend #{"%shared-" + $name};
+	@extend #{'%shared-' + $name};
 }
 
 @mixin share-rule($name) {
-	$rule-name: "%shared-" + $name;
+	$rule-name: '%shared-' + $name;
 
 	@at-root #{$rule-name} {
 		@content;
@@ -203,7 +203,7 @@
 }
 
 @mixin pseudo($pseudo) {
-	@at-root #{&}#{":#{$pseudo}"} {
+	@at-root #{&}#{':#{$pseudo}'} {
 		@content;
 	}
 }
diff --git a/packages/design-system/theme/src/mixins/utils.scss b/packages/design-system/theme/src/mixins/utils.scss
index e5ff00e839..e86ede1e4a 100644
--- a/packages/design-system/theme/src/mixins/utils.scss
+++ b/packages/design-system/theme/src/mixins/utils.scss
@@ -11,7 +11,7 @@
 		#{$selector}::before,
 		#{$selector}::after {
 			display: table;
-			content: "";
+			content: '';
 		}
 		#{$selector}::after {
 			clear: both;
@@ -25,7 +25,7 @@
 	@at-root {
 		#{$selector}::after {
 			display: inline-block;
-			content: "";
+			content: '';
 			height: 100%;
 			vertical-align: middle;
 		}
diff --git a/packages/design-system/theme/src/option-group.scss b/packages/design-system/theme/src/option-group.scss
index 324385698b..14ebf25395 100644
--- a/packages/design-system/theme/src/option-group.scss
+++ b/packages/design-system/theme/src/option-group.scss
@@ -17,7 +17,7 @@
 			padding-bottom: 24px;
 
 			&::after {
-				content: "";
+				content: '';
 				position: absolute;
 				display: block;
 				left: $gap;
diff --git a/packages/design-system/theme/src/page-header.scss b/packages/design-system/theme/src/page-header.scss
index b17e57cd19..ca0aa98332 100644
--- a/packages/design-system/theme/src/page-header.scss
+++ b/packages/design-system/theme/src/page-header.scss
@@ -12,7 +12,7 @@
 		position: relative;
 
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			width: 1px;
 			height: 16px;
diff --git a/packages/design-system/theme/src/pagination.scss b/packages/design-system/theme/src/pagination.scss
index dd863e4948..dafef5e2f7 100644
--- a/packages/design-system/theme/src/pagination.scss
+++ b/packages/design-system/theme/src/pagination.scss
@@ -10,7 +10,7 @@
 	font-weight: bold;
 	@include utils.utils-clearfix;
 
-	span:not([class*="suffix"]),
+	span:not([class*='suffix']),
 	button {
 		display: inline-block;
 		font-size: var.$pagination-font-size;
@@ -115,7 +115,7 @@
 			line-height: 24px;
 		}
 
-		span:not([class*="suffix"]),
+		span:not([class*='suffix']),
 		button {
 			height: 22px;
 			line-height: 22px;
diff --git a/packages/design-system/theme/src/popper.scss b/packages/design-system/theme/src/popper.scss
index 85486b8481..f1e1fc1e88 100644
--- a/packages/design-system/theme/src/popper.scss
+++ b/packages/design-system/theme/src/popper.scss
@@ -18,15 +18,15 @@
 	}
 
 	.popper__arrow::after {
-		content: " ";
+		content: ' ';
 		border-width: var.$popover-arrow-size;
 	}
 
-	&[x-placement^="top"] {
+	&[x-placement^='top'] {
 		margin-bottom: #{var.$popover-arrow-size + 6};
 	}
 
-	&[x-placement^="top"] .popper__arrow {
+	&[x-placement^='top'] .popper__arrow {
 		bottom: -(var.$popover-arrow-size);
 		left: 50%;
 		margin-right: #{var.$tooltip-arrow-size * 0.5};
@@ -41,11 +41,11 @@
 		}
 	}
 
-	&[x-placement^="bottom"] {
+	&[x-placement^='bottom'] {
 		margin-top: #{var.$popover-arrow-size + 6};
 	}
 
-	&[x-placement^="bottom"] .popper__arrow {
+	&[x-placement^='bottom'] .popper__arrow {
 		top: -(var.$popover-arrow-size);
 		left: 50%;
 		margin-right: #{var.$tooltip-arrow-size * 0.5};
@@ -60,11 +60,11 @@
 		}
 	}
 
-	&[x-placement^="right"] {
+	&[x-placement^='right'] {
 		margin-left: #{var.$popover-arrow-size + 6};
 	}
 
-	&[x-placement^="right"] .popper__arrow {
+	&[x-placement^='right'] .popper__arrow {
 		top: 50%;
 		left: -(var.$popover-arrow-size);
 		margin-bottom: #{var.$tooltip-arrow-size * 0.5};
@@ -79,11 +79,11 @@
 		}
 	}
 
-	&[x-placement^="left"] {
+	&[x-placement^='left'] {
 		margin-right: #{var.$popover-arrow-size + 6};
 	}
 
-	&[x-placement^="left"] .popper__arrow {
+	&[x-placement^='left'] .popper__arrow {
 		top: 50%;
 		right: -(var.$popover-arrow-size);
 		margin-bottom: #{var.$tooltip-arrow-size * 0.5};
diff --git a/packages/design-system/theme/src/radio-button.scss b/packages/design-system/theme/src/radio-button.scss
index 4439a6d85f..93ff04745d 100644
--- a/packages/design-system/theme/src/radio-button.scss
+++ b/packages/design-system/theme/src/radio-button.scss
@@ -37,7 +37,7 @@
 			color: var(--color-primary);
 		}
 
-		& [class*="el-icon-"] {
+		& [class*='el-icon-'] {
 			line-height: 0.9;
 
 			& + span {
diff --git a/packages/design-system/theme/src/radio.scss b/packages/design-system/theme/src/radio.scss
index 098738c81d..a6d400ca31 100644
--- a/packages/design-system/theme/src/radio.scss
+++ b/packages/design-system/theme/src/radio.scss
@@ -165,7 +165,7 @@
 			height: 4px;
 			border-radius: var.$radio-input-border-radius;
 			background-color: var.$color-white;
-			content: "";
+			content: '';
 			position: absolute;
 			left: 50%;
 			top: 50%;
diff --git a/packages/design-system/theme/src/reset.scss b/packages/design-system/theme/src/reset.scss
index 576e20c676..0f9224645a 100644
--- a/packages/design-system/theme/src/reset.scss
+++ b/packages/design-system/theme/src/reset.scss
@@ -131,7 +131,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-	content: "";
+	content: '';
 	content: none;
 }
 
diff --git a/packages/design-system/theme/src/select-dropdown.scss b/packages/design-system/theme/src/select-dropdown.scss
index 9e7cce57cb..6d2f370ad8 100644
--- a/packages/design-system/theme/src/select-dropdown.scss
+++ b/packages/design-system/theme/src/select-dropdown.scss
@@ -24,8 +24,8 @@
 			&::after {
 				position: absolute;
 				right: 20px;
-				font-family: "element-icons";
-				content: "\e6da";
+				font-family: 'element-icons';
+				content: '\e6da';
 				font-size: 12px;
 				font-weight: bold;
 				-webkit-font-smoothing: antialiased;
diff --git a/packages/design-system/theme/src/step.scss b/packages/design-system/theme/src/step.scss
index b329c76bd9..8bfe799c12 100644
--- a/packages/design-system/theme/src/step.scss
+++ b/packages/design-system/theme/src/step.scss
@@ -84,7 +84,7 @@
 		line-height: 1;
 		color: inherit;
 
-		&[class*="el-icon"]:not(.is-status) {
+		&[class*='el-icon']:not(.is-status) {
 			font-size: 25px;
 			font-weight: normal;
 		}
@@ -252,7 +252,7 @@
 		}
 
 		@include mixins.e(icon-inner) {
-			&[class*="el-icon"]:not(.is-status) {
+			&[class*='el-icon']:not(.is-status) {
 				font-size: 18px;
 			}
 
@@ -273,7 +273,7 @@
 			line-height: 20px;
 		}
 
-		@include mixins.pseudo("not(:last-of-type)") {
+		@include mixins.pseudo('not(:last-of-type)') {
 			@include mixins.e(title) {
 				max-width: 50%;
 				word-break: break-all;
@@ -288,7 +288,7 @@
 
 			&::before,
 			&::after {
-				content: "";
+				content: '';
 				display: inline-block;
 				position: absolute;
 				height: 15px;
diff --git a/packages/design-system/theme/src/switch.scss b/packages/design-system/theme/src/switch.scss
index b54f0c72c3..8c7c68efa6 100644
--- a/packages/design-system/theme/src/switch.scss
+++ b/packages/design-system/theme/src/switch.scss
@@ -67,7 +67,7 @@
 		vertical-align: middle;
 
 		&:after {
-			content: "";
+			content: '';
 			position: absolute;
 			top: 1px;
 			left: 1px;
diff --git a/packages/design-system/theme/src/table.scss b/packages/design-system/theme/src/table.scss
index 5a698883aa..b55d060cad 100644
--- a/packages/design-system/theme/src/table.scss
+++ b/packages/design-system/theme/src/table.scss
@@ -66,7 +66,7 @@
 		background-color: var.$color-white;
 
 		// 纯属为了增加权重
-		&[class*="cell"] {
+		&[class*='cell'] {
 			padding: 20px 50px;
 		}
 
@@ -176,7 +176,7 @@
 	tr {
 		background-color: var.$color-white;
 
-		input[type="checkbox"] {
+		input[type='checkbox'] {
 			margin: 0;
 		}
 	}
@@ -211,7 +211,7 @@
 
 		&.required > div::before {
 			display: inline-block;
-			content: "";
+			content: '';
 			width: 8px;
 			height: 8px;
 			border-radius: 50%;
@@ -252,7 +252,7 @@
 		border: var.$table-border;
 
 		@include mixins.share-rule(border-pseudo) {
-			content: "";
+			content: '';
 			position: absolute;
 			background-color: var.$table-border-color;
 			z-index: 1;
@@ -318,7 +318,7 @@
 		box-shadow: var.$table-fixed-box-shadow;
 
 		&::before {
-			content: "";
+			content: '';
 			position: absolute;
 			left: 0;
 			bottom: 0;
@@ -559,7 +559,7 @@
 		}
 	}
 
-	[class*="el-table__row--level"] {
+	[class*='el-table__row--level'] {
 		.el-table__expand-icon {
 			display: inline-block;
 			width: 20px;
diff --git a/packages/design-system/theme/src/tabs.scss b/packages/design-system/theme/src/tabs.scss
index 46df8d5ead..2f82121c09 100644
--- a/packages/design-system/theme/src/tabs.scss
+++ b/packages/design-system/theme/src/tabs.scss
@@ -45,7 +45,7 @@
 		position: relative;
 
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			left: 0;
 			bottom: 0;
diff --git a/packages/design-system/theme/src/tooltip.scss b/packages/design-system/theme/src/tooltip.scss
index 8558bca5be..27aa1f6cc1 100644
--- a/packages/design-system/theme/src/tooltip.scss
+++ b/packages/design-system/theme/src/tooltip.scss
@@ -31,15 +31,15 @@
 		}
 
 		.popper__arrow::after {
-			content: " ";
+			content: ' ';
 			border-width: 5px;
 		}
 
-		&[x-placement^="top"] {
+		&[x-placement^='top'] {
 			margin-bottom: #{var.$tooltip-arrow-size + 6px};
 		}
 
-		&[x-placement^="top"] .popper__arrow {
+		&[x-placement^='top'] .popper__arrow {
 			bottom: -(var.$tooltip-arrow-size);
 			border-top-color: var.$tooltip-border-color;
 			border-bottom-width: 0;
@@ -52,11 +52,11 @@
 			}
 		}
 
-		&[x-placement^="bottom"] {
+		&[x-placement^='bottom'] {
 			margin-top: #{var.$tooltip-arrow-size + 6px};
 		}
 
-		&[x-placement^="bottom"] .popper__arrow {
+		&[x-placement^='bottom'] .popper__arrow {
 			top: -(var.$tooltip-arrow-size);
 			border-top-width: 0;
 			border-bottom-color: var.$tooltip-border-color;
@@ -69,11 +69,11 @@
 			}
 		}
 
-		&[x-placement^="right"] {
+		&[x-placement^='right'] {
 			margin-left: #{var.$tooltip-arrow-size + 6px};
 		}
 
-		&[x-placement^="right"] .popper__arrow {
+		&[x-placement^='right'] .popper__arrow {
 			left: -(var.$tooltip-arrow-size);
 			border-right-color: var.$tooltip-border-color;
 			border-left-width: 0;
@@ -86,11 +86,11 @@
 			}
 		}
 
-		&[x-placement^="left"] {
+		&[x-placement^='left'] {
 			margin-right: #{var.$tooltip-arrow-size + 6px};
 		}
 
-		&[x-placement^="left"] .popper__arrow {
+		&[x-placement^='left'] .popper__arrow {
 			right: -(var.$tooltip-arrow-size);
 			border-right-width: 0;
 			border-left-color: var.$tooltip-border-color;
@@ -113,25 +113,25 @@
 			background: var.$tooltip-color;
 			border: 1px solid var.$tooltip-fill;
 
-			&[x-placement^="top"] .popper__arrow {
+			&[x-placement^='top'] .popper__arrow {
 				border-top-color: var.$tooltip-fill;
 				&::after {
 					border-top-color: var.$tooltip-color;
 				}
 			}
-			&[x-placement^="bottom"] .popper__arrow {
+			&[x-placement^='bottom'] .popper__arrow {
 				border-bottom-color: var.$tooltip-fill;
 				&::after {
 					border-bottom-color: var.$tooltip-color;
 				}
 			}
-			&[x-placement^="left"] .popper__arrow {
+			&[x-placement^='left'] .popper__arrow {
 				border-left-color: var.$tooltip-fill;
 				&::after {
 					border-left-color: var.$tooltip-color;
 				}
 			}
-			&[x-placement^="right"] .popper__arrow {
+			&[x-placement^='right'] .popper__arrow {
 				border-right-color: var.$tooltip-fill;
 				&::after {
 					border-right-color: var.$tooltip-color;
diff --git a/packages/design-system/theme/src/transfer.scss b/packages/design-system/theme/src/transfer.scss
index 372d7c8569..9fdd222265 100644
--- a/packages/design-system/theme/src/transfer.scss
+++ b/packages/design-system/theme/src/transfer.scss
@@ -53,7 +53,7 @@
 			font-size: 14px;
 		}
 
-		& [class*="el-icon-"] + span {
+		& [class*='el-icon-'] + span {
 			margin-left: 0;
 		}
 	}
diff --git a/packages/design-system/theme/src/upload.scss b/packages/design-system/theme/src/upload.scss
index 1eeac81863..eceb45a7d0 100644
--- a/packages/design-system/theme/src/upload.scss
+++ b/packages/design-system/theme/src/upload.scss
@@ -240,7 +240,7 @@
 		transition: color 0.3s;
 		white-space: nowrap;
 
-		[class^="el-icon"] {
+		[class^='el-icon'] {
 			height: 100%;
 			margin-right: 7px;
 			color: var.$color-text-secondary;
@@ -346,7 +346,7 @@
 			transition: opacity 0.3s;
 			&::after {
 				display: inline-block;
-				content: "";
+				content: '';
 				height: 100%;
 				vertical-align: middle;
 			}