style: update highlight, add global token

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

@@ -41,7 +41,8 @@ import { Highlight } from '@douyinfe/semi-ui';
 
 ### Specify highlight style
 
-By default, the highlighted text will have its own text style, the text color is --semi-yellow-4, and the background color is transparent.
+By default, the highlighted text will have its own text style, the text color is black, and the background color is `--semi-yellow-4`.  
+In dark mode, the text color is white, and the background color is `--semi-yellow-2`.  
 When you need to customize different highlight styles, you can specify them through `highlightClassName`, `highlightStyle`
 
 ```jsx live=true dir="column"

content/show/highlight/index.md

@@ -29,7 +29,7 @@ import React from 'react';
 import { Highlight } from '@douyinfe/semi-ui';
 
 () => {
-    const sourceString = '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
+    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
     const searchWords = ['设计系统', 'Semi Design'];
     
     return (<h2>
@@ -40,15 +40,16 @@ import { Highlight } from '@douyinfe/semi-ui';
 
 ### 指定高亮样式
 
-默认情况下，高亮文本会自带文本样式，文字颜色为 --semi-yellow-4, 背景颜色为 transparent 透明。  
-当你需要自定义不同的高亮样式时，你可以通过 `highlightClassName`, `highlightStyle`来指定
+默认情况下，高亮文本会自带文本样式，背景颜色 --semi-yellow-4, 文本颜色为黑色  
+暗色模式下，背景颜色为 --semi-yellow-2，文本颜色为白色   
+当你需要自定义不同的高亮样式时，你可以通过 `highlightClassName`, `highlightStyle`来指定 
 
 ```jsx live=true dir="column"
 import React from 'react';
 import { Highlight } from '@douyinfe/semi-ui';
 
 () => {
-    const sourceString = '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
+    const sourceString = '从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
     const searchWords = ['设计系统', 'Semi Design'];
     
     return (
@@ -98,7 +99,7 @@ import React from 'react';
 import { Highlight } from '@douyinfe/semi-ui';
 
 () => {
-    const sourceString = '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
+    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
     const searchWords = ['设计系统', 'Semi Design'];
     
     return (<h2>

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

@@ -16,6 +16,11 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.24.0-beta.1 (2022-11-22)
+- 【Style】
+    - Adjust Highlight style, default highlight background
+    - Design Token : `@douyinfe/semi-theme-default` add global design Token `--semi-color-highlight-bg`、`--semi-color-highlight`
+
 #### 🎉 2.24.0-beta.0 (2022-11-21)
 - 【New Component】
     - Add Highlight Component [#1281](https://github.com/DouyinFE/semi-design/pull/1281)

content/start/changelog/index.md

@@ -15,6 +15,12 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 
 ---
+
+#### 🎉 2.24.0-beta.1 (2022-11-22)
+- 【Style】
+    - 调整 Highlight 样式, 默认背景高亮
+    - Design Token 调整，@douyinfe/semi-theme-default 新增全局Token `--semi-color-highlight-bg`、`--semi-color-highlight`
+
 #### 🎉 2.24.0-beta.0 (2022-11-21)
 - 【New Component】
     - 新增 Highlight 组件 [#1281](https://github.com/DouyinFE/semi-design/pull/1281)

packages/semi-foundation/highlight/variables.scss

@@ -1,5 +1,5 @@
 
-$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
-$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+$color-highlight-text-default: var(--semi-color-highlight); // 高亮文字颜色
+$color-highlight-text-bg-default:  var(--semi-color-highlight-bg); // 高亮文字背景颜色
 
 $font-highlight-text-fontWeight: 600; // 高亮文字字重

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

@@ -101,6 +101,8 @@ body, body[theme-mode="dark"] .semi-always-light {
     --semi-border-radius-large: 12px; // 大圆角, 用于 modal
     --semi-border-radius-circle: 50%; // 全圆角, 用于 avatar, badge 等组件
     --semi-border-radius-full: 9999px; // 用于创建全尺寸圆角，如胶囊标签等
+    --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1); // 高亮文本背景色
+    --semi-color-highlight: rgba(var(--semi-black), 1); // 高亮文本色
 }
 
 body[theme-mode="dark"], body .semi-always-dark {
@@ -189,4 +191,6 @@ body[theme-mode="dark"], body .semi-always-dark {
     --semi-border-radius-large: 12px;
     --semi-border-radius-circle: 50%;
     --semi-border-radius-full: 9999px;
+    --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1); // 高亮文本背景色
+    --semi-color-highlight: rgba(var(--semi-white), 1); // 高亮文本色
 }