@douyinfe/semi-foundation 2.90.13 → 2.91.0

package/button/button.scss

@@ -34,7 +34,7 @@ $module: #{$prefix}-button;
     &.#{$module}-warning,
     &.#{$module}-danger {
         &:focus-visible {
-            outline: $width-button-outline solid $color-button_primary-outline-focus;
+            outline: $width-button-outline solid $color-button_primary_outline-focus;
         }
     }
 

package/button/variables.scss

@@ -1,7 +1,7 @@
 // primary
 $color-button_primary-bg-default: var(--semi-color-primary); // 主要按钮背景颜色
 $color-button_primary-border-default: transparent; // 主要按钮描边颜色
-$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色
+$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - solid 模式
 
 $color-button_primary-bg-hover: var(--semi-color-primary-hover); // 主要按钮背景颜色 - 悬浮
 $color-button_primary-border-hover: var(--semi-color-primary-hover); // 主要按钮描边颜色 - 悬浮
@@ -10,26 +10,26 @@ $color-button_primary-text-hover: rgba(var(--semi-white), 1); // 主要按钮文
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
 $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
-$color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
-$color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
+$color-button_primary_outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
+$color-button_primary_outline-border-default: var(--semi-color-border); // 主要按钮边框颜色 - 边框模式
 
-$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
+$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮文字颜色 - 浅色/边框/无边框模式
 
-$color-button_primary_solid_colorful-bg-default: var(--semi-color-ai-general); // colorful 主要按钮背景颜色 - 深色主题
-$color-button_primary_solid_colorful-bg-hover: var(--semi-color-ai-general-hover); // colorful 主要按钮背景颜色 - 深色主题 - 悬浮
-$color-button_primary_solid_colorful-bg-active: var(--semi-color-ai-general-active); // colorful 主要按钮背景颜色 - 深色主题 - 按下
+$color-button_primary_solid_colorful-bg-default: var(--semi-color-ai-general); // Colorful 主要按钮背景颜色 - solid 主题
+$color-button_primary_solid_colorful-bg-hover: var(--semi-color-ai-general-hover); // Colorful 主要按钮背景颜色 - solid 主题 - 悬浮
+$color-button_primary_solid_colorful-bg-active: var(--semi-color-ai-general-active); // Colorful 主要按钮背景颜色 - solid 主题 - 按下
 
-$color-button_primary_light_colorful-text-default: var(--semi-color-ai-general); // colorful 主要按钮文字颜色 - 浅色色主题
+$color-button_primary_light_colorful-text-default: var(--semi-color-ai-general); // Colorful 主要按钮文字填充色 - 浅色模式
 
-$color-button_primary_light_outline-text-default: var(--semi-color-ai-purple); // colorful 主要按钮文字颜色 - 边框模式
-$color-button_primary_light_outline-border: var(--semi-color-ai-purple); // colorful 主要按钮文字颜色 - 边框模式
+$color-button_primary_light_outline-text-default: var(--semi-color-ai-purple); // Colorful 主要按钮文字颜色 - 边框模式
+$color-button_primary_light_outline-border: var(--semi-color-ai-purple); // Colorful 主要按钮边框颜色 - 边框模式
 
-$color-button_primary_light_borderless-text-default: var(--semi-color-ai-general); // colorful 主要按钮文字颜色 - 无背景
+$color-button_primary_light_borderless-text-default: var(--semi-color-ai-general); // Colorful 主要按钮文字填充色 - 无边框模式
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
-$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色
+$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - solid 模式
 
 $color-button_secondary-bg-hover: var(--semi-color-secondary-hover); // 次要按钮背景颜色 - 悬浮
 $color-button_secondary-border-hover: var(--semi-color-secondary-hover); // 次要按钮描边颜色 - 悬浮
@@ -38,14 +38,14 @@ $color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮
 $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
 $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
 $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
-$color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
+$color-button_secondary_outline-border-default: var(--semi-color-border); // 次要按钮边框颜色 - 边框模式
 
