@douyinfe/semi-ui 2.13.0-beta.0 → 2.14.0-beta.0

package/datePicker/datePicker.tsx

@@ -653,13 +653,21 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
-                {topSlot && <div className={`${cssClasses.PREFIX}-topSlot`}>{topSlot}</div>}
+                {topSlot && (
+                    <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
+                        {topSlot}
+                    </div>
+                )}
                 {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
-                {this.adapter.typeIsYearOrMonth() ?
-                    this.renderYearMonthPanel(locale, localeCode) :
-                    this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
+                {this.adapter.typeIsYearOrMonth()
+                    ? this.renderYearMonthPanel(locale, localeCode)
+                    : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
                 {this.renderQuickControls()}
-                {bottomSlot && <div className={`${cssClasses.PREFIX}-bottomSlot`}>{bottomSlot}</div>}
+                {bottomSlot && (
+                    <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
+                        {bottomSlot}
+                    </div>
+                )}
                 {this.renderFooter(locale, localeCode)}
             </div>
         );

package/dist/css/semi.css

@@ -345,13 +345,13 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
   --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
   --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary: rgba(var(--semi-blue-5), 1);
-  --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
-  --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
-  --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary-light-default: rgba(var(--semi-blue-0), 1);
-  --semi-color-secondary-light-hover: rgba(var(--semi-blue-1), 1);
-  --semi-color-secondary-light-active: rgba(var(--semi-blue-2), 1);
+  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
+  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
+  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
+  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
+  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
+  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
+  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
   --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
   --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
   --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -433,13 +433,13 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
   --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
   --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
-  --semi-color-secondary: rgba(var(--semi-blue-5), 1);
-  --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
-  --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
-  --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary-light-default: rgba(var(--semi-blue-5), .2);
-  --semi-color-secondary-light-hover: rgba(var(--semi-blue-5), .3);
-  --semi-color-secondary-light-active: rgba(var(--semi-blue-5), .4);
+  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
+  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
+  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
+  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
+  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
+  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
+  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
   --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
   --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
   --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -750,6 +750,15 @@ body[theme-mode=dark], body .semi-always-dark {
   text-align: center;
   vertical-align: middle;
 }
+.semi-avatar:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-avatar-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-avatar-no-focus-visible:focus-visible {
+  outline: none;
+}
 .semi-avatar .semi-avatar-label {
   display: flex;
   align-items: center;
@@ -2959,6 +2968,11 @@ body[theme-mode=dark], body .semi-always-dark {
   min-height: 40px;
   line-height: 40px;
 }
+.semi-cascader-large .semi-cascader-selection {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 .semi-cascader-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
@@ -11825,6 +11839,12 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-input-wrapper .semi-input-modebtn:hover .semi-icon {
   color: var(--semi-color-primary-hover);
 }
+.semi-input-wrapper .semi-input-clearbtn:focus-visible,
+.semi-input-wrapper .semi-input-modebtn:focus-visible {
+  border-radius: var(--semi-border-radius-small);
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
 .semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn {
   min-width: 24px;
   justify-content: flex-end;
@@ -12523,6 +12543,7 @@ body[theme-mode=dark], body .semi-always-dark {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
   margin: 80px auto;
+  color: var(--semi-color-text-0);
 }
 .semi-modal-mask {
   position: fixed;
@@ -14491,6 +14512,12 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: 24px;
   box-sizing: border-box;
 }
+.semi-radio-focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
+.semi-radio-focus-border {
+  border: solid 1px var(--semi-color-focus-border);
+}
 
 .semi-radioGroup {
   font-size: 14px;
@@ -14963,6 +14990,11 @@ body[theme-mode=dark], body .semi-always-dark {
   min-height: 40px;
   line-height: 40px;
 }
+.semi-select-large .semi-select-selection {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 .semi-select-open, .semi-select-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
@@ -17479,6 +17511,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-tabs-pane {
   width: 100%;
   overflow: hidden;
+  color: var(--semi-color-text-0);
 }
 .semi-tabs-pane:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -18183,7 +18216,7 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-2);
 }
 .semi-tagInput-suffix-text {
-  color: var(--semi-color-text-1);
+  color: var(--semi-color-text-2);
 }
 
 .semi-rtl .semi-tagInput,
@@ -18232,6 +18265,12 @@ body[theme-mode=dark], body .semi-always-dark {
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: var(--semi-border-radius-medium);
 }
+.semi-timepicker-range-panel .semi-timepicker-lists .semi-scrolllist:first-of-type {
+  border-radius: var(--semi-border-radius-medium) 0 0 var(--semi-border-radius-medium);
+}
+.semi-timepicker-range-panel .semi-timepicker-lists .semi-scrolllist:last-of-type {
+  border-radius: 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0;
+}
 .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body {
   border-right: 2px solid var(--semi-color-border);
 }
@@ -18941,26 +18980,6 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-right: 12px;
 }
 
-.semi-tree {
-  box-sizing: border-box;
-  border-radius: var(--semi-border-radius-small);
-  border: 1px solid transparent;
-  height: 32px;
-  line-height: 32px;
-  font-weight: 400;
-  background-color: var(--semi-color-fill-0);
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  cursor: pointer;
-}
-.semi-tree:hover {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-tree-focus {
-  border: 1px solid var(--semi-color-focus-border);
-  outline: 0;
-}
 .semi-tree-search-wrapper {
   padding: 8px 12px;
 }
@@ -19596,6 +19615,11 @@ body[theme-mode=dark], body .semi-always-dark {
   min-height: 40px;
   line-height: 40px;
 }
+.semi-tree-select-large .semi-tree-select-selection {
+  font-size: 16px;
+  line-height: 22px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 .semi-tree-select-arrow {
   display: inline-flex;
   align-items: center;
@@ -20390,12 +20414,26 @@ p.semi-typography-extended,
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin-bottom: 4px;
+  color: var(--semi-color-text-0);
+}
+.semi-upload-drag-area-main-text:hover {
+  color: var(--semi-color-text-0);
+}
+.semi-upload-drag-area-main-text:active {
+  color: var(--semi-color-text-0);
 }
 .semi-upload-drag-area-sub-text {
   cursor: pointer;
   font-size: 12px;
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-0);
+}
+.semi-upload-drag-area-sub-text:hover {
+  color: var(--semi-color-text-0);
+}
+.semi-upload-drag-area-sub-text:active {
+  color: var(--semi-color-text-0);
 }
 .semi-upload-drag-area-tips {
   font-size: 12px;