apply editor config prettier

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,5 +1,4 @@
-
+import { library } from "@fortawesome/fontawesome-svg-core";
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
   faAngleDoubleLeft,
   faAngleDown,
@@ -81,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,46 +1,38 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-	"stories": [
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-		"../src/**/*.stories.mdx",
+  addons: [
-		"../src/**/*.stories.@(js|jsx|ts|tsx)"
-	],
-	"addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-		'storybook-addon-designs',
+    "storybook-addon-designs",
-		'storybook-addon-themes'
+    "storybook-addon-themes",
   ],
-	webpackFinal: async (config, {
+  webpackFinal: async (config, { configType }) => {
-		configType
-	}) => {
     config.module.rules.push({
       test: /\.scss$/,
-			oneOf: [{
+      oneOf: [
+        {
           resourceQuery: /module/,
           use: [
-						'vue-style-loader',
+            "vue-style-loader",
             {
-							loader: 'css-loader',
+              loader: "css-loader",
               options: {
-								modules: true
+                modules: true,
-							}
               },
-						'sass-loader',
+            },
+            "sass-loader",
           ],
-					include: path.resolve(__dirname, '../'),
+          include: path.resolve(__dirname, "../"),
         },
         {
-					use: [
+          use: ["vue-style-loader", "css-loader", "sass-loader"],
-						'vue-style-loader',
+          include: path.resolve(__dirname, "../"),
-						'css-loader',
+        },
-						'sass-loader',
       ],
-					include: path.resolve(__dirname, '../'),
-				}
-			]
     });
 
     return config;
   },
-}
+};

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,40 +19,42 @@ export const parameters = {
     },
   },
   backgrounds: {
-		default: '--color-background-xlight',
+    default: "--color-background-xlight",
-		values: [{
+    values: [
-				name: '--color-background-dark',
+      {
-				value: 'var(--color-background-dark)',
+        name: "--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: [{
+    list: [
-				name: 'dark',
+      {
-				class: 'theme-dark',
+        name: "dark",
-				color: '#000'
+        class: "theme-dark",
-			}
+        color: "#000",
+      },
     ],
   },
   options: {
     storySort: {
-			order: ['Docs', 'Styleguide', 'Atoms']
+      order: ["Docs", "Styleguide", "Atoms"],
-		}
+    },
-	}
+  },
-}
+};

packages/design-system/.storybook/storybook.scss

@@ -5,4 +5,4 @@
 );
 
 @use "~/theme/src/reset.scss";
-@use "~/theme/src/index.scss"
+@use "~/theme/src/index.scss";

packages/design-system/README.md

@@ -5,36 +5,43 @@ A component system for [n8n](https://n8n.io) using Storybook to preview.
 You can [preview project here](https://n8n-io.github.io/n8n-design-system/index.html).
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run storybook
 ```
 
 ### Build static pages
+
 ```
 npm run build:storybook
 ```
 
 ### Run your unit tests
+
 ```
 npm run test:unit
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Build css files
+
 ```
 npm run build:theme
 ```
 
 ### Monitor theme files and build any changes
+
 ```
 npm run watch:theme
 ```

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

@@ -120,4 +120,3 @@ Text.args = {
   label: "Button",
   icon: "plus-circle",
 };
-

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

@@ -109,15 +109,17 @@ export default {
       ...(props.fullWidth ? { width: "100%" } : {}),
     };
   },
-  getClass(props: {type: string, theme?: string}) {
+  getClass(props: { type: string; theme?: string }) {
-	return props.type === 'text' ? 'text' : `${props.type}-${props.theme || 'primary'}`;
+    return props.type === "text"
+      ? "text"
+      : `${props.type}-${props.theme || "primary"}`;
   },
 };
 </script>
 
 <style lang="scss" module>
 @function lightness($h, $s, $l, $lightness) {
-  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}))
+  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
 }
 
 .button {

packages/design-system/src/components/N8nButton/index.d.ts

@@ -1,7 +1,7 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Button type */
-export type ButtonType = "primary" | "outline" | "light";
+export type ButtonType = 'primary' | 'outline' | 'light';
 
 /** Button Component */
 export declare class N8nButton extends N8nComponent {

packages/design-system/src/components/N8nIcon/Icon.vue

@@ -43,9 +43,9 @@ export default {
 }
 
 ._md {
-  font-size: .95em;
+  font-size: 0.95em;
-  height: .95em;
+  height: 0.95em;
-  width: .95em !important;
+  width: 0.95em !important;
 }
 
 ._lg {

packages/design-system/src/components/N8nIcon/index.d.ts

@@ -1,4 +1,4 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Button Component */
 export declare class N8nIcon extends N8nComponent {

packages/design-system/src/components/N8nIconButton/index.d.ts

@@ -1,4 +1,4 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Icon Button Component */
 export declare class N8nIconButton extends N8nComponent {
@@ -6,7 +6,7 @@ export declare class N8nIconButton extends N8nComponent {
   title: string;
 
   /** Button size */
-  size: N8nComponentSize | "xl";
+  size: N8nComponentSize | 'xl';
 
   /** icon size */
   iconSize: N8nComponentSize;

packages/design-system/src/components/N8nSpinner/index.d.ts

@@ -1,4 +1,4 @@
-import { N8nComponent, N8nComponentSize } from "../component";
+import { N8nComponent, N8nComponentSize } from '../component';
 
 /** Spinner Component */
 export declare class N8nSpinner extends N8nComponent {

packages/design-system/src/components/component.d.ts

@@ -1,4 +1,4 @@
-import Vue from "vue";
+import Vue from 'vue';
 
 /** N8n component common definition */
 export declare class N8nComponent extends Vue {
@@ -7,4 +7,4 @@ export declare class N8nComponent extends Vue {
 }
 
 /** Component size definition for button, input, etc */
-export type N8nComponentSize = "lg" | "md" | "sm";
+export type N8nComponentSize = 'lg' | 'md' | 'sm';

packages/design-system/src/components/index.d.ts

@@ -1 +1 @@
-declare module "./N8nButton";
+declare module './N8nButton';

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" />
 
@@ -182,14 +182,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -206,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.d.ts

@@ -1 +1 @@
-declare module "n8n-design-system";
+declare module 'n8n-design-system';

packages/design-system/src/shims-element-ui.d.ts

@@ -1 +1 @@
-declare module "element-ui/packages/button";
+declare module 'element-ui/packages/button';

packages/design-system/src/shims-tsx.d.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from "vue";
+import Vue, { VNode } from 'vue';
 
 declare global {
   namespace JSX {

packages/design-system/src/shims-vue.d.ts

@@ -1,4 +1,4 @@
-declare module "*.vue" {
+declare module '*.vue' {
-  import Vue from "vue";
+  import Vue from 'vue';
   export default Vue;
 }

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

@@ -1,13 +1,13 @@
-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",
-		}
+    },
   }}
 />
 
@@ -19,7 +19,7 @@ import VariableTable from './VariableTable.vue'
       template: `<variable-table :variables="['--border-radius-small','--border-radius-base']" />`,
       components: {
         VariableTable,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -32,7 +32,7 @@ import VariableTable from './VariableTable.vue'
       template: `<variable-table :variables="['--border-width-base']" />`,
       components: {
         VariableTable,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -43,8 +43,7 @@ import VariableTable from './VariableTable.vue'
       template: `<variable-table :variables="['--border-style-base']" />`,
       components: {
         VariableTable,
-		}
+      },
     }}
   </Story>
 </Canvas>
-

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

@@ -1,13 +1,13 @@
-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",
-		}
+    },
   }}
 />
 
@@ -21,7 +21,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -34,7 +34,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-secondary']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -47,12 +47,11 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
 
-
 ## Warning
 
 <Canvas>
@@ -61,7 +60,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -74,7 +73,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -87,7 +86,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -100,7 +99,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -113,7 +112,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -126,7 +125,7 @@ import ColorCircles from './ColorCircles.vue';
       template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
       components: {
         ColorCircles,
-		}
+      },
     }}
   </Story>
 </Canvas>

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

@@ -1,10 +1,8 @@
-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 
+<Meta title="Styleguide/Font" />
-	title="Styleguide/Font" 
-/>
 
 # Font
 
@@ -16,7 +14,7 @@ import VariableTable from './VariableTable.vue'
       template: `<sizes :variables="['--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
       components: {
         Sizes,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -29,7 +27,7 @@ import VariableTable from './VariableTable.vue'
       template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
       components: {
         VariableTable,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -42,7 +40,7 @@ import VariableTable from './VariableTable.vue'
       template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
       components: {
         VariableTable,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -55,8 +53,7 @@ import VariableTable from './VariableTable.vue'
       template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
       components: {
         VariableTable,
-		}
+      },
     }}
   </Story>
 </Canvas>
-

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

@@ -1,14 +1,14 @@
-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",
-		}
+    },
   }}
 />
 
@@ -20,7 +20,7 @@ import TextClasses from './TextClasses.vue';
       template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
       components: {
         Sizes,
-		}
+      },
     }}
   </Story>
 </Canvas>

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

@@ -1,13 +1,13 @@
-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",
-		}
+    },
   }}
 />
 
@@ -19,7 +19,7 @@ import TextClasses from './TextClasses.vue';
       template: `<text-classes />`,
       components: {
         TextClasses,
-		}
+      },
     }}
   </Story>
 </Canvas>
@@ -32,7 +32,7 @@ import TextClasses from './TextClasses.vue';
       template: `<text-classes postfix="-bold" />`,
       components: {
         TextClasses,
-		}
+      },
     }}
   </Story>
 </Canvas>

packages/design-system/theme/README.md

@@ -1,4 +1,5 @@
 # element-theme-n8n
+
 > element component chalk theme by css variable.
 
 [Online preview](https://n8n-io.github.io/element-theme-n8n/)
@@ -9,6 +10,7 @@ CSS Variable
 https://caniuse.com/css-variables
 
 ## Installation
+
 ```shell
 npm i element-theme-n8n -S
 ```
@@ -16,24 +18,31 @@ npm i element-theme-n8n -S
 ## Usage
 
 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
+
 ```html
