switch to single space

packages/design-system/.eslintrc.js

@@ -4,25 +4,25 @@ module.exports = {
 		node: true,
 	},
 	extends: [
-		"plugin:vue/essential",
+		'plugin:vue/essential',
-		"eslint:recommended",
+		'eslint:recommended',
-		"@vue/typescript/recommended",
+		'@vue/typescript/recommended',
-		"@vue/prettier",
+		'@vue/prettier',
-		"@vue/prettier/@typescript-eslint",
+		'@vue/prettier/@typescript-eslint',
 	],
 	parserOptions: {
 		ecmaVersion: 2020,
 	},
 	rules: {
-		"no-console": 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",
+		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 	},
-	ignorePatterns: ["gulpfile.js"],
+	ignorePatterns: ['gulpfile.js'],
 	overrides: [
 		{
 			files: [
-				"**/__tests__/*.{j,t}s?(x)",
+				'**/__tests__/*.{j,t}s?(x)',
-				"**/tests/unit/**/*.spec.{j,t}s?(x)",
+				'**/tests/unit/**/*.spec.{j,t}s?(x)',
 			],
 			env: {
 				jest: true,

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'

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";
+} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 library.add(faAngleDoubleLeft);
 library.add(faAngleDown);

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');

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-links',
-		"@storybook/addon-essentials",
+		'@storybook/addon-essentials',
-		"storybook-addon-designs",
+		'storybook-addon-designs',
-		"storybook-addon-themes",
+		'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"],
+					use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-					include: path.resolve(__dirname, "../"),
+					include: path.resolve(__dirname, '../'),
 				},
 			],
 		});

packages/design-system/.storybook/preview.js

@@ -1,7 +1,7 @@
-import "./font-awesome-icons";
+import './font-awesome-icons';
-import "./storybook.scss";
+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",
+				name: '--color-background-dark',
-				value: "var(--color-background-dark)",
+				value: 'var(--color-background-dark)',
 			},
 			{
-				name: "--color-background-base",
+				name: '--color-background-base',
-				value: "var(--color-background-base)",
+				value: 'var(--color-background-base)',
 			},
 			{
-				name: "--color-background-light",
+				name: '--color-background-light',
-				value: "var(--color-background-light)",
+				value: 'var(--color-background-light)',
 			},
 			{
-				name: "--color-background-lighter",
+				name: '--color-background-lighter',
-				value: "var(--color-background-lighter)",
+				value: 'var(--color-background-lighter)',
 			},
 			{
-				name: "--color-background-xlight",
+				name: '--color-background-xlight',
-				value: "var(--color-background-xlight)",
+				value: 'var(--color-background-xlight)',
 			},
 		],
 	},
 	themes: {
 		list: [
 			{
-				name: "dark",
+				name: 'dark',
-				class: "theme-dark",
+				class: 'theme-dark',
-				color: "#000",
+				color: '#000',
 			},
 		],
 	},
 	options: {
 		storySort: {
-			order: ["Docs", "Styleguide", "Atoms"],
+			order: ['Docs', 'Styleguide', 'Atoms'],
 		},
 	},
 };

packages/design-system/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	presets: ["@vue/cli-plugin-babel/preset"],
+	presets: ['@vue/cli-plugin-babel/preset'],
 };

packages/design-system/gulpfile.js

@@ -1,36 +1,36 @@
-"use strict";
+'use strict';
 
-const gulp = require("gulp");
+const gulp = require('gulp');
-const sass = require("gulp-dart-sass");
+const sass = require('gulp-dart-sass');
-const autoprefixer = require("gulp-autoprefixer");
+const autoprefixer = require('gulp-autoprefixer');
-const cleanCSS = require("gulp-clean-css");
+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'));
 }

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',
 };

packages/design-system/src/components/N8nButton/Button.stories.js

