Repository: marigold-ui/marigold
Pull request #1993 (2022-04-14 06:59:14)

feat: Update styles for input and texarea with hovers

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 0f0de4768699973995a80d51402c9f5a579843cd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/hover-for-input?filename=.changeset/tasty-crews-play.md&value=---%0A%22%40marigold%2Ftheme-b2b%22%3A%20patch%0A%22%40marigold%2Ftheme-unicorn%22%3A%20patch%0A---%0A%0Afeat%3A%20Update%20styles%20for%20input%20and%20texarea%20with%20hovers%0A)



Patch:
diff --git a/.changeset/light-lobsters-tan.md b/.changeset/light-lobsters-tan.md
new file mode 100644
index 000000000..0bb38a8ba
--- /dev/null
+++ b/.changeset/light-lobsters-tan.md
@@ -0,0 +1,8 @@
+---
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+"@marigold/theme-unicorn": patch
+---
+
+refa: Link styles
diff --git a/.changeset/tasty-crews-play.md b/.changeset/tasty-crews-play.md
new file mode 100644
index 000000000..8177b7a71
--- /dev/null
+++ 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/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx
index 11fbe0d4d..5d2e76e9e 100755
--- a/packages/components/src/Link/Link.tsx
+++ b/packages/components/src/Link/Link.tsx
@@ -1,29 +1,31 @@
 import React, { useRef } from 'react';
 import { useLink } from '@react-aria/link';
-import { conditional } from '@marigold/system';
+import { ThemeExtension, useComponentStyles } from '@marigold/system';
 import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
 
 import { Box, BoxOwnProps } from '../Box';
 
 // Theme Extension
 // ---------------
-export interface LinkThemeExtension<Value> {
-  link?: Value;
-}
+export interface LinkThemeExtension extends ThemeExtension<'Link'> {}
 
 // Props
 // ---------------
 export interface LinkOwnProps extends BoxOwnProps {
   disabled?: boolean;
+  variant?: string;
+  size?: string;
 }
