Repository navigation
fix(inputs): use shadcn's input fill so theme --input colours show in dark mode - #611
Merged
Merged
Conversation
… dark mode Input-style fields filled with bg-background; shadcn v4 uses bg-transparent with dark:bg-input/30, so a tweakcn or shadcn theme's --input had no effect on our fields in dark mode. Swap the fill on every field box, add shadow-xs, add dark:hover:bg-input/50 on clickable triggers, and follow shadcn's outline button variant. The outline's light fill uses not-dark:bg-background so an add-on stylesheet that repeats .bb:bg-background (PdfViewer's) can't override the dark fill. Refs discussion #610.
…editable DatePicker on hover not-dark:bg-background survived cn when Class set a background (bb:bg-primary), because the variants differ, so the light fill won. Use bg-background/100: the same colour, still merged away by a Class background, and not repeated by PdfViewer's stylesheet, so dark:bg-input/30 keeps winning in dark mode. The editable DatePicker wrapper now gets dark:hover:bg-input/50 like the other triggers.
This file contains hidden or 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
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.
Input-style fields now use shadcn v4's fill, so a tweakcn or shadcn theme looks the same on our fields as it does in shadcn. Refs discussion #610.
Problem
Our fields filled with
bg-background. shadcn usesbg-transparent dark:bg-input/30, so in dark mode a theme's--inputcolour never reached the field. Our own Textarea already used the shadcn fill, so Input and Textarea didn't match.Changes
Only classes change. There are no public API changes.
bb:bg-backgroundbecomesbb:bg-transparent bb:dark:bg-input/30, plusbb:shadow-xs. This covers Input, InputField, MaskedInput, CurrencyInput, NumericInput (input and stepper buttons), DateInput, TimeInput, DatePickerInput, TagInput, InputOTP slots, QuantityStepper (read-only box), ListBox, MarkdownEditor and RichTextEditor.bb:dark:hover:bg-input/50: Combobox, MultiSelect, Cascader, TreeSelect, NativeSelect and Select.Outline button and add-on stylesheets
The PdfViewer stylesheet loads after
blazorblueprint.cssand repeats.bb:bg-backgroundin the same layer. That beatbb:dark:bg-input/30on any element carrying both classes. The Outline button usesbb:bg-background/100for its light fill. It's the same colour, and PdfViewer doesn't repeat it. It's still a plain background colour, so aClassbackground such asbb:bg-primaryreplaces it. In dark mode, as in shadcn, a custom fill also needs adark:class.The editable DatePicker's wrapper also gets
bb:dark:hover:bg-input/50, like the other triggers.Checks
OutlineFillTests: 191 passed (11 s).--inputtint.Not changed
bg-background: popover-internal outline-style buttons in TimePicker (Now / Clear) and DateRangePicker, Checkbox and RadioGroup indicators, the ListBox and MultiSelect checkbox squares, PdfViewer's frame, and Signature. shadcn's Checkbox usesdark:bg-input/30, so that could be a follow-up.