@itcase/ui 1.3.31 → 1.3.33

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

@@ -20,28 +20,11 @@
   }
   &__wrapper {
     display: flex;
+    justify-content: center;
     align-items: center;
-  }
-  &__label {
-    text-decoration: none;
-    text-align: center;
-  }
-  &__count {
-    position: relative;
-  }
-}
-.button {
-  &_shape {
-    &_rounded {
-      border-radius: var(--button-shape-rounded-default, 6px);
-      @each $size in xxs, xs, s, m, l, xl, xxl {
-        &.button_size_$(size) {
-          border-radius: var(--button-$(size)-shape-rounded);
-        }
-      }
-    }
-    &_circular {
-      border-radius: 50%;
+    ^&__label {
+      text-decoration: none;
+      text-align: center;
     }
   }
 }
@@ -49,258 +32,31 @@
   &&_state {
     &_loading {
       ^^&__loader {
-        display: flex;
-        position: absolute;
-      }
-    }
-  }
-}
-.button {
-  &_type {
-    @each $type in label, with-icon, icon {
-      &_$(type) {
-        @each $set in filled, outlined, ghost {
-          &.button_set_$(set) {
-            @each $size in xxs, xs, s, m, l, xl, xxl {
-              &.button_size_$(size) {
-                ^^^^&__wrapper {
-                  padding: var(--button-$(type)-$(set)-$(size)-padding);
-                }
-                &.button_type_with-icon {
-                  ^^^^^&__wrapper {
-                    gap: var(--button-with-icon-$(size)-gap);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.button {
-  &&_type {
-    &_accent {
-      & > ^^&__icon {
-        svg {
-          fill: var(--color-accent-item-secondary);
-        }
-      }
-      &^^&_fill {
-        &_outline {
-          border: solid 1px var(--color-accent-border-primary);
-          &:hover {
-            background: var(--color-accent-hover-secondary);
-            border: solid 1px var(--color-accent-border-primary-hover);
-            & > ^^^^^&__label {
-              color: var(--color-accent-text-secondary-hover);
-            }
-          }
-          & > ^^^^&__label {
-            color: var(--color-accent-text-secondary);
-          }
-        }
-        &_solid {
-          background: var(--color-accent-primary);
-          border: solid 1px var(--color-accent-border-primary);
-          &:hover {
-            background: var(--color-accent-primary-hover);
-            border: solid 1px var(--color-accent-border-primary-hover);
-            & > ^^^^^&__label {
-              color: var(--color-accent-text-primary-hover);
-            }
-          }
-          & > ^^^^&__label {
-            color: var(--color-accent-text-primary);
-          }
-        }
-      }
-    }
-  }
-}
-.button {
-  &&_type {
-    &_badge {
-      position: relative;
-      & .badge {
         position: absolute;
-        right: -4px;
-        top: -4px;
-      }
-    }
-  }
-}
-.button {
-  &_type {
-    &_icon {
-      align-self: flex-start;
-      &.button_size {
-        @each $size in xxs, xs, s, m, l, xl, xxl {
-          &_$(size) {
-            & ^^^^&__wrapper {
-              padding: var(--button-size-$(size)-icon-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.button {
-  &&_type {
-    &_primary {
-      & > ^^&__icon {
-        svg {
-          fill: var(--color-primary-item-secondary);
-        }
-      }
-      &^^&_fill {
-        &_outline {
-          border: solid 1px var(--color-primary-border-primary);
-          &:hover {
-            background: var(--color-primary-primary-hover);
-            border: solid 1px var(--color-primary-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-primary-text-secondary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-primary-text-secondary);
-          }
-        }
-        &_solid {
-          background: var(--color-primary-primary);
-          border: solid 1px var(--color-primary-border-primary);
-          &:hover {
-            background: var(--color-primary-primary-hover);
-            border: solid 1px var(--color-primary-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-primary-text-primary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-primary-text-primary);
-          }
-        }
-      }
-    }
-  }
-}
-.button {
-  &&_type {
-    &_secondary {
-      & > ^^&__icon {
-        svg {
-          fill: var(--color-secondary-item-secondary);
-        }
-      }
-      &^^&_fill {
-        &_outline {
-          border: solid 1px var(--color-secondary-border-primary);
-          &:hover {
-            background: var(--color-secondary-primary-hover);
-            border: solid 1px var(--color-secondary-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-secondary-text-secondary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-secondary-text-secondary);
-          }
-        }
-        &_solid {
-          background: var(--color-secondary-primary);
-          border: solid 1px var(--color-secondary-border-primary);
-          &:hover {
-            background: var(--color-secondary-primary-hover);
-            border: solid 1px var(--color-secondary-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-secondary-text-primary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-secondary-text-primary);
-          }
-        }
-      }
-    }
-  }
-}
-.button {
-  &&_type {
-    &_surface {
-      & > ^^&__icon {
-        svg {
-          fill: var(--color-surface-item-secondary);
-        }
-      }
-      &^^&_fill {
-        &_outline {
-          border: solid 1px var(--color-surface-border-primary);
-          &:hover {
-            background: var(--color-surface-primary-hover);
-            border: solid 1px var(--color-surface-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-surface-text-secondary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-surface-text-secondary);
-          }
-        }
-        &_solid {
-          background: var(--color-surface-primary);
-          border: solid 1px var(--color-surface-border-primary);
-          &:hover {
-            background: var(--color-surface-primary-hover);
-            border: solid 1px var(--color-surface-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-surface-text-primary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-surface-text-primary);
-          }
-        }
+        display: flex;
       }
     }
   }
 }
 .button {
-  &&_type {
-    &_tertiary {
-      & > ^^&__icon {
-        svg {
-          fill: var(--color-tertiary-item-secondary);
-        }
-      }
-      &^^&_fill {
-        &_outline {
-          border: solid 1px var(--color-tertiary-border-primary);
-          &:hover {
-            background: var(--color-tertiary-primary-hover);
-            border: solid 1px var(--color-tertiary-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-tertiary-text-secondary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-tertiary-text-secondary);
-          }
-        }
-        &_solid {
-          background: var(--color-tertiary-primary);
-          border: solid 1px var(--color-tertiary-border-primary);
-          &:hover {
-            background: var(--color-tertiary-primary-hover);
-            border: solid 1px var(--color-tertiary-border-primary-hover);
-            & > ^^^^^&__text {
-              color: var(--color-tertiary-text-primary-hover);
-            }
-          }
-          & > ^^^^&__text {
-            color: var(--color-tertiary-text-primary);
+  @each $type in default, icon, label {
+    &_type_$(type) {
+      @each $size in xxs, xs, s, m, l, xl, xxl {
+        &^&_size_$(size) {
+          ^^&__wrapper {
+            min-width: var(
+              --button-type-$(type)-$(size)-min-width,
+              --button-$(size)-min-width
+            );
+            min-height: var(
+              --button-type-$(type)-$(size)-min-height,
+              --button-$(size)-min-height
+            );
+            padding: var(
+              --button-type-$(type)-$(size)-padding,
+              --button-$(size)-padding
+            );
+            gap: var(--button-type-$(type)-$(size)-gap, --button-$(size)-gap);
           }
         }
       }
@@ -308,13 +64,13 @@
   }
 }
 .button {
-  &&_type {
-    &_with-icon {
-      position: relative;
-      ^^&__icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+  @each $size in xxs, xs, s, m, l, xl, xxl {
+    &_size_$(size) {
+      ^&__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);
       }
     }
   }
@@ -322,7 +78,7 @@
 .button {
   &&_width {
     &_fixed {
-      width: 240px;
+      width: 180px;
     }
     &_hug {
       display: inline-flex;
@@ -334,33 +90,41 @@
   }
 }
 :root {
+  /* MainXL */
   --button-transition: all 0.2s ease 0s;
-  --button-size-xxs-padding: 4px 12px;
-  --button-size-xxs-icon-padding: 0px;
-  --button-size-xxs-gap: 6px;
-  --button-size-xxs-shape-rounded: 6px;
-  --button-size-xs-padding: 2px 8px;
-  --button-size-xs-icon-padding: 0px;
-  --button-size-xs-gap: 6px;
-  --button-size-xs-shape-rounded: 6px;
-  --button-size-s-padding: 4px 16px;
-  --button-size-s-icon-padding: 0px;
-  --button-size-s-gap: 6px;
-  --button-size-s-shape-rounded: 6px;
-  --button-size-m-padding: 8px 24px;
-  --button-size-m-icon-padding: 10px;
-  --button-size-m-gap: 6px;
-  --button-size-m-shape-rounded: 6px;
-  --button-size-l-padding: 12px 32px;
-  --button-size-l-icon-padding: 0px;
-  --button-size-l-gap: 6px;
-  --button-size-l-shape-rounded: 6px;
-  --button-size-xl-padding: 16px 32px;
-  --button-size-xl-icon-padding: 0px;
-  --button-size-xl-gap: 6px;
-  --button-size-xl-shape-rounded: 6px;
-  --button-size-xxl-padding: 24px 40px;
-  --button-size-xxl-icon-padding: 0px;
-  --button-size-xxl-gap: 6px;
-  --button-size-xxl-shape-rounded: 6px;
+  /* Size XXL */
+  --button-xxl-gap: 0.5m;
+  --button-xxl-padding: 2m 2m;
+  --button-xxl-min-width: 56px;
+  --button-xxl-min-height: 56px;
+  /* Size XL */
+  --button-xl-gap: 0.5m;
+  --button-xl-padding: 1m 1m;
+  --button-xl-min-width: 40px;
+  --button-xl-min-height: 40px;
+  /* Size L */
+  --button-l-gap: 0.5m;
+  --button-l-padding: 0.5m 0.5m;
+  --button-l-min-width: 32px;
+  --button-l-min-height: 32px;
+  /* Size M */
+  --button-m-gap: 0.5m;
+  --button-m-padding: 0.25m 0.5m;
+  --button-m-min-width: 28px;
+  --button-m-min-height: 28px;
+  /* Size S */
+  --button-s-gap: 0.5m;
+  --button-s-padding: 0.25m 0.5m;
+  --button-s-min-width: 24px;
+  --button-s-min-height: 24px;
+  /* Size XS */
+  --button-xs-gap: 0.5m;
+  --button-xs-padding: 0.5m 0.5m;
+  --button-xs-min-width: 20px;
+  --button-xs-min-height: 20px;
+  /* Size XXS */
+  --button-xxs-gap: 0.5m;
+  --button-xxs-padding: 0.25m 0.25m;
+  --button-xxs-min-width: 16px;
+  --button-xxs-min-height: 16px;
 }

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

@@ -1,117 +1,39 @@
 :root {
-  {/* new tokens general */}
-  --button-xxl-shape-rounded: 6px;
-  --button-xl-shape-rounded: 6px;
-  --button-l-shape-rounded: 6px;
-  --button-m-shape-rounded: 6px;
-  --button-s-shape-rounded: 6px;
-  --button-xs-shape-rounded: 6px;
-  --button-xxs-shape-rounded: 6px;
-  
-  --button-with-icon-xxl-gap: 4px;
-  --button-with-icon-xl-gap: 4px;
-  --button-with-icon-l-gap: 4px;
-  --button-with-icon-m-gap: 4px;
-  --button-with-icon-s-gap: 4px;
-  --button-with-icon-xs-gap: 4px;
-  --button-with-icon-xxs-gap: 4px;
-
-  {/* filled paddings with sizes */}
-  --button-with-icon-filled-xxl-padding: 16px;
-  --button-with-icon-filled-xl-padding: 8px 12px;
-  --button-with-icon-filled-l-padding: 4px 8px;
-  --button-with-icon-filled-m-padding: 6px 8px;
-  --button-with-icon-filled-s-padding: 4px;
-  --button-with-icon-filled-xs-padding: 2px 4px;
-  --button-with-icon-filled-xxs-padding: 1px 4px;
-
-  --button-label-filled-xxl-padding: 16px;
-  --button-label-filled-xl-padding: 8px 12px;
-  --button-label-filled-l-padding: 4px 8px;
-  --button-label-filled-m-padding: 2px 8px;
-  --button-label-filled-s-padding: 0px 4px;
-  --button-label-filled-xs-padding: 0px 4px;
-  --button-label-filled-xxs-padding: 0px 4px;
-
-  --button-icon-filled-xxl-padding: 16px;
-  --button-icon-filled-xl-padding: 8px;
-  --button-icon-filled-l-padding: 4px;
-  --button-icon-filled-m-padding: 6px;
-  --button-icon-filled-s-padding: 4px;
-  --button-icon-filled-xs-padding: 2px;
-  --button-icon-filled-xxs-padding: 1px;
-
-  --button-loader-filled-xxl-padding: 28px 50px;
-  --button-loader-filled-xl-padding: 20px 50px;
-  --button-loader-filled-l-padding: 16px 50px;
-  --button-loader-filled-m-padding: 14px 50px;
-  --button-loader-filled-s-padding: 12px 50px;
-  --button-loader-filled-xs-padding: 10px 50px;
-  --button-loader-filled-xxs-padding: 8px 50px;
-
-  {/* outlined paddings with sizes */}
-  --button-with-icon-outlined-xxl-padding: 15px;
-  --button-with-icon-outlined-xl-padding: 7px 11px;
-  --button-with-icon-outlined-l-padding: 3px 7px;
-  --button-with-icon-outlined-m-padding: 5px 7px;
-  --button-with-icon-outlined-s-padding: 3px;
-  --button-with-icon-outlined-xs-padding: 1px 3px;
-  --button-with-icon-outlined-xxs-padding: 0px 3px;
-
-  --button-label-outlined-xxl-padding: 15px;
-  --button-label-outlined-xl-padding: 7px 11px;
-  --button-label-outlined-l-padding: 3px 7px;
-  --button-label-outlined-m-padding: 1px 7px;
-  --button-label-outlined-s-padding: 0px 3px;
-  --button-label-outlined-xs-padding: 0px 3px;
-  --button-label-outlined-xxs-padding: 0px 3px;
-
-  --button-icon-outlined-xxl-padding: 15px;
-  --button-icon-outlined-xl-padding: 7px;
-  --button-icon-outlined-l-padding: 3px;
-  --button-icon-outlined-m-padding: 5px;
-  --button-icon-outlined-s-padding: 3px;
-  --button-icon-outlined-xs-padding: 1px;
-  --button-icon-outlined-xxs-padding: 0px;
-
-  --button-loader-outlined-xxl-padding: 27px 49px;
-  --button-loader-outlined-xl-padding: 19px 49px;
-  --button-loader-outlined-l-padding: 15px 49px;
-  --button-loader-outlined-m-padding: 13px 49px;
-  --button-loader-outlined-s-padding: 11px 49px;
-  --button-loader-outlined-xs-padding: 9px 49px;
-  --button-loader-outlined-xxs-padding: 7px 49px;
-
-  {/* ghost paddings with sizes */}
-  --button-with-icon-ghost-xxl-padding: 16px;
-  --button-with-icon-ghost-xl-padding: 8px 12px;
-  --button-with-icon-ghost-l-padding: 4px 8px;
-  --button-with-icon-ghost-m-padding: 6px 8px;
-  --button-with-icon-ghost-s-padding: 4px;
-  --button-with-icon-ghost-xs-padding: 2px 4px;
-  --button-with-icon-ghost-xxs-padding: 1px 4px;
-
-  --button-label-ghost-xxl-padding: 16px;
-  --button-label-ghost-xl-padding: 8px 12px;
-  --button-label-ghost-l-padding: 4px 8px;
-  --button-label-ghost-m-padding: 2px 8px;
-  --button-label-ghost-s-padding: 0px 4px;
-  --button-label-ghost-xs-padding: 0px 4px;
-  --button-label-ghost-xxs-padding: 0px 4px;
-
-  --button-icon-ghost-xxl-padding: 16px;
-  --button-icon-ghost-xl-padding: 8px;
-  --button-icon-ghost-l-padding: 4px;
-  --button-icon-ghost-m-padding: 6px;
-  --button-icon-ghost-s-padding: 4px;
-  --button-icon-ghost-xs-padding: 2px;
-  --button-icon-ghost-xxs-padding: 1px;
-
-  --button-loader-ghost-xxl-padding: 28px 50px;
-  --button-loader-ghost-xl-padding: 20px 50px;
-  --button-loader-ghost-l-padding: 16px 50px;
-  --button-loader-ghost-m-padding: 14px 50px;
-  --button-loader-ghost-s-padding: 12px 50px;
-  --button-loader-ghost-xs-padding: 10px 50px;
-  --button-loader-ghost-xxs-padding: 8px 50px;
+  /* MainXL */
+  --button-transition: all 0.2s ease 0s;
+  /* Size XXL */
+  --button-xxl-gap: 0.5m;
+  --button-xxl-padding: 2m 2m;
+  --button-xxl-min-width: 56px;
+  --button-xxl-min-height: 56px;
+  /* Size XL */
+  --button-xl-gap: 0.5m;
+  --button-xl-padding: 1m 1m;
+  --button-xl-min-width: 40px;
+  --button-xl-min-height: 40px;
+  /* Size L */
+  --button-l-gap: 0.5m;
+  --button-l-padding: 0.5m 0.5m;
+  --button-l-min-width: 32px;
+  --button-l-min-height: 32px;
+  /* Size M */
+  --button-m-gap: 0.5m;
+  --button-m-padding: 0.25m 0.5m;
+  --button-m-min-width: 28px;
+  --button-m-min-height: 28px;
+  /* Size S */
+  --button-s-gap: 0.5m;
+  --button-s-padding: 0.25m 0.5m;
+  --button-s-min-width: 24px;
+  --button-s-min-height: 24px;
+  /* Size XS */
+  --button-xs-gap: 0.5m;
+  --button-xs-padding: 0.5m 0.5m;
+  --button-xs-min-width: 20px;
+  --button-xs-min-height: 20px;
+  /* Size XXS */
+  --button-xxs-gap: 0.5m;
+  --button-xxs-padding: 0.25m 0.25m;
+  --button-xxs-min-width: 16px;
+  --button-xxs-min-height: 16px;
 }

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

@@ -130,13 +130,13 @@
           );
           background-size: 200%;
           border-radius: 6px;
-          animation: cell-skeleton 3s infinite linear;
+          animation: cellSkeleton 3s infinite linear;
         }
       }
     }
   }
 }
-@keyframes cell-skeleton {
+@keyframes cellSkeleton {
   0% {
     background-position: 200%;
   }

package/dist/css/components/Checkbox/Checkbox.css

@@ -69,18 +69,20 @@
 }
 .checkbox {
   &_checkmark {
-    &_fill{
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_fill {
+      @each $type in accent, primary, secondary, tertiary, surface, success,
+        error {
         &_$(type) {
           &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            @each $color in primary, secondary, tertiary, quaternary, quinary,
+              senary, accent, disabled, hover {
               &-$(color) {
                 & ^^^^^&__input {
                   &:checked {
                     & ~ ^^^^^^^&__state {
                       &-checkmark {
-                        display: block;
                         border-color: var(--color-$(type)-item-$(color));
+                        display: block;
                       }
                     }
                   }
@@ -93,3 +95,7 @@
     }
   }
 }
+:root {
+  --checkbox-column-gap: 12px;
+  --checkbox-row-gap: 4px;
+}

package/dist/css/components/Checkbox/Checkbox.tokens.css

@@ -1,4 +1,4 @@
 :root {
-  --checkbox-column-gap: 8px;
+  --checkbox-column-gap: 12px;
   --checkbox-row-gap: 4px;
 }

package/dist/css/components/Checkmark/Checkmark.css

@@ -3,14 +3,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  &__svg {
+  &__icon {
     width: 100%;
     height: 100%;
-    & .icon__item {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & svg {
+      transform: scale(0.65);
     }
   }
 }
@@ -18,10 +19,10 @@
   &_size {
     @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
-        min-width: var(--checkmark-width-size-$(size));
-        min-height: var(--checkmark-height-size-$(size));
-        max-width: var(--checkmark-width-size-$(size));
-        max-height: var(--checkmark-height-size-$(size));
+        min-width: var(--checkmark-width-$(size));
+        min-height: var(--checkmark-height-$(size));
+        max-width: var(--checkmark-width-$(size));
+        max-height: var(--checkmark-height-$(size));
       }
     }
   }