-
Notifications
You must be signed in to change notification settings - Fork 675
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
Allow easy styling autofilled of Inputs #1811
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/systemui/theme-ui/5jouzaxFcW2fbVmDnNDzFJbNQvJ5 |
bcb607e
to
f4482c1
Compare
@flo-sch you might be interested in this PR (BTW, is there a way to contact you outside of GitHub?) |
Nice feature :) The interwebs provide many ways, are you thinking of a specific one? |
Okay, I've sent you an e-mail through the contact form :) |
🚀 PR was released in |
Hello @hasparus, small related question before I open another issue / PR, seems like the
Also a small question/suggestion: what about defining a specific key under theme.colors so that we could directly set it as part of the theme (or a variant), instead of having to set it as a prop (on each Not sure if there is an extra smart way to achieve that, but maybe something like (potentially breaking change?): sx={{
'--theme-ui-input-autofill-bg': (theme) => get(
theme.colors,
// first try to apply theme.colors.autofillBackgroundColor if it is defined
'autofillBackgroundColor',
// fallback to the prop value otherwise
get(theme.colors, autofillBackgroundColor, null)
),
...sx,
}} |
Oh, that's definitely a bug. Do you wanna add it?
To be fair, I'm not sure about it. If we're editing the theme already we might pass this color to a variant? |
Yep, I can take that :)
I have tried to add it as a variant but somehow it always gets overridden by the prop (even when not set --> fallback to // CustomTheme.ts
{
forms: {
someVariant: {
// ...
'--theme-ui-input-autofill-bg': (theme) => get(theme.colors || {}, 'highlight', null) as string,
}
}
} --> The default Input style overrides it anyway I could make it work by re-adding the same rules as part of the variant, bit cumbersome but it works: // CustomTheme.ts
{
forms: {
someVariant: {
// ...
':autofill, :autofill:hover, :autofill:focus': {
boxShadow: (theme) =>
`inset 0 0 0 1000px ${get(theme.colors || {}, 'highlight', 'lightgrey') as string}`
},
':-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus': {
boxShadow: (theme) =>
`inset 0 0 0 1000px ${get(theme.colors || {}, 'muted', 'lightgrey') as string}`
}
}
}
} (Is there any better way to type |
Thanks for the great work! Is there any update on fixing |
Not that I'm aware of, @xyzzyxyzzy0077! @flo-sch did you end up looking into that? |
Ah, I forgot about that sorry, but I should be able to very soon! |
Release Notes
Background color of autofilled inputs will now default to
theme.colors.background
. It can be changed by settingautofillBackgroundColor
prop.📦 Published PR as canary version:
0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0
✨ Test out this PR locally via:
npm install @theme-ui/color-modes@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/color@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/components@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/core@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/css@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/custom-properties@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/editor@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install gatsby-plugin-theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install gatsby-theme-style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install gatsby-theme-ui-layout@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/match-media@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/mdx@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/parse-props@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-base@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-bootstrap@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-bulma@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-dark@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-deep@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-funk@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-future@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-polaris@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-roboto@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-sketchy@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-swiss@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-system@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/preset-tosh@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/presets@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/prism@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/sidenav@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/tachyons@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/theme-provider@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 npm install @theme-ui/typography@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 # or yarn add @theme-ui/color-modes@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/color@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/components@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/core@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/css@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/custom-properties@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/editor@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add gatsby-plugin-theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add gatsby-theme-style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add gatsby-theme-ui-layout@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/match-media@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/mdx@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/parse-props@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-base@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-bootstrap@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-bulma@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-dark@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-deep@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-funk@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-future@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-polaris@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-roboto@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-sketchy@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-swiss@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-system@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/preset-tosh@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/presets@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/prism@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/sidenav@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/style-guide@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/tachyons@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/tailwind@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/theme-provider@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add theme-ui@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0 yarn add @theme-ui/typography@0.10.0-canary.1811.dd54586b88593673789513c59bcbe0235916cbf1.0