-$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
+$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮文字颜色 - 浅色/边框/无边框模式
 
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
-$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色
+$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - solid 模式
 
 $color-button_danger-bg-hover: var(--semi-color-danger-hover); // 危险按钮背景颜色 - 悬浮
 $color-button_danger-border-hover: var(--semi-color-danger); // 危险按钮描边颜色 - 悬浮
@@ -55,14 +55,14 @@ $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
 $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
-$color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
+$color-button_danger_outline-border-default: var(--semi-color-danger); // 危险按钮边框颜色 - 边框模式
 
-$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
+$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮文字颜色 - 浅色/边框/无边框模式
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
-$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色
+$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - solid 模式
 
 $color-button_warning-bg-hover: var(--semi-color-warning-hover); // 警告按钮背景颜色 - 悬浮
 $color-button_warning-border-hover: var(--semi-color-warning-hover); // 警告按钮描边颜色 - 悬浮
@@ -72,18 +72,18 @@ $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
 $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
-$color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
-$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
+$color-button_warning_outline-border-default: var(--semi-color-warning); // 警告按钮边框颜色 - 边框模式
+$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮文字颜色 - 浅色/边框/无边框模式
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
-$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色
+$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - solid 模式
 
 $color-button_tertiary_solid_colorful-bg-default: var(--semi-ai-general-0); // colorful 第三按钮背景颜色
 $color-button_tertiary_solid_colorful-bg-hover: var(--semi-ai-general-1); // colorful 第三按钮背景颜色 - 悬浮
 $color-button_tertiary_solid_colorful-bg-active: var(--semi-ai-general-2); // colorful 第三按钮背景颜色 - 按下
-$color-button_tertiary_solid_colorful-text-default: var(--semi-color-ai-general); // colorful 第三按钮文字颜色
+$color-button_tertiary_solid_colorful-text-default: var(--semi-color-ai-general); // Colorful 第三按钮文字填充色 - solid 主题
 
 $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover); // 第三按钮背景颜色 - 悬浮
 $color-button_tertiary-border-hover: var(--semi-color-tertiary-hover); // 第三按钮描边颜色 - 悬浮
@@ -92,22 +92,22 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
 $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
-$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 tertiary 边框颜色
-$color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
+$color-button_tertiary_outline-border-default: var(--semi-color-border); // 第三按钮边框颜色 - 边框模式
+$color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 第三按钮文字颜色 - 浅色/边框/无边框模式
 
 // disabled
-$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 深色主题
+$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - solid 主题
 $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 浅色主题或无背景
 $color-button_disabled_outline_text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 边框模式
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
-$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 深色主题 - 悬浮
+$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - solid 主题 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
 $color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
 $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
 $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
 $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
 $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
-$color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
+$color-button_disabled_outline-border-default: var(--semi-color-border); // 禁用按钮边框颜色 - 边框模式
 
 
 // light
@@ -126,7 +126,7 @@ $color-button_disabled_light_warning-bg-default: $color-button_light-bg-default;
 $color-button_disabled_light_tertiary-bg-default: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
 
 // borderless
-$color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
+$color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮文字颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
 $color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
 $color-button_borderless-border-default: transparent; // 无背景按钮描边颜色
@@ -203,7 +203,7 @@ $radius-button_group: $radius-button; // 按钮组圆角大小
 $width-button-outline: 2px; // 按钮轮廓宽度
 
 
-$radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
-$radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
-$radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
-$radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
+$radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // 组合按钮(Split) - 首个按钮左上圆角
+$radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // 组合按钮(Split) - 首个按钮左下圆角
+$radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // 组合按钮(Split) - 末尾按钮右上圆角
+$radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // 组合按钮(Split) - 末尾按钮右下圆角

package/cascader/variables.scss

@@ -1,12 +1,12 @@
-$radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
+$radius-cascader: var(--semi-border-radius-small); // 级联选择触发器圆角
 $radius-cascader_option_empty: var(--semi-border-radius-medium); // 级联选择菜单空状态圆角
 
-$color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
-$color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮
-$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
-$color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
-$color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
-$color-cascader_default-bg-active: var(--semi-color-fill-2); // 级联选择菜单项背景颜色 - 按下
+$color-cascader_default-border-default: transparent; // 级联选择触发器描边颜色 - 默认
+$color-cascader_default-border-hover: transparent; // 级联选择触发器描边颜色 - 悬浮
+$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择触发器描边颜色 - 选中
+$color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择触发器背景颜色 - 默认
+$color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择触发器背景颜色 - 悬浮
+$color-cascader_default-bg-active: var(--semi-color-fill-2); // 级联选择触发器背景颜色 - 按下
 $color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
 $color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
 $color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮
@@ -72,9 +72,9 @@ $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); //
 $color-cascader_selection_text_inactive: var(--semi-color-text-2); // 级联选择单选inpu输入框和text并存时，text颜色
 $color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
 $color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
-$color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
-$color-cascader-icon-hover: var(--semi-color-primary-hover); // 级联选择图标颜色 - 悬浮
-$color-cascader-icon-active: var(--semi-color-primary-active); // 级联选择图标颜色 - 按下
+$color-cascader-icon-default: var(--semi-color-text-2); // 级联选择触发器图标颜色 - 默认
+$color-cascader-icon-hover: var(--semi-color-primary-hover); // 级联选择触发器图标颜色 - 悬浮
+$color-cascader-icon-active: var(--semi-color-primary-active); // 级联选择触发器图标颜色 - 按下
 
 $color-cascader_label-text-default: var(--semi-color-text-2); // 级联选择 prefix 文字颜色
 $color-cascader_option-icon-default: $color-cascader-icon-default; // 级联选择菜单项图标颜色
@@ -106,7 +106,7 @@ $width-cascader_hover-border: $width-cascader-border; // 级联选择触发器
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 32px; // 级联选择触发器图标尺寸
-$width-cascader-option-icon: 16px; // 级联选择选项面板图标尺寸
+$width-cascader-option-icon: 16px; // 级联选择菜单项图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
@@ -124,8 +124,8 @@ $spacing-cascader_selection_n-paddingX: $spacing-tight; // 级联选择 +N 的
 $spacing-cascader_flatten_list-paddingRight: 64px; // 级联选择搜索结果菜单右侧内边距
 $spacing-cascader_empty_icon-marginRight: 8px;  // 级联选择搜索结果菜单
 
-$spacing-cacader_option_list-paddingY: 4px; // 级联选择菜单项垂直内边距
-$spacing-cacader_option_list-paddingX: 0px; // 级联选择菜单项水平内边距
+$spacing-cacader_option_list-paddingY: 4px; // 级联选择下拉菜单列表垂直内边距
+$spacing-cacader_option_list-paddingX: 0px; // 级联选择下拉菜单列表水平内边距
 
 $spacing-cascader_search-paddingX: 12px; // 级联选择搜索水平内边距
 $spacing-cascader_search-paddingY: 8px; // 级联选择搜索垂直内边距

package/checkbox/variables.scss

@@ -1,15 +1,15 @@
 $spacing-checkbox_label-paddingLeft: $spacing-tight; // 文字与选框间距
 $color-checkbox_label-text-default: var(--semi-color-text-0); // 文字颜色
 $color-checkbox_default-bg-hover: var(--semi-color-fill-0); // 选框背景颜色 - 悬浮
-$color-checkbox_default-bg-default: transparent; // 选框背景颜色 - 默认
+$color-checkbox_default-bg-default: transparent; // 复选框内部勾选框背景色 - 默认态
 
-$color-checkbox_default-border-hover: var(--semi-color-focus-border); // 选框描边颜色 - 悬浮
-$color-checkbox_default-border-default: var(--semi-color-text-3); // 选框描边颜色 - 默认
+$color-checkbox_default-border-hover: var(--semi-color-focus-border); // 复选框内部勾选框描边颜色 - 悬停态
+$color-checkbox_default-border-default: var(--semi-color-text-3); // 复选框内部勾选框描边颜色 - 默认态
 $color-checkbox_default-bg-active: var(--semi-color-fill-1); // 选框未选中态背景颜色 - 按下
 $font-checkbox_label-lineHeight: 20px; // 文字行高
 $color-checkbox_label-text-disabled: var(--semi-color-disabled-text); // 禁用文字颜色
 
