@epam/assets 5.4.1 → 5.4.3

package/css/theme/theme_electric.css

@@ -334,6 +334,24 @@
   --uui-color-70:var(--night200);
   --uui-color-contrast:var(--night800);
 }
+.uui-theme-electric .uui-color-night100{
+  --uui-color-5:var(--white);
+  --uui-color-10:var(--white);
+  --uui-color-20:var(--night50);
+  --uui-color-50:var(--night100);
+  --uui-color-60:var(--night200);
+  --uui-color-70:var(--night300);
+  --uui-color-contrast:var(--uui-neutral-80);
+}
+.uui-theme-electric .uui-color-night300{
+  --uui-color-5:var(--night50);
+  --uui-color-10:var(--night100);
+  --uui-color-20:var(--night200);
+  --uui-color-50:var(--night300);
+  --uui-color-60:var(--night400);
+  --uui-color-70:var(--night500);
+  --uui-color-contrast:var(--uui-neutral-80);
+}
 .uui-theme-electric .uui-color-neutral,
 .uui-theme-electric .uui-color-secondary{
   --uui-color-5:var(--uui-secondary-5);
@@ -344,6 +362,15 @@
   --uui-color-70:var(--uui-secondary-70);
   --uui-color-contrast:var(--white);
 }
+.uui-theme-electric .uui-color-night700{
+  --uui-color-5:var(--night400);
+  --uui-color-10:var(--night500);
+  --uui-color-20:var(--night600);
+  --uui-color-50:var(--night700);
+  --uui-color-60:var(--night800);
+  --uui-color-70:var(--night900);
+  --uui-color-contrast:var(--white);
+}
 .uui-theme-electric .uui-color-sun,
 .uui-theme-electric .uui-color-warning{
   --uui-color-5:var(--sun-5);
@@ -441,8 +468,8 @@
 }
 .uui-theme-electric .uui-badge.uui-color-neutral{
   --uui-badge-bg:var(--uui-neutral-30);
-  --uui-badge-border:var(--uui-neutral-30);
   --uui-badge-bg-hover:var(--uui-neutral-40);
+  --uui-badge-border:var(--uui-neutral-30);
   --uui-badge-border-hover:var(--uui-neutral-40);
   --uui-color-contrast:var(--uui-neutral-80);
 }
@@ -453,6 +480,22 @@
   --uui-badge-caption:var(--uui-neutral-80);
   --uui-badge-caption-hover:var(--uui-neutral-80);
 }
+.uui-theme-electric .uui-badge.uui-color-night100{
+  --uui-badge-bg-hover:var(--uui-neutral-20);
+  --uui-badge-border-hover:var(--uui-neutral-20);
+}
+.uui-theme-electric .uui-badge.uui-color-night100.uui-fill-outline{
+  --uui-badge-border:var(--uui-neutral-30);
+  --uui-badge-border-hover:var(--uui-neutral-30);
+  --uui-badge-caption:var(--uui-neutral-80);
+  --uui-badge-caption-hover:var(--uui-neutral-80);
+}
+.uui-theme-electric .uui-badge.uui-color-night600.uui-fill-outline{
+  --uui-badge-border:var(--night600);
+  --uui-badge-border-hover:var(--night600);
+  --uui-badge-caption:var(--night800);
+  --uui-badge-caption-hover:var(--night800);
+}
 .uui-theme-electric .uui-badge.uui-color-yellow.uui-fill-outline{
   --uui-badge-border:var(--yellow-20);
 }
@@ -503,37 +546,92 @@
   --uui-burger_menu-bg-hover:var(--uui-neutral-95);
   --uui-burger_menu-item:var(--uui-neutral-95);
 }
