indicator-ui 0.1.121 → 0.1.122

package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss

@@ -3,10 +3,11 @@
 @mixin base-button() {
   cursor: pointer;
   transition: background-color ease-out 0.2s;
-  border-radius: 8px;
+  border-radius: var(--ui-button-radius, 8px);
   position: relative;
   @include modify-flex($align-items: center, $justify-content: center);
 
+
   .loader {
     width: fit-content;
     height: fit-content;
@@ -30,14 +31,14 @@
   .counter {
     min-width: 24px;
     height: 24px;
-    padding: 4px 2px;
+    padding: 4px 6px;
     border-radius: 12px;
     position: absolute;
     top: 0;
     left: 0;
     transform: translate(-2px, -2px);
     text-align: center;
-    background-color: var(--blue-dark-500);
+    background-color: var(--primary-500);
     @include fnt($size: 14, $line-height: 16, $weight: 500, $color: var(--base-white));
   }
 
@@ -47,7 +48,7 @@
     .text, .textSecondary {
       flex: none;
       text-align: center;
-      transition: color, weight 0.2s;
+      transition: color ease-out 0.2s, weight ease-out 0.2s;
     }
 
     .textSecondary {

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

@@ -10,7 +10,6 @@
 @forward "link-color";
 @forward "link-black";
 @forward "link-gray";
-@forward "link-dark-theme";
 @forward "warning-primary";
 @forward "warning-secondary-color";
 @forward "warning-link-color";

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

@@ -10,6 +10,17 @@
   .icon {
     @include modify-svg($stroke: var(--gray-500));
   }
+  @include darkTheme {
+    .content {
+      .text, .textSecondary {
+        @include fnt-flex($color: var(--base-white));
+      }
+    }
+
+    .icon {
+      @include modify-svg($stroke: var(--base-white));
+    }
+  }
 }
 
 @mixin linkGrayButton {

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

@@ -2,34 +2,41 @@
 
 @mixin primaryButton {
   border-radius: 8px;
-  background-color: var(--primary-500);
-  border: 1px solid transparent;
-  box-shadow: 0 1px 2px 0 #1018280D;
-
-  .loader {
-    @include modify-svg($stroke: var(--base-white));
-  }
+  background-color: var(--ui-button-primary-background-color, var(--primary-500));
+  border: 1px solid var(--ui-button-primary-border-color, transparent);
+  box-shadow: var(--ui-button-primary-box-shadowr, 0 1px 2px 0 #1018280D);
 
+  .loader,
   .icon {
-    @include modify-svg($stroke: var(--base-white));
+    @include modify-svg($stroke: var(--ui-button-primary-icon-color, var(--base-white)));
   }
 
   .content {
     .text, .textSecondary {
-      @include fnt-flex($color: var(--base-white));
+      @include fnt-flex($color: var(--ui-button-primary-text-color, var(--base-white)));
     }
   }
 
   &:not(.disabled):not(:disabled) {
     @include tablet-plus {
       &:hover {
-        background-color: var(--primary-600);
+        background-color: var(--ui-button-primary-background-color, var(--primary-600));
+        border: 1px solid var(--ui-button-primary-border-color, transparent);
+        .loader,
+        .icon {
+          @include modify-svg($stroke: var(--ui-button-primary-hover-icon-color, var(--base-white)));
+        }
       }
     }
 
     @include tablet {
       &:active {
-        background-color: var(--primary-600);
+        background-color: var(--ui-button-primary-background-color, var(--primary-600));
+        border: 1px solid var(--ui-button-primary-border-color, transparent);
+        .loader,
+        .icon {
+          @include modify-svg($stroke: var(--ui-button-primary-hover-icon-color, var(--base-white)));
+        }
       }
     }
   }
@@ -42,23 +49,6 @@
 
   &:disabled, &.disabled {
     opacity: 0.3;
-  }
-}
-
-@mixin primaryDarkThemeButton {
-  background-color: var(--rose-500);
-
-  &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
-      &:hover {
-        background-color: var(--rose-600);
-      }
-    }
-
-    @include tablet {
-      &:active {
-        background-color: var(--rose-600);
-      }
-    }
+    pointer-events: none;
   }
 }

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

@@ -1,37 +1,42 @@
 @use '../../../../../styles' as *;
 
 @mixin secondaryColorButton {
-  border-radius: 8px;
-  background-color: var(--base-white);
-  border: 1px solid var(--primary-200);
-  box-shadow: 0 1px 2px 0 #1018280D;
-
-  .loader {
-    @include modify-svg($stroke: var(--primary-500));
-  }
+  border-radius: var(--ui-button-radius, 8px);
+  background-color: var(--ui-button-secondary-color-background-color, var(--base-white));
+  border: 1px solid var(--ui-button-secondary-color-border-color, var(--primary-200));
+  box-shadow: var(--ui-button-secondary-color-box-shadow, 0 1px 2px 0 #1018280D);
 
+  .loader,
   .icon {
-    @include modify-svg($stroke: var(--primary-500));
+    @include modify-svg($stroke: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
   }
 
   .content {
     .text, .textSecondary {
-      @include fnt-flex($color: var(--primary-500));
+      @include fnt-flex($color: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
     }
   }
 
   &:not(.disabled):not(:disabled) {
     @include tablet-plus {
       &:hover {
-        background-color: var(--primary-50);
-        border: 1px solid var(--primary-300);
+        background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-50));
+        border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-300));
+        .loader,
+        .icon {
+          @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
+        }
       }
     }
 
     @include tablet {
       &:active {
-        background-color: var(--primary-50);
-        border: 1px solid var(--primary-300);
+        background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-50));
+        border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-300));
+        .loader,
+        .icon {
+          @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
+        }
       }
     }
   }
@@ -43,38 +48,43 @@
   &:disabled, &.disabled {
     opacity: 0.5;
   }
-}
 
-@mixin secondaryColorDarkThemeButton {
-  background-color: transparent;
-  border: 1px solid var(--rose-900);
+  @include darkTheme {
+    background-color: var(--ui-button-secondary-color-background-color, transparent);
+    border: 1px solid var(--ui-button-secondary-color-border-color, var(--primary-900));
 
-  .loader {
-    @include modify-svg($stroke: var(--rose-500));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--rose-500));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--rose-500));
+    .loader,
+    .icon {
+      @include modify-svg($stroke: var(--ui-button-secondary-color-icon-color, var(--primary-500)));
     }
-  }
 
-  &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
-      &:hover {
-        background-color: var(--rose-950);
-        border: 1px solid var(--rose-700);
+    .content {
+      .text, .textSecondary {
+        @include fnt-flex($color: var(--ui-button-secondary-color-text-color, var(--primary-500)));
       }
     }
 
-    @include tablet {
-      &:active {
-        background-color: var(--rose-950);
-        border: 1px solid var(--rose-700);
+    &:not(.disabled):not(:disabled) {
+      @include tablet-plus {
+        &:hover {
+          background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-950));
+          border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-700));
+          .loader,
+          .icon {
+            @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
+          }
+        }
+      }
+
+      @include tablet {
+        &:active {
+          background-color: var(--ui-button-secondary-color-hover-background-color, var(--primary-950));
+          border: 1px solid var(--ui-button-secondary-color-hover-border-color, var(--primary-700));
+          .loader,
+          .icon {
+            @include modify-svg($stroke: var(--ui-button-secondary-color-hover-icon-color, var(--primary-500)));
+          }
+        }
       }
     }
   }

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

@@ -1,44 +1,41 @@
 @use '../../../../../styles' as *;
 
 @mixin secondaryGrayButton {
-  border-radius: 8px;
-  background-color: var(--base-white);
-  box-shadow: 0 1px 2px 0 #1018280D;
-  border: 1px solid var(--gray-300);
-
-  .loader {
-    @include modify-svg($stroke: var(--gray-700));
-  }
+  border-radius: var(--ui-button-radius, 8px);
+  background-color: var(--ui-button-secondary-gray-background-color, var(--base-white));
+  border: 1px solid var(--ui-button-secondary-gray-border-color, var(--gray-300));
+  box-shadow: var(--ui-button-secondary-gray-box-shadow, 0 1px 2px 0 #1018280D);
 
+  .loader,
   .icon {
-    @include modify-svg($stroke: var(--gray-700));
+    @include modify-svg($stroke: var(--ui-button-secondary-gray-icon-color, var(--gray-700)));
   }
 
   .content {
     .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-700));
+      @include fnt-flex($color: var(--ui-button-secondary-gray-icon-color, var(--gray-700)));
     }
   }
 
   &:not(.disabled):not(:disabled) {
     @include tablet-plus {
       &:hover {
-        background-color: var(--gray-50);
-        border: 1px solid var(--gray-300);
+        background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-50));
+        border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-300));
 
         .text {
-          color: var(--gray-800);
+          color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-800));
         }
       }
     }
 
     @include tablet {
       &:active {
-        background-color: var(--gray-50);
-        border: 1px solid var(--gray-300);
+        background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-50));
+        border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-300));
 
         .text {
-          color: var(--gray-800);
+          color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-800));
         }
       }
     }
@@ -52,47 +49,45 @@
   &:disabled, &.disabled {
     opacity: 0.5;
   }
-}
 
-@mixin secondaryGrayDarkThemeButton {
-  background-color: transparent;
-  border: 1px solid var(--gray-iron-700);
+  @include darkTheme {
+    background-color: var(--ui-button-secondary-gray-background-color, transparent);
+    border: 1px solid var(--ui-button-secondary-gray-border-color, var(--gray-iron-700));
+    box-shadow: var(--ui-button-secondary-gray-box-shadow, 0 1px 2px 0 #1018280D);
 
-  .loader {
-    @include modify-svg($stroke: var(--gray-iron-200));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--gray-iron-200));
-  }
+    .loader,
+    .icon {
+      @include modify-svg($stroke: var(--ui-button-secondary-gray-icon-color, var(--gray-200)));
+    }
 
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--gray-iron-200));
+    .content {
+      .text, .textSecondary {
+        @include fnt-flex($color: var(--ui-button-secondary-gray-text-color, var(--gray-200)));
+      }
     }