-$color-checkbox_checked-bg-default: var(--semi-color-primary); // 选框选中态背景颜色 - 默认
+$color-checkbox_checked-bg-default: var(--semi-color-primary); // 复选框选中态内部勾选框背景色 - 默认态
 $color-checkbox_checked-bg-hover: var(--semi-color-primary-hover); // 选框选中态背景颜色 - 悬浮
 $color-checkbox_checked-bg-active: var(--semi-color-primary-active); // 选框选中态背景颜色 - 按下
 $color-checkbox_checked-icon-default: var(--semi-color-white); // 选框选中态对勾颜色 - 默认
@@ -26,11 +26,11 @@ $color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //
 $color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
 $color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
 $color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
-$color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
-$color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
-$color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
-$color-checkbox_cardType_inner-bg-active: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 按下
-$color-checkbox_cardType_inner-bg-default: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 -默认
+$color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框标题文本颜色 - 默认
+$color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片复选框副标题文本颜色 - 默认
+$color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片复选框内部勾选框背景色 - 悬浮
+$color-checkbox_cardType_inner-bg-active: var(--semi-color-white); // 卡片复选框内部勾选框背景色 - 按下
+$color-checkbox_cardType_inner-bg-default: var(--semi-color-white); // 卡片复选框内部勾选框背景色 -默认
 
 $color-checkbox_disabled-bg-default: var(--semi-color-disabled-fill); // 选框禁用态背景颜色 - 默认
 $color-checkbox_disabled-border-default: var(--semi-color-border); // 选框禁用态描边颜色 - 默认
@@ -48,24 +48,24 @@ $width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框
 $width-checkbox-outline: 2px; // 复选框轮廓宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
-$radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角
-$spacing-checkbox_extra-paddingLeft: $width-icon-medium + $spacing-tight; // extra 副标题左侧内边距
-$spacing-checkbox_extra-marginTop: $spacing-extra-tight; // extra 副标题顶部内边距
+$radius-checkbox_inner: var(--semi-border-radius-extra-small); // 复选框内部勾选框圆角
+$spacing-checkbox_extra-paddingLeft: $width-icon-medium + $spacing-tight; // 复选框副标题左侧内边距
+$spacing-checkbox_extra-marginTop: $spacing-extra-tight; // 复选框副标题顶部内边距
 $spacing-checkbox_cardType-paddingX: $spacing-base; // 卡片类型复选框的水平内间距
 $spacing-checkbox_cardType-paddingY: $spacing-base-tight; // 卡片类型复选框的垂直内间距
 $spacing-checkbox_cardType_inner-marginRight: $spacing-tight; // 卡片类型复选框 inner 的右外边距
 $spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片样式复选框的下间距
 
-$color-checkbox_extra-text-default: var(--semi-color-text-2); // extra 副标题文字颜色
+$color-checkbox_extra-text-default: var(--semi-color-text-2); // 复选框副标题文本颜色
 
 $spacing-checkbox_group_vertical-marginBottom: $spacing-base; 
 $spacing-checkbox_group_vertical_item-marginBottom: $spacing-base-tight; // 垂直复选框组底部外边距
 
 $spacing-checkbox_group_horizontal-marginRight: $spacing-base; // 水平复选框组右侧外边距
 
-$font-checkbox_cardType_addon-size: $font-size-regular; // 卡片类型复选框的 addon 的文字大小
-$font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复选框的 addon 的 fontWeight
-$font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的 addon 的文字行高
-$font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的 extra 的文字大小
-$font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的 extra 的 fontWeight
-$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高
+$font-checkbox_cardType_addon-size: $font-size-regular; // 卡片类型复选框标题文本大小
+$font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复选框的标题的 fontWeight
+$font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的标题的文字行高
+$font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的副标题的文字大小
+$font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的副标题的 fontWeight
+$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的副标题的文字行高

package/datePicker/variables.scss

@@ -1,17 +1,17 @@
 // Size
