@itcase/ui 1.8.27 → 1.8.30

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

@@ -0,0 +1,13 @@
+.notification__item {
+  &_float {
+    width: 100%;
+    border-radius: var(--notification-item-set-float-border-radius);
+    @mixin elevation-8;
+    ^^&-wrapper {
+      padding: var(--notification-item-set-float-padding);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+.notification__item {
+  &_toast {
+    width: 100%;
+    background: var(--color-surface-fill-primary);
+    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);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+.notification__item {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: notificationSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+
+@keyframes notificationSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}

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

@@ -1,7 +1,7 @@
 .notification__item {
   &_status {
     &_success {
-      background: var(--color-success-fill-primary);
+      /* background: var(--color-success-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-success-text-secondary);
@@ -9,10 +9,10 @@
         ^^^&-text {
           color: var(--color-success-text-secondary);
         }
-      }
+      } */
     }
     &_error {
-      background: var(--color-error-fill-primary);
+      /* background: var(--color-error-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-error-text-secondary);
@@ -20,10 +20,10 @@
         ^^^&-text {
           color: var(--color-error-text-secondary);
         }
-      }
+      } */
     }
     &_warning {
-      background: var(--color-primary-fill-primary);
+      /* background: var(--color-primary-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-primary-text-primary);
@@ -31,10 +31,10 @@
         ^^^&-text {
           color: var(--color-primary-text-primary);
         }
-      }
+      } */
     }
     &_info {
-      background: var(--color-info-fill-primary);
+      /* background: var(--color-info-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-info-text-primary);
@@ -42,7 +42,7 @@
         ^^^&-text {
           color: var(--color-info-text-primary);
         }
-      }
+      } */
     }
   }
 }

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

@@ -36,11 +36,6 @@
     opacity: 0%;
   }
 }
-.overlay {
-  &&_type_click {
-    opacity: 0%;
-  }
-}
 :root {
   --overlay-fill: hsla(0, 0%, 0%, 0.4);
   --overlay-blur: 20px;

package/dist/css/components/Radio/Radio.css

@@ -3,11 +3,6 @@
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
   column-gap: 4px;
-  &:hover {
-    ^&__state {
-      border-color: var(--radio-state-border-hover);
-    }
-  }
   &__item {
     min-width: 16px;
     min-height: 16px;
@@ -35,23 +30,16 @@
       &:disabled + .radio__state {
         border-color: transparent !important;
       }
+      &:checked {
+        & ~ ^^^&__state-checkmark {
+          display: block;
+        }
+      }
     }
     ^&__state {
       display: flex;
       flex: 1;
       z-index: 1;
-      &_shape {
-        &_rounded {
-          border-radius: var(--radio-shape-rounded, 4px);
-          position: relative;
-          overflow: hidden;
-        }
-        &_circular {
-          border-radius: 50%;
-          position: relative;
-          overflow: hidden;
-        }
-      }
     }
     ^&__state-checkmark {
       width: calc(100% - 6px);
@@ -66,52 +54,7 @@
     }
   }
 }
-.radio {
-  &_shape {
-    &_rounded {
-      ^^&__item {
-        border-radius: var(--radio-item-shape-rounded);
-        position: relative;
-        overflow: hidden;
-      }
-    }
-    &_circular {
-      ^^&__item {
-        border-radius: 50%;
-        position: relative;
-        overflow: hidden;
-      }
-    }
-  }
-}
-.radio {
-  &_checkmark {
-    &_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 {
-              &-$(color) {
-                & ^^^^^&__input {
-                  &:checked {
-                    & ~ ^^^^^^^&__state {
-                      &-checkmark {
-                        background: var(--color-$(type)-item-$(color));
-                        display: block;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+
 :root {
   --radio-state-border-hover: var(--color-surface-border-tertiary);
   --radio-success-border: var(--color-surface-border-tertiary);

package/dist/css/components/Response/Response.css

@@ -31,3 +31,27 @@
     gap: 3m;
   }
 }
+.response {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: badgeSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes responseSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}

package/dist/css/components/Search/Search.css

@@ -99,6 +99,30 @@
     }
   }
 }
+.search-input {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: searchInput 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes searchInput {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .search-result {
   width: 100%;
   &__wrapper {
@@ -114,29 +138,26 @@
   }
 }
 :root {
-  --search-input-xxl-padding: 8px 7px;
-  --search-input-xxl-gap: 6px;
+  --search-input-xxl-padding: 16px 12px;
+  --search-input-xxl-gap: 4px;
 
-  --search-input-xl-padding: 8px 7px;
-  --search-input-xl-gap: 6px;
+  --search-input-xl-padding: 12px;
+  --search-input-xl-gap: 4px;
 
-  --search-input-l-padding: 2px 7px;
-  --search-input-l-gap: 6px;
+  --search-input-l-padding: 8px;
+  --search-input-l-gap: 4px;
 
-  --search-input-m-padding: 2px 7px;
-  --search-input-m-gap: 6px;
+  --search-input-m-padding: 6px 8px;
+  --search-input-m-gap: 4px;
 
-  --search-input-s-padding: 2px 7px;
-  --search-input-s-gap: 6px;
+  --search-input-s-padding: 2px 8px;
+  --search-input-s-gap: 4px;
   --search-input-s-min-height: 32px;
 
-  --search-input-xs-padding: 2px 7px;
-  --search-input-xs-gap: 6px;
+  --search-input-xs-padding: 0 4px;
+  --search-input-xs-gap: 4px;
   --search-input-xs-min-height: 24px;
 
-  --search-input-xxs-padding: 2px 7px;
-  --search-input-xxs-gap: 6px;
-
   --search-shape-rounded: 8px;
   --search-input-shape-rounded: 0;
 }

package/dist/css/components/Search/css/search-input/search-input_skeleton.css

@@ -0,0 +1,25 @@
+.search-input {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: searchInput 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+
+@keyframes searchInput {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}

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

@@ -31,10 +31,10 @@
     appearance: none;
     &:checked {
       & + .switch__bg {
-        background: var(--color-accent-fill-primary);
+        /* background: var(--color-accent-fill-primary); */
       }
       & ~ .switch__toggle {
-        background: var(--color-accent-item-primary);
+        /* background: var(--color-accent-item-primary); */
         margin: 0 0 0 -3px;
         left: 100%;
         transform: translate(-100%, -50%);
@@ -47,15 +47,16 @@
     }
   }
   &__bg {
+    /* background: var(--color-surface-tertiary); */
     width: 100%;
-    background: var(--color-surface-tertiary);
     flex: 1;
     transition: all 0.25s;
   }
   &__toggle {
     height: calc(100% - 6px);
     aspect-ratio: 1/1;
-    background: #fff;
+
+    /* background: #fff; */
     border-radius: 50%;
     position: absolute;
     box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.2);
@@ -107,20 +108,12 @@
   }
 }
 :root {
-  --switch-size-normal-width: 52px;
-  --switch-size-normal-height: 32px;
-
-  --switch-size-compact-width: 40px;
-  --switch-size-compact-height: 24px;
-
-  --switch-size-xl-width: 40px;
-  --switch-size-xl-height: 24px;
-
-  --switch-size-l-width: 40px;
-  --switch-size-l-height: 24px;
+  --switch-size-l-width: 48px;
+  --switch-size-l-height: 32px;
 
   --switch-size-m-width: 40px;
   --switch-size-m-height: 24px;
-  --switch-size-s-width: 40px;
-  --switch-size-s-height: 24px;
+
+  --switch-size-s-width: 28px;
+  --switch-size-s-height: 16px;
 }

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

@@ -51,31 +51,64 @@
           padding: var(--tab-size-$(size)-padding);
           display: flex;
           align-items: center;
+          min-height: var(--tab-size-$(size)-min-height);
           gap: var(--tab-size-$(size)-gap);
         }
       }
     }
   }
 }
+.tab {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: tabSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes tabSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
-  --tab-size-xxs-padding: 0px;
-  --tab-size-xxs-gap: 4px;
+  --tab-size-xxl-padding: 19px;
+  --tab-size-xxl-gap: 4px;
+  --tab-size-xxl-min-height: 56px;
 
-  --tab-size-xs-padding: 3px;
-  --tab-size-xs-gap: 4px;
+  --tab-size-xl-padding: 10px;
+  --tab-size-xl-gap: 4px;
+  --tab-size-xl-min-height: 40px;
 
-  --tab-size-s-padding: 5px;
-  --tab-size-s-gap: 4px;
+  --tab-size-l-padding: 11px;
+  --tab-size-l-gap: 4px;
+  --tab-size-l-min-height: 32px;
 
   --tab-size-m-padding: 7px;
   --tab-size-m-gap: 4px;
+  --tab-size-m-min-height: 28px;
 
-  --tab-size-l-padding: 11px;
-  --tab-size-l-gap: 4px;
+  --tab-size-s-padding: 5px;
+  --tab-size-s-gap: 4px;
+  --tab-size-s-min-height: 24px;
 
-  --tab-size-xl-padding: 15px;
-  --tab-size-xl-gap: 4px;
+  --tab-size-xs-padding: 3px;
+  --tab-size-xs-gap: 4px;
+  --tab-size-xs-min-height: 20px;
+
+  --tab-size-xxs-padding: 0px;
+  --tab-size-xxs-gap: 4px;
+  --tab-size-xxs-min-height: 16px;
 
-  --tab-size-xxl-padding: 19px;
-  --tab-size-xxl-gap: 4px;
 }

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

@@ -5,9 +5,9 @@
     color: transparent;
     background-image: linear-gradient(
       90deg,
-      var(--color-surface-secondary),
-      var(--color-surface-tertiary),
-      var(--color-surface-secondary)
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
     );
     background-size: 200%;
     border-radius: 6px;

package/dist/css/components/Tile/Tile.css

@@ -1,13 +1,20 @@
 .tile {
   &__wrapper {
     position: relative;
-    flex: var(--tile-wrapper-flex);
-    & > .group:first-of-type {
-      flex: var(--tile-wrapper-group-flex);
-    }
   }
-  &__title {
-    margin-right: var(--tile-title-margin-right);
+  &__header {
+    display: flex;
+    flex-direction: row;
+    &-inner {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+    &-actions {
+      gap: 8px;
+      display: flex;
+      align-items: flex-start;
+    }
   }
 }
 .tile {
@@ -45,23 +52,58 @@
     }
   }
 }
+.tile {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: tileSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes tileSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
-  --tile-size-normal-padding: 24px;
-  --tile-size-normal-gap: 24px;
-  --tile-size-normal-min-width: 320px;
-
-  --tile-wrapper-flex: 1 1;
-  --tile-wrapper-group-flex: 1;
-  --tile-title-margin-right: 40px;
   --tile-shape-rounded: 0;
-  --tile-type-icon: 0;
 
-  /* Size */
-  @each $size, $width, $padding, $gap in (xl, l, m, s, xs, xxs),
-    (400px, 320px, 240px, 172px, 96px, 80px), (24px, 24px, 16px, 8px, 8px, 4px),
-    (24px, 24px, 16px, 8px, 8px, 4px) {
-    --tile-size-$(size)-min-width: $width;
-    --tile-size-$(size)-padding: $padding;
-    --tile-size-$(size)-gap: $gap;
-  }
+  --tile-size-xxl-min-width: 400px;
+  --tile-size-xxl-padding: 24px;
+  --tile-size-xxl-gap: 24px;
+
+  --tile-size-xl-min-width: 400px;
+  --tile-size-xl-padding: 24px;
+  --tile-size-xl-gap: 24px;
+
+  --tile-size-l-min-width: 320px;
+  --tile-size-l-padding: 24px;
+  --tile-size-l-gap: 24px;
+
+  --tile-size-m-min-width: 240px;
+  --tile-size-m-padding: 16px;
+  --tile-size-m-gap: 16px;
+
+  --tile-size-s-min-width: 172px;
+  --tile-size-s-padding: 8px;
+  --tile-size-s-gap: 8px;
+
+  --tile-size-xs-min-width: 96px;
+  --tile-size-xs-padding: 8px;
+  --tile-size-xs-gap: 8px;
+
+  --tile-size-xxs-min-width: 80px;
+  --tile-size-xxs-padding: 4px;
+  --tile-size-xxs-gap: 4px;
 }

package/dist/css/components/Title/Title.css

@@ -4,17 +4,19 @@
   }
 }
 .title {
-  &_skeleton {
-    color: transparent;
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: titleSkeleton 3s infinite linear !important;
     background-image: linear-gradient(
       90deg,
-      var(--color-surface-secondary),
-      var(--color-surface-tertiary),
-      var(--color-surface-secondary)
-    );
-    background-size: 200%;
-    border-radius: 6px;
-    animation: titleSkeleton 3s infinite linear;
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
   }
 }
 @keyframes titleSkeleton {
@@ -29,39 +31,47 @@
 .title {
   &_size {
     @each $size in h1, h2, h3, h4, h5, h6 {
-      @each $gap in 12, 12, 12, 12, 12, 12 {
-        &_$(size) {
-          padding: 0;
-          margin: 0;
-          @mixin $(size);
-          ^^&__wrapper {
-            gap: $(gap)px;
-          }
+      &_$(size) {
+        padding: 0;
+        margin: 0;
+        display: flex;
+        @mixin $(size);
+        ^^&__wrapper {
+          gap: var(--title-size-$(size)-gap);
         }
       }
     }
   }
 }
-.title {
-  &&_type {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &_$(type) {
-        color: var(--color-$(type)-text-$(type));
-      }
-    }
-  }
-}
 .title {
   &_direction {
     &_horizontal {
       display: flex;
       flex-direction: row;
       align-items: center;
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
     }
     &_vertical {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
     }
   }
 }
+:root {
+  --title-size-h1-gap: 8px;
+  --title-size-h2-gap: 8px;
+  --title-size-h3-gap: 8px;
+  --title-size-h4-gap: 8px;
+  --title-size-h5-gap: 8px;
+  --title-size-h6-gap: 8px;
+}