+
 export interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {}
 
 // Component
 // ---------------
 export const Link = (({
   as = 'a',
-  variant = '',
-  children,
+  variant,
+   size,
+   children,
   disabled,
   ...props
 }: LinkProps) => {
@@ -38,15 +40,10 @@ export const Link = (({
     ref
   );
 
+  const styles = useComponentStyles('Link', { variant, size });
+
   return (
-    <Box
-      as={as}
-      variant={conditional(`link.${variant}`, { disabled })}
-      css={{ cursor: disabled ? 'default' : 'pointer' }}
-      ref={ref}
-      {...props}
-      {...linkProps}
-    >
+    <Box as={as} css={styles} ref={ref} {...props} {...linkProps}>
       {children}
     </Box>
   );
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index f7bc537d0..37afa481a 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -11,6 +11,7 @@ import type { HelpTextThemeExtension } from './Field/HelpText';
 import type { ImageThemeExtension } from './Image';
 import type { InputThemeExtension } from './Input';
 import type { LabelThemeExtension } from './Field/Label';
+import type { LinkThemeExtension } from './Link';
 import type { TextAreaThemeExtension } from './TextArea';
 
 // Old Styling Solution
@@ -19,7 +20,6 @@ import { type CardThemeExtension } from './Card';
 import { type CheckboxThemeExtension } from './Checkbox';
 import { type DividerThemeExtension } from './Divider';
 import { type LabelThemeExtension as LegacyLabelThemeExtension } from './Label';
-import { type LinkThemeExtension } from './Link';
 import { type MenuThemeExtension } from './Menu';
 import { type MenuItemThemeExtension } from './MenuItem';
 import { type MessageThemeExtension } from './Message';
@@ -38,6 +38,7 @@ interface ComponentStyles
     LabelThemeExtension,
     InputThemeExtension,
     LabelThemeExtension,
+    LinkThemeExtension,
     TextAreaThemeExtension {}
 
 export interface Theme
@@ -48,7 +49,6 @@ export interface Theme
     CheckboxThemeExtension<CSSObject>,
     DividerThemeExtension<CSSObject>,
     LegacyLabelThemeExtension<CSSObject>,
-    LinkThemeExtension<CSSObject>,
     MenuThemeExtension<CSSObject>,
     MenuItemThemeExtension<CSSObject>,
     MessageThemeExtension<CSSObject>,
diff --git a/themes/theme-b2b/src/component.ts b/themes/theme-b2b/src/component.ts
index 4c30a3fbd..9cb1f7fc1 100644
--- a/themes/theme-b2b/src/component.ts
+++ b/themes/theme-b2b/src/component.ts
@@ -425,18 +425,6 @@ export const component = {
       color: 'gray50',
     },
   },
-  link: {
-    __default: {
-      color: 'blue60',
-      ':hover': {
-        textDecoration: 'none',
-      },
-    },
-    menuItemLink: {
-      color: 'text',
-      textDecoration: 'none',
-    },
-  },
   menuItem: {
     default: {
       display: 'block',
diff --git a/themes/theme-b2b/src/components/Input.style.ts b/themes/theme-b2b/src/components/Input.style.ts
index 3217d6af0..98500c0b4 100644
--- 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/Link.style.ts b/themes/theme-b2b/src/components/Link.style.ts
new file mode 100644
index 000000000..4f9b0f474
--- /dev/null
+++ b/themes/theme-b2b/src/components/Link.style.ts
@@ -0,0 +1,19 @@
+import { Theme } from '@marigold/components';
+
+export const Link: Theme['components']['Link'] = {
+  base: {
+    color: 'blue60',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+    '&disabled': {
+      cursor: 'disabled',
+    },
+  },
+  variant: {
+    menuItemLink: {
+      color: 'text',
+      textDecoration: 'none',
+    },
+  },
+};
diff --git a/themes/theme-b2b/src/components/TextArea.style.ts b/themes/theme-b2b/src/components/TextArea.style.ts
index a801aab08..86117ded0 100644
--- 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-b2b/src/components/index.ts b/themes/theme-b2b/src/components/index.ts
index 5399d2f4c..6410b0690 100644
--- a/themes/theme-b2b/src/components/index.ts
+++ b/themes/theme-b2b/src/components/index.ts
@@ -3,4 +3,5 @@ export * from './HelpText.style';
 export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
+export * from './Link.style';
 export * from './TextArea.style';
diff --git a/themes/theme-core/src/component.ts b/themes/theme-core/src/component.ts
index e9cad87c3..606d1a2ff 100644
--- a/themes/theme-core/src/component.ts
+++ b/themes/theme-core/src/component.ts
@@ -430,18 +430,6 @@ export const component = {
       color: colors.gray50,
     },
   },
-  link: {
-    __default: {
-      color: '#900',
-      ':hover, :visited': {
-        textDecoration: 'none',
-      },
-    },
-    menuItemLink: {
-      color: 'text',
-      textDecoration: 'none',
-    },
-  },
   menuItem: {
     default: {
       display: 'block',
diff --git a/themes/theme-core/src/components/Link.style.ts b/themes/theme-core/src/components/Link.style.ts
new file mode 100644
index 000000000..a793d7812
--- /dev/null
+++ b/themes/theme-core/src/components/Link.style.ts
@@ -0,0 +1,20 @@
+import { Theme } from '@marigold/components';
+
+export const Link: Theme['components']['Link'] = {
+  base: {
+    color: '#900',
+    '&:hover, &:visited': {
+      textDecoration: 'none',
+      cursor: 'pointer',
+    },
+    '&disabled': {
+      cursor: 'disabled',
+    },
+  },
+  variant: {
+    menuItemLink: {
+      color: 'text',
+      textDecoration: 'none',
+    },
+  },
+};
diff --git a/themes/theme-core/src/components/index.ts b/themes/theme-core/src/components/index.ts
index 5399d2f4c..6410b0690 100644
--- a/themes/theme-core/src/components/index.ts
+++ b/themes/theme-core/src/components/index.ts
@@ -3,4 +3,5 @@ export * from './HelpText.style';
 export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
+export * from './Link.style';
 export * from './TextArea.style';
diff --git a/themes/theme-unicorn/src/component.ts b/themes/theme-unicorn/src/component.ts
index 263ab6730..0ba5466e4 100644
--- a/themes/theme-unicorn/src/component.ts
+++ b/themes/theme-unicorn/src/component.ts
@@ -419,18 +419,6 @@ export const component = {
       color: 'gray50',
     },
   },
-  link: {
-    __default: {
-      color: 'primary',
-      ':hover': {
-        textDecoration: 'none',
-      },
-    },
-    menuItemLink: {
-      color: 'text',
-      textDecoration: 'none',
-    },
-  },
   menuItem: {
     default: {
       display: 'block',
diff --git a/themes/theme-unicorn/src/components/Input.style.ts b/themes/theme-unicorn/src/components/Input.style.ts
index 8f951dc6d..a7c38a4aa 100644
--- 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/Link.style.ts b/themes/theme-unicorn/src/components/Link.style.ts
new file mode 100644
index 000000000..4f24fe7c7
--- /dev/null
+++ b/themes/theme-unicorn/src/components/Link.style.ts
@@ -0,0 +1,19 @@
+import { Theme } from '@marigold/components';
+
+export const Link: Theme['components']['Link'] = {
+  base: {
+    color: 'primary',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+    '&disabled': {
+      cursor: 'disabled',
+    },
+  },
+  variant: {
+    menuItemLink: {
+      color: 'text',
+      textDecoration: 'none',
+    },
+  },
+};
diff --git a/themes/theme-unicorn/src/components/TextArea.style.ts b/themes/theme-unicorn/src/components/TextArea.style.ts
index 46f2daeef..a10c7bd34 100644
--- 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}`,
     },
   },
 };
diff --git a/themes/theme-unicorn/src/components/index.ts b/themes/theme-unicorn/src/components/index.ts
index 5399d2f4c..6410b0690 100644
--- a/themes/theme-unicorn/src/components/index.ts
+++ b/themes/theme-unicorn/src/components/index.ts
@@ -3,4 +3,5 @@ export * from './HelpText.style';
 export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
+export * from './Link.style';
 export * from './TextArea.style';


Test patch:
diff --git a/packages/components/src/Link/Link.test.tsx b/packages/components/src/Link/Link.test.tsx
index 8421b8871..d8e2289df 100644
--- a/packages/components/src/Link/Link.test.tsx
+++ b/packages/components/src/Link/Link.test.tsx
@@ -8,22 +8,27 @@ const theme = {
     link: 'Inter',
     body: 'Oswald',
   },
-  link: {
-    __default: {
-      fontFamily: 'link',
-      color: 'blue',
-    },
-    second: {
-      fontFamily: 'body',
-      color: 'green',
-    },
-    ':disabled': {
-      color: 'grey',
+
+  components: {
+    Link: {
+      base: {
+        fontFamily: 'link',
+        color: 'blue',
+        '&:disabled': {
+          color: 'grey',
+        },
+      },
+      variant: {
+        second: {
+          fontFamily: 'body',
+          color: 'green',
+        },
+      },
     },
   },
 };
 
-test('uses `text.link` as default variant', () => {
+test('uses base variant', () => {
   render(
     <ThemeProvider theme={theme}>
       <Link href="#!">Link</Link>