-  }
 
-  &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
-      &:hover {
-        background-color: var(--gray-iron-800);
-        border: 1px solid var(--gray-iron-700);
+    &:not(.disabled):not(:disabled) {
+      @include tablet-plus {
+        &:hover {
+          background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-800));
+          border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-700));
 
-        .text {
-          color: var(--gray-iron-200);
+          .text {
+            color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-200));
+          }
         }
       }
-    }
 
-    @include tablet {
-      &:active {
-        background-color: var(--gray-iron-800);
-        border: 1px solid var(--gray-iron-700);
+      @include tablet {
+        &:active {
+          background-color: var(--ui-button-secondary-gray-hover-background-color, var(--gray-800));
+          border: 1px solid var(--ui-button-secondary-gray-hover-border-color, var(--gray-700));
 
-        .text {
-          color: var(--gray-iron-200);
+          .text {
+            color: var(--ui-button-secondary-gray-hover-icon-color, var(--gray-200));
+          }
         }
       }
     }
   }
-}
+}

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

@@ -53,4 +53,53 @@
   &:disabled, &.disabled {
     opacity: 0.5;
   }
+
+  @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));
+      }
+    }
+
+    &:not(.disabled):not(:disabled) {
+      @include tablet-plus {
+        &: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);
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -53,4 +53,53 @@
   &:disabled, &.disabled {
     opacity: 0.5;
   }
+
+  @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));
+      }
+    }
+
+    &:not(.disabled):not(:disabled) {
+      @include tablet-plus {
+        &: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);
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -12,6 +12,19 @@
   }
 }
 
+@mixin tertiaryColorDarkThemeButton-hover-state {
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-700));
+    }
+  }
+
+  .icon {
+    @include modify-svg($stroke: var(--primary-700));
+  }
+}
+
+
 @mixin tertiaryColorButton {
   border: 1px solid transparent;
 
@@ -46,46 +59,33 @@
   &:disabled, &.disabled {
     opacity: 0.5;
   }
-}
-
 
-@mixin tertiaryColorDarkThemeButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--rose-700));
+  @include darkTheme {
+    .loader {
+      @include modify-svg($stroke: var(--primary-500));
     }
-  }
 
-  .icon {
-    @include modify-svg($stroke: var(--rose-700));
-  }
-}
-
-@mixin tertiaryColorDarkThemeButton {
-  .loader {
-    @include modify-svg($stroke: var(--rose-500));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--rose-500));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--rose-500));
+    .icon {
+      @include modify-svg($stroke: var(--primary-500));
     }
-  }
 
-  &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
-      &:hover {
-        @include tertiaryColorDarkThemeButton-hover-state;
+    .content {
+      .text, .textSecondary {
+        @include fnt-flex($color: var(--primary-500));
       }
     }
 
-    @include tablet {
-      &:active {
-        @include tertiaryColorDarkThemeButton-hover-state;
+    &:not(.disabled):not(:disabled) {
+      @include tablet-plus {
+        &:hover {
+          @include tertiaryColorDarkThemeButton-hover-state;
+        }
+      }
+
+      @include tablet {
+        &:active {
+          @include tertiaryColorDarkThemeButton-hover-state;
+        }
       }
     }
   }

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

@@ -46,47 +46,47 @@
   &:disabled, &.disabled {
     opacity: 0.5;
   }
-}
 
+  @include darkTheme {
+    .loader {
+      @include modify-svg($stroke: var(--primary-100));
+    }
 
-@mixin tertiaryWhiteDarkThemeButton-hover-state {
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--base-white));
+    .icon {
+      @include modify-svg($stroke: var(--primary-100));
     }
-  }
 
-  .icon {
-    @include modify-svg($stroke: var(--base-white));
-  }
-}
+    .content {
+      .text, .textSecondary {
+        @include fnt-flex($color: var(--primary-100));
+      }
+    }
 
-@mixin tertiaryWhiteDarkThemeButton {
-  .loader {
-    @include modify-svg($stroke: var(--rose-100));
-  }
+    &:not(.disabled):not(:disabled) {
+      @include tablet-plus {
+        &:hover {
+          @include tertiaryWhiteDarkThemeButton-hover-state;
+        }
+      }
 
-  .icon {
-    @include modify-svg($stroke: var(--rose-100));
+      @include tablet {
+        &:active {
+          @include tertiaryWhiteDarkThemeButton-hover-state;
+        }
+      }
+    }
   }
+}
+
 
+@mixin tertiaryWhiteDarkThemeButton-hover-state {
   .content {
     .text, .textSecondary {
-      @include fnt-flex($color: var(--rose-100));
+      @include fnt-flex($color: var(--base-white));
     }
   }
 
-  &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
-      &:hover {
-        @include tertiaryWhiteDarkThemeButton-hover-state;
-      }
-    }
-
-    @include tablet {
-      &:active {
-        @include tertiaryWhiteDarkThemeButton-hover-state;
-      }
-    }
+  .icon {
+    @include modify-svg($stroke: var(--base-white));
   }
 }