@itcase/ui 1.8.159 → 1.8.160

package/dist/css/components/Select/css/__input-container/select__input-container.css

@@ -1,26 +1,383 @@
 .select {
   &__input-container {
     flex: 1;
-    @each $sizeText in xxl, xl, l, m, s, xs, xxs {
-      &.text_size_$(sizeText) {
+      &.text_size_xxl {
         & input {
-          @mixin text-$(sizeText);
+          @mixin text-xxl;
         }
       }
-    }
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &.text-color_$(type) {
+      &.text_size_xl {
+        & input {
+          @mixin text-xl;
+        }
+      }
+      &.text_size_l {
+        & input {
+          @mixin text-l;
+        }
+      }
+      &.text_size_m {
+        & input {
+          @mixin text-m;
+        }
+      }
+      &.text_size_s {
+        & input {
+          @mixin text-s;
+        }
+      }
+      &.text_size_xs {
+        & input {
+          @mixin text-xs;
+        }
+      }
+      &.text_size_xxs {
+        & input {
+          @mixin text-xxs;
+        }
+      }
+      &.text-color_accent {
+        &-text {
+            &-primary {
+              & input {
+                color: var(--color-accent-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-accent-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-accent-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-accent-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-accent-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-accent-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-accent-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-accent-text-disabled);
+              }
+            }
+            &-hover {
+              & input {
+                color: var(--color-accent-text-hover);
+              }
+            }
+        }
+      }
+      &.text-color_primary {
+        &-text {
+            &-primary {
+              & input {
+                color: var(--color-primary-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-primary-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-primary-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-primary-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-primary-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-primary-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-primary-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-primary-text-disabled);
+              }
+            }
+            &-hover {
+              & input {
+                color: var(--color-primary-text-hover);
+              }
+            }
+        }
+      }
+      &.text-color_secondary {
+        &-text {
+            &-primary {
+              & input {
+                color: var(--color-secondary-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-secondary-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-secondary-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-secondary-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-secondary-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-secondary-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-secondary-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-secondary-text-disabled);
+              }
+            }
+            &-hover {
+              & input {
+                color: var(--color-secondary-text-hover);
+              }
+            }
+        }
+      }
+      &.text-color_tertiary {
+        &-text {
+            &-primary {
+              & input {
+                color: var(--color-tertiary-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-tertiary-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-tertiary-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-tertiary-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-tertiary-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-tertiary-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-tertiary-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-tertiary-text-disabled);
+              }
+            }
+            &-hover {
+              & input {
+                color: var(--color-tertiary-text-hover);
+              }
+            }
+        }
+      }
+      &.text-color_surface {
         &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover {
-            &-$(color) {
+            &-primary {
+              & input {
+                color: var(--color-surface-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-surface-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-surface-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-surface-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-surface-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-surface-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-surface-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-surface-text-disabled);
+              }
+            }
+            &-hover {
+              & input {
+                color: var(--color-surface-text-hover);
+              }
+            }
+        }
+      }
+      &.text-color_success {
+        &-text {
+            &-primary {
+              & input {
+                color: var(--color-success-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-success-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-success-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-success-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-success-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-success-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-success-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-success-text-disabled);
+              }
+            }
+            &-hover {
+              & input {
+                color: var(--color-success-text-hover);
+              }
+            }
+        }
+      }
+      &.text-color_error {
+        &-text {
+            &-primary {
+              & input {
+                color: var(--color-error-text-primary);
+              }
+            }
+            &-secondary {
+              & input {
+                color: var(--color-error-text-secondary);
+              }
+            }
+            &-tertiary {
+              & input {
+                color: var(--color-error-text-tertiary);
+              }
+            }
+            &-quaternary {
+              & input {
+                color: var(--color-error-text-quaternary);
+              }
+            }
+            &-quinary {
+              & input {
+                color: var(--color-error-text-quinary);
+              }
+            }
+            &-senary {
+              & input {
+                color: var(--color-error-text-senary);
+              }
+            }
+            &-accent {
+              & input {
+                color: var(--color-error-text-accent);
+              }
+            }
+            &-disabled {
+              & input {
+                color: var(--color-error-text-disabled);
+              }
+            }
+            &-hover {
               & input {
-                color: var(--color-$(type)-text-$(color));
+                color: var(--color-error-text-hover);
               }
             }
-          }
         }
       }
-    }
   }
 }

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -3,11 +3,27 @@
     &-list {
       &-item {
         &_size {
-          @each $size in xxl, xl, l, m, s, xs, xxs {
-            &_$(size) {
-              padding: var(--select-menu-list-item-$(size)-padding);
+            &_xxl {
+              padding: var(--select-menu-list-item-xxl-padding);
+            }
+            &_xl {
+              padding: var(--select-menu-list-item-xl-padding);
+            }
+            &_l {
+              padding: var(--select-menu-list-item-l-padding);
+            }
+            &_m {
+              padding: var(--select-menu-list-item-m-padding);
+            }
+            &_s {
+              padding: var(--select-menu-list-item-s-padding);
+            }
+            &_xs {
+              padding: var(--select-menu-list-item-xs-padding);
+            }
+            &_xxs {
+              padding: var(--select-menu-list-item-xxs-padding);
             }
-          }
         }
       }
     }

package/dist/css/components/Switch/Switch.css

@@ -84,16 +84,62 @@
 }
 .switch {
   &&_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
+      &_xxl {
         & .switch__item {
-          min-width: var(--switch-size-$(size)-width);
-          min-height: var(--switch-size-$(size)-height);
-          max-width: var(--switch-size-$(size)-width);
-          max-height: var(--switch-size-$(size)-height);
+          min-width: var(--switch-size-xxl-width);
+          min-height: var(--switch-size-xxl-height);
+          max-width: var(--switch-size-xxl-width);
+          max-height: var(--switch-size-xxl-height);
+        }
+      }
+      &_xl {
+        & .switch__item {
+          min-width: var(--switch-size-xl-width);
+          min-height: var(--switch-size-xl-height);
+          max-width: var(--switch-size-xl-width);
+          max-height: var(--switch-size-xl-height);
+        }
+      }
+      &_l {
+        & .switch__item {
+          min-width: var(--switch-size-l-width);
+          min-height: var(--switch-size-l-height);
+          max-width: var(--switch-size-l-width);
+          max-height: var(--switch-size-l-height);
+        }
+      }
+      &_m {
+        & .switch__item {
+          min-width: var(--switch-size-m-width);
+          min-height: var(--switch-size-m-height);
+          max-width: var(--switch-size-m-width);
+          max-height: var(--switch-size-m-height);
+        }
+      }
+      &_s {
+        & .switch__item {
+          min-width: var(--switch-size-s-width);
+          min-height: var(--switch-size-s-height);
+          max-width: var(--switch-size-s-width);
+          max-height: var(--switch-size-s-height);
+        }
+      }
+      &_xs {
+        & .switch__item {
+          min-width: var(--switch-size-xs-width);
+          min-height: var(--switch-size-xs-height);
+          max-width: var(--switch-size-xs-width);
+          max-height: var(--switch-size-xs-height);
+        }
+      }
+      &_xxs {
+        & .switch__item {
+          min-width: var(--switch-size-xxs-width);
+          min-height: var(--switch-size-xxs-height);
+          max-width: var(--switch-size-xxs-width);
+          max-height: var(--switch-size-xxs-height);
         }
       }
-    }
   }
 }
 :root {

package/dist/css/components/Tab/Tab.css

@@ -34,26 +34,95 @@
   }
 }
 .tab {
-  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
-    &_justify-content_$(val) {
+    &_justify-content_flex-start {
       & > a {
-        justify-content: $(val);
+        justify-content: flex-start;
+      }
+    }
+    &_justify-content_flex-end {
+      & > a {
+        justify-content: flex-end;
+      }
+    }
+    &_justify-content_center {
+      & > a {
+        justify-content: center;
+      }
+    }
+    &_justify-content_space-between {
+      & > a {
+        justify-content: space-between;
+      }
+    }
+    &_justify-content_space-around {
+      & > a {
+        justify-content: space-around;
+      }
+    }
+    &_justify-content_space-evenly {
+      & > a {
+        justify-content: space-evenly;
       }
     }
-  }
 }
 .tab {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        min-height: var(--tab-size-$(size)-min-height);
+      &_xxl {
+        min-height: var(--tab-size-xxl-min-height);
         ^^&__wrapper {
-          padding: var(--tab-size-$(size)-padding);
+          padding: var(--tab-size-xxl-padding);
           align-items: center;
-          gap: var(--tab-size-$(size)-gap);
+          gap: var(--tab-size-xxl-gap);
+        }
+      }
+      &_xl {
+        min-height: var(--tab-size-xl-min-height);
+        ^^&__wrapper {
+          padding: var(--tab-size-xl-padding);
+          align-items: center;
+          gap: var(--tab-size-xl-gap);
+        }
+      }
+      &_l {
+        min-height: var(--tab-size-l-min-height);
+        ^^&__wrapper {
+          padding: var(--tab-size-l-padding);
+          align-items: center;
+          gap: var(--tab-size-l-gap);
+        }
+      }
+      &_m {
+        min-height: var(--tab-size-m-min-height);
+        ^^&__wrapper {
+          padding: var(--tab-size-m-padding);
+          align-items: center;
+          gap: var(--tab-size-m-gap);
+        }
+      }
+      &_s {
+        min-height: var(--tab-size-s-min-height);
+        ^^&__wrapper {
+          padding: var(--tab-size-s-padding);
+          align-items: center;
+          gap: var(--tab-size-s-gap);
+        }
+      }
+      &_xs {
+        min-height: var(--tab-size-xs-min-height);
+        ^^&__wrapper {
+          padding: var(--tab-size-xs-padding);
+          align-items: center;
+          gap: var(--tab-size-xs-gap);
+        }
+      }
+      &_xxs {
+        min-height: var(--tab-size-xxs-min-height);
+        ^^&__wrapper {
+          padding: var(--tab-size-xxs-padding);
+          align-items: center;
+          gap: var(--tab-size-xxs-gap);
         }
       }
-    }
   }
 }
 .tab {

package/dist/css/components/Text/Text.css

@@ -27,27 +27,76 @@
 }
 .text {
   &_size {
-    @each $sizeText in xxl, xl, l, m, s, xs, xxs {
-      &_$(sizeText) {
+      &_xxl {
         padding: 0;
         margin: 0;
-        @mixin text-$(sizeText);
+        @mixin text-xxl;
       }
-    }
-    @each $size in h1, h2, h3, h4, h5, h6 {
-      &_$(size) {
+      &_xl {
         padding: 0;
         margin: 0;
-        @mixin $(size);
+        @mixin text-xl;
       }
-    }
-    @each $sizeP in p {
-      &_$(sizeP) {
+      &_l {
         padding: 0;
         margin: 0;
-        @mixin $(sizeP);
+        @mixin text-l;
+      }
+      &_m {
+        padding: 0;
+        margin: 0;
+        @mixin text-m;
+      }
+      &_s {
+        padding: 0;
+        margin: 0;
+        @mixin text-s;
+      }
+      &_xs {
+        padding: 0;
+        margin: 0;
+        @mixin text-xs;
+      }
+      &_xxs {
+        padding: 0;
+        margin: 0;
+        @mixin text-xxs;
+      }
+      &_h1 {
+        padding: 0;
+        margin: 0;
+        @mixin h1;
+      }
+      &_h2 {
+        padding: 0;
+        margin: 0;
+        @mixin h2;
+      }
+      &_h3 {
+        padding: 0;
+        margin: 0;
+        @mixin h3;
+      }
+      &_h4 {
+        padding: 0;
+        margin: 0;
+        @mixin h4;
+      }
+      &_h5 {
+        padding: 0;
+        margin: 0;
+        @mixin h5;
+      }
+      &_h6 {
+        padding: 0;
+        margin: 0;
+        @mixin h6;
+      }
+      &_p {
+        padding: 0;
+        margin: 0;
+        @mixin p;
       }
-    }
   }
 }
 :root {