indicator-ui 0.0.327 → 0.0.329

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

@@ -2,18 +2,32 @@
 
 @mixin base-button() {
   cursor: pointer;
-  transition: all ease-out 0.2s;
+  transition: background-color ease-out 0.2s;
   @include modify-flex(row, center, center);
 
   .icon {
     width: fit-content;
     height: fit-content;
     @include modify-flex(row, center, center);
+    @include modify-svg() {
+      * {
+        transition: stroke ease-out 0.2s;
+      }
+    }
   }
 
-  .text {
-    text-align: center;
-    flex: none;
+  .content {
+    @include modify-flex($align-items: center);
+
+    .text, .textSecondary {
+      flex: none;
+      text-align: center;
+      transition: color, weight 0.2s;
+    }
+
+    .textSecondary {
+      opacity: 0.6;
+    }
   }
 
   &.widthFill {

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

@@ -14,8 +14,16 @@
     }
   }
 
-  .text {
-    padding: 0 6px;
-    @include fnt-flex($size: 16, $line-height: 20, $family: $golos-ui);
+  .content {
+    padding: 0 8px;
+    gap: 4px;
+
+    .text {
+      @include fnt-flex($size: 16, $line-height: 20, $weight: 500, $family: $golos-ui);
+    }
+
+    .textSecondary {
+      @include fnt-flex($size: 16, $line-height: 20, $weight: 400, $family: $golos-ui);
+    }
   }
 }

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

@@ -1,5 +1,17 @@
 @use '../../../../../styles' as *;
 
+@mixin linkBlackButton-hover-state {
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-900));
+    }
+  }
+
+  .icon {
+    @include modify-svg($stroke: var(--gray-900));
+  }
+}
+
 @mixin linkBlackButton {
   padding: 0 !important;
   gap: 4px;
@@ -8,31 +20,24 @@
     @include modify-svg($stroke: var(--gray-700));
   }
 
-  .text {
+  .content {
     padding: 0 !important;
-    @include fnt-flex($weight: 400, $color: var(--gray-700));
-  }
-
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--gray-900);
-      }
 
-      .icon {
-        @include modify-svg($stroke: var(--gray-900));
-      }
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-700));
     }
   }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--gray-900);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        @include linkBlackButton-hover-state;
       }
+    }
 
-      .icon {
-        @include modify-svg($stroke: var(--gray-900));
+    @include tablet {
+      &:active {
+        @include linkBlackButton-hover-state;
       }
     }
   }

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

@@ -1,38 +1,43 @@
 @use '../../../../../styles' as *;
 
+@mixin linkColorButton-hover-state {
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-700));
+    }
+  }
+
+  .icon {
+    @include modify-svg($stroke: var(--primary-700));
+  }
+}
+
 @mixin linkColorButton {
   padding: 0 !important;
   gap: 4px;
 
   .icon {
-    @include modify-svg($stroke: var(--blue-dark-500));
+    @include modify-svg($stroke: var(--primary-500));
   }
 
-  .text {
+  .content {
     padding: 0 !important;
-    @include fnt-flex($weight: 400, $color: var(--blue-dark-500));
-  }
-
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--blue-dark-700);
-      }
 
-      .icon {
-        @include modify-svg($stroke: var(--blue-dark-700));
-      }
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-500));
     }
   }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--blue-dark-700);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        @include linkColorButton-hover-state;
       }
+    }
 
-      .icon {
-        @include modify-svg($stroke: var(--blue-dark-700));
+    @include tablet {
+      &:active {
+        @include linkColorButton-hover-state;
       }
     }
   }

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

@@ -1,5 +1,17 @@
 @use '../../../../../styles' as *;
 
+@mixin linkGrayButton-hover-state {
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-500));
+    }
+  }
+
+  .icon {
+    @include modify-svg($stroke: var(--gray-500));
+  }
+}
+
 @mixin linkGrayButton {
   padding: 0 !important;
   gap: 4px;
@@ -8,31 +20,24 @@
     @include modify-svg($stroke: var(--gray-400));
   }
 
-  .text {
+  .content {
     padding: 0 !important;
-    @include fnt-flex($weight: 400, $color: var(--gray-400));
-  }
-
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--gray-500);
-      }
 
-      .icon {
-        @include modify-svg($stroke: var(--gray-500));
-      }
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-400));
     }
   }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--gray-500);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        @include linkGrayButton-hover-state;
       }
+    }
 
-      .icon {
-        @include modify-svg($stroke: var(--gray-500));
+    @include tablet {
+      &:active {
+        @include linkGrayButton-hover-state;
       }
     }
   }

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

@@ -14,8 +14,16 @@
     }
   }
 
-  .text {
-    padding: 0 8px;
-    @include fnt-flex($size: 14, $line-height: 20, $family: $golos-ui);
+  .content {
+    padding: 0 6px;
+    gap: 4px;
+
+    .text {
+      @include fnt-flex($size: 14, $line-height: 20, $weight: 500, $family: $golos-ui);
+    }
+
+    .textSecondary {
+      @include fnt-flex($size: 14, $line-height: 20, $weight: 400, $family: $golos-ui);
+    }
   }
 }

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

@@ -2,7 +2,7 @@
 
 @mixin primaryButton {
   border-radius: 8px;
-  background-color: var(--blue-dark-500);
+  background-color: var(--primary-500);
   border: 1px solid transparent;
   box-shadow: 0 1px 2px 0 #1018280D;
 
@@ -10,25 +10,29 @@
     @include modify-svg($stroke: var(--base-white));
   }
 
-  .text {
-    @include fnt-flex($weight: 500, $color: var(--base-white));
-  }
-
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
-      background-color: var(--blue-dark-600);
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--base-white));
     }
   }
 
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        background-color: var(--primary-600);
+      }
+    }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      background-color: var(--blue-dark-600);
+    @include tablet {
+      &:active {
+        background-color: var(--primary-600);
+      }
     }
   }
 
+
   //&:focus {
-  //  background-color: var(--blue-dark-500);
+  //  background-color: var(--primary-500);
   //  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 #1018280D;
   //}
 

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

@@ -3,33 +3,37 @@
 @mixin secondaryColorButton {
   border-radius: 8px;
   background-color: var(--base-white);
-  border: 1px solid var(--blue-dark-200);
+  border: 1px solid var(--primary-200);
   box-shadow: 0 1px 2px 0 #1018280D;
 
   .icon {
-    @include modify-svg($stroke: var(--blue-dark-500));
+    @include modify-svg($stroke: var(--primary-500));
   }
 
-  .text {
-    @include fnt-flex($weight: 500, $color: var(--blue-dark-500));
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-500));
+    }
   }
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
-      background-color: var(--blue-dark-50);
-      border: 1px solid var(--blue-dark-300);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        background-color: var(--primary-50);
+        border: 1px solid var(--primary-300);
+      }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      background-color: var(--blue-dark-50);
-      border: 1px solid var(--blue-dark-300);
+    @include tablet {
+      &:active {
+        background-color: var(--primary-50);
+        border: 1px solid var(--primary-300);
+      }
     }
   }
 
   //&:focus {
-  //  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 #1018280D, 0 0 0 1px var(--blue-dark-300);
+  //  box-shadow: 0 0 0 4px var(--gray-100), 0 1px 2px 0 #1018280D, 0 0 0 1px var(--primary-300);
   //}
 
   &:disabled, &.disabled {

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

@@ -10,29 +10,32 @@
     @include modify-svg($stroke: var(--gray-700));
   }
 
-  .text {
-    @include fnt-flex($weight: 500, $color: var(--gray-700));
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-700));
+    }
   }
 
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        background-color: var(--gray-50);
+        border: 1px solid var(--gray-300);
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
-      background-color: var(--gray-50);
-      border: 1px solid var(--gray-300);
-
-      .text {
-        color: var(--gray-800);
+        .text {
+          color: var(--gray-800);
+        }
       }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      background-color: var(--gray-50);
-      border: 1px solid var(--gray-300);
+    @include tablet {
+      &:active {
+        background-color: var(--gray-50);
+        border: 1px solid var(--gray-300);
 
-      .text {
-        color: var(--gray-800);
+        .text {
+          color: var(--gray-800);
+        }
       }
     }
   }

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

@@ -14,8 +14,16 @@
     }
   }
 
-  .text {
+  .content {
     padding: 0 4px;
-    @include fnt-flex($size: 14, $line-height: 16, $family: $golos-ui);
+    gap: 4px;
+
+    .text {
+      @include fnt-flex($size: 14, $line-height: 16, $weight: 500, $family: $golos-ui);
+    }
+
+    .textSecondary {
+      @include fnt-flex($size: 14, $line-height: 16, $weight: 400, $family: $golos-ui);
+    }
   }
 }

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

