@itcase/ui 1.8.158 → 1.8.160

package/dist/css/components/Breadcrumbs/Breadcrumbs.css

@@ -5,12 +5,34 @@
   align-items: center;
 }
 .breadcrumbs__item {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
-      gap: var(--breadcrumbs-item-$(size)-gap);
-      padding: var(--breadcrumbs-item-$(size)-padding);
+    &_size_xxl {
+      gap: var(--breadcrumbs-item-xxl-gap);
+      padding: var(--breadcrumbs-item-xxl-padding);
+    }
+    &_size_xl {
+      gap: var(--breadcrumbs-item-xl-gap);
+      padding: var(--breadcrumbs-item-xl-padding);
+    }
+    &_size_l {
+      gap: var(--breadcrumbs-item-l-gap);
+      padding: var(--breadcrumbs-item-l-padding);
+    }
+    &_size_m {
+      gap: var(--breadcrumbs-item-m-gap);
+      padding: var(--breadcrumbs-item-m-padding);
+    }
+    &_size_s {
+      gap: var(--breadcrumbs-item-s-gap);
+      padding: var(--breadcrumbs-item-s-padding);
+    }
+    &_size_xs {
+      gap: var(--breadcrumbs-item-xs-gap);
+      padding: var(--breadcrumbs-item-xs-padding);
+    }
+    &_size_xxs {
+      gap: var(--breadcrumbs-item-xxs-gap);
+      padding: var(--breadcrumbs-item-xxs-padding);
     }
-  }
 }
 .breadcrumbs__item {
   &&_skeleton {

package/dist/css/components/Button/Button.css

@@ -43,16 +43,62 @@
   }
 }
 .button {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
+    &_size_xxl {
       ^&__wrapper {
-        min-width: var(--button-$(size)-min-width);
-        min-height: var(--button-$(size)-min-height);
-        padding: var(--button-$(size)-padding);
-        gap: var(--button-$(size)-gap);
+        min-width: var(--button-xxl-min-width);
+        min-height: var(--button-xxl-min-height);
+        padding: var(--button-xxl-padding);
+        gap: var(--button-xxl-gap);
+      }
+    }
+    &_size_xl {
+      ^&__wrapper {
+        min-width: var(--button-xl-min-width);
+        min-height: var(--button-xl-min-height);
+        padding: var(--button-xl-padding);
+        gap: var(--button-xl-gap);
+      }
+    }
+    &_size_l {
+      ^&__wrapper {
+        min-width: var(--button-l-min-width);
+        min-height: var(--button-l-min-height);
+        padding: var(--button-l-padding);
+        gap: var(--button-l-gap);
+      }
+    }
+    &_size_m {
+      ^&__wrapper {
+        min-width: var(--button-m-min-width);
+        min-height: var(--button-m-min-height);
+        padding: var(--button-m-padding);
+        gap: var(--button-m-gap);
+      }
+    }
+    &_size_s {
+      ^&__wrapper {
+        min-width: var(--button-s-min-width);
+        min-height: var(--button-s-min-height);
+        padding: var(--button-s-padding);
+        gap: var(--button-s-gap);
+      }
+    }
+    &_size_xs {
+      ^&__wrapper {
+        min-width: var(--button-xs-min-width);
+        min-height: var(--button-xs-min-height);
+        padding: var(--button-xs-padding);
+        gap: var(--button-xs-gap);
+      }
+    }
+    &_size_xxs {
+      ^&__wrapper {
+        min-width: var(--button-xxs-min-width);
+        min-height: var(--button-xxs-min-height);
+        padding: var(--button-xxs-padding);
+        gap: var(--button-xxs-gap);
       }
     }
-  }
 }
 .button {
   &&_skeleton {
@@ -95,32 +141,432 @@
   }
 }
 .button {
-  @each $type in default, icon, label {
-    &_type_$(type) {
-      @each $size in xxs, xs, s, m, l, xl, xxl {
-        &^&_size_$(size) {
+    &_type_default {
+        &^&_size_xxs {
           ^^&__wrapper {
             min-width: var(
-              --button-type-$(type)-$(size)-min-width,
-              var(--button-$(size)-min-width)
+              --button-type-default-xxs-min-width,
+              var(--button-xxs-min-width)
             );
             min-height: var(
-              --button-type-$(type)-$(size)-min-height,
-              var(--button-$(size)-min-height)
+              --button-type-default-xxs-min-height,
+              var(--button-xxs-min-height)
             );
             padding: var(
-              --button-type-$(type)-$(size)-padding,
-              var(--button-$(size)-padding)
+              --button-type-default-xxs-padding,
+              var(--button-xxs-padding)
             );
             gap: var(
-              --button-type-$(type)-$(size)-gap,
-              var(--button-$(size)-gap)
+              --button-type-default-xxs-gap,
+              var(--button-xxs-gap)
+            );
+          }
+        }
+        &^&_size_xs {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-default-xs-min-width,
+              var(--button-xs-min-width)
+            );
+            min-height: var(
+              --button-type-default-xs-min-height,
+              var(--button-xs-min-height)
+            );
+            padding: var(
+              --button-type-default-xs-padding,
+              var(--button-xs-padding)
+            );
+            gap: var(
+              --button-type-default-xs-gap,
+              var(--button-xs-gap)
+            );
+          }
+        }
+        &^&_size_s {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-default-s-min-width,
+              var(--button-s-min-width)
+            );
+            min-height: var(
+              --button-type-default-s-min-height,
+              var(--button-s-min-height)
+            );
+            padding: var(
+              --button-type-default-s-padding,
+              var(--button-s-padding)
+            );
+            gap: var(
+              --button-type-default-s-gap,
+              var(--button-s-gap)
+            );
+          }
+        }
+        &^&_size_m {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-default-m-min-width,
+              var(--button-m-min-width)
+            );
+            min-height: var(
+              --button-type-default-m-min-height,
+              var(--button-m-min-height)
+            );
+            padding: var(
+              --button-type-default-m-padding,
+              var(--button-m-padding)
+            );
+            gap: var(
+              --button-type-default-m-gap,
+              var(--button-m-gap)
+            );
+          }
+        }
+        &^&_size_l {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-default-l-min-width,
+              var(--button-l-min-width)
+            );
+            min-height: var(
+              --button-type-default-l-min-height,
+              var(--button-l-min-height)
+            );
+            padding: var(
+              --button-type-default-l-padding,
+              var(--button-l-padding)
+            );
+            gap: var(
+              --button-type-default-l-gap,
+              var(--button-l-gap)
+            );
+          }
+        }
+        &^&_size_xl {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-default-xl-min-width,
+              var(--button-xl-min-width)
+            );
+            min-height: var(
+              --button-type-default-xl-min-height,
+              var(--button-xl-min-height)
+            );
+            padding: var(
+              --button-type-default-xl-padding,
+              var(--button-xl-padding)
+            );
+            gap: var(
+              --button-type-default-xl-gap,
+              var(--button-xl-gap)
+            );
+          }
+        }
+        &^&_size_xxl {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-default-xxl-min-width,
+              var(--button-xxl-min-width)
+            );
+            min-height: var(
+              --button-type-default-xxl-min-height,
+              var(--button-xxl-min-height)
+            );
+            padding: var(
+              --button-type-default-xxl-padding,
+              var(--button-xxl-padding)
+            );
+            gap: var(
+              --button-type-default-xxl-gap,
+              var(--button-xxl-gap)
+            );
+          }
+        }
+    }
+    &_type_icon {
+        &^&_size_xxs {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-xxs-min-width,
+              var(--button-xxs-min-width)
+            );
+            min-height: var(
+              --button-type-icon-xxs-min-height,
+              var(--button-xxs-min-height)
+            );
+            padding: var(
+              --button-type-icon-xxs-padding,
+              var(--button-xxs-padding)
+            );
+            gap: var(
+              --button-type-icon-xxs-gap,
+              var(--button-xxs-gap)
+            );
+          }
+        }
+        &^&_size_xs {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-xs-min-width,
+              var(--button-xs-min-width)
+            );
+            min-height: var(
+              --button-type-icon-xs-min-height,
+              var(--button-xs-min-height)
+            );
+            padding: var(
+              --button-type-icon-xs-padding,
+              var(--button-xs-padding)
+            );
+            gap: var(
+              --button-type-icon-xs-gap,
+              var(--button-xs-gap)
+            );
+          }
+        }
+        &^&_size_s {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-s-min-width,
+              var(--button-s-min-width)
+            );
+            min-height: var(
+              --button-type-icon-s-min-height,
+              var(--button-s-min-height)
+            );
+            padding: var(
+              --button-type-icon-s-padding,
+              var(--button-s-padding)
+            );
+            gap: var(
+              --button-type-icon-s-gap,
+              var(--button-s-gap)
+            );
+          }
+        }
+        &^&_size_m {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-m-min-width,
+              var(--button-m-min-width)
+            );
+            min-height: var(
+              --button-type-icon-m-min-height,
+              var(--button-m-min-height)
+            );
+            padding: var(
+              --button-type-icon-m-padding,
+              var(--button-m-padding)
+            );
+            gap: var(
+              --button-type-icon-m-gap,
+              var(--button-m-gap)
+            );
+          }
+        }
+        &^&_size_l {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-l-min-width,
+              var(--button-l-min-width)
+            );
+            min-height: var(
+              --button-type-icon-l-min-height,
+              var(--button-l-min-height)
+            );
+            padding: var(
+              --button-type-icon-l-padding,
+              var(--button-l-padding)
+            );
+            gap: var(
+              --button-type-icon-l-gap,
+              var(--button-l-gap)
+            );
+          }
+        }
+        &^&_size_xl {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-xl-min-width,
+              var(--button-xl-min-width)
+            );
+            min-height: var(
+              --button-type-icon-xl-min-height,
+              var(--button-xl-min-height)
+            );
+            padding: var(
+              --button-type-icon-xl-padding,
+              var(--button-xl-padding)
+            );
+            gap: var(
+              --button-type-icon-xl-gap,
+              var(--button-xl-gap)
+            );
+          }
+        }
+        &^&_size_xxl {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-icon-xxl-min-width,
+              var(--button-xxl-min-width)
+            );
+            min-height: var(
+              --button-type-icon-xxl-min-height,
+              var(--button-xxl-min-height)
+            );
+            padding: var(
+              --button-type-icon-xxl-padding,
+              var(--button-xxl-padding)
+            );
+            gap: var(
+              --button-type-icon-xxl-gap,
+              var(--button-xxl-gap)
+            );
+          }
+        }
+    }
+    &_type_label {
+        &^&_size_xxs {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-xxs-min-width,
+              var(--button-xxs-min-width)
+            );
+            min-height: var(
+              --button-type-label-xxs-min-height,
+              var(--button-xxs-min-height)
+            );
+            padding: var(
+              --button-type-label-xxs-padding,
+              var(--button-xxs-padding)
+            );
+            gap: var(
+              --button-type-label-xxs-gap,
+              var(--button-xxs-gap)
+            );
+          }
+        }
+        &^&_size_xs {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-xs-min-width,
+              var(--button-xs-min-width)
+            );
+            min-height: var(
+              --button-type-label-xs-min-height,
+              var(--button-xs-min-height)
+            );
+            padding: var(
+              --button-type-label-xs-padding,
+              var(--button-xs-padding)
+            );
+            gap: var(
+              --button-type-label-xs-gap,
+              var(--button-xs-gap)
+            );
+          }
+        }
+        &^&_size_s {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-s-min-width,
+              var(--button-s-min-width)
+            );
+            min-height: var(
+              --button-type-label-s-min-height,
+              var(--button-s-min-height)
+            );
+            padding: var(
+              --button-type-label-s-padding,
+              var(--button-s-padding)
+            );
+            gap: var(
+              --button-type-label-s-gap,
+              var(--button-s-gap)
+            );
+          }
+        }
+        &^&_size_m {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-m-min-width,
+              var(--button-m-min-width)
+            );
+            min-height: var(
+              --button-type-label-m-min-height,
+              var(--button-m-min-height)
+            );
+            padding: var(
+              --button-type-label-m-padding,
+              var(--button-m-padding)
+            );
+            gap: var(
+              --button-type-label-m-gap,
+              var(--button-m-gap)
+            );
+          }
+        }
+        &^&_size_l {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-l-min-width,
+              var(--button-l-min-width)
+            );
+            min-height: var(
+              --button-type-label-l-min-height,
+              var(--button-l-min-height)
+            );
+            padding: var(
+              --button-type-label-l-padding,
+              var(--button-l-padding)
+            );
+            gap: var(
+              --button-type-label-l-gap,
+              var(--button-l-gap)
+            );
+          }
+        }
+        &^&_size_xl {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-xl-min-width,
+              var(--button-xl-min-width)
+            );
+            min-height: var(
+              --button-type-label-xl-min-height,
+              var(--button-xl-min-height)
+            );
+            padding: var(
+              --button-type-label-xl-padding,
+              var(--button-xl-padding)
+            );
+            gap: var(
+              --button-type-label-xl-gap,
+              var(--button-xl-gap)
+            );
+          }
+        }
+        &^&_size_xxl {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-label-xxl-min-width,
+              var(--button-xxl-min-width)
+            );
+            min-height: var(
+              --button-type-label-xxl-min-height,
+              var(--button-xxl-min-height)
+            );
+            padding: var(
+              --button-type-label-xxl-padding,
+              var(--button-xxl-padding)
+            );
+            gap: var(
+              --button-type-label-xxl-gap,
+              var(--button-xxl-gap)
             );
           }
         }
