Skip to content

Add consistent base styles for buttons and form controls #15036

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.

Sign up for GitHub

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

Merged
philipp-spiess merged 10 commits into from
Nov 21, 2024
Merged

Add consistent base styles for buttons and form controls #15036

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0457841
Upgrade: Add form reset styles
philipp-spiess Nov 19, 2024
7886f7d
Update form preflight
philipp-spiess Nov 19, 2024
b473018
Update form styles and reorganize
reinink Nov 20, 2024
ddaa8cc
Upgrade snapshots
philipp-spiess Nov 20, 2024
88b324b
Update packages/@tailwindcss-upgrade/src/codemods/migrate-forms-reset.ts
philipp-spiess Nov 20, 2024
3ea01c3
Upgrade snapshots
philipp-spiess Nov 20, 2024
2707935
Use `:is()`
reinink Nov 20, 2024
aa8f42b
Use `:is()`
reinink Nov 20, 2024
fd0a7e9
Upgrade snapshots
philipp-spiess Nov 20, 2024
9d17e83
add change log
philipp-spiess Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update form styles and reorganize
  • Loading branch information
@reinink @philipp-spiess
reinink authored and philipp-spiess committed Nov 20, 2024
commit b473018c83bc434bf83ff83a680390560784e13f
269 changes: 164 additions & 105 deletions packages/tailwindcss/preflight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ html,
font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
color-scheme: light dark; /* 8 */
color-scheme: light; /* 8 */
}

/*
Expand Down Expand Up @@ -177,111 +177,100 @@ table {
}

/*
Inherit font styles in all browsers.
Use the modern Firefox focus style for all focusable elements.
*/

button,
input,
optgroup,
select,
textarea,
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
/* color: inherit; this can be removed because we overwrite the color for all excepte optgroup? */
:-moz-focusring {
outline: auto;
}

/*
1. Remove the default background color of buttons by default.
2. Correct the inability to style the border radius in iOS Safari.
Add the correct vertical alignment in Chrome and Firefox.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
/*background: transparent this can be removed becuase we overwrite the bacgkround color */
appearance: button; /* 2 */
progress {
vertical-align: baseline;
}

/*
Add default form styles that make all form inputs usable.
Add the correct display in Chrome and Safari.
*/

input::placeholder,
textarea::placeholder {
color: color-mix(in srgb, currentcolor 50%, transparent);
summary {
display: list-item;
}

input:where(:not([type='checkbox'], [type='radio'], [type='file'])),
textarea,
select:where([multiple]),
select:where([size]) {
border: 1px solid light-dark(#666, #777);
border-radius: 3px;
padding-inline: 0.25em;
padding-block: 0.125em;
background-color: light-dark(#fff, #222);
color: light-dark(#000, #fff);
}
/*
Make lists unstyled by default.
*/

button,
select:where(:not([multiple], [size])),
::file-selector-button {
padding-inline: 0.25em;
padding-block: 0.125em;
background-color: light-dark(#eee, #555);
border: 1px solid light-dark(#666, #777);
border-radius: 4px;
color: light-dark(#000, #fff);
}
button:where(:hover),
select:where(:not([multiple], [size]):hover),
::file-selector-button:where(:hover) {
background-color: light-dark(#ddd, #666);
}
button:where(:active),
select:where(:not([multiple], [size]):active),
::file-selector-button:where(:active) {
background-color: light-dark(#ccc, #777);
ol,
ul,
menu {
list-style: none;
}

::file-selector-button {
margin-inline-end: 4px;
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

:-moz-focusring {
outline: auto;
img,
video {
max-width: 100%;
height: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
Inherit font styles in all browsers.
*/

:-moz-ui-invalid {
box-shadow: none;
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to a semi-transparent version of the current text color.
*/

progress {
vertical-align: baseline;
::placeholder {
opacity: 1; /* 1 */
color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
Prevent resizing textareas horizontally by default.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
textarea {
resize: vertical;
}

/*
Expand Down Expand Up @@ -331,67 +320,137 @@ progress {
}

/*
Add the correct display in Chrome and Safari.
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

summary {
display: list-item;
:-moz-ui-invalid {
box-shadow: none;
}

/*
Make lists unstyled by default.
Correct the inability to style the border radius in iOS Safari.
*/

ol,
ul,
menu {
list-style: none;
button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
appearance: button;
}

/*
Prevent resizing textareas horizontally by default.
Correct the cursor style of increment and decrement buttons in Safari.
*/

textarea {
resize: vertical;
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to a semi-transparent version of the current text color.
Apply consistent base form control styles across browsers.
*/

::placeholder {
opacity: 1; /* 1 */
color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
select,
textarea,
input:where(
[type='text'],
[type='email'],
[type='password'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='number'],
[type='search'],
[type='time'],
[type='week'],
[type='tel'],
[type='url']
) {
border-radius: 3px;
padding-inline: 4px;
padding-block: 2px;
color: light-dark(black, white);
background-color: light-dark(white, rgb(255 255 255 / 10%));
border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 25%));
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
:where(select:not([multiple], [size])) option,
:where(select:not([multiple], [size])) optgroup {
color: FieldText;
background-color: Field;
}
Copy link

@madmoizo madmoizo Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just meant it's parts of the changes introduced by the new tailwind base styles (which adds a not directly visible change)

Copy link
Contributor Author

@philipp-spiess philipp-spiess Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this makes sense but the default would also be styled by the browsers and in order, you can think of our new preflight more like a consistent default browser style that works across all our browser targets.


img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
:where(select[multiple], select[size]) optgroup {
font-weight: bold;
}

:where(select[multiple], select[size]) optgroup option {
padding-inline-start: 20px;
}

select:where(:disabled),
textarea:where(:disabled),
input:where(
[type='text'],
[type='email'],
[type='password'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='number'],
[type='search'],
[type='time'],
[type='week'],
[type='tel'],
[type='url']
):where(:disabled) {
opacity: 1;
color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 10%));
border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 15%));
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
Apply consistent base button styles across browsers.
*/

img,
video {
max-width: 100%;
height: auto;
button,
::file-selector-button,
input:where([type='button'], [type='reset'], [type='submit']) {
border-radius: 4px;
padding-inline: 4px;
padding-block: 2px;
color: light-dark(#000, #fff);
background-color: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 40%));
border: 1px solid light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 10%));
}

button:where(:hover),
::file-selector-button:where(:hover),
input:where([type='button'], [type='reset'], [type='submit']):where(:hover) {
background-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 45%));
}

button:where(:active),
::file-selector-button:where(:active),
input:where([type='button'], [type='reset'], [type='submit']):where(:active) {
background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 30%));
}

button:where(:disabled),
:where(input:disabled)::file-selector-button,
input:where([type='button'], [type='reset'], [type='submit']):where(:disabled) {
opacity: 1;
background-color: light-dark(rgb(0 0 0 / 2.5%), rgb(255 255 255 / 25%));
border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 10%));
}

input:where([type='file']:disabled) {
color: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 50%));
}

::file-selector-button {
margin-inline-end: 4px;
}

/*
Expand Down