Skip to content

fix(material/datepicker): improve comparison range colors#33314

Open
EduardF1 wants to merge 2 commits into
angular:mainfrom
EduardF1:fix-datepicker-comparison-colors
Open

fix(material/datepicker): improve comparison range colors#33314
EduardF1 wants to merge 2 commits into
angular:mainfrom
EduardF1:fix-datepicker-comparison-colors

Conversation

@EduardF1
Copy link
Copy Markdown

Fixes #31663

Summary

  • Updates Material 3 datepicker comparison and overlap range tokens to use the same clearer amber/green defaults exposed by datepicker-date-range-colors.
  • Avoids relying on M3 tertiary/secondary container colors that can be too similar to the primary range in default themes.

Validation

  • pnpm exec stylelint "src/material/datepicker/_m3-datepicker.scss" --config .stylelintrc.json
  • pnpm exec sass --load-path=node_modules src/material/datepicker/_m3-datepicker.scss
  • pnpm exec prettier --check src/material/datepicker/_m3-datepicker.scss
  • git diff --check

Note: pnpm -s ng-dev format changed --check failed locally before checking files with an ng-dev spawnSync error on Node.js v24.15.0; direct Prettier validation passed.

Use clearer default colors for Material 3 date range comparison and overlap states so comparison ranges remain distinguishable across default themes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@pullapprove pullapprove Bot requested review from andrewseguin and tjshiu May 28, 2026 23:07
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 28, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@EduardF1
Copy link
Copy Markdown
Author

@googlebot I signed it!

@EduardF1
Copy link
Copy Markdown
Author

Hi — I've signed the CLA but the check still shows as failing. Could someone re-trigger the CLA verification? Thanks!

@EduardF1
Copy link
Copy Markdown
Author

Hi! Could I request a review from @mmalerba and @wagnermaciel? You've both been very active reviewing Material datepicker changes. Thanks!

@EduardF1
Copy link
Copy Markdown
Author

I have signed the Google CLA (email: fischerszavaeduard@gmail.com). Could a maintainer please re-run the CLA check? Thank you!

…olors

Replace hardcoded hex colors with appropriate M3 system tokens to maintain
theme adaptability across light/dark/custom themes while improving contrast
between comparison and primary selection ranges.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Datepicker comparison ranges uses substandard colors

1 participant