From 338bedc39f913f67d0547c765885f4d7f96da42e Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Mon, 4 Sep 2023 17:49:35 +0800
Subject: [PATCH] Ensure all text controls have solid background

Make all text controls have solid background for readability.
---
 .../src/components/FileSelectBox/index.tsx    |  2 +-
 .../react/src/components/ComboBox/index.tsx   |  2 +-
 .../src/components/DropdownSelect/index.tsx   |  6 +-
 .../src/components/RadioButton/index.tsx      |  4 +-
 .../src/components/RadioTickBox/index.tsx     |  5 +-
 .../src/components/MaskedTextInput/index.tsx  | 67 ++++++++++---------
 .../react/src/components/TextInput/index.tsx  | 67 ++++++++++---------
 .../react/src/components/Badge/index.tsx      |  2 +-
 .../src/components/ToggleButton/index.tsx     | 58 +++++++++-------
 .../src/components/ToggleTickBox/index.tsx    |  1 +
 .../src/components/NumberSpinner/index.tsx    |  4 +-
 .../src/components/DateDropdown/index.tsx     |  4 +-
 .../src/components/TimeSpinner/index.tsx      |  4 +-
 13 files changed, 121 insertions(+), 105 deletions(-)

diff --git a/categories/web/blob/react/src/components/FileSelectBox/index.tsx b/categories/web/blob/react/src/components/FileSelectBox/index.tsx
index 39a862b..e91a4f3 100644
--- a/categories/web/blob/react/src/components/FileSelectBox/index.tsx
+++ b/categories/web/blob/react/src/components/FileSelectBox/index.tsx
@@ -427,7 +427,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
   return (
     <FileSelectBoxRootElementComponent
       className={tw(
-        'relative rounded ring-secondary/50 group file-select-box',
+        'relative rounded ring-secondary/50 group file-select-box bg-negative',
         'focus-within:ring-4',
         block && 'flex w-full',
         !block && 'inline-flex align-top justify-center items-center',
diff --git a/categories/web/choice/react/src/components/ComboBox/index.tsx b/categories/web/choice/react/src/components/ComboBox/index.tsx
index 2df4fc8..4285358 100644
--- a/categories/web/choice/react/src/components/ComboBox/index.tsx
+++ b/categories/web/choice/react/src/components/ComboBox/index.tsx
@@ -159,7 +159,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
           list={datalistId}
           data-testid="input"
           className={tw(
-            'rounded-inherit w-full peer block font-inherit bg-transparent box-border',
+            'rounded-inherit w-full peer block font-inherit bg-negative box-border',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
             {
diff --git a/categories/web/choice/react/src/components/DropdownSelect/index.tsx b/categories/web/choice/react/src/components/DropdownSelect/index.tsx
index 8720b40..67a0b4f 100644
--- a/categories/web/choice/react/src/components/DropdownSelect/index.tsx
+++ b/categories/web/choice/react/src/components/DropdownSelect/index.tsx
@@ -69,8 +69,6 @@ export const dropdownSelectPlugin: tailwind.PluginCreator = ({ addComponents })
   });
 };
 
-// todo remove bg-negative
-
 /**
  * Component for selecting a single value from a dropdown.
  */
@@ -115,7 +113,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
             data-testid="label"
             id={labelId}
             className={tw(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -161,7 +159,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
         <div
           data-testid="hint"
           className={tw(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
+            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
diff --git a/categories/web/choice/react/src/components/RadioButton/index.tsx b/categories/web/choice/react/src/components/RadioButton/index.tsx
index 9d8409c..09e70ef 100644
--- a/categories/web/choice/react/src/components/RadioButton/index.tsx
+++ b/categories/web/choice/react/src/components/RadioButton/index.tsx
@@ -97,7 +97,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
         className={tw(
           'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer relative',
           'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50',
-          'active:ring-tertiary/50 active:ring-4 active:text-tertiary',
+					'active:ring-tertiary/50 active:ring-4 active:text-tertiary peer-active:ring-tertiary/50 peer-active:ring-4 peer-active:text-tertiary',
           'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:ring-0',
 					'text-primary peer-checked:text-tertiary peer-focus:text-secondary peer-active:text-tertiary',
           {
@@ -113,7 +113,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
 					},
           {
             'text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled',
-            'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary': variant === 'filled',
+            'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary peer-active:bg-tertiary': variant === 'filled',
           },
           {
             'h-10': size === 'small',
diff --git a/categories/web/choice/react/src/components/RadioTickBox/index.tsx b/categories/web/choice/react/src/components/RadioTickBox/index.tsx
index 171ff29..6bab61a 100644
--- a/categories/web/choice/react/src/components/RadioTickBox/index.tsx
+++ b/categories/web/choice/react/src/components/RadioTickBox/index.tsx
@@ -92,8 +92,9 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
         className={tw(
           'order-1 block rounded-full ring-secondary/50 overflow-hidden gap-4 leading-none select-none cursor-pointer',
           'peer-focus/radio:outline-0 peer-focus/radio:ring-4 peer-focus/radio:ring-secondary/50',
-          'active:ring-tertiary/50 active:ring-4',
-          'peer-active/children:ring-tertiary/50 peer-active/children:ring-4 peer-active/children:text-tertiary',
+					'active:ring-tertiary/50 active:ring-4',
+					'peer-active/radio:ring-tertiary/50 peer-active/radio:ring-4 peer-active/radio:text-tertiary',
+					'peer-active/children:ring-tertiary/50 peer-active/children:ring-4 peer-active/children:text-tertiary',
           'peer-disabled/radio:opacity-50 peer-disabled/radio:cursor-not-allowed peer-disabled/radio:ring-0',
           'text-primary peer-disabled/radio:text-primary peer-focus/radio:text-secondary peer-checked/radio:text-tertiary active:text-tertiary',
         )}
diff --git a/categories/web/freeform/react/src/components/MaskedTextInput/index.tsx b/categories/web/freeform/react/src/components/MaskedTextInput/index.tsx
index 5ee3b8f..aafaa3b 100644
--- a/categories/web/freeform/react/src/components/MaskedTextInput/index.tsx
+++ b/categories/web/freeform/react/src/components/MaskedTextInput/index.tsx
@@ -176,7 +176,7 @@ export const MaskedTextInput = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={tw(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -209,42 +209,45 @@ export const MaskedTextInput = React.forwardRef<
         autoComplete={autoComplete ?? 'off'}
         onKeyUp={enhanced ? handleKeyUp : undefined}
         onKeyDown={enhanced ? handleKeyDown : undefined}
-        className={tw(
-          'bg-negative rounded-inherit w-full peer block font-inherit',
-          'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
-          {
-            'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
-          },
-          {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !enhanced,
-            'pr-1.5': variant === 'alternate' && !enhanced,
-          },
-          {
-            'pr-10': enhanced && size === 'small',
-            'pr-12': enhanced && size === 'medium',
-            'pr-16': enhanced && size === 'large',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
-          },
-        )}
+				className={tw(
+					'rounded-inherit w-full peer block font-inherit bg-negative box-border',
+					'focus:outline-0',
+					'disabled:opacity-50 disabled:cursor-not-allowed',
+					{
+						'text-xxs': size === 'small',
+						'text-xs': size === 'medium',
+					},
+					{
+						'pb-1': variant === 'default' && size === 'small',
+					},
+					{
+						'pl-4': variant === 'default',
+						'pl-1.5': variant === 'alternate',
+					},
+					{
+						'pt-5': variant === 'alternate',
+					},
+					{
+						'pr-4': variant === 'default' && !enhanced,
+						'pr-1.5': variant === 'alternate' && !enhanced,
+					},
+					{
+						'pr-10': enhanced && size === 'small',
+						'pr-12': enhanced && size === 'medium',
+						'pr-16': enhanced && size === 'large',
+					},
+					{
+						'h-10': size === 'small',
+						'h-12': size === 'medium',
+						'h-16': size === 'large',
+					},
+				)}
       />
       {hint && (
         <div
           data-testid="hint"
           className={tw(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
+            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
diff --git a/categories/web/freeform/react/src/components/TextInput/index.tsx b/categories/web/freeform/react/src/components/TextInput/index.tsx
index 0295ecd..c91716f 100644
--- a/categories/web/freeform/react/src/components/TextInput/index.tsx
+++ b/categories/web/freeform/react/src/components/TextInput/index.tsx
@@ -119,7 +119,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
             htmlFor={id}
             id={labelId}
             className={tw(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -149,42 +149,45 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
         type={type}
         inputMode={resultInputMode}
         data-testid="input"
-        className={tw(
-          'bg-negative rounded-inherit w-full peer block font-inherit',
-          'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
-          {
-            'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
-          },
-          {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
-          },
-        )}
+				className={tw(
+					'rounded-inherit w-full peer block font-inherit bg-negative box-border',
+					'focus:outline-0',
+					'disabled:opacity-50 disabled:cursor-not-allowed',
+					{
+						'text-xxs': size === 'small',
+						'text-xs': size === 'medium',
+					},
+					{
+						'pb-1': variant === 'default' && size === 'small',
+					},
+					{
+						'pl-4': variant === 'default',
+						'pl-1.5': variant === 'alternate',
+					},
+					{
+						'pt-5': variant === 'alternate',
+					},
+					{
+						'pr-4': variant === 'default' && !indicator,
+						'pr-1.5': variant === 'alternate' && !indicator,
+					},
+					{
+						'pr-10': indicator && size === 'small',
+						'pr-12': indicator && size === 'medium',
+						'pr-16': indicator && size === 'large',
+					},
+					{
+						'h-10': size === 'small',
+						'h-12': size === 'medium',
+						'h-16': size === 'large',
+					},
+				)}
       />
       {hint && (
         <div
           data-testid="hint"
           className={tw(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
+            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
diff --git a/categories/web/information/react/src/components/Badge/index.tsx b/categories/web/information/react/src/components/Badge/index.tsx
index ad785b9..a8ec13f 100644
--- a/categories/web/information/react/src/components/Badge/index.tsx
+++ b/categories/web/information/react/src/components/Badge/index.tsx
@@ -50,7 +50,7 @@ export const Badge = React.forwardRef<BadgeDerivedElement, BadgeProps>((
     style={style}
     data-testid="badge"
   >
-    <span className="relative w-full">
+    <span className="relative">
       {children}
     </span>
   </BadgeDerivedElementComponent>
diff --git a/categories/web/multichoice/react/src/components/ToggleButton/index.tsx b/categories/web/multichoice/react/src/components/ToggleButton/index.tsx
index 41201d1..d4d9d3c 100644
--- a/categories/web/multichoice/react/src/components/ToggleButton/index.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleButton/index.tsx
@@ -116,30 +116,32 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
         data-testid="button"
         htmlFor={id}
         className={tw(
-          'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer',
-          'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50',
-          'active:ring-tertiary/50 active:ring-4',
-          'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:ring-0',
-          'text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary',
-          {
-            'flex w-full': block,
-            'inline-flex max-w-full align-middle': !block,
-          },
-          {
-            'pl-2 gap-2 pr-2': compact,
-            'pl-4 gap-4 pr-4': !compact,
-          },
-          {
-            'border-2 border-primary peer-disabled:border-primary peer-focus:border-secondary peer-checked:border-tertiary active:border-tertiary': variant !== 'bare',
-            'bg-negative text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled',
-            'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary': variant === 'filled',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
-          },
-          className,
+					'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer relative',
+					'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50',
+					'active:ring-tertiary/50 active:ring-4 active:text-tertiary peer-active:ring-tertiary/50 peer-active:ring-4 peer-active:text-tertiary',
+					'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:ring-0',
+					'text-primary peer-checked:text-tertiary peer-focus:text-secondary peer-active:text-tertiary',
+					{
+						'flex w-full': block,
+						'inline-flex max-w-full align-middle': !block,
+					},
+					{
+						'pl-2 gap-2 pr-2': compact,
+						'pl-4 gap-4 pr-4': !compact,
+					},
+					{
+						'bg-current': variant === 'filled',
+					},
+					{
+						'text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled',
+						'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary peer-active:bg-tertiary': variant === 'filled',
+					},
+					{
+						'h-10': size === 'small',
+						'h-12': size === 'medium',
+						'h-16': size === 'large',
+					},
+					className,
         )}
         style={style}
       >
@@ -230,6 +232,14 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
             </>
           )}
         </span>
+				{
+					variant !== 'bare'
+					&& (
+						<span
+							className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0"
+						/>
+					)
+				}
       </label>
     </span>
   );
diff --git a/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx b/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx
index 789e191..b11d1e5 100644
--- a/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx
+++ b/categories/web/multichoice/react/src/components/ToggleTickBox/index.tsx
@@ -115,6 +115,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
           'order-1 block rounded ring-secondary/50 overflow-hidden gap-4 leading-none select-none cursor-pointer',
           'peer-focus/radio:outline-0 peer-focus/radio:ring-4 peer-focus/radio:ring-secondary/50',
           'active:ring-tertiary/50 active:ring-4',
+          'peer-active/radio:ring-tertiary/50 peer-active/radio:ring-4 peer-active/radio:text-tertiary',
           'peer-active/children:ring-tertiary/50 peer-active/children:ring-4 peer-active/children:text-tertiary',
           'peer-disabled/radio:opacity-50 peer-disabled/radio:cursor-not-allowed peer-disabled/radio:ring-0',
           'text-primary peer-disabled/radio:text-primary peer-focus/radio:text-secondary peer-checked/radio:text-tertiary active:text-tertiary',
diff --git a/categories/web/number/react/src/components/NumberSpinner/index.tsx b/categories/web/number/react/src/components/NumberSpinner/index.tsx
index 0dd3243..6fea889 100644
--- a/categories/web/number/react/src/components/NumberSpinner/index.tsx
+++ b/categories/web/number/react/src/components/NumberSpinner/index.tsx
@@ -274,7 +274,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
             id={labelId}
             htmlFor={id}
             className={tw(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -339,7 +339,7 @@ export const NumberSpinner = React.forwardRef<NumberSpinnerDerivedElement, Numbe
         <div
           data-testid="hint"
           className={tw(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none text-primary',
+            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
diff --git a/categories/web/temporal/react/src/components/DateDropdown/index.tsx b/categories/web/temporal/react/src/components/DateDropdown/index.tsx
index d86ba6f..bebee48 100644
--- a/categories/web/temporal/react/src/components/DateDropdown/index.tsx
+++ b/categories/web/temporal/react/src/components/DateDropdown/index.tsx
@@ -125,7 +125,7 @@ export const DateDropdown = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={tw(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -171,7 +171,7 @@ export const DateDropdown = React.forwardRef<
         <div
           data-testid="hint"
           className={tw(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
+            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
diff --git a/categories/web/temporal/react/src/components/TimeSpinner/index.tsx b/categories/web/temporal/react/src/components/TimeSpinner/index.tsx
index 13ef0b7..780b1ae 100644
--- a/categories/web/temporal/react/src/components/TimeSpinner/index.tsx
+++ b/categories/web/temporal/react/src/components/TimeSpinner/index.tsx
@@ -147,7 +147,7 @@ export const TimeSpinner = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={tw(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -193,7 +193,7 @@ export const TimeSpinner = React.forwardRef<
         <div
           data-testid="hint"
           className={tw(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
+            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',