feat: new dark mode colors and tokens #554
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Switched theme to use dark theme in stitches config.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
BrianAA
commented
Jan 12, 2024
BrianAA
changed the title
artmsilva
approved these changes
Jan 18, 2024
ebgranger
added a commit
that referenced
this pull request
Mar 18, 2024
* feat: bump wam to 1.24.0 (#546) * fix: our lockfile area for build dot site was borked (#547) * feat: add Dialog component * chore(release): publish * Apply automatic changes * chore: add jason * chore: add julie and erik * feat: add snowfall to website for fun (#550) * feat: turn snow on * fix: remove snow * fix: remove snow * fix: remove tokens stylesheet * feat: responsive screen size hook and css var (#548) * chore(release): publish * Apply automatic changes * feat: add site footer back (#558) * fix: fixes a scrollbar issue with select and our header component (#563) * chore(release): publish * Apply automatic changes * feat: new dark mode colors and tokens (#554) * chore(release): publish * Apply automatic changes * fix: reverted subtle and faint tokens (#566) Reverted subtle and faint tokens to their original values. Added a description to flag them as legacy and subject to depreciated * feat: remove search feature from docs site (#569) * chore(release): publish * fix: Fixed onSurface to have the correct camel casing (#571) * WIP * new color doc, fixed onSurface token to camel case * fix linting errors * revert concurrency for dev command * Fixed search input Lint calls out that I need to pass unnecessary dependencies to the useeffect breaking the input search from working. So removing them again. * fix title and reorganize * Fix to Update ThemeTokens.jsx Had a mispelling on the surface-highest * Update color.mdx Spacing adjustment * Fixed border token Shame on Brian for not using a token for the border color lol * Update ColorSamples.jsx to use tokens and theme * Update ThemeTokens.jsx * Improving Rendering performance per Art recs. * Update ColorSamples.jsx * Resolve conflicting Theme * Update color.mdx * Update color.mdx - adjusted spacing * format and update from main * fix: Change forCards modifier to forSurfaces (#576) * fix: Change forCards modifier to forSurfaces After much reflection and thought about the modifier forCards. I wanted to align more clearly to the tokens surface. To make it as clear as possible that its intention is to be used with surfaces * Update ThemeTokens.jsx Replace forCards to be forSurfaces in the theme example * Update wpds.tokens.json * Update wpds.tokens.json * fix: first pass [STRY-70] * Revert "fix: first pass [STRY-70]" This reverts commit 47a5214. * fix: only add needed files [STRY-70] * fix: cleaned up [STRY-70] * fix: cleaned up again [STRY-70] * chore: add CSS ADR (#551) * fix: linting [STRY-70] * fix: ignoring .idea files [STRY-70] * chore: updating for exp package * wip * chore(release): publish * fix: update readme (#587) * chore(release): publish * chore(release): publish * fix: formatting (#588) * chore(release): publish * fix: fixing formatting (#589) * chore(release): publish * Fixing formatting (#590) * fix: fixing formatting * fix: ignore tokens in linter * chore(release): publish * chore: commit wip (#591) * fix: readme changes * chore(release): publish * Apply automatic changes * wip * wip * chore(release): publish * wip * wip * wip * wip * chore(release): publish * wip * chore(release): publish * chore(release): publish * wip * wip * formatting --------- Co-authored-by: Arturo Silva <artmsilva@gmail.com> Co-authored-by: wp-aberg <102534985+wp-aberg@users.noreply.github.com> Co-authored-by: site-eng-github-actions <github-actions-bot@users.noreply.github.com> Co-authored-by: wp-aberg <wp-aberg@users.noreply.github.com> Co-authored-by: Arturo Silva <arturo.silva@washpost.com> Co-authored-by: artmsilva <artmsilva@users.noreply.github.com> Co-authored-by: Brian Alfaro <brianalfaro@thoughttolife.com> Co-authored-by: Valerie Hosler <valerie.hosler@washpost.com> Co-authored-by: Valerie Massimi (Hosler) <val.l.hosler@gmail.com>
ebgranger
added a commit
that referenced
this pull request
Mar 21, 2024
* feat: bump wam to 1.24.0 (#546) * fix: our lockfile area for build dot site was borked (#547) * feat: add Dialog component * chore(release): publish * Apply automatic changes * chore: add jason * chore: add julie and erik * feat: add snowfall to website for fun (#550) * feat: turn snow on * fix: remove snow * fix: remove snow * fix: remove tokens stylesheet * feat: responsive screen size hook and css var (#548) * chore(release): publish * Apply automatic changes * feat: add site footer back (#558) * fix: fixes a scrollbar issue with select and our header component (#563) * chore(release): publish * Apply automatic changes * feat: new dark mode colors and tokens (#554) * chore(release): publish * Apply automatic changes * fix: reverted subtle and faint tokens (#566) Reverted subtle and faint tokens to their original values. Added a description to flag them as legacy and subject to depreciated * feat: remove search feature from docs site (#569) * chore(release): publish * fix: Fixed onSurface to have the correct camel casing (#571) * WIP * new color doc, fixed onSurface token to camel case * fix linting errors * revert concurrency for dev command * Fixed search input Lint calls out that I need to pass unnecessary dependencies to the useeffect breaking the input search from working. So removing them again. * fix title and reorganize * Fix to Update ThemeTokens.jsx Had a mispelling on the surface-highest * Update color.mdx Spacing adjustment * Fixed border token Shame on Brian for not using a token for the border color lol * Update ColorSamples.jsx to use tokens and theme * Update ThemeTokens.jsx * Improving Rendering performance per Art recs. * Update ColorSamples.jsx * Resolve conflicting Theme * Update color.mdx * Update color.mdx - adjusted spacing * format and update from main * fix: Change forCards modifier to forSurfaces (#576) * fix: Change forCards modifier to forSurfaces After much reflection and thought about the modifier forCards. I wanted to align more clearly to the tokens surface. To make it as clear as possible that its intention is to be used with surfaces * Update ThemeTokens.jsx Replace forCards to be forSurfaces in the theme example * Update wpds.tokens.json * Update wpds.tokens.json * fix: first pass [STRY-70] * Revert "fix: first pass [STRY-70]" This reverts commit 47a5214. * fix: only add needed files [STRY-70] * fix: cleaned up [STRY-70] * fix: cleaned up again [STRY-70] * chore: add CSS ADR (#551) * fix: linting [STRY-70] * fix: ignoring .idea files [STRY-70] * chore: updating for exp package * wip * chore(release): publish * fix: update readme (#587) * chore(release): publish * chore(release): publish * fix: formatting (#588) * chore(release): publish * fix: fixing formatting (#589) * chore(release): publish * Fixing formatting (#590) * fix: fixing formatting * fix: ignore tokens in linter * chore(release): publish * chore: commit wip (#591) * fix: readme changes * chore(release): publish * Apply automatic changes * wip * wip * chore(release): publish * wip * wip * wip * wip * chore(release): publish * wip * chore(release): publish * chore(release): publish * wip * wip * formatting * fix: transform select icon on open (#596) * update from alpha.5 --------- Co-authored-by: Arturo Silva <artmsilva@gmail.com> Co-authored-by: wp-aberg <102534985+wp-aberg@users.noreply.github.com> Co-authored-by: site-eng-github-actions <github-actions-bot@users.noreply.github.com> Co-authored-by: wp-aberg <wp-aberg@users.noreply.github.com> Co-authored-by: Arturo Silva <arturo.silva@washpost.com> Co-authored-by: artmsilva <artmsilva@users.noreply.github.com> Co-authored-by: Brian Alfaro <brianalfaro@thoughttolife.com> Co-authored-by: Valerie Hosler <valerie.hosler@washpost.com> Co-authored-by: Valerie Massimi (Hosler) <val.l.hosler@gmail.com>
ebgranger
added a commit
that referenced
this pull request
Apr 24, 2024
* chore: stub out dir * chore: stub out dir * chore: test nextjs 13 and 14 apps (page and app router) (#544) * fix: remove defaultOpen from kitchen sink Tooltip example to prevent client server mismatch * feat: updated InputLabel with latest Radix label component (#552) * fix: take latest minor of Radix accordion * feat: remove nanoid dependency (#555) * fix: remove border for clear button on input search (#560) * feat: move Button, Icon, theme, and VisuallyHidden to v2 package (#562) * feat: card (#564) * feat: update Accordion to React 18 (#565) * feat: fresh install with updated node/npm (#574) * V2 switch (#570) * wip * wip * wip * wip * wip * feat: fix React issue in story * feat: merge and install * fix: fixing formatting * fix: reset apps dir * fix: trying to reset the apps dir * fix: i don't know how dialog went mising (#579) * feat: v2 mass components upgrade/migration (#578) * wip * wip * wip * wip * wip * wip * chore: commit wip * lol idk if this is wise * lol idk if this is wise * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * Upgrade mass boop with v2 (#580) * fix: i don't know how dialog went mising (#579) * chore: commit wip * chore: commit wip --------- Co-authored-by: Edward Granger <edward.granger@washpost.com> * chore: commit wip * fix: correcting merge issue * fix: remove ui from jest tests * fix: experiment if pointerevents check will fix close button error in Safari * fix: prettify dialog test * fix: prettify dialog test * fix: tweaking dialog to hopefully pass storybook check in safari * fix: allow unused react in linter since nextjs wants to play by diff rules lol * fix: run next link upgrade codemod * fix: format --------- Co-authored-by: Edward Granger <edward.granger@washpost.com> Co-authored-by: Andrew Berg <andrew.berg@washpost.com> * fix: Playroom fix (#583) * fix: merging main and resolving conflicts (#585) * fix: merging main and resolving conflicts * wip * wip * wip * more changes to get docs site working * syntax error * running prettier * feat: update package-lock * chore(release): publish * chore: commit wip * chore: commit wip * chore: commit wip * chore(release): publish * chore(release): publish * chore(release): publish * V2 package lock upgraded (#593) * feat: bump wam to 1.24.0 (#546) * fix: our lockfile area for build dot site was borked (#547) * feat: add Dialog component * chore(release): publish * Apply automatic changes * chore: add jason * chore: add julie and erik * feat: add snowfall to website for fun (#550) * feat: turn snow on * fix: remove snow * fix: remove snow * fix: remove tokens stylesheet * feat: responsive screen size hook and css var (#548) * chore(release): publish * Apply automatic changes * feat: add site footer back (#558) * fix: fixes a scrollbar issue with select and our header component (#563) * chore(release): publish * Apply automatic changes * feat: new dark mode colors and tokens (#554) * chore(release): publish * Apply automatic changes * fix: reverted subtle and faint tokens (#566) Reverted subtle and faint tokens to their original values. Added a description to flag them as legacy and subject to depreciated * feat: remove search feature from docs site (#569) * chore(release): publish * fix: Fixed onSurface to have the correct camel casing (#571) * WIP * new color doc, fixed onSurface token to camel case * fix linting errors * revert concurrency for dev command * Fixed search input Lint calls out that I need to pass unnecessary dependencies to the useeffect breaking the input search from working. So removing them again. * fix title and reorganize * Fix to Update ThemeTokens.jsx Had a mispelling on the surface-highest * Update color.mdx Spacing adjustment * Fixed border token Shame on Brian for not using a token for the border color lol * Update ColorSamples.jsx to use tokens and theme * Update ThemeTokens.jsx * Improving Rendering performance per Art recs. * Update ColorSamples.jsx * Resolve conflicting Theme * Update color.mdx * Update color.mdx - adjusted spacing * format and update from main * fix: Change forCards modifier to forSurfaces (#576) * fix: Change forCards modifier to forSurfaces After much reflection and thought about the modifier forCards. I wanted to align more clearly to the tokens surface. To make it as clear as possible that its intention is to be used with surfaces * Update ThemeTokens.jsx Replace forCards to be forSurfaces in the theme example * Update wpds.tokens.json * Update wpds.tokens.json * fix: first pass [STRY-70] * Revert "fix: first pass [STRY-70]" This reverts commit 47a5214. * fix: only add needed files [STRY-70] * fix: cleaned up [STRY-70] * fix: cleaned up again [STRY-70] * chore: add CSS ADR (#551) * fix: linting [STRY-70] * fix: ignoring .idea files [STRY-70] * chore: updating for exp package * wip * chore(release): publish * fix: update readme (#587) * chore(release): publish * chore(release): publish * fix: formatting (#588) * chore(release): publish * fix: fixing formatting (#589) * chore(release): publish * Fixing formatting (#590) * fix: fixing formatting * fix: ignore tokens in linter * chore(release): publish * chore: commit wip (#591) * fix: readme changes * chore(release): publish * Apply automatic changes * wip * wip * chore(release): publish * wip * wip * wip * wip * chore(release): publish * wip * chore(release): publish * chore(release): publish * wip * wip * formatting --------- Co-authored-by: Arturo Silva <artmsilva@gmail.com> Co-authored-by: wp-aberg <102534985+wp-aberg@users.noreply.github.com> Co-authored-by: site-eng-github-actions <github-actions-bot@users.noreply.github.com> Co-authored-by: wp-aberg <wp-aberg@users.noreply.github.com> Co-authored-by: Arturo Silva <arturo.silva@washpost.com> Co-authored-by: artmsilva <artmsilva@users.noreply.github.com> Co-authored-by: Brian Alfaro <brianalfaro@thoughttolife.com> Co-authored-by: Valerie Hosler <valerie.hosler@washpost.com> Co-authored-by: Valerie Massimi (Hosler) <val.l.hosler@gmail.com> * fix: transform Select arrow on open (#597) * V2 package lock upgraded (#602) * feat: bump wam to 1.24.0 (#546) * fix: our lockfile area for build dot site was borked (#547) * feat: add Dialog component * chore(release): publish * Apply automatic changes * chore: add jason * chore: add julie and erik * feat: add snowfall to website for fun (#550) * feat: turn snow on * fix: remove snow * fix: remove snow * fix: remove tokens stylesheet * feat: responsive screen size hook and css var (#548) * chore(release): publish * Apply automatic changes * feat: add site footer back (#558) * fix: fixes a scrollbar issue with select and our header component (#563) * chore(release): publish * Apply automatic changes * feat: new dark mode colors and tokens (#554) * chore(release): publish * Apply automatic changes * fix: reverted subtle and faint tokens (#566) Reverted subtle and faint tokens to their original values. Added a description to flag them as legacy and subject to depreciated * feat: remove search feature from docs site (#569) * chore(release): publish * fix: Fixed onSurface to have the correct camel casing (#571) * WIP * new color doc, fixed onSurface token to camel case * fix linting errors * revert concurrency for dev command * Fixed search input Lint calls out that I need to pass unnecessary dependencies to the useeffect breaking the input search from working. So removing them again. * fix title and reorganize * Fix to Update ThemeTokens.jsx Had a mispelling on the surface-highest * Update color.mdx Spacing adjustment * Fixed border token Shame on Brian for not using a token for the border color lol * Update ColorSamples.jsx to use tokens and theme * Update ThemeTokens.jsx * Improving Rendering performance per Art recs. * Update ColorSamples.jsx * Resolve conflicting Theme * Update color.mdx * Update color.mdx - adjusted spacing * format and update from main * fix: Change forCards modifier to forSurfaces (#576) * fix: Change forCards modifier to forSurfaces After much reflection and thought about the modifier forCards. I wanted to align more clearly to the tokens surface. To make it as clear as possible that its intention is to be used with surfaces * Update ThemeTokens.jsx Replace forCards to be forSurfaces in the theme example * Update wpds.tokens.json * Update wpds.tokens.json * fix: first pass [STRY-70] * Revert "fix: first pass [STRY-70]" This reverts commit 47a5214. * fix: only add needed files [STRY-70] * fix: cleaned up [STRY-70] * fix: cleaned up again [STRY-70] * chore: add CSS ADR (#551) * fix: linting [STRY-70] * fix: ignoring .idea files [STRY-70] * chore: updating for exp package * wip * chore(release): publish * fix: update readme (#587) * chore(release): publish * chore(release): publish * fix: formatting (#588) * chore(release): publish * fix: fixing formatting (#589) * chore(release): publish * Fixing formatting (#590) * fix: fixing formatting * fix: ignore tokens in linter * chore(release): publish * chore: commit wip (#591) * fix: readme changes * chore(release): publish * Apply automatic changes * wip * wip * chore(release): publish * wip * wip * wip * wip * chore(release): publish * wip * chore(release): publish * chore(release): publish * wip * wip * formatting * fix: transform select icon on open (#596) * update from alpha.5 --------- Co-authored-by: Arturo Silva <artmsilva@gmail.com> Co-authored-by: wp-aberg <102534985+wp-aberg@users.noreply.github.com> Co-authored-by: site-eng-github-actions <github-actions-bot@users.noreply.github.com> Co-authored-by: wp-aberg <wp-aberg@users.noreply.github.com> Co-authored-by: Arturo Silva <arturo.silva@washpost.com> Co-authored-by: artmsilva <artmsilva@users.noreply.github.com> Co-authored-by: Brian Alfaro <brianalfaro@thoughttolife.com> Co-authored-by: Valerie Hosler <valerie.hosler@washpost.com> Co-authored-by: Valerie Massimi (Hosler) <val.l.hosler@gmail.com> * update lock file again * fix: make input helper and error block level elements to preserve formatting * wip * fix: add nanoid back (#607) * chore(release): publish * feat: add v2 docs switcher (#608) * V2 updating deps (#612) * wip * wip * wip * fix: new colors are not showing up (#614) * fix: new colors are not showing up * chore: commit wip * chore(release): publish * wip * fix: add tokens specifier to exports (#616) * chore: commit changes from build * wip * chore: remove exports * chore(release): publish * V2 migrate theme (#619) * wip * wip * wi * wip * wip * wip * wip * wip * chore(release): publish * V2 resolving conflicts (#620) * wip * wip * wip * wip (#621) * wip * chore(release): publish * wip * wip * feat: final update for v2 branch --------- Co-authored-by: Andrew Berg <andrew.berg@washpost.com> Co-authored-by: wp-aberg <102534985+wp-aberg@users.noreply.github.com> Co-authored-by: Edward Granger <edward.granger@washpost.com> Co-authored-by: site-eng-github-actions <github-actions-bot@users.noreply.github.com> Co-authored-by: wp-aberg <wp-aberg@users.noreply.github.com> Co-authored-by: artmsilva <artmsilva@users.noreply.github.com> Co-authored-by: Brian Alfaro <brianalfaro@thoughttolife.com> Co-authored-by: Valerie Hosler <valerie.hosler@washpost.com> Co-authored-by: Valerie Massimi (Hosler) <val.l.hosler@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I did
Updated al dark mode color tokens to support our goals around better visibility, contrast and vibrance in a dark mode color context.
Extended our theme to now support dark mode patterns found within our app. This includes but not limited to card elevations changing in color in dark mode as it is higher in elevation. The new tokens in our theme also follow a semantic token structure to help others select the correct colors when designing and creating new experiences to ensure a successful transition between dark and light mode. These tokens include:
primary-hoveronPrimary-hoveronPrimary-subtleonPrimary-subtle-hoversecondary-hoveronSecondary-hoveronSecondary-subtleonSecondary-subtle-hovercta-hoveronCta-hoverctaContaineronCtaContaineronCtaContainer-hoveronCtaContainer-subtleonCtaContainer-subtle-hoverbackgroundbackground-forCardsonBackgroundonBackground-hoveronBackground-subtleonBackground-subtle-hoversurfacesurface-highestonSurfaceonSurface-hoveronSurface-subtleonSurface-subtle-hoverportalonPortalonPortal-hoveronPortal-subtleonPortal-subtle-hoveronMessage-hoveronMessage-subtleonMessage-subtle-hoveroutlineoutline-subtleUpdated our shadow tokens to true black to avoid them appearing light in dark mode. The opacity has been dropped from .25 to .15
Added new Alpha tokens
alpha20-alpha500Update to value
gray80to what was #666666 to #595959. This change is done to reflect our efforts to move to a more accessible contrast standard whenever possible. Here is the comparison