From 5b981b3e1239ed7163e97c2d84ff9aa60ea0ca99 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Thu, 3 Aug 2023 15:54:14 +0300 Subject: [PATCH 1/3] Ref: Unifying common inputs styles --- .../theme-b2b/src/components/Input.styles.ts | 27 +++++++++++++------ .../theme-b2b/src/components/Select.styles.ts | 24 +++++++++++------ .../src/components/TextArea.styles.ts | 20 +++++++++----- 3 files changed, 49 insertions(+), 22 deletions(-) diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts index a0128a1119..e1bc8c820b 100644 --- a/themes/theme-b2b/src/components/Input.styles.ts +++ b/themes/theme-b2b/src/components/Input.styles.ts @@ -1,17 +1,28 @@ import { ThemeComponent, cva } from '@marigold/system'; +export const inputBox = + 'border-border-light rounded-sm border outline-none hover:border-border-hover'; +export const inputFocus = + 'focus:border-border-focus focus:outline-outline-focus focus:-outline-offset-1'; +export const inputBackground = 'bg-bg-surface'; +export const inputDisabled = + 'disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:border-border-disabled disabled:border-border-disabled disabled:cursor-not-allowed'; +export const inputError = (selector: string = 'error') => + `${selector}:border-border-error ${selector}:outline-outline-error ${selector}:-outline-offset-1`; +export const inputSpacing = 'px-2'; + 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', - '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', + inputBox, + inputBackground, + inputFocus, + inputDisabled, + inputSpacing, + inputError('data-[error]'), + 'leading-[2]', + 'read-only:focus:border-border-light read-only:focus:outline-none ', // Extra padding for when an icon/action is present 'group-data-[icon]/input:pl-8', ]), diff --git a/themes/theme-b2b/src/components/Select.styles.ts b/themes/theme-b2b/src/components/Select.styles.ts index 864e0dc88f..78e12f415a 100644 --- a/themes/theme-b2b/src/components/Select.styles.ts +++ b/themes/theme-b2b/src/components/Select.styles.ts @@ -1,16 +1,24 @@ import { ThemeComponent, cva } from '@marigold/system'; +import { + inputBackground, + inputBox, + inputDisabled, + inputError, + inputFocus, + inputSpacing, +} from './Input.styles'; export const Select: ThemeComponent<'Select'> = { icon: cva(), select: cva([ + inputBox, + inputDisabled, + inputFocus, + inputBackground, + inputSpacing, + inputError('data-[error]'), '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 ', ]), }; diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts index c25adeba68..a9876dc915 100644 --- a/themes/theme-b2b/src/components/TextArea.styles.ts +++ b/themes/theme-b2b/src/components/TextArea.styles.ts @@ -1,12 +1,20 @@ import { ThemeComponent, cva } from '@marigold/system'; +import { + inputBackground, + inputBox, + inputDisabled, + inputError, + inputFocus, + inputSpacing, +} from './Input.styles'; export const TextArea: ThemeComponent<'TextArea'> = cva([ + inputBox, + inputBackground, + inputFocus, + inputDisabled, + inputSpacing, + inputError('group-error/field'), '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]', ]); From 36dd7240e566ee9f2c115e168328a9577bf70924 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Fri, 4 Aug 2023 17:46:01 +0300 Subject: [PATCH 2/3] unify datefield styles --- .../src/components/DateField.styles.ts | 20 ++++++++++++------- .../theme-b2b/src/components/Input.styles.ts | 19 ++++++++++-------- .../theme-b2b/src/components/Select.styles.ts | 4 ++-- .../src/components/TextArea.styles.ts | 6 +++--- 4 files changed, 29 insertions(+), 20 deletions(-) diff --git a/themes/theme-b2b/src/components/DateField.styles.ts b/themes/theme-b2b/src/components/DateField.styles.ts index f7b7c5f657..903f381b38 100644 --- a/themes/theme-b2b/src/components/DateField.styles.ts +++ b/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(''), }; diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts index e1bc8c820b..afb30d7fe5 100644 --- a/themes/theme-b2b/src/components/Input.styles.ts +++ b/themes/theme-b2b/src/components/Input.styles.ts @@ -2,14 +2,17 @@ import { ThemeComponent, cva } from '@marigold/system'; export const inputBox = 'border-border-light rounded-sm border outline-none hover:border-border-hover'; -export const inputFocus = - 'focus:border-border-focus focus:outline-outline-focus focus:-outline-offset-1'; export const inputBackground = 'bg-bg-surface'; -export const inputDisabled = - 'disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:border-border-disabled disabled:border-border-disabled disabled:cursor-not-allowed'; +export const inputSpacing = 'px-2'; + +export const inputFocus = (selector: string = 'focus') => + `${selector}:border-border-focus ${selector}:outline-outline-focus ${selector}:-outline-offset-1`; + +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 inputSpacing = 'px-2'; export const Input: ThemeComponent<'Input'> = { icon: cva('left-2'), @@ -17,10 +20,10 @@ export const Input: ThemeComponent<'Input'> = { input: cva([ inputBox, inputBackground, - inputFocus, - inputDisabled, - inputSpacing, + inputFocus(), + inputDisabled(), inputError('data-[error]'), + inputSpacing, 'leading-[2]', 'read-only:focus:border-border-light read-only:focus:outline-none ', // Extra padding for when an icon/action is present diff --git a/themes/theme-b2b/src/components/Select.styles.ts b/themes/theme-b2b/src/components/Select.styles.ts index 78e12f415a..cf926fdf50 100644 --- a/themes/theme-b2b/src/components/Select.styles.ts +++ b/themes/theme-b2b/src/components/Select.styles.ts @@ -12,8 +12,8 @@ export const Select: ThemeComponent<'Select'> = { icon: cva(), select: cva([ inputBox, - inputDisabled, - inputFocus, + inputDisabled(), + inputFocus(), inputBackground, inputSpacing, inputError('data-[error]'), diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts index a9876dc915..4767bd352b 100644 --- a/themes/theme-b2b/src/components/TextArea.styles.ts +++ b/themes/theme-b2b/src/components/TextArea.styles.ts @@ -11,10 +11,10 @@ import { export const TextArea: ThemeComponent<'TextArea'> = cva([ inputBox, inputBackground, - inputFocus, - inputDisabled, - inputSpacing, + inputFocus(), + inputDisabled(), inputError('group-error/field'), + inputSpacing, 'text-text-body font-body leading-8', 'read-only:focus:border-border-light read-only:focus:shadow-none', ]); From 45287aea999959e6459676f3811b30067f158bcf Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Mon, 7 Aug 2023 10:04:51 +0300 Subject: [PATCH 3/3] Fixing outline offset problem --- themes/theme-b2b/src/components/Input.styles.ts | 10 +++++++--- themes/theme-b2b/src/components/Select.styles.ts | 4 +++- themes/theme-b2b/src/components/TextArea.styles.ts | 2 ++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts index afb30d7fe5..48e5832400 100644 --- a/themes/theme-b2b/src/components/Input.styles.ts +++ b/themes/theme-b2b/src/components/Input.styles.ts @@ -1,12 +1,12 @@ import { ThemeComponent, cva } from '@marigold/system'; export const inputBox = - 'border-border-light rounded-sm border outline-none hover:border-border-hover'; + '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 ${selector}:-outline-offset-1`; + `${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`; @@ -14,6 +14,9 @@ export const inputDisabled = (selector: string = 'disabled') => 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'), @@ -22,10 +25,11 @@ export const Input: ThemeComponent<'Input'> = { inputBackground, inputFocus(), inputDisabled(), + inputHover(), inputError('data-[error]'), inputSpacing, 'leading-[2]', - 'read-only:focus:border-border-light read-only:focus:outline-none ', + 'read-only:focus:border-border-light read-only:focus:outline-none', // Extra padding for when an icon/action is present 'group-data-[icon]/input:pl-8', ]), diff --git a/themes/theme-b2b/src/components/Select.styles.ts b/themes/theme-b2b/src/components/Select.styles.ts index cf926fdf50..a81e4281b1 100644 --- a/themes/theme-b2b/src/components/Select.styles.ts +++ b/themes/theme-b2b/src/components/Select.styles.ts @@ -5,6 +5,7 @@ import { inputDisabled, inputError, inputFocus, + inputHover, inputSpacing, } from './Input.styles'; @@ -14,9 +15,10 @@ export const Select: ThemeComponent<'Select'> = { inputBox, inputDisabled(), inputFocus(), + inputError('data-[error]'), + inputHover(), inputBackground, inputSpacing, - inputError('data-[error]'), 'appearance-none leading-8', 'cursor-pointer', 'aria-expanded:bg-bg-neutral ', diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts index 4767bd352b..3c22cb95a4 100644 --- a/themes/theme-b2b/src/components/TextArea.styles.ts +++ b/themes/theme-b2b/src/components/TextArea.styles.ts @@ -5,12 +5,14 @@ import { inputDisabled, inputError, inputFocus, + inputHover, inputSpacing, } from './Input.styles'; export const TextArea: ThemeComponent<'TextArea'> = cva([ inputBox, inputBackground, + inputHover(), inputFocus(), inputDisabled(), inputError('group-error/field'),