feat: add some token (#1360)

* feat: add some token

* feat: add some token, add changelog

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

@@ -15,6 +15,10 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 -   **Patch version**: Only include bug fix, the release time is not limited
 
 ---
+#### 🎉 2.27.0-beta.0 (2023-01-03)
+- 【Feat】
+    - Add top margin token `$spacing-form_label-marginTop` `$spacing-form_section_text-paddingTop` `$spacing-form_section_text-marginTop` in the label section of Form, add trigger border related token in datePicker range mode (width `$width -datepicker_range_trigger-border`, colors in various states `$color-datepicker_range_trigger-border` `$color-datepicker_range_trigger-border-hover` `$color-datepicker_range_trigger-border-active`), steps modify `$color-steps_item_left_number_icon- bg` `$color-steps_item_left_number_icon-icon` `$color-steps_item_process_left_number-icon` Description.
+
 #### 🎉 2.26.0 (2022-12-27)
 - 【Fix】
     - fix the problem that when TagInput is input in Chinese, the length of pinyin will be used to judge whether it exceeds maxLength  [#1347 ](https://github.com/DouyinFE/semi-design/issues/1347)

content/start/changelog/index.md

@@ -15,6 +15,10 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 
 ---
+#### 🎉 2.27.0-beta.0 (2023-01-03)
+- 【Feat】
+    - Form 的 label section 新增上边距 token `$spacing-form_label-marginTop` `$spacing-form_section_text-paddingTop` `$spacing-form_section_text-marginTop`，datePicker range 模式下新增 trigger 边框相关 token (宽度 `$width-datepicker_range_trigger-border`，各种状态下的颜色 `$color-datepicker_range_trigger-border` `$color-datepicker_range_trigger-border-hover` `$color-datepicker_range_trigger-border-active`)，steps 修改 `$color-steps_item_left_number_icon-bg` `$color-steps_item_left_number_icon-icon` `$color-steps_item_process_left_number-icon` 描述。
+
 #### 🎉 2.26.0 (2022-12-27)
 - 【Fix】
     - 修复 TagInput 在中文输入时，会将拼音的长度用于判断是否超出 maxLength 的问题  [#1347 ](https://github.com/DouyinFE/semi-design/issues/1347)

packages/semi-foundation/datePicker/datePicker.scss

@@ -859,6 +859,17 @@ $module-list: #{$prefix}-scrolllist;
             height: $height-datepicker_range_input-default;
             color: $color-datepicker_range_input-text-default;
             background-color: $color-datepicker_range_input-bg-default;
+            border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
+
+            &:hover{
+                border-color: $color-datepicker_range_trigger-border-hover
+            }
+
+            &:active{
+                border-color: $color-datepicker_range_trigger-border-active ;
+            }
+
+
 
             &-wrapper {
                 box-sizing: border-box;

packages/semi-foundation/datePicker/variables.scss

@@ -34,6 +34,7 @@ $width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输
 $height-datepicker_insetInput_separator: 32px;
 $height-datepicker_month_grid_yearType_insetInput: 317px;
 $height-datepicker_month_grid_timeType_insetInput: 317px;
+$width-datepicker_range_trigger-border: 0px; //  触发器边框宽度
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) * 0.5; // 日期格子水平外边距
@@ -142,6 +143,11 @@ $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
 $color-datepicker_insetInput_separator: var(--semi-color-text-3);
+$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
+$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
+$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
+
+
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;

packages/semi-foundation/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        margin-top: $spacing-form_label-marginTop;
         padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
@@ -288,8 +289,10 @@ $rating: #{$prefix}-rating;
         font-weight: 600;
         width: 100%;
         padding-bottom: $spacing-form_section_text-paddingBottom;
+        padding-top: $spacing-form_section_text-paddingTop;
         border-bottom: $width-form_section-border solid $color-form_section-border-default;
         margin-bottom: $spacing-form_section_text-marginBottom;
+        margin-top: $spacing-form_section_text-marginTop;
         color: $color-form_section-text-default;
     }
 

packages/semi-foundation/form/variables.scss

@@ -10,6 +10,7 @@ $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直
 $spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label-marginTop: 0px; // 表单项标签顶部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
 $spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
 $spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
@@ -47,4 +48,6 @@ $width-form_section-border: $border-thickness-control; // 表单分组标题底
 $spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
 $spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
 $spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+$spacing-form_section_text-paddingTop: 0px; // 表单分组标题顶部内边距
+$spacing-form_section_text-marginTop: 0px; // 表单分组标题顶部外边距
 

packages/semi-foundation/steps/variables.scss

@@ -16,10 +16,10 @@ $color-steps_item_error_left-icon: var(--semi-color-danger); // 错误步骤条
 $color-steps_item_error_left_number-icon: var(--semi-color-primary); // 错误步骤条数字序号文本颜色
 $color-steps_item_finish-icon: var(--semi-color-primary); // 已完成步骤条图标颜色
 $color-steps_item_finish_number-icon: var(--semi-color-white); // 已完成步骤条对勾图标颜色
-$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 已完成步骤条图标背景颜色
-$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 已完成步骤条图标文字颜色
+$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 步骤条图标背景颜色
+$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 步骤条图标文字颜色
 $color-steps_item_process_left-icon: var(--semi-color-primary); // 进行中步骤条对勾图标颜色
-$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条对勾图标颜色
+$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条内部图标颜色
 $color-steps_item_title-text-hover: var(--semi-color-focus-border); // 步骤条标题文字悬停颜色
 $color-steps_item_wait_left_icon-icon: var(--semi-color-text-2); // 未到达步骤条图标颜色
 $color-steps_item_wait_left_number_icon-bg-hover: var(--semi-color-secondary-light-default); // 未到达步骤条图标背景颜色 - 悬浮态