fix(Label): use correct color for label component

[innovark37]

User description

SUMMARY

Labels were using baseColor.active for text color instead of baseColor.text, causing incorrect text color to be applied across all label types.

TESTING INSTRUCTIONS

1. Navigate to Settings → Themes and apply a custom theme where active and text colors differ for semantic variants (e.g. set colorSuccessText to green and colorSuccessActive to a darker shade).
2. Go to any page that renders Label components (e.g. Explore, SQL Lab).
3. Verify that labels for each variant display the correct text color and NOT the active color.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

---

CodeAnt-AI Description

Fix label text color to use the theme's semantic text color

What Changed

• Label text now uses the theme's semantic "text" color for each variant instead of the variant's "active" color
• Labels render correct text color when custom themes set different "text" and "active" colors (affects labels across the app)
• Hover, border, and background behaviors remain unchanged

Impact

✅ Clearer label text
✅ Accurate theme colors for labels with custom themes
✅ Fewer visual inconsistencies in UI

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[bito-code-review]

Code Review Agent Run #c30fc6

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: cce78ad..cce78ad

  • superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codeant-ai-for-open-source]

Sequence Diagram

This PR fixes the Label component to use the theme semantic text color instead of the active color when rendering label text. The core flow remains the same, but the final text color source is now correct for custom themes.

sequenceDiagram
    participant Page
    participant Label
    participant Theme
    participant ColorVariants

    Page->>Label: Render label with variant
    Label->>Theme: Read current theme
    Label->>ColorVariants: Resolve variant colors
    ColorVariants-->>Label: Return text border and background colors
    Label-->>Page: Render label text with text color

Loading

---

Generated by CodeAnt AI

[Copilot]

Pull request overview

This PR corrects the Label component’s text color to use the theme’s semantic *Text token instead of *Active, ensuring custom themes render label text with the intended color across the app.

Changes:

• Update Label text color to use baseColor.text rather than baseColor.active.

---

You can also share your feedback on Copilot code review. Take the survey.

[bito-code-review]

The suggestion to add a focused unit test is solid—it directly addresses the regression risk by asserting the .ant-tag color uses getColorVariants(theme, type).text instead of .active, especially for custom themes.

superset-frontend/packages/superset-ui-core/src/components/Label/tests/index.test.tsx

import { render } from '@testing-library/react';
import { Label } from '../index';
import { getColorVariants } from '../../../color';

describe('Label', () => {
  it('uses text color variant for .ant-tag', () => {
    const theme = { colors: { primary: { text: '#000', active: '#fff' } } };
    const { container } = render(<Label type="primary" theme={theme} />);
    const tag = container.querySelector('.ant-tag');
    expect(tag).toHaveStyle({ color: getColorVariants(theme, 'primary').text });
  });
});

[msyavuz]

I think this looks semantically correct but can we get some before/after screenshots in default superset theme? Also i have a pr up for custom label tokens for different variations here that might be relevant

[innovark37]

@msyavuz here the screenshots from storybook with applied superset default and dark themes.

BEFORE

AFTER