@itcase/ui 1.8.19 → 1.8.22

package/dist/css/components/AvatarStack/AvatarStack.css

@@ -0,0 +1,54 @@
+div.avatar {
+  &-stack {
+    margin: 0 0 0 4px;
+    display: flex;
+    align-items: center;
+    &__item {
+      margin: 0 -4px;
+      border-radius: 100px;
+      position: relative;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      &:hover {
+        z-index: 10;
+        transition: all 0.3s ease;
+      }
+      &-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+.avatar-stack {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      &-reverse {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+      }
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      &-reverse {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+      }
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+        align-items: flex-start;
+      }
+    }
+  }
+}

package/dist/css/components/Code/Code.css

@@ -19,13 +19,12 @@
 }
 .code__input {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
+    @each $size in l, m {
       &_$(size) {
         min-width: var(--code-input-size-$(size)-width);
         min-height: var(--code-input-size-$(size)-height);
         max-width: var(--code-input-size-$(size)-width);
         max-height: var(--code-input-size-$(size)-height);
-        padding: var(--code-input-size-$(size)-padding);
       }
     }
   }
@@ -50,12 +49,10 @@
 }
 :root {
   --code-input-shape-rounded: 0;
-  @each $size, $width, $height, $padding, $gap in (xxl, xl, l, m, s, xs, xxs),
-    (0, 0, 0, 0, 0, 0, 0), (0, 0, 0, 0, 0, 0, 0), (0, 0, 0, 0, 0, 0, 0),
-    (8, 8, 8, 8, 8, 8, 8) {
+  @each $size, $width, $height, $padding, $gap in (l, m), (56px, 48px),
+    (56px, 48px), (8px, 8px) {
     --code-input-size-$(size)-width: $width;
     --code-input-size-$(size)-height: $height;
-    --code-input-size-$(size)-padding: $padding;
     --code-size-$(size)-gap: $gap;
   }
 }

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

@@ -117,15 +117,139 @@
     stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
     sonic-silver {
     &_$(palette) {
+      &:hover {
+        & svg {
+          stroke: none;
+          fill: var(--color-$(type)-fill-$(color));
+        }
+      }
       &-item {
+        &:hover {
+          & svg {
+            stroke: none;
+            fill: var(--color-$(type)-item-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.icon_fill {
+  &_active {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      &_$(type) {
+        &-item {
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
+            &-$(color) {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+        @each $color in primary, secondary, tertiary, quaternary, quinary,
+          senary, accent, disabled, hover, inverse {
+          &-$(color) {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-fill-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &-item {
+          & svg {
+            stroke: none;
+            fill: var(--color-palette-$(palette));
+          }
+        }
         & svg {
           stroke: none;
-          fill: var(--color-$(type)-item-$(color));
+          fill: var(--color-palette-$(palette));
         }
       }
-      & svg {
-        stroke: none;
-        fill: var(--color-$(type)-fill-$(color));
+    }
+  }
+}
+.icon_fill {
+  &_active {
+    &_hover {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover, inverse {
+        &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, quinary,
+              senary, accent, disabled, hover, inverse {
+              &-$(color) {
+                &:hover {
+                  & svg {
+                    stroke: none;
+                    fill: var(--color-$(type)-item-$(color));
+                  }
+                }
+              }
+            }
+          }
+          @each $color in primary, secondary, tertiary, quaternary, quinary,
+            senary, accent, disabled, hover, inverse {
+            &-$(color) {
+              &:hover {
+                & svg {
+                  stroke: none;
+                  fill: var(--color-$(type)-fill-$(color));
+                }
+              }
+            }
+          }
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+        clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+        rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+        canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+        spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+        surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+        denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+        lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+        storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+        alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+        gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+        alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            & svg {
+              stroke: none;
+              fill: var(--color-palette-$(palette));
+            }
+          }
+          &-item {
+            &:hover {
+              & svg {
+                stroke: none;
+                fill: var(--color-palette-$(palette));
+              }
+            }
+          }
+        }
       }
     }
   }

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

@@ -1,6 +1,7 @@
 .label {
   position: relative;
   display: inline-flex;
+  align-items: center;
   &__inner {
     width: 100%;
     font-size: 0;
@@ -8,7 +9,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 4px;
   }
 }
 .label {
@@ -53,9 +53,8 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        ^^&__inner {
-          padding: var(--label-size-$(size)-padding);
-        }
+        padding: var(--label-size-$(size)-padding);
+        gap: var(--label-size-$(size)-gap);
       }
     }
   }
@@ -91,6 +90,7 @@ div.label {
   --label-size-xxs-shape-rounded: 12px;
 
   --label-size-xxl-padding: 10px 10px;
+  --label-size-xxl-gap: 8px;
   --label-size-xl-padding: 7px 8px;
   --label-size-l-padding: 4px 6px;
   --label-size-m-padding: 2px 8px;

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

@@ -1,9 +1,15 @@
 .menu-item {
-  &__label {
+  align-items: center;
+  &__wrapper {
+    width: 100%;
     display: flex;
     align-items: center;
-    gap: 4px;
     align-content: center;
+    ^&__label {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+    }
   }
 }
 
@@ -11,55 +17,24 @@
   &_direction {
     &_horizontal {
       display: flex;
-      ^^&__label {
-        width: 100%;
-      }
     }
     &_vertical {
       display: flex;
-      ^^&__label {
-        width: 100%;
-      }
     }
   }
 }
 
 .menu-item {
-  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+  @each $val in flex-start, flex-end, center, space-between, space-around,
+    space-evenly {
     &_justify-content_$(val) {
-      & > a {
+      ^&__wrapper {
         justify-content: $(val);
       }
     }
   }
 }
 
-.menu-item {
-  &_set {
-    &_filter {
-      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);
-      }
-      &_active {
-        & span {
-          color: var(--menu-item-set-filter-active-color, initial);
-        }
-      }
-    }
-  }
-}
-
-.menu-item {
-  &_set {
-    &_subitem {
-      transform: translate(var(--menu-item-set-subitem-padding-left));
-    }
-  }
-}
-
 .menu-item {
   &_shape {
     &_rounded {
@@ -75,7 +50,11 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        padding: var(--menu-item-size-$(size)-padding);
+        ^^&__wrapper {
+          min-height: var(--menu-item-size-$(size)-min-height);
+          padding: var(--menu-item-size-$(size)-padding);
+          gap: var(--menu-item-size-$(size)-gap);
+        }
       }
     }
   }
@@ -90,11 +69,8 @@
   --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-size-m-min-height: 32px;
+  --menu-item-size-m-gap: 8px;
 
-  --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);
+  --menu-item-shape-rounded: 20px;
 }

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

@@ -11,12 +11,15 @@
     justify-content: center;
     align-items: center;
     gap: 3m;
+    &-inner {
+      flex-direction: column;
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
   }
   &__desc {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     gap: 1m;
   }
   &__button {

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

@@ -1,8 +1,14 @@
 .tab {
-  &__label {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  &__wrapper {
     display: flex;
-    place-content: center center;
-    align-items: center;
+    ^&__label {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
 .tab-group {
@@ -10,29 +16,12 @@
   display: flex;
   flex-flow: row wrap;
   align-items: stretch;
-  & .tab {
+  &__wrapper {
     display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-end;
-    &__wrapper {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-    }
-    &__label {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-    }
-  }
-}
-div.tab-reset {
-  & .tab__wrapper {
-    padding: 0;
-    gap: 0;
-    margin: 0;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
   }
 }
 .tab {
@@ -69,12 +58,6 @@ div.tab-reset {
   }
 }
 :root {
-  --tab-size-normal-padding: 12px;
-  --tab-size-normal-gap: 4px;
-
-  --tab-size-compact-padding: 12px;
-  --tab-size-compact-gap: 4px;
-
   --tab-size-xxs-padding: 0px;
   --tab-size-xxs-gap: 4px;
 

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

@@ -50,14 +50,5 @@
     }
   }
 }
-.text {
-  &&_type {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &_$(type) {
-        color: var(--color-$(type)-text-$(type));
-      }
-    }
-  }
-}
 :root {
 }

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

@@ -22,7 +22,7 @@
 }
 .tile {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs, normal, compact {
+    @each $size in xl, l, m, s, xs, xxs {
       &_$(size) {
         min-width: var(--tile-size-$(size)-min-width);
         padding: var(--tile-size-$(size)-padding);
@@ -57,9 +57,11 @@
   --tile-type-icon: 0;
 
   /* Size */
-  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
-    --tile-size-$(size)-min-width: $value;
-    --tile-size-$(size)-padding: $value;
-    --tile-size-$(size)-gap: $value;
+  @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;
   }
 }

package/dist/css/styles/border-color/border-color_hover.css

@@ -5,17 +5,15 @@
       @each $color in primary, secondary, tertiary, quaternary, accent,
         disabled, hover, inverse {
         &_$(type) {
-          &_$(type) {
-            &-border {
-              &-$(color) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                border-color: var(--color-$(type)-border-$(color));
+              }
+              &-hover {
                 &:hover {
                   border-color: var(--color-$(type)-border-$(color));
                 }
-                &-hover {
-                  &:hover {
-                    border-color: var(--color-$(type)-border-$(color));
-                  }
-                }
               }
             }
           }

package/dist/css/styles/fill/fill_active.css

@@ -1,7 +1,8 @@
 .fill {
   &_active {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      error, success, danger, warning, info, danger, gradient, disabled, hover,
+      inverse {
       @each $color in primary, secondary, tertiary, quaternary, accent,
         disabled, hover, inverse {
         &_$(type) {
@@ -13,16 +14,25 @@
           &-$(color) {
             background: var(--color-$(type)-fill-$(color));
           }
-
-          /*
-          &-primary {
-            &-active {
-              background: var(--color-$(type)-fill--primary-active);
-            }
-          }
-          */
         }
       }
     }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        background: var(--color-palette-$(palette));
+      }
+    }
   }
 }

package/dist/css/styles/fill/fill_active_hover.css

@@ -74,6 +74,25 @@
           /* } */
         }
       }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
     }
   }
 }

package/dist/css/styles/fill/fill_hover.css

@@ -60,5 +60,24 @@
         /* } */
       }
     }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          background: var(--color-palette-$(palette));
+        }
+      }
+    }
   }
 }

package/dist/css/styles/svg-color/svg_fill.css

@@ -11,21 +11,21 @@
                 stroke: none;
                 fill: var(--color-$(type)-item-$(color));
               }
-              & path,
+              /* & path,
               & circle {
                 fill: var(--color-$(type)-item-$(color));
-              }
+              } */
             }
           }
           &-$(color) {
             & svg {
               stroke: none;
-              fill: var(--color-$(type)-$(color));
+              fill: var(--color-$(type)-fill-$(color));
             }
-            & path,
+            /* & path,
             & circle {
               fill: var(--color-$(type)-item-$(color));
-            }
+            } */
           }
         }
       }

package/dist/css/styles/text-color/text-color_active.css

@@ -15,6 +15,23 @@
           }
         }
       }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          color: var(--color-palette-$(palette));
+        }
+      }
     }
   }
 }