indicator-ui 0.1.123 → 0.1.124

package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss

@@ -1,103 +1,61 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin tabActiveButton {
-  border-radius: 6px;
-  background-color: var(--base-white);
-  border: 1px solid transparent;
-  box-shadow: 0 1px 2px 0 #1018280D;
+  border-radius: var(--ui-button-tab-radius, 6px);
 
-  .loader {
-    @include modify-svg($stroke: var(--gray-700));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-700));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-700));
-    }
-  }
+  @include button-color(
+          $prefix: 'tab-active',
+          $background-color: var(--base-white),
+          $border-color: transparent,
+          $icon-color: var(--gray-700),
+          $text-color: var(--gray-700),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        &:hover {
-          .icon {
-            @include modify-svg($stroke: var(--gray-900));
-          }
-
-          .text {
-            color: var(--gray-900);
-          }
-        }
-      }
-    }
-
-    @include tablet {
-      &:active {
-        &:hover {
-          .icon {
-            @include modify-svg($stroke: var(--gray-900));
-          }
-
-          .text {
-            color: var(--gray-900);
-          }
-        }
+        @include button-color(
+                $prefix: 'tab-active-hover',
+                $background-color: var(--base-white),
+                $border-color: transparent,
+                $icon-color: var(--gray-900),
+                $text-color: var(--gray-900),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 
   @include darkTheme {
-    background-color: var(--gray-700);
-    box-shadow: 0 1px 2px 0 #05070c8a;
-
-    .loader {
-      @include modify-svg($stroke: var(--gray-400));
-    }
-
-    .icon {
-      @include modify-svg($stroke: var(--gray-400));
-    }
-
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--gray-400));
-      }
-    }
+    @include button-color(
+            $prefix: 'tab-active',
+            $background-color: var(--gray-700),
+            $border-color: transparent,
+            $icon-color: var(--gray-400),
+            $text-color: var(--gray-400),
+            $box-shadow: 0 1px 2px 0 #05070c8a
+    );
 
     &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
+      @include hover {
+        &:active,
         &:hover {
-          background-color: var(--gray-600);
-
-          .icon {
-            @include modify-svg($stroke: var(--gray-200));
-          }
-
-          .text {
-            color: var(--gray-200);
-          }
-        }
-      }
-
-      @include tablet {
-        &:active {
-          background-color: var(--gray-600);
-
-          .icon {
-            @include modify-svg($stroke: var(--gray-200));
-          }
-
-          .text {
-            color: var(--gray-200);
-          }
+          @include button-color(
+                  $prefix: 'tab-active-hover',
+                  $background-color: var(--gray-600),
+                  $border-color: transparent,
+                  $icon-color: var(--gray-200),
+                  $text-color: var(--gray-200),
+                  $box-shadow: 0 1px 2px 0 #05070c8a
+          );
         }
       }
     }

package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss

@@ -1,103 +1,61 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin tabButton {
-  border-radius: 6px;
-  background-color: var(--gray-100);
-  border: 1px solid transparent;
-  box-shadow: 0 1px 2px 0 #1018280D;
+  border-radius: var(--ui-button-tab-radius, 6px);
 
-  .loader {
-    @include modify-svg($stroke: var(--gray-500));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-500));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-500));
-    }
-  }
+  @include button-color(
+          $prefix: 'tab',
+          $background-color: var(--gray-100),
+          $border-color: transparent,
+          $icon-color: var(--gray-500),
+          $text-color: var(--gray-500),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        background-color: var(--gray-200);
-
-        .icon {
-          @include modify-svg($stroke: var(--gray-800));
-        }
-
-        .text {
-          color: var(--gray-800);
-        }
-      }
-    }
-
-    @include tablet {
-      &:active {
-        background-color: var(--gray-200);
-
-        .icon {
-          @include modify-svg($stroke: var(--gray-800));
-        }
-
-        .text {
-          color: var(--gray-800);
-        }
+        @include button-color(
+                $prefix: 'tab-hover',
+                $background-color: var(--gray-200),
+                $border-color: transparent,
+                $icon-color: var(--gray-800),
+                $text-color: var(--gray-800),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 
   @include darkTheme {
-    background-color: var(--gray-900);
-    box-shadow: 0 1px 2px 0 #05070c8a;
-
-    .loader {
-      @include modify-svg($stroke: var(--gray-400));
-    }
-
-    .icon {
-      @include modify-svg($stroke: var(--gray-400));
-    }
-
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--gray-400));
-      }
-    }
+    @include button-color(
+            $prefix: 'tab',
+            $background-color: var(--gray-900),
+            $border-color: transparent,
+            $icon-color: var(--gray-400),
+            $text-color: var(--gray-400),
+            $box-shadow: 0 1px 2px 0 #05070c8a
+    );
 
     &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
