From 0fbb7489c62f5fe5569b84fff96bd6f94eedebdd Mon Sep 17 00:00:00 2001
From: IhorKorenets <Ihor_korenets@epam.com>
Date: Thu, 30 Nov 2023 17:55:02 +0200
Subject: [PATCH] [Tag dark theme]: fixed additional colors

---
 epam-assets/theme/theme_loveship_dark.scss | 84 +++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
index 3544710205..b236696842 100644
--- a/epam-assets/theme/theme_loveship_dark.scss
+++ b/epam-assets/theme/theme_loveship_dark.scss
@@ -778,7 +778,8 @@
             }
         }
 
-        &.uui-color-neutral {
+        &.uui-color-neutral,
+        &.uui-color-night300 {
             --uui-tag-bg: var(--uui-neutral-40);
             --uui-tag-bg-hover: var(--uui-neutral-30);
             --uui-tag-border: var(--uui-neutral-40);
@@ -804,6 +805,87 @@
             }
         }
 
+        &.uui-color-white {
+            --uui-tag-caption: var(--uui-neutral-70);
+            --uui-tag-fill: var(--uui-neutral-70);
+            --uui-tag-bg-hover: var(--uui-neutral-5);
+            --uui-tag-border-hover: var(--uui-neutral-5);
+
+            .uui-count_indicator {
+                --uui-count_indicator-bg: var(--uui-neutral-40);
+                --uui-count_indicator-border: var(--uui-neutral-40);
+                --uui-count_indicator-caption: var(--uui-neutral-10);
+            }
+
+            &.uui-fill-outline {
+                --uui-tag-caption: var(--uui-neutral-0);
+                --uui-tag-fill: var(--uui-neutral-0);
+                --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 5%, transparent);
+                --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
+                --uui-tag-border: var(--uui-neutral-0);
+                --uui-tag-border-hover: var(--uui-neutral-0);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-40);
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                    --uui-count_indicator-caption: var(--uui-neutral-10);
+                }
+            }
+
+        }
+
+        &.uui-color-night100 {
+            --uui-tag-bg: var(--uui-neutral-40);
+            --uui-tag-bg-hover: var(--uui-neutral-30);
+            --uui-tag-border: var(--uui-neutral-40);
+            --uui-tag-border-hover: var(--uui-neutral-30);
+
+            .uui-count_indicator {
+                --uui-count_indicator-bg: var(--uui-neutral-40);
+                --uui-count_indicator-border: var(--uui-neutral-40);
+                --uui-count_indicator-caption: var(--uui-neutral-10);
+            }
+
+            &.uui-fill-outline {
+                --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 12%, transparent);
+                --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 15%, transparent);
+                --uui-tag-border: var(--uui-neutral-20);
+                --uui-tag-border-hover: var(--uui-neutral-20);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-40);
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                    --uui-count_indicator-caption: var(--uui-neutral-10);
+                }
+            }
+        }
+
+        &.uui-color-night700 {
+            --uui-tag-bg: var(--uui-neutral-80);
+            --uui-tag-bg-hover: var(--uui-neutral-70);
+            --uui-tag-border: var(--uui-neutral-80);
+            --uui-tag-border-hover: var(--uui-neutral-70);
+
+            .uui-count_indicator {
+                --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
+                --uui-count_indicator-border: var(--uui-neutral-40);
+                --uui-count_indicator-caption: var(--uui-neutral-0);
+            }
+
+            &.uui-fill-outline {
+                --uui-tag-bg: var(--uui-neutral-80);
+                --uui-tag-bg-hover: var(--uui-neutral-70);
+                --uui-tag-border: var(--uui-neutral-50);
+                --uui-tag-border-hover: var(--uui-neutral-50);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-70);
+                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
+                    --uui-count_indicator-caption: var(--uui-neutral-10);
+                }
+            }
+        }
+
         &.uui-fill-outline {
             --uui-tag-caption: var(--uui-neutral-5);
             --uui-tag-fill: var(--uui-neutral-10);