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.

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

Design system color theming updates #13821

Merged
merged 35 commits into from
Sep 11, 2024
Merged

Design system color theming updates #13821

merged 35 commits into from
Sep 11, 2024

Conversation

wackerow
Copy link
Member

@wackerow wackerow commented Sep 7, 2024

Description

  • Incremental adjustments updating colors to latest design system theming

Related Issue

Design system

@wackerow wackerow added the design system this label will be used in all issues related to design system label Sep 7, 2024
Copy link

netlify bot commented Sep 7, 2024

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 594cddc
🔍 Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/66e105da1654e70008a9c8d6
😎 Deploy Preview https://deploy-preview-13821--ethereumorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 40 (🔴 down 8 from production)
Accessibility: 92 (🔴 down 1 from production)
Best Practices: 86 (🔴 down 6 from production)
SEO: 92 (🔴 down 1 from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

deprecate single-use `button-hover` tailwind token; applied directly at ui/button component level
tw `primary`, `button-hover` shadow tokens; chakra `primary` shadow token
Migrate EthPriceCard, update associate color tokens
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

@wackerow left a few questions on Chromatic where we have a few visual differences.

@wackerow
Copy link
Member Author

Good catch! Was related to the replacement for the "Close" icon in the DismissableBanner component...

  • The default variant was taller than the button being used before
  • The ghost variant was using the same color as the foreground, so it was invisible.

I changed it to use size="sm" and removed variant (defaults back to solid). The solid button is close here (fixes the text color), but we don't have a proper variant for buttons like this on a primary background... so I adjusted the button with hover:shadow-none which should do the trick.

This should reach a nice compromise between keeping the new custom button styling to a minimum, while also matching it close-enough to the existing close button details.

Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

Thanks @wackerow looks good now on SB.

@pettinarip pettinarip merged commit edd1283 into dev Sep 11, 2024
8 of 10 checks passed
@pettinarip pettinarip deleted the colors-1 branch September 11, 2024 10:39
This was referenced Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design system this label will be used in all issues related to design system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants