@semi-bot/semi-theme-ceos 1.0.6-beta.1 → 1.0.6-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@semi-bot/semi-theme-ceos",
- "version": "1.0.6-beta.1",
+ "version": "1.0.6-beta.3",
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
  "keywords": [
   "semi-theme",

package/raw.json

@@ -520,7 +520,6 @@
                 "data/--semi-color-data-18": "rgba(212, 88, 212, 1)",
                 "data/--semi-color-data-19": "rgba(188, 198, 255, 1)",
                 "border/--semi-color-border": "rgba(0,0,0, 0.08)",
-                "custom/--semi-color-custom": "rgba(var(--semi-blue-5),1)",
                 "danger/--semi-color-danger": "rgba(var(--semi-red-5), 1)",
                 "shadow/--semi-color-shadow": "rgba(var(--semi-black), 0.04)",
                 "default/--semi-color-default": "rgba(var(--semi-grey-0), 1)",
@@ -537,22 +536,23 @@
                 "info/--semi-color-info-disabled": "rgba(var(--semi-blue-2), 1)",
                 "overlay/--semi-color-overlay-bg": "rgba(22, 22, 26, 0.6)",
                 "border/--semi-color-border-modal": "rgba(var(--semi-grey-9),0.06)",
-                "custom/--semi-color-custom-hover": "rgba(var(--semi-blue-6),1)",
                 "danger/--semi-color-danger-hover": "rgba(var(--semi-red-6), 1)",
                 "highlight/--semi-color-highlight": "rgba(var(--semi-black), 1)",
+                "input/--semi-color-input-HoverBg": "rgba(255,255,255,1)",
                 "secondary/--semi-color-secondary": "rgba(var(--semi-light-blue-5), 1)",
-                "custom/--semi-color-custom-active": "rgba(var(--semi-blue-7),1)",
                 "danger/--semi-color-danger-active": "rgba(var(--semi-red-7), 1)",
                 "disabled/--semi-color-disabled-bg": "rgba(var(--semi-grey-1), 1)",
+                "input/--semi-color-input-ActiveBg": "rgba(255,255,255,1)",
                 "default/--semi-color-default-hover": "rgba(var(--semi-grey-1), 1)",
+                "input/--semi-color-input-DefaultBg": "rgba(255,255,255,1)",
                 "primary/--semi-color-primary-hover": "rgba(var(--semi-brand-6), 1)",
                 "success/--semi-color-success-hover": "rgba(var(--semi-green-6), 1)",
                 "warning/--semi-color-warning-hover": "rgba(var(--semi-orange-6), 1)",
-                "custom/--semi-color-custom-disabled": "rgba(var(--semi-blue-2),1)",
                 "default/--semi-color-default-active": "rgba(var(--semi-grey-2), 1)",
                 "disabled/--semi-color-disabled-fill": "rgba(var(--semi-grey-8), 0.04)",
                 "disabled/--semi-color-disabled-text": "rgba(var(--semi-grey-9), 0.35)",
                 "highlight/--semi-color-highlight-bg": "rgba(var(--semi-yellow-4), 1)",
+                "input/--semi-color-input-DisabledBg": "rgba(var(--semi-grey-5),0.16)",
                 "primary/--semi-color-primary-active": "rgba(var(--semi-brand-7), 1)",
                 "success/--semi-color-success-active": "rgba(var(--semi-green-7), 1)",
                 "warning/--semi-color-warning-active": "rgba(var(--semi-orange-7), 1)",
@@ -716,6 +716,22 @@
             }
         },
         "components": {
+            "input": {
+                "color": {
+                    "$color-input_default-bg-focus": "var(--semi-color-input-DefaultBg)",
+                    "$color-input_default-bg-hover": "var(--semi-color-input-HoverBg)",
+                    "$color-input_default-bg-active": "var(--semi-color-input-ActiveBg)",
+                    "$color-input_default-bg-default": "var(--semi-color-input-DefaultBg)",
+                    "$color-input_default-bg-focus-hover": "var(--semi-color-input-DefaultBg)",
+                    "$color-input_default-border-default": "var(--semi-color-border)"
+                },
+                "height": {
+                    "$height-input_large": "40px",
+                    "$height-input_small": "24px",
+                    "$height-input_default": "34px",
+                    "$height-input_wrapper_default": "36px"
+                }
+            },
             "modal": {
                 "color": {
                     "$color-modal_content-border": "var(--semi-color-border-modal)"
@@ -729,6 +745,11 @@
                 "radius": {
                     "$radius-button": "8px"
                 }
+            },
+            "inputNumber": {
+                "height": {
+                    "$height-inputNumber_button_small": "28px"
+                }
             }
         },
         "typography": {

package/scss/global.scss

@@ -39,7 +39,6 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-color-data-18: rgba(212, 88, 212, 1);
 --semi-color-data-19: rgba(188, 198, 255, 1);
 --semi-color-border: rgba(0,0,0, 0.08);
---semi-color-custom: rgba(var(--semi-blue-5),1);
 --semi-color-danger: rgba(var(--semi-red-5), 1);
 --semi-color-shadow: rgba(var(--semi-black), 0.04);
 --semi-color-default: rgba(var(--semi-grey-0), 1);
@@ -56,22 +55,23 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
 --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
 --semi-color-border-modal: rgba(var(--semi-grey-9),0.06);
---semi-color-custom-hover: rgba(var(--semi-blue-6),1);
 --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
 --semi-color-highlight: rgba(var(--semi-black), 1);
+--semi-color-input-HoverBg: rgba(255,255,255,1);
 --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
---semi-color-custom-active: rgba(var(--semi-blue-7),1);
 --semi-color-danger-active: rgba(var(--semi-red-7), 1);
 --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
+--semi-color-input-ActiveBg: rgba(255,255,255,1);
 --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
+--semi-color-input-DefaultBg: rgba(255,255,255,1);
 --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
 --semi-color-success-hover: rgba(var(--semi-green-6), 1);
 --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
---semi-color-custom-disabled: rgba(var(--semi-blue-2),1);
 --semi-color-default-active: rgba(var(--semi-grey-2), 1);
 --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
 --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
 --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
+--semi-color-input-DisabledBg: rgba(var(--semi-grey-5),0.16);
 --semi-color-primary-active: rgba(var(--semi-brand-7), 1);
 --semi-color-success-active: rgba(var(--semi-green-7), 1);
 --semi-color-warning-active: rgba(var(--semi-orange-7), 1);

package/scss/local.scss

@@ -1,4 +1,15 @@
+$color-input_default-bg-focus: var(--semi-color-input-DefaultBg);
+$color-input_default-bg-hover: var(--semi-color-input-HoverBg);
+$color-input_default-bg-active: var(--semi-color-input-ActiveBg);
+$color-input_default-bg-default: var(--semi-color-input-DefaultBg);
+$color-input_default-bg-focus-hover: var(--semi-color-input-DefaultBg);
+$color-input_default-border-default: var(--semi-color-border);
+$height-input_large: 40px;
+$height-input_small: 24px;
+$height-input_default: 34px;
+$height-input_wrapper_default: 36px;
 $color-modal_content-border: var(--semi-color-border-modal);
 $height-button_small: 28px;
 $height-button_default: 36px;
 $radius-button: 8px;
+$height-inputNumber_button_small: 28px;

package/semi.css

@@ -419,7 +419,6 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-color-data-18: rgba(212, 88, 212, 1);
   --semi-color-data-19: rgba(188, 198, 255, 1);
   --semi-color-border: rgba(0,0,0, 0.08);
-  --semi-color-custom: rgba(var(--semi-blue-5),1);
   --semi-color-danger: rgba(var(--semi-red-5), 1);
   --semi-color-shadow: rgba(var(--semi-black), 0.04);
   --semi-color-default: rgba(var(--semi-grey-0), 1);
@@ -436,22 +435,23 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
   --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
   --semi-color-border-modal: rgba(var(--semi-grey-9),0.06);
-  --semi-color-custom-hover: rgba(var(--semi-blue-6),1);
   --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
+  --semi-color-input-HoverBg: rgba(255,255,255,1);
   --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
-  --semi-color-custom-active: rgba(var(--semi-blue-7),1);
   --semi-color-danger-active: rgba(var(--semi-red-7), 1);
   --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
+  --semi-color-input-ActiveBg: rgba(255,255,255,1);
   --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
+  --semi-color-input-DefaultBg: rgba(255,255,255,1);
   --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
   --semi-color-success-hover: rgba(var(--semi-green-6), 1);
   --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
-  --semi-color-custom-disabled: rgba(var(--semi-blue-2),1);
   --semi-color-default-active: rgba(var(--semi-grey-2), 1);
   --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
   --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
+  --semi-color-input-DisabledBg: rgba(var(--semi-grey-5),0.16);
   --semi-color-primary-active: rgba(var(--semi-brand-7), 1);
   --semi-color-success-active: rgba(var(--semi-green-7), 1);
   --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
@@ -14548,8 +14548,8 @@ img[src=""], img:not([src]) {
   font-size: 14px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
-  background-color: var(--semi-color-fill-0);
-  border: 1px transparent solid;
+  background-color: var(--semi-color-input-DefaultBg);
+  border: 1px var(--semi-color-border) solid;
   border-radius: var(--semi-border-radius-small);
   width: 100%;
   outline: none;
@@ -14560,40 +14560,40 @@ img[src=""], img:not([src]) {
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-input-wrapper-default {
-  height: 32px;
+  height: 36px;
   font-size: 14px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
-  line-height: 30px;
+  line-height: 34px;
 }
 .semi-input-wrapper-small {
   height: 24px;
   font-size: 14px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
-  line-height: 22px;
+  line-height: 24px;
 }
 .semi-input-wrapper-large {
   height: 40px;
   font-size: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 22px;
-  line-height: 38px;
+  line-height: 40px;
 }
 .semi-input-wrapper:hover {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-input-HoverBg);
   border-color: transparent;
 }
 .semi-input-wrapper-focus {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
   border: var(--semi-color-focus-border) solid 1px;
 }
 .semi-input-wrapper-focus:hover {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper-focus:active {
-  background-color: var(--semi-color-fill-2);
+  background-color: var(--semi-color-input-ActiveBg);
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper.semi-input-readonly {
@@ -14707,22 +14707,22 @@ img[src=""], img:not([src]) {
   background-color: transparent;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus {
-  border: 1px transparent solid;
+  border: 1px var(--semi-color-border) solid;
   background-color: transparent;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
   border: 1px transparent solid;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-input-HoverBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-input-HoverBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
   border: 1px var(--semi-color-focus-border) solid;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn {
   border-right-style: none;
@@ -14732,7 +14732,7 @@ img[src=""], img:not([src]) {
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
   box-sizing: border-box;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn {
   border: 1px var(--semi-color-focus-border) solid;
@@ -14751,13 +14751,13 @@ img[src=""], img:not([src]) {
   border-radius: 0;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
-  background-color: var(--semi-color-fill-2);
+  background-color: var(--semi-color-input-ActiveBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
-  background-color: var(--semi-color-fill-2);
+  background-color: var(--semi-color-input-ActiveBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -14872,25 +14872,25 @@ img[src=""], img:not([src]) {
   color: var(--semi-color-text-2);
 }
 .semi-input-large {
-  height: 38px;
+  height: 40px;
   font-size: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 22px;
-  line-height: 38px;
+  line-height: 40px;
 }
 .semi-input-small {
-  height: 22px;
+  height: 24px;
   font-size: 14px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
-  line-height: 22px;
+  line-height: 24px;
 }
 .semi-input-default {
-  height: 30px;
+  height: 34px;
   font-size: 14px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
-  line-height: 30px;
+  line-height: 34px;
 }
 .semi-input-disabled {
   cursor: not-allowed;
@@ -14943,7 +14943,7 @@ img[src=""], img:not([src]) {
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
   color: var(--semi-color-text-2);
   font-size: 14px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -14955,11 +14955,11 @@ img[src=""], img:not([src]) {
 }
 .semi-input-append {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
-  border-left: 1px transparent solid;
+  border-left: 1px var(--semi-color-border) solid;
 }
 .semi-input-prepend {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
-  border-right: 1px transparent solid;
+  border-right: 1px var(--semi-color-border) solid;
 }
 .semi-input-disabled::placeholder {
   color: var(--semi-color-disabled-text);
@@ -15131,12 +15131,12 @@ img[src=""], img:not([src]) {
 .semi-rtl .semi-input-append,
 .semi-portal-rtl .semi-input-append {
   border-left: 0;
-  border-right: 1px transparent solid;
+  border-right: 1px var(--semi-color-border) solid;
 }
 .semi-rtl .semi-input-prepend,
 .semi-portal-rtl .semi-input-prepend {
   border-right: 0;
-  border-left: 1px transparent solid;
+  border-left: 1px var(--semi-color-border) solid;
 }
 .semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
 .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
@@ -15237,7 +15237,7 @@ img[src=""], img:not([src]) {
   height: 38px;
 }
 .semi-input-number-size-small .semi-input-number-suffix-btns {
-  height: 24px;
+  height: 28px;
 }
 .semi-input-number-size-small .semi-input-number-suffix-btns-inner {
   height: 22px;
@@ -26483,24 +26483,24 @@ p.semi-typography-extended,
   display: inline-block;
   position: relative;
   width: 100%;
-  border: 1px transparent solid;
+  border: 1px var(--semi-color-border) solid;
   border-radius: var(--semi-border-radius-small);
   vertical-align: bottom;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-input-textarea-wrapper:hover {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-input-HoverBg);
 }
 .semi-input-textarea-wrapper-focus {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
   border: 1px var(--semi-color-focus-border) solid;
 }
 .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-input-DefaultBg);
 }
 .semi-input-textarea-wrapper:active {
-  background-color: var(--semi-color-fill-2);
+  background-color: var(--semi-color-input-ActiveBg);
 }
 .semi-input-textarea-wrapper .semi-input-clearbtn {
   position: absolute;
@@ -26684,12 +26684,12 @@ p.semi-typography-extended,
 .semi-rtl .semi-input-append,
 .semi-portal-rtl .semi-input-append {
   border-left: 0;
-  border-right: 1px transparent solid;
+  border-right: 1px var(--semi-color-border) solid;
 }
 .semi-rtl .semi-input-prepend,
 .semi-portal-rtl .semi-input-prepend {
   border-right: 0;
-  border-left: 1px transparent solid;
+  border-left: 1px var(--semi-color-border) solid;
 }
 .semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
 .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,