fix: OPTIC-2155: Info tab is not optimized for dark mode for TimeSeriesLabel with underlying Choices

[ricardoantoniocm]

Reason for change

The text displayed in the Info tab for TimeSeriesLabel selections was not optimized for dark mode, resulting in black text on a dark background, which reduces readability. This change addresses this issue by ensuring the text color adapts appropriately for both light and dark modes, improving the user experience.

Screenshots

Before:

After:

Rollout strategy

This is a small visual change and does not require a specific rollout strategy. The changes will be deployed with the next release.

Testing

1. Verify Dark Mode:

   • Navigate to the LSO/LSE application in dark mode.
   • Create a project with the "Signal Quality" template.
   • Create a label, select it and choose an option from the Choices.
   • Open the Info tab.
   • Confirm that the text for both the key and value pairs is easily readable against the dark background (using the color-neutral-content color).
   • Confirm that the background of the value is a lighter color (color-primary-background) providing sufficient contrast.
   • Verify the added padding and rounded corners improve the visual consistency.

2. Verify Light Mode:

   • Switch to Light Mode.
   • Confirm that the text and background colors in the Info tab are appropriate and readable in light mode.

Risks

There are minimal risks associated with this change as it primarily involves styling adjustments. However, potential risks include:

• Unexpected visual regressions: The new styles might inadvertently affect other elements in the application. Thorough testing in both light and dark modes should mitigate this.

Reviewer notes

• Please pay close attention to the contrast ratio between the text and background in both light and dark modes to ensure accessibility.
• Verify that the added padding and rounded corners are applied consistently with other similar elements in the application.
• Confirm that no other unintended visual changes have been introduced.

General notes

• The text color for the key and value pairs has been set to the color-neutral-content token.
• The background color for the value has been set to the color-primary-background token.
• Padding and rounded corners have been added to the value for better visual consistency.

[netlify]

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

Name	Link
🔨 Latest commit	4c5b09b
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/681e1fa9b6471400089be211

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	4c5b09b
🔍 Latest deploy log	https://app.netlify.com/sites/heartex-docs/deploys/681e1fa9c2ac2e00082125f4

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	4c5b09b
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-storybook/deploys/681e1fa91a8a6b00087b08b8
😎 Deploy Preview	https://deploy-preview-7492--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 site configuration.

[Copilot]

Pull Request Overview

This PR fixes an issue with dark mode readability in the Info tab for TimeSeriesLabel selections by updating the text and background colors, as well as the padding and border radius for improved visual consistency.

• Updated the text color for primary elements to use the neutral content token.
• Modified the nested styling for the .ant-typography mark element to ensure proper background contrast and padding.

[AndrejOros]

/fm sync

Workflow run

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: rename web/libs/datamanager/src/components/App/{App.jsx => App.tsx} (73%)