update gradient for input

reaviz · May 30, 2024 · 6558c76 · 6558c76
1 parent 0b26a85
commit 6558c76
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -20,7 +20,11 @@ const baseTheme: Partial<TextareaTheme> = {
 
 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
@@ -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))'
       );
     })
   ]