Skip to content

Conversation

cdransf
Copy link
Member

@cdransf cdransf commented Mar 11, 2025

Description

Corrects the contrast issue observed between the fill element and slider track that caused the fill element to be difficult to see.

  • Adjusts colors per design feedback.
  • Removes default control/template value that caused contrast issue in dark modew.

Validation steps

  1. Open Storybook URL
  2. Navigate to slider
  3. Change theme from light to dark
  4. Enable testing preview
  5. Scroll to filled offset and verify offset and track have sufficient contrast

Screenshots

image

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

@cdransf cdransf added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Mar 11, 2025
@cdransf cdransf self-assigned this Mar 11, 2025
Copy link

changeset-bot bot commented Mar 11, 2025

⚠️ No Changeset found

Latest commit: ca1eb32

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

Copy link
Contributor

github-actions bot commented Mar 11, 2025

File metrics

Summary

Total size: 2.25 MB*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

Copy link
Contributor

github-actions bot commented Mar 11, 2025

🚀 Deployed on https://pr-3614--spectrum-css.netlify.app

@cdransf cdransf force-pushed the cdransf/slider-contrast-fix branch from f56782b to e7e160b Compare March 11, 2025 15:50
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

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

Thanks for digging into the gray values- glad we got them corrected!

Looking at prod, is this PR supposed to address main? I think I see the same issue, so if we fix it on main, could we just cherry pick over to spectrum-two?

Screenshot 2025-03-11 at 11 49 54 AM

@cdransf cdransf force-pushed the cdransf/slider-contrast-fix branch 2 times, most recently from adbf4c0 to 1de25b8 Compare March 11, 2025 16:06
@cdransf cdransf changed the base branch from spectrum-two to main March 11, 2025 16:07
@cdransf cdransf force-pushed the cdransf/slider-contrast-fix branch 5 times, most recently from 25b7240 to b05f885 Compare March 11, 2025 16:21
@cdransf cdransf force-pushed the cdransf/slider-contrast-fix branch 2 times, most recently from 0e2b62a to 54562e4 Compare March 11, 2025 17:28
@cdransf
Copy link
Member Author

cdransf commented Mar 11, 2025

Thanks for digging into the gray values- glad we got them corrected!

Looking at prod, is this PR supposed to address main? I think I see the same issue, so if we fix it on main, could we just cherry pick over to spectrum-two?

Absolutely! I lifted everything over to main and squashed it down so we can cherry-pick in a follow up PR. ✨

@cdransf cdransf force-pushed the cdransf/slider-contrast-fix branch from 54562e4 to 6200ea4 Compare March 11, 2025 23:12
@cdransf cdransf force-pushed the cdransf/slider-contrast-fix branch from 6200ea4 to f5fb64c Compare March 12, 2025 19:16
@castastrophe castastrophe force-pushed the main branch 10 times, most recently from c68f4e3 to d2272ea Compare March 12, 2025 21:56
@castastrophe castastrophe force-pushed the cdransf/slider-contrast-fix branch from f5fb64c to ca1eb32 Compare March 12, 2025 22:11
@castastrophe castastrophe enabled auto-merge (squash) March 12, 2025 22:14
@castastrophe castastrophe merged commit ae8a126 into main Mar 12, 2025
18 of 24 checks passed
@castastrophe castastrophe deleted the cdransf/slider-contrast-fix branch March 12, 2025 22:20
castastrophe added a commit that referenced this pull request Mar 20, 2025
* feat(actionbutton): use s2 colors in spectrum-two theme (#3606)
* feat(actionbutton): use closer to s2 colors in spectrum-two theme

Requested colors update for action button, aligning the colors closer
to the S2 design, post-foundations.

In the foundations spectrum-two theme:
- Removes the border
- Changes the default background colors to match s2 specs
- Updates the background colors used for static black and static white

SWC-497

* fix(actionbutton): fix high contrast styles for selected disabled

The selected + disabled button was not showing up as the disabled colors
in high contrast mode. Fixed by adjusting the source order slightly
in the high contrast media query so disabled is after selected and takes
precedence.

* fix(search): update disabled state in spectrum two (#3593)

Co-authored-by: rise-erpelding <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>

* chore(deps): bump the npm_and_yarn group with 2 updates (#3618)

Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime).


Updates `@babel/helpers` from 7.26.0 to 7.26.10
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers)

Updates `@babel/runtime` from 7.24.4 to 7.26.10
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime)

---
updated-dependencies:
- dependency-name: "@babel/helpers"
  dependency-type: indirect
  dependency-group: npm_and_yarn
- dependency-name: "@babel/runtime"
  dependency-type: indirect
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore: update release script install settings

* fix(button): adjust s2 static colors [SWC-496] (#3613)

* chore: release (#3619)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(slider): corrects contrast bug caused by template default arg (#3614)

* fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621)

* fix(stepper): focus/focus+hover/keyboardFocus border colors

* chore(stepper): add changeset

* fix(slider): offset variant border radius bug fix (#3611)

* feat(slider): offset variant border radius bug fix

* feat(slider): fix range slider

* fix(combobox): border color fast follows swc-582  (#3609)

* fix(combobox): correct s1/legacy container variable

* fix(combobox): fast follow border color remapping
- add mods for s2 foundations disabled picker button BG/border colors
- correct disabled+read-only border color
- add read-only border custom property
- fixes express read-only border from gray-500 to gray-400
- update metadata.json

* chore(combobox): create changeset

* chore: release (#3623)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore: patch tj-actions vulnerability (#3626)

* fix(alertbanner): change system variable from spectrum to legacy (#3624)

* fix(alertbanner): change system: spectrum to legacy
* chore(alertbanner): create changeset

* test(checkbox): add more coverage for checkbox (#3625)

* chore(checkbox): add isHovered state to checkbox

- adds isHovered shared type and control to checkbox stories
- adds several isHovered test cases
- updates checkbox template to include isHovered arg

* chore(form): fix the fieldgroup component input and labels

* chore: release (#3631)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(checkbox): add invalid+checked+hover checkbox styles (#3617)

- add missing ::before pseudo to target the before element in the
invalid/checked/hover state
- update metadata.json
- create changeset

* chore: release (#3632)

* chore: release

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: undefined and duplicated variable after merging main

fix(slider): remove duplicated values

Remove a large number of duplicate values causing stylelint
"Unexpected duplicate" warnings. It looks like things got doubled up
somehow in a previous rebase or merge. This included duplicate t-shirt
size classes.

Also moves root styles block under the custom property definitions to be
consistent with other components.

fix(combobox): fixes undefined and duplicated values

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: TaraT <[email protected]>
Co-authored-by: rise-erpelding <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Cory Dransfeldt <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: aramos-adobe <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready-for-review size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. skip_vrt Add to a PR to skip running VRT (but still pass the action)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants