@itcase/ui 1.4.13 → 1.5.0

package/dist/css/components/Dropdown/Dropdown.css

@@ -20,26 +20,26 @@
   &_set {
     &_default {
       ^^&__wrapper {
-        padding: var(--dropdown-default-padding, 0);
+        padding: var(--dropdown-default-padding);
         display: flex;
         flex-direction: column;
-        gap: var(--dropdown-default-gap, 0);
+        gap: var(--dropdown-default-gap);
       }
     }
     &_normal {
       ^^&__wrapper {
-        padding: var(--dropdown-normal-padding, 12px 0);
+        padding: var(--dropdown-normal-padding);
         display: flex;
         flex-direction: column;
-        gap: var(--dropdown-normal-gap, 0);
+        gap: var(--dropdown-normal-gap);
       }
     }
     &_compact {
       ^^&__wrapper {
-        padding: var(--dropdown-compact-padding, 8px 0);
+        padding: var(--dropdown-compact-padding);
         display: flex;
         flex-direction: column;
-        gap: var(--dropdown-compact-gap, 0);
+        gap: var(--dropdown-compact-gap);
       }
     }
   }
@@ -47,9 +47,9 @@
 .dropdown {
   &_shape {
     &_rounded {
-      border-radius: var(--dropdown-shape-rounded, 12px);
+      border-radius: var(--dropdown-shape-rounded);
       ^^&__wrapper {
-        border-radius: var(--dropdown-shape-rounded, 12px);
+        border-radius: var(--dropdown-shape-rounded);
         overflow: hidden;
       }
     }
@@ -93,7 +93,7 @@
   &__item {
     &_shape {
       &_rounded {
-        border-radius: var(--dropdown-item-shape-rounded, 4px);
+        border-radius: var(--dropdown-item-shape-rounded);
       }
     }
   }
@@ -101,11 +101,11 @@
 .dropdown {
   &__item {
     &_size {
-      @each $size in xs, l {
+      @each $size in xxl, xl, l, m, s, xs, xxs {
         &_$(size) {
           ^^&-wrapper {
-            gap: var(--dropdown-item-size-$(size)-gap, 8px);
-            padding: var(--dropdown-item-size-$(size)-padding, 8px);
+            gap: var(--dropdown-item-size-$(size)-gap);
+            padding: var(--dropdown-item-size-$(size)-padding);
           }
         }
       }
@@ -115,7 +115,7 @@
 .dropdown__item {
   &_width {
     &_fixed {
-      min-width: var(--dropdown-item-width-fixed, 240px);
+      min-width: var(--dropdown-item-width-fixed);
     }
     &_hug {
       min-width: 62px;

package/dist/css/components/Icon/Icon.css

@@ -8,6 +8,7 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .icon {
   &_size {
     @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
@@ -28,6 +29,7 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .icon_fill {
   @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
     senary, surface, error, success, warning, info, danger, gradient {
@@ -75,6 +77,7 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .icon_fill {
   &_size {
     @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 72 {
@@ -91,9 +94,10 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .icon_shape {
   &_rounded {
-    border-radius: var(--icon-shape-rounded, 12px);
+    border-radius: var(--icon-shape-rounded);
   }
   &_circular {
     border-radius: 50%;

package/dist/css/components/Image/Image.css

@@ -81,17 +81,17 @@
 .image {
   &_shape {
     &_rounded {
-      border-radius: var(--image-shape-rounded, 12px);
+      border-radius: var(--image-shape-rounded);
       > ^^&__wrapper {
         width: 100%;
         height: 100%;
-        border-radius: var(--image-shape-rounded, 12px);
+        border-radius: var(--image-shape-rounded);
         position: relative;
         overflow: hidden;
         & > ^^^&__item {
           width: 100%;
           height: 100%;
-          border-radius: var(--image-shape-rounded, 12px);
+          border-radius: var(--image-shape-rounded);
         }
       }
     }
@@ -158,3 +158,6 @@
     }
   }
 }
+:root {
+  --image-shape-rounded: 6px;
+}

package/dist/css/components/Input/Input.css

@@ -9,11 +9,11 @@
   outline: 0;
   caret-color: var(--input-caret-color);
   &:disabled {
-    background: var(--input-state-disabled-background, #ECECEC);
-    border: solid 1px var(--input-state-disabled-border, #747474);
+    background: var(--input-state-disabled-background);
+    border: solid 1px var(--input-state-disabled-border);
     &:hover {
-      background: var(--input-state-disabled-background, #ECECEC);
-      border: solid 1px var(--input-state-disabled-border, #747474);
+      background: var(--input-state-disabled-background);
+      border: solid 1px var(--input-state-disabled-border);
     }
   }
   &:focus {
@@ -23,33 +23,11 @@
     background: var(--input-state-hover-background);
     border: solid 1px var(--input-state-hover-border);
   }
-  &&_state {
-    &_success {
-      background: var(--input-state-success-background);
-      border: solid 1px var(--input-state-success-border);
-    }
-    &_error {
-      background: var(--input-state-error-background);
-      border: solid 1px var(--input-state-error-border);
-    }
-    &_focus {
-      background: var(--input-state-focus-background);
-      border: solid 1px var(--input-state-focus-border);
-    }
-    &_required {
-      background: var(--input-state-required-background);
-      border: solid 1px var(--input-state-required-border);
-    }
-    &_custom {
-      background: var(--input-state-custom-background);
-      border: solid 1px var(--input-state-custom-border);
-    }
-  }
 }
 .input {
   &_shape {
     &_rounded {
-      border-radius: var(--input-shape-rounded, 4px);
+      border-radius: var(--input-shape-rounded);
       position: relative;
     }
     &_underline {
@@ -62,13 +40,25 @@
 }
 .input {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
       &_$(size) {
         padding: var(--input-size-$(size)-padding);
       }
     }
   }
 }
+.input {
+  &&_state {
+    @each $state in error, success, require, disabled, focus {
+      &_$(state) {
+        & .input {
+          background: var(--input-state-$(state)-background);
+          border: solid 1px var(--input-state-$(state)-border);
+        }
+      }
+    }
+  }
+}
 .input {
   &_type {
     &_number {
@@ -93,13 +83,10 @@
   --input-size-xl-padding: 13px 20px;
   --input-size-xxl-padding: 17px 25px;
 
-  --input-size-tiny-padding: 1px 8px;
-  --input-size-compact-padding: 5px 10px;
-  --input-size-normal-padding: 7px 12px;
-  --input-size-large-padding: 9px 15px;
-
-  --input-success-border: var(--color-surface-border-tertiary);
+  --input-caret-color: var(--color-accent-primary);
 
+  --input-state-success-background: none;
+  --input-state-success-border: var(--color-success-border-primary);
   --input-state-focus-border: var(--color-surface-border-quaternary);
   --input-state-focus-background: none;
   --input-state-error-border: var(--color-error-border-primary);
@@ -110,5 +97,4 @@
   --input-state-custom-background: none;
   --input-state-hover-border: var(--color-surface-border-quaternary);
   --input-state-hover-background: none;
-  --input-caret-color: var(--color-accent-primary);
 }

package/dist/css/components/InputMask/Input.css

@@ -9,11 +9,11 @@
   outline: 0;
   caret-color: var(--input-caret-color);
   &:disabled {
-    background: var(--input-state-disabled-background, #ECECEC);
-    border: solid 1px var(--input-state-disabled-border, #747474);
+    background: var(--input-state-disabled-background);
+    border: solid 1px var(--input-state-disabled-border);
     &:hover {
-      background: var(--input-state-disabled-background, #ECECEC);
-      border: solid 1px var(--input-state-disabled-border, #747474);
+      background: var(--input-state-disabled-background);
+      border: solid 1px var(--input-state-disabled-border);
     }
   }
   &:focus {
@@ -41,7 +41,7 @@
 .input {
   &_shape {
     &_rounded {
-      border-radius: var(--input-shape-rounded, 4px);
+      border-radius: var(--input-shape-rounded);
       position: relative;
     }
     &_underline {
@@ -54,7 +54,7 @@
 }
 .input {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
       &_$(size) {
         padding: var(--input-size-$(size)-padding);
       }

package/dist/css/components/InputPassword/InputPassword.css

@@ -43,7 +43,7 @@
   &__input {
     &_shape {
       &_rounded {
-        border-radius: 4px;
+        border-radius: var(--input-password-shape-rounded);
         position: relative;
       }
       &_underline {
@@ -58,7 +58,7 @@
 .input-password {
   &__input {
     &&_size {
-      @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+      @each $size in xxl, xl, l, m, s, xs, xxs, normal, tiny, compact, large {
         &_$(size) {
           padding: var(--input-password-size-$(size)-padding);
         }

package/dist/css/components/Label/Label.css

@@ -37,8 +37,8 @@
 .label {
   &_shape {
     &_rounded {
-      border-radius: var(--label-shape-rounded-default, 6px);
-      @each $size in xxs, xs, s, m, l, xl, xxl {
+      border-radius: var(--label-shape-rounded-default);
+      @each $size in xxl, xl, l, m, s, xs, xxs {
         &.label_size_$(size) {
           border-radius: var(--label-size-$(size)-shape-rounded);
         }
@@ -51,7 +51,7 @@
 }
 .label {
   &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__inner {
           padding: var(--label-size-$(size)-padding);

package/dist/css/components/List/List.css

@@ -1,16 +1,17 @@
 .list {
   list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
   &__item {
-    margin: 0;
     padding: 0;
+    margin: 0;
   }
 }
 .list {
   &_bullet {
     &-fill {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
           &-item {
             @each $color in primary, secondary, tertiary, quaternary, accent {
@@ -77,18 +78,18 @@
     & li {
       display: flex;
       flex-direction: row;
-      align-items: center;
       justify-content: flex-start;
+      align-items: center;
       gap: 16px;
       &::before {
-        content: '';
-        display: flex;
         min-width: 6px;
-        max-width: 6px;
         min-height: 6px;
+        max-width: 6px;
         max-height: 6px;
         background: inherit;
         border-radius: 100%;
+        content: '';
+        display: flex;
       }
     }
   }

package/dist/css/components/Loader/Loader.css

@@ -26,11 +26,9 @@
         left: 50%;
         top: 50%;
         display: flex;
-  
         transform: translate(-50%, -50%);
       }
       ^^&__item {
-   
         border-radius: 100%;
         display: inline-block;
         animation: loaderSimple 1.4s infinite ease-in-out both;

package/dist/css/components/Logo/Logo.css

@@ -37,7 +37,7 @@
 }
 .logo {
   &_size {
-    @each $size in xs, s, m, l, xl {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__image {
           width: var(--logo-size-$(size)-width);

package/dist/css/components/MenuItem/MenuItem.css

@@ -37,11 +37,11 @@
 .menu-item {
   &_set {
     &_filter {
-      cursor: pointer;
-      padding: var(--menu-item-set-filter-padding, 0);
       color: var(--color-surface-text-primary);
+      padding: var(--menu-item-set-filter-padding);
+      cursor: pointer;
       &:not(:last-child) {
-        border-right: var(--menu-item-set-filter-border-right: initial);
+        border-right: var(--menu-item-set-filter-border-right, initial);
       }
       &_active {
         & span {
@@ -55,7 +55,7 @@
 .menu-item {
   &_set {
     &_subitem {
-      transform: translate(var(--menu-item-set-subitem-padding-left, 32px), 0);
+      transform: translate(var(--menu-item-set-subitem-padding-left));
     }
   }
 }
@@ -63,7 +63,7 @@
 .menu-item {
   &_shape {
     &_rounded {
-      border-radius: var(--menu-item-shape-rounded, 12px);
+      border-radius: var(--menu-item-shape-rounded);
     }
     &_circular {
       border-radius: 50%;
@@ -73,10 +73,28 @@
 
 .menu-item {
   &_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         padding: var(--menu-item-size-$(size)-padding);
       }
     }
   }
 }
+
+:root {
+  --menu-item-size-xxs-padding: 0 4px;
+  --menu-item-size-xs-padding: 0 4px;
+  --menu-item-size-s-padding: 3px 4px;
+  --menu-item-size-m-padding: 4px 12px;
+  --menu-item-size-l-padding: 6px 6px;
+  --menu-item-size-xl-padding: 10px 8px;
+  --menu-item-size-xxl-padding: 12px 10px;
+
+  --menu-item-shape-rounded: 20px;
+  --menu-item-set-subitem-padding-left: 36px;
+
+  --menu-item-set-filter-padding: 10px 16px;
+  --menu-item-set-filter-border-right: 1px solid
+    var(--color-surface-border-tertiary);
+  --menu-item-set-filter-active-color: var(--color-surface-item-accent);
+}

package/dist/css/components/Modal/Modal.css

@@ -17,7 +17,7 @@
 }
 .modal-shape {
   &_rounded {
-    border-radius: var(--modal-shape-rounded, 20px);
+    border-radius: var(--modal-shape-rounded);
   }
   &_circular {
     border-radius: 50%;
@@ -27,7 +27,7 @@
   width: 100%;
   min-width: 200px;
   min-height: 200px;
-  max-width: var(--modal-max-width, 1200px);
+  max-width: var(--modal-max-width);
   position: relative;
   z-index: 100;
   &:focus {

package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css

@@ -5,7 +5,7 @@
       --modal-sheet-bottom-container-background,
       var(--color-surface-primary)
     ) !important;
-    border-radius: var(--modal-sheet-bottom-container-border-radius, 8px 8px 0 0) !important;
+    border-radius: var(--modal-sheet-bottom-container-border-radius) !important;
   }
   &__header {
     height: 32px;

package/dist/css/components/Notification/Notification.css

@@ -27,10 +27,10 @@
   &_set {
     &_float {
       width: 100%;
-      border-radius: var(--notification-item-set-float-border-radius, 8px);
+      border-radius: var(--notification-item-set-float-border-radius);
       @mixin elevation-8;
       ^^&-wrapper {
-        padding: var(--notification-item-set-float-padding, 12px 16px);
+        padding: var(--notification-item-set-float-padding);
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -43,7 +43,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: var(--notification-item-set-top-padding, 12px 16px);
+        padding: var(--notification-item-set-top-padding);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -57,17 +57,17 @@
   &_set {
     &_form {
       width: 100%;
-      padding: var(--notification-item-set-form-padding, 0);
-      border-radius: var(--notification-item-set-form-border-radius, 8px);
+      padding: var(--notification-item-set-form-padding);
+      border-radius: var(--notification-item-set-form-border-radius);
       display: flex;
       flex-direction: column;
-      gap: var(--notification-item-set-form-gap, 0);
+      gap: var(--notification-item-set-form-gap);
       ^^&-wrapper {
         text-align: left;
-        padding: var(--notification-item-set-form-wrapper-padding, 12px 16px);
+        padding: var(--notification-item-set-form-wrapper-padding);
         display: flex;
         flex-direction: column;
-        gap: var(--notification-item-set-form-wrapper-gap, 4px);
+        gap: var(--notification-item-set-form-wrapper-gap);
       }
     }
   }
@@ -77,13 +77,13 @@
     &_toast {
       width: 100%;
       background: var(--color-surface-primary);
-      border-radius: var(--notification-item-set-toast-border-radius, 8px);
+      border-radius: var(--notification-item-set-toast-border-radius);
       display: flex;
       flex-direction: column;
       gap: 24px;
       @mixin elevation-8;
       ^^&-wrapper {
-        padding: var(--notification-item-set-toast-padding, 12px 16px);
+        padding: var(--notification-item-set-toast-padding);
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -156,3 +156,15 @@
     }
   }
 }
+:root {
+  --notification-item-set-float-border-radius: 10px;
+  --notification-item-set-float-padding: 20px;
+  --notification-item-set-form-padding: 0;
+  --notification-item-set-form-border-radius: 0;
+  --notification-item-set-form-gap: 0;
+  --notification-item-set-form-wrapper-padding: 0;
+  --notification-item-set-form-wrapper-gap: 0;
+  --notification-item-set-top-padding: 10px;
+  --notification-item-set-toast-border-radius: 0;
+  --notification-item-set-toast-padding: 0;
+}

package/dist/css/components/Notification/css/__item/notification__item_set_float.css

@@ -2,10 +2,10 @@
   &_set {
     &_float {
       width: 100%;
-      border-radius: var(--notification-item-set-float-border-radius, 8px);
+      border-radius: var(--notification-item-set-float-border-radius);
       @mixin elevation-8;
       ^^&-wrapper {
-        padding: var(--notification-item-set-float-padding, 12px 16px);
+        padding: var(--notification-item-set-float-padding);
         display: flex;
         flex-direction: column;
         gap: 4px;

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -2,17 +2,17 @@
   &_set {
     &_form {
       width: 100%;
-      padding: var(--notification-item-set-form-padding, 0);
-      border-radius: var(--notification-item-set-form-border-radius, 8px);
+      padding: var(--notification-item-set-form-padding);
+      border-radius: var(--notification-item-set-form-border-radius);
       display: flex;
       flex-direction: column;
-      gap: var(--notification-item-set-form-gap, 0);
+      gap: var(--notification-item-set-form-gap);
       ^^&-wrapper {
         text-align: left;
-        padding: var(--notification-item-set-form-wrapper-padding, 12px 16px);
+        padding: var(--notification-item-set-form-wrapper-padding);
         display: flex;
         flex-direction: column;
-        gap: var(--notification-item-set-form-wrapper-gap, 4px);
+        gap: var(--notification-item-set-form-wrapper-gap);
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_toast.css

@@ -3,13 +3,13 @@
     &_toast {
       width: 100%;
       background: var(--color-surface-primary);
-      border-radius: var(--notification-item-set-toast-border-radius, 8px);
+      border-radius: var(--notification-item-set-toast-border-radius);
       display: flex;
       flex-direction: column;
       gap: 24px;
       @mixin elevation-8;
       ^^&-wrapper {
-        padding: var(--notification-item-set-toast-padding, 12px 16px);
+        padding: var(--notification-item-set-toast-padding);
         display: flex;
         flex-direction: column;
         gap: 4px;

package/dist/css/components/Notification/css/__item/notification__item_set_top.css

@@ -3,7 +3,7 @@
     &_top {
       width: 100%;
       ^^&-wrapper {
-        padding: var(--notification-item-set-top-padding, 12px 16px);
+        padding: var(--notification-item-set-top-padding);
         display: flex;
         flex-direction: column;
         justify-content: center;

package/dist/css/components/Overlay/Overlay.css

@@ -6,7 +6,7 @@
   left: 0;
   top: 0;
   z-index: 1;
-  backdrop-filter: blur(var(--overlay-blur, 10px));
+  backdrop-filter: blur(var(--overlay-blur));
 }
 .overlay {
   &&_state {
@@ -41,3 +41,7 @@
     opacity: 0%;
   }
 }
+:root {
+  --overlay-fill: hsla(0, 0%, 0%, 0.4);
+  --overlay-blur: 20px;
+}