-$width-datepicker_day: 36px; // 日期格子尺寸
+$width-datepicker_day: 36px; // 日期格子及星期标题尺寸
 $width-datepicker_day_main: 32px; // 日期格子内容尺寸
-$width-datepicker_month: $width-datepicker_day * 7; // 年月面板宽度
-$width-datepicker_nav: 32px; // 导航高度
+$width-datepicker_month: $width-datepicker_day * 7; // 日期视图单月面板宽度
+$width-datepicker_nav: 32px; // 顶部导航栏高度
 $height-datepicker_switch: 54px; // 日期时间切换高度
 $height-datepicker_timeType_yam: calc(100% - 54px); // 时间面板高度
 $height-datepicker_timeType_tpk: calc(100% - 54px); // 时间面板高度
-$height-datepicker_panel_yam_scrolllist:  266px; // 时间滚动内容高度
+$height-datepicker_panel_yam_scrolllist:  266px; // 年月选择列表滚动区域高度
 
 $width-datepicker_monthPanel_max: 284px; // 年月选择器最大宽度
 $width-datepicker_monthRangePanel_max: 384px; // 年月选择器最大宽度
-$height-datepicker_timepicker_header_min: 24px; // 年月选择 header 最小高度
-$width-datepicker_navigation_button_min: 32px; // header 按钮最小宽度
+$height-datepicker_timepicker_header_min: 24px; // 年月选择面板顶部导航栏最小高度
+$width-datepicker_navigation_button_min: 32px; // 顶部导航栏按钮最小宽度
 $height-datepicker_yamShowing_min: 378px; // 日期时间选择器菜单最小高度
 $width-datepicker_yamShowing_min: 284px; // 选择器菜单最小宽度
 $height-datepicker_dateType_yamShowing_min: 325px; // 日期选择器菜单最小高度
@@ -20,8 +20,8 @@ $width-datepicker_presetPanel_left_and_right: 200px; // 左右方位快捷选择
 $height-datepicker_presetPanel_top_and_bottom_max: 100px; // 上下方位快捷选择面板最大高度
 $width-datepicker_presetPanel_scroll_bar: 15px; // 快捷选择面板scrollbar宽度
 
-$width-datepicker-border: $border-thickness-control; // 年月选择 header 底部分割线宽度
-$width-datepicker_yam_header-borderRadius: var(--semi-border-radius-medium); // 年月选择 header 按钮圆角
+$width-datepicker-border: $border-thickness-control; // 年月选择面板顶部导航栏底部分割线宽度
+$width-datepicker_yam_header-borderRadius: var(--semi-border-radius-medium); // 年月选择面板顶部导航栏圆角
 $width-datepicker_day_main-borderRadius: var(--semi-border-radius-small); // 日期格子圆角
 $width-datepicker_quick_control-borderRadius: var(--semi-border-radius-medium); // 快捷操作按钮圆角
 $width-datepicker_slot-border: 1px; // 日期星期分割线宽度
@@ -40,8 +40,8 @@ $width-datepicker_range_trigger-border: 0px; //  触发器边框宽度
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) * 0.5; // 日期格子水平外边距
-$spacing-datepicker_yam_header-paddingX: $spacing-base; // 年月选择 header 水平内边距
-$spacing-datepicker_yam_header-paddingY: $spacing-base-tight; // 年月选择 header 垂直内边距
+$spacing-datepicker_yam_header-paddingX: $spacing-base; // 年月选择面板顶部导航栏水平内边距
+$spacing-datepicker_yam_header-paddingY: $spacing-base-tight; // 年月选择面板顶部导航栏垂直内边距
 $spacing-datepicker_scrolllist_header-padding: $spacing-base; // 时间选择 header 内边距
 $spacing-datepicker_scrolllist_body-padding: 0; // 时间选择滚动菜单内边距
 $spacing-datepicker_footer-paddingTop: 10px; // 确认选择 footer 顶部内边距
@@ -55,7 +55,7 @@ $spacing-datepicker_month-padding: $spacing-base;
 $spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
 $spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
 $spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
