@epam/assets 5.3.0 → 5.4.1

package/icons/common/text-format-18.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M2 8v2h14V8H2zm0 7h8v-2H2v2z" clip-rule="evenodd"/><path d="M2 5V3h14v2H2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M2.25 13.5V12h9v1.5h-9zm0-3.75v-1.5h13.5v1.5H2.25zm0-3.75V4.5h13.5V6H2.25z"/></svg>

package/icons/common/text-format-24.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"><path d="M3.5 18v-2h12v2h-12zm0-5v-2h18v2h-18zm0-5V6h18v2h-18z"/></svg>

package/icons/common/text-format-36.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path fill-rule="evenodd" d="M4 16v4h28v-4H4zm0 14h16v-4H4v4z" clip-rule="evenodd"/><path d="M4 10V6h28v4H4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M4.5 27v-3h18v3h-18zm0-7.5v-3h27v3h-27zm0-7.5V9h27v3h-27z"/></svg>

package/icons/common/view-table-12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12"><path fill-rule="evenodd" d="M2.293 10.207A.964.964 0 003 10.5h7c.275 0 .51-.098.707-.293A.964.964 0 0011 9.5v-7a.964.964 0 00-.293-.706A.964.964 0 0010 1.5H3a.964.964 0 00-.707.294A.964.964 0 002 2.5v7c0 .275.098.51.293.707zM6 9.5H3V7h3v2.5zm1 0h3V7H7v2.5zM10 6V3.5H7V6h3zM6 3.5V6H3V3.5h3z" clip-rule="evenodd"/></svg>

package/icons/common/view-table-18.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M3.675 3h10.65C15.25 3 16 3.672 16 4.5v9c0 .828-.75 1.5-1.675 1.5H3.675C2.75 15 2 14.328 2 13.5v-9C2 3.672 2.75 3 3.675 3zM4 6v3h4.462V6H4zm5.538 0v3H14V6H9.538zM4 10v3h4.462v-3H4zm5.538 0v3H14v-3H9.538z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M2.69 15.31c.294.293.647.44 1.06.44h10.5a1.45 1.45 0 001.06-.44 1.45 1.45 0 00.44-1.06V3.75c0-.413-.147-.766-.44-1.06a1.446 1.446 0 00-1.06-.44H3.75c-.413 0-.766.147-1.06.44-.293.294-.44.647-.44 1.06v10.5c0 .412.147.766.44 1.06zm5.56-1.06h-4.5V10.5h4.5v3.75zm1.5 0h4.5V10.5h-4.5v3.75zM14.25 9V5.25h-4.5V9h4.5zm-6-3.75V9h-4.5V5.25h4.5z" clip-rule="evenodd"/></svg>

package/icons/common/view-table-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"><path fill-rule="evenodd" d="M4.087 20.413A1.93 1.93 0 005.5 21h14a1.93 1.93 0 001.413-.587A1.93 1.93 0 0021.5 19V5a1.93 1.93 0 00-.587-1.413A1.928 1.928 0 0019.5 3h-14a1.93 1.93 0 00-1.413.587A1.928 1.928 0 003.5 5v14c0 .55.196 1.021.587 1.413zM11.5 19h-6v-5h6v5zm2 0h6v-5h-6v5zm6-7V7h-6v5h6zm-8-5v5h-6V7h6z" clip-rule="evenodd"/></svg>

package/icons/common/view-table-36.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path fill-rule="evenodd" d="M7.111 6H28.89C30.607 6 32 7.343 32 9v18c0 1.657-1.393 3-3.111 3H7.11C5.393 30 4 28.657 4 27V9c0-1.657 1.393-3 3.111-3zm0 6v6h9.333v-6H7.111zm12.445 0v6h9.333v-6h-9.333zM7.11 21v6h9.333v-6H7.111zm12.445 0v6h9.333v-6h-9.333z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path fill-rule="evenodd" d="M5.38 30.62c.588.586 1.295.88 2.12.88h21c.825 0 1.532-.294 2.12-.88.586-.588.88-1.295.88-2.12v-21c0-.825-.294-1.532-.88-2.12a2.893 2.893 0 00-2.12-.88h-21c-.825 0-1.532.293-2.12.88A2.893 2.893 0 004.5 7.5v21c0 .825.293 1.532.88 2.12zM16.5 28.5h-9V21h9v7.5zm3 0h9V21h-9v7.5zm9-10.5v-7.5h-9V18h9zm-12-7.5V18h-9v-7.5h9z" clip-rule="evenodd"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/assets",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "description": "EPAM Assets Library",
   "author": "EPAM",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "type": "git",
     "url": "https://github.com/epam/UUI"
   },
-  "gitHead": "43e10381210cb69a06c9210d83926bbae5094969",
+  "gitHead": "5010207dfbd234fcb5b6cf6f2ddccc13471f1861",
   "publishConfig": {
     "directory": "build"
   }

package/theme/theme_electric.scss

@@ -518,6 +518,75 @@
         }
     }
 
