feat: add animation.scss support to all compiler && add button transition and token

packages/semi-foundation/button/animation.scss

@@ -0,0 +1,24 @@
+$transition_duration-button_primary-bg: var(--semi-transition_dulation-faster);
+$transition_function_button_primary-bg: var(--semi-transition_function-easeIn);
+$transition_delay_button_primary-bg: var(--semi-transition_delay-fastest);
+
+$transition_duration-button_secondary-bg: var(--semi-transition_dulation-faster);
+$transition_function_button_secondary-bg: var(--semi-transition_function-easeIn);
+$transition_delay_button_secondary-bg: var(--semi-transition_delay-fastest);
+
+$transition_duration-button_tertiary-bg: var(--semi-transition_dulation-faster);
+$transition_function_button_tertiary-bg: var(--semi-transition_function-easeIn);
+$transition_delay_button_tertiary-bg: var(--semi-transition_delay-fastest);
+
+$transition_duration-button_light-bg: var(--semi-transition_dulation-faster);
+$transition_function_button_light-bg: var(--semi-transition_function-easeIn);
+$transition_delay_button_light-bg: var(--semi-transition_delay-fastest);
+
+$transition_duration-button_warning-bg: var(--semi-transition_dulation-faster);
+$transition_function_button_warning-bg: var(--semi-transition_function-easeIn);
+$transition_delay_button_warning-bg: var(--semi-transition_delay-fastest);
+
+$transition_duration-button_danger-bg: var(--semi-transition_dulation-faster);
+$transition_function_button_danger-bg: var(--semi-transition_function-easeIn);
+$transition_delay_button_danger-bg: var(--semi-transition_delay-fastest);
+

packages/semi-foundation/button/button.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 @import './splitButtonGroup.scss';
 
 $module: #{$prefix}-button;
@@ -39,7 +40,9 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
-        &:hover {
+      transition: background-color $transition_duration-button_danger-bg $transition_function_button_danger-bg $transition_delay_button_danger-bg;
+
+      &:hover {
             background-color: $color-button_danger-bg-hover;
         }
         &:active {
@@ -56,7 +59,9 @@ $module: #{$prefix}-button;
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
-        &:hover {
+      transition: background-color $transition_duration-button_warning-bg $transition_function_button_warning-bg $transition_delay_button_warning-bg;
+
+      &:hover {
             background-color: $color-button_warning-bg-hover;
         }
         &:active {
@@ -73,7 +78,9 @@ $module: #{$prefix}-button;
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
-        &:hover {
+      transition: background-color $transition_duration-button_tertiary-bg $transition_function_button_tertiary-bg $transition_delay_button_tertiary-bg;
+
+      &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
         &:active {
@@ -87,6 +94,7 @@ $module: #{$prefix}-button;
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
+        transition: background-color $transition_duration-button_primary-bg $transition_function_button_primary-bg $transition_delay_button_primary-bg;
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -103,7 +111,9 @@ $module: #{$prefix}-button;
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
-        &:hover {
+      transition: background-color $transition_duration-button_secondary-bg $transition_function_button_secondary-bg $transition_delay_button_secondary-bg;
+
+      &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
         &:active {
@@ -145,7 +155,9 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
-        &:not(.#{$module}-disabled):hover {
+      transition: background-color $transition_duration-button_light-bg $transition_function_button_light-bg $transition_delay_button_light-bg;
+
+      &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;
         }

packages/semi-scss-compile/src/utils/generateSCSSMap.ts

@@ -38,7 +38,7 @@ const generateComponentsScssMap = (foundationPath: string, iconPath?: string) =>
 
 
 const generateThemeScssMap = (themePath: string) => {
-    const fileList = ['_font.scss', '_palette.scss', 'global.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
+    const fileList = ['_font.scss', '_palette.scss', 'global.scss','animation.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
     const themeScssMap: { [key in typeof fileList[number]]?: string } = {};
     for (const fileName of fileList) {
         const scssAbsolutePath = path.join(themePath, 'scss', fileName);

packages/semi-scss-compile/src/utils/writeFile.ts

@@ -34,6 +34,7 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
     let compilerEntryContent = '';
     compilerEntryContent += `@import "./theme/index.scss";\n`;
     compilerEntryContent += `@import "./theme/global.scss";\n`;
+    compilerEntryContent += `@import "./theme/animation.scss";\n`;
 
     for (const componentName of Object.keys(scssMap['components'])) {
         let scssFileName = `${componentName}.scss`;

packages/semi-theme-default/scss/animation.scss

@@ -0,0 +1,24 @@
+body{
+  --semi-transition_dulation-slowest:500ms;
+  --semi-transition_dulation-slower:500ms;
+  --semi-transition_dulation-slow:500ms;
+  --semi-transition_dulation-normal:500ms;
+  --semi-transition_dulation-fast:200ms;
+  --semi-transition_dulation-faster:100ms;
+  --semi-transition_dulation-fastest:50ms;
+
+  --semi-transition_function-linear:linear;
+  --semi-transition_function-ease:ease;
+  --semi-transition_function-easeIn:ease-in;
+  --semi-transition_function-easeOut:ease-out;
+  --semi-transition_function-easeInIOut:ease-in-out;
+
+  --semi-transition_delay-slowest:0ms;
+  --semi-transition_delay-slower:0ms;
+  --semi-transition_delay-slow:0ms;
+  --semi-transition_delay-normal:0ms;
+  --semi-transition_delay-fast:0ms;
+  --semi-transition_delay-faster:0ms;
+  --semi-transition_delay-fastest:0ms;
+
+}

packages/semi-theme-default/scss/index.scss

@@ -1,3 +1,3 @@
 @import './mixin.scss';
 @import './variables.scss';
-@import './_font.scss';
+@import './_font.scss';

packages/semi-ui/gulpfile.js

@@ -63,8 +63,10 @@ gulp.task('compileScss', function compileScss() {
                 const rootPath = path.join(__dirname, '../../');
                 const scssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/index.scss";\n`;
                 const cssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/global.scss";\n`;
+                const animationStr = `@import "${rootPath}/packages/semi-theme-default/scss/animation.scss";\n`;
+                const animationBuffer = Buffer.from(animationStr);
                 const scssBuffer = Buffer.from(scssVarStr);
-                const buffers = [scssBuffer];
+                const buffers = [scssBuffer,animationBuffer];
                 if (/_base\/base\.scss/.test(chunk.path)) {
                     buffers.push(Buffer.from(cssVarStr));
                 }

packages/semi-webpack/src/semi-theme-loader.ts

@@ -8,7 +8,7 @@ export default function SemiThemeLoader(source: string) {
     const scssVarStr = `@import "~${theme}/scss/index.scss";\n`;
     // inject once
     const cssVarStr = `@import "~${theme}/scss/global.scss";\n`;
-
+    const animationStr = `@import "~${theme}/scss/animation.scss";\n`;
     const shouldInject = source.includes('semi-base');
 
     let fileStr = source;
@@ -45,7 +45,7 @@ export default function SemiThemeLoader(source: string) {
     const prefixClsStr = `$prefix: '${prefixCls}';\n`;
 
     if (shouldInject) {
-        return `${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
+        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
     } else {
         return `${scssVarStr}${prefixClsStr}${fileStr}`;
     }

yarn.lock

@@ -1460,16 +1460,6 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@douyinfe/[email protected]":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.14.0.tgz#eb56b95291f7d19913237dcfeb0ac4a2d05d0ded"
-  integrity sha512-VN1bUc+AA8Ovi2+ZZxFkmiOb+tuQd0LYjMCUqReZcPXhOQFFuiVdG+UNWvjWloeBFqezBqCAAiTmLl1dUEjgSw==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.15.4"
-    "@douyinfe/semi-animation" "2.12.0"
-    "@douyinfe/semi-animation-styled" "2.14.0"
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.9.1.tgz#f2e4c6ef7899729ee6145edf0579598ba195bfdd"
@@ -1480,13 +1470,6 @@
     "@douyinfe/semi-animation-styled" "2.9.1"
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.14.0.tgz#7c611d9be6d7ac8d442c3aa4dede6c66c21d4b36"
-  integrity sha512-9qszEXtbvO7REe/pdga4VnPE6i4UG6t+Jso7umOH5qqFczqO0mrbDaqt+2W17qOpmvIwJIkDRhUzMq8A1LGOLw==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.15.4"
-
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.9.1.tgz#0a4a3c521626118b209604b2d6447fbcaa4839a4"
@@ -1510,21 +1493,6 @@
     "@babel/runtime-corejs3" "^7.15.4"
     bezier-easing "^2.1.0"
 
-"@douyinfe/[email protected]":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.14.0.tgz#a75e08182db474a46558c679eee8659018d2bec1"
-  integrity sha512-hD5vkISJNUNh5EEUCdLz7Yywt8leCypF3QpI4mUixmPY5nxgvqBZN7qobnbuGTKEp1X4pllJIZZzDhsSDgzubA==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.15.4"
-    "@douyinfe/semi-animation" "2.12.0"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    date-fns "^2.9.0"
-    date-fns-tz "^1.0.10"
-    lodash "^4.17.21"
-    memoize-one "^5.2.1"
-    scroll-into-view-if-needed "^2.2.24"
-
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.9.1.tgz#1300bb97d6ceb92274ca4c9e6c66c5c16dc284ea"
@@ -1540,14 +1508,6 @@
     memoize-one "^5.2.1"
     scroll-into-view-if-needed "^2.2.24"
 
-"@douyinfe/[email protected]", "@douyinfe/semi-icons@^2.0.0":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.14.0.tgz#73f7123581b3fa7ce64089a814c461d0dae808bb"
-  integrity sha512-6sUbaPi/rS/eHyf5CwdzO16AhyY79TP+GqdcgztKF3zp6LMo7g9+hHC7hYY8GcSAlnlmUBLJgcUU6HkrJMHNFA==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.15.4"
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]", "@douyinfe/semi-icons@latest":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.9.1.tgz#7a04e1a77070220b04f63e6f65aac30155ed8ddd"
@@ -1556,13 +1516,6 @@
     "@babel/runtime-corejs3" "^7.15.4"
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.14.0.tgz#e16a8b84eb9b0839a0aac0e953a7d2adc5979f90"
-  integrity sha512-GXySlk28dTzI2CMyQ55Sk9QmjXPKb2fVbd2pZGYgEL1LuBWTYc2xl1wwKAre5yhjxcs3M8juzbb/yTufceivAQ==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.15.4"
-
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.9.1.tgz#1a448d1854ee1beeba57ea612da052b549ea105f"
@@ -1626,13 +1579,6 @@
     monaco-themes "^0.3.3"
     react-live "^2.2.2"
 
-"@douyinfe/[email protected]":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.14.0.tgz#3940acd2da0417019530c397963b0eb2612f7868"
-  integrity sha512-Ng3dzJ7zA42JmrXtpIzQlR4LowQ+1F0sbf7y6zj1BcgImwKihTPTX8PmD8pnABL/YYbcsE2u6jDPRxX8aPkxFg==
-  dependencies:
-    glob "^7.1.6"
-
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.9.1.tgz#734113e9783ca58b69afe1769005e7e57e5a4da7"
@@ -1640,32 +1586,6 @@
   dependencies:
     glob "^7.1.6"
 
-"@douyinfe/semi-ui@^2.0.0":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.14.0.tgz#b78e4344b38a3d68b6e7d31f69ee9dc27fb6808c"
-  integrity sha512-MDgelqQ8HfhfuuLr3c2OZxhhYWAd6sPPRo/RB1UH6ydhIQesT49cpcCpbcZW3YUS1ItprXoJFCQiDxDtZGa4sQ==
-  dependencies:
-    "@babel/runtime-corejs3" "^7.15.4"
-    "@douyinfe/semi-animation" "2.12.0"
-    "@douyinfe/semi-animation-react" "2.14.0"
-    "@douyinfe/semi-foundation" "2.14.0"
-    "@douyinfe/semi-icons" "2.14.0"
-    "@douyinfe/semi-illustrations" "2.14.0"
-    "@douyinfe/semi-theme-default" "2.14.0"
-    "@types/react-window" "^1.8.2"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    copy-text-to-clipboard "^2.1.1"
-    date-fns "^2.9.0"
-    date-fns-tz "^1.0.10"
-    lodash "^4.17.21"
-    react-resizable "^1.8.0"
-    react-sortable-hoc "^2.0.0"
-    react-window "^1.8.2"
-    resize-observer-polyfill "^1.5.1"
-    scroll-into-view-if-needed "^2.2.24"
-    utility-types "^3.10.0"
-
 "@douyinfe/semi-ui@latest":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.9.1.tgz#505d4783ea1fa73d307b75f62091030f1fee9332"