fix: FIT-747: Make Annotation tabs stand out

[ricardoantoniocm]

This pull request updates the styling of several UI components in the editor to improve visual consistency, use design tokens for spacing and colors, and enhance transitions and interactivity. The main focus is on the AnnotationButton and its related carousel, as well as the top bar.

Screenshots

Before

Carousel Scrolled

After

Carousel Scrolled

AnnotationButton and Carousel Styling Improvements:

• Replaced hardcoded spacing, padding, and gap values in AnnotationButton.scss and AnnotationsCarousel.scss with CSS variables (design tokens) for consistency. [1] [2]
• Updated color variables for backgrounds and text to better match the design system, including subtle adjustments for content and surface colors. [1] [2] [3]
• Changed visibility toggling to use opacity and added smooth transition effects for interactive elements like triggers and pic sections, improving animation and accessibility. [1] [2] [3] [4] [5]
• Enhanced active and hover states with new background and border colors, and ensured icon colors update appropriately on interaction.

These changes collectively modernize the UI, make it more maintainable, and provide a better user experience.

[netlify]

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

Name	Link
🔨 Latest commit	19227bd
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/68e00e74b96a4b0007732afd

[netlify]

✅ Deploy Preview for label-studio-playground canceled.

Name	Link
🔨 Latest commit	19227bd
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/68e00e747130f10008426f19

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	19227bd
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/68e00e748068920008326dde

[netlify]

✅ Deploy Preview for label-studio-storybook canceled.

Name	Link
🔨 Latest commit	19227bd
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/68e00e7419cf9000085625b4

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 60.58%. Comparing base (82f8ae0) to head (19227bd).
⚠️ Report is 7 commits behind head on develop.

Files with missing lines	Patch %	Lines
...onents/AnnotationsCarousel/AnnotationsCarousel.tsx	50.00%	1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (82f8ae0) and HEAD (19227bd). Click for more details.

HEAD has 1 upload less than BASE

Flag	BASE (82f8ae0)	HEAD (19227bd)
pytests	1	0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #8585      +/-   ##
===========================================
- Coverage    67.45%   60.58%   -6.87%     
===========================================
  Files          780      543     -237     
  Lines        59913    38429   -21484     
  Branches     10154    10154              
===========================================
- Hits         40413    23282   -17131     
+ Misses       19497    15144    -4353     
  Partials         3        3              

Flag	Coverage Δ
lsf-e2e	54.80% <50.00%> (-0.01%)	⬇️
lsf-integration	51.29% <50.00%> (ø)
lsf-unit	8.61% <0.00%> (ø)
pytests	?

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.

[ricardoantoniocm]

/git merge

Workflow run
Error: Workflow failed

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: 4 files changed, 40 insertions(+), 13 deletions(-)