-<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/css-variable/lib/index.css">
+<link
+  rel="stylesheet"
+  href="path/to/node_modules/element-theme-chalk/css-variable/lib/index.css"
+/>
 ```
 
 ## 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/src/_tokens.dark.scss

@@ -7,133 +7,259 @@
   --color-primary-h: 7;
   --color-primary-s: 100%;
   --color-primary-l: 68%;
-  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
+  --color-primary: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-l)
+  );
 
   --color-primary-tint-1-l: 18%;
-  --color-primary-tint-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-1-l));
+  --color-primary-tint-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-1-l)
+  );
 
   --color-primary-tint-2-l: 9%;
-  --color-primary-tint-2: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-2-l));
+  --color-primary-tint-2: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-2-l)
+  );
 
   --color-primary-tint-3-l: 3%;
-  --color-primary-tint-3: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-3-l));
+  --color-primary-tint-3: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-3-l)
+  );
 
   --color-primary-shade-1-l: 89%;
-  --color-primary-shade-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-shade-1-l));
+  --color-primary-shade-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-shade-1-l)
+  );
 
   --color-secondary-h: 247;
   --color-secondary-s: 100%;
   --color-secondary-l: 35%;
-  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
+  --color-secondary: hsl(
+    var(--color-secondary-h),
+    var(--color-secondary-s),
+    var(--color-secondary-l)
+  );
 
   --color-success-h: 150;
   --color-success-s: 74%;
   --color-success-l: 60%;
-  --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+  --color-success: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-l)
+  );
 
   --color-success-tint-1-l: 12%;
-  --color-success-tint-1: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-1-l));
+  --color-success-tint-1: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-1-l)
+  );
 
   --color-success-tint-2-l: 3%;
-  --color-success-tint-2: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-2-l));
+  --color-success-tint-2: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-2-l)
+  );
 
   --color-warning-h: 36;
   --color-warning-s: 77%;
   --color-warning-l: 43%;
-  --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
+  --color-warning: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-l)
+  );
 
   --color-warning-tint-1-l: 12%;
-  --color-warning-tint-1: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-1-l));
+  --color-warning-tint-1: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-1-l)
+  );
 
   --color-warning-tint-2-l: 4%;
-  --color-warning-tint-2: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-2-l));
+  --color-warning-tint-2: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-2-l)
+  );
 
   --color-danger-h: 0;
   --color-danger-s: 88%;
   --color-danger-l: 35%;
-  --color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  --color-danger: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-l)
+  );
 
   --color-danger-tint-1-l: 8%;
-  --color-danger-tint-1: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-1-l));
+  --color-danger-tint-1: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-1-l)
+  );
 
   --color-danger-tint-2-l: 3%;
-  --color-danger-tint-2: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-2-l));
+  --color-danger-tint-2: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-2-l)
+  );
 
   --color-info-h: 220;
   --color-info-s: 4%;
   --color-info-l: 42%;
-  --color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  --color-info: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-l)
+  );
 
   --color-info-tint-1-l: 12%;
-  --color-info-tint-1: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-1-l));
+  --color-info-tint-1: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-1-l)
+  );
 
   --color-info-tint-2-l: 4%;
-  --color-info-tint-2: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-2-l));
+  --color-info-tint-2: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-2-l)
+  );
 
   --color-text-dark-h: 0;
   --color-text-dark-s: 0%;
   --color-text-dark-l: 100%;
-  --color-text-dark: hsl(var(--color-text-dark-h), var(--color-text-dark-s), var(--color-text-dark-l));
+  --color-text-dark: hsl(
+    var(--color-text-dark-h),
+    var(--color-text-dark-s),
+    var(--color-text-dark-l)
+  );
 
   --color-text-base-h: 240;
   --color-text-base-s: 4%;
   --color-text-base-l: 49%;
-  --color-text-base: hsl(var(--color-text-base-h), var(--color-text-base-s), var(--color-text-base-l));
+  --color-text-base: hsl(
+    var(--color-text-base-h),
+    var(--color-text-base-s),
+    var(--color-text-base-l)
+  );
 
   --color-text-light-h: 220;
   --color-text-light-s: 4%;
   --color-text-light-l: 42%;
-  --color-text-light: hsl(var(--color-text-light-h), var(--color-text-light-s), var(--color-text-light-l));
+  --color-text-light: hsl(
+    var(--color-text-light-h),
+    var(--color-text-light-s),
+    var(--color-text-light-l)
+  );
 
   --color-text-lighter-h: 222;
   --color-text-lighter-s: 17%;
   --color-text-lighter-l: 12%;
-  --color-text-lighter: hsl(var(--color-text-lighter-h), var(--color-text-lighter-s), var(--color-text-lighter-l));
+  --color-text-lighter: hsl(
+    var(--color-text-lighter-h),
+    var(--color-text-lighter-s),
+    var(--color-text-lighter-l)
+  );
 
   --color-text-xlight-h: 0;
   --color-text-xlight-s: 0%;
   --color-text-xlight-l: 100%;
-  --color-text-xlight: hsl(var(--color-text-xlight-h), var(--color-text-xlight-s), var(--color-text-xlight-l));
+  --color-text-xlight: hsl(
+    var(--color-text-xlight-h),
+    var(--color-text-xlight-s),
+    var(--color-text-xlight-l)
+  );
 
   --color-foreground-base-h: 220;
   --color-foreground-base-s: 20%;
   --color-foreground-base-l: 12%;
-  --color-foreground-base: hsl(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l));
+  --color-foreground-base: hsl(
+    var(--color-foreground-base-h),
+    var(--color-foreground-base-s),
+    var(--color-foreground-base-l)
+  );
 
   --color-foreground-light-h: 0;
   --color-foreground-light-s: 0%;
   --color-foreground-light-l: 7%;
-  --color-foreground-light: hsl(var(--color-foreground-light-h), var(--color-foreground-light-s), var(--color-foreground-light-l));
+  --color-foreground-light: hsl(
+    var(--color-foreground-light-h),
+    var(--color-foreground-light-s),
+    var(--color-foreground-light-l)
+  );
 
   --color-foreground-xlight-h: 0;
   --color-foreground-xlight-s: 0%;
   --color-foreground-xlight-l: 0%;
-  --color-foreground-xlight: hsl(var(--color-foreground-xlight-h), var(--color-foreground-xlight-s), var(--color-foreground-xlight-l));
+  --color-foreground-xlight: hsl(
+    var(--color-foreground-xlight-h),
+    var(--color-foreground-xlight-s),
+    var(--color-foreground-xlight-l)
+  );
 
   --color-background-dark-h: 0;
   --color-background-dark-s: 0%;
   --color-background-dark-l: 100%;
-  --color-background-dark: hsl(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l));
+  --color-background-dark: hsl(
+    var(--color-background-dark-h),
+    var(--color-background-dark-s),
+    var(--color-background-dark-l)
+  );
 
   --color-background-base-h: 252;
   --color-background-base-s: 71%;
   --color-background-base-l: 99%;
-  --color-background-base: hsl(var(--color-background-base-h), var(--color-background-base-s), var(--color-background-base-l));
+  --color-background-base: hsl(
+    var(--color-background-base-h),
+    var(--color-background-base-s),
+    var(--color-background-base-l)
+  );
 
   --color-background-light-h: 220;
   --color-background-light-s: 27%;
   --color-background-light-l: 98%;
-  --color-background-light: hsl(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l));
+  --color-background-light: hsl(
+    var(--color-background-light-h),
+    var(--color-background-light-s),
+    var(--color-background-light-l)
+  );
 
   --color-background-lighter-h: 220;
   --color-background-lighter-s: 30%;
   --color-background-lighter-l: 96%;
-  --color-background-lighter: hsl(var(--color-background-lighter-h), var(--color-background-lighter-s), var(--color-background-lighter-l));
+  --color-background-lighter: hsl(
+    var(--color-background-lighter-h),
+    var(--color-background-lighter-s),
+    var(--color-background-lighter-l)
+  );
 
   --color-background-xlight-h: 240;
   --color-background-xlight-s: 4%;
   --color-background-xlight-l: 19%;
-  --color-background-xlight: hsl(var(--color-background-xlight-h), var(--color-background-xlight-s), var(--color-background-xlight-l));
+  --color-background-xlight: hsl(
+    var(--color-background-xlight-h),
+    var(--color-background-xlight-s),
+    var(--color-background-xlight-l)
+  );
 }
 
-body.theme-dark { @include theme }
+body.theme-dark {
+  @include theme;
+}

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

@@ -7,139 +7,264 @@
   --color-primary-h: 6.9;
   --color-primary-s: 100%;
   --color-primary-l: 67.6%;
-  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
+  --color-primary: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-l)
+  );
 
   --color-primary-tint-1-l: 88%;
-  --color-primary-tint-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-1-l));
+  --color-primary-tint-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-1-l)
+  );
 
   --color-primary-tint-2-l: 94.5%;
-  --color-primary-tint-2: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-2-l));
+  --color-primary-tint-2: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-2-l)
+  );
 
   --color-primary-tint-3-l: 96.9%;
-  --color-primary-tint-3: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-tint-3-l));
+  --color-primary-tint-3: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-tint-3-l)
+  );
 
   --color-primary-shade-1-l: 23%;
-  --color-primary-shade-1: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-shade-1-l));
+  --color-primary-shade-1: hsl(
+    var(--color-primary-h),
+    var(--color-primary-s),
+    var(--color-primary-shade-1-l)
+  );
 
   --color-secondary-h: 247.4;
   --color-secondary-s: 100%;
   --color-secondary-l: 65.1%;
-  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
+  --color-secondary: hsl(
+    var(--color-secondary-h),
+    var(--color-secondary-s),
+    var(--color-secondary-l)
+  );
 
   --color-success-h: 150.4;
   --color-success-s: 73.8%;
   --color-success-l: 40.4%;
-  --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+  --color-success: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-l)
+  );
 
   --color-success-tint-1-l: 90%;
-  --color-success-tint-1: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-1-l));
+  --color-success-tint-1: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-1-l)
+  );
 
   --color-success-tint-2-l: 94.9%;
-  --color-success-tint-2: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-tint-2-l));
+  --color-success-tint-2: hsl(
+    var(--color-success-h),
+    var(--color-success-s),
+    var(--color-success-tint-2-l)
+  );
 
   --color-warning-h: 36;
   --color-warning-s: 77%;
   --color-warning-l: 57%;
-  --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
+  --color-warning: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-l)
+  );
 
   --color-warning-tint-1-l: 88%;
-  --color-warning-tint-1: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-1-l));
+  --color-warning-tint-1: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-1-l)
+  );
 
   --color-warning-tint-2-l: 96%;
-  --color-warning-tint-2: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-tint-2-l));
+  --color-warning-tint-2: hsl(
+    var(--color-warning-h),
+    var(--color-warning-s),
+    var(--color-warning-tint-2-l)
+  );
 
   --color-danger-h: 0;
   --color-danger-s: 87.6%;
   --color-danger-l: 65.3%;
-  --color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  --color-danger: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-l)
+  );
 
   --color-danger-tint-1-l: 93.9%;
-  --color-danger-tint-1: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-1-l));
+  --color-danger-tint-1: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-1-l)
+  );
   --color-danger-tint-2-l: 96.9%;
-  --color-danger-tint-2: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-tint-2-l));
+  --color-danger-tint-2: hsl(
+    var(--color-danger-h),
+    var(--color-danger-s),
+    var(--color-danger-tint-2-l)
+  );
 
   --color-info-h: 220;
   --color-info-s: 4%;
   --color-info-l: 58%;
-  --color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  --color-info: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-l)
+  );
 
   --color-info-tint-1-l: 88%;
-  --color-info-tint-1: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-1-l));
+  --color-info-tint-1: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-1-l)
+  );
   --color-info-tint-2-l: 96%;
-  --color-info-tint-2: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-2-l));
+  --color-info-tint-2: hsl(
+    var(--color-info-h),
+    var(--color-info-s),
+    var(--color-info-tint-2-l)
+  );
 
   --color-text-dark-h: 0;
   --color-text-dark-s: 0%;
   --color-text-dark-l: 33.3%;
-  --color-text-dark: hsl(var(--color-text-dark-h), var(--color-text-dark-s), var(--color-text-dark-l));
+  --color-text-dark: hsl(
+    var(--color-text-dark-h),
+    var(--color-text-dark-s),
+    var(--color-text-dark-l)
+  );
 
   --color-text-base-h: 240;
   --color-text-base-s: 4%;
   --color-text-base-l: 51%;
-  --color-text-base: hsl(var(--color-text-base-h), var(--color-text-base-s), var(--color-text-base-l));
+  --color-text-base: hsl(
+    var(--color-text-base-h),
+    var(--color-text-base-s),
+    var(--color-text-base-l)
+  );
 
   --color-text-light-h: 220;
   --color-text-light-s: 4.2%;
   --color-text-light-l: 58.2%;
-  --color-text-light: hsl(var(--color-text-light-h), var(--color-text-light-s), var(--color-text-light-l));
+  --color-text-light: hsl(
+    var(--color-text-light-h),
+    var(--color-text-light-s),
+    var(--color-text-light-l)
+  );
 
   // todo placeholder color - hsl(222,16.7%,88.2%) - change after roll out inputs
   --color-text-lighter-h: 220;
   --color-text-lighter-s: 10.5%;
   --color-text-lighter-l: 77.6%;
-  --color-text-lighter: hsl(var(--color-text-lighter-h), var(--color-text-lighter-s), var(--color-text-lighter-l));
+  --color-text-lighter: hsl(
+    var(--color-text-lighter-h),
+    var(--color-text-lighter-s),
+    var(--color-text-lighter-l)
+  );
 
   --color-text-xlight-h: 0;
   --color-text-xlight-s: 0%;
   --color-text-xlight-l: 100%;
-  --color-text-xlight: hsl(var(--color-text-xlight-h), var(--color-text-xlight-s), var(--color-text-xlight-l));
+  --color-text-xlight: hsl(
+    var(--color-text-xlight-h),
+    var(--color-text-xlight-s),
+    var(--color-text-xlight-l)
+  );
 
   --color-foreground-base-h: 220;
   --color-foreground-base-s: 20%;
   --color-foreground-base-l: 88.2%;
-  --color-foreground-base: hsl(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l));
+  --color-foreground-base: hsl(
+    var(--color-foreground-base-h),
+    var(--color-foreground-base-s),
+    var(--color-foreground-base-l)
+  );
 
   --color-foreground-light-h: 0;
   --color-foreground-light-s: 0%;
   --color-foreground-light-l: 93.3%;
-  --color-foreground-light: hsl(var(--color-foreground-light-h), var(--color-foreground-light-s), var(--color-foreground-light-l));
+  --color-foreground-light: hsl(
+    var(--color-foreground-light-h),
+    var(--color-foreground-light-s),
+    var(--color-foreground-light-l)
+  );
 
   --color-foreground-xlight-h: 0;
   --color-foreground-xlight-s: 0%;
   --color-foreground-xlight-l: 100%;
-  --color-foreground-xlight: hsl(var(--color-foreground-xlight-h), var(--color-foreground-xlight-s), var(--color-foreground-xlight-l));
+  --color-foreground-xlight: hsl(
+    var(--color-foreground-xlight-h),
+    var(--color-foreground-xlight-s),
+    var(--color-foreground-xlight-l)
+  );
 
   --color-background-dark-h: 240;
   --color-background-dark-s: 4.2%;
   --color-background-dark-l: 18.8%;
-  --color-background-dark: hsl(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l));
+  --color-background-dark: hsl(
+    var(--color-background-dark-h),
+    var(--color-background-dark-s),
+    var(--color-background-dark-l)
+  );
 
   --color-background-base-h: 220;
   --color-background-base-s: 30%;
   --color-background-base-l: 96.1%;
-  --color-background-base: hsl(var(--color-background-base-h), var(--color-background-base-s), var(--color-background-base-l));
+  --color-background-base: hsl(
+    var(--color-background-base-h),
+    var(--color-background-base-s),
+    var(--color-background-base-l)
+  );
 
   --color-background-light-h: 220;
   --color-background-light-s: 27.3%;
   --color-background-light-l: 97.8%;
-  --color-background-light: hsl(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l));
+  --color-background-light: hsl(
+    var(--color-background-light-h),
+    var(--color-background-light-s),
+    var(--color-background-light-l)
+  );
 
   --color-background-lighter-h: 252;
   --color-background-lighter-s: 71.4%;
   --color-background-lighter-l: 98.6%;
-  --color-background-lighter: hsl(var(--color-background-lighter-h), var(--color-background-lighter-s), var(--color-background-lighter-l));
+  --color-background-lighter: hsl(
+    var(--color-background-lighter-h),
+    var(--color-background-lighter-s),
+    var(--color-background-lighter-l)
+  );
 
   --color-background-xlight-h: 0;
   --color-background-xlight-s: 0%;
   --color-background-xlight-l: 100%;
-  --color-background-xlight: hsl(var(--color-background-xlight-h), var(--color-background-xlight-s), var(--color-background-xlight-l));
+  --color-background-xlight: hsl(
+    var(--color-background-xlight-h),
+    var(--color-background-xlight-s),
+    var(--color-background-xlight-l)
+  );
 
   --border-radius-base: 4px;
   --border-radius-small: 2px;
 
   --border-style-base: solid;
   --border-width-base: 1px;
-  --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+  --border-base: var(--border-width-base) var(--border-style-base)
+    var(--color-foreground-base);
 
   --font-size-2xs: 0.75rem;
   --font-size-xs: 0.8125rem;
@@ -157,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;
@@ -177,4 +302,6 @@
   --button-shade-active: 10%;
 }
 
-:root { @include theme }
+:root {
+  @include theme;
+}

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

@@ -13,7 +13,7 @@
   opacity: 1;
   display: flex;
   align-items: center;
-  transition: opacity .2s;
+  transition: opacity 0.2s;
 
   @include mixins.when(light) {
     .el-alert__closebtn {

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

@@ -12,11 +12,11 @@
   align-items: center;
   justify-content: center;
   font-size: 20px;
-  box-shadow: 0 0 6px rgba(0,0,0, .12);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
   cursor: pointer;
   z-index: 5;
 
   &:hover {
-    background-color: var.$backtop-hover-background-color
+    background-color: var.$backtop-hover-background-color;
   }
 }

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;
     }
@@ -24,7 +24,8 @@
     @include mixins.e(inner) {
       color: var.$color-text-primary;
 
-      &.is-link, & a {
+      &.is-link,
+      & a {
         font-weight: bold;
         text-decoration: none;
         transition: var.$color-transition-base;
@@ -40,7 +41,8 @@
     &:last-child {
       .el-breadcrumb__inner,
       .el-breadcrumb__inner a {
-        &, &:hover {
+        &,
+        &:hover {
           font-weight: normal;
           color: var.$color-text-primary;
           cursor: text;

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

@@ -82,4 +82,3 @@
     }
   }
 }
-      

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

@@ -27,10 +27,16 @@ $background-color: var(--button-background-color, var(--color-primary));
 
 $active-color: var(--button-active-color, var(--color-text-xlight));
 $active-border-color: var(--button-active-border-color, $color-primary-shade);
-$active-background-color: var(--button-active-background-color, $color-primary-shade);
+$active-background-color: var(
+  --button-active-background-color,
+  $color-primary-shade
+);
 
 $disabled-color: var(--color-text-light);
-$disabled-background-color: var(--button-disabled-background-color, var(--color-foreground-base));
+$disabled-background-color: var(
+  --button-disabled-background-color,
+  var(--color-foreground-base)
+);
 $disabled-border-color: var(--color-foreground-base);
 
 $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
@@ -75,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/carousel-item.scss

@@ -17,12 +17,12 @@
     }
 
     @include mixins.when(animating) {
-      transition: transform .4s ease-in-out;
+      transition: transform 0.4s ease-in-out;
     }
 
     @include mixins.m(card) {
       width: 50%;
-      transition: transform .4s ease-in-out;
+      transition: transform 0.4s ease-in-out;
       &.is-in-stage {
         cursor: pointer;
         z-index: var.$index-normal;
@@ -45,6 +45,6 @@
     left: 0;
     background-color: var.$color-white;
     opacity: 0.24;
-    transition: .2s;
+    transition: 0.2s;
   }
 }

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

@@ -25,7 +25,7 @@
     height: var.$carousel-arrow-size;
     width: var.$carousel-arrow-size;
     cursor: pointer;
-    transition: .3s;
+    transition: 0.3s;
     border-radius: 50%;
     background-color: var.$carousel-arrow-background;
     color: var.$color-white;
@@ -73,7 +73,8 @@
     }
 
     @include mixins.m(outside) {
-      bottom: #{var.$carousel-indicator-height + var.$carousel-indicator-padding-vertical * 2};
+      bottom: #{var.$carousel-indicator-height +
+        var.$carousel-indicator-padding-vertical * 2};
       text-align: center;
       position: static;
       transform: none;
@@ -115,11 +116,13 @@
 
     @include mixins.m(horizontal) {
       display: inline-block;
-      padding: var.$carousel-indicator-padding-vertical var.$carousel-indicator-padding-horizontal;
+      padding: var.$carousel-indicator-padding-vertical
+        var.$carousel-indicator-padding-horizontal;
     }
 
     @include mixins.m(vertical) {
-      padding: var.$carousel-indicator-padding-horizontal var.$carousel-indicator-padding-vertical;
+      padding: var.$carousel-indicator-padding-horizontal
+        var.$carousel-indicator-padding-vertical;
       .el-carousel__button {
         width: var.$carousel-indicator-height;
         height: #{var.$carousel-indicator-width * 0.5};
@@ -144,7 +147,7 @@
     padding: 0;
     margin: 0;
     cursor: pointer;
-    transition: .3s;
+    transition: 0.3s;
   }
 }
 

packages/design-system/theme/src/cascader-panel.scss

@@ -82,7 +82,8 @@
 
   &:not(.is-disabled) {
     cursor: pointer;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: var.$cascader-node-background-hover;
     }
   }

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

@@ -30,7 +30,7 @@
     }
 
     .el-icon-arrow-down {
-      transition: transform .3s;
+      transition: transform 0.3s;
       font-size: 14px;
 
       @include mixins.when(reverse) {
@@ -145,7 +145,8 @@
     outline: none;
     cursor: pointer;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: var.$cascader-node-background-hover;
     }
 

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

@@ -161,7 +161,8 @@
         color: var.$checkbox-checked-font-color;
       }
     }
-    @include mixins.when(focus) { /*focus时 视觉上区分*/
+    @include mixins.when(focus) {
+      /*focus时 视觉上区分*/
       .el-checkbox__inner {
         border-color: var.$checkbox-input-border-color-hover;
       }
@@ -172,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;
@@ -199,8 +200,8 @@
     height: var.$checkbox-input-height;
     background-color: var.$checkbox-background-color;
     z-index: var.$index-normal;
-    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
+    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
-    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
 
     &:hover {
       border-color: var.$checkbox-input-border-color-hover;
@@ -218,7 +219,7 @@
       top: 1px;
       transform: rotate(45deg) scaleY(0);
       width: 3px;
-      transition: transform .15s ease-in .05s;
+      transition: transform 0.15s ease-in 0.05s;
       transform-origin: center;
     }
   }
@@ -270,7 +271,11 @@
     border-radius: 0;
     @include utils.utils-user-select(none);
 
-    @include button.button-size(var.$button-padding-vertical, var.$button-padding-horizontal, var.$button-font-size,);
+    @include button.button-size(
+      var.$button-padding-vertical,
+      var.$button-padding-horizontal,
+      var.$button-font-size
+    );
 
     &:hover {
       color: var(--color-primary);
@@ -341,19 +346,31 @@
   @include mixins.m(medium) {
     .el-checkbox-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-medium-padding-vertical, var.$button-medium-padding-horizontal, var.$button-medium-font-size,);
+      @include button.button-size(
+        var.$button-medium-padding-vertical,
+        var.$button-medium-padding-horizontal,
+        var.$button-medium-font-size
+      );
     }
   }
   @include mixins.m(small) {
     .el-checkbox-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-small-padding-vertical, var.$button-small-padding-horizontal, var.$button-small-font-size,);
+      @include button.button-size(
+        var.$button-small-padding-vertical,
+        var.$button-small-padding-horizontal,
+        var.$button-small-font-size
+      );
     }
   }
   @include mixins.m(mini) {
     .el-checkbox-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-mini-padding-vertical, var.$button-mini-padding-horizontal, var.$button-mini-font-size,);
+      @include button.button-size(
+        var.$button-mini-padding-vertical,
+        var.$button-mini-padding-horizontal,
+        var.$button-mini-font-size
+      );
     }
   }
 }

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

@@ -24,11 +24,11 @@
     border-bottom: 1px solid var.$collapse-border-color;
     font-size: var.$collapse-header-font-size;
     font-weight: 500;
-    transition: border-bottom-color .3s;
+    transition: border-bottom-color 0.3s;
     outline: none;
     @include mixins.e(arrow) {
       margin: 0 8px 0 auto;
-      transition: transform .3s;
+      transition: transform 0.3s;
       font-weight: 300;
       @include mixins.when(active) {
         transform: rotate(90deg);

packages/design-system/theme/src/color-picker.scss

@@ -52,10 +52,15 @@
   @include mixins.e(bar) {
     position: relative;
     background: linear-gradient(
-      to right, #f00 0%,
+      to right,
-      #ff0 17%, #0f0 33%,
+      #f00 0%,
-      #0ff 50%, #00f 67%,
+      #ff0 17%,
-      #f0f 83%, #f00 100%);
+      #0f0 33%,
+      #0ff 50%,
+      #00f 67%,
+      #f0f 83%,
+      #f00 100%
+    );
     height: 100%;
   }
 
@@ -81,10 +86,15 @@
 
     .el-color-hue-slider__bar {
       background: linear-gradient(
-        to bottom, #f00 0%,
+        to bottom,
-        #ff0 17%, #0f0 33%,
+        #f00 0%,
-        #0ff 50%, #00f 67%,
+        #ff0 17%,
-        #f0f 83%, #f00 100%);
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00 100%
+      );
     }
 
     .el-color-hue-slider__thumb {
@@ -101,7 +111,7 @@
   width: 280px;
   height: 180px;
 
-  @include mixins.e(('white', 'black')) {
+  @include mixins.e(("white", "black")) {
     position: absolute;
     top: 0;
     left: 0;
@@ -109,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));
   }
 
@@ -124,7 +134,8 @@
       cursor: head;
       width: 4px;
       height: 4px;
-      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
+      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+        0 0 1px 2px rgba(0, 0, 0, 0.4);
       border-radius: 50%;
       transform: translate(-2px, -2px);
     }
@@ -141,8 +152,10 @@
   @include mixins.e(bar) {
     position: relative;
     background: linear-gradient(
-      to right, rgba(255, 255, 255, 0) 0%,
+      to right,
-      rgba(255, 255, 255, 1) 100%);
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 100%
+    );
     height: 100%;
   }
 
@@ -167,8 +180,10 @@
 
     .el-color-alpha-slider__bar {
       background: linear-gradient(
-        to bottom, rgba(255, 255, 255, 0) 0%,
+        to bottom,
-        rgba(255, 255, 255, 1) 100%);
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
     }
 
     .el-color-alpha-slider__thumb {
@@ -292,7 +307,7 @@
     left: 1px;
     z-index: 1;
     cursor: not-allowed;
-    background-color: rgba(255, 255, 255, .7);
+    background-color: rgba(255, 255, 255, 0.7);
   }
 
   @include mixins.e(trigger) {

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

@@ -2,11 +2,11 @@
 @use "../mixins/mixins";
 
 .v-modal-enter {
-  animation: v-modal-in .2s ease;
+  animation: v-modal-in 0.2s ease;
 }
 
 .v-modal-leave {
-  animation: v-modal-out .2s ease forwards;
+  animation: v-modal-out 0.2s ease forwards;
 }
 
 @keyframes v-modal-in {

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

@@ -22,7 +22,7 @@
 
 .el-fade-in-enter-active,
 .el-fade-in-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .el-fade-in-enter,
 .el-fade-in-leave-active {
@@ -31,7 +31,7 @@
 
 .el-zoom-in-center-enter-active,
 .el-zoom-in-center-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .el-zoom-in-center-enter,
 .el-zoom-in-center-leave-active {
@@ -75,25 +75,28 @@
 .el-zoom-in-left-enter,
 .el-zoom-in-left-leave-active {
   opacity: 0;
-  transform: scale(.45, .45);
+  transform: scale(0.45, 0.45);
 }
 
 .collapse-transition {
-  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
+    0.3s padding-bottom ease-in-out;
 }
 .horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
+  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
+    0.3s padding-right ease-in-out;
 }
 
 .el-list-enter-active,
 .el-list-leave-active {
   transition: all 1s;
 }
-.el-list-enter, .el-list-leave-active {
+.el-list-enter,
+.el-list-leave-active {
   opacity: 0;
   transform: translateY(-30px);
 }
 
 .el-opacity-transition {
-  transition: opacity .3s cubic-bezier(.55,0,.1,1);
+  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }

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

@@ -64,4 +64,3 @@
 .body-small-bold {
   @extend %bold, .body-small;
 }
-

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

@@ -7,52 +7,198 @@
 
 /* Transition
 -------------------------- */
-$all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $fade-linear-transition: opacity 200ms linear !default;
-$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
-$border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+$border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 
 /* Color
 -------------------------- */
-$color-white: #FFFFFF !default;
+$color-white: #ffffff !default;
 $color-black: #000000 !default;
 
-$color-primary-light-1: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 4%) !default;
+$color-primary-light-1: function.lightness(
-$color-primary-light-2: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 8%) !default;
+  --color-primary-h,
-$color-primary-light-3: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 12%) !default;
+  --color-primary-s,
-$color-primary-light-4: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 16%) !default;
+  --color-primary-l,
-$color-primary-light-5: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 20%) !default;
+  4%
-$color-primary-light-6: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 24%) !default;
+) !default;
-$color-primary-light-7: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 28%) !default;
+$color-primary-light-2: function.lightness(
-$color-primary-light-8: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 32%) !default;
+  --color-primary-h,
-$color-primary-light-9: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 36%) !default;
+  --color-primary-s,
-$color-primary-light: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 30%) !default;
+  --color-primary-l,
-$color-primary-lighter: function.lightness(--color-primary-h, --color-primary-s, --color-primary-l, 34%) !default;
+  8%
+) !default;
+$color-primary-light-3: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  12%
+) !default;
+$color-primary-light-4: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  16%
+) !default;
+$color-primary-light-5: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  20%
+) !default;
+$color-primary-light-6: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  24%
+) !default;
+$color-primary-light-7: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  28%
+) !default;
+$color-primary-light-8: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  32%
+) !default;
+$color-primary-light-9: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  36%
+) !default;
+$color-primary-light: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  30%
+) !default;
+$color-primary-lighter: function.lightness(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  34%
+) !default;
 
-$color-success-light-1: function.lightness(--color-success-h, --color-success-s, --color-success-l, 4%) !default;
+$color-success-light-1: function.lightness(
-$color-success-light-3: function.lightness(--color-success-h, --color-success-s, --color-success-l, 12%) !default;
+  --color-success-h,
-$color-success-light-5: function.lightness(--color-success-h, --color-success-s, --color-success-l, 20%) !default;
+  --color-success-s,
-$color-success-light: function.lightness(--color-success-h, --color-success-s, --color-success-l, 41%) !default;
+  --color-success-l,
-$color-success-lighter: function.lightness(--color-success-h, --color-success-s, --color-success-l, 48%) !default;
+  4%
+) !default;
+$color-success-light-3: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  12%
+) !default;
+$color-success-light-5: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  20%
+) !default;
+$color-success-light: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  41%
+) !default;
+$color-success-lighter: function.lightness(
+  --color-success-h,
+  --color-success-s,
+  --color-success-l,
+  48%
+) !default;
 
-$color-warning-light-1: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 4%) !default;
+$color-warning-light-1: function.lightness(
-$color-warning-light-3: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 12%) !default;
+  --color-warning-h,
-$color-warning-light-5: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 20%) !default;
+  --color-warning-s,
-$color-warning-light: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 34%) !default;
+  --color-warning-l,
-$color-warning-lighter: function.lightness(--color-warning-h, --color-warning-s, --color-warning-l, 40%) !default;
+  4%
+) !default;
+$color-warning-light-3: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  12%
+) !default;
+$color-warning-light-5: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  20%
+) !default;
+$color-warning-light: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  34%
+) !default;
+$color-warning-lighter: function.lightness(
+  --color-warning-h,
+  --color-warning-s,
+  --color-warning-l,
+  40%
+) !default;
 
-$color-danger-light-1: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 4%) !default;
+$color-danger-light-1: function.lightness(
-$color-danger-light-3: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 12%) !default;
+  --color-danger-h,
-$color-danger-light-5: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 20%) !default;
+  --color-danger-s,
-$color-danger-light: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 24%) !default;
+  --color-danger-l,
+  4%
+) !default;
+$color-danger-light-3: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  12%
+) !default;
+$color-danger-light-5: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  20%
+) !default;
+$color-danger-light: function.lightness(
+  --color-danger-h,
+  --color-danger-s,
+  --color-danger-l,
+  24%
+) !default;
 $color-danger-lighter: var(--color-danger-tint-2);
 
-$color-info-light-1: function.lightness(--color-info-h, --color-info-s, --color-info-l, 4%) !default;
+$color-info-light-1: function.lightness(
-$color-info-light-3: function.lightness(--color-info-h, --color-info-s, --color-info-l, 12%) !default;
+  --color-info-h,
-$color-info-light-5: function.lightness(--color-info-h, --color-info-s, --color-info-l, 20%) !default;
+  --color-info-s,
-$color-info-lighter: function.lightness(--color-info-h, --color-info-s, --color-info-l, 39%) !default;
+  --color-info-l,
+  4%
+) !default;
+$color-info-light-3: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  12%
+) !default;
+$color-info-light-5: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  20%
+) !default;
+$color-info-lighter: function.lightness(
+  --color-info-h,
+  --color-info-s,
+  --color-info-l,
+  39%
+) !default;
 
 /// color|1|Font Color|2
 $color-text-primary: var(--color-text-dark) !default;
@@ -88,9 +234,9 @@ $border-radius-circle: 100% !default;
 
 // Box-shadow
 /// boxShadow|1|Shadow|1
-$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
 // boxShadow|1|Shadow|1
-$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
 /// boxShadow|1|Shadow|1
 $box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
@@ -100,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
@@ -577,7 +723,6 @@ $button-hover-tint-percent: 10% !default;
 $button-light-tint-percent: 30% !default;
 $button-active-shade-percent: 10% !default;
 
-
 /* cascader
 -------------------------- */
 $cascader-height: 200px !default;
@@ -625,7 +770,7 @@ $table-row-hover-background-color: $background-color-base !default;
 $table-current-row-background-color: $color-primary-light-9 !default;
 /// color||Color|0
 $table-header-background-color: $color-white !default;
-$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+$table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
 
 /* Pagination
 -------------------------- */
@@ -745,7 +890,12 @@ $card-padding: 20px !default;
 $slider-main-background-color: var(--color-primary) !default;
 /// color||Color|0
 $slider-runway-background-color: $border-color-light !default;
-$slider-button-hover-color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, 8%) !default;
+$slider-button-hover-color: function.saturation(
+  --color-primary-h,
+  --color-primary-s,
+  --color-primary-l,
+  8%
+) !default;
 $slider-stop-background-color: $color-white !default;
 $slider-disable-color: $color-text-placeholder !default;
 $slider-margin: 16px 0 !default;
@@ -813,8 +963,18 @@ $loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$scrollbar-background-color: hsla(var(#{--color-text-light-h}), var(#{--color-text-light-s}), var(#{--color-text-light-l}), .3) !default;
+$scrollbar-background-color: hsla(
-$scrollbar-hover-background-color: hsla(var(#{--color-text-light-h}), var(#{--color-text-light-s}), var(#{--color-text-light-l}), .5) !default;
+  var(#{--color-text-light-h}),
+  var(#{--color-text-light-s}),
+  var(#{--color-text-light-l}),
+  0.3
+) !default;
+$scrollbar-hover-background-color: hsla(
+  var(#{--color-text-light-h}),
+  var(#{--color-text-light-s}),
+  var(#{--color-text-light-l}),
+  0.5
+) !default;
 
 /* Carousel
 --------------------------*/
@@ -923,7 +1083,7 @@ $link-info-font-color: var(--color-info) !default;
 /// border||Other|4
 $calendar-border: $table-border !default;
 /// color||Other|4
-$calendar-selected-background-color: #F2F8FE !default;
+$calendar-selected-background-color: #f2f8fe !default;
 $calendar-cell-width: 85px !default;
 
 /* Form
@@ -936,7 +1096,7 @@ $form-label-font-size: $font-size-base !default;
 /// color||Color|0
 $avatar-font-color: #fff !default;
 /// color||Color|0
-$avatar-background-color: #C0C4CC !default;
+$avatar-background-color: #c0c4cc !default;
 /// fontSize||Font Size|1
 $avatar-text-font-size: 14px !default;
 /// fontSize||Font Size|1
@@ -958,23 +1118,67 @@ $lg: 1200px !default;
 $xl: 1920px !default;
 
 $breakpoints: (
-  'xs' : (max-width: $sm - 1),
+  "xs": (
-  'sm' : (min-width: $sm),
+    max-width: $sm - 1,
-  'md' : (min-width: $md),
+  ),
-  'lg' : (min-width: $lg),
+  "sm": (
-  'xl' : (min-width: $xl)
+    min-width: $sm,
+  ),
+  "md": (
+    min-width: $md,
+  ),
+  "lg": (
+    min-width: $lg,
+  ),
+  "xl": (
+    min-width: $xl,
+  ),
 );
 
 $breakpoints-spec: (
-  'xs-only' : (max-width: $sm - 1),
+  "xs-only": (
-  'sm-and-up' : (min-width: $sm),
+    max-width: $sm - 1,
-  'sm-only': (min-width: #{$sm}) and (max-width: #{$md - 1}),
+  ),
-  'sm-and-down': (max-width: $md - 1),
+  "sm-and-up": (
-  'md-and-up' : (min-width: $md),
+    min-width: $sm,
-  'md-only': (min-width: #{$md}) and (max-width: #{$lg - 1}),
+  ),
-  'md-and-down': (max-width: $lg - 1),
+  "sm-only": (
-  'lg-and-up' : (min-width: $lg),
+    min-width: #{$sm},
-  'lg-only': (min-width: #{$lg}) and (max-width: #{$xl - 1}),
+  )
-  'lg-and-down': (max-width: $xl - 1),
+  and
-  'xl-only' : (min-width: $xl),
+  (
+    max-width: #{$md - 1},
+  ),
+  "sm-and-down": (
+    max-width: $md - 1,
+  ),
+  "md-and-up": (
+    min-width: $md,
+  ),
+  "md-only": (
+    min-width: #{$md},
+  )
+  and
+  (
+    max-width: #{$lg - 1},
+  ),
+  "md-and-down": (
+    max-width: $lg - 1,
+  ),
+  "lg-and-up": (
+    min-width: $lg,
+  ),
+  "lg-only": (
+    min-width: #{$lg},
+  )
+  and
+  (
+    max-width: #{$xl - 1},
+  ),
+  "lg-and-down": (
+    max-width: $xl - 1,
+  ),
+  "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;
     }
 
@@ -52,7 +52,6 @@
       border-right: 1px solid var.$datepicker-inner-border-color;
     }
     .el-date-range-picker__header {
-
       div {
         margin-left: 50px;
         margin-right: 50px;

packages/design-system/theme/src/date-picker/picker-panel.scss

@@ -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/picker.scss

@@ -177,7 +177,8 @@
     color: var.$input-disabled-color;
     cursor: not-allowed;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-color: var.$input-disabled-border;
     }
 

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

@@ -19,7 +19,8 @@
     position: relative;
     overflow: hidden;
 
-    &::after, &::before {
+    &::after,
+    &::before {
       content: "";
       top: 50%;
       position: absolute;

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/dialog.scss

@@ -50,7 +50,8 @@
       color: var(--color-info);
     }
 
-    &:focus, &:hover {
+    &:focus,
+    &:hover {
       .el-dialog__close {
         color: var(--color-primary);
       }
@@ -93,11 +94,11 @@
 }
 
 .dialog-fade-enter-active {
-  animation: dialog-fade-in .3s;
+  animation: dialog-fade-in 0.3s;
 }
 
 .dialog-fade-leave-active {
-  animation: dialog-fade-out .3s;
+  animation: dialog-fade-out 0.3s;
 }
 
 @keyframes dialog-fade-in {

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

@@ -11,10 +11,8 @@
 }
 
 @mixin drawer-animation($direction) {
-
   @keyframes #{$direction}-drawer-in {
     0% {
-
       @if $direction == ltr {
         transform: translate(-100%, 0px);
       }
@@ -58,7 +56,7 @@
       }
 
       @if $direction == rtl {
-        transform: translate(0px, 0px);;
+        transform: translate(0px, 0px);
       }
 
       @if $direction == ttb {
@@ -92,13 +90,13 @@
 
 @mixin animation-in($direction) {
   .el-drawer__open &.#{$direction} {
-    animation: #{$direction}-drawer-in .3s 1ms;
+    animation: #{$direction}-drawer-in 0.3s 1ms;
   }
 }
 
 @mixin animation-out($direction) {
   &.#{$direction} {
-    animation: #{$direction}-drawer-out .3s;
+    animation: #{$direction}-drawer-out 0.3s;
   }
 }
 
@@ -116,8 +114,7 @@ $directions: rtl, ltr, ttb, btt;
   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-  0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
-  0 6px 30px 5px rgba(0, 0, 0, 0.12);
   overflow: hidden;
   outline: 0;
 
@@ -170,13 +167,15 @@ $directions: rtl, ltr, ttb, btt;
     }
   }
 
-  &.ltr, &.rtl {
+  &.ltr,
+  &.rtl {
     height: 100%;
     top: 0;
     bottom: 0;
   }
 
-  &.ttb, &.btt {
+  &.ttb,
+  &.btt {
     width: 100%;
     left: 0;
     right: 0;
@@ -210,9 +209,9 @@ $directions: rtl, ltr, ttb, btt;
 }
 
 .el-drawer-fade-enter-active {
-  animation: el-drawer-fade-in .3s;
+  animation: el-drawer-fade-in 0.3s;
 }
 
 .el-drawer-fade-leave-active {
-  animation: el-drawer-fade-in .3s reverse;
+  animation: el-drawer-fade-in 0.3s reverse;
 }

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

@@ -25,18 +25,23 @@
     &::before {
       $gap: 5px;
 
-      content: '';
+      content: "";
       position: absolute;
       display: block;
       width: 1px;
       top: $gap;
       bottom: $gap;
       left: 0;
-      background: rgba(var.$color-white, .5);
+      background: rgba(var.$color-white, 0.5);
     }
 
     &.el-button--default::before {
-      background: hsla(var(#{--button-default-border-color-h}), var(#{--button-default-border-color-s}), var(#{--button-default-border-color-l}), .5);
+      background: hsla(
+        var(#{--button-default-border-color-h}),
+        var(#{--button-default-border-color-s}),
+        var(#{--button-default-border-color-l}),
+        0.5
+      );
     }
 
     &:hover {
@@ -55,8 +60,10 @@
     margin: 0 3px;
   }
 
-  .el-dropdown-selfdefine { // 自定义
+  .el-dropdown-selfdefine {
-    &:focus:active, &:focus:not(.focusing) {
+    // 自定义
+    &:focus:active,
+    &:focus:not(.focusing) {
       outline-width: 0;
     }
   }
@@ -83,7 +90,8 @@
     color: var.$color-text-primary;
     cursor: pointer;
     outline: none;
-    &:not(.is-disabled):hover, &:focus {
+    &:not(.is-disabled):hover,
+    &:focus {
       background-color: var.$dropdown-menuItem-hover-fill;
       color: var.$dropdown-menuItem-hover-color;
     }
@@ -100,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;
       }
@@ -144,7 +144,8 @@
   @include mixins.when(error) {
     & .el-input__inner,
     & .el-textarea__inner {
-      &, &:focus {
+      &,
+      &:focus {
         border-color: var(--color-danger);
       }
     }

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

@@ -1,17 +1,19 @@
 @use "./common/var";
 
 @font-face {
-  font-family: 'element-icons';
+  font-family: "element-icons";
-  src: url('#{var.$font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
+  src: url("#{var.$font-path}/element-icons.woff") format("woff"),
-       url('#{var.$font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    /* 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;

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

@@ -45,10 +45,7 @@
   }
 }
 
-
 @include mixins.b(image-viewer) {
-
-
   @include mixins.e(wrapper) {
     position: fixed;
     top: 0;
@@ -64,7 +61,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    opacity: .8;
+    opacity: 0.8;
     cursor: pointer;
     box-sizing: border-box;
     user-select: none;
@@ -143,17 +140,17 @@
     height: 100%;
     top: 0;
     left: 0;
-    opacity: .5;
+    opacity: 0.5;
     background: #000;
   }
 }
 
 .viewer-fade-enter-active {
-  animation: viewer-fade-in .3s;
+  animation: viewer-fade-in 0.3s;
 }
 
 .viewer-fade-leave-active {
-  animation: viewer-fade-out .3s;
+  animation: viewer-fade-out 0.3s;
 }
 
 @keyframes viewer-fade-in {

packages/design-system/theme/src/input-number.scss

@@ -92,8 +92,8 @@
       width: var.$input-small-height;
       font-size: var.$input-small-font-size;
 
-      [class*=el-icon] {
+      [class*="el-icon"] {
-        transform: scale(.9);
+        transform: scale(0.9);
       }
     }
 
@@ -111,8 +111,8 @@
       width: var.$input-mini-height;
       font-size: var.$input-mini-font-size;
 
-      [class*=el-icon] {
+      [class*="el-icon"] {
-        transform: scale(.8);
+        transform: scale(0.8);
       }
     }
 
@@ -139,8 +139,8 @@
       height: auto;
       line-height: #{(var.$input-height - 2) * 0.5};
 
-      [class*=el-icon] {
+      [class*="el-icon"] {
-        transform: scale(.8);
+        transform: scale(0.8);
       }
     }
 
@@ -159,20 +159,23 @@
       border-radius: 0 0 var(--border-radius-base) 0;
     }
 
-    &[class*=medium] {
+    &[class*="medium"] {
-      [class*=increase], [class*=decrease] {
+      [class*="increase"],
+      [class*="decrease"] {
         line-height: #{(var.$input-medium-height - 2) * 0.5};
       }
     }
 
-    &[class*=small] {
+    &[class*="small"] {
-      [class*=increase], [class*=decrease] {
+      [class*="increase"],
+      [class*="decrease"] {
         line-height: #{(var.$input-small-height - 2) * 0.5};
       }
     }
 
-    &[class*=mini] {
+    &[class*="mini"] {
-      [class*=increase], [class*=decrease] {
+      [class*="increase"],
+      [class*="decrease"] {
         line-height: #{(var.$input-mini-height - 2) * 0.5};
       }
     }

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

@@ -141,7 +141,7 @@
     top: 0;
     text-align: center;
     color: var.$input-icon-color;
-    transition: all .3s;
+    transition: all 0.3s;
     pointer-events: none;
   }
 
@@ -156,18 +156,18 @@
     top: 0;
     text-align: center;
     color: var.$input-icon-color;
-    transition: all .3s;
+    transition: all 0.3s;
   }
 
   @include mixins.e(icon) {
     height: 100%;
     width: 25px;
     text-align: center;
-    transition: all .3s;
+    transition: all 0.3s;
     line-height: var.$input-height;
 
     &:after {
-      content: '';
+      content: "";
       height: 100%;
       width: 0;
       display: inline-block;

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

@@ -6,7 +6,8 @@ $typeMap: (
   danger: var.$link-danger-font-color,
   success: var.$link-success-font-color,
   warning: var.$link-warning-font-color,
-  info: var.$link-info-font-color);
+  info: var.$link-info-font-color,
+);
 
 @include mixins.b(link) {
   display: inline-flex;
@@ -30,7 +31,7 @@ $typeMap: (
       right: 0;
       height: 0;
       bottom: 0;
-      border-bottom: 1px solid var.$link-default-active-color
+      border-bottom: 1px solid var.$link-default-active-color;
     }
   }
 
@@ -44,17 +45,16 @@ $typeMap: (
     }
   }
 
-    
   &.el-link--default {
     color: var.$link-default-font-color;
     &:hover {
-      color: var.$link-default-active-color
+      color: var.$link-default-active-color;
     }
     &:after {
-      border-color: var.$link-default-active-color
+      border-color: var.$link-default-active-color;
     }
     @include mixins.when(disabled) {
-      color: var.$link-disabled-font-color
+      color: var.$link-disabled-font-color;
     }
   }
 
@@ -62,20 +62,19 @@ $typeMap: (
     &.el-link--#{$type} {
       color: $primaryColor;
       &:hover {
-        color: var.$color-primary-light-3
+        color: var.$color-primary-light-3;
       }
       &:after {
-        border-color: $primaryColor
+        border-color: $primaryColor;
       }
       @include mixins.when(disabled) {
-        color: var.$color-primary-light-6
+        color: var.$color-primary-light-6;
       }
       @include mixins.when(underline) {
         &:hover:after {
-          border-color: $primaryColor
+          border-color: $primaryColor;
         }
       }
     }
   }
-    
 }

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

@@ -14,7 +14,7 @@
 @include mixins.b(loading-mask) {
   position: absolute;
   z-index: 2000;
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
   margin: 0;
   top: 0;
   right: 0;

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

@@ -12,7 +12,7 @@
   list-style: none;
   cursor: pointer;
   position: relative;
-  transition: border-color .3s, background-color .3s, color .3s;
+  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -241,7 +241,7 @@
     top: 50%;
     right: 20px;
     margin-top: -7px;
-    transition: transform .3s;
+    transition: transform 0.3s;
     font-size: 12px;
   }
   @include mixins.when(active) {
@@ -284,6 +284,6 @@
 }
 
 .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
-  transition: .2s;
+  transition: 0.2s;
   opacity: 0;
 }

packages/design-system/theme/src/message-box.scss

@@ -65,12 +65,12 @@
       color: var(--color-info);
     }
 
-    &:focus, &:hover {
+    &:focus,
+    &:hover {
       .el-message-box__close {
         color: var(--color-primary);
       }
     }
-
   }
 
   @include mixins.e(content) {
@@ -207,11 +207,11 @@
 }
 
 .msgbox-fade-enter-active {
-  animation: msgbox-fade-in .3s;
+  animation: msgbox-fade-in 0.3s;
 }
 
 .msgbox-fade-leave-active {
-  animation: msgbox-fade-out .3s;
+  animation: msgbox-fade-out 0.3s;
 }
 
 @keyframes msgbox-fade-in {

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

@@ -13,7 +13,7 @@
   top: 20px;
   transform: translateX(-50%);
   background-color: var.$message-background-color;
-  transition: opacity 0.3s, transform .4s, top 0.4s;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
   overflow: hidden;
   padding: var.$message-padding;
   display: flex;

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

@@ -14,11 +14,21 @@
   @include mixins.when(loading) {
     color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
     background-color: var(--color-foreground-xlight);
-	border-color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      var.$button-hover-tint-percent
+    );
   }
 
   &:active {
-    border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
     background-color: var(--color-foreground-xlight);
     color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
     outline: none;
@@ -29,34 +39,62 @@
     &:hover,
     &:focus,
     &:active {
-      color: var(--color-text-light);;
+      color: var(--color-text-light);
       background-color: var(--color-foreground-xlight);
       border-color: var(--color-foreground-base);
     }
   }
 }
 
-
+@mixin button-variant(
-@mixin button-variant($color, $background-color, $border-color, $h, $s, $l, $t, $plain: true) {
+  $color,
+  $background-color,
+  $border-color,
+  $h,
+  $s,
+  $l,
+  $t,
+  $plain: true
+) {
   color: $color;
   background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
   border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
 
   &:active {
-    background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+    background: function.lightness(
-    border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
     color: $color;
     outline: none;
   }
 
   &.is-active {
-    background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+    background: function.lightness(
-    border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
+    border-color: function.lightness(
+      $h,
+      $s,
+      $l,
+      -(var.$button-active-shade-percent)
+    );
     color: $color;
   }
 
   &.is-light {
-	color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));;
+    color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
     background-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
     border-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
   }
@@ -74,7 +112,7 @@
 
   @if $plain {
     &.is-plain {
-		@include button-plain($background-color, $h, $s, $l,);
+      @include button-plain($background-color, $h, $s, $l);
     }
   }
 }
@@ -103,14 +141,19 @@
 }
 
 @mixin button-outline() {
-	@include button-plain(var.$button-primary-background-color, --color-primary-h, --color-primary-s, --color-primary-l,);
+  @include button-plain(
+    var.$button-primary-background-color,
+    --color-primary-h,
+    --color-primary-s,
+    --color-primary-l
+  );
 }
 
 @mixin button-small() {
   @include button-size(
     var(--spacing-3xs),
     var(--spacing-xs),
-		var(--font-size-2xs),
+    var(--font-size-2xs)
   );
 }
 
@@ -118,6 +161,6 @@
   @include button-size(
     var(--spacing-2xs),
     var(--spacing-xs),
-      	var(--font-size-2xs),
+    var(--font-size-2xs)
   );
 }

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,32 +23,32 @@
 @function containWhenFlag($selector) {
   $selector: selectorToString($selector);
 
-  @if string.index($selector, '.' + config.$state-prefix) {
+  @if string.index($selector, "." + config.$state-prefix) {
-    @return true
+    @return true;
   } @else {
-    @return false
+    @return false;
   }
 }
 
 @function containPseudoClass($selector) {
   $selector: selectorToString($selector);
 
-  @if string.index($selector, ':') {
+  @if string.index($selector, ":") {
-    @return true
+    @return true;
   } @else {
-    @return false
+    @return false;
   }
 }
 
 @function hitAllSpecialNestRule($selector) {
-
+  @return containsModifier($selector) or containWhenFlag($selector) or
-  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+    containPseudoClass($selector);
 }
 
 @function lightness($h, $s, $l, $lightness) {
-  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}))
+  @return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
 }
 
 @function saturation($h, $s, $l, $saturation) {
-  @return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}))
+  @return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}));
 }

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

@@ -56,22 +56,22 @@
  -------------------------- */
 @mixin placeholder {
   &::-webkit-input-placeholder {
-    @content
+    @content;
   }
 
   &::-moz-placeholder {
-    @content
+    @content;
   }
 
   &:-ms-input-placeholder {
-    @content
+    @content;
   }
 }
 
 /* BEM
  -------------------------- */
 @mixin b($block) {
-  $B: config.$namespace+'-'+$block !global;
+  $B: config.$namespace + "-" + $block !global;
 
   .#{$B} {
     @content;
@@ -83,7 +83,12 @@
   $selector: &;
   $currentSelector: "";
   @each $unit in $element {
-    $currentSelector: #{$currentSelector + "." + $B + config.$element-separator + $unit + ","};
+    $currentSelector: #{$currentSelector +
+      "." +
+      $B +
+      config.$element-separator +
+      $unit +
+      ","};
   }
 
   @if function.hitAllSpecialNestRule($selector) {
@@ -107,7 +112,11 @@
   $selector: &;
   $currentSelector: "";
   @each $unit in $modifier {
-    $currentSelector: #{$currentSelector + & + config.$modifier-separator + $unit + ","};
+    $currentSelector: #{$currentSelector +
+      & +
+      config.$modifier-separator +
+      $unit +
+      ","};
   }
 
   @at-root {
@@ -119,7 +128,7 @@
 
 @mixin configurable-m($modifier, $E-flag: false) {
   $selector: &;
-  $interpolation: '';
+  $interpolation: "";
 
   @if $E-flag {
     $interpolation: config.$element-separator + $E-flag;
@@ -134,23 +143,31 @@
   }
 }
 
-@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+@mixin spec-selector(
-  $modifierCombo: '';
+  $specSelector: "",
+  $element: $E,
+  $modifier: false,
+  $block: $B
+) {
+  $modifierCombo: "";
 
   @if $modifier {
     $modifierCombo: config.$modifier-separator + $modifier;
   }
 
   @at-root {
-    #{&}#{$specSelector}.#{$block+config.$element-separator+$element+$modifierCombo} {
+    #{&}#{$specSelector}.#{$block
-      @content
+      + config.$element-separator
+      + $element
+      + $modifierCombo} {
+      @content;
     }
   }
 }
 
 @mixin meb($modifier: false, $element: $E, $block: $B) {
   $selector: &;
-  $modifierCombo: '';
+  $modifierCombo: "";
 
   @if $modifier {
     $modifierCombo: config.$modifier-separator + $modifier;
@@ -159,7 +176,7 @@
   @at-root {
     #{$selector} {
       .#{$block + config.$element-separator + $element + $modifierCombo} {
-        @content
+        @content;
       }
     }
   }
@@ -174,20 +191,19 @@
 }
 
 @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
+    @content;
   }
 }
 
 @mixin pseudo($pseudo) {
-  @at-root #{&}#{':#{$pseudo}'} {
+  @at-root #{&}#{":#{$pseudo}"} {
-    @content
+    @content;
   }
 }
-

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

@@ -14,7 +14,7 @@
       content: "";
     }
     #{$selector}::after {
-      clear: both
+      clear: both;
     }
   }
 }
@@ -27,7 +27,7 @@
       display: inline-block;
       content: "";
       height: 100%;
-      vertical-align: middle
+      vertical-align: middle;
     }
   }
 }

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

@@ -11,7 +11,8 @@
   position: fixed;
   background-color: var.$color-white;
   box-shadow: var.$notification-shadow;
-  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
+  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
+    bottom 0.3s;
   overflow: hidden;
 
   &.right {

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/option.scss

@@ -24,7 +24,8 @@
       }
     }
 
-    &.hover, &:hover {
+    &.hover,
+    &:hover {
       background-color: var.$select-option-hover-background;
     }
 

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;
@@ -30,7 +30,7 @@
   // pagesize 的下拉 icon
   .el-input__suffix {
     right: 0;
-    transform: scale(.8);
+    transform: scale(0.8);
   }
 
   .el-select .el-input {
@@ -115,7 +115,7 @@
       line-height: 24px;
     }
 
-    span:not([class*=suffix]),
+    span:not([class*="suffix"]),
     button {
       height: 22px;
       line-height: 22px;
@@ -204,7 +204,8 @@
       }
     }
 
-    .btn-prev, .btn-next {
+    .btn-prev,
+    .btn-next {
       padding: 0;
 
       &:disabled {

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

@@ -11,6 +11,6 @@
   }
   @include mixins.e(action) {
     text-align: right;
-    margin: 0
+    margin: 0;
   }
 }

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

@@ -29,12 +29,14 @@
   }
 
   @include mixins.e(reference) {
-    &:focus:not(.focusing), &:focus:hover {
+    &:focus:not(.focusing),
+    &:focus:hover {
       outline-width: 0;
     }
   }
 
-  &:focus:active, &:focus {
+  &:focus:active,
+  &:focus {
     outline-width: 0;
   }
 }

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

@@ -14,7 +14,7 @@
 
   .popper__arrow {
     border-width: var.$popover-arrow-size;
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
   }
 
   .popper__arrow::after {

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

@@ -39,7 +39,6 @@
     }
   }
 
-
   @include mixins.m(without-text) {
     .el-progress__text {
       display: none;

packages/design-system/theme/src/radio-button.scss

@@ -27,7 +27,11 @@
     transition: var.$all-transition;
     border-radius: 0;
 
-    @include button.button-size(var.$button-padding-vertical, var.$button-padding-horizontal, var.$button-font-size,);
+    @include button.button-size(
+      var.$button-padding-vertical,
+      var.$button-padding-horizontal,
+      var.$button-font-size
+    );
 
     &:hover {
       color: var(--color-primary);
@@ -95,23 +99,36 @@
   @include mixins.m(medium) {
     & .el-radio-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-medium-padding-vertical, var.$button-medium-padding-horizontal, var.$button-medium-font-size,);
+      @include button.button-size(
+        var.$button-medium-padding-vertical,
+        var.$button-medium-padding-horizontal,
+        var.$button-medium-font-size
+      );
     }
   }
   @include mixins.m(small) {
     & .el-radio-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-small-padding-vertical, var.$button-small-padding-horizontal, var.$button-small-font-size,);
+      @include button.button-size(
+        var.$button-small-padding-vertical,
+        var.$button-small-padding-horizontal,
+        var.$button-small-font-size
+      );
     }
   }
   @include mixins.m(mini) {
     & .el-radio-button__inner {
       border-radius: 0;
-      @include button.button-size(var.$button-mini-padding-vertical, var.$button-mini-padding-horizontal, var.$button-mini-font-size,);
+      @include button.button-size(
+        var.$button-mini-padding-vertical,
+        var.$button-mini-padding-horizontal,
+        var.$button-mini-font-size
+      );
     }
   }
 
-  &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
+    /*获得焦点时 样式提醒*/
     box-shadow: 0 0 2px 2px var.$radio-button-checked-border-color;
   }
 }

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

@@ -170,7 +170,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%) scale(0);
-      transition: transform .15s ease-in;
+      transition: transform 0.15s ease-in;
     }
   }
 
@@ -186,7 +186,8 @@
     margin: 0;
   }
 
-  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
+    /*获得焦点时 样式提醒*/
     .el-radio__inner {
       box-shadow: 0 0 2px 2px var.$radio-input-border-color-hover;
     }

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

@@ -5,7 +5,8 @@
   height: var.$rate-height;
   line-height: 1;
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline-width: 0;
   }
 
@@ -22,7 +23,7 @@
     font-size: var.$rate-icon-size;
     margin-right: var.$rate-icon-margin;
     color: var.$rate-icon-color;
-    transition: .3s;
+    transition: 0.3s;
     &.hover {
       transform: scale(1.15);
     }

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

@@ -1,7 +1,9 @@
 @use "mixins/function";
 @use 'common/var';
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -14,7 +16,9 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-body, button, input {
+body,
+button,
+input {
   font-family: var(--font-family);
   font-weight: var(--font-weight-regular);
 }
@@ -23,18 +27,75 @@ button {
   font-weight: var(--font-weight-bold);
 }
 
-html, body, div, span, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-abbr, address, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, samp,
+span,
-small, strong, sub, sup, var,
+object,
-b, i,
+iframe,
-dl, dt, dd, ol, ul, li,
+h1,
-fieldset, form, label, legend,
+h2,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h3,
-article, aside, canvas, details, figcaption, figure, 
+h4,
-footer, header, hgroup, menu, nav, section, summary,
+h5,
-time, mark, audio, video {
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -43,8 +104,17 @@ time, mark, audio, video {
   background: transparent;
 }
 
-article,aside,details,figcaption,figure,
+article,
-footer,header,hgroup,menu,nav,section { 
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
@@ -52,13 +122,16 @@ nav ul {
   list-style: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
-    content:'';
+q:before,
+q:after {
+  content: "";
   content: none;
 }
 
@@ -73,11 +146,21 @@ a {
   cursor: pointer;
 
   &:active {
-    color: function.saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(var.$button-active-shade-percent));
+    color: function.saturation(
+      --color-primary-h,
+      --color-primary-s,
+      --color-primary-l,
+      -(var.$button-active-shade-percent)
+    );
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: var.$color-text-primary;
   font-weight: inherit;
 
@@ -90,7 +173,10 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-h4, h5, h6, p {
+h4,
+h5,
+h6,
+p {
   font-size: inherit;
 }
 
@@ -123,7 +209,8 @@ del {
   text-decoration: line-through;
 }
 
-abbr[title], dfn[title] {
+abbr[title],
+dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
 }
@@ -142,7 +229,7 @@ table {
   border-spacing: 0;
 }
 
-input, select {
+input,
+select {
   vertical-align: middle;
 }
-

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

@@ -34,6 +34,4 @@
       align-items: flex-end;
     }
   }
-
 }
-

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

@@ -35,7 +35,7 @@
     cursor: pointer;
     border-radius: inherit;
     background-color: var.$scrollbar-background-color;
-    transition: .3s background-color;
+    transition: 0.3s background-color;
 
     &:hover {
       background-color: var.$scrollbar-hover-background-color;

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

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

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

@@ -12,8 +12,7 @@
   display: inline-block;
   position: relative;
 
-  .el-select__tags
+  .el-select__tags > span {
-    >span {
     display: contents;
   }
 
@@ -36,7 +35,7 @@
     & .el-select__caret {
       color: var.$select-input-color;
       font-size: var.$select-input-font-size;
-      transition: transform .3s;
+      transition: transform 0.3s;
       transform: rotateZ(180deg);
       cursor: pointer;
 
@@ -141,7 +140,7 @@
 
       &::before {
         display: block;
-        transform: translate(0, .5px);
+        transform: translate(0, 0.5px);
       }
     }
   }

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

@@ -5,7 +5,6 @@
 @use "./common/var";
 
 @include mixins.b(slider) {
-
   @include utils.utils-clearfix;
 
   @include mixins.e(runway) {
@@ -124,7 +123,7 @@
     border: solid 2px var.$slider-main-background-color;
     background-color: var.$color-white;
     border-radius: 50%;
-    transition: .2s;
+    transition: 0.2s;
     user-select: none;
 
     &:hover,
@@ -202,8 +201,7 @@
           padding-right: 5px;
         }
         .el-input-number__decrease,
-        .el-input-number__increase
+        .el-input-number__increase {
-        {
           top: var.$input-small-height;
           margin-top: -1px;
           border: var.$input-border;
@@ -226,15 +224,13 @@
         }
         &:hover {
           .el-input-number__decrease,
-          .el-input-number__increase
+          .el-input-number__increase {
-          {
             border-color: var.$input-hover-border;
           }
         }
         &:active {
           .el-input-number__decrease,
-          .el-input-number__increase
+          .el-input-number__increase {
-          {
             border-color: var.$input-focus-border;
           }
         }

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

@@ -19,7 +19,6 @@
     stroke-linecap: round;
     animation: dash 1.5s ease-in-out infinite;
   }
-
 }
 
 @keyframes rotate {

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

@@ -63,7 +63,7 @@
     font-size: 14px;
     box-sizing: border-box;
     background: var.$color-white;
-    transition: .15s ease-out;
+    transition: 0.15s ease-out;
 
     @include mixins.when(text) {
       border-radius: 50%;
@@ -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;
     }
@@ -106,7 +106,7 @@
     border-width: 1px;
     border-style: solid;
     border-color: inherit;
-    transition: .15s ease-out;
+    transition: 0.15s ease-out;
     box-sizing: border-box;
     width: 0;
     height: 0;
@@ -215,7 +215,6 @@
   }
 
   @include mixins.when(center) {
-
     @include mixins.e(head) {
       text-align: center;
     }
@@ -253,12 +252,12 @@
     }
 
     @include mixins.e(icon-inner) {
-      &[class*=el-icon]:not(.is-status) {
+      &[class*="el-icon"]:not(.is-status) {
         font-size: 18px;
       }
 
       &.is-status {
-        transform: scale(.8) translateY(1px);
+        transform: scale(0.8) translateY(1px);
       }
     }
 
@@ -274,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;
@@ -289,7 +288,7 @@
 
       &::before,
       &::after {
-        content: '';
+        content: "";
         display: inline-block;
         position: absolute;
         height: 15px;

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

@@ -17,7 +17,7 @@
   }
 
   @include mixins.e(label) {
-    transition: .2s;
+    transition: 0.2s;
     height: var.$switch-height;
     display: inline-block;
     font-size: var.$switch-font-size;
@@ -63,7 +63,7 @@
     box-sizing: border-box;
     background: var.$switch-off-color;
     cursor: pointer;
-    transition: border-color .3s, background-color .3s;
+    transition: border-color 0.3s, background-color 0.3s;
     vertical-align: middle;
 
     &:after {
@@ -72,7 +72,7 @@
       top: 1px;
       left: 1px;
       border-radius: var.$border-radius-circle;
-      transition: all .3s;
+      transition: all 0.3s;
       width: var.$switch-button-size;
       height: var.$switch-button-size;
       background-color: var.$color-white;

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

@@ -66,7 +66,7 @@
     background-color: var.$color-white;
 
     // 纯属为了增加权重
-    &[class*=cell] {
+    &[class*="cell"] {
       padding: 20px 50px;
     }
 
@@ -89,7 +89,8 @@
     border-right: 0;
     border-bottom: 0;
 
-    th.gutter, td.gutter {
+    th.gutter,
+    td.gutter {
       border-right-width: 1px;
     }
   }
@@ -117,7 +118,8 @@
     }
   }
 
-  th, td {
+  th,
+  td {
     padding: 12px 0;
     min-width: 0;
     box-sizing: border-box;
@@ -149,21 +151,24 @@
   }
 
   @include mixins.m(medium) {
-    th, td {
+    th,
+    td {
       padding: 10px 0;
     }
   }
 
   @include mixins.m(small) {
     font-size: 12px;
-    th, td {
+    th,
+    td {
       padding: 8px 0;
     }
   }
 
   @include mixins.m(mini) {
     font-size: 12px;
-    th, td {
+    th,
+    td {
       padding: 6px 0;
     }
   }
@@ -176,7 +181,8 @@
     }
   }
 
-  th.is-leaf, td {
+  th.is-leaf,
+  td {
     border-bottom: var.$table-border;
   }
 
@@ -246,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;
@@ -280,7 +286,8 @@
       border-color: transparent;
     }
 
-    th, td {
+    th,
+    td {
       border-right: var.$table-border;
 
       &:first-child .cell {
@@ -311,7 +318,7 @@
     box-shadow: var.$table-fixed-box-shadow;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       bottom: 0;
@@ -482,7 +489,7 @@
     & .el-table__body {
       & tr.el-table__row--striped {
         td {
-          background: #FAFAFA;
+          background: #fafafa;
         }
 
         &.current-row td {
@@ -494,8 +501,10 @@
 
   @include mixins.e(body) {
     tr.hover-row {
-      &, &.el-table__row--striped {
+      &,
-        &, &.current-row {
+      &.el-table__row--striped {
+        &,
+        &.current-row {
           > td {
             background-color: var.$table-row-hover-background-color;
           }
@@ -526,13 +535,13 @@
     & i {
       color: var(--color-info);
       font-size: 12px;
-      transform: scale(.75);
+      transform: scale(0.75);
     }
   }
 
   @include mixins.m(enable-row-transition) {
     .el-table__body td {
-      transition: background-color .25s ease;
+      transition: background-color 0.25s ease;
     }
   }
 
@@ -550,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

@@ -14,7 +14,7 @@
     height: 2px;
     background-color: var(--color-primary);
     z-index: 1;
-    transition: transform .3s cubic-bezier(.645,.045,.355,1);
+    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     list-style: none;
   }
   @include mixins.e(new-tab) {
@@ -29,7 +29,7 @@
     font-size: 12px;
     color: #d3dce6;
     cursor: pointer;
-    transition: all .15s;
+    transition: all 0.15s;
 
     .el-icon-plus {
       transform: scale(0.8, 0.8);
@@ -79,7 +79,7 @@
   @include mixins.e(nav) {
     white-space: nowrap;
     position: relative;
-    transition: transform .3s;
+    transition: transform 0.3s;
     float: left;
     z-index: #{var.$index-normal + 1};
 
@@ -104,7 +104,8 @@
     color: var.$color-text-primary;
     position: relative;
 
-    &:focus, &:focus:active {
+    &:focus,
+    &:focus:active {
       outline: none;
     }
 
@@ -116,10 +117,10 @@
     & .el-icon-close {
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645,.045,.355,1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       margin-left: 5px;
       &:before {
-        transform: scale(.9);
+        transform: scale(0.9);
         display: inline-block;
       }
 
@@ -178,7 +179,8 @@
     > .el-tabs__header .el-tabs__item {
       border-bottom: 1px solid transparent;
       border-left: 1px solid var.$border-color-light;
-      transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       &:first-child {
         border-left: none;
       }
@@ -223,7 +225,7 @@
       content: none;
     }
     > .el-tabs__header .el-tabs__item {
-      transition: all .3s cubic-bezier(.645,.045,.355,1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       border: 1px solid transparent;
       margin-top: -1px;
       color: var.$color-text-secondary;
@@ -264,8 +266,10 @@
       padding-right: 0;
     }
 
-    &.el-tabs--border-card, &.el-tabs--card,
+    &.el-tabs--border-card,
-    .el-tabs--left, .el-tabs--right {
+    &.el-tabs--card,
+    .el-tabs--left,
+    .el-tabs--right {
       > .el-tabs__header {
         .el-tabs__item:nth-child(2) {
           padding-left: 20px;
@@ -514,22 +518,22 @@
   display: inline-block;
 }
 .slideInRight-enter {
-  animation: slideInRight-enter .3s;
+  animation: slideInRight-enter 0.3s;
 }
 .slideInRight-leave {
   position: absolute;
   left: 0;
   right: 0;
-  animation: slideInRight-leave .3s;
+  animation: slideInRight-leave 0.3s;
 }
 .slideInLeft-enter {
-  animation: slideInLeft-enter .3s;
+  animation: slideInLeft-enter 0.3s;
 }
 .slideInLeft-leave {
   position: absolute;
   left: 0;
   right: 0;
-  animation: slideInLeft-leave .3s;
+  animation: slideInLeft-leave 0.3s;
 }
 
 @keyframes slideInRight-enter {
@@ -538,7 +542,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(100%);
-    transform: translateX(100%)
+    transform: translateX(100%);
   }
 
   to {
@@ -546,7 +550,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
-    transform: translateX(0)
+    transform: translateX(0);
   }
 }
 @keyframes slideInRight-leave {
@@ -555,7 +559,7 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
     transform: translateX(0);
-    opacity: 1
+    opacity: 1;
   }
 
   100% {
@@ -563,7 +567,7 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(100%);
     transform: translateX(100%);
-    opacity: 0
+    opacity: 0;
   }
 }
 @keyframes slideInLeft-enter {
@@ -572,7 +576,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(-100%);
-    transform: translateX(-100%)
+    transform: translateX(-100%);
   }
 
   to {
@@ -580,7 +584,7 @@
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
-    transform: translateX(0)
+    transform: translateX(0);
   }
 }
 @keyframes slideInLeft-leave {
@@ -589,7 +593,7 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(0);
     transform: translateX(0);
-    opacity: 1
+    opacity: 1;
   }
 
   100% {
@@ -597,6 +601,6 @@
     transform-origin: 0 0;
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
-    opacity: 0
+    opacity: 0;
   }
 }

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

@@ -136,7 +136,7 @@
     line-height: 26px;
 
     .el-icon-close {
-      transform: scale(.8);
+      transform: scale(0.8);
     }
   }
 
@@ -146,7 +146,7 @@
     line-height: 22px;
 
     .el-icon-close {
-      transform: scale(.8);
+      transform: scale(0.8);
     }
   }
 
@@ -157,7 +157,7 @@
 
     .el-icon-close {
       margin-left: -3px;
-      transform: scale(.7);
+      transform: scale(0.7);
     }
   }
 }

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

@@ -2,7 +2,8 @@
 @use "./common/var";
 
 @include mixins.b(tooltip) {
-  &:focus:not(.focusing), &:focus:hover {
+  &:focus:not(.focusing),
+  &:focus:hover {
     outline-width: 0;
   }
   @include mixins.e(popper) {

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

@@ -48,7 +48,8 @@
       margin: 0;
     }
 
-    i, span {
+    i,
+    span {
       font-size: 14px;
     }
 
@@ -87,7 +88,8 @@
     box-sizing: border-box;
 
     @include mixins.when(filterable) {
-      height: #{var.$transfer-panel-body-height - var.$transfer-filter-height - 20px};
+      height: #{var.$transfer-panel-body-height - var.$transfer-filter-height -
+        20px};
       padding-top: 0;
     }
   }

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

@@ -38,7 +38,8 @@
 @include mixins.b(tree-node) {
   white-space: nowrap;
   outline: none;
-  &:focus { /* focus */
+  &:focus {
+    /* focus */
     > .el-tree-node__content {
       background-color: var.$tree-node-hover-background-color;
     }

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

@@ -104,7 +104,7 @@
   }
 
   @include mixins.when(dragover) {
-    background-color: rgba(32, 159, 255, .06);
+    background-color: rgba(32, 159, 255, 0.06);
     border: 2px dashed var(--color-primary);
   }
 }
@@ -115,7 +115,7 @@
   list-style: none;
 
   @include mixins.e(item) {
-    transition: all .5s cubic-bezier(.55,0,.1,1);
+    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
     color: var.$color-text-primary;
     line-height: 1.8;
@@ -156,7 +156,7 @@
       top: 5px;
       right: 5px;
       cursor: pointer;
-      opacity: .75;
+      opacity: 0.75;
       color: var.$color-text-primary;
       //transform: scale(.7);
 
@@ -193,25 +193,30 @@
         display: block;
       }
 
-      .el-upload-list__item-name:hover, .el-upload-list__item-name:focus {
+      .el-upload-list__item-name:hover,
+      .el-upload-list__item-name:focus {
         color: var.$link-hover-color;
         cursor: pointer;
       }
 
-      &:focus:not(:hover) {  /* 键盘focus */
+      &:focus:not(:hover) {
+        /* 键盘focus */
         .el-icon-close-tip {
           display: inline-block;
         }
       }
 
-      &:not(.focusing):focus, &:active { /* click时 */
+      &:not(.focusing):focus,
+      &:active {
+        /* click时 */
         outline-width: 0;
         .el-icon-close-tip {
           display: none;
         }
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         .el-upload-list__item-status-label {
           display: none;
         }
@@ -232,7 +237,7 @@
     overflow: hidden;
     padding-left: 4px;
     text-overflow: ellipsis;
-    transition: color .3s;
+    transition: color 0.3s;
     white-space: nowrap;
 
     [class^="el-icon"] {
@@ -337,13 +342,13 @@
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, 0.5);
-      transition: opacity .3s;
+      transition: opacity 0.3s;
       &::after {
         display: inline-block;
         content: "";
         height: 100%;
-        vertical-align: middle
+        vertical-align: middle;
       }
 
       span {
@@ -432,7 +437,7 @@
       position: relative;
       z-index: 1;
       margin-left: -80px;
-      background-color: var.$color-white
+      background-color: var.$color-white;
     }
 
     .el-upload-list__item-name {
@@ -534,7 +539,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(#000, .72);
+    background-color: rgba(#000, 0.72);
     text-align: center;
 
     .btn {
@@ -552,7 +557,7 @@
 
       span {
         opacity: 0;
-        transition: opacity .15s linear;
+        transition: opacity 0.15s linear;
       }
 
       &:not(:first-child) {

packages/design-system/tsconfig.json

@@ -12,21 +12,11 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
+    "types": ["webpack-env", "jest"],
-      "webpack-env",
-      "jest"
-    ],
     "paths": {
-      "@/*": [
+      "@/*": ["src/*"]
-        "src/*"
-      ]
     },
-    "lib": [
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
   },
   "include": [
     "src/**/*.ts",
@@ -35,7 +25,5 @@
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules"
-  ]
 }