chore(ui:tabs): adjust style

Author: xiejay97

packages/ui/src/components/tabs/Tabs.tsx

@@ -146,6 +146,12 @@ export function DTabs<ID extends DId, T extends DTabsOption<ID>>(props: DTabsPro
   useEffect(() => {
     const [asyncGroup, asyncId] = asyncCapture.createGroup();
 
+    if (tablistWrapperRef.current) {
+      asyncGroup.onResize(tablistWrapperRef.current, () => {
+        refreshTabs();
+      });
+    }
+
     if (tablistRef.current) {
       asyncGroup.onResize(tablistRef.current, () => {
         refreshTabs();

packages/ui/src/styles/_variables.scss

@@ -66,6 +66,7 @@ $colors: (
   --#{$variable-prefix}background-color-input: #fff;
   --#{$variable-prefix}background-color-indicator: #dfe1e6;
   --#{$variable-prefix}background-color-disabled: #f5f5f5;
+  --#{$variable-prefix}background-color-gray: hsl(0deg 0% 98%);
   --#{$variable-prefix}color-divider: #eee;
   --#{$variable-prefix}color-border: #d9d9d9;
   --#{$variable-prefix}color-disabled: #d5d5d5;
@@ -96,5 +97,5 @@ $colors: (
   --#{$variable-prefix}empty-color: #a8afbc;
   --#{$variable-prefix}switch-background-color: #d4d6d9;
   --#{$variable-prefix}tag-background-color: rgb(0 0 0 / 6%);
-  --#{$variable-prefix}compose-item-gray-background-color: hsl(0deg 0% 98%);
+  --#{$variable-prefix}tabs-slider-background-color: hsl(0deg 0% 97%);
 }

packages/ui/src/styles/components/compose.scss

@@ -96,7 +96,7 @@
   @include utils-disabled(true);
 
   @include m(gray) {
-    background-color: var(--#{$variable-prefix}compose-item-gray-background-color);
+    background-color: var(--#{$variable-prefix}background-color-gray);
   }
 
   @include m(smaller) {

packages/ui/src/styles/components/tabs.scss

@@ -230,6 +230,7 @@
   $selector: &;
 
   --#{$variable-prefix}tabs-tab-size: 44px;
+  --#{$variable-prefix}tabs-slider-tab-size: 36px;
   --#{$variable-prefix}tabs-tab-gap: 0 32px;
   --#{$variable-prefix}tabs-tab-padding: 16px;
 
@@ -260,6 +261,7 @@
 
   @include m(larger) {
     --#{$variable-prefix}tabs-tab-size: 52px;
+    --#{$variable-prefix}tabs-slider-tab-size: 44px;
     --#{$variable-prefix}tabs-tab-gap: 36px;
     --#{$variable-prefix}tabs-tab-padding: 20px;
 
@@ -270,6 +272,7 @@
 
   @include m(smaller) {
     --#{$variable-prefix}tabs-tab-size: 36px;
+    --#{$variable-prefix}tabs-slider-tab-size: 32px;
     --#{$variable-prefix}tabs-tab-gap: 20px;
     --#{$variable-prefix}tabs-tab-padding: 12px;
 
@@ -279,6 +282,8 @@
   }
 
   @include m(slider) {
+    --#{$variable-prefix}tabs-tab-size: var(--#{$variable-prefix}tabs-slider-tab-size);
+
     &#{$selector}--top,
     &#{$selector}--bottom {
       .#{$variable-prefix}tab {
@@ -288,11 +293,13 @@
 
     @include e(tablist-wrapper) {
       padding: 0;
-      background-color: var(--#{$variable-prefix}background-color-primary);
+      border-radius: var(--#{$variable-prefix}border-radius);
     }
 
     @include e(tablist) {
       gap: 0;
+      min-width: unset;
+      background-color: var(--#{$variable-prefix}tabs-slider-background-color);
 
       &::after {
         content: none;
@@ -386,7 +393,7 @@
     position: absolute;
     z-index: 1;
     pointer-events: none;
-    background-color: var(--#{$variable-prefix}background-color-primary);
+    background-color: var(--#{$variable-prefix}background-color-gray);
     border: 1px solid var(--#{$variable-prefix}background-color-indicator);
     opacity: 0;
   }

packages/ui/src/styles/theme-dark.scss

@@ -27,6 +27,7 @@ body.dark {
   --#{$variable-prefix}background-color-input: #121212;
   --#{$variable-prefix}background-color-indicator: #3d3e40;
   --#{$variable-prefix}background-color-disabled: #2c2c2c;
+  --#{$variable-prefix}background-color-gray: hsl(0deg 0% 0%);
   --#{$variable-prefix}color-divider: #303030;
   --#{$variable-prefix}color-border: #434343;
   --#{$variable-prefix}color-disabled: #4e4e50;
@@ -57,5 +58,5 @@ body.dark {
   --#{$variable-prefix}empty-color: #868a93;
   --#{$variable-prefix}switch-background-color: #5f6164;
   --#{$variable-prefix}tag-background-color: rgb(255 255 255 / 10%);
-  --#{$variable-prefix}compose-item-gray-background-color: hsl(0deg 0% 2%);
+  --#{$variable-prefix}tabs-slider-background-color: hsl(0deg 0% 0%);
 }