Add a way to control hover background color and border color for all inputs

[laugri]

Hello,

I am trying to adjust the styles of all my inputs and it's been a bit difficult so far. For borders :

• Currently, the default border color css variable has no effect on inputs (which I can understand).
• For some reason, overriding at the theme level does not work so change the border of a TextInput :

Input: Input.extend({
      defaultProps: {
        styles: {
          input: {
            border: "1px solid var(--mantine-color-default-border)",
          },
        },
      },
    }),

Which means we can only change the border locally on each element, which seems not ideal to me

[laugri]

I am also wondering what --mantine-color-default-border actually controls because it seems like most of the components don't use it (paper, table, inputs, ...) ?

[rtivital]

--mantine-color-default-* controls colors of default variant of Button, ActionIcon and other similar components

[laugri]

My bad, that makes sense. I got confused and thought it would control the "default" color of borders across components.

[laugri]

@rtivital is there a way to control the value used for borders "everywhere" ? E.g. in Table, Accordion, Paper, etc, etc ? I'd like to use a lighter shade.

[rtivital]

No, currently components do not have any centralized color management for that. It can only be done with Styles API on theme for each component individually

[laugri]

Ok, thank you. I think this would make sense, or at least it's common for design systems to define one or two specific values for borders that are then used across components.

[rtivital]

You can add that with Styles API – https://mantine.dev/core/input/#styles-on-theme

[laugri]

Thank you.
If I understand correctly, some inputs don't use the Input base, like Select for instance. What is the recommended approach for these components ?

[rtivital]

All inputs that look like Input support this. Did it not work for you in the Select component?

[laugri]

No, I had to add the Select/Multiselect too :

 Input: Input.extend({
      defaultProps: {
        classNames: {
          wrapper: inputOverridesClasses.wrapper,
          input: inputOverridesClasses.input,
        },
        styles: {
          wrapper: bloomCareInputHeightVariables,
          input: {
            marginTop: 4,
            marginBottom: 4,
          },
        },
      },
    }),
    Select: Select.extend({
      defaultProps: {
        classNames: {
          wrapper: inputOverridesClasses.wrapper,
          input: inputOverridesClasses.input,
        },
      },
    }),
    MultiSelect: MultiSelect.extend({
      defaultProps: {
        classNames: {
          wrapper: inputOverridesClasses.wrapper,
          input: inputOverridesClasses.input,
        },
      },
    }),
    ```

[rtivital]

I've implemented a fix for this, it will be available in 9.1.1 release

[laugri]

Amazing, thanks.

Just in case: it seems like it's not only the Selects being ignored: on my side, only TextInput is affected by the InputWrapper overrides. Event NumberInput, DatePickerInput, Texarea ignore the change.