@epam/assets 5.8.1 → 5.8.3

package/css/theme/theme_promo.css

@@ -102,6 +102,11 @@
   font-style:italic;
 }
 .uui-theme-promo{
+  --uui-focus-outline-width:2px;
+  --uui-focus-outline-offset:2px;
+  --uui-focus-radius:2px;
+  --uui-tab-line-width:3px;
+  --uui-notify-size:6px;
   --amber-5:#FFFCF5;
   --amber-10:#FFF2CC;
   --amber-20:#FFE38F;
@@ -192,48 +197,56 @@
   --uui-accent-50:var(--green-50);
   --uui-accent-60:var(--green-60);
   --uui-accent-70:var(--green-70);
+  --uui-accent-contrast:var(--white);
   --uui-critical-5:var(--red-5);
   --uui-critical-10:var(--red-10);
   --uui-critical-20:var(--red-20);
   --uui-critical-50:var(--red-50);
   --uui-critical-60:var(--red-60);
   --uui-critical-70:var(--red-70);
+  --uui-critical-contrast:var(--white);
   --uui-error-5:var(--red-5);
   --uui-error-10:var(--red-10);
   --uui-error-20:var(--red-20);
   --uui-error-50:var(--red-50);
   --uui-error-60:var(--red-60);
   --uui-error-70:var(--red-70);
+  --uui-error-contrast:var(--white);
   --uui-info-5:var(--blue-5);
   --uui-info-10:var(--blue-10);
   --uui-info-20:var(--blue-20);
   --uui-info-50:var(--blue-50);
   --uui-info-60:var(--blue-60);
   --uui-info-70:var(--blue-70);
+  --uui-info-contrast:var(--white);
   --uui-primary-5:var(--blue-5);
   --uui-primary-10:var(--blue-10);
   --uui-primary-20:var(--blue-20);
   --uui-primary-50:var(--blue-50);
   --uui-primary-60:var(--blue-60);
   --uui-primary-70:var(--blue-70);
+  --uui-primary-contrast:var(--white);
   --uui-secondary-5:var(--gray10);
   --uui-secondary-10:var(--gray20);
   --uui-secondary-20:var(--gray30);
   --uui-secondary-50:var(--gray60);
   --uui-secondary-60:var(--gray70);
   --uui-secondary-70:var(--gray80);
+  --uui-secondary-contrast:var(--white);
   --uui-success-5:var(--green-5);
   --uui-success-10:var(--green-10);
   --uui-success-20:var(--green-20);
   --uui-success-50:var(--green-50);
   --uui-success-60:var(--green-60);
   --uui-success-70:var(--green-70);
+  --uui-success-contrast:var(--white);
   --uui-warning-5:var(--amber-5);
   --uui-warning-10:var(--amber-10);
   --uui-warning-20:var(--amber-20);
   --uui-warning-50:var(--amber-50);
   --uui-warning-60:var(--amber-60);
   --uui-warning-70:var(--amber-70);
+  --uui-warning-contrast:var(--gray80);
   --uui-neutral-0:var(--white);
   --uui-neutral-5:var(--gray5);
   --uui-neutral-10:var(--gray10);
@@ -291,31 +304,169 @@
   --uui-font-mono:"Roboto Mono", monospace;
   --font-museo-sans:"Museo Sans", "Source Sans Pro", Arial, sans-serif;
   --font-museo-slab:"Museo Slab", "Roboto Slab", Arial, sans-serif;
-  --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(--gray80);
-  --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:0;
 }
-.uui-theme-promo .uui-color-accent,
-.uui-theme-promo .uui-color-green{
-  --uui-color-5:var(--uui-accent-5);
-  --uui-color-10:var(--uui-accent-10);
-  --uui-color-20:var(--uui-accent-20);
-  --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(--uui-accent-contrast);
-}
-.uui-theme-promo .uui-color-primary,
-.uui-theme-promo .uui-color-blue{
+.uui-theme-promo .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-promo .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-promo .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-promo .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-promo .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-promo .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-promo .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-promo .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-promo .uui-input-box.uui-size-42{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-promo .uui-input-box.uui-size-48{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-promo .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-promo .uui-tag.uui-size-18{
+  --uui-font-size:12px;
+  --uui-line-height:14px;
+}
+.uui-theme-promo .uui-tag.uui-size-24{
+  --uui-icon-size:18px;
+}
+.uui-theme-promo .uui-tag.uui-size-42{
+  --uui-icon-size:24px;
+}
+.uui-theme-promo .uui-tag.uui-size-42, .uui-theme-promo .uui-tag.uui-size-48{
+  --uui-tag-count_indicator-margin-end:3px;
+}
+.uui-theme-promo .uui-tag.uui-size-18, .uui-theme-promo .uui-tag.uui-size-24, .uui-theme-promo .uui-tag.uui-size-30, .uui-theme-promo .uui-tag.uui-size-36{
+  --uui-horizontal-gap:3px;
+}
+.uui-theme-promo .uui-tag.uui-size-18, .uui-theme-promo .uui-tag.uui-size-24, .uui-theme-promo .uui-tag.uui-size-30{
+  --uui-horizontal-padding:3px;
+}
+.uui-theme-promo .uui-tag.uui-size-42, .uui-theme-promo .uui-tag.uui-size-48{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-promo .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-promo .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) .uui-tag.uui-size-inherit{
+  --uui-horizontal-padding:3px;
+}
+.uui-theme-promo .uui-size-48.uui-picker_toggler .uui-tag.uui-size-inherit{
+  --uui-horizontal-padding:6px;
+}
+.uui-theme-promo .uui-checkbox-container.uui-size-18, .uui-theme-promo .uui-radio-input-container.uui-size-18{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-promo .uui-switch.uui-size-18{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:18px;
+  --uui-font-size:14px;
+}
+.uui-theme-promo .uui-switch.uui-size-24{
+  --uui-horizontal-gap:12px;
+  --uui-line-height:24px;
+  --uui-font-size:16px;
+}
+.uui-theme-promo .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-promo .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-promo .uui-color-primary{
   --uui-color-5:var(--uui-primary-5);
   --uui-color-10:var(--uui-primary-10);
   --uui-color-20:var(--uui-primary-20);
@@ -324,9 +475,7 @@
   --uui-color-70:var(--uui-primary-70);
   --uui-color-contrast:var(--uui-primary-contrast);
 }
-.uui-theme-promo .uui-color-secondary,
-.uui-theme-promo .uui-color-neutral,
-.uui-theme-promo .uui-color-gray{
+.uui-theme-promo .uui-color-secondary{
   --uui-color-5:var(--uui-secondary-5);
   --uui-color-10:var(--uui-secondary-10);
   --uui-color-20:var(--uui-secondary-20);
@@ -335,15 +484,14 @@
   --uui-color-70:var(--uui-secondary-70);
   --uui-color-contrast:var(--uui-secondary-contrast);
 }
-.uui-theme-promo .uui-color-critical,
-.uui-theme-promo .uui-color-red{
-  --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(--uui-critical-contrast);
+.uui-theme-promo .uui-color-accent{
+  --uui-color-5:var(--uui-accent-5);
+  --uui-color-10:var(--uui-accent-10);
+  --uui-color-20:var(--uui-accent-20);
+  --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(--uui-accent-contrast);
 }
 .uui-theme-promo .uui-color-info{
   --uui-color-5:var(--uui-info-5);
@@ -363,8 +511,7 @@
   --uui-color-70:var(--uui-success-70);
   --uui-color-contrast:var(--uui-success-contrast);
 }
-.uui-theme-promo .uui-color-warning,
-.uui-theme-promo .uui-color-amber{
+.uui-theme-promo .uui-color-warning{
   --uui-color-5:var(--uui-warning-5);
   --uui-color-10:var(--uui-warning-10);
   --uui-color-20:var(--uui-warning-20);
@@ -382,6 +529,15 @@
   --uui-color-70:var(--uui-error-70);
   --uui-color-contrast:var(--uui-error-contrast);
 }
+.uui-theme-promo .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(--uui-critical-contrast);
+}
 .uui-theme-promo .uui-color-white{
   --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
   --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
@@ -391,6 +547,60 @@
   --uui-color-70:var(--uui-neutral-20);
   --uui-color-contrast:var(--uui-neutral-70);
 }
+.uui-theme-promo .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-promo .uui-color-green{
+  --uui-color-5:var(--uui-accent-5);
+  --uui-color-10:var(--uui-accent-10);
+  --uui-color-20:var(--uui-accent-20);
+  --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(--uui-accent-contrast);
+}
+.uui-theme-promo .uui-color-blue{
+  --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(--uui-primary-contrast);
+}
+.uui-theme-promo .uui-color-gray{
+  --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-promo .uui-color-red{
+  --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(--uui-critical-contrast);
+}
+.uui-theme-promo .uui-color-amber{
+  --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-promo .uui-link_button.uui-color-contrast,
 .uui-theme-promo .uui-color-gray10{
   --uui-color-5:var(--white);