@itcase/ui 1.8.0 → 1.8.3

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

@@ -1,18 +1,19 @@
 .text {
 }
 .text {
-  &&&&_mode {
-    &_skeleton {
-      color: transparent;
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: textSkeleton 3s infinite linear;
+  &&_skeleton {
+    color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    border-radius: 6px;
+    animation: textSkeleton 3s infinite linear;
+    & * {
+      opacity: 0%;
     }
   }
 }
@@ -58,3 +59,5 @@
     }
   }
 }
+:root {
+}

package/dist/css/components/Textarea/Textarea.css

@@ -1,39 +1,45 @@
 .textarea {
-  width: 100%;
-  min-width: 100%;
-  min-height: var(--textarea-min-height, 160px);
-  max-height: var(--textarea-max-height, 160px);
-  padding: var(--textarea-padding, 16px 16px);
-  padding: 0;
-  margin: 0;
-  border: none;
-  z-index: 1;
-  outline: 0;
-  resize: none;
-  appearance: none;
-  &:read-only {
-    color: var(--color-surface-text-tertiary);
+  &__input {
+    width: 100%;
+    min-width: 100%;
+    min-height: var(--textarea-min-height, 160px);
+    max-height: var(--textarea-max-height, 160px);
+    padding: var(--textarea-padding);
+    padding: 0;
+    margin: 0;
+    border: none;
+    z-index: 1;
+    outline: 0;
+    resize: none;
+    appearance: none;
+    &:read-only {
+      color: var(--color-surface-text-tertiary);
+    }
   }
 }
 .textarea {
   &_shape {
-    &_rounded {
-      border-radius: var(--textarea-shape-rounded);
-      position: relative;
-    }
-    &_underline {
-      border-left: none !important;
-      border-top: none !important;
-      border-right: none !important;
-      position: relative;
+    &^&__input {
+      &_rounded {
+        border-radius: var(--textarea-shape-rounded);
+        position: relative;
+      }
+      &_underline {
+        border-left: none !important;
+        border-top: none !important;
+        border-right: none !important;
+        position: relative;
+      }
     }
   }
 }
 .textarea {
   &&_size {
-    @each $sizeValue in xxl, xl, l, m, s, xs, xxs {
-      &_$(sizeValue) {
-        padding: var(--textarea-size-$(sizeValue)-padding);
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        ^^&__input {
+          padding: var(--textarea-size-$(size)-padding);
+        }
       }
     }
   }
@@ -44,4 +50,10 @@
   --textarea-min-height: 80px;
   --textarea-max-height: 80px;
   --textarea-success-border: var(--color-surface-border-tertiary);
+
+  /* Size */
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs),
+    (17px 25px, 13px 20px, 9px 15px, 7px 12px, 5px 10px, 5px 10px, 5px 10px) {
+    --textarea-size-$(size)-padding: $value;
+  }
 }

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

@@ -53,4 +53,13 @@
   --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, $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;
+  }
 }

package/dist/css/components/Tooltip/Tooltip.css

@@ -164,4 +164,11 @@
   --tooltip-arrow-radius: 2px;
 
   --tooltip-arrow-color: var(--color-surface-primary);
+  --tooltip-shape-rounded-default: 0;
+
+  /* Size */
+  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
+    --tooltip-size-$(size)-padding: $value;
+    --tooltip-size-$(size)-gap: $value;
+  }
 }

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

@@ -1,10 +1,10 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error,
-    success, warning, info, danger, gradient {
-    &_$(type) {
-      &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
-          disabled, hover, inverse {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-border {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));

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

@@ -1,9 +1,11 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
-    &_focus {
-      &_$(type) {
-        &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover {
+  &_focus {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-border {
             &-$(color) {
               &:focus {
                 outline: 0;

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

@@ -1,17 +1,21 @@
 .border-color {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
-            &-$(color) {
-              &:hover {
-                border-color: var(--color-$(type)-border-$(color));
-              }
-              &-hover {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &_$(type) {
+            &-border {
+              &-$(color) {
                 &:hover {
                   border-color: var(--color-$(type)-border-$(color));
                 }
+                &-hover {
+                  &:hover {
+                    border-color: var(--color-$(type)-border-$(color));
+                  }
+                }
               }
             }
           }

package/dist/css/styles/border-width/border-width.css

@@ -1,6 +1,7 @@
 .border-width {
-  @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+  @each $width in 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
     &_$(width) {
+      /* stylelint-disable-next-line prettier/prettier */
       border-width: $(width)px;
       border-style: solid;
     }

package/dist/css/styles/caret-color/caret-color.css

@@ -1,8 +1,10 @@
 .caret-color {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-item {
           &-$(color) {
             caret-color: var(--color-$(type)-item-$(color));
           }

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

@@ -1,47 +1,32 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-    senary, surface, error, success, warning, info, danger, gradient {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+      &_$(type) {
+        &-item {
           &-$(color) {
             background: var(--color-$(type)-item-$(color));
-            @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65,
-              75, 80, 85, 90, 95 {
-              &$(alpha) {
+
+            /* &$(alpha) {
                 background: var(--color-$(type)-item-$(color)-$(alpha));
-              }
-            }
+              } */
           }
         }
-      }
-      @each $color in primary, secondary, tertiary, quaternary, quinary, senary,
-        accent, disabled, hover {
         &-$(color) {
-          background: var(--color-$(type)-$(color));
-          @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75,
-            80, 85, 90, 95 {
-            &$(alpha) {
+          background: var(--color-$(type)-fill-$(color));
+
+          /* &$(alpha) {
               background: var(--color-$(type)-$(color)-$(alpha));
-            }
-          }
-        }
-      }
-    }
-  }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-    senary, surface, error, success, warning, info, danger, gradient {
-    &_$(type) {
-      &-primary {
-        background: var(--color-$(type)-primary);
-        @each $opacity in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75,
-          80, 85, 90, 95 {
-          &$(alpha) {
-            background: var(--color-$(type)-primary$(opacity));
-          }
+            } */
         }
       }
+
+      /* } */
     }
   }
 }

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

@@ -1,23 +1,26 @@
 .fill {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, disabled, gradient {
-      &_$(type) {
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, active {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              background: var(--color-$(type)-item-$(color));
+            }
+          }
           &-$(color) {
-            background: var(--color-$(type)-$(color));
+            background: var(--color-$(type)-fill-$(color));
           }
-        }
-      }
-    }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-primary {
-          &-active {
-            background: var(--color-$(type)-primary-active);
+
+          /*
+          &-primary {
+            &-active {
+              background: var(--color-$(type)-fill--primary-active);
+            }
           }
+          */
         }
       }
     }

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

@@ -1,31 +1,77 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-        senary, surface, error, success, warning, info, danger, gradient {
-        &_$(type) {
-          @each $color in primary, secondary, tertiary, quaternary {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover,
+        inverse {
+        @each $color in primary, secondary, tertiary, quaternary, accent,
+          disabled, hover, inverse {
+          /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+          &_$(type) {
+            &-item {
+              &-$(color) {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color));
+                }
+
+                /* &$(alpha) {
+                    &:hover {
+                      background: var(--color-$(type)-item-$(color)-$(alpha));
+                    }
+                  } */
+                &-hover {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-hover);
+                  }
+
+                  /* &$(alpha) {
+                      &:hover {
+                        background: var(
+                          --color-$(type)-item-$(color)-$(alpha)-hover
+                        );
+                      }
+                    } */
+                  &-active {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-active-hover
+                      );
+                    }
+
+                    /* &$(alpha) {
+                        &:hover {
+                          background: var(
+                            --color-$(type)-item-$(color)-$(alpha)-active-hover
+                          );
+                        }
+                      } */
+                  }
+                }
+              }
+            }
             &-$(color) {
               &:hover {
-                background: var(--color-$(type)-$(color));
+                background: var(--color-$(type)-fill-$(color));
               }
               &-hover {
                 &:hover {
-                  background: var(--color-$(type)-$(color)-hover);
+                  background: var(--color-$(type)-fill-$(color)-hover);
                 }
                 &-active {
                   &:hover {
-                    background: var(--color-$(type)-$(color)-active-hover);
+                    background: var(--color-$(type)-fill-$(color)-active-hover);
                   }
                 }
               }
               &-active {
                 &:hover {
-                  background: var(--color-$(type)-$(color)-active);
+                  background: var(--color-$(type)-fill-$(color)-active);
                 }
               }
             }
           }
+
+          /* } */
         }
       }
     }

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

@@ -1,36 +1,63 @@
 .fill {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+        &_$(type) {
+          &-item {
+            &-$(color) {
+              &:hover {
+                background: var(--color-$(type)-item-$(color));
+              }
+
+              /* &$(alpha) {
+                  &:hover {
+                    background: var(--color-$(type)-item-$(color)-$(alpha));
+                  }
+                } */
+              &-hover {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-hover);
+                }
+
+                /* &$(alpha) {
+                    &:hover {
+                      background: var(
+                        --color-$(type)-item-$(color)-$(alpha)-hover
+                      );
+                    }
+                  } */
+              }
+            }
+          }
           &-$(color) {
             &:hover {
-              background: var(--color-$(type)-$(color));
+              background: var(--color-$(type)-fill-$(color));
             }
             &-hover {
               &:hover {
-                background: var(--color-$(type)-$(color)-hover);
+                background: var(--color-$(type)-fill-$(color)-hover);
               }
             }
           }
-        }
-      }
-    }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, error, success, warning, info, danger, gradient {
-      &_$(type) {
-        &-primary {
-          &:hover {
-            background: var(--color-$(type)-primary);
-          }
-          &-hover {
+
+          /*
+          &-primary {
             &:hover {
-              background: var(--color-$(type)-primary-hover);
+              background: var(--color-$(type)-fill-primary);
+            }
+            &-hover {
+              &:hover {
+                background: var(--color-$(type)-fill-primary-hover);
+              }
             }
           }
+          */
         }
+
+        /* } */
       }
     }
   }

package/dist/css/styles/opacity/opacity.css

@@ -1,7 +1,8 @@
 .opacity {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100 {
+  @each $val in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85,
+    90, 95 {
     &_$(val) {
-      opacity: $(val)%;
+      opacity: $(val) %;
     }
   }
 }

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

@@ -1,8 +1,10 @@
 .placeholder-text-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-text {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-text {
           &-$(color) {
             &::placeholder {
               color: var(--color-$(type)-text-$(color));

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

@@ -1,11 +1,11 @@
 .svg {
   &_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, inverse {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               & svg {
                 stroke: none;
@@ -17,9 +17,6 @@
               }
             }
           }
-        }
-        @each $color in primary, secondary, tertiary, quaternary, quinary,
-          senary, accent, disabled, hover, inverse {
           &-$(color) {
             & svg {
               stroke: none;

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

@@ -1,9 +1,11 @@
 .svg {
   &_fill_hover {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error {
-      &_$(type) {
-        &-item {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, inverse  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               &:hover {
                 & svg {

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

@@ -1,10 +1,11 @@
 .svg {
   &_path_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, inverse {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-item {
             &-$(color) {
               & path {
                 fill: var(--color-$(type)-item-$(color));

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

@@ -1,11 +1,11 @@
 .text {
   &&-color {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary,
-      senary, surface, success, error, info, warning, danger {
-      &_$(type) {
-        &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary,
-            senary, accent, disabled, hover, inverse {
+    @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+      error, success, warning, info, danger, gradient, disabled, hover, inverse {
+      @each $color in primary, secondary, tertiary, quaternary, accent,
+        disabled, hover, inverse {
+        &_$(type) {
+          &-text {
             &-$(color) {
               color: var(--color-$(type)-text-$(color));
             }

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

@@ -1,12 +1,13 @@
 .text {
   &&-color {
     &_active {
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface,
-        success, error, info, warning {
-        &_$(type) {
-          &-text {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
-              disabled, hover, inverse {
+      @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+        error, success, warning, info, danger, gradient, disabled, hover,
+        inverse {
+        @each $color in primary, secondary, tertiary, quaternary, accent,
+          disabled, hover, inverse {
+          &_$(type) {
+            &-text {
               &-$(color) {
                 color: var(--color-$(type)-text-$(color));
               }