-$spacing-datepicker_quick_control_header-paddingTop: 18px;  // 快捷面板标题，上内边距
+$spacing-datepicker_quick_control_header-paddingTop: 18px;  // 快捷预设面板标题区域上内边距
 $spacing-datepicker_quick_control_top_and_bottom_content-paddingX: $spacing-base-loose; // 上下方位快捷操作面板, 左右内边距，默认20px
 $spacing-datepicker_quick_control_content-paddingX: 12px; // 快捷面板内容，左右内边距
 $spacing-datepicker_quick_control_content-marginTop: 14px; // 快捷面板内容，上边距
@@ -88,7 +88,7 @@ $color-datepicker_footer-bg-default: var(--semi-color-fill-0); // 日期选择
 $color-datepicker_quick-bg-default: transparent; // 日期选择器快捷操作背景颜色
 $color-datepicker_quick_button-text-default: var(--semi-color-primary); // 日期选择器快捷操作按钮文字颜色
 
-$color-datepicker_day-text-default: var(--semi-color-text-2); // 日期时间切换文字颜色 - 默认
+$color-datepicker_day-text-default: var(--semi-color-text-2); // 星期标题及日期时间切换按钮文字颜色 - 默认
 $color-datepicker_day-text-hover: var(--semi-color-fill-1); // 日期时间切换文字颜色 - 悬浮
 $color-datepicker_day-text-active: var(--semi-color-text-0); // 日期时间切换文字颜色 - 选中
 
@@ -109,13 +109,13 @@ $color-datepicker_date_today-text-default: var(--semi-color-primary); // 今日
 $color-datepicker_date_today_disabled-text-default: var(--semi-color-primary-disabled); // 今日文字颜色 - 禁用
 
 $color-datepicker_date_inHover-bg-default: var(--semi-color-primary-light-default); // 范围选择日期格子颜色
-$color-datepicker_date_inRangeHover-bg-default: var(--semi-color-fill-0); // 年月面板菜单项背景色 - 悬浮
-$color-datepicker_date_hoverDay-bg-default: var(--semi-color-fill-1); // 年月面板菜单项背景色 - 按下
+$color-datepicker_date_inRangeHover-bg-default: var(--semi-color-fill-0); // 范围选择时悬停路径内的日期背景色
+$color-datepicker_date_hoverDay-bg-default: var(--semi-color-fill-1); // 范围选择时日期格子背景色 - 悬停
 $color-datepicker_date_selectedRange-bg-hover: var(--semi-color-primary-light-hover); // 范围选择日期格子颜色 - 悬浮
 $color-datepicker_date_hoverday_range-bg-default: var(--semi-color-primary-light-active);
 $color-datepicker_date_hoverday_around_single_selected-bg-default: var(--semi-color-primary-light-active);
 
-$color-datepicker_nav_monthIcon-text-default: var(--semi-color-text-0); // 日期选择器 header 文字颜色
+$color-datepicker_nav_monthIcon-text-default: var(--semi-color-text-0); // 顶部导航栏年月文字颜色 - 默认
 $color-datepicker_navIcon-text-default: var(--semi-color-text-2);  // 日期选择器 header 左右箭头颜色
 $color-datepicker_input_primary-text-default: var(--semi-color-primary);
 $color-datepicker_range_input-text-default: var(--semi-color-text-2);

package/inputNumber/foundation.ts

@@ -149,7 +149,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         for (const part of parts) {
             if (part.type === 'decimal') {
                 this._decimalPointSymbol = part.value;
-                console.log('this._decimalPointSymbol: ', this._decimalPointSymbol);
+                // console.log('this._decimalPointSymbol: ', this._decimalPointSymbol);
             }
             // if (part.type === 'group') {
             //     groupSeparator = part.value;

package/jsonViewer/jsonViewer.scss

@@ -3,6 +3,9 @@
 $module: #{$prefix}-json-viewer;
 
 .#{$module} {
+    box-sizing: border-box;
+    padding: $spacing-json-viewer-paddingY $spacing-json-viewer-paddingX;
+
     &-background {
         background-color: $color-json-viewer-background;
     }

package/jsonViewer/variables.scss

@@ -13,3 +13,6 @@ $color-json-viewer-folding-icon: rgba(var(--semi-blue-7), 1); // JSON folding ic
 
 
 $color-json-viewer-line-number: rgba(var(--semi-grey-5), 1); // JSON line number 颜色
+
+$spacing-json-viewer-paddingY: 12px; // JSON 垂直内边距
+$spacing-json-viewer-paddingX: 0; // JSON 水平内边距

package/lib/cjs/button/button.scss

@@ -34,7 +34,7 @@ $module: #{$prefix}-button;
     &.#{$module}-warning,
     &.#{$module}-danger {
         &:focus-visible {
-            outline: $width-button-outline solid $color-button_primary-outline-focus;
+            outline: $width-button-outline solid $color-button_primary_outline-focus;
         }
     }
 

