indicator-ui 0.1.123 → 0.1.124

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

@@ -1,28 +1,30 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin warningPrimaryButton {
-  border-radius: 8px;
-  background-color: var(--error-500);
-  border: 1px solid transparent;
-  box-shadow: 0 1px 2px 0 #1018280D;
+  border-radius: var(--ui-button-radius, 8px);
+
+  @include button-color(
+          $prefix: 'primary-warning',
+          $background-color: var(--error-500),
+          $border-color: transparent,
+          $icon-color: var(--base-white),
+          $text-color: var(--base-white),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        border: 1px solid var(--error-600);
-        background-color: var(--error-600);
-      }
-
-      &:active {
-        border: 1px solid var(--error-500);
-        background-color: var(--error-500);
-      }
-    }
-
-    @include tablet {
-      &:active {
-        border: 1px solid var(--error-600);
-        background-color: var(--error-600);
+        @include button-color(
+                $prefix: 'primary-warning-hover',
+                $background-color: var(--error-600),
+                $border-color: transparent,
+                $icon-color: var(--base-white),
+                $text-color: var(--base-white),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }

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

@@ -1,36 +1,28 @@
 @use '../../../../../styles' as *;
+@use 'utils/button-color' as *;
 
 @mixin warningSecondaryColorButton {
-  border: 1px solid var(--error-200);
-  background-color: var(--base-white);
-  box-shadow: 0 1px 2px 0 #1018280D;
-
-  .loader {
-    @include modify-svg($stroke: var(--error-500));
-  }
-
-  .icon {
-    @include modify-svg($stroke: var(--error-500));
-  }
-
-  .content {
-    .text, .textSecondary {
-      @include fnt-flex($color: var(--error-500));
-    }
-  }
+  @include button-color(
+          $prefix: 'secondary-color-warning',
+          $background-color: var(--base-white),
+          $border-color: var(--error-200),
+          $icon-color: var(--error-500),
+          $text-color: var(--error-500),
+          $box-shadow: 0 1px 2px 0 #1018280D
+  );
 
   &:not(.disabled):not(:disabled) {
-    @include tablet-plus {
+    @include hover {
+      &:active,
       &:hover {
-        background-color: var(--error-50);
-        border: 1px solid var(--error-400);
-      }
-    }
-
-    @include tablet {
-      &:active {
-        background-color: var(--error-50);
-        border: 1px solid var(--error-400);
+        @include button-color(
+                $prefix: 'secondary-color-warning-hover',
+                $background-color: var(--error-50),
+                $border-color: var(--error-400),
+                $icon-color: var(--error-500),
+                $text-color: var(--error-500),
+                $box-shadow: 0 1px 2px 0 #1018280D
+        );
       }
     }
   }
@@ -44,21 +36,27 @@
   }
 
   @include darkTheme {
-    background-color: transparent;
-    border: 1px solid var(--error-600);
+    @include button-color(
+            $prefix: 'secondary-color-warning',
+            $background-color: transparent,
+            $border-color: var(--error-600),
+            $icon-color: var(--error-500),
+            $text-color: var(--error-500),
+            $box-shadow: 0 1px 2px 0 #1018280D
+    );
 
     &:not(.disabled):not(:disabled) {
-      @include tablet-plus {
+      @include hover {
+        &:active,
         &:hover {
-          background-color: var(--error-950);
-          border: 1px solid var(--error-500);
-        }
-      }
-
-      @include tablet {
-        &:active {
-          background-color: var(--error-950);
-          border: 1px solid var(--error-500);
+          @include button-color(
+                  $prefix: 'secondary-color-warning-hover',
+                  $background-color: var(--error-950),
+                  $border-color: var(--error-500),
+                  $icon-color: var(--error-500),
+                  $text-color: var(--error-500),
+                  $box-shadow: 0 1px 2px 0 #1018280D
+          );
         }
       }
     }

package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/dateTimeDefault.scss

@@ -0,0 +1,24 @@
+@use '../../../../../../styles' as *;
+@use '../utils/dateRangeFieldColor' as color;
+
+@mixin dateTimeDefault {
+  @include color.dateRangeFieldColor(
+          $background-color: var(--base-white),
+          $border-color: var(--gray-300),
+          $text-color: var(--gray-900),
+          $icon-color: var(--gray-400),
+          $placeholder-color: var(--gray-400),
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include color.dateRangeFieldColor(
+            $background-color: var(--gray-950),
+            $border-color: var(--gray-800),
+            $text-color: var(--gray-25),
+            $icon-color: var(--gray-500),
+            $placeholder-color: var(--gray-500),
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/dateTimeDisabled.scss

@@ -0,0 +1,26 @@
+@use '../../../../../../styles' as *;
+@use '../utils/dateRangeFieldColor' as color;
+
+@mixin dateTimeDisabled {
+  @include color.dateRangeFieldColor (
+          $prefix: 'disabled',
+          $background-color: var(--gray-50),
+          $border-color: var(--gray-300),
+          $text-color: var(--gray-500),
+          $icon-color: var(--gray-400),
+          $placeholder-color: transparent,
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include color.dateRangeFieldColor(
+            $prefix: 'disabled',
+            $background-color: var(--gray-950),
+            $border-color: var(--gray-800),
+            $text-color: var(--gray-25),
+            $icon-color: var(--gray-400),
+            $placeholder-color: transparent,
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/dateTimeError.scss

@@ -0,0 +1,26 @@
+@use '../../../../../../styles' as *;
+@use '../utils/dateRangeFieldColor' as color;
+
+@mixin dateTimeError {
+  @include color.dateRangeFieldColor (
+          $prefix: 'error',
+          $background-color: var(--ui-form-field-background-color, var(--base-white)),
+          $border-color: var(--error-300),
+          $text-color: var(--ui-form-field-text-color, var(--gray-900)),
+          $icon-color: var(--ui-form-field-icon-color, var(--gray-400)),
+          $placeholder-color: var(--ui-form-field-placeholder-color, var(--gray-400)),
+          $box-shadow: 0 1px 2px 0 #1018280D,
+  );
+
+  @include darkTheme {
+    @include color.dateRangeFieldColor(
+            $prefix: 'error',
+            $background-color: var(--ui-form-field-background-color, var(--gray-950)),
+            $border-color: var(--error-900),
+            $text-color: var(--ui-form-field-text-color, var(--gray-25)),
+            $icon-color: var(--ui-form-field-icon-color, var(--gray-500)),
+            $placeholder-color: var(--ui-form-field-placeholder-color, var(--gray-500)),
+            $box-shadow: 0 1px 2px 0 #1018280D,
+    );
+  }
+}

package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/index.scss

@@ -0,0 +1,3 @@
+@forward "dateTimeDefault";
+@forward "dateTimeDisabled";
+@forward "dateTimeError";

package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/utils/dateRangeFieldColor.scss

@@ -0,0 +1,57 @@
+@use '../../../../../../styles' as *;
+@use "@/ui/formFields/mixins" as color;
+
+@mixin dateRangeFieldColor(
+  $prefix: null,
+  $background-color,
+  $border-color,
+  $icon-color,
+  $text-color,
+  $placeholder-color,
+  $box-shadow: null) {
+
+  $component: 'form-field';
+  $css-prefix: '';
+  @if ($prefix != null) {
+    $css-prefix: #{$prefix}-;
+  }
+
+  & {
+    @include color.input-color(
+            $component: $component,
+            $prefix: $prefix,
+            $background-color: $background-color,
+            $border-color: $border-color,
+            $box-shadow: $box-shadow,
+    );
+
+    .item {
+      .icon {
+        @include color.input-color(
+                $component: $component,
+                $prefix: $prefix,
+                $icon-color: $icon-color,
+        );
+      }
+
+      .text {
+        @include color.input-color(
+                $component: $component,
+                $prefix: $prefix,
+                $text-color: $text-color,
+        );
+      }
+    }
+    .line {
+      @include modify-svg($stroke: var(--ui-#{$component}-#{$css-prefix}border-color, $border-color));
+    }
+
+    .xCloseButton {
+      @include color.input-color(
+              $component: $component,
+              $prefix: $prefix,
+              $icon-color: $icon-color,
+      );
+    }
+  }
+}

package/dist/scss/ui/MicroButton/styles/mixins/properties/blue-light.scss

@@ -1,19 +1,23 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin blue-light() {
-  background: none;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--primary-50));
+  @include micro-button-color(
+          $prefix: 'blue-light',
+          $background-color: transparent,
+          $border-color: transparent,
+          $icon-color: var(--primary-50)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      @include modify-svg($stroke: var(--primary-200));
-    }
-  }
-
-  @include tablet {
-    &:active {
-      @include modify-svg($stroke: var(--primary-200));
+      @include micro-button-color(
+              $prefix: 'blue-light-hover',
+              $background-color: transparent,
+              $border-color: transparent,
+              $icon-color: var(--primary-200)
+      );
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color-fill.scss

@@ -1,21 +1,44 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin color-fill() {
-  background: var(--base-white);
-  border: 1px solid var(--primary-200);
-  @include modify-svg($stroke: var(--primary-500));
+  @include micro-button-color(
+          $prefix: 'color-fill',
+          $background-color: var(--base-white),
+          $border-color: var(--primary-200),
+          $icon-color: var(--primary-500)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background: var(--primary-50);
-      @include modify-svg($stroke: var(--primary-500));
+      @include micro-button-color(
+              $prefix: 'color-fill-hover',
+              $background-color: var(--primary-50),
+              $border-color: var(--primary-200),
+              $icon-color: var(--primary-500)
+      );
     }
   }
 
-  @include tablet {
-    &:active {
-      background: var(--primary-50);
-      @include modify-svg($stroke: var(--primary-500));
+  @include darkTheme {
+    @include micro-button-color(
+            $prefix: 'color-fill',
+            $background-color: var(--gray-900),
+            $border-color: var(--primary-900),
+            $icon-color: var(--primary-500)
+    );
+
+    @include hover {
+      &:active,
+      &:not(&:disabled):hover {
+        @include micro-button-color(
+                $prefix: 'color-fill-hover',
+                $background-color: var(--primary-950),
+                $border-color: var(--primary-900),
+                $icon-color: var(--primary-500)
+        );
+      }
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color-hover.scss

@@ -1,21 +1,44 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin color-hover() {
-  background: none;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--primary-400));
+  @include micro-button-color(
+          $prefix: 'color-hover',
+          $background-color: transparent,
+          $border-color: transparent,
+          $icon-color: var(--primary-400)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background-color: var(--primary-100);
-      @include modify-svg($stroke: var(--primary-500));
+      @include micro-button-color(
+              $prefix: 'color-hover-hover',
+              $background-color: var(--primary-100),
+              $border-color: transparent,
+              $icon-color: var(--primary-500)
+      );
     }
   }
 
-  @include tablet {
-    &:active {
-      background-color: var(--primary-100);
-      @include modify-svg($stroke: var(--primary-500));
+  @include darkTheme {
+    @include micro-button-color(
+            $prefix: 'color-hover',
+            $background-color: transparent,
+            $border-color: transparent,
+            $icon-color: var(--primary-600)
+    );
+
+    @include hover {
+      &:active,
+      &:not(&:disabled):hover {
+        @include micro-button-color(
+                $prefix: 'color-hover-hover',
+                $background-color: var(--primary-900),
+                $border-color: transparent,
+                $icon-color: var(--primary-500)
+        );
+      }
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color.scss

@@ -1,21 +1,23 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin color() {
-  background: none;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--primary-500));
+  @include micro-button-color(
+          $prefix: 'color',
+          $background-color: transparent,
+          $border-color: transparent,
+          $icon-color: var(--primary-500)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background-color: var(--base-white);
-      @include modify-svg($stroke: var(--primary-600));
-    }
-  }
-
-  @include tablet {
-    &:active {
-      background-color: var(--base-white);
-      @include modify-svg($stroke: var(--primary-600));
+      @include micro-button-color(
+              $prefix: 'color-hover',
+              $background-color: var(--base-white),
+              $border-color: transparent,
+              $icon-color: var(--primary-600)
+      );
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/dark.scss

@@ -1,19 +1,32 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin dark() {
   background-color: #0C111D80;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--base-white));
 
-  @include tablet-plus {
-    &:not(&:disabled):hover {
-      background-color: #0C111DCC;
-    }
+  @include micro-button-color(
+          $prefix: 'dark',
+          $background-color: #0C111D80,
+          $border-color: transparent,
+          $icon-color: var(--base-white)
+  );
+
+  svg {
+    opacity: .5;
   }
 
-  @include tablet {
-    &:active {
-      background-color: #0C111DCC;
+  @include hover {
+    &:active,
+    &:not(&:disabled):hover {
+      @include micro-button-color(
+              $prefix: 'dark-hover',
+              $background-color: #0C111DCC,
+              $border-color: transparent,
+              $icon-color: var(--base-white)
+      );
+      svg {
+        opacity: 1;
+      }
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/gray-fill.scss

@@ -1,21 +1,23 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin gray-fill() {
-  background: var(--base-white);
-  border: 1px solid var(--gray-300);
-  @include modify-svg($stroke: var(--gray-700));
+  @include micro-button-color(
+          $prefix: 'gray-fill',
+          $background-color: var(--base-white),
+          $border-color: var(--gray-300),
+          $icon-color: var(--gray-700)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background: var(--gray-50);
-      @include modify-svg($stroke: var(--gray-900));
-    }
-  }
-
-  @include tablet {
-    &:active {
-      background: var(--gray-50);
-      @include modify-svg($stroke: var(--gray-900));
+      @include micro-button-color(
+              $prefix: 'gray-fill-hover',
+              $background-color: var(--gray-50),
+              $border-color: var(--gray-300),
+              $icon-color: var(--gray-900)
+      );
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/gray.scss

@@ -1,21 +1,23 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin gray() {
-  background-color: transparent;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--gray-500));
+  @include micro-button-color(
+          $prefix: 'gray',
+          $background-color: transparent,
+          $border-color: transparent,
+          $icon-color: var(--gray-500)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background-color: var(--base-white);
-      @include modify-svg($stroke: var(--gray-600));
-    }
-  }
-
-  @include tablet {
-    &:active {
-      background-color: var(--base-white);
-      @include modify-svg($stroke: var(--gray-600));
+      @include micro-button-color(
+              $prefix: 'gray-hover',
+              $background-color: var(--base-white),
+              $border-color: transparent,
+              $icon-color: var(--gray-600)
+      );
     }
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/light.scss

@@ -1,21 +1,44 @@
 @use '../../../../../styles' as *;
+@use './utils/micro-button-color' as *;
 
 @mixin light() {
-  background: none;
-  border: 1px solid transparent;
-  @include modify-svg($stroke: var(--gray-400));
+  @include micro-button-color(
+          $prefix: 'light',
+          $background-color: transparent,
+          $border-color: transparent,
+          $icon-color: var(--gray-400)
+  );
 
-  @include tablet-plus {
+  @include hover {
+    &:active,
     &:not(&:disabled):hover {
-      background-color: var(--gray-200);
-      @include modify-svg($stroke: var(--gray-600));
+      @include micro-button-color(
+              $prefix: 'light-hover',
+              $background-color: var(--gray-200),
+              $border-color: transparent,
+              $icon-color: var(--gray-400)
+      );
     }
   }
 
-  @include tablet {
-    &:active {
-      background-color: var(--gray-200);
-      @include modify-svg($stroke: var(--gray-600));
+  @include darkTheme {
+    @include micro-button-color(
+            $prefix: 'light',
+            $background-color: transparent,
+            $border-color: transparent,
+            $icon-color: var(--gray-500)
+    );
+
+    @include hover {
+      &:active,
+      &:not(&:disabled):hover {
+        @include micro-button-color(
+                $prefix: 'light-hover',
+                $background-color: var(--gray-800),
+                $border-color: transparent,
+                $icon-color: var(--gray-400)
+        );
+      }
     }
   }
 }