Skip to content

fix(inputs): use shadcn's input fill so theme --input colours show in dark mode - #611

Merged
mathewtaylor merged 2 commits into
v4.2.0from
foreman/ml-649
Oct 15, 2026
Merged

mathewtaylor merged 2 commits into
v4.2.0from
foreman/ml-649

Conversation

@mathewtaylor

@mathewtaylor mathewtaylor commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

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 uses bg-transparent dark:bg-input/30, so in dark mode a theme's --input colour 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.

  • Field boxes: bb:bg-background becomes bb:bg-transparent bb:dark:bg-input/30, plus bb: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.
  • Clickable triggers also get bb:dark:hover:bg-input/50: Combobox, MultiSelect, Cascader, TreeSelect, NativeSelect and Select.
  • Outline button follows shadcn's outline variant. DatePicker and TimePicker triggers are Outline buttons, so they pick this up.
  • InputGroup gets the same fill so it matches Input.
  • CurrencyInput / NumericInput: the shadow sits on the joined container when there is an addon, so it isn't clipped.

Outline button and add-on stylesheets

The PdfViewer stylesheet loads after blazorblueprint.css and repeats .bb:bg-background in the same layer. That beat bb:dark:bg-input/30 on any element carrying both classes. The Outline button uses bb:bg-background/100 for its light fill. It's the same colour, and PdfViewer doesn't repeat it. It's still a plain background colour, so a Class background such as bb:bg-primary replaces it. In dark mode, as in shadcn, a custom fill also needs a dark: class.

The editable DatePicker's wrapper also gets bb:dark:hover:bg-input/50, like the other triggers.

Checks

  • Tests for the changed components, plus new OutlineFillTests: 191 passed (11 s).
  • Visual check in the WASM demo, in light and dark mode, with the default theme and tweakcn's Catppuccin theme. Fields, selects and outline buttons match the Textarea and shadcn. In dark mode each takes the theme's --input tint.

Not changed

  • Select and InputGroup weren't in the original list. They're included so selects and grouped inputs match Input.
  • These still use 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 uses dark:bg-input/30, so that could be a follow-up.

… 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.
@mathewtaylor
mathewtaylor marked this pull request as ready for review October 15, 2026 07:45
@mathewtaylor
mathewtaylor merged commit c639c70 into v4.2.0 Oct 15, 2026
1 check passed
@mathewtaylor
mathewtaylor deleted the foreman/ml-649 branch October 15, 2026 07:45
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.

1 participant