+      @include hover {
+        &:active,
         &:hover {
-          background-color: var(--gray-800);
-
-          .icon {
-            @include modify-svg($stroke: var(--gray-200));
-          }
-
-          .text {
-            color: var(--gray-200);
-          }
-        }
-      }
-
-      @include tablet {
-        &:active {
-          background-color: var(--gray-800);
-
-          .icon {
-            @include modify-svg($stroke: var(--gray-200));
-          }
-
-          .text {
-            color: var(--gray-200);
-          }
+          @include button-color(
+                  $prefix: 'tab-hover',
+                  $background-color: var(--gray-800),
+                  $border-color: transparent,
+                  $icon-color: var(--gray-200),
+                  $text-color: var(--gray-200),
+                  $box-shadow: 0 1px 2px 0 #1018280D
+          );
         }
       }
     }

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss

@@ -1,92 +1,30 @@
 @use '../../../../../styles' as *;
-
-@mixin tertiaryColorButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-700));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--primary-700));
-  }
-}
-
-@mixin tertiaryColorDarkThemeButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-700));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--primary-700));
-  }
-}
-
+@use 'utils/button-color' as *;
 
 @mixin tertiaryColorButton {
-  border: 1px solid transparent;
-
-  .loader {
-    @include modify-svg($stroke: var(--primary-500));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--primary-500));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-500));
-    }
-  }
+  @include button-color(
+          $prefix: 'tertiary-color',
+          $border-color: transparent,
+          $icon-color: var(--primary-500),
+          $text-color: var(--primary-500)
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        @include tertiaryColorButton-hover-state;
-      }
-    }
-
-    @include tablet {
-      &:active {
-        @include tertiaryColorButton-hover-state;
+        @include button-color(
+                $prefix: 'tertiary-color-hover',
+                $border-color: transparent,
+                $icon-color: var(--primary-700),
+                $text-color: var(--primary-700)
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
-  }
-
-  @include darkTheme {
-    .loader {
-      @include modify-svg($stroke: var(--primary-500));
-    }
-
-    .icon {
-      @include modify-svg($stroke: var(--primary-500));
-    }
-
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--primary-500));
-      }
-    }
-
-    &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
-        &:hover {
-          @include tertiaryColorDarkThemeButton-hover-state;
-        }
-      }
-
-      @include tablet {
-        &:active {
-          @include tertiaryColorDarkThemeButton-hover-state;
-        }
-      }
-    }
+    pointer-events: none;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-gray.scss

@@ -1,48 +1,30 @@
 @use '../../../../../styles' as *;
-
-@mixin tertiaryGrayButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-900));
-    }
-  }
-  .icon {
-    @include modify-svg($stroke: var(--gray-900));
-  }
-}
+@use 'utils/button-color' as *;
 
 @mixin tertiaryGrayButton {
-  border: 1px solid transparent;
-
-  .loader {
-    @include modify-svg($stroke: var(--gray-700));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-700));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-700));
-    }
-  }
+  @include button-color(
+          $prefix: 'tertiary-gray',
+          $border-color: transparent,
+          $icon-color: var(--gray-700),
+          $text-color: var(--gray-700)
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        @include tertiaryGrayButton-hover-state();
-      }
-    }
-    @include tablet {
-      &:active {
-        @include tertiaryGrayButton-hover-state();
+        @include button-color(
+                $prefix: 'tertiary-gray-hover',
+                $border-color: transparent,
+                $icon-color: var(--gray-900),
+                $text-color: var(--gray-900)
+        );
       }
     }
   }
 
