Skip to content

Fix text input background color #19190

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

Merged
merged 3 commits into from
Dec 5, 2023
Merged

Fix text input background color #19190

merged 3 commits into from
Dec 5, 2023

Conversation

selfcontained
Copy link
Contributor

@selfcontained selfcontained commented Dec 4, 2023

Description

Fixing the background color of text inputs in dark mode (context in this Slack thread).

Light Dark
image image

As part of this I revamped the way we're handling podkit colors so that we don't have to handle dark mode everywhere. I've shifted the color definitions themselves into css and am using variables that are then consumed in the tailwind classes we setup for our contextual classes, i.e. pk-content-primary. More details on the approach are in the Tailwind docs here.

Going forward we should be able to apply a single class, such as text-pk-content-primary and have the right colors handled for both light and dark theme. We can work on migrating existing UI to this pattern as we port stuff into Podkit and update code.

Summary generated by Copilot

🤖[deprecated] Generated by Copilot at a27d8bb

This pull request updates the dashboard UI components to use CSS variables for colors, based on the Podkit design system. This simplifies the code, improves theming, and ensures consistency across the UI. The files index.css and tailwind.config.js define the color variables and classes, and the files Switch.tsx and TextInputField.tsx use them in the components.

How to test

  • Open a page w/ a text input, such as your user preferences.
  • Toggle between Light and Dark mode
  • Ensure the colors of the input match the screenshots above.

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

Build Options

Build
  • /werft with-werft
    Run the build with werft instead of GHA
  • leeway-no-cache
  • /werft no-test
    Run Leeway with --dont-test
Publish
  • /werft publish-to-npm
  • /werft publish-to-jb-marketplace
Installer
  • analytics=segment
  • with-dedicated-emulation
  • workspace-feature-flags
    Add desired feature flags to the end of the line above, space separated
Preview Environment / Integration Tests
  • /werft with-local-preview
    If enabled this will build install/preview
  • /werft with-preview
  • /werft with-large-vm
  • /werft with-gce-vm
    If enabled this will create the environment on GCE infra
  • [] /werft preemptible
    Saves cost. Untick this only if you're really sure you need a non-preemtible machine.
  • with-integration-tests=all
    Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
  • with-monitoring

/hold

@selfcontained selfcontained changed the title convert podkit colors into css variables to handle dark mode automatically Fix text input background color Dec 4, 2023
@selfcontained selfcontained marked this pull request as ready for review December 4, 2023 23:06
@selfcontained selfcontained requested a review from a team as a code owner December 4, 2023 23:06
Copy link
Member

@filiptronicek filiptronicek left a comment

Choose a reason for hiding this comment

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

I am so happy we have this now. Thank you!

Gave the Dashboard a quick test to see if any of the TextInputFields misbehave, but they seem to working well.

@selfcontained
Copy link
Contributor Author

/unhold

@roboquat roboquat merged commit d447212 into main Dec 5, 2023
@roboquat roboquat deleted the brad/podkit-css-variables branch December 5, 2023 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants