@epam/assets 5.4.1 → 5.4.2

package/theme/theme_promo.scss

@@ -647,10 +647,6 @@
         --uui-flex-row-bg: var(--gray5);
     }
 
-    .uui-panel {
-        --uui-panel-bg: transparent;
-    }
-
     .uui-panel.uui-color-white {
         --uui-panel-bg: var(--white);
     }
@@ -662,113 +658,126 @@
     /* Tag */
 
     .uui-tag {
-        --uui-tag-border-radius: 0;
-
         &.uui-color-white {
-            --uui-tag-bg: var(--uui-neutral-0);
-            --uui-tag-bg-hover: var(--uui-neutral-10);
-            --uui-tag-border: var(--uui-neutral-0);
-            --uui-tag-border-hover: var(--uui-neutral-10);
-            --uui-tag-caption: var(--uui-text-primary);
-            --uui-tag-fill: var(--uui-neutral-60);
-
-            .uui-count_indicator {
-                --uui-count_indicator-bg: var(--uui-neutral-30);
-                --uui-count_indicator-border: var(--uui-neutral-30);
-                --uui-count_indicator-caption: var(--uui-neutral-70);
+            &.uui-fill-solid {
+                --uui-tag-bg-hover: var(--uui-neutral-10);
+                --uui-tag-border-hover: var(--uui-neutral-10);
+                --uui-tag-fill: var(--uui-neutral-60);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                    --uui-count_indicator-caption: var(--uui-neutral-70);
+                }
             }
 
             &.uui-fill-outline {
                 --uui-tag-bg-hover: var(--uui-neutral-10);
                 --uui-tag-border: var(--uui-neutral-30);
                 --uui-tag-border-hover: var(--uui-neutral-30);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
             }
         }
 
         &.uui-color-gray10 {
-            --uui-tag-bg: var(--uui-neutral-10);
-            --uui-tag-bg-hover: var(--uui-neutral-20);
-            --uui-tag-border: var(--uui-neutral-10);
-            --uui-tag-border-hover: var(--uui-neutral-20);
-            --uui-tag-caption: var(--uui-text-primary);
-            --uui-tag-fill: var(--uui-neutral-60);
-
-            .uui-count_indicator {
-                --uui-count_indicator-bg: var(--uui-neutral-30);
-                --uui-count_indicator-border: var(--uui-neutral-30);
-                --uui-count_indicator-caption: var(--uui-neutral-70);
+            &.uui-fill-solid {
+                --uui-tag-border-hover: var(--uui-neutral-20);
+                --uui-tag-fill: var(--uui-neutral-60);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                    --uui-count_indicator-caption: var(--uui-neutral-70);
+                }
             }
 
             &.uui-fill-outline {
                 --uui-tag-bg: var(--uui-neutral-5);
                 --uui-tag-bg-hover: var(--uui-neutral-10);
                 --uui-tag-border: var(--uui-neutral-30);
+                --uui-tag-border-hover: var(--uui-neutral-30);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
             }
         }
 
-        &.uui-color-gray70 {
-            --uui-tag-bg: var(--uui-neutral-70);
-            --uui-tag-border: var(--uui-neutral-70);
-            --uui-tag-bg-hover: var(--uui-neutral-80);
-            --uui-tag-border-hover: var(--uui-neutral-80);
-
-            .uui-count_indicator {
-                --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
-                --uui-count_indicator-caption: var(--uui-neutral-0);
+        &.uui-color-neutral,
+        &.uui-color-gray30 {
+            &.uui-fill-solid {
+                --uui-tag-bg: var(--uui-neutral-30);
+                --uui-tag-bg-hover: var(--uui-neutral-40);
+                --uui-tag-border: var(--uui-neutral-30);
+                --uui-tag-border-hover: var(--uui-neutral-40);
+                --uui-tag-caption: var(--uui-text-primary);
+                --uui-tag-fill: var(--uui-neutral-60);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-0);
+                    --uui-count_indicator-border: var(--uui-neutral-0);
+                }
             }
 
             &.uui-fill-outline {
                 --uui-tag-bg: var(--uui-neutral-20);
                 --uui-tag-bg-hover: var(--uui-neutral-30);
-                --uui-tag-border: var(--uui-neutral-50);
-                --uui-tag-border-hover: var(--uui-neutral-50);
+                --uui-tag-border: var(--uui-neutral-40);
+                --uui-tag-border-hover: var(--uui-neutral-40);
 
                 .uui-count_indicator {
-                    --uui-count_indicator-border: var(--uui-neutral-40);
-                    --uui-count_indicator-caption: var(--uui-neutral-70);
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
                 }
             }
         }
 
-        &.uui-color-warning, &.uui-color-amber {
-            --uui-tag-caption: var(--uui-text-primary);
-            --uui-tag-fill: var(--uui-neutral-90);
-
-            .uui-count_indicator {
-                --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
-                --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
-            }
-
-            &.uui-fill-outline .uui-count_indicator {
-                --uui-count_indicator-bg: var(--uui-neutral-0);
-                --uui-count_indicator-border: var(--uui-neutral-40);
-            }
-        }
-
-        &.uui-color-neutral, &.uui-color-gray30 {
-            --uui-tag-bg: var(--uui-neutral-30);
-            --uui-tag-bg-hover: var(--uui-neutral-40);
-            --uui-tag-border: var(--uui-neutral-30);
-            --uui-tag-border-hover: var(--uui-neutral-40);
-            --uui-tag-caption: var(--uui-text-primary);
-            --uui-tag-fill: var(--uui-neutral-60);
+        &.uui-color-gray70 {
+            &.uui-fill-solid {
+                --uui-tag-caption: var(--uui-neutral-0);
+                --uui-tag-fill: var(--uui-neutral-0);
+                --uui-tag-bg: var(--uui-neutral-70);
+                --uui-tag-border: var(--uui-neutral-70);
+                --uui-tag-bg-hover: var(--uui-neutral-80);
+                --uui-tag-border-hover: var(--uui-neutral-80);
 
-            .uui-count_indicator {
-                --uui-count_indicator-bg: var(--uui-neutral-0);
-                --uui-count_indicator-border: var(--uui-neutral-0);
+                .uui-count_indicator {
+                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
+                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
+                    --uui-count_indicator-caption: var(--uui-neutral-0);
+                }
             }
 
             &.uui-fill-outline {
                 --uui-tag-bg: var(--uui-neutral-20);
                 --uui-tag-bg-hover: var(--uui-neutral-30);
-                --uui-tag-border: var(--uui-neutral-40);
-                --uui-tag-border-hover: var(--uui-neutral-40);
+                --uui-tag-border: var(--uui-neutral-50);
+                --uui-tag-border-hover: var(--uui-neutral-50);
+
+            }
+        }
+
+        &.uui-color-warning,
+        &.uui-color-amber {
+            &.uui-fill-solid {
+                --uui-tag-caption: var(--uui-text-primary);
+                --uui-tag-fill: var(--uui-neutral-90);
 
                 .uui-count_indicator {
-                    --uui-count_indicator-bg: var(--uui-neutral-30);
-                    --uui-count_indicator-border: var(--uui-neutral-30);
+                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
+                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
                 }
             }
+
+            &.uui-fill-outline .uui-count_indicator {
+                --uui-count_indicator-bg: var(--uui-neutral-0);
+                --uui-count_indicator-border: var(--uui-neutral-40);
+            }
         }
     }
 

package/theme/theme_vanilla_thunder.scss

@@ -277,7 +277,6 @@
         --uui-color-contrast: var(--uui-secondary-contrast);
     }
 
-
     .uui-button {
         --uui-border-radius: 8px;
         --uui-btn-font: var(--font-museo-sans);
@@ -438,6 +437,23 @@
         }
     }
 
+    /* CountIndicator */
+
+    .uui-count_indicator {
+        &.uui-color-white {
+            --uui-color-5: var(--chromatic-0);
+            --uui-color-10: var(--blue-50);
+            --uui-color-20: var(--uui-primary-10);
+            --uui-color-50: var(--white);
+            --uui-color-60: var(--blue-50);
+            --uui-color-70: var(--blue-100);
+        }
+
+        &:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {
+            --uui-count_indicator-caption: var(--uui-neutral-70);
+        }
+    }
+
     .uui-button {
         &.uui-size-42, &.uui-size-48 {
             :global(.uui-caption) {