fix: FIT-137: Text area in content moderation template not optimized for dark mode

[ricardoantoniocm]

Reason for change

This PR addresses several UI and styling inconsistencies, particularly in Dark Mode, across various labeling templates. The primary goal is to modernize and unify the styling of Label Studio UI components and templates by replacing hardcoded CSS values with CSS variables and Tailwind CSS utility classes. This improves maintainability, enables better theme support, and resolves several reported issues where elements were barely visible or not optimized for Dark Mode.

Specifically, this PR resolves the following issues:

• Content Moderation Template Dark Mode Optimization: The text area in the Content Moderation template was not optimized for Dark Mode, leading to poor visibility of the text and surrounding elements. This fix ensures proper adaptation to Dark Mode.
• Pairwise Classification Template Item Selection: In Dark Mode, selected items in the Pairwise classification template were not visible due to unoptimized colors. The changes introduce proper styling for selected items in Dark Mode.
• Conversational Analysis Template Author Names: Author names in the dropdown on the Conversational Analysis template were barely visible in Dark Mode. This PR adjusts the styling to ensure visibility.
• Ranker Template Dark Mode Optimization: The default text in the Ranker template was barely visible in Dark Mode on both the Preview page and in Quick View. This fix optimizes the template for Dark Mode.

These changes also include:

• Theme and Style Updates for Consistency and Customization: Replaced hardcoded CSS values with CSS variables and updated box-shadow, border, and background properties to use semantic, theme-driven variables.
• Annotation Template and Example Adjustments: Updated config files for annotation templates to use the new CSS variables and semantic class names.
• Code Improvements in Pairwise Tag (Pairwise.js): Refactored setResult logic to support both inline style and Tailwind className-based selection, added interactive classes, and improved error handling.
• Documentation and Example Updates: Updated markdown documentation to use the new CSS variable-based border colors.
• Miscellaneous Style Fixes: Updated Paragraphs.module.scss to use CSS variables for border and color properties.

Screenshots

Before:

Pairwise Classification:

Author Names:

LLM Ranker:

Text to Image Generation:

After:

Pairwise Classification:

Author Names:

LLM Ranker:

Text to Image Generation:

Rollout strategy

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

Testing

The following testing has been performed:

• Manual verification of all affected templates (Content Moderation, Pairwise Classification, Conversational Analysis, Ranker) in Dark Mode to ensure that all previously reported visibility issues are resolved.
• Visual inspection of various UI components across the application to confirm that the transition to CSS variables and Tailwind classes has not introduced any regressions or new visual issues.
• Functional testing of the Pairwise control component to ensure that item selection and result setting work as expected with the refactored setResult logic.
• Verification of console logs for any warnings or errors related to missing left or right object references in the Pairwise component.

Detailed steps to reproduce and verify fixes for each ticket are available in the linked Jira issues. Screenshots will be added to confirm the fixes for each template.

Risks

• Minor Visual Regressions: While care has been taken to ensure consistency, there is a low risk of minor visual regressions in less frequently used parts of the UI due to the widespread change from hardcoded CSS to variables.
• Performance Impact: The use of CSS variables generally has minimal to no performance impact. However, a slight increase in CSS file size could occur, which is not expected to be significant.

Reviewer notes

• Please pay close attention to the visual consistency of the updated components, especially in Dark Mode, to ensure all elements are properly styled.
• Verify the functionality of the Pairwise tag to ensure selections are correctly applied and displayed.
• Confirm that the transition to CSS variables and Tailwind classes has been applied consistently across the mentioned files.

General notes

This PR represents a significant step towards a more unified and maintainable UI styling system. The adoption of CSS variables and Tailwind CSS will make future theme adjustments and UI enhancements much more efficient.

[netlify]

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

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

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	e68faf7
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/682e000f199958000869a98f
😎 Deploy Preview	https://deploy-preview-7584--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.

[netlify]

✅ Deploy Preview for heartex-docs canceled.

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.82%. Comparing base (d1cb3b6) to head (e68faf7).
Report is 3 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:45997 in /home/runner/work/label-studio/label-studio/label_studio/functional.xml

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7584      +/-   ##
===========================================
+ Coverage    77.77%   77.82%   +0.05%     
===========================================
  Files          197      197              
  Lines        15887    15887              
===========================================
+ Hits         12356    12364       +8     
+ Misses        3531     3523       -8     

Flag	Coverage Δ
pytests	77.82% <ø> (+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.

[Copilot]

Pull Request Overview

This PR optimizes Dark Mode styling and improves maintainability across several Label Studio templates by replacing hardcoded CSS values with CSS variables and Tailwind CSS utility classes.

• Updated styling in SCSS and YAML configuration files to use theme-driven variables.
• Refactored the Pairwise component to support both inline style and className-based selection with improved error handling.
• Updated example annotation JSON to reflect changes in component naming conventions.

Reviewed Changes

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

Show a summary per file

File	Description
web/libs/editor/src/tags/object/Paragraphs/Paragraphs.module.scss	Updated border and text color to use CSS variables.
web/libs/editor/src/tags/control/Pairwise.js	Added checks for missing object references and refactored selection styling logic.
web/libs/editor/src/examples/pairwise/annotations/1.json	Changed the "to_name" field value to match updated component naming.
label_studio/annotation_templates/ranking-and-scoring/text-to-image/config.yml	Replaced hardcoded styles with semantic CSS variables.
label_studio/annotation_templates/natural-language-processing/content-moderation/config.yml	Updated the styling in the view components for Dark Mode optimization.
label_studio/annotation_templates/generative-ai/llm-ranker/config.yml	Updated ranking component styles using new CSS variable standards.
docs/source/templates/text_to_image.md	Demonstrated new style guidelines in documentation.
docs/source/templates/content_moderation.md	Updated documentation to align with the new styling conventions.

Comments suppressed due to low confidence (1)

web/libs/editor/src/examples/pairwise/annotations/1.json:10

• Ensure that the updated 'to_name' value 'txt-2' correctly matches the expected identifier in the associated Pairwise component configuration. If the component still expects 'pw', this change may lead to mismatches in how annotations are linked.

                    "to_name": "txt-2",