Skip to content

feat: change date picker contrast#2467

Merged
amir-ba merged 2 commits intotelekom:mainfrom
tibisabau:feat/date-picker-contrast
Apr 8, 2026
Merged

feat: change date picker contrast#2467
amir-ba merged 2 commits intotelekom:mainfrom
tibisabau:feat/date-picker-contrast

Conversation

@tibisabau
Copy link
Copy Markdown
Contributor

Description

Improved the contrast between active and inactive dates within the same month in the Date-Picker component to enhance accessibility and usability. The previous implementation used a disabled color token with full opacity, resulting in insufficient visual distinction between selectable and non-selectable dates.

The solution reduces the opacity of inactive (disabled) dates from 1.0 to 0.4 while using the standard text color. This creates a clear visual hierarchy where active dates appear at full opacity with the standard color, while inactive dates appear significantly lighter (40% opacity). This approach ensures WCAG compliance and works consistently across both light and dark themes since opacity is relative to the background.

Closes #2436.

Checklist if Applicable

  • The tests passed – no tests required for CSS-only changes
  • Linting passed – yarn lint and yarn format executed successfully in packages/components
  • Documentation has been added
  • CHANGELOG.md has been updated

@tibisabau tibisabau requested a review from maomaoZH as a code owner February 27, 2026 16:20
Copilot AI review requested due to automatic review settings February 27, 2026 16:20
@tibisabau tibisabau requested a review from amir-ba as a code owner February 27, 2026 16:20
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves accessibility in the Date-Picker component by enhancing the visual contrast between active and inactive dates within the same month. The change addresses issue #2436 by modifying the styling of disabled dates to make them more distinguishable from selectable dates.

Changes:

  • Modified disabled date styling to use reduced opacity (0.4) with standard text color instead of the disabled color token at full opacity
  • This creates clearer visual hierarchy while maintaining WCAG compliance across light and dark themes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@amir-ba
Copy link
Copy Markdown
Collaborator

amir-ba commented Mar 10, 2026

Thanks for the PR but this requires a fix on the visual tests to run them you need to have docker available and run yarn workspace @telekom/scale-visual-tests test -u to update the snapshots based on the visual changes made.
ou must then commit the changed snapshots as well

Copy link
Copy Markdown
Collaborator

@amir-ba amir-ba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM tnx

@amir-ba amir-ba merged commit 8eed7ac into telekom:main Apr 8, 2026
13 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Date-Picker contrast

3 participants