Merge branch 'main' into release

CONTRIBUTING-en-US.md

@@ -37,7 +37,8 @@ npm run test:unit
 ```
  - Open a Pull Request against `release` of source repo
 
-We may ask or help you to modify the PR according to the situation. For inappropriate PR, we will close it with an explanation.
+We may ask or help you to modify the PR according to the situation. For inappropriate PR, we will close it with an explanation.  
+If your changes involve style changes or Design Token changes, please read [Semi SCSS Variable Writing/File Citation Specification](https://bytedance.feishu.cn/docx/doxcnsFphF1yOqQJRSGqw6zkxTh)
 
 ## Help Improve the Docs
 The documentation site is based on [gatsby](https://www.gatsbyjs.com/), and the code is in the `src` directory.

CONTRIBUTING.md

@@ -43,6 +43,7 @@ npm run test:unit
 我们可能会根据情况要求或帮助你修改PR，对于不合适的PR我们会给予解释后关闭
 
 - 为了便于不同地区的开发者都能获取到修改相关上下文，git commit message请统一使用英文描述
+- 如果你的改动涉及样式变更 或 Design Token 变更，请先阅读 [Semi SCSS 变量编写/文件引用规范](https://bytedance.feishu.cn/docx/doxcnQ7uom1zmEtn28dI7G1hopb)
 
 ## 帮助改善文档
 文档站基于 [gatsby](https://www.gatsbyjs.com/) 构建，核心代码在 `src` 目录。

package.json

@@ -39,7 +39,7 @@
     "@douyinfe/semi-site-banner": "0.0.1",
     "@douyinfe/semi-site-doc-style": "0.0.1",
     "@douyinfe/semi-site-header": "0.0.3",
-    "@douyinfe/semi-site-markdown-blocks": "0.0.1",
+    "@douyinfe/semi-site-markdown-blocks": "0.0.2",
     "@mdx-js/react": "^1.6.22",
     "@svgr/core": "^5.5.0",
     "aos": "^2.3.4",

packages/semi-foundation/notification/notification.scss

@@ -93,23 +93,27 @@ $module: #{$prefix}-notification;
 
         &-light {
             &.#{$module}-notice-warning {
-                background-color: $color-notification_warning_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_warning_light-bg, $color-notification_warning_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_warning_light-border;
             }
 
             &.#{$module}-notice-success {
-                background-color: $color-notification_success_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_success_light-bg, $color-notification_success_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_success_light-border;
             }
 
             &.#{$module}-notice-info,
             &.#{$module}-notice-default {
-                background-color: $color-notification_info_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_info_light-bg, $color-notification_info_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_info_light-border;
             }
 
             &.#{$module}-notice-error {
-                background-color: $color-notification_danger_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_danger_light-bg, $color-notification_danger_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_danger_light-border;
             }
         }
@@ -165,4 +169,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

packages/semi-foundation/notification/variables.scss

@@ -15,6 +15,7 @@ $color-notification_info_light-bg: var(--semi-color-info-light-default); // 彩
 $color-notification_info_light-border: var(--semi-color-info); // 彩色通知信息描边色
 $color-notification_danger_light-bg: var(--semi-color-danger-light-default); // 彩色通知危险背景色
 $color-notification_danger_light-border: var(--semi-color-danger); // 彩色通知危险描边色
+$color-notification_ambient-bg: var(--semi-color-bg-0); // 透明背景色叠加层(与bg0保持一致不建议修改)
 
 // Width/Height
 $width-notification_notice: auto; // 通知宽度

packages/semi-ui/empty/index.tsx

@@ -60,7 +60,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         this.observer && this.observer.disconnect();
     }
 
-    observe(mutationsList: any): void {
+    observe = (mutationsList: any): void => {
         for (const mutation of mutationsList) {
             if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
                 this.updateMode();
@@ -68,7 +68,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         }
     }
 
-    updateMode(): void {
+    updateMode = (): void => {
         const val = this.body.getAttribute('theme-mode');
         if (val !== this.state.mode) {
             this.setState({ mode: val });

src/html.js

@@ -166,6 +166,8 @@ export default function HTML(props) {
                 <div key={'body'} id="___gatsby" dangerouslySetInnerHTML={{ __html: props.body }} />
                 {props.postBodyComponents}
             </body>
+            <script src="https://unpkg.com/[email protected]/min/vs/loader.js"/>
+            <script src="https://unpkg.com/[email protected]/min/vs/editor/editor.main.js"/>
         </html>
     );
 }