@epam/assets 5.8.1 → 5.8.3

package/css/theme/theme_electric.css

@@ -84,6 +84,11 @@
   src:url("https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf") format("truetype");
 }
 .uui-theme-electric{
+  --uui-focus-outline-width:2px;
+  --uui-focus-outline-offset:2px;
+  --uui-focus-radius:2px;
+  --uui-tab-line-width:3px;
+  --uui-notify-size:6px;
   --black:#000000;
   --white:#FFFFFF;
   --cobalt-5:#F8FAFF;
@@ -175,48 +180,56 @@
   --uui-accent-50:var(--emerald-50);
   --uui-accent-60:var(--emerald-60);
   --uui-accent-70:var(--emerald-70);
+  --uui-accent-contrast:var(--white);
   --uui-critical-5:var(--fire-5);
   --uui-critical-10:var(--fire-10);
   --uui-critical-20:var(--fire-20);
   --uui-critical-50:var(--fire-50);
   --uui-critical-60:var(--fire-60);
   --uui-critical-70:var(--fire-70);
+  --uui-critical-contrast:var(--white);
   --uui-error-5:var(--fire-5);
   --uui-error-10:var(--fire-10);
   --uui-error-20:var(--fire-20);
   --uui-error-50:var(--fire-50);
   --uui-error-60:var(--fire-60);
   --uui-error-70:var(--fire-70);
+  --uui-error-contrast:var(--white);
   --uui-info-5:var(--electric-5);
   --uui-info-10:var(--electric-10);
   --uui-info-20:var(--electric-20);
   --uui-info-50:var(--electric-50);
   --uui-info-60:var(--electric-60);
   --uui-info-70:var(--electric-70);
+  --uui-info-contrast:var(--white);
   --uui-primary-5:var(--electric-5);
   --uui-primary-10:var(--electric-10);
   --uui-primary-20:var(--electric-20);
   --uui-primary-50:var(--electric-50);
   --uui-primary-60:var(--electric-60);
   --uui-primary-70:var(--electric-70);
+  --uui-primary-contrast:var(--white);
   --uui-secondary-5:var(--night100);
   --uui-secondary-10:var(--night200);
   --uui-secondary-20:var(--night300);
   --uui-secondary-50:var(--night600);
   --uui-secondary-60:var(--night700);
   --uui-secondary-70:var(--night800);
+  --uui-secondary-contrast:var(--white);
   --uui-success-5:var(--emerald-5);
   --uui-success-10:var(--emerald-10);
   --uui-success-20:var(--emerald-20);
   --uui-success-50:var(--emerald-50);
   --uui-success-60:var(--emerald-60);
   --uui-success-70:var(--emerald-70);
+  --uui-success-contrast:var(--white);
   --uui-warning-5:var(--sun-5);
   --uui-warning-10:var(--sun-10);
   --uui-warning-20:var(--sun-20);
   --uui-warning-50:var(--sun-50);
   --uui-warning-60:var(--sun-60);
   --uui-warning-70:var(--sun-70);
+  --uui-warning-contrast:var(--uui-neutral-80);
   --uui-neutral-0:var(--white);
   --uui-neutral-5:var(--night50);
   --uui-neutral-10:var(--night100);
@@ -279,28 +292,185 @@
   --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
   --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
   --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
-  --uui-primary-contrast:var(--white);
-  --uui-accent-contrast:var(--white);
-  --uui-secondary-contrast:var(--white);
-  --uui-critical-contrast:var(--white);
-  --uui-info-contrast:var(--white);
-  --uui-success-contrast:var(--white);
-  --uui-warning-contrast:var(--uui-neutral-80);
-  --uui-error-contrast:var(--white);
   --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
   --uui-shadow-level-2:0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
   --uui-shadow-level-3:0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
   --uui-border-radius:3px;
 }