-      }
     }
-  }
 }
 .button {
   &&_width {

package/dist/css/components/Cell/Cell.css

@@ -41,17 +41,42 @@
 }
 .cell {
   &_size {
-    @each $size in xl, l, m, s {
-      &_$(size) {
+      &_xl {
         ^^&__wrapper {
-          padding: var(--cell-size-$(size)-padding);
-          gap: var(--cell-size-$(size)-gap);
+          padding: var(--cell-size-xl-padding);
+          gap: var(--cell-size-xl-gap);
           ^^^&__data {
-            gap: var(--cell-size-$(size)-data-gap);
+            gap: var(--cell-size-xl-data-gap);
+          }
+        }
+      }
+      &_l {
+        ^^&__wrapper {
+          padding: var(--cell-size-l-padding);
+          gap: var(--cell-size-l-gap);
+          ^^^&__data {
+            gap: var(--cell-size-l-data-gap);
+          }
+        }
+      }
+      &_m {
+        ^^&__wrapper {
+          padding: var(--cell-size-m-padding);
+          gap: var(--cell-size-m-gap);
+          ^^^&__data {
+            gap: var(--cell-size-m-data-gap);
+          }
+        }
+      }
+      &_s {
+        ^^&__wrapper {
+          padding: var(--cell-size-s-padding);
+          gap: var(--cell-size-s-gap);
+          ^^^&__data {
+            gap: var(--cell-size-s-data-gap);
           }
         }
       }
-    }
   }
 }
 .cell {