From 0a9e1d58981bc560b7ba9b046c90ed6f6bc60a3d Mon Sep 17 00:00:00 2001
From: Martin Adamko <attitude@users.noreply.github.com>
Date: Wed, 12 Jan 2022 13:58:48 +0100
Subject: [PATCH] Update select styles

+ Options
+ Menu
+ Values (single & multi)
---
 .../fields/SelectField/commonStyles.ts        | 109 +++++++++++++++++-
 1 file changed, 104 insertions(+), 5 deletions(-)

diff --git a/packages/admin/src/components/bindingFacade/fields/SelectField/commonStyles.ts b/packages/admin/src/components/bindingFacade/fields/SelectField/commonStyles.ts
index a3a5793d37..88b4d680e9 100644
--- a/packages/admin/src/components/bindingFacade/fields/SelectField/commonStyles.ts
+++ b/packages/admin/src/components/bindingFacade/fields/SelectField/commonStyles.ts
@@ -25,12 +25,83 @@ export const selectStyles: StylesConfig<OptionTypeBase, boolean, GroupTypeBase<O
 			'padding': '0 var(--cui-gap)',
 		}
 	},
+	singleValue: (provided, { isDisabled }) => {
+		const color = isDisabled
+			? 'var(--cui-control-color)'
+			: 'var(--cui-color-low)'
+
+		return {
+			...provided,
+			color,
+		}
+	},
+	multiValue: (provided, { isDisabled, isFocused }) => {
+		const color = isDisabled ? 'var(--cui-color--low)' : 'var(--cui-filled-control-color)'
+		const borderColor = isDisabled ? 'var(--cui-color--low)' : 'var(--cui-filled-control-border-color)'
+		const backgroundColor = isDisabled ? 'var(--cui-color--lower)' : 'var(--cui-toned-control-background-color)'
+
+		return {
+			...provided,
+			color,
+			borderColor,
+			backgroundColor,
+		}
+	},
+	multiValueLabel: (provided, { isDisabled, isFocused }) => {
+		const color = isDisabled ? 'var(--cui-color--high)' : 'var(--cui-filled-control-color)'
+
+		return {
+			...provided,
+			color,
+		}
+	},
+	multiValueRemove: provided => {
+		const color = 'var(--cui-toned-control-color)'
+		const backgroundColor = 'var(--cui-toned-control-background-color)'
+
+		// TODO: Indirect, but there seens to be no better way for now
+		const isFocusing = provided.backgroundColor
+
+		return {
+			...provided,
+			color,
+			'backgroundColor': isFocusing ? backgroundColor : undefined,
+			'opacity': isFocusing ? 1 : 0.5,
+			'&:hover': {
+				color,
+				backgroundColor,
+				opacity: 1,
+			},
+		}
+	},
+	dropdownIndicator: (provided, { isFocused, isDisabled }) => {
+		return {
+			...provided,
+			'color': isDisabled
+				? 'var(--cui-color--low)'
+				: isFocused
+					? 'var(--cui-color--strong)'
+					: 'var(--cui-color--high)',
+			'&:hover': {
+				color: 'var(--cui-color--strong)',
+			},
+		}
+	},
+	clearIndicator: (provided, { isFocused, isDisabled }) => {
+		return {
+			...provided,
+			'color': isDisabled
+				? 'var(--cui-color--low)'
+				: isFocused
+					? 'var(--cui-color--strong)'
+					: 'var(--cui-color--high)',
+			'&:hover': {
+				color: 'var(--cui-color--strong)',
+			},
+		}
+	},
 	control: (provided, { isFocused, isDisabled }) => {
-		const backgroundColor = isDisabled
-			? 'var(--cui-toned-control-background-color)'
-			: isFocused
-				? 'var(--cui-background-color--above)'
-				: 'var(--cui-background-color--above)'
+		const backgroundColor = 'var(--cui-background-color--above)'
 		const color = isDisabled
 			? 'var(--cui-color--low)'
 			: isFocused
@@ -58,4 +129,32 @@ export const selectStyles: StylesConfig<OptionTypeBase, boolean, GroupTypeBase<O
 			},
 		}
 	},
+	menu: (provided, props) => {
+		const backgroundColor = 'var(--cui-background-color--above)'
+		const border = 'var(--cui-control-border-width) solid var(--cui-color--lower)'
+
+		return {
+			...provided,
+			backgroundColor,
+			border,
+		}
+	},
+	option: (provided, { isFocused, isSelected }) => {
+		const color = isFocused
+			? 'var(--cui-filled-control-color)'
+			: isSelected
+				? 'var(--cui-toned-control-color)'
+				: 'var(--cui-control-color)'
+		const backgroundColor = isFocused
+			? 'var(--cui-filled-control-background-color)'
+			: isSelected
+				? 'var(--cui-toned-control-background-color)'
+				: 'var(--cui-control-background-color)'
+
+		return {
+			...provided,
+			backgroundColor,
+			color,
+		}
+	},
 }