@@ -1,69 +1,69 @@
-import N8nButton from "./Button.vue";
+import N8nButton from './Button.vue';
-import { action } from "@storybook/addon-actions";
+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",
+			control: 'select',
-			options: ["primary", "outline", "light", "text"],
+			options: ['primary', 'outline', 'light', 'text'],
 		},
 		size: {
 			control: {
-				type: "select",
+				type: 'select',
-				options: ["sm", "md", "lg"],
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 		loading: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 		icon: {
 			control: {
-				type: "text",
+				type: 'text',
 			},
 		},
 		iconSize: {
 			control: {
-				type: "select",
+				type: 'select',
-				options: ["sm", "md", "lg"],
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 		circle: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 		fullWidth: {
-			type: "boolean",
+			type: 'boolean',
 		},
 		theme: {
-			type: "select",
+			type: 'select',
-			options: ["success", "danger", "warning"],
+			options: ['success', 'danger', 'warning'],
 		},
 		float: {
-			type: "select",
+			type: 'select',
-			options: ["left", "right"],
+			options: ['left', 'right'],
 		},
 	},
 	parameters: {
 		design: {
-			type: "figma",
+			type: 'figma',
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147",
+			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",
+	type: 'primary',
-	label: "Button",
+	label: 'Button',
 };
 
 export const Outline = ManyTemplate.bind({});
 Outline.args = {
-	type: "outline",
+	type: 'outline',
-	label: "Button",
+	label: 'Button',
 };
 
 export const Light = ManyTemplate.bind({});
 Light.args = {
-	type: "light",
+	type: 'light',
-	label: "Button",
+	label: 'Button',
 };
 
 export const WithIcon = ManyTemplate.bind({});
 WithIcon.args = {
-	label: "Button",
+	label: 'Button',
-	icon: "plus-circle",
+	icon: 'plus-circle',
 };
 
 export const Text = ManyTemplate.bind({});
 Text.args = {
-	type: "text",
+	type: 'text',
-	label: "Button",
+	label: 'Button',
-	icon: "plus-circle",
+	icon: 'plus-circle',
 };

packages/design-system/src/components/N8nButton/Button.vue

@@ -30,18 +30,18 @@
 </template>
 
 <script lang="ts">
-import N8nIcon from "../N8nIcon";
+import N8nIcon from '../N8nIcon';
-import N8nSpinner from "../N8nSpinner";
+import N8nSpinner from '../N8nSpinner';
-import ElButton from "element-ui/packages/button";
+import ElButton from 'element-ui/packages/button';
 
 const sizeMap: { [size: string]: string } = {
-	sm: "small",
+	sm: 'small',
-	md: "medium",
+	md: 'medium',
-	lg: "",
+	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"
+		return props.type === 'text'
-			? "text"
+			? 'text'
-			: `${props.type}-${props.theme || "primary"}`;
+			: `${props.type}-${props.theme || 'primary'}`;
 	},
 };
 </script>

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;

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",
+				type: 'select',
-				options: ["sm", "md", "lg"],
+				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',
 };

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: {

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;

packages/design-system/src/components/N8nIconButton/IconButton.stories.js

@@ -1,47 +1,47 @@
-import N8nIconButton from "./IconButton.vue";
+import N8nIconButton from './IconButton.vue';
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions';
 
 export default {
-	title: "Atoms/Icon Button",
+	title: 'Atoms/Icon Button',
 	component: N8nIconButton,
 	argTypes: {
 		type: {
-			control: "select",
+			control: 'select',
-			options: ["primary", "outline", "light", "text"],
+			options: ['primary', 'outline', 'light', 'text'],
 		},
 		title: {
-			control: "text",
+			control: 'text',
 		},
 		size: {
 			control: {
-				type: "select",
+				type: 'select',
-				options: ["sm", "md", "lg", "xl"],
+				options: ['sm', 'md', 'lg', 'xl'],
 			},
 		},
 		loading: {
 			control: {
-				type: "boolean",
+				type: 'boolean',
 			},
 		},
 		icon: {
 			control: {
-				type: "text",
+				type: 'text',
 			},
 		},
 		theme: {
 			control: {
-				type: "select",
+				type: 'select',
-				options: ["success", "warning", "danger"],
+				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",
+	icon: 'plus',
-	title: "my title",
+	title: 'my title',
 };
 
 const ManyTemplate = (args, { argTypes }) => ({
@@ -71,28 +71,28 @@ const ManyTemplate = (args, { argTypes }) => ({
 
 export const Primary = ManyTemplate.bind({});
 Primary.args = {
-	icon: "plus",
+	icon: 'plus',
-	title: "my title",
+	title: 'my title',
-	type: "primary",
+	type: 'primary',
 };
 
 export const Outline = ManyTemplate.bind({});
 Outline.args = {
-	icon: "plus",
+	icon: 'plus',
-	title: "my title",
+	title: 'my title',
-	type: "outline",
+	type: 'outline',
 };
 
 export const Light = ManyTemplate.bind({});
 Light.args = {
-	icon: "plus",
+	icon: 'plus',
-	title: "my title",
+	title: 'my title',
-	type: "light",
+	type: 'light',
 };
 
 export const Text = ManyTemplate.bind({});
 Text.args = {
-	icon: "plus",
+	icon: 'plus',
-	title: "my title",
+	title: 'my title',
-	type: "text",
+	type: 'text',
 };

packages/design-system/src/components/N8nIconButton/IconButton.vue

@@ -14,20 +14,20 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
-import N8nButton from "../N8nButton";
+import N8nButton from '../N8nButton';
 
 const iconSizeMap = {
-	sm: "sm",
+	sm: 'sm',
-	md: "md",
+	md: 'md',
-	lg: "md",
+	lg: 'md',
-	xl: "lg",
+	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,

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;

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",
+				type: 'select',
-				options: ["sm", "md", "lg"],
+				options: ['sm', 'md', 'lg'],
 			},
 		},
 	},

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;
 			},
 		},
 	},

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;

packages/design-system/src/components/index.js

@@ -1,6 +1,6 @@
-import N8nButton from "./N8nButton";
+import N8nButton from './N8nButton';
-import N8nIcon from "./N8nIcon";
+import N8nIcon from './N8nIcon';
-import N8nIconButton from "./N8nIconButton";
+import N8nIconButton from './N8nIconButton';
-import N8nSpinner from "./N8nSpinner";
+import N8nSpinner from './N8nSpinner';
 
 export { N8nButton, N8nIcon, N8nIconButton, N8nSpinner };

packages/design-system/src/docs/Introduction.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from '@storybook/addon-docs';
-import Code from "./assets/code-brackets.svg";
+import Code from './assets/code-brackets.svg';
-import Colors from "./assets/colors.svg";
+import Colors from './assets/colors.svg';
-import Comments from "./assets/comments.svg";
+import Comments from './assets/comments.svg';
-import Direction from "./assets/direction.svg";
+import Direction from './assets/direction.svg';
-import Flow from "./assets/flow.svg";
+import Flow from './assets/flow.svg';
-import Plugin from "./assets/plugin.svg";
+import Plugin from './assets/plugin.svg';
-import Repo from "./assets/repo.svg";
+import Repo from './assets/repo.svg';
-import StackAlt from "./assets/stackalt.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>

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';

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('hsl(', '')
-		.replace(")", "")
+		.replace(')', '')
-		.replace(/%/g, "")
+		.replace(/%/g, '')
-		.split(",")
+		.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 });
 		}

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 });
 		}

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",
+				'heading1',
-				"heading2",
+				'heading2',
-				"heading3",
+				'heading3',
-				"heading4",
+				'heading4',
-				"body-large",
+				'body-large',
-				"body-medium",
+				'body-medium',
-				"body-small",
+				'body-small',
 			],
 		};
 	},

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 });
 		}

