feat(tabs): add active text color variable for selected tab (#1188)

ZhongAnTech · Jan 13, 2025 · e327663 · e327663
1 parent 9db153c
commit e327663
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/zarm/src/tabs/demo.md b/packages/zarm/src/tabs/demo.md
@@ -283,6 +283,7 @@ ReactDOM.render(<Demo />, mountNode);
 | :------------------- | :------------------------------ | :--------------------- |
 | --font-size          | 'var(--za-font-size-md)'        | 字体大小               |
 | --color              | 'var(--za-color-text)'          | 字体颜色               |
+| --active-text-color  | 'var(--za-color-text)'          | 选中状态字体颜色               |
 | --color-disabled     | 'var(--za-color-text-disabled)' | 禁用状态下头部字体颜色 |
 | --height             | '45px'                          | 高度                   |
 | --active-color       | 'var(--za-theme-primary)'       | 选中状态颜色           |

diff --git a/packages/zarm/src/tabs/style/component.scss b/packages/zarm/src/tabs/style/component.scss
@@ -4,6 +4,7 @@
   @include define(color-disabled, var(--za-color-text-disabled));
   @include define(height, 45px);
   @include define(active-color, var(--za-theme-primary));
+  @include define(active-text-color, var(--za-color-text));
   @include define(active-line-height, 2px);
   @include define(padding-horizontal, var(--za-padding-h-lg));
   @include define(padding-vertical, var(--za-padding-v-md));
@@ -45,6 +46,10 @@
       color: var(--color-disabled);
       cursor: not-allowed;
     }
+
+    @include m(active) {
+      color: var(--active-text-color);
+    }
   }
 
   @include e(line) {