Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cosmetic(pie-monorepo): PEW-89 update component styles for dark mode #2182

Merged
merged 11 commits into from
Feb 10, 2025
Merged

cosmetic(pie-monorepo): PEW-89 update component styles for dark mode #2182

merged 11 commits into from
Feb 10, 2025

Conversation

xander-marjoram
Copy link
Contributor

@xander-marjoram xander-marjoram commented Jan 30, 2025 •
edited by dandel10n
Loading

Describe your changes (can list changeset entries if preferable)

  • Component updates to align with dark mode designs.
  • The only change that affects light mode is the update of pie-modal to use the correct token for font colour. Previously it was just using the default from the browser stylesheet for the dialog element (now using color-content-default #242E20). This is fractionally lighter than the default of #000000.
  • This PR corrects our existing usage of tokens, mostly for font colours.
  • There is further work required for components with hover/active interactive states.
Component Before After
Button 2025-02-06 13_23_51 2025-02-06 13_24_05
Divider 2025-02-06 13_29_18 2025-02-06 13_29_33
Icon Button 2025-02-06 15_59_08 2025-02-06 15_58_59
Modal 2025-02-06 13_30_50 2025-02-06 13_31_05
Switch 2025-02-07 10_26_39 2025-02-07 14_56_35
Tag 2025-02-06 13_34_19 2025-02-06 13_34_00 2025-02-06 13_34_33 2025-02-06 13_34_26

Author Checklist (complete before requesting a review, do not delete any)

  • I have performed a self-review of my code.
  • I have reviewed the PIE Storybook/PIE Docs PR preview.
  • I have reviewed visual test updates properly before approving.
  • If changes will affect consumers of the package, I have created a changeset entry.
  • If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

  • I have added thorough tests where applicable (unit / component / visual).
    (Dark mode visual tests will be addressed separately.)

Testing

To simulate dark mode in the browser, add the data-darkmode-enabled attribute to the HTML element and set your browser to emulate prefers-color-scheme: dark.

How do I test my changes?

Task Link
Aperture PR 🔗
NextJS 14 deployment 🔗
Nuxt 3 deployment 🔗
Vanilla deployment 🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1

  • I have reviewed the PIE Storybook/PIE Docs PR preview.
  • I have verified that all acceptance criteria for this ticket have been completed.
  • I have reviewed the Aperture changes (if added)
  • If there are visual test updates, I have reviewed them.

Reviewer 2

  • I have reviewed the PIE Storybook/PIE Docs PR preview.
  • I have verified that all acceptance criteria for this ticket have been completed.
  • I have reviewed the Aperture changes (if added)
  • If there are visual test updates, I have reviewed them.

@xander-marjoram xander-marjoram added the work-in-progress This pull request is still a work in progress and may not be ready for review label Jan 30, 2025
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 30, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 84967b8

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

This PR includes changesets to release 17 packages
Name Type
@justeattakeaway/pie-button Minor
@justeattakeaway/pie-divider Minor
@justeattakeaway/pie-icon-button Minor
@justeattakeaway/pie-modal Minor
@justeattakeaway/pie-switch Minor
@justeattakeaway/pie-tag Minor
pie-storybook Patch
@justeattakeaway/pie-cookie-banner Patch
@justeattakeaway/pie-toast Patch
@justeattakeaway/pie-webc Patch
@justeattakeaway/pie-notification Patch
@justeattakeaway/pie-toast-provider Patch
wc-angular12 Patch
wc-nuxt2 Patch
wc-react17 Patch
wc-react18 Patch
wc-vue3 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

@xander-marjoram xander-marjoram marked this pull request as ready for review February 6, 2025 09:09
@xander-marjoram xander-marjoram requested review from a team as code owners February 6, 2025 09:09
@xander-marjoram
Copy link
Contributor Author

/test-aperture

@pie-design-system-bot
Copy link
Contributor

Starting a new snapshot build. You can view the logs here.

@pie-design-system-bot
Copy link
Contributor

@xander-marjoram Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

@xander-marjoram
Copy link
Contributor Author

/snapit

@pie-design-system-bot
Copy link
Contributor

Starting a new snapshot build. You can view the logs here.

@pie-design-system-bot
Copy link
Contributor

@xander-marjoram Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile
yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

@xander-marjoram xander-marjoram self-assigned this Feb 7, 2025
@xander-marjoram xander-marjoram merged commit 4cf5835 into main Feb 10, 2025
43 of 48 checks passed
@xander-marjoram xander-marjoram deleted the pew-89-dark-mode-audit branch February 10, 2025 09:11
@pie-design-system-bot pie-design-system-bot mentioned this pull request Feb 9, 2025
Merged
JoshuaNg2332 pushed a commit that referenced this pull request Feb 11, 2025
@xander-marjoram @JoshuaNg2332
cosmetic(pie-monorepo): PEW-89 update component styles for dark mode (#…
48f3dd6 
…2182)

* cosmetic(pie-monorepo): PEW-89 update component styles for dark mode

* Fix linting error

* PEW-89: Use correct colour tokens for text in tag brand variants

* PEW-89: Update icon button's icon fill colour

* Update yarn.lock

* PEW-89: Use token for switch internal label font colour
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dandel10n dandel10n dandel10n approved these changes

@raoufswe raoufswe raoufswe approved these changes

Assignees

@xander-marjoram xander-marjoram

Labels
components pie-button pie-divider pie-icon-button pie-modal pie-switch pie-tag work-in-progress This pull request is still a work in progress and may not be ready for review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@xander-marjoram @pie-design-system-bot @dandel10n @raoufswe