@tailwindcss/forms
Advanced tools
Comparing version 0.0.0-insiders.c763df9 to 0.0.0-insiders.c846b72
@@ -10,4 +10,18 @@ # Changelog | ||
- Nothing yet! | ||
### Fixed | ||
- Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137)) | ||
## [0.5.3] - 2022-09-02 | ||
### Fixed | ||
- Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126)) | ||
## [0.5.2] - 2022-05-18 | ||
### Added | ||
- Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118)) | ||
## [0.5.1] - 2022-05-03 | ||
@@ -115,3 +129,5 @@ | ||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...HEAD | ||
[unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...HEAD | ||
[0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3 | ||
[0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2 | ||
[0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1 | ||
@@ -118,0 +134,0 @@ [0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0 |
{ | ||
"name": "@tailwindcss/forms", | ||
"version": "0.0.0-insiders.c763df9", | ||
"version": "0.0.0-insiders.c846b72", | ||
"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 @@ |
@@ -1,2 +0,7 @@ | ||
declare function plugin(options?: { strategy?: 'base' | 'class' }): Function | ||
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): { handler: () => void } | ||
declare namespace plugin { | ||
const __isOptionsFunction: true | ||
} | ||
export = plugin |
@@ -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', | ||
@@ -125,5 +139,5 @@ }, | ||
'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>` | ||
@@ -139,4 +153,4 @@ )}")`, | ||
{ | ||
base: ['[multiple]'], | ||
class: null, | ||
base: ['[multiple]', '[size]:where(select:not([size="1"]))'], | ||
class: ['.form-select:where([size]:not([size="1"]))'], | ||
styles: { | ||
@@ -165,5 +179,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'], | ||
@@ -196,3 +213,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)`, | ||
@@ -199,0 +219,0 @@ '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)`, |
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
50717
332
123