Merge branch 'release' into main

.gitignore

@@ -228,3 +228,6 @@ tmp
 
 # test
 /__snapshots__/
+
+
+.vscode

.vscode/settings.json

@@ -5,7 +5,7 @@
     },
     "[javascript]": {
         "editor.formatOnSave": false,
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[scss]": {
         "editor.formatOnPaste": false
@@ -20,7 +20,7 @@
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "typescript.updateImportsOnFileMove.enabled": "always",
-    "files.autoSave": "off",
+    "files.autoSave": "onFocusChange",
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },

content/basic/tokens/index.md

@@ -149,12 +149,12 @@ brief: Semi Design Tokens
 ```css
 @font-face {
   font-family: "Inter";
-  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("ttf");
+  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Inter-Bold";
-  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("ttf");
+  src: url("https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf") format("truetype");
 }
 
 ```

content/input/button/index-en-US.md

@@ -28,8 +28,6 @@ Buttons support the following types:
 -   Warning button ("warning")
 -   Danger button ("danger")
 
-> Primary and Secondary button have the same colors in Semi's default theme, but you can implement different Primary and Secondary colors by customizing the theme.
-
 ```jsx live=true dir="column"
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';

content/input/button/index.md

@@ -27,8 +27,6 @@ import { Button, SplitButtonGroup } from '@douyinfe/semi-ui';
 -   警告按钮（"warning"）
 -   危险按钮（"danger"）
 
-> Semi 默认主题的 Primary 与 Secondary 颜色相同，但你可以通过自定义主题来实现不同的 Primary 与 Secondary 颜色。
-
 ```jsx live=true dir="column"
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';

content/input/checkbox/index-en-US.md

@@ -399,9 +399,10 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 
 | PROPERTIES     | Instructions                                                 | type               | Default |
 | -------------- | ------------------------------------------------------------ | ------------------ | ------- |
-| addonId | id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly  **provided after v2.11.0**                                 | string            |       |
+| addonId | id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly  <br/>**provided after v2.11.0**                                 | string            |       |
 | aria-label     | Define label of the Checkbox  | string | - |
 | checked        | Specify whether the current Checkbox is selected (it is invalid when used in Group)                     | boolean            | false   |
+| type           | Set the type of checkboxe, one of: `default`、`card`、`pureCard` <br/>**provided after v2.18.0** | string        | `default`  |
 | defaultChecked | Whether Checked by default (it is invalid when used in Group)                                           | boolean            | false   |
 | disabled       | Disabled state                                               | boolean            | false   |
 | extra          | Provide extra information <br/>**>= v0.25.0**                | ReactNode          | -       |
@@ -420,7 +421,7 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 | disabled     | Disable the entire group                                                | boolean                | false      |
 | name         | The `name` attribute for all `input[type="checkbox"]` in Checkbox Group | string                 | -          |
 | options      | Specify optional                                                        | any\[]              | \[]        |
-| type         | Set the type of checkboxes, one of: `default`、`card`、`pureCard` **provided after v1.30.0**	| string        | `default`  |
+| type         | Set the type of checkboxes, one of: `default`、`card`、`pureCard` <br/>**provided after v1.30.0**	| string        | `default`  |
 | value        | Specify selected options                                                | any\[]              | \[]        |
 | onChange     | Callback function when selected options change                          | function(checkedValue) | -          |
 

content/input/checkbox/index.md

@@ -381,9 +381,10 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| addonId | addon 节点 id，aria-labelledby 指向这个 id，若无设置会随机生成一个 id  **v2.11.0 后提供**                                 | string            |       |
+| addonId | addon 节点 id，aria-labelledby 指向这个 id，若无设置会随机生成一个 id <br/>**v2.11.0 后提供**                                 | string            |       |
 | aria-label | 定义 Checkbox 的作用 | string | - |
 | checked | 指定当前Checkbox是否选中（在Group中使用时无效） | boolean | false |
+| type |设置checkbox 的样式类型，可选值为: `default`、`card`、`pureCard`<br/>**v2.18.0 后提供** |string|`default`|
 | defaultChecked | 初始是否选中（在Group中使用时无效） | boolean | false |
 | disabled | 失效状态 | boolean | false |
 | extra | 副文本<br/>__v0.25.0后提供__ | ReactNode | - |
@@ -402,7 +403,7 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 | disabled | 整组失效 | boolean | false |
 | name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - |
 | options | 指定可选项 | any\[] | \[] |
-| type |	设置所有 checkbox 的样式类型，可选值为: `default`、`card`、`pureCard` **v1.30.0 后提供**|string|`default`|
+| type |设置所有 checkbox 的样式类型，可选值为: `default`、`card`、`pureCard` <br/>**v1.30.0 后提供**|string|`default`|
 | value | 指定选中的选项 | any\[] | \[] |
 | onChange | 变化时回调函数 | function(checkedValue) | - |
 

content/input/form/index-en-US.md

@@ -56,7 +56,12 @@ Semi Form supports multiple writing at the same time.
 Add `field` property to each field component.
 You can also set label` properties for each field, by default is the same as field
 
-> Note: The field attribute is required props
+`label` can be passed in a string directly, or declared in the form of an object, configure `extra`, `required`, `optional` and other attributes to deal with more complex scenarios
+
+<Notice type='primary' title='Notice'>
+    The field attribute is required props
+</Notice>
+
 
 ```jsx live=true dir="column"
 import React from 'react';
@@ -65,21 +70,26 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
     <Form layout='horizontal'>
-        <Form.Select field="role" label='UserRole' style={{ width:120 }}>
-            <Form.Select.Option value="admin">Admin</Form.Select.Option>
-            <Form.Select.Option value="user">User</Form.Select.Option>
-            <Form.Select.Option value="guest">Guest</Form.Select.Option>
-        </Form.Select>
-        <Form.Input field='userName' label='UserName' />
-        <Form.Input field='password' label='Password' />
+        <Form.Input field='username' label='UserName' style={{ width:80 }}/>
         <Form.Input
             field='password'
             label={{ 
                 text: 'Password',
-                extra: <Tooltip content='more detail'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                extra: <Tooltip content='More info xxx'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
             }}
             style={{ width:176 }}
         />
+        <Form.Select
+            field="role"
+            label={{ text: 'Role', optional: true }}
+            style={{ width:176 }}
+            optionList={[
+                { label: 'Admin', value: 'admin' },
+                { label: 'User', value: 'user' },
+                { label: 'Guest', value: 'guest' },
+            ]}
+        >
+        </Form.Select>
     </Form>
 );
 ```
@@ -1781,6 +1791,7 @@ const { Label } = Form;
 | className  | Classname of label wrapper      | string    |         |
 | style      | Inline style                    | string    |         |
 | width      | Label width                     | number    |         |
+| optional  | Whether to automatically append the "(optional)" text mark after the text (automatically switch the same semantic text according to different languages configured by Locale). When this item is true, the required \* will no longer be displayed.  | boolean    | false | v2.18.0 |
 
 ## Form.Slot
 

content/input/form/index.md

@@ -58,7 +58,8 @@ Semi Form 同时支持多种写法
 #### 基本写法
 
 从 Form 中导出表单控件，给表单控件添加`field`属性，将其放置于 Form 内部即可  
-还可以给每个表单控件设置`label`属性，不传入时默认与 field 相同
+还可以给每个表单控件设置`label`属性，不传入时默认与 field 相同  
+`label`可以直接传入字符串，亦可以以 object 方式声明，配置 `extra`、`required`、`optional`等属性应对更复杂的场景 
 
 <Notice type='primary' title='注意事项'>
 对于Field级别组件来说，field 属性是必填项!
@@ -73,21 +74,21 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
     const { Option } = Form.Select;
 
     return (
-        <Form layout='horizontal'  onValueChange={values=>console.log(values)}>
-            <Form.Select field="Role" label='角色' style={{ width:176 }}>
-                <Option value="admin">管理员</Option>
-                <Option value="user">普通用户</Option>
-                <Option value="guest">访客</Option>
-            </Form.Select>
+        <Form layout='horizontal' onValueChange={values=>console.log(values)}>
             <Form.Input field='UserName' label='用户名' style={{ width:80 }}/>
             <Form.Input
                 field='Password'
                 label={{ 
                     text: '密码',
-                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
                 }}
                 style={{ width:176 }}
             />
+            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width:176 }}>
+                <Option value="admin">管理员</Option>
+                <Option value="user">普通用户</Option>
+                <Option value="guest">访客</Option>
+            </Form.Select>
         </Form>
     );
 };
@@ -2123,7 +2124,8 @@ const { Label } = Form;
 | align     | text-align               | string    | 'left' |  |
 | className | 样式类名                 | string    |        |  |
 | style     | 内联样式                 | string    |        |  |
-| width     | label 宽度               | number\/string    |        |  |
+| width     | label 宽度               | number/string    |        |  |
+| optional  | 是否自动在text后追加"（可选）"文字标识（根据Locale配置的不同语言自动切换相同语义文本）。当该项为true时，required的\*号将不再展示。若当表单项多数均为必填时，仅强调可选项会更使得整体视觉更简洁  | boolean    | false | v2.18.0 |
 
 ## Form.Slot
 

content/input/radio/index-en-US.md

@@ -376,12 +376,13 @@ class App extends React.Component {
 | PROPERTIES | Instructions | Type | Default |
 | --- | --- | --- | --- |
 | addonClassName | classname of content wrapper<br/>**provided after v1.16.0** | string |  |
-| addonId | id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly  **provided after v2.11.0**                                 | string            |       |
+| addonId | id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly  <br/>**provided after v2.11.0**                                 | string            |       |
 | addonStyle | inline style of content wrapper<br/>**provided after v1.16.0** | object |  |
 | aria-label      | Label of Radio                                                            | string           | -  |
 | name         | The `name` attribute passed to `input[type="radio"]` in the Radio component, Radios with the same `name` belong to the same RadioGroup,The `name` attribute can refer to [MDN Radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/radio#value)   | string         | -  |
 | autoFocus | Automatically focus the form control when the page is loaded | boolean | false |
 | checked | Specify whether it is currently selected | boolean | false |
+| type | Set the type of radio, one of `default`, `button`, `card`, `pureCard` <br/>**This api is provided after v2.18.0**| string | `default` |
 | className | Class name | string |  |
 | defaultChecked | Checked by default | boolean | false |
 | disabled | Disable the radio | boolean | false |

content/input/radio/index.md

@@ -321,13 +321,14 @@ class App extends React.Component {
 
 | 属性           | 说明                                                                   | 类型              | 默认值  |
 |----------------|-----------------------------------------------------------------------|------------------|--------|
-| addonClassName | 包裹内容容器的样式类名  **v1.16.0 后提供**                                 | string            |       |
-| addonId | addon 节点 id，aria-labelledby 指向这个 id，若无设置会随机生成一个 id  **v2.11.0 后提供**                                 | string            |       |
-| addonStyle     | 包裹内容容器的内联样式  **v1.16.0 后提供**                                 | CSSProperties     |       |
+| addonClassName | 包裹内容容器的样式类名  <br/>**v1.16.0 后提供**                                 | string            |       |
+| addonId | addon 节点 id，aria-labelledby 指向这个 id，若无设置会随机生成一个 id  <br/>**v2.11.0 后提供**                                 | string            |       |
+| addonStyle     | 包裹内容容器的内联样式  <br/>**v1.16.0 后提供**                                 | CSSProperties     |       |
 | aria-label      | Radio 的 label                                                            | string           | -  |
 | name         | Radio组件中`input[type="radio"]`的`name`属性，具有相同`name`的Radio属于同一个RadioGroup，`name`属性可参考[MDN Radio](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio#%E5%80%BC)                              | string         | -  |
 | autoFocus      | 自动获取焦点                                                            | boolean           | false  |
 | checked        | 指定当前是否选中                                                         | boolean           | false  |
+|type            |设置 radio的样式类型，可选值为：`default`、`button`、`card`、`pureCard` <br/>**该 api 在 v2.18.0 后提供**    |string|`default`|
 | className      | 样式类名                                                                | string            |        |
 | defaultChecked | 初始是否选中                                                             | boolean           | false  |
 | disabled       | 禁选单选框                                                              |boolean            | false    |

content/navigation/tree/index-en-US.md

@@ -2192,9 +2192,10 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | width | Width | number\|string | '100%' |
 
 ### Methods
-|Name | Description | Type 
-|----|----|----|
-| search | Trigger search manually | (value: string) => void |
+|Name | Description | Type | Version |
+|----|----|----|----|
+| search | Trigger search manually | (value: string) => void |-|
+| scrollTo | In a virtualized Tree, make the specified node(Which is an expanded node in the tree) scroll to view | （{key: string; align?: 'center' \| 'start' \| 'end' \| 'smart' \| 'auto';}) => void | 2.18.0|
 
 
 ## Accessibility

content/navigation/tree/index.md

@@ -2187,10 +2187,10 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 
 ### Methods
 
-|名称 | 描述 | 类型
-|----|----|----|
-| search | 手动触发搜索 | (value: string) => void |
-
+|名称 | 描述 | 类型 | 版本  |
+|----|----|----|----|
+| search | 手动触发搜索 | (value: string) => void |-|
+| scrollTo | 在虚拟化 Tree 中，使得指定节点（该节点为当前树的已展开节点）滚动到视图 | （{key: string; align?: 'center' \| 'start' \| 'end' \| 'smart' \| 'auto';}) => void | 2.18.0 |
 ## Accessibility
 
 ### ARIA

content/show/calendar/index-en-US.md

@@ -55,6 +55,37 @@ import { Calendar } from '@douyinfe/semi-ui';
 );
 ```
 