package/lib/cjs/button/variables.scss

@@ -1,7 +1,7 @@
 // primary
 $color-button_primary-bg-default: var(--semi-color-primary); // 主要按钮背景颜色
 $color-button_primary-border-default: transparent; // 主要按钮描边颜色
-$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色
+$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - solid 模式
 
 $color-button_primary-bg-hover: var(--semi-color-primary-hover); // 主要按钮背景颜色 - 悬浮
 $color-button_primary-border-hover: var(--semi-color-primary-hover); // 主要按钮描边颜色 - 悬浮
@@ -10,26 +10,26 @@ $color-button_primary-text-hover: rgba(var(--semi-white), 1); // 主要按钮文
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
 $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
-$color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
-$color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
+$color-button_primary_outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
+$color-button_primary_outline-border-default: var(--semi-color-border); // 主要按钮边框颜色 - 边框模式
 
-$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
+$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮文字颜色 - 浅色/边框/无边框模式
 
-$color-button_primary_solid_colorful-bg-default: var(--semi-color-ai-general); // colorful 主要按钮背景颜色 - 深色主题
-$color-button_primary_solid_colorful-bg-hover: var(--semi-color-ai-general-hover); // colorful 主要按钮背景颜色 - 深色主题 - 悬浮
-$color-button_primary_solid_colorful-bg-active: var(--semi-color-ai-general-active); // colorful 主要按钮背景颜色 - 深色主题 - 按下
+$color-button_primary_solid_colorful-bg-default: var(--semi-color-ai-general); // Colorful 主要按钮背景颜色 - solid 主题
+$color-button_primary_solid_colorful-bg-hover: var(--semi-color-ai-general-hover); // Colorful 主要按钮背景颜色 - solid 主题 - 悬浮
+$color-button_primary_solid_colorful-bg-active: var(--semi-color-ai-general-active); // Colorful 主要按钮背景颜色 - solid 主题 - 按下
 
-$color-button_primary_light_colorful-text-default: var(--semi-color-ai-general); // colorful 主要按钮文字颜色 - 浅色色主题
+$color-button_primary_light_colorful-text-default: var(--semi-color-ai-general); // Colorful 主要按钮文字填充色 - 浅色模式
 
-$color-button_primary_light_outline-text-default: var(--semi-color-ai-purple); // colorful 主要按钮文字颜色 - 边框模式
-$color-button_primary_light_outline-border: var(--semi-color-ai-purple); // colorful 主要按钮文字颜色 - 边框模式
+$color-button_primary_light_outline-text-default: var(--semi-color-ai-purple); // Colorful 主要按钮文字颜色 - 边框模式
+$color-button_primary_light_outline-border: var(--semi-color-ai-purple); // Colorful 主要按钮边框颜色 - 边框模式
 
-$color-button_primary_light_borderless-text-default: var(--semi-color-ai-general); // colorful 主要按钮文字颜色 - 无背景
+$color-button_primary_light_borderless-text-default: var(--semi-color-ai-general); // Colorful 主要按钮文字填充色 - 无边框模式
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
-$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色
+$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - solid 模式
 
 $color-button_secondary-bg-hover: var(--semi-color-secondary-hover); // 次要按钮背景颜色 - 悬浮
 $color-button_secondary-border-hover: var(--semi-color-secondary-hover); // 次要按钮描边颜色 - 悬浮
