fix: FIT-66: Chatbot Model Assessment template is not optimized for dark mode

[ricardoantoniocm]

Reason for change

The Chatbot Model Assessment template preview was not optimized for Dark mode, leading to a poor user experience.
This PR addresses the issue by refactoring the styling of the template to utilize CSS variables, ensuring proper theme consistency and maintainability across different modes. Specifically, hardcoded CSS values have been replaced with variables for padding, colors, border-radius, box-shadow, and gap within config.yml.

Additionally, custom styling for Ant Design radio buttons has been introduced in Choice.scss to ensure they are also theme-aware and consistent with the application's design system in both light and dark modes.

Screenshots

Before:

After:

Rollout strategy

This change will be rolled out as part of a standard deployment. No feature flags or environment variables are required.

Testing

The following steps were performed to verify the fix:

1. Logged in as an OWNER to the application.
2. Ensured Dark mode was turned ON.
3. Navigated to the Home page.
4. Clicked on the "Create Project" button.
5. Observed that the "Create Project" modal popped up.
6. Navigated to the "Labeling Setup" tab.
7. Chose the "Chatbot Model Assessment" template from the Template Gallery.
8. Confirmed that the UI Preview is now correctly adapted to Dark mode, with all elements, including radio buttons, displaying as expected.

Risks

No significant risks are anticipated with this change. The refactoring primarily involves styling adjustments and does not alter core functionality.

Reviewer notes

Please review the changes in config.yml and Choice.scss to ensure that the CSS variable usage is consistent and correctly applied across the components.

General notes

The overall goal of these changes is to unify and modernize the styling by leveraging CSS variables, making the UI components more consistent and theme-friendly, and improving maintainability.

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	b4b8192
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/682e475b730392000834e27c

[netlify]

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	b4b8192
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/682e475bfde485000835299f

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	b4b8192
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/682e475b9d64c80008eb7e95
😎 Deploy Preview	https://deploy-preview-7589--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull Request Overview

This PR refactors styling in the Chatbot Model Assessment template to use CSS variables for consistent dark-mode support across components.

• Replaced hardcoded paddings, colors, borders, and shadows in config.yml with CSS variables
• Added custom Ant Design radio button overrides in Choice.scss to be theme-aware

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
web/libs/editor/src/tags/control/Choice/Choice.scss	Introduce CSS-variable–based styling for Ant Design radios and hover/focus/checked states
label_studio/annotation_templates/generative-ai/chatbot-assessment/config.yml	Swap hardcoded container styles for CSS variables to ensure dark-mode consistency

Comments suppressed due to low confidence (1)

label_studio/annotation_templates/generative-ai/chatbot-assessment/config.yml:34

• The .assessment-item block removed its background, border-radius, and box-shadow, so items may no longer be visually separated. Reintroduce these using CSS variables (e.g., background-color: var(--color-neutral-surface); border-radius: var(--corner-radius-small); box-shadow: 0 2px 4px var(--color-neutral-shadow);).

      padding: 1px;

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.76%. Comparing base (d3a6ba6) to head (b4b8192).
Report is 7 commits behind head on develop.

⚠️ Parser warning

The parser emitted a warning. Please review your JUnit XML file:

Warning while parsing testcase attributes: Limit of string is 1000 chars, for name, we got 1222 at 1:58215 in /home/runner/work/label-studio/label-studio/label_studio/functional.xml

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7589      +/-   ##
===========================================
- Coverage    77.81%   77.76%   -0.05%     
===========================================
  Files          197      197              
  Lines        15887    15887              
===========================================
- Hits         12362    12355       -7     
- Misses        3525     3532       +7     

Flag	Coverage Δ
pytests	77.76% <ø> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.