[DST-110]: Share Field Styles across multiple Components

themes/theme-b2b/src/components/DateField.styles.ts

@@ -1,18 +1,24 @@
 import { ThemeComponent, cva } from '@marigold/system';
+import {
+  inputBackground,
+  inputBox,
+  inputDisabled,
+  inputFocus,
+  inputSpacing,
+} from './Input.styles';
 
 export const DateField: ThemeComponent<'DateField'> = {
   field: cva([
-    'bg-bg-surface',
-    'border-border-light rounded-sm border outline-none',
-    'h-[34px] px-2',
+    inputBox,
+    inputBackground,
+    inputDisabled('group-disabled/field'),
+    inputFocus('group-focus/field'),
+    inputSpacing,
+    'h-[34px]',
     'group-hover/field:border-border-hover',
     'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:outline-none',
-    'group-focus/field:border-border-focus group-focus/field:outline-outline-focus group-focus/field:-outline-offset-1',
-    ' group-disabled/field:bg-bg-disabled group-disabled/field:border-border-disabled group-disabled/field:text-text-disabled',
     ' group-readonly/field:bg-bg-transparent group-readonly/field:text-text-disabled',
   ]),
-
   segment: cva(['rounded-sm', 'focus:bg-bg-focus focus:text-white']),
-
   action: cva(''),
 };

themes/theme-b2b/src/components/Input.styles.ts

@@ -1,17 +1,35 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
+export const inputBox =
+  'border-border-light rounded-sm border outline-none outline-offset-[-1px]';
+export const inputBackground = 'bg-bg-surface';
+export const inputSpacing = 'px-2';
+
+export const inputFocus = (selector: string = 'focus') =>
+  `${selector}:border-border-focus ${selector}:outline-outline-focus`;
+
+export const inputDisabled = (selector: string = 'disabled') =>
+  `${selector}:bg-bg-disabled ${selector}:text-text-disabled ${selector}:hover:border-border-disabled ${selector}:border-border-disabled ${selector}:cursor-not-allowed`;
+
+export const inputError = (selector: string = 'error') =>
+  `${selector}:border-border-error ${selector}:outline-outline-error ${selector}:-outline-offset-1`;
+
+export const inputHover = (selector: string = 'hover') =>
+  `${selector}:border-border-hover`;
+
 export const Input: ThemeComponent<'Input'> = {
   icon: cva('left-2'),
   action: cva('right-0'),
   input: cva([
-    'bg-bg-surface',
-    'border-border-light rounded-sm border  outline-none',
-    'px-2 leading-[2]',
-    'hover:border-border-hover',
+    inputBox,
+    inputBackground,
+    inputFocus(),
+    inputDisabled(),
+    inputHover(),
+    inputError('data-[error]'),
+    inputSpacing,
+    'leading-[2]',
     'read-only:focus:border-border-light read-only:focus:outline-none',
-    'focus:border-border-focus focus:outline-outline-focus focus:-outline-offset-1',
-    'disabled:bg-bg-disabled disabled:text-text-disabled disabled:cursor-not-allowed ',
-    'data-[error]:border-border-error data-[error]:outline-outline-error data-[error]:-outline-offset-1',
     // Extra padding for when an icon/action is present
     'group-data-[icon]/input:pl-8',
   ]),

themes/theme-b2b/src/components/Select.styles.ts

@@ -1,16 +1,26 @@
 import { ThemeComponent, cva } from '@marigold/system';
+import {
+  inputBackground,
+  inputBox,
+  inputDisabled,
+  inputError,
+  inputFocus,
+  inputHover,
+  inputSpacing,
+} from './Input.styles';
 
 export const Select: ThemeComponent<'Select'> = {
   icon: cva(),
   select: cva([
+    inputBox,
+    inputDisabled(),
+    inputFocus(),
+    inputError('data-[error]'),
+    inputHover(),
+    inputBackground,
+    inputSpacing,
     'appearance-none leading-8',
-    'px-2',
-    'bg-bg-surface border-border-light rounded-sm border border-solid',
-    'cursor-pointer outline-none',
-    'hover:border-border-hover',
-    'disabled:border-border-disabled disabled:text-text-disabled disabled:bg-bg-disabled disabled:cursor-not-allowed',
-    'focus:border-border-focus',
-    'aria-expanded:bg-bg-neutral aria-expanded:border-border-light',
-    'data-[error]:border-border-error data-[error]:shadow-none',
+    'cursor-pointer',
+    'aria-expanded:bg-bg-neutral ',
   ]),
 };

themes/theme-b2b/src/components/TextArea.styles.ts

@@ -1,12 +1,22 @@
 import { ThemeComponent, cva } from '@marigold/system';
+import {
+  inputBackground,
+  inputBox,
+  inputDisabled,
+  inputError,
+  inputFocus,
+  inputHover,
+  inputSpacing,
+} from './Input.styles';
 
 export const TextArea: ThemeComponent<'TextArea'> = cva([
+  inputBox,
+  inputBackground,
+  inputHover(),
+  inputFocus(),
+  inputDisabled(),
+  inputError('group-error/field'),
+  inputSpacing,
   'text-text-body font-body leading-8',
-  'border-border-light rounded-sm border outline-none',
-  'px-2 py-0',
-  'hover:border-border-hover',
   'read-only:focus:border-border-light read-only:focus:shadow-none',
-  'focus:border-border-focus focus:shadow-[0_0_0_1px_#fa8005]',
-  'disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:border-border-disabled disabled:border-border-disabled disabled:cursor-not-allowed',
-  'group-error/field:border-border-error group-error/field:shadow-[0_0_0_1px_#dd4142]',
 ]);