@itcase/ui 1.0.81 → 1.0.83

package/dist/css/components/Select/css/__placeholder/select__placeholder.css

@@ -1,5 +1,6 @@
 .select {
   &__placeholder {
     position: absolute;
+    display: flex;
   }
 }

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

@@ -5,6 +5,35 @@
     align-content: center;
   }
 }
+.tab-group {
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  & .tab {
+    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;
+    }
+  }
+}
+div.tab-reset {
+  & .tab__wrapper {
+    padding: 0;
+    gap: 0;
+    margin: 0;
+  }
+}
 .tab {
   @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
     &_justify-content_$(val) {
@@ -17,7 +46,7 @@
 .tab {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--tab-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -26,7 +55,7 @@
 }
 .tab {
   &_size {
-    @each $size in normal, compact {
+    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl, {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--tab-size-$(size)-padding);
@@ -36,29 +65,6 @@
     }
   }
 }
-.tab-group {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  flex-flow: row wrap;
-  & .tab {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-end;
-    cursor: pointer;
-    &__wrapper {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-    }
-    &__label {
-      flex: 1;
-      display: flex;
-    }
-  }
-}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;

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

@@ -1,16 +1,16 @@
 .textarea {
   width: 100%;
   min-width: 100%;
-  min-height: 160px;
-  max-height: 160px;
-  padding: 16px 16px;
+  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;
-  border: none;
   appearance: none;
-  padding: 0;
-  margin: 0;
   &:read-only {
     color: var(--color-surface-text-tertiary);
   }

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

@@ -6,7 +6,7 @@
 .tile {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--tile-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -31,7 +31,7 @@
 .tile {
   &_type {
     &_icon {
-      padding: 16px;
+      padding: var(--tile-type-icon-padding, 16px);
       ^^&__icon {
         margin: 0 0 16px 0;
       }

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

@@ -2,7 +2,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
+          disabled, hover, invert {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));

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

@@ -1,21 +1,13 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, gradient,
+    warning {
     &_$(type) {
-      @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)-$(color)-$(alpha));
-            }
-          }
-        }
-      }
       &-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) {
             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  {
+            @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)-item-$(color)-$(alpha));
               }
@@ -23,13 +15,25 @@
           }
         }
       }
+      @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)-$(color)-$(alpha));
+            }
+          }
+        }
+      }
     }
   }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error,
+    info, warning {
     &_$(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  {
+        @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/text-color/text-color.css

@@ -2,7 +2,8 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
     &_$(type) {
       &-text {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
+          hover, invert {
           &-$(color) {
             color: var(--color-$(type)-text-$(color));
           }
@@ -11,4 +12,3 @@
     }
   }
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",