+### Set week start day
+The day of the week can be set as the first day of the week through weekStartsOn, 0 for Sunday, 1 for Monday, and so on. Default is Sunday.  
+`weekStartsOn` is available since v2.18, and takes effect for month view and week view.
+
+```jsx live=true dir="column"
+import React, { useState } from 'react';
+import { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui';
+
+() => {
+    const [v, setV] = useState(0);
+    return (
+        <div>
+            <RadioGroup defaultValue={v} aria-label="StartOfWeek" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
+                <Radio value={0}>Sunday</Radio>
+                <Radio value={1}>Mon</Radio>
+                <Radio value={2}>Tue</Radio>
+                <Radio value={3}>Wed</Radio>
+                <Radio value={4}>Thu</Radio>
+                <Radio value={5}>Fri</Radio>
+                <Radio value={6}>Sat</Radio>
+            </RadioGroup>
+            <Calendar
+                mode="month"
+                weekStartsOn={v}
+            ></Calendar>
+        </div>
+    );
+};
+```
+
+
 ### Range Mode
 **>=1.5.0**  
 Range Mode. `range` is required which is a left-closed and right-open interval. 
@@ -302,6 +333,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 | scrollTop    | Scroll height for displayed content in day and week mode                                               | number                | 400          |
 | showCurrTime | Toggle whether to show red line of current time                                                        | boolean               | true         |
 | width        | Width                                                                                                  | string\|number        | -            |
+| weekStartsOn | Take the day of the week as the first day of the week, 0 for Sunday, 1 for Monday, and so on. Support after v2.18 | number | 0 |
 
 
 ### Event Object

content/show/calendar/index.md

@@ -49,6 +49,35 @@ import { Calendar } from '@douyinfe/semi-ui';
 () => <Calendar mode="month"></Calendar>;
 ```
 
+### 设置周起始日
+可以通过 weekStartsOn 设置周几作为每周第一天，0 代表周日，1 代表周一，以此类推。默认为周日。weekStartsOn 自 v2.18 起提供，对月视图、周视图生效。
+```jsx live=true dir="column"
+import React, { useState } from 'react';
+import { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui';
+
+() => {
+    const [v, setV] = useState(0);
+    return (
+        <div>
+            <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
+                <Radio value={0}>周日</Radio>
+                <Radio value={1}>周一</Radio>
+                <Radio value={2}>周二</Radio>
+                <Radio value={3}>周三</Radio>
+                <Radio value={4}>周四</Radio>
+                <Radio value={5}>周五</Radio>
+                <Radio value={6}>周六</Radio>
+            </RadioGroup>
+            <Calendar
+                style={{ marginTop: 20 }}
+                mode="month"
+                weekStartsOn={v}
+            ></Calendar>
+        </div>
+    );
+};
+```
+
 ### 多日视图
 
 **>=1.5.0**  
@@ -61,6 +90,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 () => <Calendar mode="range" range={[new Date(2020, 8, 26), new Date(2020, 8, 31)]} />;
 ```
 
+
 ### 事件渲染用法
 
 通过 `events` 传入需要渲染的事件，`events` 是一个由 event objects 组成的数组，具体形式请参考 events API。
@@ -278,6 +308,7 @@ import { Calendar } from '@douyinfe/semi-ui';
 | scrollTop | 日视图和周视图模式下，设置展示内容默认的滚动高度 | number | 400 |
 | showCurrTime | 显示当前时间 | boolean | true |
 | width | 日历宽度 | string\|number | - |
+| weekStartsOn | 以周几作为每周第一天，0 代表周日，1 代表周一，以此类推。v2.18后支持 | number | 0 |
 
 ### Event Object
 

content/show/tag/index-en-US.md

@@ -225,6 +225,64 @@ import { TagGroup } from '@douyinfe/semi-ui';
 };
 ```
 
+If the tags in the TagGroup can be deleted, the user needs to process the `tagList` passed to the TagGroup in `onTagClose`
+
+```jsx live=true
+import React from 'react';
+import { TagGroup } from '@douyinfe/semi-ui';
+
+class TagGroupCloseableDemo extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            tagList: [
+                { tagKey: '1', color: 'white', children: '抖音', closable: true, },
+                { tagKey: '2', color: 'white', children: '火山小视频', closable: true, },
+                { tagKey: '3', color: 'white', children: '剪映', closable: true, },
+                { tagKey: '4', color: 'white', children: '皮皮虾', closable: true, },
+                { tagKey: '5', color: 'white', children: '懂车帝', closable: true, },
+            ]
+        };
+        this.tagListClick = this.tagListClick.bind(this);
+    }
+
+    tagListClick(value, e, tagKey){
+        const newTagList = [...this.state.tagList];
+        const closeTagIndex = newTagList.findIndex(t => t.tagKey === tagKey);
+        newTagList.splice(closeTagIndex, 1);
+        this.setState({
+          tagList: newTagList,
+        });
+    }
+
+    render() {
+        return (
+            <div style={ {
+                backgroundColor: 'var(--semi-color-fill-0)',
+                height: 35,
+                width: 300,
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0 10px',
+                marginBottom: 30,
+            }}>
+                <TagGroup
+                    maxTagCount={3}
+                    style={ {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: 350,
+                    }}
+                    tagList={this.state.tagList}
+                    size='large'
+                    onTagClose={this.tagListClick}
+                />
+            </div>
+        );
+    }
+}
+```
+
 ## API Reference
 
 ### Tag
@@ -240,8 +298,10 @@ import { TagGroup } from '@douyinfe/semi-ui';
 | style | Inline style | object |  |  |
 | type | Style type, one of `ghost`, `solid`, `light` | string | `light` |  |
 | visible | Toggle the visibility of the tag | boolean | true |  |
+| tagKey  | The key required by React, as the unique identifier of each tag, does not allow repetition | string | number | |
 | onClick | Callback function when clicking the tag | (e: MouseEvent) => void | - |  |
-| onClose | Callback function when the tag is closed | (tagChildren: ReactNode, e: MouseEvent) => void | - |  |
+| onClose | Callback function when the tag is closed | (tagChildren: ReactNode, e: MouseEvent, tagKey: string \| number ) => void | - | e is available in v1.18, tagKey is available in v2.18.0 |
+
 ### TagGroup
 
 | Properties | Instructions | type | Default | Version |
@@ -254,6 +314,7 @@ import { TagGroup } from '@douyinfe/semi-ui';
 | size | Size, one of `small`, `large` | string | `small` |  |
 | style | Inline style | CSSProperties |  |  |
 | tagList | Label Group data | (TagProps)[] |  |  |
+| onTagClose | The callback function when deleting the Tag in the TagGroup | (tagChildren: ReactNode, e: MouseEvent, tagKey: string \| number ) => void | - |  2.18.0 |
 
 ## Accessibility
 
@@ -264,10 +325,10 @@ import { TagGroup } from '@douyinfe/semi-ui';
 ### Keyboard and Focus
 
 - If the current `Tag` is interactive, then this `Tag` can be focused. Such as:
-   - When the `onClick` attribute is used, the keyboard user can activate this `Tag` with the `Enter` keys
-   - When the `closable` property is `true`, keyboard users can delete this `Tag` by pressing the `Delete` key
-   - When a `Tag` is focused, keyboard users can use the `Esc` key to defocus the currently focused `Tag`
-   
+  - When the `onClick` attribute is used, the keyboard user can activate this `Tag` with the `Enter` keys
+  - When the `closable` property is `true`, keyboard users can delete this `Tag` by pressing the `Delete` key
+  - When a `Tag` is focused, keyboard users can use the `Esc` key to defocus the currently focused `Tag`
+
 ## Design Tokens
 
 <DesignToken/>

content/show/tag/index.md

@@ -16,11 +16,10 @@ brief: 标签是图形化标记界面上的元素的组件，达到快速识别
 import { Tag, TagGroup } from '@douyinfe/semi-ui';
 ```
 
-
 ### 基本用法
 
 基本标签用法，将内容使用 `<Tag>` 标签包裹即可。  
-可以通过添加 `closable` 属性将其变为可关闭标签，此时点击x关闭会触发 onClose 事件，在 onClose 中阻止默认事件可以使其点击后依然显示不隐藏    
+可以通过添加 `closable` 属性将其变为可关闭标签，此时点击x关闭会触发 onClose 事件，在 onClose 中阻止默认事件可以使其点击后依然显示不隐藏
 
 ```jsx live=true
 import React from 'react';
@@ -131,7 +130,7 @@ import { Tag, Button } from '@douyinfe/semi-ui';
     return (
         <div>
             <Button onClick={toggleVisible}>{visible ? 'Hide Tag': 'Show Tag'}</Button>
-            <div style={{marginTop:10}}>
+            <div style={{ marginTop:10 }}>
                 <Tag visible={visible}>Invisible tag </Tag>
             </div>
         </div>
@@ -151,17 +150,17 @@ import { TagGroup } from '@douyinfe/semi-ui';
 
 () => {
     const tagList = [
-        { color: 'white', children:'抖音'},
-        { color: 'white', children:'火山小视频'},
-        { color: 'white', children:'剪映'},
-        { color: 'white', children:'皮皮虾'},
+        { color: 'white', children:'抖音' },
+        { color: 'white', children:'火山小视频' },
+        { color: 'white', children:'剪映' },
+        { color: 'white', children:'皮皮虾' },
     ];
     const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';
     const tagList2 = [
-        { color: 'white', children:'Douyin', avatarSrc:src},
-        { color: 'white', children:'Hotsoon', avatarSrc:src},
-        { color: 'white', children:'Capcut', avatarSrc:src},
-        { color: 'white', children:'Pipixia', avatarSrc:src},
+        { color: 'white', children:'Douyin', avatarSrc:src },
+        { color: 'white', children:'Hotsoon', avatarSrc:src },
+        { color: 'white', children:'Capcut', avatarSrc:src },
+        { color: 'white', children:'Pipixia', avatarSrc:src },
     ];
     const divStyle = {
         backgroundColor: 'var(--semi-color-fill-0)',
@@ -203,6 +202,64 @@ import { TagGroup } from '@douyinfe/semi-ui';
 
 ```
 
+如果 TagGroup 中的标签可删除，用户需要在 `onTagClose` 中处理传递给 TagGroup 的 `tagList`。
+
+```jsx live=true
+import React from 'react';
+import { TagGroup } from '@douyinfe/semi-ui';
+
+class TagGroupCloseableDemo extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            tagList: [
+                { tagKey: '1', color: 'white', children: '抖音', closable: true, },
+                { tagKey: '2', color: 'white', children: '火山小视频', closable: true, },
+                { tagKey: '3', color: 'white', children: '剪映', closable: true, },
+                { tagKey: '4', color: 'white', children: '皮皮虾', closable: true, },
+                { tagKey: '5', color: 'white', children: '懂车帝', closable: true, },
+            ]
+        };
+        this.tagListClick = this.tagListClick.bind(this);
+    }
+
+    tagListClick(value, e, tagKey){
+        const newTagList = [...this.state.tagList];
+        const closeTagIndex = newTagList.findIndex(t => t.tagKey === tagKey);
+        newTagList.splice(closeTagIndex, 1);
+        this.setState({
+          tagList: newTagList,
+        });
+    }
+
+    render() {
+        return (
+            <div style={ {
+                backgroundColor: 'var(--semi-color-fill-0)',
+                height: 35,
+                width: 300,
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0 10px',
+                marginBottom: 30,
+            }}>
+                <TagGroup
+                    maxTagCount={3}
+                    style={ {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: 350,
+                    }}
+                    tagList={this.state.tagList}
+                    size='large'
+                    onTagClose={this.tagListClick}
+                />
+            </div>
+        );
+    }
+}
+```
+
 ## API参考
 
 ### Tag
