@tailwindcss/forms
Advanced tools
Comparing version 0.0.0-insiders.c056ccf to 0.0.0-insiders.c1c4286
@@ -10,4 +10,19 @@ # Changelog | ||
- Nothing yet! | ||
### Fixed | ||
- Fix date time bottom spacing on MacOS Safari ([#146](https://github.com/tailwindlabs/tailwindcss-forms/pull/146)) | ||
## [0.5.5] - 2023-08-22 | ||
### Fixed | ||
- Fix text alignment on date and time inputs on iOS ([#144](https://github.com/tailwindlabs/tailwindcss-forms/pull/144)) | ||
## [0.5.4] - 2023-07-13 | ||
### Fixed | ||
- Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137)) | ||
- Allow for <input> without `type` ([#141](https://github.com/tailwindlabs/tailwindcss-forms/pull/141)) | ||
## [0.5.3] - 2022-09-02 | ||
@@ -127,3 +142,5 @@ | ||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...HEAD | ||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.5...HEAD | ||
[0.5.5]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.4...v0.5.5 | ||
[0.5.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...v0.5.4 | ||
[0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3 | ||
@@ -130,0 +147,0 @@ [0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2 |
{ | ||
"name": "@tailwindcss/forms", | ||
"version": "0.0.0-insiders.c056ccf", | ||
"version": "0.0.0-insiders.c1c4286", | ||
"main": "src/index.js", | ||
@@ -5,0 +5,0 @@ "types": "src/index.d.ts", |
@@ -54,4 +54,2 @@ # @tailwindcss/forms | ||
**Note that for text inputs, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example. | ||
Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS: | ||
@@ -58,0 +56,0 @@ |
@@ -8,2 +8,6 @@ const svgToDataUri = require('mini-svg-data-uri') | ||
function resolveColor(color, opacityVariableName) { | ||
return color.replace('<alpha-value>', `var(${opacityVariableName}, 1)`) | ||
} | ||
const forms = plugin.withOptions(function (options = { strategy: undefined }) { | ||
@@ -17,2 +21,3 @@ return function ({ addBase, addComponents, theme }) { | ||
"[type='text']", | ||
'input:where(:not([type]))', | ||
"[type='email']", | ||
@@ -37,3 +42,6 @@ "[type='url']", | ||
'background-color': '#fff', | ||
'border-color': theme('colors.gray.500', colors.gray[500]), | ||
'border-color': resolveColor( | ||
theme('colors.gray.500', colors.gray[500]), | ||
'--tw-border-opacity' | ||
), | ||
'border-width': borderWidth['DEFAULT'], | ||
@@ -54,7 +62,13 @@ 'border-radius': borderRadius.none, | ||
'--tw-ring-offset-color': '#fff', | ||
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]), | ||
'--tw-ring-color': resolveColor( | ||
theme('colors.blue.600', colors.blue[600]), | ||
'--tw-ring-opacity' | ||
), | ||
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`, | ||
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`, | ||
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`, | ||
'border-color': theme('colors.blue.600', colors.blue[600]), | ||
'border-color': resolveColor( | ||
theme('colors.blue.600', colors.blue[600]), | ||
'--tw-border-opacity' | ||
), | ||
}, | ||
@@ -67,3 +81,3 @@ }, | ||
styles: { | ||
color: theme('colors.gray.500', colors.gray[500]), | ||
color: resolveColor(theme('colors.gray.500', colors.gray[500]), '--tw-text-opacity'), | ||
opacity: '1', | ||
@@ -90,2 +104,24 @@ }, | ||
{ | ||
// In Safari on iOS date and time inputs are centered instead of left-aligned and can't be | ||
// changed with `text-align` utilities on the input by default. Resetting this to `inherit` | ||
// makes them left-aligned by default and makes it possible to override the alignment with | ||
// utility classes without using an arbitrary variant to target the pseudo-elements. | ||
base: ['::-webkit-date-and-time-value'], | ||
class: ['.form-input::-webkit-date-and-time-value'], | ||
styles: { | ||
'text-align': 'inherit', | ||
}, | ||
}, | ||
{ | ||
// In Safari on macOS date time inputs that are set to `display: block` have unexpected | ||
// extra bottom spacing. This can be corrected by setting the `::-webkit-datetime-edit` | ||
// pseudo-element to `display: inline-flex`, instead of the browser default of | ||
// `display: inline-block`. | ||
base: ['::-webkit-datetime-edit'], | ||
class: ['.form-input::-webkit-datetime-edit'], | ||
styles: { | ||
display: 'inline-flex', | ||
}, | ||
}, | ||
{ | ||
// In Safari on macOS date time inputs are 4px taller than normal inputs | ||
@@ -126,5 +162,5 @@ // This is because there is extra padding on the datetime-edit and datetime-edit-{part}-field pseudo elements | ||
'background-image': `url("${svgToDataUri( | ||
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme( | ||
'colors.gray.500', | ||
colors.gray[500] | ||
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${resolveColor( | ||
theme('colors.gray.500', colors.gray[500]), | ||
'--tw-stroke-opacity' | ||
)}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>` | ||
@@ -140,4 +176,4 @@ )}")`, | ||
{ | ||
base: ['[multiple]'], | ||
class: null, | ||
base: ['[multiple]', '[size]:where(select:not([size="1"]))'], | ||
class: ['.form-select:where([size]:not([size="1"]))'], | ||
styles: { | ||
@@ -166,5 +202,8 @@ 'background-image': 'initial', | ||
width: spacing[4], | ||
color: theme('colors.blue.600', colors.blue[600]), | ||
color: resolveColor(theme('colors.blue.600', colors.blue[600]), '--tw-text-opacity'), | ||
'background-color': '#fff', | ||
'border-color': theme('colors.gray.500', colors.gray[500]), | ||
'border-color': resolveColor( | ||
theme('colors.gray.500', colors.gray[500]), | ||
'--tw-border-opacity' | ||
), | ||
'border-width': borderWidth['DEFAULT'], | ||
@@ -197,3 +236,6 @@ '--tw-shadow': '0 0 #0000', | ||
'--tw-ring-offset-color': '#fff', | ||
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]), | ||
'--tw-ring-color': resolveColor( | ||
theme('colors.blue.600', colors.blue[600]), | ||
'--tw-ring-opacity' | ||
), | ||
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`, | ||
@@ -290,6 +332,3 @@ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`, | ||
styles: { | ||
outline: [ | ||
`1px solid ButtonText`, | ||
`1px auto -webkit-focus-ring-color` | ||
], | ||
outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`], | ||
}, | ||
@@ -299,9 +338,10 @@ }, | ||
const getStrategyRules = (strategy) => rules | ||
.map((rule) => { | ||
if (rule[strategy] === null) return null | ||
const getStrategyRules = (strategy) => | ||
rules | ||
.map((rule) => { | ||
if (rule[strategy] === null) return null | ||
return { [rule[strategy]]: rule.styles } | ||
}) | ||
.filter(Boolean) | ||
return { [rule[strategy]]: rule.styles } | ||
}) | ||
.filter(Boolean) | ||
@@ -308,0 +348,0 @@ if (strategy.includes('base')) { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
49539
352
123