@epam/assets 5.4.1 → 5.4.3

package/theme/theme_electric.scss

@@ -320,6 +320,26 @@
         --uui-color-contrast: var(--night800);
     }
 
+    .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-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-color-neutral,
     .uui-color-secondary {
         --uui-color-5: var(--uui-secondary-5);
@@ -331,6 +351,16 @@
         --uui-color-contrast: var(--white);
     }
 
+    .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-color-sun,
     .uui-color-warning {
         --uui-color-5: var(--sun-5);
@@ -446,8 +476,8 @@
 
     .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);
 
@@ -460,6 +490,25 @@
         }
     }
 
+    .uui-badge.uui-color-night100 {
+        --uui-badge-bg-hover: var(--uui-neutral-20);
+        --uui-badge-border-hover: var(--uui-neutral-20);
+
+        &.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-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-badge.uui-color-yellow.uui-fill-outline {
         --uui-badge-border: var(--yellow-20);
     }
@@ -541,43 +590,117 @@
     /* Tag */
 
     .uui-tag {
-        &.uui-color-warning, &.uui-color-sun {
-            --uui-tag-caption: var(--uui-text-primary);
-            --uui-tag-fill: var(--uui-neutral-90);
+        &.uui-fill-outline {
+            --uui-tag-fill: var(--uui-neutral-95);
+        }
 
-            .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-white {
+            &.uui-fill-solid {
+                --uui-tag-fill: var(--uui-neutral-95);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
+            }
+
+            &.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-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-30);
+                    --uui-count_indicator-border: var(--uui-neutral-30);
+                }
             }
         }
 
-        &.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-color-night100 {
+            &.uui-fill-solid {
+                --uui-tag-fill: var(--uui-neutral-95);
+
+                .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-caption: var(--uui-text-primary);
+                --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-fill-outline {
-            &.uui-color-warning, &.uui-color-sun {
+        &.uui-color-night700 {
+            &.uui-fill-solid {
                 .uui-count_indicator {
-                    --uui-count_indicator-bg: var(--uui-neutral-0);
-                    --uui-count_indicator-border: var(--uui-neutral-40);
+                    --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-color-neutral {
+            &.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-40);
+                --uui-tag-border: var(--uui-neutral-50);
+                --uui-tag-border-hover: var(--uui-neutral-50);
+            }
+        }
+
+        &.uui-color-warning, &.uui-color-sun {
+            --uui-tag-fill: var(--uui-neutral-100);
+
+            &.uui-fill-solid {
+                --uui-tag-caption: var(--uui-neutral-80);
+
+                .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-fill-outline {
+                --uui-tag-caption: var(--uui-neutral-95);
+
+                .uui-count_indicator {
+                    --uui-count_indicator-bg: var(--uui-neutral-0);
+                    --uui-count_indicator-border: var(--uui-neutral-40);
+                }
+            }
+        }
+
+        &.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-95);
+
+                .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-fill-outline {
+                --uui-tag-fill: var(--uui-neutral-95);
+                --uui-tag-caption: var(--uui-text-primary);
 
                 .uui-count_indicator {
                     --uui-count_indicator-bg: var(--uui-neutral-30);

package/theme/theme_loveship.scss

@@ -594,8 +594,31 @@
 
     /* Button */
 
-    .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
-        --uui-btn-caption: var(--uui-neutral-70);
+    .uui-button {
+        &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
+            --uui-btn-caption: var(--uui-neutral-70);
+        }
+
+        &.uui-color-white {
+            &.uui-fill-none, &.uui-fill-ghost {
+                --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
+                --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
+            }
+
+            &.uui-fill-ghost {
+                --uui-btn-border: var(--uui-btn-bg);
+                --uui-btn-border-hover: var(--uui-btn-bg);
+                --uui-btn-border-active: var(--uui-btn-bg);
+            }
+
+            &.uui-fill-outline, &.uui-fill-solid {
+                --uui-btn-caption: var(--uui-neutral-70);
+                --uui-btn-bg-hover: var(--uui-neutral-20);
+                --uui-btn-border-hover: var(--uui-neutral-20);
+                --uui-btn-bg-active: var(--uui-neutral-30);
+                --uui-btn-border-active: var(--uui-neutral-30);
+            }
+        }
     }
 
     /* IconButton */
@@ -676,10 +699,6 @@
         --uui-flex-row-bg: var(--night100);
     }
 
-    .uui-panel {
-        --uui-panel-bg: transparent;
-    }
-
     .uui-panel.uui-color-white {
         --uui-panel-bg: var(--white);
     }
@@ -692,109 +711,125 @@
 
     .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-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-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-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-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-color-neutral,
+        &.uui-color-night300 {
+            &.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-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
+                .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-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-color-night700 {
+            &.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-sun {
+            &.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);
+            }
         }
     }