Merge pull request #25 from linked-planet/dev

small style fixes

Author: marcus-wishes

library/src/components/inputs/Inputs.tsx

@@ -137,9 +137,9 @@ const Input = forwardRef(
 					className={twJoin(
 						"inline-flex",
 						inputBaseStyle,
-						appearance !== "subtle"
-							? "border-input-border bg-input"
-							: "border-transparent bg-transparent",
+						appearance === "subtle"
+							? "border-transparent bg-transparent"
+							: undefined,
 						"data-[active=true]:bg-input-active hover:data-[active=true]:bg-input-active",
 						"hover:bg-input-hovered hover:focus-within:bg-input-active focus-within:bg-input-active",
 						"data-[disabled=true]:bg-disabled data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-transparent",

library/src/components/inputs/Select.tsx

@@ -97,7 +97,6 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
 				...classNamesConfig,
 				control: (provided) =>
 					twMerge(
-						classNamesConfig?.control?.(provided),
 						twJoin(
 							inputBaseStyle,
 							"px-2 flex items-center",
@@ -114,13 +113,14 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
 								? "bg-input hover:bg-input-hovered"
 								: undefined,
 						),
+						classNamesConfig?.control?.(provided),
 						className,
 					),
 				menu: (provided) =>
 					twMerge(menuStyles, classNamesConfig?.menu?.(provided)),
 				clearIndicator: (provided) =>
 					twMerge(
-						"w-4 cursor-pointer text-text-subtlest hover:text-text",
+						"w-4 cursor-pointer text-text-subtlest hover:text-text focus-visible:outline-selected-bold focus-visible:outline-2 focus-visible:outline",
 						classNamesConfig?.clearIndicator?.(provided),
 					),
 				dropdownIndicator: (provided) =>
@@ -162,7 +162,7 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
 				multiValue: (provided) => {
 					return twJoin(
 						twMerge(
-							"bg-neutral w-auto rounded-sm pl-1 mr-2 my-0.5 text-text",
+							"bg-neutral w-auto rounded-sm pl-1 mr-2 my-1 text-text",
 							provided.isDisabled
 								? "bg-disabled text-disabled-text"
 								: undefined,
@@ -173,7 +173,7 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
 				},
 				multiValueRemove: (provided) =>
 					twMerge(
-						"hover:bg-danger-hovered flex-none active:bg-danger-pressed focus-visible:outline-offset-0 px-1 cursor-pointer ml-1 flex items-center rounded-r-sm " as const,
+						"hover:bg-danger-hovered flex-none active:bg-danger-pressed focus-visible:outline-offset-0 focus-visible:outline-selected-bold focus-visible:outline focus-visible:outline-2 px-1 cursor-pointer ml-1 flex items-center rounded-r-sm " as const,
 						classNamesConfig?.multiValueRemove?.(provided),
 					),
 				option: (provided) =>
@@ -210,10 +210,8 @@ const customStyles = {
 	control: (provided: CSSObjectWithLabel) => ({
 		...provided,
 		cursor: "pointer",
-		minHeight: "2rem",
-		//borderWidth: "2px",
+		minHeight: "2.25rem", // this is min-h-9 as set in the inputBaseStyle
 		flexWrap: "nowrap" as const,
-		//height: "1.83rem",
 	}),
 }
 

library/src/components/styleHelper.ts

@@ -4,7 +4,7 @@ export const overlayBaseStyle =
 	"bg-surface-overlay relative shadow-overlay border-border border-solid border z-50 rounded overflow-auto max-h-full" /* only-x-auto to allow for horizontal scrolling but do not cut off the outline */
 
 export const inputBaseStyle = twJoin(
-	"min-h-8 rounded box-border w-full relative border border-input-border border-solid focus-within:border-transparent data-[active=true]:border-transparent data-[invalid=true]:border-transparent ease-in-out transition duration-200 p-0  ",
+	"min-h-9 rounded box-border w-full relative border-[0.88px] border-input-border bg-input focus-within:bg-input-active border-solid focus-within:border-transparent data-[active=true]:border-transparent data-[invalid=true]:border-transparent ease-in-out transition duration-200 p-0  ",
 	"before:pointer-events-none before:z-10 before:content-[''] before:absolute before:-inset-[0.5px] before:box-border before:rounded before:border-2 before:border-solid before:border-transparent",
 	"focus-within:before:border-input-border-focused",
 	"data-[active=true]:before:border-input-border-focused",