-.uui-theme-electric .uui-tag.uui-color-warning, .uui-theme-electric .uui-tag.uui-color-sun{
+.uui-theme-electric .uui-tag.uui-fill-outline{
+  --uui-tag-fill:var(--uui-neutral-95);
+}
+.uui-theme-electric .uui-tag.uui-color-white.uui-fill-solid{
+  --uui-tag-fill:var(--uui-neutral-95);
+}
+.uui-theme-electric .uui-tag.uui-color-white.uui-fill-solid .uui-count_indicator{
+  --uui-count_indicator-bg:var(--uui-neutral-30);
+  --uui-count_indicator-border:var(--uui-neutral-30);
+}
+.uui-theme-electric .uui-tag.uui-color-white.uui-fill-outline{
+  --uui-tag-border:var(--uui-neutral-30);
+  --uui-tag-border-hover:var(--uui-neutral-30);
+  --uui-tag-bg-hover:var(--uui-neutral-10);
+  --uui-tag-caption:var(--uui-text-primary);
+}
+.uui-theme-electric .uui-tag.uui-color-white.uui-fill-outline .uui-count_indicator{
+  --uui-count_indicator-bg:var(--uui-neutral-30);
+  --uui-count_indicator-border:var(--uui-neutral-30);
+}
+.uui-theme-electric .uui-tag.uui-color-night100.uui-fill-solid{
+  --uui-tag-fill:var(--uui-neutral-95);
+}
+.uui-theme-electric .uui-tag.uui-color-night100.uui-fill-solid .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-theme-electric .uui-tag.uui-color-night100.uui-fill-outline{
+  --uui-tag-bg:var(--uui-neutral-5);
   --uui-tag-caption:var(--uui-text-primary);
-  --uui-tag-fill:var(--uui-neutral-90);
+  --uui-tag-bg-hover:var(--uui-neutral-10);
+  --uui-tag-border:var(--uui-neutral-30);
+  --uui-tag-border-hover:var(--uui-neutral-30);
 }
-.uui-theme-electric .uui-tag.uui-color-warning .uui-count_indicator, .uui-theme-electric .uui-tag.uui-color-sun .uui-count_indicator{
+.uui-theme-electric .uui-tag.uui-color-night100.uui-fill-outline .uui-count_indicator{
+  --uui-count_indicator-bg:var(--uui-neutral-30);
+  --uui-count_indicator-border:var(--uui-neutral-30);
+}
+.uui-theme-electric .uui-tag.uui-color-night700.uui-fill-solid .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-theme-electric .uui-tag.uui-color-night700.uui-fill-outline{
+  --uui-tag-caption:var(--uui-text-primary);
+  --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-theme-electric .uui-tag.uui-color-warning, .uui-theme-electric .uui-tag.uui-color-sun{
+  --uui-tag-fill:var(--uui-neutral-100);
+}
+.uui-theme-electric .uui-tag.uui-color-warning.uui-fill-solid, .uui-theme-electric .uui-tag.uui-color-sun.uui-fill-solid{
+  --uui-tag-caption:var(--uui-neutral-80);
+}
+.uui-theme-electric .uui-tag.uui-color-warning.uui-fill-solid .uui-count_indicator, .uui-theme-electric .uui-tag.uui-color-sun.uui-fill-solid .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-count_indicator-caption:var(--uui-neutral-80);
 }
-.uui-theme-electric .uui-tag.uui-color-neutral{
+.uui-theme-electric .uui-tag.uui-color-warning.uui-fill-outline, .uui-theme-electric .uui-tag.uui-color-sun.uui-fill-outline{
+  --uui-tag-caption:var(--uui-neutral-95);
+}
+.uui-theme-electric .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-electric .uui-tag.uui-color-sun.uui-fill-outline .uui-count_indicator{
+  --uui-count_indicator-bg:var(--uui-neutral-0);
+  --uui-count_indicator-border:var(--uui-neutral-40);
+}
+.uui-theme-electric .uui-tag.uui-color-neutral.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-tag-fill:var(--uui-neutral-95);
 }
-.uui-theme-electric .uui-tag.uui-color-neutral .uui-count_indicator{
+.uui-theme-electric .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator{
   --uui-count_indicator-bg:var(--uui-neutral-0);
   --uui-count_indicator-border:var(--uui-neutral-0);
+  --uui-count_indicator-caption:var(--uui-neutral-70);
 }
-.uui-theme-electric .uui-tag.uui-fill-outline.uui-color-warning .uui-count_indicator, .uui-theme-electric .uui-tag.uui-fill-outline.uui-color-sun .uui-count_indicator{
-  --uui-count_indicator-bg:var(--uui-neutral-0);
-  --uui-count_indicator-border:var(--uui-neutral-40);
-}
-.uui-theme-electric .uui-tag.uui-fill-outline.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-theme-electric .uui-tag.uui-color-neutral.uui-fill-outline{
+  --uui-tag-fill:var(--uui-neutral-95);
+  --uui-tag-caption:var(--uui-text-primary);
 }
-.uui-theme-electric .uui-tag.uui-fill-outline.uui-color-neutral .uui-count_indicator{
+.uui-theme-electric .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator{
   --uui-count_indicator-bg:var(--uui-neutral-30);
   --uui-count_indicator-border:var(--uui-neutral-30);
 }