From be7add83c77809f6210d1bf877d8009840da5c47 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Wed, 4 Oct 2023 17:18:19 +0300
Subject: [PATCH] fix: update mgt-taxonomy-picker colors to match mgt-picker
 (#2747)

---
 .../mgt-taxonomy-picker/mgt-taxonomy-picker.scss | 16 +++++++++++++++-
 .../mgt-taxonomy-picker.theme.scss               |  5 +++++
 .../mgt-taxonomy-picker/mgt-taxonomy-picker.ts   |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
index 4a82d0d514..b60e054eb9 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
@@ -10,11 +10,25 @@
 @import './mgt-taxonomy-picker.theme';
 
 :host {
-  --max-height: var(--taxonomy-picker-max-height, 380px);
+  --max-height: var(--taxonomy-picker-list-max-height, 380px);
 
   .picker {
     background-color: $taxonomy-picker-background-color;
   }
+
+  fluent-combobox {
+    &::part(selected-value) {
+      &::placeholder {
+        color: $taxonomy-picker-placeholder-color;
+      }
+
+      &:hover {
+        &::placeholder {
+          color: $taxonomy-picker-placeholder-hover-color;
+        }
+      }
+    }
+  }
 }
 
 [dir='rtl'] {
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss
index 0229c3baeb..0381af56f2 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss
@@ -8,3 +8,8 @@
 @import '../../styles/shared-sass-variables';
 
 $taxonomy-picker-background-color: var(--taxonomy-picker-background-color, transparent);
+$taxonomy-picker-placeholder-color: var(--taxonomy-picker-placeholder-color, var(--input-filled-placeholder-rest));
+$taxonomy-picker-placeholder-hover-color: var(
+  --taxonomy-picker-placeholder-color-hover,
+  var(--secondary-text-hover-color)
+);
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
index 67cf0b1e48..4293fdf2ea 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
@@ -33,6 +33,8 @@ registerFluentComponents(fluentCombobox, fluentOption);
  *
  * @cssprop --taxonomy-picker-background-color - {Color} Picker component background color
  * @cssprop --taxonomy-picker-list-max-height - {String} max height for options list. Default value is 380px.
+ * @cssprop --taxonomy-picker-placeholder-color - {Color} Text color for the placeholder in the picker
+ * @cssprop --taxonomy-picker-placeholder-hover-color - {Color} Text color for the placeholder in the picker on hover
  */
 @customElement('taxonomy-picker')
 export class MgtTaxonomyPicker extends MgtTemplatedComponent {