diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts index ab7d8573..7bee60d6 100644 --- a/src/form/Input/InputTheme.ts +++ b/src/form/Input/InputTheme.ts @@ -25,7 +25,7 @@ const baseTheme: InputTheme = { input: 'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-none px-0.5 disabled:cursor-not-allowed disabled:text-disabled', inline: 'bg-transparent border-0 outline-none', - disabled: 'text-waterloo', + disabled: 'text-waterloo cursor-not-allowed', fullWidth: 'w-full', error: 'border-error', sizes: { @@ -44,11 +44,20 @@ export const inputTheme: InputTheme = { ...baseTheme, base: [ baseTheme.base, - 'bg-panel border border-surface text-surface-content' + 'bg-panel border border-panel-accent text-surface-content hover:border-panel-accent light:hover:border-panel-accent', + 'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]', + 'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-[2] hover:after:rounded hover:after:-bottom-[1px] hover:after:inset-x-0.5' + ].join(' '), + focused: [ + baseTheme.focused, + 'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]', + 'focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-[2] focus-within:after:rounded focus-within:after:-bottom-[1px] focus-within:after:inset-x-0.5' ].join(' '), - focused: `${baseTheme.focused} after:bg-bottom-border-glow after:content-[""] after:absolute after:h-0.5 after:z-[2] after:rounded after:-bottom-px after:inset-x-0.5`, input: [baseTheme.input, ' placeholder-accent'].join(' '), - disabled: [baseTheme.disabled, 'disabled-within:bg-dark-disabled'].join(' '), + disabled: [ + baseTheme.disabled, + 'disabled-within:bg-dark-disabled disabled-within:after:content-none' + ].join(' '), adornment: { ...baseTheme.adornment, base: [baseTheme.adornment.base, 'text-surface-content'].join(' ') diff --git a/src/form/Textarea/TextareaTheme.ts b/src/form/Textarea/TextareaTheme.ts index 18ba5874..7f2cc6fa 100644 --- a/src/form/Textarea/TextareaTheme.ts +++ b/src/form/Textarea/TextareaTheme.ts @@ -20,7 +20,11 @@ const baseTheme: Partial = { export const textareaTheme: TextareaTheme = { ...baseTheme, - base: [baseTheme.base, inputTheme.base].join(' '), + base: [ + baseTheme.base, + inputTheme.base, + 'disabled-within:hover:after:content-none' + ].join(' '), input: [baseTheme.input, inputTheme.input].join(' '), disabled: [baseTheme.disabled, inputTheme.disabled].join(' '), fullWidth: inputTheme.fullWidth, diff --git a/tailwind.config.ts b/tailwind.config.ts index 41817b40..1d20520d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -154,7 +154,7 @@ const config: Config = { plugin(({ addVariant }) => { addVariant( 'disabled-within', - '&:has(input:is(:disabled),button:is(:disabled))' + '&:has(input:is(:disabled),textarea:is(:disabled),button:is(:disabled))' ); }) ]