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

feat: Update component with new design system: LemonBanner #26726

Merged
merged 3 commits into from
Dec 6, 2024

Conversation

adamleithp
Copy link
Contributor

Use 3030 semantic variables in LemonBanner, Also adding the variables for this design system.

Problem

  • How an engineer decides which color/CSS variable to use in a components text/background/border/ etc is ambiguous, ideally the engieeer doesn't have to think about these themes, or darkmode
  • Futhermore, the engineer needs to design for both light/dark mode AND future themes.
  • We have no clear documentation on how to use the colors/themes are used in any given context.

Problem described in more detail here: https://github.com/PostHog/product-internal/issues/687

Changes

Old:
Screenshot 2024-12-06 at 13 31 37
New
Screenshot 2024-12-06 at 12 55 24

Old
Screenshot 2024-12-06 at 13 31 50

New:
Screenshot 2024-12-06 at 12 55 38

More on new color design system here: https://www.figma.com/design/rQ5SvWb4P2AGt7o9KbKV21/Posthog-3030?node-id=79-12331&node-type=frame&t=q0VjMeVe4xZF0j0G-0

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

Yes

How did you test this code?

Opened all instances i could find of the component, in light/dark

@adamleithp adamleithp enabled auto-merge (squash) December 6, 2024 15:23
@adamleithp adamleithp requested a review from pauldambra December 6, 2024 15:24
Copy link
Member

@pauldambra pauldambra left a comment

Choose a reason for hiding this comment

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

change itself looks good, need to figure out why the visual regression tests are quite so unhappy

@adamleithp adamleithp disabled auto-merge December 6, 2024 20:34
@adamleithp adamleithp enabled auto-merge (squash) December 6, 2024 20:34
@pauldambra pauldambra changed the title Update component with new design system: LemonBanner feat: update component with new design system: LemonBanner Dec 6, 2024
@adamleithp adamleithp merged commit 3759a04 into PostHog:master Dec 6, 2024
93 of 97 checks passed
@adamleithp adamleithp changed the title feat: update component with new design system: LemonBanner feat: Update component with new design system: LemonBanner Dec 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants