Skip to content

WB-2185 Date Picker Contrast/Weight Styles - #3186

Open
marcysutton wants to merge 3 commits into
mainfrom
WB-2185-date-picker
Open

WB-2185 Date Picker Contrast/Weight Styles#3186
marcysutton wants to merge 3 commits into
mainfrom
WB-2185-date-picker

Conversation

@marcysutton

@marcysutton marcysutton commented Aug 26, 2026

Copy link
Copy Markdown
Member

Summary:

This PR updates the styles for the Date Picker calendar to use color and font weight more intentionally.

  • The current day is bolded and blue, no longer relying on color alone
  • The selected day is no longer bolded, since it has a circle outline

Issue: WB-2185

Test plan:

  1. Open the date picker stories and measure contrast: /?path=/story/packages-datepicker-datepicker--open-calendar-overlay&globals=theme:thunderblocks
  2. Note the days fall under text contrast (1.4.3) and should meet 4.5:1, while the previous/next arrow buttons fall under non-text-contrast (1.4.11), only requiring 3:1 ratio

Screenshots

Before:
Date picker overlay with bolded selected day, and blue regular weight current day

After:
Date picker overlay with regular weight selected day, and blue bolded current day

@changeset-bot

changeset-bot Bot commented Aug 26, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a126273

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@khanacademy/wonder-blocks-date-picker Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@khan-actions-bot
khan-actions-bot requested a review from a team August 26, 2026 23:39
@github-actions

Copy link
Copy Markdown
Contributor

Size Change: +56 B (+0.04%)

Total Size: 132 kB

📦 View Changed
Filename Size Change
packages/wonder-blocks-date-picker/dist/es/index.js 8.11 kB +56 B (+0.69%)
ℹ️ View Unchanged
Filename Size
packages/eslint-plugin-wonder-blocks/dist/es/index.js 7.11 kB
packages/wonder-blocks-accordion/dist/es/index.js 3.02 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.43 kB
packages/wonder-blocks-badge/dist/es/index.js 2.03 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.93 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 798 B
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-card/dist/es/index.js 1.09 kB
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.61 kB
packages/wonder-blocks-core/dist/es/index.js 2.6 kB
packages/wonder-blocks-data/dist/es/index.js 5.51 kB
packages/wonder-blocks-dropdown/dist/es/index.js 20.6 kB
packages/wonder-blocks-form/dist/es/index.js 6.39 kB
packages/wonder-blocks-grid/dist/es/index.js 1.25 kB
packages/wonder-blocks-icon-button/dist/es/index.js 4.06 kB
packages/wonder-blocks-icon/dist/es/index.js 1.89 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.47 kB
packages/wonder-blocks-layout/dist/es/index.js 1.69 kB
packages/wonder-blocks-link/dist/es/index.js 1.54 kB
packages/wonder-blocks-modal/dist/es/index.js 7.36 kB
packages/wonder-blocks-pill/dist/es/index.js 1.32 kB
packages/wonder-blocks-popover/dist/es/index.js 4.41 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.49 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.12 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.6 kB
packages/wonder-blocks-tabs/dist/es/index.js 5.62 kB
packages/wonder-blocks-testing-core/dist/es/index.js 4.12 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.53 kB
packages/wonder-blocks-tokens/dist/es/index.js 6.5 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.19 kB
packages/wonder-blocks-typography/dist/es/index.js 1.04 kB

compressed-size-action

@github-actions

github-actions Bot commented Aug 26, 2026

Copy link
Copy Markdown
Contributor

A new build was pushed to Chromatic! 🚀

undefined

Chromatic results:

Metric Total
Captured snapshots undefined
Tests with visual changes 3
Total stories undefined
Inherited (not captured) snapshots [TurboSnap] undefined
Tests on the build undefined

@jandrade jandrade left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM! Thanks for the fixes :accessibility:

@github-actions

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (1197a80) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR3186"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR3186

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.

2 participants