Merge pull request #5524 from weseek/imprv/90335-triangle-btn-color

imprv: 90335 triangle btn color with button-outline-svg-icon-variant

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -412,7 +412,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           {hasDescendants && (
             <button
               type="button"
-              className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
+              className={`grw-pagetree-triangle-btn btn ${isOpen ? 'grw-pagetree-open' : ''}`}
               onClick={onClickLoadChildren}
             >
               <div className="d-flex justify-content-center">

packages/app/src/styles/_mixins.scss

@@ -206,7 +206,7 @@
   }
   @include hover() {
     svg {
-      fill: $value;
+      fill: $color-hover;
     }
   }
   &.disabled,
@@ -219,7 +219,7 @@
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
     svg {
-      fill: $value;
+      fill: $color-hover;
     }
   }
 }

packages/app/src/styles/_page-tree.scss

@@ -26,7 +26,7 @@ $grw-pagetree-item-padding-left: 10px;
       }
     }
 
-    .grw-pagetree-button {
+    .grw-pagetree-triangle-btn {
       background-color: transparent;
       transition: all 0.2s ease-out;
       transform: rotate(0deg);

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -281,9 +281,11 @@ ul.pagination {
       $color-list-hover,
       $bgcolor-list-hover,
       $color-list-active,
-      lighten($bgcolor-list-hover, 5%),
-      $gray-500
+      lighten($bgcolor-list-hover, 5%)
     );
+    .grw-pagetree-triangle-btn {
+      @include button-outline-svg-icon-variant($secondary, $gray-200);
+    }
     .grw-pagetree-count {
       color: $gray-400;
       background: $gray-700;

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -176,9 +176,11 @@ $border-color: $border-color-global;
       $color-list-hover,
       $bgcolor-list-hover,
       $color-list-active,
-      $bgcolor-list-active,
-      $gray-400
+      $bgcolor-list-active
     );
+    .grw-pagetree-triangle-btn {
+      @include button-outline-svg-icon-variant($gray-400, $primary);
+    }
     .grw-pagetree-count {
       color: $gray-500;
       background: $gray-200;

packages/app/src/styles/theme/christmas.scss

@@ -194,8 +194,7 @@ html[dark] {
         $color-list-hover,
         $bgcolor-list-hover,
         $color-list-active,
-        $bgcolor-list-hover,
-        $gray-400
+        $bgcolor-list-hover
       );
     }
   }

packages/app/src/styles/theme/future.scss

@@ -122,8 +122,7 @@ html[dark] {
         $color-list-hover,
         $bgcolor-list-hover,
         $color-list-active,
-        lighten($bgcolor-list-hover, 5%),
-        $gray-600
+        lighten($bgcolor-list-hover, 5%)
       );
     }
   }

packages/app/src/styles/theme/island.scss

@@ -131,9 +131,11 @@ html[dark] {
         $color-list-hover,
         $bgcolor-list-hover,
         $color-list-active,
-        lighten($bgcolor-list-hover, 5%),
-        $gray-400
+        lighten($bgcolor-list-hover, 5%)
       );
+      .grw-pagetree-triangle-btn {
+        @include button-outline-svg-icon-variant($gray-400, $bgcolor-sidebar);
+      }
     }
   }
 }

packages/app/src/styles/theme/kibela.scss

@@ -122,8 +122,7 @@ html[dark] {
         $color-list-hover,
         $bgcolor-list-hover,
         $color-list-active,
-        lighten($bgcolor-list-active, 55%),
-        $gray-400
+        lighten($bgcolor-list-active, 55%)
       );
     }
   }

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -24,8 +24,7 @@
   $color-hover: $color,
   $bgcolor-hover: $bgcolor,
   $color-active: $color,
-  $bgcolor-active: $bgcolor,
-  $button-color
+  $bgcolor-active: $bgcolor
 ) {
   .grw-pagetree-is-over {
     background: $bgcolor-hover;
@@ -38,13 +37,6 @@
     &.grw-pagetree-current-page-item {
       background: $bgcolor-hover;
     }
-    .grw-pagetree-button {
-      &:not(:hover) {
-        svg {
-          fill: $button-color;
-        }
-      }
-    }
 
     &.list-group-item-action {
       &:hover {