packages/design-system/src/styleguide/border.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import VariableTable from "./VariableTable.vue";
+import VariableTable from './VariableTable.vue';
 
 <Meta
 	title="Styleguide/Border"
 	parameters={{
 		design: {
-			type: "figma",
+			type: 'figma',
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
 		},
 	}}
 />

packages/design-system/src/styleguide/colors.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ColorCircles from "./ColorCircles.vue";
+import ColorCircles from './ColorCircles.vue';
 
 <Meta
 	title="Styleguide/Colors"
 	parameters={{
 		design: {
-			type: "figma",
+			type: 'figma',
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23",
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
 		},
 	}}
 />

packages/design-system/src/styleguide/fonts.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import Sizes from "./Sizes.vue";
+import Sizes from './Sizes.vue';
-import VariableTable from "./VariableTable.vue";
+import VariableTable from './VariableTable.vue';
 
 <Meta title="Styleguide/Font" />
 

packages/design-system/src/styleguide/spacing.stories.mdx

@@ -1,13 +1,13 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import Sizes from "./Sizes.vue";
+import Sizes from './Sizes.vue';
-import TextClasses from "./TextClasses.vue";
+import TextClasses from './TextClasses.vue';
 
 <Meta
 	title="Styleguide/Spacing"
 	parameters={{
 		design: {
-			type: "figma",
+			type: 'figma',
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
 		},
 	}}
 />

