feat: Update styles for input and texarea with hovers (#1993)

* feat: Update styles for input and texarea with hovers * Create tasty-crews-play.md
marigold-ui · Apr 14, 2022 · 4d22086 · 4d22086
1 parent 59f3e6f
commit 4d22086
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 21 deletions.
diff --git a/.changeset/tasty-crews-play.md b/.changeset/tasty-crews-play.md
@@ -0,0 +1,6 @@
+---
+"@marigold/theme-b2b": patch
+"@marigold/theme-unicorn": patch
+---
+
+feat: Update styles for input and texarea with hovers
diff --git a/themes/theme-b2b/src/components/Input.style.ts b/themes/theme-b2b/src/components/Input.style.ts
@@ -14,6 +14,10 @@ export const Input: Theme['components']['Input'] = {
     py: 'none',
     px: 'xsmall',
 
+    '&:hover': {
+      borderColor: 'gray50',
+    },
+
     '&:focus': {
       borderColor: 'blue60',
       boxShadow: `0 0 0 1px ${colors.blue60}`,

diff --git a/themes/theme-b2b/src/components/TextArea.style.ts b/themes/theme-b2b/src/components/TextArea.style.ts
@@ -1,27 +1,37 @@
 import { Theme } from '@marigold/components';
+import { colors } from '../colors';
 
 export const TextArea: Theme['components']['TextArea'] = {
   base: {
-    fontFamily: 'body',
-    lineHeight: 'medium',
-    py: 'xxsmall',
-    px: 'xsmall',
     color: 'text',
-    border: 'none',
+    lineHeight: 'large',
+
+    border: '1px solid',
+    borderColor: 'gray40',
     borderRadius: 'small',
-    outline: '1px solid',
-    outlineColor: 'disabled',
+    outline: 'none',
+
+    py: 'none',
+    px: 'xsmall',
+
+    '&:hover': {
+      borderColor: 'gray50',
+    },
+
     '&:focus': {
-      outline: '2px solid',
-      outlineColor: 'blue60',
+      borderColor: 'blue60',
+      boxShadow: `0 0 0 1px ${colors.blue60}`,
     },
+
     '&:disabled': {
-      cursor: 'not-allowed',
-      color: 'disabled',
       bg: 'gray20',
+      color: 'gray40',
+      cursor: 'not-allowed',
     },
+
     '&:error': {
-      color: 'red60',
+      borderColor: 'red60',
+      boxShadow: `0 0 0 1px ${colors.red60}`,
     },
   },
 };
diff --git a/themes/theme-unicorn/src/components/Input.style.ts b/themes/theme-unicorn/src/components/Input.style.ts
@@ -14,6 +14,10 @@ export const Input: Theme['components']['Input'] = {
     py: 'none',
     px: 'xsmall',
 
+    '&:hover': {
+      borderColor: 'purple40',
+    },
+
     '&:focus': {
       borderColor: 'purple60',
       boxShadow: `0 0 0 1px ${colors.purple60}`,

diff --git a/themes/theme-unicorn/src/components/TextArea.style.ts b/themes/theme-unicorn/src/components/TextArea.style.ts
@@ -1,24 +1,37 @@
 import { Theme } from '@marigold/components';
+import { colors } from '../colors';
 
 export const TextArea: Theme['components']['TextArea'] = {
   base: {
-    fontFamily: 'body',
-    lineHeight: 'medium',
-    padding: '4px 8px',
     color: 'text',
-    border: 0,
-    borderRadius: '8px',
-    outline: '2px solid',
+    lineHeight: 'large',
+
+    border: '1px solid',
+    borderColor: 'gray40',
+    borderRadius: 'small',
+    outline: 'none',
+
+    py: 'none',
+    px: 'xsmall',
+
+    '&:hover': {
+      borderColor: 'purple40',
+    },
+
     '&:focus': {
-      outline: '4px solid',
-      outlineColor: 'primary',
+      borderColor: 'purple60',
+      boxShadow: `0 0 0 1px ${colors.purple60}`,
     },
+
     '&:disabled': {
       bg: 'gray20',
       color: 'gray40',
+      cursor: 'not-allowed',
     },
+
     '&:error': {
-      color: 'red60',
+      borderColor: 'red60',
+      boxShadow: `0 0 0 1px ${colors.red60}`,
     },
   },
 };