+    /* MainMenu */
+
+    .uui-main_menu {
+        --uui-main_menu-bg: var(--uui-neutral-95);
+        --uui-main_menu-hover: var(--uui-neutral-90);
+        --uui-main_menu-border-active-gradient: var(--gradient-1);
+    }
+
+    .uui-main_menu-dropdown {
+        --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-95);
+    }
+
+    /* BurgerMenu */
+
+    .uui-burger {
+        --uui-burger_menu-bg: var(--uui-neutral-95);
+        --uui-burger_menu-bg-hover: var(--uui-neutral-95);
+        --uui-burger_menu-item: var(--uui-neutral-95);
+    }
+
+    /* Tag */
+
+    .uui-tag {
+        &.uui-color-warning, &.uui-color-sun {
+            --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-color-neutral {
+            --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-color-warning, &.uui-color-sun {
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-0);
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                }
+            }
+
+            &.uui-color-neutral {
+                --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-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
+            }
+        }
+    }
+
     /* Typography */
 
     .uui-typography {

package/theme/theme_loveship.scss

@@ -688,6 +688,116 @@
         --uui-panel-bg: var(--night50);
     }
 
+    /* Tag */
+
+    .uui-tag {
+        &.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-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-color-night100 {
+            --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-outline {
+                --uui-tag-bg: var(--uui-neutral-5);
+                --uui-tag-bg-hover: var(--uui-neutral-10);
+                --uui-tag-border: var(--uui-neutral-30);
+            }
+        }
+
+        &.uui-color-night700 {
+            --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-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-count_indicator {
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                    --uui-count_indicator-caption: var(--uui-neutral-70);
+                }
+            }
+        }
+
+        &.uui-color-warning, &.uui-color-sun {
+            --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-night300 {
+            --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-40);
+                --uui-tag-border-hover: var(--uui-neutral-40);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
+            }
+        }
+    }
+
     /* fonts */
 
     .uui-font-sans {

package/theme/theme_loveship_dark.scss

@@ -762,8 +762,140 @@
 
     /* Tag */
 
-    .uui-tag.uui-color-neutral {
-        --uui-tag-bg: var(--uui-neutral-40);
+    .uui-tag {
+        .uui-count_indicator {
+            --uui-count_indicator-bg: color-mix(in srgb, var(--white) 10%, transparent);
+            --uui-count_indicator-border: color-mix(in srgb, var(--white) 50%, transparent);
+        }
+
+        &.uui-color-warning, &.uui-color-amber {
+            --uui-tag-caption: var(--uui-neutral-70);
+            --uui-tag-fill: var(--uui-neutral-70);
+
+            .uui-count_indicator {
+                --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-5) 5%, transparent);
+                --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-70) 30%, transparent);
+            }
+        }
+
+        &.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);
+            --uui-tag-border-hover: var(--uui-neutral-30);
+            --uui-tag-caption: var(--uui-neutral-5);
+            --uui-tag-fill: var(--uui-neutral-10);
+
+            .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-60);
+                --uui-tag-bg-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-bg: var(--uui-neutral-40);
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                }
+            }
+        }
+
+        &.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);
+
+            .uui-count_indicator {
+                --uui-count_indicator-bg: var(--uui-neutral-70);
+                --uui-count_indicator-border: var(--uui-neutral-40);
+                --uui-count_indicator-caption: var(--uui-neutral-10);
+            }
+        }
     }
 
     .uui-presets-panel-input .uui-icon-cancel {
@@ -782,7 +914,7 @@
     }
 
     .uui-text-placeholder {
-        --uui-text_placeholder-gradient: linear-gradient(90deg, var(--uui-neutral-30) 0%, var(--uui-neutral-50) 50%, var(--uui-neutral-30) 100%);
+        --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px);
     }
 
     /* fonts */

package/theme/theme_promo.scss

@@ -659,8 +659,117 @@
         --uui-panel-bg: var(--gray90);
     }
 