@@ -218,8 +275,9 @@ import { TagGroup } from '@douyinfe/semi-ui';
 | style | 样式 | CSSProperties |     | |
 | type  | 标签的样式类型，可选 `ghost`、 `solid`、 `light` | string  | `light`     | |
 | visible | 标签是否可见 | boolean | true    | |
+| tagKey  | React 需要的 key，作为每个标签的唯一标识，不允许重复 | string | number | |
 | onClick | 单击标签时的回调函数 | (e: MouseEvent) => void | 无   | |
-| onClose | 关闭标签时的回调函数 | (tagChildren: ReactNode, e: MouseEvent) => void | 无    | e于v1.18版本提供 |
+| onClose | 关闭标签时的回调函数 | (tagChildren: ReactNode, e: MouseEvent, tagKey: string \| number ) => void | 无    | e 于 v1.18 版本提供, tagKey 于 v2.18.0 提供 |
 
 ### TagGroup
 
@@ -233,6 +291,7 @@ import { TagGroup } from '@douyinfe/semi-ui';
 | size | 标签的尺寸，可选 `small`、 `large` | string | `small` | |
 | style | 样式 | CSSProperties |    | |
 | tagList | 标签组  | (TagProps)[] |     | |
+| onTagClose | 删除TagGroup中的Tag时候的回调函数 | (tagChildren: ReactNode, e: MouseEvent, tagKey: string \| number ) => void | - |  2.18.0 |
 
 ## Accessibility
 
@@ -243,10 +302,12 @@ import { TagGroup } from '@douyinfe/semi-ui';
 ### 键盘和焦点
 
 - 如果当前 `Tag` 可交互，那么这个 `Tag` 可被聚焦到。如：
-    - 使用了 `onClick` 属性时，键盘用户可以通过 `Enter` 键激活此 `Tag`
-    - `closable` 属性为 `true` 时，键盘用户可以通过 `Delete` 键删除此 `Tag`
-    - `Tag` 被聚焦时，键盘用户可以通过 `Esc` 键使当前聚焦 `Tag` 失焦
+  - 使用了 `onClick` 属性时，键盘用户可以通过 `Enter` 键激活此 `Tag`
+  - `closable` 属性为 `true` 时，键盘用户可以通过 `Delete` 键删除此 `Tag`
+  - `Tag` 被聚焦时，键盘用户可以通过 `Esc` 键使当前聚焦 `Tag` 失焦
+
 ## 设计变量
+
 <DesignToken/>
 
 <!-- ## 相关物料

content/start/changelog/index-en-US.md

