Skip to content

chore: optimize the token descriptions of 10 frequently used custom components #3055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
YyumeiZhang merged 3 commits into from
Jan 14, 2026
+201 −203
Merged

chore: optimize the token descriptions of 10 frequently used custom components #3055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2375eff
chore: optimize the token descriptions of 10 frequently used custom c…
YannLynn Nov 25, 2025
99a4249
chore: update token
YannLynn Nov 27, 2025
d83aab8
chore: optimize the token descriptions of 10 frequently used custom c…
YannLynn Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/semi-foundation/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
64 changes: 32 additions & 32 deletions packages/semi-foundation/button/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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); // 主要按钮描边颜色 - 悬浮
Expand All @@ -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); // 次要按钮描边颜色 - 悬浮
Expand All @@ -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); // 危险按钮描边颜色 - 悬浮
Expand All @@ -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); // 警告按钮描边颜色 - 悬浮
Expand All @@ -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); // 第三按钮描边颜色 - 悬浮
Expand All @@ -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
Expand All @@ -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; // 无背景按钮描边颜色
Expand Down Expand Up @@ -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) - 末尾按钮右下圆角
26 changes: 13 additions & 13 deletions packages/semi-foundation/cascader/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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); // 级联选择菜单项背景颜色 - 悬浮
Expand Down Expand Up @@ -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; // 级联选择菜单项图标颜色
Expand Down Expand Up @@ -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; //级联选择多选搜索时搜索框最小高度 - 小尺寸
Expand All @@ -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; // 级联选择搜索垂直内边距
Expand Down
Loading
Loading