@@ -10,33 +10,37 @@
     @include modify-svg($stroke: var(--gray-700));
   }
 
-  .text {
-    @include fnt-flex($weight: 500, $color: var(--gray-700));
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-700));
+    }
   }
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
       &:hover {
-        .icon {
-          @include modify-svg($stroke: var(--gray-900));
-        }
-
-        .text {
-          color: var(--gray-900);
+        &:hover {
+          .icon {
+            @include modify-svg($stroke: var(--gray-900));
+          }
+
+          .text {
+            color: var(--gray-900);
+          }
         }
       }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      &:hover {
-        .icon {
-          @include modify-svg($stroke: var(--gray-900));
-        }
+    @include tablet {
+      &:active {
+        &:hover {
+          .icon {
+            @include modify-svg($stroke: var(--gray-900));
+          }
 
-        .text {
-          color: var(--gray-900);
+          .text {
+            color: var(--gray-900);
+          }
         }
       }
     }

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

@@ -10,34 +10,38 @@
     @include modify-svg($stroke: var(--gray-500));
   }
 
-  .text {
-    @include fnt-flex($weight: 500, $color: var(--gray-500));
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-500));
+    }
   }
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled):not(:active) {
-      background-color: var(--gray-200);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        background-color: var(--gray-200);
 
-      .icon {
-        @include modify-svg($stroke: var(--gray-800));
-      }
+        .icon {
+          @include modify-svg($stroke: var(--gray-800));
+        }
 
-      .text {
-        color: var(--gray-800);
+        .text {
+          color: var(--gray-800);
+        }
       }
     }
-  }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      background-color: var(--gray-200);
+    @include tablet {
+      &:active {
+        background-color: var(--gray-200);
 
-      .icon {
-        @include modify-svg($stroke: var(--gray-800));
-      }
+        .icon {
+          @include modify-svg($stroke: var(--gray-800));
+        }
 
-      .text {
-        color: var(--gray-800);
+        .text {
+          color: var(--gray-800);
+        }
       }
     }
   }

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

@@ -1,35 +1,39 @@
 @use '../../../../../styles' as *;
 
-@mixin tertiaryColorButton {
-  border: 1px solid transparent;
-  .icon {
-    @include modify-svg($stroke: var(--blue-dark-500));
+@mixin tertiaryColorButton-hover-state {
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-700));
+    }
   }
 
-  .text {
-    color: var(--blue-dark-500);
+  .icon {
+    @include modify-svg($stroke: var(--primary-700));
   }
+}
 
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      .text {
-        @include fnt-flex($weight: 400, $color: var(--blue-dark-700));
-      }
+@mixin tertiaryColorButton {
+  border: 1px solid transparent;
+  .icon {
+    @include modify-svg($stroke: var(--primary-500));
+  }
 
-      .icon {
-        @include modify-svg($stroke: var(--blue-dark-700));
-      }
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--primary-500));
     }
   }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        @include fnt-flex($weight: 400, $color: var(--blue-dark-700));
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        @include tertiaryColorButton-hover-state;
       }
+    }
 
-      .icon {
-        @include modify-svg($stroke: var(--blue-dark-700));
+    @include tablet {
+      &:active {
+        @include tertiaryColorButton-hover-state;
       }
     }
   }

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

@@ -1,41 +1,42 @@
 @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));
+  }
+}
+
 @mixin tertiaryGrayButton {
   border: 1px solid transparent;
   .icon {
     @include modify-svg($stroke: var(--gray-700));
   }
 
-  .text {
-    color: var(--gray-700);
-    @include fnt-flex($weight: 400, $color: var(--gray-400));
-  }
-
-
-  @include tablet-plus {
-    &:hover:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--gray-900);
-      }
-
-      .icon {
-        @include modify-svg($stroke: var(--gray-900));
-      }
+  .content {
+    .text, .textSecondary {
+      @include fnt-flex($color: var(--gray-700));
     }
   }
 
-  @include tablet {
-    &:active:not(.disabled):not(:disabled) {
-      .text {
-        color: var(--gray-900);
+  &:not(.disabled):not(:disabled) {
+    @include tablet-plus {
+      &:hover {
+        @include tertiaryGrayButton-hover-state();
       }
-
-      .icon {
-        @include modify-svg($stroke: var(--gray-900));
+    }
+    @include tablet {
+      &:active {
+        @include tertiaryGrayButton-hover-state();
       }
     }
   }
 
+
   &:disabled, &.disabled {
     opacity: 0.5;
   }