@@ -16,18 +16,35 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
-#### 2.17.1 (2022-08-17)
+#### 🎉2.18.0-beta.0（2022-08-24）
+- 【Feat】
+    - Anchor、AutoComplete、Breadcrumb、Carousel、Cascader、Checkbox、DatePicker、Dropdown、Input、InputNumber、Navigation、Pagination、Radio、Rating、ScrollList、Select、SideSheet、Slider、Steps、Switch、Table、Tabs、TagInput、TimePicker、Transfer、Tree add animation token [#984](https://github.com/DouyinFE/semi-design/issues/984)
+    - Anchor add A11y focus adaptation  [#205](https://github.com/DouyinFE/semi-design/issues/205)
+    - Form Label add optional config，if true, will auto append optional mark after label text  [#869](https://github.com/DouyinFE/semi-design/issues/869)
+    - Calendar support weekStartsOn  [#1020](https://github.com/DouyinFE/semi-design/issues/1020)
+    - Tree adds support for scrollTo method in virtualization scenarios  [#1024](https://github.com/DouyinFE/semi-design/issues/1024)
+    - TagGroup adds onTagClose callback
+- 【Fix】
+    - Fix the issue that the Select check icon will flicker [@linjunc](https://github.com/linjunc)
+    - Fixed the problem that the quantity indicator does not change after TagGroup closable is closed [#945](https://github.com/DouyinFE/semi-design/issues/945) [@linjunc](https://github.com/linjunc)
+    - Fixed  the problem that centered Modal was blurry on a few 1080p monitors
+- 【Style】
+    - Table increases the click hot area of the sorting button (from the icon area only to the area containing the title and sorting, if the title is fully custom rendered, it will not be affected)[#1031](https://github.com/DouyinFE/semi-design/pull/1031)
+
+
+#### 🎉2.17.1 (2022-08-17)
 
 - 【Fix】
     - fixed Table filter affects original order of data [#1036](https://github.com/DouyinFE/semi-design/issues/1036)
+    - Fixed the issue that AutoComplete did not open the panel after the input value was changed after focusing by tab or autoFocus (effect version: v2.14 - 2.17)
 
-#### 2.17.0 (2022-08-12)
+#### 🎉2.17.0 (2022-08-12)
 
 - 【Fix】
-    - Fix: Fix the popover style issue caused by Chromium 104 breakchange fit-content css [#1022](https://github.com/DouyinFE/semi-design/issues/1022) [Chromium Issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1350958)
-    - Fix: fix AvatarGroup component size attribute has no default in TS define [@AnoyiX](https://github.com/AnoyiX)
-    - Fix: Fix TimePicker set to undefined is unresponsive [#918](https://github.com/DouyinFE/semi-design/issues/918) [@linjunc](https://github.com/linjunc)
-    - Fix: fix the problem that Tree's renderFullLabel uses checkbox
+    - Fix the popover style issue caused by Chromium 104 breakchange fit-content css [#1022](https://github.com/DouyinFE/semi-design/issues/1022) [Chromium Issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1350958)
+    - Fix AvatarGroup component size attribute has no default in TS define [@AnoyiX](https://github.com/AnoyiX)
+    - Fix TimePicker set to undefined is unresponsive [#918](https://github.com/DouyinFE/semi-design/issues/918) [@linjunc](https://github.com/linjunc)
+    - Fix the problem that Tree's renderFullLabel uses checkbox
 
 #### 🎉 2.17.0-beta.1 (2022-08-09)
 - 【Fix】

content/start/changelog/index.md

@@ -16,19 +16,35 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 ---
 
-#### 2.17.1 (2022-08-17)
+#### 🎉2.18.0-beta.0（2022-08-24）
+- 【Feat】
+    - Anchor、AutoComplete、Breadcrumb、Carousel、Cascader、Checkbox、DatePicker、Dropdown、Input、InputNumber、Navigation、Pagination、Radio、Rating、ScrollList、Select、SideSheet、Slider、Steps、Switch、Table、Tabs、TagInput、TimePicker、Transfer、Tree  26个组件增加动效相关设计变量 [#984](https://github.com/DouyinFE/semi-design/issues/984)
+    - Anchor 新增 A11y 焦点适配  [#205](https://github.com/DouyinFE/semi-design/issues/205)
+    - Form Label 增加 optional 配置项，打开时自动于 Label Text 后追加 （可选）文本标识  [#869](https://github.com/DouyinFE/semi-design/issues/869)
+    - Calendar 提供 weekStartsOn，设置周起始日  [#1020](https://github.com/DouyinFE/semi-design/issues/1020)
+    - Tree 增加支持虚拟化场景下的scrollTo方法  [#1024](https://github.com/DouyinFE/semi-design/issues/1024)
+    - TagGroup 增加 onTagClose 回调
+- 【Fix】
+    - 修复 Select 勾选 icon 会闪烁的问题 [@linjunc](https://github.com/linjunc)
+    - 修复 TagGroup closable 关闭后,  数量指示器不变的问题 [#945](https://github.com/DouyinFE/semi-design/issues/945) [@linjunc](https://github.com/linjunc)
+    - 修复 居中 Modal 在少数 1080p 显示器上文字模糊的问题
+- 【Style】
+    - Table 增大排序按钮的点击热区（由仅icon区扩大为包含title和sorting的区域，若title为完全自定义渲染，不受影响）[#1031](https://github.com/DouyinFE/semi-design/pull/1031)
+
+
+#### 🎉2.17.1 (2022-08-17)
 
 - 【Fix】
     - 修复 Table filter 影响数据原有排序问题 [#1036](https://github.com/DouyinFE/semi-design/issues/1036)
+    - 修复 AutoComplete 通过 tab 聚焦或者 autoFocus 聚焦后，输入值改变后不打开面板的问题 (影响范围 v2.14 - 2.17.0)
 
-
-#### 2.17.0 (2022-08-12)
+#### 🎉2.17.0 (2022-08-12)
 
 - 【Fix】
-  - Fix: 修复 Chromium 104 breakchange fit-content css 导致的 popover 样式问题 [#1022](https://github.com/DouyinFE/semi-design/issues/1022) [Chromium Issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1350958)
-  - Fix: 修复 AvatarGroup 组件中 size 属性在 TS 定义中没有值 default [@AnoyiX](https://github.com/AnoyiX)
-  - Fix: 修复 TimePicker 设置为 undefined 是无反应的问题 [#918](https://github.com/DouyinFE/semi-design/issues/918) [@linjunc](https://github.com/linjunc)
-  - Fix: 修复Tree的renderFullLabel使用checkbox出现的问题
+  - 修复 Chromium 104 breakchange fit-content css 导致的 popover、dropdown 样式问题 [#1022](https://github.com/DouyinFE/semi-design/issues/1022) [Chromium Issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1350958)
+  - 修复 AvatarGroup 组件中 size 属性在 TS 定义中没有值 default的问题 [@AnoyiX](https://github.com/AnoyiX)
+  - 修复 TimePicker 由有值变化为 undefined 时渲染未更新的问题 [#918](https://github.com/DouyinFE/semi-design/issues/918) [@linjunc](https://github.com/linjunc)
+  - 修复 Tree的renderFullLabel使用 checkbox 选择不中的问题 （影响范围 v2.15.0 - v2.16.1）
 
 #### 🎉 2.17.0-beta.1 (2022-08-09)
 - 【Fix】
@@ -39,7 +55,7 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 - 【Feat】
     - Select 新增 A11y 键盘和焦点适配  [#205](https://github.com/DouyinFE/semi-design/issues/205)
     - DatePicker 快捷选择面板支持方位选择 [#895](https://github.com/DouyinFE/semi-design/issues/895)
-    - TagInput 支持拖拽排序。
+    - TagInput 支持拖拽排序 [#707](https://github.com/DouyinFE/semi-design/issues/707)
     - Collapse.Panel 新增API disabled 和 showArrow  [#188](https://github.com/DouyinFE/semi-design/issues/188)
 - 【Fix】
     - 修复 Tooltip trigger 为 hover 时，点击children后再点击弹层，弹层会隐藏问题  [#977](https://github.com/DouyinFE/semi-design/issues/977)
@@ -49,7 +65,8 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
     - 修复在 Dropdown 中使用输入类组件，无法输入字母和数字问题
     - 修复 windows edge 浏览器 password input 默认 icon 的问题 [@linjunc](https://github.com/linjunc)
     - 修复点击 switch 边缘无法触发 change 的问题 [@linjunc](https://github.com/linjunc)
-    - 修正 handle 拼写错误的问题 [@linjunc](https://github.com/linjunc)
+- 【Chore】
+    - 更新 @douyinfe/semi-foundation 中部分 handle 函数名称拼写错误问题，对用户无影响 [@linjunc](https://github.com/linjunc)
 
 #### 🎉 2.16.0 (2022-07-29)
 - 【Fix】

content/start/customize-theme/index.md

@@ -52,6 +52,9 @@ new SemiWebpackPlugin({
     /* ...options */
 });
 ```
+
+更多工程化方案（如Vite、NextJs）的主题接入，可参考 [DSM 文档](https://semi.design/dsm_manual/zh-CN/web/use#dsm_%E5%A6%82%E4%BD%95%E6%B6%88%E8%B4%B9%E4%B8%BB%E9%A2%98)
+
 ### 使组件级变量的改动生效
 
 如果在定制主题的过程中你修改了组件级别的变量，`theme` 字段需要用如下配置使改动生效：

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.17.1"
+    "version": "2.18.0-beta.0"
 }

package.json

@@ -113,7 +113,6 @@
     "@babel/types": "^7.15.4",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^7.6.0",
-    "@cypress/code-coverage": "^3.9.12",
     "@octokit/rest": "^18.12.0",
     "@shopify/jest-dom-mocks": "^2.11.7",
     "@storybook/addon-a11y": "^6.4.10",
@@ -151,8 +150,6 @@
     "chromatic": "^6.0.6",
     "crypto": "^1.0.1",
     "css-loader": "^3.6.0",
-    "cypress": "9.5.2",
-    "cypress-plugin-tab": "^1.0.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
@@ -201,7 +198,10 @@
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2",
-    "webpackbar": "^5.0.0-3"
+    "webpackbar": "^5.0.0-3",
+    "cypress": "9.5.2",
+    "cypress-plugin-tab": "^1.0.5",
+    "@cypress/code-coverage": "^3.9.12"
   },
   "husky": {
     "hooks": {

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.17.1",
+  "version": "2.18.0-beta.0",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -27,14 +27,9 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
     "@douyinfe/semi-animation": "2.12.0",
-    "@douyinfe/semi-animation-styled": "2.17.1",
+    "@douyinfe/semi-animation-styled": "2.18.0-beta.0",
     "classnames": "^2.2.6"
   },
-  "peerDependencies": {
-    "prop-types": "15.7.2",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.1"
-  },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.15.8",
     "@babel/plugin-transform-runtime": "^7.15.8",

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.17.1",
+  "version": "2.18.0-beta.0",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.17.1",
+  "version": "2.18.0-beta.0",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-semi-design",
-  "version": "2.17.1",
+  "version": "2.18.0-beta.0",
   "description": "semi ui eslint plugin",
   "keywords": [
     "semi",

packages/semi-foundation/anchor/anchor.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-anchor;
 
@@ -17,6 +18,8 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
+        box-sizing: border-box;
+        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -64,6 +67,11 @@ $module: #{$prefix}-anchor;
     &-link {
         padding-left: $spacing-anchor_link-paddingLeft;
 
+        &-wrapper {
+            padding-right: $width-anchor-outline;
+            margin: $width-anchor-outline 0;
+        }
+
         &-title {
             cursor: pointer;
             color: $color-anchor_title-text-default;
@@ -72,7 +80,9 @@ $module: #{$prefix}-anchor;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
             &:hover {
                 color: $color-anchor_title-text-hover;
             }
@@ -81,6 +91,10 @@ $module: #{$prefix}-anchor;
                 color: $color-anchor_title-text-active;
             }
 
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+            }
+
             &-disabled {
                 color: $color-anchor_title-text-disabled;
                 cursor: not-allowed;

packages/semi-foundation/anchor/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-anchor_title-text: var(--semi-transition_duration-faster);//锚点标题文字-文字-动画持续时间
+$transition_function-anchor_title-text: var(--semi-transition_function-easeIn);//锚点标题文字-文字-过渡曲线
+$transition_delay-anchor_title-text: var(--semi-transition_delay-fastest);//锚点标题文字-文字-延迟时间
+
+//transform token
+$transform_scale-anchor_title-text: var(--semi-transform_scale-none);//锚点-放大

packages/semi-foundation/anchor/variables.scss

@@ -9,6 +9,8 @@ $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜
 $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
 $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
 
+$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
+
 // Spacing
 $spacing-anchor_slide-left: $spacing-none; // 滑轨左侧位置
 $spacing-anchor_slide-top: $spacing-none; // 滑轨顶部位置
@@ -24,4 +26,8 @@ $height-anchor_slide_default: 20px; // 选项高度 - 默认
 $height-anchor_slide_small: 16px; // 选项高度 - 小尺寸
 
 // Radius
-$radius-anchor_slide: 1px; // 滑轨圆角
+$radius-anchor_slide: 1px; // 滑轨圆角
+
+// Witdh
+$width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

packages/semi-foundation/autoComplete/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_function-autoComplete_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间

packages/semi-foundation/autoComplete/autoComplete.scss

@@ -1,5 +1,6 @@
 @import "./variables.scss";
-@import "../select/option.scss";
+@import "./animation.scss";
+@import "./option.scss";
 
 $module: #{$prefix}-autocomplete;
 

packages/semi-foundation/autoComplete/constants.ts

@@ -3,6 +3,9 @@ import { BASE_CLASS_PREFIX, VALIDATE_STATUS } from '../base/constants';
 
 const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-autocomplete`,
+    PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autoComplete-option`,
+    PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autoComplete-group`,
+    
 };
 
 const strings = {

packages/semi-foundation/autoComplete/option.scss

@@ -0,0 +1,93 @@
+$module: #{$prefix}-autoComplete;
+$filterable: #{$module}-filterable;
+
+.#{$module}-option {
+    @include font-size-regular;
+    word-break: break-all;
+    padding-left: $spacing-autoComplete_option-paddingLeft;
+    padding-right: $spacing-autoComplete_option-paddingRight;
+    padding-top: $spacing-autoComplete_option-paddingTop;
+    padding-bottom: $spacing-autoComplete_option-paddingBottom;
+    color: $color-autoComplete_option_main-text;
+    border-radius: $radius-autoComplete_option;
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: background-color $transition_duration-autoComplete_option-bg $transition_function-autoComplete_option-bg $transition_delay-autoComplete_option-bg;
+
+    &-icon {
+        width: $width-autoComplete_option_tick;
+        color: $color-autoComplete_option-icon-default;
+        visibility: hidden;
+        margin-right: $spacing-autoComplete_option_tick-marginRight;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+
+    &-text {
+        display: flex;
+        flex-wrap: wrap;
+        white-space: pre;
+    }
+
+    &-keyword {
+        color: $color-autoComplete_option_keyword-text;
+        background-color: inherit;
+        font-weight: $font-autoComplete_keyword-fontWeight;
+    }
+    // &:hover {
+    //     background-color: $color-autoComplete_option-bg-hover;
+    // }
+
+    &:active {
+        background-color: $color-autoComplete_option-bg-active;
+    }
+
+    &-empty {
+        cursor: not-allowed;
+        color: $color-autoComplete_option_disabled-text;
+        justify-content: center;
+
+        &:hover {
+            background-color: inherit;
+        }
+
+        &:active {
+            background-color: inherit;
+        }
+    }
+
+    &-disabled {
+        color: $color-autoComplete_option_disabled-text;
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: $color-autoComplete_option-bg-hover;
+        }
+    }
+
+    &-selected {
+        font-weight: $font-weight-bold;
+
+        .#{$module}-option-icon {
+            visibility: visible;
+            color: $color-autoComplete_option-icon-active;
+        }
+    }
+
+    &-focused {
+        background-color: $color-autoComplete_option-bg-hover;
+    }
+
+    &:first-of-type {
+        margin-top: $spacing-autoComplete_option_first-marginTop;
+    }
+
+    &:last-of-type {
+        margin-bottom: $spacing-autoComplete_option_last-marginBottom;
+    }
+}

packages/semi-foundation/autoComplete/optionFoundation.ts

@@ -0,0 +1,41 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+
+export interface BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | unknown;
+    children?: unknown;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: Record<string, any>;
+}
+export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
+    notifyClick(option: BasicOptionProps): void;
+}
+
+
+export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapter> {
+
+    constructor(adapter: OptionDefaultAdapter) {
+        super({ ...adapter });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    init() {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    destroy() {}
+
+    onOptionClick(option: BasicOptionProps) {
+        const isDisabled = this._isDisabled();
+        if (!isDisabled) {
+            this._adapter.notifyClick(option);
+        }
+    }
+
+    _isDisabled() {
+        return this.getProp('disabled');
+    }
+}

packages/semi-foundation/autoComplete/variables.scss

@@ -1,3 +1,50 @@
 // Spacing
 $spacing-autoComplete_loading_wrapper-paddingTop: $spacing-tight; //加载搜索结果时的顶部内边距
 $spacing-autoComplete_loading_wrapper-paddingBottom: $spacing-tight; //加载搜索结果时的底部内边距
+
+
+
+
+
+$color-autoComplete_option_keyword-text: var(--semi-color-primary); // 自动完成菜单选项匹配搜索结果文本颜色
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+$width-autoComplete_option_tick: $width-icon-small; // 自动完成菜单项选中对勾图标大小
+$spacing-autoComplete_option_tick-marginRight: $spacing-tight; // 自动完成菜单选中对勾右侧外边距
+
+$spacing-autoComplete_option-paddingLeft: $spacing-base-tight; // 自动完成菜单项左侧内边距
+$spacing-autoComplete_option-paddingRight: $spacing-base-tight; // 自动完成菜单项右侧内边距
+$spacing-autoComplete_option-paddingTop: $spacing-tight; // 自动完成菜单项顶部内边距
+$spacing-autoComplete_option-paddingBottom: $spacing-tight; // 自动完成菜单项底部内边距
+$spacing-autoComplete_option_first-marginTop: $spacing-extra-tight; // 自动完成第一个菜单项顶部外边距
+$spacing-autoComplete_option_last-marginBottom: $spacing-extra-tight; // 自动完成最后一个菜单项顶部外边距
+
+$spacing-autoComplete_option_list-paddingTop: 0px; // 自动完成内容区顶部内边距
+$spacing-autoComplete_option_list-paddingRight: 0px; // 自动完成内容区右侧内边距
+$spacing-autoComplete_option_list-paddingBottom: 0px; // 自动完成内容区底部内边距
+$spacing-autoComplete_option_list-paddingLeft: 0px; // 自动完成内容区左侧内边距
+
+$radius-autoComplete_option: 0px; // 自动完成待选项圆角
+
+$color-autoComplete_option_main-text: var(--semi-color-text-0); // 自动完成菜单选项文本颜色
+
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+
+$font-autoComplete-fontWeight: $font-weight-regular; // 自动完成文本字重
+$font-autoComplete_inset_label-fontWeight: 600; // 自动完成内嵌标签文本字重
+$font-autoComplete_keyword-fontWeight: 600; // 自动完成搜索结果命关键词中文本字重

packages/semi-foundation/avatar/avatar.scss

@@ -1,10 +1,9 @@
-@import "./variables.scss";
-@import "./mixin.scss";
+@import './variables.scss';
+@import './mixin.scss';
 
 $module: #{$prefix}-avatar;
-$colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink",
-    "purple", "red", "teal", "violet", "yellow";
-
+$colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
+    'purple', 'red', 'teal', 'violet', 'yellow';
 
 .#{$module} {
     position: relative;
@@ -211,4 +210,4 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/breadcrumb/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-faster);//面包屑文字-文字-动画持续时间
+$transition_function-breadcrumb_link-text: var(--semi-transition_function-easeIn);//面包屑文字-文字-过渡曲线
+$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-fastest);//面包屑文字-文字-延迟时间
+
+//transform token
+$transform_scale-breadcrumb_link-text: var(--semi-transform_scale-none);//面包屑文字-放大

packages/semi-foundation/breadcrumb/breadcrumb.scss

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/_font.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-breadcrumb;
 
@@ -24,7 +25,7 @@ $module: #{$prefix}-breadcrumb;
     &-item-wrap {
         display: inline-flex;
         align-items: center;
-        margin: $spacing-breadcrumb_item_wrap-marginY 0;
+        margin: $spacing-breadcrumb_item_wrap-marginY 0px;
         margin-right: $spacing-breadcrumb_item_wrap-marginRight;
     }
 
@@ -88,6 +89,8 @@ $module: #{$prefix}-breadcrumb;
         align-items: center;
         column-gap: 4px;
         text-decoration: inherit;
+        transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
+        transform: scale($transform_scale-breadcrumb_link-text);
 
         &:hover {
             color: $color-breadcrumb_default-text-hover;

packages/semi-foundation/button/animation.scss

@@ -0,0 +1,67 @@
+$transition_duration-button_primary-bg: var(--semi-transition_duration-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_duration-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_duration-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_duration-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_duration-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_duration-faster);//危险按钮-背景色-动画持续时间
+$transition_function-button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
+$transition_delay-button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
+
+
+$transition_duration-button_borderless-bg: var(--semi-transition_duration-faster);//无边框按钮-背景色-动画持续时间
+$transition_function-button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
+$transition_delay-button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
+
+$transition_duration-button_primary-border: var(--semi-transition_duration-faster);//主要按钮-边框-动画持续时间
+$transition_function-button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
+$transition_delay-button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
+
+$transition_duration-button_secondary-border: var(--semi-transition_duration-faster);//次要按钮-边框-动画持续时间
+$transition_function-button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
+$transition_delay-button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
+
+$transition_duration-button_tertiary-border: var(--semi-transition_duration-faster);//三级按钮-边框-动画持续时间
+$transition_function-button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
+$transition_delay-button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
+
+$transition_duration-button_light-border: var(--semi-transition_duration-faster);//浅色按钮-边框-动画持续时间
+$transition_function-button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
+$transition_delay-button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
+
+$transition_duration-button_warning-border: var(--semi-transition_duration-faster);//警告按钮-边框-动画持续时间
+$transition_function-button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
+$transition_delay-button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
+
+$transition_duration-button_danger-border: var(--semi-transition_duration-faster);//危险按钮-边框-动画持续时间
+$transition_function-button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
+$transition_delay-button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
+
+//transform token
+
+$transform_scale-button_primary: var(--semi-transform_scale-none);//主要按钮-放大
+$transform_scale-button_secondary: var(--semi-transform_scale-none);//次要按钮-放大
+$transform_scale-button_tertiary: var(--semi-transform_scale-none);//三级按钮-放大
+$transform_scale-button_light: var(--semi-transform_scale-none);//浅色按钮-放大
+$transform_scale-button_warning: var(--semi-transform_scale-none);//警告按钮-放大
+$transform_scale-button_danger: var(--semi-transform_scale-none);//危险按钮-放大
+$transform_scale-button_borderless: var(--semi-transform_scale-none);//无边框按钮-放大

packages/semi-foundation/button/button.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './animation.scss';
 @import './splitButtonGroup.scss';
 
 $module: #{$prefix}-button;
@@ -39,6 +40,11 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
+      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+      transform: scale($transform-scale-button_danger);
+
+
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
@@ -56,6 +62,10 @@ $module: #{$prefix}-button;
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
+      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+      transform:scale($transform_scale-button_warning);
+
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
@@ -73,6 +83,10 @@ $module: #{$prefix}-button;
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
+      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+      transform:scale($transform_scale_button_tertiary);
+
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
@@ -87,6 +101,10 @@ $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,
+        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
+      transform:scale($transform_scale-button_primary);
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -103,6 +121,10 @@ $module: #{$prefix}-button;
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
+      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+      transform:scale($transform_scale-button_secondary);
+
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
@@ -132,6 +154,9 @@ $module: #{$prefix}-button;
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
+      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+      transform:scale($transform_scale-button_borderless);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
@@ -145,6 +170,10 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
+      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
+      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+      transform:scale($transform_scale-button_light);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;

packages/semi-foundation/calendar/eventUtil.ts

@@ -16,7 +16,7 @@ import {
     endOfDay,
     startOfDay,
     toDate,
-    Locale
+    Locale,
 } from 'date-fns';
 import { EventObject, ParsedRangeEvent } from './foundation';
 
@@ -96,6 +96,8 @@ export interface DateObj {
     month: string;
 }
 
+export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
 export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
@@ -125,8 +127,8 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export const calcWeekData = (value: Date, mode = 'week', locale: Locale) => {
-    const start = startOfWeek(value);
+export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+    const start = startOfWeek(value, { weekStartsOn });
     return calcRangeData(value, start, 7, mode, locale);
 };
 

packages/semi-foundation/calendar/foundation.ts

@@ -31,10 +31,12 @@ import {
     filterEvents,
     parseRangeAllDayEvent,
     DateObj,
-    checkWeekend
+    checkWeekend,
+    weeekStartsOnEnum
 } from './eventUtil';
 
 
+export { weeekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;
@@ -189,7 +191,8 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
     getWeeklyData(value: Date, dateFnsLocale: Locale) {
         const data = {} as WeeklyData;
         data.month = format(value, 'LLL', { locale: dateFnsLocale });
-        data.week = calcWeekData(value, 'week', dateFnsLocale);
+        const { weekStartsOn } = this.getProps();
+        data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
     }
@@ -207,9 +210,10 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
     getMonthlyData(value: Date, dateFnsLocale: Locale) {
         const monthStart = startOfMonth(value);
         const data = {} as MonthData;
+        const { weekStartsOn } = this.getProps();
         const numberOfWeek = getWeeksInMonth(value);
         [...Array(numberOfWeek).keys()].map(ind => {
-            data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale);
+            data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
         });
         this._adapter.setMonthlyData(data);
         return data;

packages/semi-foundation/carousel/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-fastest); // 指示器-背景色-动画持续时间
+$transition_function_carousel_indicator-bg: var(--semi-transition_function-easeOut); // 指示器-背景色-过渡曲线
+$transition_delay_carousel_indicator-bg: var(--semi-transition_delay-none); // 指示器-背景色-延迟时间
+
+$transition_duration_carousel_arrow-bg: var(--semi-transition_delay-fastest); // 箭头-背景色-动画持续时间
+$transition_funciton_carousel_arrow-bg: var(--semi-transition_function-easeOut); // 箭头-背景色-过渡曲线
+$transition_delay_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-延迟时间

packages/semi-foundation/carousel/carousel.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-carousel;
 
@@ -23,22 +24,20 @@ $module: #{$prefix}-carousel;
             &-current {
                 z-index: 1;
             }
-
         }
 
         &-fade {
-            
             > * {
                 opacity: 0;
             }
-    
+
             .#{$module}-content-item-current {
                 opacity: 1;
             }
         }
 
         &-slide {
-            &>*:not(.#{$module}-content-item-current) {
+            & > *:not(.#{$module}-content-item-current) {
                 visibility: hidden;
             }
 
@@ -46,21 +45,20 @@ $module: #{$prefix}-carousel;
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
             }
-        
+
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
             }
-          
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
-                animation: #{$module}-content-item-keyframe-slide-out-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-out-reverse;
             }
-    
+
             .#{$module}-content-item-slide-in {
-                animation: #{$module}-content-item-keyframe-slide-in-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-in-reverse;
             }
         }
     }
@@ -89,7 +87,6 @@ $module: #{$prefix}-carousel;
             bottom: $spacing-carousel_indicator-padding;
         }
 
-    
         &-dot {
             .#{$module}-indicator-item {
                 border-radius: $radius-carousel_indicator_dot;
@@ -102,7 +99,6 @@ $module: #{$prefix}-carousel;
                 &-small {
                     width: $width-carousel_indicator_dot_small;
                     height: $width-carousel_indicator_dot_small;
-                   
                 }
 
                 &-medium {
@@ -112,6 +108,8 @@ $module: #{$prefix}-carousel;
 
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
@@ -127,8 +125,9 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_light-bg-active;
@@ -145,6 +144,8 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background-color: $color-carousel_indicator_theme_dark-bg-active;
@@ -159,14 +160,13 @@ $module: #{$prefix}-carousel;
                     }
                 }
             }
-
         }
 
         &-line {
             width: $width-carousel_indicator_line;
 
             .#{$module}-indicator-item {
-                flex: 1; 
+                flex: 1;
                 cursor: pointer;
 
                 &:not(:last-child) {
@@ -175,7 +175,6 @@ $module: #{$prefix}-carousel;
 
                 &-small {
                     height: $height-carousel_indicator_line_small;
-                   
                 }
 
                 &-medium {
@@ -199,7 +198,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -216,7 +214,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-dark {
-
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -231,15 +228,13 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
 
         &-columnar {
             .#{$module}-indicator-item {
                 cursor: pointer;
-                
+
                 &:not(:last-child) {
                     margin-right: $spacing-carousel_indicator_columnar-marginX;
                 }
@@ -262,11 +257,9 @@ $module: #{$prefix}-carousel;
                     }
                 }
 
-
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
 
-
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
                     }
@@ -298,7 +291,7 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
-                    
+
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
@@ -311,9 +304,7 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
     }
 
@@ -340,15 +331,18 @@ $module: #{$prefix}-carousel;
 
         &-light {
             color: $color-carousel_arrow_theme_light-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_light-bg-hover;
             }
         }
 
-
         &-primary {
             color: $color-carousel_arrow_theme_primary-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_primary-bg-hover;
@@ -357,20 +351,20 @@ $module: #{$prefix}-carousel;
 
         &-dark {
             color: $color-carousel_arrow_theme_dark-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_dark-bg-hover;
             }
         }
-
     }
 
     &-arrow-hover div {
         z-index: 2;
         opacity: 0;
-        transition: all .3s;
     }
-    
+
     &:hover {
         .#{$module}-arrow-hover div {
             opacity: 1;
@@ -379,47 +373,43 @@ $module: #{$prefix}-carousel;
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in {
-
     from {
         transform: translateX(100%);
     }
-    
+
     to {
         transform: translateX(0);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-out {
-
     from {
         transform: translateX(0);
     }
-    
+
     to {
         transform: translateX(-100%);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in-reverse {
-
     from {
         transform: translateX(-100%);
     }
-  
+
     to {
         transform: translateX(0);
     }
 }
-  
-@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
 
+@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
     from {
         transform: translateX(0);
     }
-  
+
     to {
         transform: translateX(100%);
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/carousel/foundation.ts

@@ -38,7 +38,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(activeIndex);
         this._adapter.setIsReverse(stateActiveIndex > targetIndex);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -50,7 +50,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex + 1);
         this._adapter.setIsReverse(false);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -62,7 +62,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex - 1);
         this._adapter.setIsReverse(true);
-        if (this.getIsControledComponent()) {
+        if (this.getIsControlledComponent()) {
             this._notifyChange(targetIndex);
         } else {
             this._notifyChange(targetIndex);
@@ -110,7 +110,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         return speed;
     }
 
-    getIsControledComponent(): boolean {
+    getIsControlledComponent(): boolean {
         return this._isInProps('activeIndex');
     }
 
@@ -135,7 +135,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const { activeIndex: stateActiveIndex } = this.getStates();
         this._adapter.setIsReverse(stateActiveIndex > activeIndex);
         this._notifyChange(activeIndex);
-        if (!this.getIsControledComponent()) {
+        if (!this.getIsControlledComponent()) {
             this.handleNewActiveIndex(activeIndex);
         }
     }

packages/semi-foundation/cascader/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-cascader_option-bg: var(--semi-transition_duration-faster);//级联选项-背景色-动画持续时间
+$transition_function-cascader_option-bg: var(--semi-transition_function-easeIn);//级联选项-背景色-过渡曲线
+$transition_delay-cascader_option-bg: var(--semi-transition_delay-fastest);//级联选项-背景色-延迟时间
+

packages/semi-foundation/cascader/cascader.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-cascader;
 
@@ -380,6 +381,7 @@ $module: #{$prefix}-cascader;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
+        transition: background-color $transition_duration-cascader_option-bg $transition_function-cascader_option-bg $transition_delay-cascader_option-bg;
 
         @include font-size-regular;
         min-width: min-content;

packages/semi-foundation/checkbox/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-checkbox-bg: var(--semi-transition_duration-faster);//复选框-背景色-动画持续时间
+$transition_function-checkbox-bg: var(--semi-transition_function-easeIn);//复选框-背景色-过渡曲线
+$transition_delay-checkbox-bg: var(--semi-transition_delay-fastest);//复选框-背景色-延迟时间
+
+$transition_duration-checkbox-border: var(--semi-transition_duration-faster);//复选框-边框-动画持续时间
+$transition_function-checkbox-border: var(--semi-transition_function-easeIn);//复选框-边框-过渡曲线
+$transition_delay-checkbox-border: var(--semi-transition_delay-fastest);//复选框-边框-延迟时间
+
+// transform token
+$transform_scale-checkbox: var(--semi-transform_scale-none);//复选框-放大

packages/semi-foundation/checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/mixin.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./mixin.scss";
 
 $module: #{$prefix}-checkbox;
@@ -14,6 +15,9 @@ $module: #{$prefix}-checkbox;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
+    transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+    border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
+    transform: scale($transform_scale-checkbox);
 
     input[type="checkbox"] {
         position: absolute;
@@ -93,6 +97,8 @@ $module: #{$prefix}-checkbox;
             height: $width-checkbox_inner;
             margin: 0;
             background: $color-checkbox_default-bg-default;
+            transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+                border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
 
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-default;
             border-radius: $radius-checkbox_inner;
@@ -112,7 +118,7 @@ $module: #{$prefix}-checkbox;
             border-radius: $radius-checkbox_inner;
         }
 
-        & > .#{$module}-addon {
+        &>.#{$module}-addon {
             color: $color-checkbox_label-text-default;
         }
     }
@@ -178,11 +184,14 @@ $module: #{$prefix}-checkbox;
         background: transparent;
         border: $width-checkbox_cardType_checked-border solid transparent;
 
+
         .#{$module}-inner {
             position: relative;
+
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
+
             margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
@@ -232,6 +241,7 @@ $module: #{$prefix}-checkbox;
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
                 border-color: $color-checkbox_cardType_checked_border-hover;
+
                 .#{$module}-inner-checked .#{$module}-inner-display {
                     box-shadow: none;
                 }
@@ -247,12 +257,13 @@ $module: #{$prefix}-checkbox;
             &:active {
                 background: transparent;
             }
+
             &:hover {
                 background: transparent;
             }
         }
 
-        &_checked_disabled.#{$module}-cardType  {
+        &_checked_disabled.#{$module}-cardType {
             background: $color-checkbox_cardType_checked_disabled-bg;
             border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
 
@@ -355,7 +366,7 @@ $module: #{$prefix}-checkbox;
 
     &-focus {
         outline: $width-checkbox-outline solid $color-checkbox_primary-outline-focus;
-        
+
         &-border {
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
         }
@@ -366,6 +377,7 @@ $module: #{$prefix}-checkbox;
     @include font-size-regular;
     // make sure group height 32px
     line-height: $font-size-regular;
+
     .#{$module} {
         &.#{$module}-vertical {
             margin-bottom: $spacing-checkbox_group_vertical-marginBottom;
@@ -376,6 +388,7 @@ $module: #{$prefix}-checkbox;
         .#{$module} {
             margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
+
             &:last-of-type {
                 margin-right: 0;
             }
@@ -385,10 +398,12 @@ $module: #{$prefix}-checkbox;
     &-vertical {
         .#{$module} {
             margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+
             &:last-of-type {
                 margin-bottom: 0;
             }
         }
+
         &-cardType {
             .#{$module} {
                 margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
@@ -397,4 +412,4 @@ $module: #{$prefix}-checkbox;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

packages/semi-foundation/datePicker/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-datepicker_date-bg: var(--semi-transition_duration-faster);//时间选择器-格子背景色-动画持续时间
+$transition_function-datepicker_date-bg: var(--semi-transition_function-easeIn);//时间选择器-格子背景色-过渡曲线
+$transition_delay-datepicker_date-bg: var(--semi-transition_delay-fastest);//时间选择器-格子背景色-延迟时间
+

packages/semi-foundation/dropdown/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-dropdown_item-bg: var(--semi-transition_duration-fastest); // 下拉菜单项-背景颜色-动画持续时间
+$transition_function-dropdown_item-bg: var(--semi-transition_function-easeOut); // 下拉菜单项-背景颜色-过渡曲线
+$transition_delay-dropdown_item-bg: 0ms; // 下拉菜单项-背景颜色-延迟时间

packages/semi-foundation/dropdown/dropdown.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-dropdown;
 
@@ -43,6 +44,9 @@ $module: #{$prefix}-dropdown;
         max-width: $width-dropdown;
         display: flex;
         align-items: center;
+        transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
+            $transition_delay-dropdown_item-bg;
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;
@@ -107,4 +111,4 @@ $module: #{$prefix}-dropdown;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

packages/semi-foundation/form/form.scss

@@ -109,14 +109,15 @@ $rating: #{$prefix}-rating;
                     font-weight: $font-form_requiredMark-fontWeight;
                 }
             }
-            // .#{$field}-label-extra {
-            // }
-
             &-disabled {
                 color: $color-form_requiredMark_disabled-text-default;
             }
         }
 
+        &-optional-text {
+            color: $color-form_label_optional-text-default;
+        }
+
         &-left {
             text-align: left;
         }

packages/semi-foundation/form/variables.scss

@@ -32,6 +32,7 @@ $font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
 $font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
 
 $color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
+$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单可选标记文字颜色
 $color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
 
 $color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色

packages/semi-foundation/gulpfile.js

@@ -39,10 +39,12 @@ const excludeScss = [
     '!**/steps/fillSteps.scss',
     '!**/steps/navSteps.scss',
     '!**/table/operationPanel.scss',
-    '!**/tooltip/arrow.scss'
+    '!**/tooltip/arrow.scss',
+    '!**/autoComplete/option.scss',
+    '!**/select/option.scss',
 ];
 gulp.task('compileScss', function compileScss() {
-    return gulp.src(['**/*.scss', '!node_modules/**/*.*', '!**/rtl.scss', '!**/variables.scss', ...excludeScss])
+    return gulp.src(['**/*.scss', '!node_modules/**/*.*', '!**/rtl.scss', '!**/variables.scss', "!**/animation.scss", ...excludeScss])
         .pipe(through2.obj(
             function (chunk, enc, cb) {
                 const rootPath = path.join(__dirname, '../../');

packages/semi-foundation/input/animation.scss

@@ -0,0 +1,14 @@
+$transition_duration-input-bg: var(--semi-transition_duration-faster);//输入框-背景色-动画持续时间
+$transition_function-input-bg: var(--semi-transition_function-easeIn);//输入框-背景色-过渡曲线
+$transition_delay-input-bg: var(--semi-transition_delay-fastest);//输入框-背景色-延迟时间
+
+$transition_duration-input-border: var(--semi-transition_duration-faster);//输入框-边框-动画持续时间
+$transition_function-input-border: var(--semi-transition_function-easeIn);//输入框-边框-过渡曲线
+$transition_delay-input-border: var(--semi-transition_delay-fastest);//输入框-边框-延迟时间
+
+$transition_duration-input-text: var(--semi-transition_duration-faster);//输入框-文字或图标-动画持续时间
+$transition_function-input-text: var(--semi-transition_function-easeIn);//输入框-文字或图标-过渡曲线
+$transition_delay-input-text: var(--semi-transition_delay-fastest);//输入框-文字或图标-延迟时间
+
+// transform token
+$transform_scale-input: var(--semi-transform_scale-none);//输入框-变大

packages/semi-foundation/input/input.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -23,6 +24,12 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}{
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+    transform: scale($transform_scale-input);
+}
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -40,6 +47,11 @@ $module: #{$prefix}-input;
     box-sizing: border-box;
     color: $color-input_default-text-default;
 
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+
+    transform: scale($transform_scale-input);
+
     &-default {
         height: $height-input_wrapper_default;
         @include font-size-regular;

packages/semi-foundation/input/textarea.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -12,6 +13,8 @@ $module: #{$prefix}-input;
     border-radius: $radius-input_wrapper;
     vertical-align: bottom;
     background-color: $color-input_default-bg-default;
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
     &:hover {
         background-color: $color-input_default-bg-hover;

packages/semi-foundation/inputNumber/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-inputNumber-bg: var(--semi-transition_duration-faster);//数字输入框-背景色-动画持续时间
+$transition_function-inputNumber-bg: var(--semi-transition_function-easeIn);//数字输入框-背景色-过渡曲线
+$transition_delay-inputNumber-bg: var(--semi-transition_delay-fastest);//数字输入框-背景色-延迟时间
+
+$transition_duration-inputNumber-border: var(--semi-transition_duration-faster);//数字输入框-边框-动画持续时间
+$transition_function-inputNumber-border: var(--semi-transition_function-easeIn);//数字输入框-边框-过渡曲线
+$transition_delay-inputNumber-border: var(--semi-transition_delay-fastest);//数字输入框-边框-延迟时间
+
+// transform token
+$transform_scale-inputNumber: var(--semi-transform_scale-none);//数字输入框-变大

packages/semi-foundation/inputNumber/inputNumber.scss

@@ -1,3 +1,4 @@
+@import "./animation.scss";
 @import '../input/variables.scss';
 @import './variables.scss';
 
@@ -7,6 +8,9 @@ $module: #{$prefix}-input-number;
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
+    transition: background-color $transition_duration-inputNumber-bg $transition_function-inputNumber-bg $transition_delay-inputNumber-bg,
+    border $transition_duration-inputNumber-border $transition_function-inputNumber-border $transition_delay-inputNumber-border;
+    transform: scale($transform_scale-inputNumber);
 
     &-suffix-btns {
         display: inline-flex;

packages/semi-foundation/modal/modal.scss

@@ -42,6 +42,10 @@ $module: #{$prefix}-modal;
         z-index: $z-modal;
         -webkit-overflow-scrolling: touch;
         outline: 0;
+        &-center{
+            display: flex;
+            align-items: center;
+        }
     }
     
     &-title {

packages/semi-foundation/navigation/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-navigation_itemL1-bg: var(--semi-transition_duration-faster);//导航一级菜单-背景色-动画持续时间
+$transition_function-navigation_itemL1-bg: var(--semi-transition_function-easeIn);//导航一级菜单-背景色-过渡曲线
+$transition_delay-navigation_itemL1-bg: var(--semi-transition_delay-fastest);//导航一级菜单-背景色-延迟时间
+

packages/semi-foundation/navigation/navigation.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
 @import "./mixin.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-navigation;
 
@@ -82,6 +83,8 @@ $module: #{$prefix}-navigation;
         color: $color-navigation_itemL1-text-default;
         width: 100%;
 
+        transition: background-color $transition_duration-navigation_itemL1-bg $transition_function-navigation_itemL1-bg $transition_delay-navigation_itemL1-bg;//nav item的bg transition
+
         &-text {
             overflow: hidden;
             white-space: nowrap;

packages/semi-foundation/notification/notification.scss

@@ -1,5 +1,5 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-notification;
 
@@ -15,41 +15,40 @@ $module: #{$prefix}-notification;
     z-index: $z-notification;
     pointer-events: none;
 
-    &[placement="topRight"] {
+    &[placement='topRight'] {
         right: 0;
         top: 0;
     }
 
-    &[placement="top"] {
+    &[placement='top'] {
         top: 0;
         left: 50%;
         transform: translateX(-50%);
     }
 
-    &[placement="topLeft"] {
+    &[placement='topLeft'] {
         left: 0;
         top: 0;
     }
 
-    &[placement="bottom"] {
+    &[placement='bottom'] {
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
     }
 
-    &[placement="bottomRight"] {
+    &[placement='bottomRight'] {
         bottom: 0;
         right: 0;
     }
 
-    &[placement="bottomLeft"] {
+    &[placement='bottomLeft'] {
         bottom: 0;
         left: 0;
     }
 }
 
 .#{$module} {
-
     &-notice {
         @include shadow-elevated;
         border-radius: $radius-notification_notice;
@@ -169,4 +168,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.17.1",
+    "version": "2.18.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-foundation/pagination/animation.scss

@@ -0,0 +1,11 @@
+$transition_duration-pagination_item-bg: var(--semi-transition_duration-faster);//翻页器页码-背景色-动画持续时间
+$transition_function-pagination_item-bg: var(--semi-transition_function-easeIn);//翻页器页码-背景色-过渡曲线
+$transition_delay-pagination_item-bg: var(--semi-transition_delay-fastest);//翻页器页码-背景色-延迟时间
+
+$transition_duration-pagination_item-text: var(--semi-transition_duration-faster);//翻页器页码文本-背景色-动画持续时间
+$transition_function-pagination_item-text: var(--semi-transition_function-easeIn);//翻页器页码文本-背景色-过渡曲线
+$transition_delay-pagination_item-text: var(--semi-transition_delay-fastest);//翻页器页码文本-背景色-延迟时间
+
+//transform token
+
+$transform_scale-pagination_item: var(--semi-transform_scale-none);//翻页器item-放大

packages/semi-foundation/pagination/pagination.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-page;
 
@@ -36,6 +37,9 @@ $module: #{$prefix}-page;
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: background-color $transition_duration-pagination_item-bg $transition_function-pagination_item-bg $transition_delay-pagination_item-bg,
+        color $transition_duration-pagination_item-text $transition_function-pagination_item-text $transition_delay-pagination_item-text;
+        transform:scale($transform_scale-pagination_item);
 
         &:hover {
             border-color: $color-pagination_item-border-hover;

packages/semi-foundation/radio/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-radio-bg: var(--semi-transition_duration-faster);//单选框-背景色-动画持续时间
+$transition_function-radio-bg: var(--semi-transition_function-easeIn);//单选框-背景色-过渡曲线
+$transition_delay-radio-bg: var(--semi-transition_delay-fastest);//单选框-背景色-延迟时间
+
+$transition_duration-radio-border: var(--semi-transition_duration-faster);//单选框-边框-动画持续时间
+$transition_function-radio-border: var(--semi-transition_function-easeIn);//单选框-边框-过渡曲线
+$transition_delay-radio-border: var(--semi-transition_delay-fastest);//单选框-边框-延迟时间
+
+// transform token
+$transform_scale-radio: var(--semi-transform_scale-none);//单选框-变大

packages/semi-foundation/radio/radio.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-radio;
 $inner-width: $width-icon-medium;
@@ -9,6 +10,8 @@ $inner-width: $width-icon-medium;
     position: relative;
     display: inline-flex;
     flex-wrap: wrap;
+    transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+    border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
     &.#{$module}-vertical {
         display: block;
@@ -104,6 +107,8 @@ $inner-width: $width-icon-medium;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
         background: transparent;
         border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+        border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
             position: relative;
@@ -224,7 +229,9 @@ $inner-width: $width-icon-medium;
             border: solid $width-radio_innder-border $color-radio_default-border-default;
             border-radius: $width-radio_inner;
             background: $color-radio_default-bg-default;
-
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
+        
             .#{$prefix}-icon {
                 position: absolute;
                 width: 100%;
@@ -262,6 +269,8 @@ $inner-width: $width-icon-medium;
             color: $color-radio_buttonRadio-text-default;
             font-size: $font-radio_buttonRadio_middle-default-size;
             padding: $spacing-radio_addon_buttonRadio_middle-paddingY $spacing-radio_addon_buttonRadio_middle-paddingX;
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
             &-hover {
                 font-weight: $font-radio_buttonRadio-hover-fontWeight;

packages/semi-foundation/radio/radioFoundation.ts

@@ -3,6 +3,7 @@ import warning from '../utils/warning';
 
 export interface RadioAdapter extends DefaultAdapter {
     setHover: (hover: boolean) => void;
+    setChecked: (checked: boolean) => void;
     setAddonId: () => void;
     setExtraId: () => void;
     setFocusVisible: (focusVisible: boolean) => void;
@@ -21,6 +22,10 @@ export default class RadioFoundation extends BaseFoundation<RadioAdapter> {
         this._adapter.setHover(hover);
     }
 
+    setChecked(checked: boolean) {
+        this._adapter.setChecked(checked);
+    }
+
     handleFocusVisible = (event: any) => {
         const { target } = event;
         try {

packages/semi-foundation/rating/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-rating-color: var(--semi-transition_duration-faster);//评分-背景色-动画持续时间
+$transition_function-rating-color: var(--semi-transition_function-easeIn);//评分-背景色-过渡曲线
+$transition_delay-rating-color: var(--semi-transition_delay-fastest);//评分-背景色-延迟时间
+
+// transform token
+$transform_scale-rating: var(--semi-transform_scale-none);//评分-变大

packages/semi-foundation/rating/rating.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-rating;
 
@@ -37,6 +38,7 @@ $module: #{$prefix}-rating;
         color: inherit;
         cursor: pointer;
         transition: all 0.5s;
+        transform:scale($transform-scale-rating);
 
         &:not(:last-child) {
             margin-right: $spacing-rating_item-marginRight;
@@ -75,6 +77,7 @@ $module: #{$prefix}-rating;
 
         &-first,
         &-second {
+            transition: color $transition_duration-rating-color $transition_function-rating-color $transition_delay-rating-color;
             color: $color-rating-bg-default;
             user-select: none;
         }

packages/semi-foundation/scrollList/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-scrollList_selected_item-bg: var(--semi-transition_duration-fastest); // 滚动列表选中选项-背景颜色-动画持续时间
+$transition_function-scrollList_selected_item-bg: var(--semi-transition_function-easeOut); // 滚动列表选中选项-背景颜色-过渡曲线
+$transition_delay-scrollList_selected_item-bg: 0ms; // 滚动列表选中选项-背景颜色-延迟时间

packages/semi-foundation/scrollList/scrollList.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/_font.scss';
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-scrolllist;
 
@@ -38,11 +39,9 @@ $module: #{$prefix}-scrolllist;
 
         .#{$module}-item-wheel .#{$module}-list-outer-nocycle,
         .#{$module}-item {
-
             & > ul {
-
                 &:before {
-                    content: "";
+                    content: '';
                     display: block;
                     width: 100%;
                     height: ($height-scrollList - $height-scrollList_item) / 2;
@@ -63,7 +62,6 @@ $module: #{$prefix}-scrolllist;
 
         .#{$module}-item,
         .#{$module}-item-wheel .#{$module}-list-outer {
-
             & > ul {
                 box-sizing: border-box;
                 width: 100%;
@@ -84,7 +82,7 @@ $module: #{$prefix}-scrolllist;
                     // padding: 8px 18px;
                     cursor: pointer;
                     background-color: $color-scrollList_item-bg;
-
+                    transition: background-color $transition_duration-scrollList_selected_item-bg $transition_function-scrollList_selected_item-bg $transition_delay-scrollList_selected_item-bg;
                     &.#{$module}-item-sel {
                         background: $color-scrollList_selected_item-bg;
                         color: $color-scrollList_selected_item-text;
@@ -147,14 +145,14 @@ $module: #{$prefix}-scrolllist;
                     top: 0;
                     margin-top: $spacing-scrollList_item_wheel_list_shade_pre-marginTop;
                     background: $color-scrollList-bg;
-                    opacity: .5;
+                    opacity: 0.5;
                 }
 
                 &-post {
                     top: 50%;
                     margin-top: $spacing-scrollList_item_wheel_list_shade_post-marginTop;
                     background: $color-scrollList-bg;
-                    opacity: .5;
+                    opacity: 0.5;
                 }
             }
 
@@ -180,4 +178,4 @@ $module: #{$prefix}-scrolllist;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/select/animation.scss

@@ -0,0 +1,15 @@
+$transition_duration-select-bg: var(--semi-transition_duration-faster);//选择器-背景色-动画持续时间
+$transition_function-select-bg: var(--semi-transition_function-easeIn);//选择器-背景色-过渡曲线
+$transition_delay-select-bg: var(--semi-transition_delay-fastest);//选择器-背景色-延迟时间
+
+$transition_duration-select-border: var(--semi-transition_duration-faster);//选择器-边框-动画持续时间
+$transition_function-select-border: var(--semi-transition_function-easeIn);//选择器-边框-过渡曲线
+$transition_delay-select-border: var(--semi-transition_delay-fastest);//选择器-边框-延迟时间
+
+$transition_duration-select_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_function-select_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-select_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间
+
+// transform token
+$transform_scale-select: var(--semi-transform_scale-none);//选择框-变大
+$transform_rotate-select-arrow: var(--semi-transform-rotate-none);//选择框-箭头-旋转

packages/semi-foundation/select/option.scss

@@ -20,6 +20,7 @@ $multiple: #{$module}-multiple;
     align-items: center;
     cursor: pointer;
     box-sizing: border-box;
+    transition: background-color $transition_duration-select_option-bg $transition_function-select_option-bg $transition_delay-select_option-bg;
 
     &-icon {
         width: $width-select_option_tick;

packages/semi-foundation/select/select.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
-@import './option.scss';
 @import './variables.scss';
+@import "./animation.scss";
+@import './option.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;
@@ -21,7 +22,9 @@ $multiple: #{$module}-multiple;
     position: relative;
     outline: none;
     cursor: pointer;
-
+    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
+    border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
+    transform:scale($transform_scale-select);
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -259,6 +262,8 @@ $multiple: #{$module}-multiple;
         width: $width-select_arrow;
         color: $color-select-icon-default;
         flex-shrink: 0;
+        transform: rotate($transform_rotate-select-arrow);
+
 
         &-empty {
             // 不显示arrow时，右侧留出12px空白

packages/semi-foundation/select/variables.scss

@@ -91,14 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
-$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
-$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
-$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
-$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
+$spacing-select_option_list-paddingTop: 0px; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0px; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
-$radius-select_option: 0; // 选择器待选项圆角
+$radius-select_option: 0px; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

packages/semi-foundation/sideSheet/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-sideSheet_mask-bg: var(--semi-transition_delay-fastest); // 侧边栏打开后-蒙层颜色-动画持续时间
+$transition_function-sideSheet_mask-bg: var(--semi-transition_function-easeOut); // 侧边栏打开后-蒙层颜色-过渡曲线
+$transition_delay-sideSheet_mask-bg: 0ms; // 侧边栏打开后-蒙层颜色-延迟时间
+
+$transition_duration-sideSheet_inner: var(--semi-transition_delay-fastest); // 侧边栏-动画持续时间
+$transition_function-sideSheet_inner: var(--semi-transition_function-easeOut); // 侧边栏-过渡曲线
+$transition_delay-sideSheet_inner: 0ms; // 侧边栏-延迟时间

packages/semi-foundation/sideSheet/sideSheet.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-sidesheet;
 
@@ -85,6 +86,8 @@ $module: #{$prefix}-sidesheet;
         background-color: $color-sideSheet-bg;
         // background-clip: padding-box;
         border: 0;
+        transition: $transition_duration-sideSheet_inner $transition_function-sideSheet_inner
+            $transition_delay-sideSheet_inner;
     }
 
     &-header {
@@ -115,8 +118,12 @@ $module: #{$prefix}-sidesheet;
         width: 100%;
         height: 100%;
         background-color: $color-sideSheet_mask-bg;
+        opacity: 1;
+        transition: opacity $transition_duration-sideSheet_mask-bg $transition_function-sideSheet_mask-bg
+            $transition_delay-sideSheet_mask-bg;
 
         &-hidden {
+            opacity: 0;
             display: none;
         }
     }
@@ -168,4 +175,4 @@ $module: #{$prefix}-sidesheet;
     display: none;
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/skeleton/skeleton.scss

@@ -1,8 +1,7 @@
-@import "./variables.scss";
+@import './variables.scss';
 $module: #{$prefix}-skeleton;
 
 .#{$module} {
-
     &-avatar,
     &-image,
     &-title,
@@ -101,7 +100,6 @@ $module: #{$prefix}-skeleton;
     }
 
     @keyframes skeleton-loading {
-
         0% {
             background-position: 100% 50%;
         }
@@ -112,4 +110,4 @@ $module: #{$prefix}-skeleton;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/slider/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-slider_handle-bg: var(--semi-transition_duration-faster);//滑动条圆形按钮-背景色-动画持续时间
+$transition_function-slider_handle-bg: var(--semi-transition_function-easeIn);//滑动条圆形按钮-背景色-过渡曲线
+$transition_delay-slider_handle-bg: var(--semi-transition_delay-fastest);//滑动条圆形按钮-背景色-延迟时间
+
+//transform token
+
+$transform_scale-slider_handle: var(--semi-transform_scale-small);//滑动条圆形按钮-放大

packages/semi-foundation/slider/slider.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
-@import './variables.scss';
+@import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-slider;
 
@@ -54,8 +55,8 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff 0.3s;
-
+        transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
+        transform: scale($transform_scale-slider_handle);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }

packages/semi-foundation/spin/spin.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "../keyframes/rotate.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import '../keyframes/rotate.scss';
 
 $module: #{$prefix}-spin;
 
@@ -18,7 +18,7 @@ $module: #{$prefix}-spin;
         top: $spacing-spin_wrapper-top;
         color: $color-spin-bg;
 
-        &>svg {
+        & > svg {
             animation: $motion-spin_wrapper_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
             @include size($width-spin_middle);
         }
@@ -40,7 +40,7 @@ $module: #{$prefix}-spin;
         // 添加一个遮罩解决嵌套 Spin 穿透问题
 
         &::after {
-            content: "";
+            content: '';
             position: absolute;
             top: 0;
             left: 0;
@@ -60,13 +60,12 @@ $module: #{$prefix}-spin;
     }
 
     &-hidden {
-
         &::after {
             content: none;
         }
 
         // 考虑到嵌套，.spin-chidren 节点的 opacity 由直接父级节点的 .spin-hidden 决定
-        &>.#{$module}-children {
+        & > .#{$module}-children {
             opacity: 1;
             user-select: auto;
         }
@@ -76,7 +75,7 @@ $module: #{$prefix}-spin;
 .#{$module}-small {
     @include size($width-spin_small);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_small);
     }
 }
@@ -84,7 +83,7 @@ $module: #{$prefix}-spin;
 .#{$module}-middle {
     @include size($width-spin_middle);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_middle);
     }
 }
@@ -92,7 +91,7 @@ $module: #{$prefix}-spin;
 .#{$module}-large {
     @include size($width-spin_large);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_large);
     }
 }
@@ -101,4 +100,4 @@ $module: #{$prefix}-spin;
     overflow: hidden;
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/steps/animation.scss

@@ -0,0 +1,17 @@
+$transition_duration-steps_item_title-text: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-text: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-text: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+$transition_duration-steps_item_title-icon: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-icon: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-icon: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+$transition_duration-steps_item_backgroundColor: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_backgroundColor: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_backgroundColor: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+
+
+//transform token
+
+$transform_scale-step-item: var(--semi-transform_scale-small);//步骤条item-放大

packages/semi-foundation/steps/bacisSteps.scss

@@ -69,9 +69,11 @@ $basicType: #{$module}-basic;
 
             .#{$item}-title {
                 max-width: $width-steps_basic_item_title-maxWidth;
-
+                
                 .#{$item}-title-text {
                     @include text-overflow-hidden;
+                    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                       
                 }
             }
 
@@ -166,6 +168,10 @@ $basicType: #{$module}-basic;
         overflow: hidden;
         flex: 1;
         cursor: pointer;
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text, //step文字color的transition变化
+        background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
+        transform:scale($transform_scale-step-item);
 
         &:hover {
 
@@ -187,7 +193,7 @@ $basicType: #{$module}-basic;
             justify-content: center;
             align-items: center;
             margin-right: $spacing-steps_basic_item_left-marginRight;
-
+            
 
             .#{$item}-icon {
                 display: flex;
@@ -206,7 +212,7 @@ $basicType: #{$module}-basic;
                 background: $color-steps_item_left_number_icon-bg;
                 border-radius: $radius-steps_basic_item_left_number_icon;
                 color: $color-steps_item_left_number_icon-icon;
-
+                transition: color $transition_duration-steps_item_title-icon $transition_function-steps_item_title-icon $transition_delay-steps_item_title-icon; //step icon color的transition变化
             }
         }
 
@@ -221,6 +227,8 @@ $basicType: #{$module}-basic;
             vertical-align: top;
             padding-right: $spacing-steps_basic_item_title-paddingRight;
             padding-bottom: $spacing-steps_basic_item_title-paddingBottom;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; //step文字color的transition变化
+       
         }
 
         // 完成状态的样式

packages/semi-foundation/steps/fillSteps.scss

@@ -39,7 +39,10 @@ $module: #{$prefix}-steps;
         border: $width-steps_item-border solid $color-steps-border-default;
         border-radius: $radius-steps_item;
         padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
-
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
+        transform:scale($transform_scale-step-item);
+        transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
         .#{$module}-item-title {
             position: relative;
             // display: inline-block;
@@ -48,6 +51,8 @@ $module: #{$prefix}-steps;
             width: $width-steps_item_title;
             @include text-overflow-hidden;
             color: $color-steps_main-text-default;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                     
         }
 
         .#{$module}-item-description {

packages/semi-foundation/steps/navSteps.scss

@@ -8,7 +8,7 @@ $basicType: #{$module}-nav;
 
     .#{$item} {
         @include box-sizing;
-
+        
         &:last-child {
             flex: none;
 

packages/semi-foundation/steps/steps.scss

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/font.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./fillSteps.scss";
 @import "./bacisSteps.scss";
 @import "./navSteps.scss";

packages/semi-foundation/switch/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-switch-bg: 200ms;//开关-背景色-动画持续时间
+$transition_function-switch-bg: var(--semi-transition_function-easeIn);//开关-背景色-过渡曲线
+$transition_delay-switch-bg: var(--semi-transition_delay-fastest);//开关-背景色-延迟时间
+

packages/semi-foundation/switch/foundation.ts

@@ -30,8 +30,8 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
 
     handleChange(checked: boolean, e: any): void {
         const propChecked = this.getProps().checked;
-        const isControledComponent = typeof propChecked !== 'undefined';
-        if (isControledComponent) {
+        const isControlledComponent = typeof propChecked !== 'undefined';
+        if (isControlledComponent) {
             this._adapter.notifyChange(checked, e);
         } else {
             this._adapter.setNativeControlChecked(checked);

packages/semi-foundation/switch/switch.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-switch;
 
@@ -11,7 +12,9 @@ $module: #{$prefix}-switch;
     cursor: pointer;
     background-color: $color-switch_default-bg-default;
     // box-shadow: inset 0 0 0 0 $color-switch_default-bg-success;
-    transition: background-color $motion-switch-transitionDuration ease-in-out;
+    //transition: background-color $motion-switch-transitionDuration ease-in-out;
+    transition: background-color $transition_duration-switch-bg $transition_function-switch-bg $transition_delay_switch-bg;
+
     width: $width-switch;
     height: $height-switch;
 

packages/semi-foundation/table/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-table_body-bg: var(--semi-transition_duration-faster); // 表格-背景颜色-动画持续时间
+$transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
+$transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间

packages/semi-foundation/table/table.scss

@@ -1,6 +1,7 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "./operationPanel.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import './operationPanel.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-table;
 
@@ -23,7 +24,7 @@ $module: #{$prefix}-table;
         color: $color-table-text-default;
         width: 100%;
 
-        &[data-column-fixed=true] {
+        &[data-column-fixed='true'] {
             z-index: 1;
         }
     }
@@ -76,7 +77,6 @@ $module: #{$prefix}-table;
             display: table-column;
         }
         .#{$module}-column {
-
             &-expand,
             &-selection {
                 width: $width-table_column_selection;
@@ -102,7 +102,6 @@ $module: #{$prefix}-table;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
-
                     &-left,
                     &-right {
                         z-index: $z-table_fixed_column;
@@ -111,7 +110,7 @@ $module: #{$prefix}-table;
 
                         &::before {
                             background-color: $color-table_th-bg-default;
-                            content: "";
+                            content: '';
                             position: absolute;
                             left: 0;
                             top: 0;
@@ -141,7 +140,7 @@ $module: #{$prefix}-table;
 
                         // scroll-bar 列无需有box-shadow
 
-                        &[x-type="column-scrollbar"] {
+                        &[x-type='column-scrollbar'] {
                             box-shadow: none;
                             border-left: transparent;
                         }
@@ -152,7 +151,7 @@ $module: #{$prefix}-table;
                     text-align: center;
                 }
 
-                &[colspan]:not([colspan="1"]) {
+                &[colspan]:not([colspan='1']) {
                     text-align: center;
                 }
 
@@ -198,14 +197,13 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
-                                content: "";
+                                content: '';
                                 position: absolute;
                                 left: 0;
                                 top: 0;
@@ -236,7 +234,6 @@ $module: #{$prefix}-table;
                 }
             }
             &.#{$module}-row {
-
                 &-expand {
                     & > .#{$module}-row-cell {
                         background-color: $color-table_row_expanded-bg-default;
@@ -245,10 +242,9 @@ $module: #{$prefix}-table;
             }
 
             & > .#{$module}-cell-fixed {
-
                 &-left,
                 &-right {
-                    z-index: $z-table_fixed_column;;
+                    z-index: $z-table_fixed_column;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }
@@ -262,6 +258,16 @@ $module: #{$prefix}-table;
                     border-left: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
                     box-shadow: #{$shadow-table_left};
                 }
+
+                & > * {
+                    transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                        $transition_delay-table_body-bg;
+                }
+            }
+
+            & > * {
+                transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                    $transition_delay-table_body-bg;
             }
         }
 
@@ -322,7 +328,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-selection {
-
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
@@ -339,7 +344,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-column {
-
         &-hidden {
             display: none;
         }
@@ -439,7 +443,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-header {
-
             &::-webkit-scrollbar {
                 border-right: $border-table;
             }
@@ -452,7 +455,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-
             .react-resizable-handle {
                 background-color: transparent;
             }
@@ -502,7 +504,6 @@ $module: #{$prefix}-table;
 
         // when header is fixed, table should use `table-layout: fixed` to avoid align bug
         &-header {
-
             table {
                 table-layout: fixed;
             }
@@ -510,9 +511,7 @@ $module: #{$prefix}-table;
     }
 
     &-scroll {
-
         &-position {
-
             &-left {
                 .#{$module}-tbody,
                 .#{$module}-thead {
@@ -556,4 +555,4 @@ $module: #{$prefix}-table;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/tabs/animation.scss

@@ -0,0 +1,23 @@
+$transition_duration-tabs_tab_line-border: var(--semi-transition_duration-faster);//线条式标签页标示线-边框-动画持续时间
+$transition_function-tabs_tab_line-border: var(--semi-transition_function-easeIn);//线条式标签页标示线-边框-过渡曲线
+$transition_delay-tabs_tab_line-border: var(--semi-transition_delay-fastest);//线条式标签页标示线-边框-延迟时间
+
+$transition_duration-tabs_tab_line-text: var(--semi-transition_duration-faster);//线条式标签页-文字-动画持续时间
+$transition_function-tabs_tab_line-text: var(--semi-transition_function-easeIn);//线条式标签页-文字-过渡曲线
+$transition_delay-tabs_tab_line-text: var(--semi-transition_delay-fastest);//线条式标签页-文字-延迟时间
+
+
+$transition_duration-tabs_tab_button-bg: var(--semi-transition_duration-faster);//按钮式标签页-背景色-动画持续时间
+$transition_function-tabs_tab_button-bg: var(--semi-transition_function-easeIn);//按钮式标签页-背景色-过渡曲线
+$transition_delay-tabs_tab_button-bg: var(--semi-transition_delay-fastest);//按钮式标签页-背景色-延迟时间
+
+
+$transition_duration-tabs_tab_card-bg: var(--semi-transition_duration-faster);//卡片式标签页文字-背景色-动画持续时间
+$transition_function-tabs_tab_card-bg: var(--semi-transition_function-easeIn);//卡片式标签页文字-背景色-过渡曲线
+$transition_delay-tabs_tab_card-bg: var(--semi-transition_delay-fastest);//卡片式标签页文字-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tabs_tab_line-item: var(--semi-transform_scale-none);//线条式标签页item 放大
+$transform_scale-tabs_tab_button-item: var(--semi-transform_scale-none);//按钮式标签页item 放大
+$transform_scale-tabs_tab_card-item: var(--semi-transform_scale-none);//线条式标签页item 放大

packages/semi-foundation/tabs/tabs.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tabs;
 
@@ -44,6 +45,8 @@ $module: #{$prefix}-tabs;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
+                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+           
             }
             
             .#{$prefix}-icon-close {
@@ -156,10 +159,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+            transform:scale($transform_scale-tabs_tab_line-item);
             
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
-                
+                transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
@@ -207,7 +213,9 @@ $module: #{$prefix}-tabs;
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab_left-padding;
                 border-left: $width-tabs_bar_line_tab-border solid transparent;
-                
+                transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
@@ -338,6 +346,10 @@ $module: #{$prefix}-tabs;
         
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
+            transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_card-item);
             
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -380,6 +392,10 @@ $module: #{$prefix}-tabs;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
+            transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_button-item);
             
             &:hover {
                 border: none;

packages/semi-foundation/tagInput/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tagInput-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

packages/semi-foundation/tagInput/tagInput.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tagInput;
 
@@ -10,7 +11,9 @@ $module: #{$prefix}-tagInput;
     font-weight: $font-weight-regular;
     width: 100%;
     box-sizing: border-box;
-    
+    transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
+    border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
+
     &-drag {
 
         &-item {

packages/semi-foundation/timePicker/utils/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-timePicker-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

packages/semi-foundation/transfer/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration_transfer_item-bg: var(--semi-transition_duration-faster);//穿梭框条目-背景色-动画持续时间
+$transition_function_transfer_item-bg: var(--semi-transition_function-easeIn);//穿梭框条目-背景色-过渡曲线
+$transition_delay_transfer_item-bg: var(--semi-transition_delay-fastest);//穿梭框条目-背景色-延迟时间
+