-
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss

@@ -1,92 +1,30 @@
 @use '../../../../../styles' as *;
-
-@mixin tertiaryWhiteButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--base-white));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--base-white));
-  }
-}
+@use 'utils/button-color' as *;
 
 @mixin tertiaryWhiteButton {
-  border: 1px solid transparent;
-
-  .loader {
-    @include modify-svg($stroke: var(--primary-100));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--primary-100));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-100));
-    }
-  }
+  @include button-color(
+          $prefix: 'tertiary-white',
+          $border-color: transparent,
+          $icon-color: var(--primary-100),
+          $text-color: var(--primary-100)
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        @include tertiaryWhiteButton-hover-state;
-      }
-    }
-
-    @include tablet {
-      &:active {
-        @include tertiaryWhiteButton-hover-state;
+        @include button-color(
+                $prefix: 'tertiary-white-hover',
+                $border-color: transparent,
+                $icon-color: var(--base-white),
+                $text-color: var(--base-white)
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
-  }
-
-  @include darkTheme {
-    .loader {
-      @include modify-svg($stroke: var(--primary-100));
-    }
-
-    .icon {
-      @include modify-svg($stroke: var(--primary-100));
-    }
-
-    .content {
-      .text, .textSecondary {
-        @include fnt-flex($color: var(--primary-100));
-      }
-    }
-
-    &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
-        &:hover {
-          @include tertiaryWhiteDarkThemeButton-hover-state;
-        }
-      }
-
-      @include tablet {
-        &:active {
-          @include tertiaryWhiteDarkThemeButton-hover-state;
-        }
-      }
-    }
-  }
-}
-
-
-@mixin tertiaryWhiteDarkThemeButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--base-white));
-    }
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--base-white));
+    pointer-events: none;
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/utils/button-color.scss

@@ -0,0 +1,35 @@
+@use '../../../../../../styles' as *;
+
+@mixin button-color(
+  $prefix, 
+  $background-color: null,
+  $border-color: null,
+  $icon-color: null,
+  $text-color: null,
+  $box-shadow: null) {
+  & {
+    @if ($background-color != null) {
+      background-color: var(--ui-button-#{$prefix}-background-color, $background-color);
+    }
+    @if ($border-color != null) {
+      border: 1px solid var(--ui-button-#{$prefix}-border-color, $border-color);
+    }
+    @if ($box-shadow != null) {
+      box-shadow: var(--ui-button-#{$prefix}-box-shadow, $box-shadow);
+    }
+    @if ($icon-color != null) {
+      .loader,
+      .icon {
+        @include modify-svg($stroke: var(--ui-button-#{$prefix}-icon-color, $icon-color));
+        @include fnt-flex($color: var(--ui-button-#{$prefix}-icon-color, $icon-color));
+      }
+    }
+    @if ($text-color != null) {
+      .content {
+        .text, .textSecondary {
+          @include fnt-flex($color: var(--ui-button-#{$prefix}-text-color, $text-color));
+        }
+      }
+    }
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/warning-link-color.scss

@@ -1,49 +1,28 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin warningLinkColorButton {
-  .icon {
-    @include modify-svg($stroke: var(--error-500));
-  }
-
-  .loader {
-    @include modify-svg($stroke: var(--error-500));
-  }
-
-  .content {
-    padding: 0 !important;
-
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--error-500));
-    }
-  }
+  @include button-color(
+          $prefix: 'link-color-warning',
+          $icon-color: var(--error-500),
+          $text-color: var(--error-500)
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        .text {
-          color: var(--error-700);
-        }
-
-        .icon {
-          @include modify-svg($stroke: var(--error-700));
-        }
-      }
-    }
-
-    @include tablet {
-      &:active {
-        .text {
-          color: var(--error-700);
-        }
-
-        .icon {
-          @include modify-svg($stroke: var(--error-700));
-        }
+        @include button-color(
+                $prefix: 'link-color-warning-hover',
+                $icon-color: var(--error-700),
+                $text-color: var(--error-700)
+        );
       }
     }
   }
 
   &:disabled, &.disabled {
     opacity: 0.5;
+    pointer-events: none;
   }
 }