packages/design-system/src/styleguide/text.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import TextClasses from "./TextClasses.vue";
+import TextClasses from './TextClasses.vue';
 
 <Meta
 	title="Styleguide/Text"
 	parameters={{
 		design: {
-			type: "figma",
+			type: 'figma',
-			url: "https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898",
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
 		},
 	}}
 />

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/input.css';
-import "element-theme-n8n/dist/select.css";
+import 'element-theme-n8n/dist/select.css';
 
 // ...
 ```

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,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)
-			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 {

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_primary: '#409EFF',
-			color_success: "#67C23A",
+			color_success: '#67C23A',
-			color_warning: "#E6A23C",
+			color_warning: '#E6A23C',
-			color_danger: "#F56C6C",
+			color_danger: '#F56C6C',
-			color_info: "#909399",
+			color_info: '#909399',
-			color_white: "#FFFFFF",
+			color_white: '#FFFFFF',
-			color_black: "#000000",
+			color_black: '#000000',
-			color_text_primary: "#303133",
+			color_text_primary: '#303133',
-			color_text_regular: "#606266",
+			color_text_regular: '#606266',
-			color_text_secondary: "#909399",
+			color_text_secondary: '#909399',
-			color_text_placeholder: "#C0C4CC",
+			color_text_placeholder: '#C0C4CC',
-			border_color_base: "#DCDFE6",
+			border_color_base: '#DCDFE6',
-			border_color_light: "#E4E7ED",
+			border_color_light: '#E4E7ED',
-			border_color_lighter: "#EBEEF5",
+			border_color_lighter: '#EBEEF5',
-			border_color_extra_light: "#F2F6FC",
+			border_color_extra_light: '#F2F6FC',
-			font_size_extra_large: "20px",
+			font_size_extra_large: '20px',
-			font_size_large: "18px",
+			font_size_large: '18px',
-			font_size_medium: "16px",
+			font_size_medium: '16px',
-			font_size_base: "14px",
+			font_size_base: '14px',
-			font_size_small: "13px",
+			font_size_small: '13px',
-			font_size_extra_small: "12px",
+			font_size_extra_small: '12px',
 			font_weight_primary: 500,
 			font_weight_secondary: 100,
-			font_line_height_primary: "24px",
+			font_line_height_primary: '24px',
-			font_line_height_secondary: "16px",
+			font_line_height_secondary: '16px',
 		};
 
 		Vue.config.devtools = true;
 		new Vue({
-			el: "#app",
+			el: '#app',
 			data() {
 				return {
 					global: {},
-					colorLine: ["Primary", "Success", "Warning", "Danger", "Info"],
+					colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
-					color_primary: "",
+					color_primary: '',
-					color_success: "",
+					color_success: '',
-					color_warning: "",
+					color_warning: '',
-					color_danger: "",
+					color_danger: '',
-					color_info: "",
+					color_info: '',
-					color_white: "",
+					color_white: '',
-					color_black: "",
+					color_black: '',
-					color_text_primary: "",
+					color_text_primary: '',
-					color_text_regular: "",
+					color_text_regular: '',
-					color_text_secondary: "",
+					color_text_secondary: '',
-					color_text_placeholder: "",
+					color_text_placeholder: '',
-					border_color_base: "",
+					border_color_base: '',
-					border_color_light: "",
+					border_color_light: '',
-					border_color_lighter: "",
+					border_color_lighter: '',
-					border_color_extra_light: "",
+					border_color_extra_light: '',
-					font_size_extra_large: "",
+					font_size_extra_large: '',
-					font_size_large: "",
+					font_size_large: '',
-					font_size_medium: "",
+					font_size_medium: '',
-					font_size_base: "",
+					font_size_base: '',
-					font_size_small: "",
+					font_size_small: '',
-					font_size_extra_small: "",
+					font_size_extra_small: '',
 					font_weight_primary: 0,
 					font_weight_secondary: 0,
-					font_line_height_primary: "",
+					font_line_height_primary: '',
-					font_line_height_secondary: "",
+					font_line_height_secondary: '',
-					radio: "1",
+					radio: '1',
-					radio1: "Washington",
+					radio1: 'Washington',
-					radio2: "1",
+					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",
+							value: 'Option1',
-							label: "Option1",
+							label: 'Option1',
 						},
 						{
-							value: "Option2",
+							value: 'Option2',
-							label: "Option2",
+							label: 'Option2',
 						},
 						{
-							value: "Option3",
+							value: 'Option3',
-							label: "Option3",
+							label: 'Option3',
 						},
 						{
-							value: "Option4",
+							value: 'Option4',
-							label: "Option4",
+							label: 'Option4',
 						},
 						{
-							value: "Option5",
+							value: 'Option5',
-							label: "Option5",
+							label: 'Option5',
 						},
 					],
-					selectValue: "",
+					selectValue: '',
 					cascadeOptions: [
 						{
-							value: "guide",
+							value: 'guide',
-							label: "Guide",
+							label: 'Guide',
 							children: [
 								{
-									value: "disciplines",
+									value: 'disciplines',
-									label: "Disciplines",
+									label: 'Disciplines',
 									children: [
 										{
-											value: "consistency",
+											value: 'consistency',
-											label: "Consistency",
+											label: 'Consistency',
 										},
 										{
-											value: "feedback",
+											value: 'feedback',
-											label: "Feedback",
+											label: 'Feedback',
 										},
 									],
 								},
 							],
 						},
 						{
-							value: "resource",
+							value: 'resource',
-							label: "Resource",
+							label: 'Resource',
 							children: [
 								{
-									value: "axure",
+									value: 'axure',
-									label: "Axure Components",
+									label: 'Axure Components',
 								},
 								{
-									value: "sketch",
+									value: 'sketch',
-									label: "Sketch Templates",
+									label: 'Sketch Templates',
 								},
 								{
-									value: "docs",
+									value: 'docs',
-									label: "Design Documentation",
+									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",
+							date: '2016-05-03',
-							name: "Tom",
+							name: 'Tom',
-							address: "No. 189, Grove St, Los Angeles",
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 						{
-							date: "2016-05-02",
+							date: '2016-05-02',
-							name: "Tom",
+							name: 'Tom',
-							address: "No. 189, Grove St, Los Angeles",
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 						{
-							date: "2016-05-04",
+							date: '2016-05-04',
-							name: "Tom",
+							name: 'Tom',
-							address: "No. 189, Grove St, Los Angeles",
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 						{
-							date: "2016-05-01",
+							date: '2016-05-01',
-							name: "Tom",
+							name: 'Tom',
-							address: "No. 189, Grove St, Los Angeles",
+							address: 'No. 189, Grove St, Los Angeles',
 						},
 					],
-					menu: "1",
+					menu: '1',
-					tab: "first",
+					tab: 'first',
-					collapse: ["1"],
+					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",
+						children: 'children',
-						label: "label",
+						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 + "%",
+						s: s + '%',
-						l: l + "%",
+						l: l + '%',
 					};
 				},
 				setCssVariable(key, color) {
@@ -1513,11 +1513,11 @@
 				},
 				copyCssVariables() {
 					const cssVariables = document
-						.querySelector("html")
+						.querySelector('html')
-						.getAttribute("style");
+						.getAttribute('style');
 					this.cssVariables = cssVariables
 						? cssVariables
-						: "没有进行颜色修改，请先修改颜色！";
+						: '没有进行颜色修改，请先修改颜色！';
 					this.visible = true;
 				},
 			},

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;

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;
 		}

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;

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 {

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;
 }

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;
 		}

packages/design-system/theme/src/common/var.scss

@@ -246,8 +246,8 @@ $fill-base: $color-white !default;
 
 /* Typography
 -------------------------- */
-$font-path: "fonts" !default;
+$font-path: 'fonts' !default;
-$font-display: "auto" !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,
 	),
 );

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;
 		}
 

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;
 }

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;

packages/design-system/theme/src/date-picker/time-spinner.scss

@@ -79,7 +79,7 @@
 
 		&::after,
 		&::before {
-			content: "";
+			content: '';
 			display: block;
 			width: 100%;
 			height: 80px;

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;

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;
 			}

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*='medium'] {
-			[class*="increase"],
+			[class*='increase'],
-			[class*="decrease"] {
+			[class*='decrease'] {
 				line-height: #{(var.$input-medium-height - 2) * 0.5};
 			}
 		}
 
-		&[class*="small"] {
+		&[class*='small'] {
-			[class*="increase"],
+			[class*='increase'],
-			[class*="decrease"] {
+			[class*='decrease'] {
 				line-height: #{(var.$input-small-height - 2) * 0.5};
 			}
 		}
 
-		&[class*="mini"] {
+		&[class*='mini'] {
-			[class*="increase"],
+			[class*='increase'],
-			[class*="decrease"] {
+			[class*='decrease'] {
 				line-height: #{(var.$input-mini-height - 2) * 0.5};
 			}
 		}

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;

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;
 		}

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;

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;

packages/design-system/theme/src/mixins/config.scss

@@ -1,4 +1,4 @@
-$namespace: "el";
+$namespace: 'el';
-$element-separator: "__";
+$element-separator: '__';
-$modifier-separator: "--";
+$modifier-separator: '--';
-$state-prefix: "is-";
+$state-prefix: 'is-';

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;

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;
 	}
 }

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;
 		}

packages/design-system/theme/src/option-group.scss

@@ -17,7 +17,7 @@
 			padding-bottom: 24px;
 
 			&::after {
-				content: "";
+				content: '';
 				position: absolute;
 				display: block;
 				left: $gap;

packages/design-system/theme/src/page-header.scss

@@ -12,7 +12,7 @@
 		position: relative;
 
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			width: 1px;
 			height: 16px;

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;

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};

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 {

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%;

packages/design-system/theme/src/reset.scss

@@ -131,7 +131,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-	content: "";
+	content: '';
 	content: none;
 }
 

packages/design-system/theme/src/select-dropdown.scss

@@ -24,8 +24,8 @@
 			&::after {
 				position: absolute;
 				right: 20px;
-				font-family: "element-icons";
+				font-family: 'element-icons';
-				content: "\e6da";
+				content: '\e6da';
 				font-size: 12px;
 				font-weight: bold;
 				-webkit-font-smoothing: antialiased;

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;

packages/design-system/theme/src/switch.scss

@@ -67,7 +67,7 @@
 		vertical-align: middle;
 
 		&:after {
-			content: "";
+			content: '';
 			position: absolute;
 			top: 1px;
 			left: 1px;

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;

packages/design-system/theme/src/tabs.scss

@@ -45,7 +45,7 @@
 		position: relative;
 
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			left: 0;
 			bottom: 0;

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;

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;
 		}
 	}

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;
 			}