+    /* 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-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-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-outline {
+                --uui-tag-bg: var(--uui-neutral-5);
+                --uui-tag-bg-hover: var(--uui-neutral-10);
+                --uui-tag-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-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-count_indicator {
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                    --uui-count_indicator-caption: var(--uui-neutral-70);
+                }
+            }
+        }
+
+        &.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-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-40);
+                --uui-tag-border-hover: var(--uui-neutral-40);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
+            }
+        }
     }
 
     .uui-dropdown-body {

package/theme/theme_vanilla_thunder.scss

@@ -25,7 +25,7 @@
     --sun-250: #F67E00;
     --sun-300: #F2682A;
 
-    --chromatic-0: #FFF;
+    --chromatic-0: #FFFFFF;
     --chromatic-100: #F7F7FD;
     --chromatic-150: #E5E5EE;
     --chromatic-200: #CDCDD9;
@@ -42,7 +42,7 @@
     --fire-60: #CC2929;
     --fire-70: #B32424;
 
-    --white: #FFF;
+    --white: #FFFFFF;
 
     --night50: #FAFAFC;
     --night100: #F5F6FA;
@@ -266,6 +266,7 @@
         --uui-color-contrast: var(--uui-warning-contrast);
     }
 
+    .uui-color-neutral,
     .uui-color-secondary {
         --uui-color-5: var(--uui-secondary-5);
         --uui-color-10: var(--uui-secondary-10);
@@ -277,7 +278,6 @@
     }
 
 
-
     .uui-button {
         --uui-border-radius: 8px;
         --uui-btn-font: var(--font-museo-sans);
@@ -319,8 +319,66 @@
         --uui-filters_toggler-font-weight: 400;
     }
 
+    /* MainMenu */
+
+    .uui-main_menu {
+        --uui-main_menu-text: var(--uui-text-brand);
+        --uui-main_menu-text-active: var(--uui-info-50);
+        --uui-main_menu-bg: var(--uui-info-5);
+        --uui-main_menu-hover: var(--uui-neutral-0);
+        --uui-main_menu-active: var(--uui-neutral-0);
+        --uui-main_menu-border-active: var(--uui-neutral-0);
+
+        --uui-main_menu-search-bg: var(--uui-neutral-5);
+        --uui-main_menu-search-border: var(--uui-neutral-40);
+        --uui-main_menu-search-placeholder: var(--uui-text-tertiary);
+        --uui-main_menu-search-text: var(--uui-text-primary);
+        --uui-main_menu-search-icon: var(--uui-neutral-70);
+
+        --uui-main_menu-icon: var(--uui-text-brand);
+        --uui-main_menu-icon-hover: var(--uui-text-brand);
+        --uui-main_menu-icon-active: var(--uui-text-brand);
+    }
+
     .uui-main_menu-dropdown {
+        --uui-main_menu-text: var(--uui-text-brand);
+        --uui-main_menu-text-active: var(--uui-text-brand);
+        --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);
+    }
+
+    /* BurgerMenu */
+
+    .uui-burger {
+        --uui-burger_menu-bg: var(--uui-info-5);
+        --uui-burger_menu-bg-hover: var(--uui-neutral-0);
+        --uui-burger_menu-caption: var(--uui-text-brand);
+        --uui-burger_menu-icon: var(--uui-text-brand);
+        --uui-burger_menu-item: var(--uui-info-5);
+    }
+
+    /* BurgerButton */
+    .uui-main_menu-burger-button {
+        --uui-burger_btn_caption: var(--uui-text-brand);
+        --uui-burger_btn_caption-hover: var(--uui-primary-50);
+        --uui-burger_btn_caption-active: var(--uui-primary-50);
+        --uui-burger_btn-border: var(--uui-neutral-40);
+    }
+
+    /* BurgerSearch */
+
+    .uui-main_menu-burger-search {
+        --uui-burger_search: var(--uui-text-brand);
+        --uui-burger_search-fill: var(--uui-neutral-70);
+        --uui-burger_search-bg: var(--uui-neutral-40);
+        --uui-burger_search-placeholder: var(--uui-text-tertiary);
+    }
+
+    .uui-main_menu-dropdown {
+        --uui-main_menu-text: var(--uui-text-brand);
+        --uui-main_menu-text-active: var(--uui-text-brand);
+
         --uui-main_menu-dropdown-bg: var(--chromatic-0);
+        --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);
         --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
         --uui-main_menu-dropdown-border-radius: 8px;
     }
@@ -331,7 +389,53 @@
     }
 
     .uui-text-placeholder {
-        --uui-text_placeholder-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
+        --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);
+    }
+
+    /* Tag */
+
+    .uui-tag {
+        &.uui-color-warning, &.uui-color-sun {
+            --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-night300 {
+            --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-40);
+                --uui-tag-border-hover: var(--uui-neutral-40);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
+            }
+        }
     }
 
     .uui-button {

package/icon-sources/12/action-delete light.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 1.5V2H2V3H2.5V9.5C2.5 9.76522 2.60536 10.0196 2.79289 10.2071C2.98043 10.3946 3.23478 10.5 3.5 10.5H8.5C8.76522 10.5 9.01957 10.3946 9.20711 10.2071C9.39464 10.0196 9.5 9.76522 9.5 9.5V3H10V2H7.5V1.5H4.5ZM3.5 3H8.5V9.5H3.5V3ZM4.5 4V8.5H5.5V4H4.5ZM6.5 4V8.5H7.5V4H6.5Z" fill="#6C6F80"/>
-</svg>

package/icon-sources/12/action-map_pin.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11C6 11 10 7.76142 10 5C10 2.23858 8.20914 1 6 1C3.79086 1 2 2.23858 2 5C2 7.76142 6 11 6 11ZM6 7C7.10457 7 8 6.10457 8 5C8 3.89543 7.10457 3 6 3C4.89543 3 4 3.89543 4 5C4 6.10457 4.89543 7 6 7Z" fill="#6C6F80"/>
-</svg>