using button-outline-svg-icon-variant for pagetree-triangle-btn

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

@@ -296,6 +296,10 @@ ul.pagination {
   }
 }
 
+.grw-pagetree-triangle-btn {
+  @include button-outline-svg-icon-variant($secondary, $gray-200);
+}
+
 // Page Management Dropdown icon
 .btn.btn-page-item-control {
   @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);

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

@@ -191,6 +191,10 @@ $border-color: $border-color-global;
   }
 }
 
+.grw-pagetree-triangle-btn {
+  @include button-outline-svg-icon-variant($gray-400, $primary);
+}
+
 .btn.btn-page-item-control {
   @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
   @include hover() {

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

@@ -38,7 +38,7 @@
     &.grw-pagetree-current-page-item {
       background: $bgcolor-hover;
     }
-    .grw-pagetree-button {
+    .grw-pagetree-triangle-btn {
       &:not(:hover) {
         svg {
           fill: $button-color;