@@ -38,14 +38,14 @@ $color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮
 $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要按钮背景颜色 - 按下
 $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
 $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
-$color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
+$color-button_secondary_outline-border-default: var(--semi-color-border); // 次要按钮边框颜色 - 边框模式
 
-$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
+$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮文字颜色 - 浅色/边框/无边框模式
 
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
-$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色
+$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - solid 模式
 
 $color-button_danger-bg-hover: var(--semi-color-danger-hover); // 危险按钮背景颜色 - 悬浮
 $color-button_danger-border-hover: var(--semi-color-danger); // 危险按钮描边颜色 - 悬浮
@@ -55,14 +55,14 @@ $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
 $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
-$color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
+$color-button_danger_outline-border-default: var(--semi-color-danger); // 危险按钮边框颜色 - 边框模式
 
-$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
+$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮文字颜色 - 浅色/边框/无边框模式
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
-$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色
+$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - solid 模式
 
 $color-button_warning-bg-hover: var(--semi-color-warning-hover); // 警告按钮背景颜色 - 悬浮
 $color-button_warning-border-hover: var(--semi-color-warning-hover); // 警告按钮描边颜色 - 悬浮
@@ -72,18 +72,18 @@ $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
 $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
-$color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
-$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
+$color-button_warning_outline-border-default: var(--semi-color-warning); // 警告按钮边框颜色 - 边框模式
+$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮文字颜色 - 浅色/边框/无边框模式
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
-$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色
+$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - solid 模式
 
 $color-button_tertiary_solid_colorful-bg-default: var(--semi-ai-general-0); // colorful 第三按钮背景颜色
 $color-button_tertiary_solid_colorful-bg-hover: var(--semi-ai-general-1); // colorful 第三按钮背景颜色 - 悬浮
 $color-button_tertiary_solid_colorful-bg-active: var(--semi-ai-general-2); // colorful 第三按钮背景颜色 - 按下
-$color-button_tertiary_solid_colorful-text-default: var(--semi-color-ai-general); // colorful 第三按钮文字颜色
+$color-button_tertiary_solid_colorful-text-default: var(--semi-color-ai-general); // Colorful 第三按钮文字填充色 - solid 主题
 
 $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover); // 第三按钮背景颜色 - 悬浮
 $color-button_tertiary-border-hover: var(--semi-color-tertiary-hover); // 第三按钮描边颜色 - 悬浮
@@ -92,22 +92,22 @@ $color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
 $color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
-$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 tertiary 边框颜色
-$color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
+$color-button_tertiary_outline-border-default: var(--semi-color-border); // 第三按钮边框颜色 - 边框模式
+$color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 第三按钮文字颜色 - 浅色/边框/无边框模式
 
 // disabled
-$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 深色主题
+$color-button_disabled_solid-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - solid 主题
 $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 浅色主题或无背景
 $color-button_disabled_outline_text-default: var(--semi-color-disabled-text); // 禁用按钮文字颜色 - 边框模式
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
-$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 深色主题 - 悬浮
+$color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - solid 主题 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
 $color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
 $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
 $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
 $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
 $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
-$color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
+$color-button_disabled_outline-border-default: var(--semi-color-border); // 禁用按钮边框颜色 - 边框模式
 
 
 // light
@@ -126,7 +126,7 @@ $color-button_disabled_light_warning-bg-default: $color-button_light-bg-default;
 $color-button_disabled_light_tertiary-bg-default: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
 
 // borderless
-$color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
+$color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮文字颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
 $color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
 $color-button_borderless-border-default: transparent; // 无背景按钮描边颜色
@@ -203,7 +203,7 @@ $radius-button_group: $radius-button; // 按钮组圆角大小
 $width-button-outline: 2px; // 按钮轮廓宽度
 
 
-$radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
-$radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
-$radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
-$radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
+$radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // 组合按钮(Split) - 首个按钮左上圆角
+$radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // 组合按钮(Split) - 首个按钮左下圆角
+$radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // 组合按钮(Split) - 末尾按钮右上圆角
+$radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // 组合按钮(Split) - 末尾按钮右下圆角