-.uui-theme-electric .uui-color-primary,
-.uui-theme-electric .uui-color-info{
+.uui-theme-electric .uui-size-12{
+  --uui-size:12px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:6px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:12px;
+  --uui-line-height:12px;
+  --uui-font-size:12px;
+}
+.uui-theme-electric .uui-size-18{
+  --uui-size:18px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:3px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:3px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:12px;
+  --uui-line-height:12px;
+  --uui-font-size:10px;
+}
+.uui-theme-electric .uui-size-24{
+  --uui-size:24px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:6px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:12px;
+  --uui-line-height:18px;
+  --uui-font-size:12px;
+}
+.uui-theme-electric .uui-size-30{
+  --uui-size:30px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:6px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:18px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-electric .uui-size-36{
+  --uui-size:36px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:6px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:18px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-electric .uui-size-42{
+  --uui-size:42px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:12px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:18px;
+  --uui-line-height:24px;
+  --uui-font-size:16px;
+}
+.uui-theme-electric .uui-size-48{
+  --uui-size:48px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:12px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:24px;
+  --uui-line-height:24px;
+  --uui-font-size:16px;
+}
+.uui-theme-electric .uui-size-60{
+  --uui-size:60px;
+  --uui-border-width:1px;
+  --uui-horizontal-gap:6px;
+  --uui-vertical-gap:3px;
+  --uui-horizontal-padding:12px;
+  --uui-vertical-padding:3px;
+  --uui-icon-size:24px;
+  --uui-line-height:24px;
+  --uui-font-size:20px;
+}
+.uui-theme-electric .uui-input-box.uui-size-42{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-electric .uui-input-box.uui-size-48{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-electric .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
+  --uui-horizontal-padding:12px;
+  --uui-horizontal-gap:6px;
+  --uui-icon-size:18px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-electric .uui-tag.uui-size-18{
+  --uui-font-size:12px;
+  --uui-line-height:14px;
+}
+.uui-theme-electric .uui-tag.uui-size-24{
+  --uui-icon-size:18px;
+}
+.uui-theme-electric .uui-tag.uui-size-42{
+  --uui-icon-size:24px;
+}
+.uui-theme-electric .uui-tag.uui-size-42, .uui-theme-electric .uui-tag.uui-size-48{
+  --uui-tag-count_indicator-margin-end:3px;
+}
+.uui-theme-electric .uui-tag.uui-size-18, .uui-theme-electric .uui-tag.uui-size-24, .uui-theme-electric .uui-tag.uui-size-30, .uui-theme-electric .uui-tag.uui-size-36{
+  --uui-horizontal-gap:3px;
+}
+.uui-theme-electric .uui-tag.uui-size-18, .uui-theme-electric .uui-tag.uui-size-24, .uui-theme-electric .uui-tag.uui-size-30{
+  --uui-horizontal-padding:3px;
+}
+.uui-theme-electric .uui-tag.uui-size-42, .uui-theme-electric .uui-tag.uui-size-48{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-electric .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) .uui-tag.uui-size-inherit{
+  --uui-horizontal-gap:3px;
+}
+.uui-theme-electric .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) .uui-tag.uui-size-inherit{
+  --uui-horizontal-padding:3px;
+}
+.uui-theme-electric .uui-size-48.uui-picker_toggler .uui-tag.uui-size-inherit{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-electric .uui-checkbox-container.uui-size-18, .uui-theme-electric .uui-radio-input-container.uui-size-18{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-electric .uui-switch.uui-size-18{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-electric .uui-switch.uui-size-24{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:24px;
+  --uui-font-size:16px;
+}
+.uui-theme-electric .uui-picker-body:is(.uui-size-30, .uui-size-36) .uui-switch.uui-size-inherit{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-electric .uui-picker-body:is(.uui-size-42, .uui-size-48) .uui-switch.uui-size-inherit{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:24px;
+  --uui-font-size:16px;
+}
+.uui-theme-electric .uui-color-primary{
   --uui-color-5:var(--uui-primary-5);
   --uui-color-10:var(--uui-primary-10);
   --uui-color-20:var(--uui-primary-20);
   --uui-color-50:var(--uui-primary-50);
   --uui-color-60:var(--uui-primary-60);
   --uui-color-70:var(--uui-primary-70);
-  --uui-color-contrast:var(--white);
+  --uui-color-contrast:var(--uui-primary-contrast);
+}
+.uui-theme-electric .uui-color-secondary{
+  --uui-color-5:var(--uui-secondary-5);
+  --uui-color-10:var(--uui-secondary-10);
+  --uui-color-20:var(--uui-secondary-20);
+  --uui-color-50:var(--uui-secondary-50);
+  --uui-color-60:var(--uui-secondary-60);
+  --uui-color-70:var(--uui-secondary-70);
+  --uui-color-contrast:var(--uui-secondary-contrast);
 }
 .uui-theme-electric .uui-color-accent{
   --uui-color-5:var(--uui-accent-5);
@@ -309,18 +479,52 @@
   --uui-color-50:var(--uui-accent-50);
   --uui-color-60:var(--uui-accent-60);
   --uui-color-70:var(--uui-accent-70);
-  --uui-color-contrast:var(--white);
+  --uui-color-contrast:var(--uui-accent-contrast);
+}
+.uui-theme-electric .uui-color-info{
+  --uui-color-5:var(--uui-info-5);
+  --uui-color-10:var(--uui-info-10);
+  --uui-color-20:var(--uui-info-20);
+  --uui-color-50:var(--uui-info-50);
+  --uui-color-60:var(--uui-info-60);
+  --uui-color-70:var(--uui-info-70);
+  --uui-color-contrast:var(--uui-info-contrast);
+}
+.uui-theme-electric .uui-color-success{
+  --uui-color-5:var(--uui-success-5);
+  --uui-color-10:var(--uui-success-10);
+  --uui-color-20:var(--uui-success-20);
+  --uui-color-50:var(--uui-success-50);
+  --uui-color-60:var(--uui-success-60);
+  --uui-color-70:var(--uui-success-70);
+  --uui-color-contrast:var(--uui-success-contrast);
+}
+.uui-theme-electric .uui-color-warning{
+  --uui-color-5:var(--uui-warning-5);
+  --uui-color-10:var(--uui-warning-10);
+  --uui-color-20:var(--uui-warning-20);
+  --uui-color-50:var(--uui-warning-50);
+  --uui-color-60:var(--uui-warning-60);
+  --uui-color-70:var(--uui-warning-70);
+  --uui-color-contrast:var(--uui-warning-contrast);
 }
-.uui-theme-electric .uui-color-fire,
-.uui-theme-electric .uui-color-critical,
 .uui-theme-electric .uui-color-error{
+  --uui-color-5:var(--uui-error-5);
+  --uui-color-10:var(--uui-error-10);
+  --uui-color-20:var(--uui-error-20);
+  --uui-color-50:var(--uui-error-50);
+  --uui-color-60:var(--uui-error-60);
+  --uui-color-70:var(--uui-error-70);
+  --uui-color-contrast:var(--uui-error-contrast);
+}
+.uui-theme-electric .uui-color-critical{
   --uui-color-5:var(--uui-critical-5);
   --uui-color-10:var(--uui-critical-10);
   --uui-color-20:var(--uui-critical-20);
   --uui-color-50:var(--uui-critical-50);
   --uui-color-60:var(--uui-critical-60);
   --uui-color-70:var(--uui-critical-70);
-  --uui-color-contrast:var(--white);
+  --uui-color-contrast:var(--uui-critical-contrast);
 }
 .uui-theme-electric .uui-color-white{
   --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
@@ -331,6 +535,24 @@
   --uui-color-70:var(--uui-neutral-20);
   --uui-color-contrast:var(--uui-neutral-70);
 }
+.uui-theme-electric .uui-color-neutral{
+  --uui-color-5:var(--uui-secondary-5);
+  --uui-color-10:var(--uui-secondary-10);
+  --uui-color-20:var(--uui-secondary-20);
+  --uui-color-50:var(--uui-secondary-50);
+  --uui-color-60:var(--uui-secondary-60);
+  --uui-color-70:var(--uui-secondary-70);
+  --uui-color-contrast:var(--uui-secondary-contrast);
+}
+.uui-theme-electric .uui-color-fire{
+  --uui-color-5:var(--uui-critical-5);
+  --uui-color-10:var(--uui-critical-10);
+  --uui-color-20:var(--uui-critical-20);
+  --uui-color-50:var(--uui-critical-50);
+  --uui-color-60:var(--uui-critical-60);
+  --uui-color-70:var(--uui-critical-70);
+  --uui-color-contrast:var(--white);
+}
 .uui-theme-electric .uui-color-night100{
   --uui-color-5:var(--white);
   --uui-color-10:var(--white);
@@ -349,8 +571,6 @@
   --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-theme-electric .uui-color-night600{
   --uui-color-5:var(--uui-secondary-5);
   --uui-color-10:var(--uui-secondary-10);
@@ -369,17 +589,7 @@
   --uui-color-70:var(--night900);
   --uui-color-contrast:var(--white);
 }
-.uui-theme-electric .uui-color-success{
-  --uui-color-5:var(--uui-success-5);
-  --uui-color-10:var(--uui-success-10);
-  --uui-color-20:var(--uui-success-20);
-  --uui-color-50:var(--uui-success-50);
-  --uui-color-60:var(--uui-success-60);
-  --uui-color-70:var(--uui-success-70);
-  --uui-color-contrast:var(--white);
-}
-.uui-theme-electric .uui-color-sun,
-.uui-theme-electric .uui-color-warning{
+.uui-theme-electric .uui-color-sun{
   --uui-color-5:var(--sun-5);
   --uui-color-10:var(--sun-10);
   --uui-color-20:var(--sun-20);