Fix text input background color #19190
Merged
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.
Description
Fixing the background color of text inputs in dark mode (context in this Slack thread).
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
andtailwind.config.js
define the color variables and classes, and the filesSwitch.tsx
andTextInputField.tsx
use them in the components.How to test
Documentation
Preview status
Gitpod was successfully deployed to your preview environment.
Build Options
Build
Run the build with werft instead of GHA
Run Leeway with
--dont-test
Publish
Installer
Add desired feature flags to the end of the line above, space separated
Preview Environment / Integration Tests
If enabled this will build
install/preview
If enabled this will create the environment on GCE infra
Saves cost. Untick this only if you're really sure you need a non-preemtible machine.
Valid options are
all
,workspace
,webapp
,ide
,jetbrains
,vscode
,ssh
. If enabled,with-preview
andwith-large-vm
will be enabled./hold