Make unpublished resource icons outlined for visual distinction

- Updated tree icon styles:
  - Published resources use the standard dark icon color
  - Unpublished and deleted resources use an outlined icon style
- Helps further distinguish resource states at a glance in the tree

Author: jaygilmore

_build/templates/default/sass/_tree.scss

@@ -211,7 +211,16 @@
     vertical-align: 0;
   }
 }
-
+.published,
+.published a span{
+  i.icon,
+  i.icon-large {
+    color: $treeColor !important;
+    &::before {
+      color: $treeColor !important;
+    }
+  }
+}
 .unpublished,
 .unpublished a span {
   color: $unpublished;
@@ -221,6 +230,10 @@
   i.icon-large {
     font-style: normal;
     color: $treeColor;
+
+    &::before {
+      font-weight: 400;
+    }
   }
 }
 
@@ -232,12 +245,16 @@
   &.unpublished,
   &.unpublished a span {
     font-style: $unpubText;
-  }
 
+    i.icon,
+    i.icon-large {
+      color: $hidden;
+    }
+  }
   i.icon,
   i.icon-large {
-    color: $hidden;
     font-style: normal;
+    color: $treeColor;
   }
 }
 
@@ -247,6 +264,10 @@
   i.icon,
   i.icon-large {
     color: $delTextColor; // font-style: normal;
+
+    &::before {
+      font-weight: 400;
+    }
   }
 
   a span {

manager/templates/default/css/index.css

@@ -1,20 +1,3 @@
-/*
-* 
-* Copyright (C) 2025 MODX LLC
-* 
-* This file is part of MODX Revolution and was compiled using Grunt.
-* 
-* MODX Revolution is free software: you can redistribute it and/or modify it under the terms of the
-* GNU General Public License as published by the Free Software Foundation, either version 2 of the
-* License, or (at your option) any later version.
-* 
-* MODX Revolution is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
-* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-* 
-* See the GNU General Public License for more details. You should have received a copy of the GNU
-* General Public License along with MODX Revolution. If not, see <http://www.gnu.org/licenses/>.
-* 
-*/
 /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
 /* Document
    ========================================================================== */
@@ -18258,6 +18241,8 @@ readers do not read off random characters that represent icons */
     content: "\f1ba";
 }
 
+/* locked is already signaled with lock-icon, no need to use other semantic style here
+   as italic is used for "unpublished" */
 #modx-navbar #modx-topnav {
     margin-left: auto;
     margin-right: auto;
@@ -20622,7 +20607,7 @@ html[dir=rtl] .x-toolbar-left table {
     height: 30px;
     border: none;
     box-shadow: none;
-    color: #515151;
+    color: #383838;
     background: #F1F1F1;
     opacity: 1;
     filter: alpha(opacity=100);
@@ -20660,7 +20645,7 @@ html[dir=rtl] .x-toolbar-left table {
     /* trash icon is a bit smaller than the others at 18px */
 }
 #modx-leftbar .x-toolbar-ct .x-toolbar-right .x-btn#emptifier .x-item-disabled {
-    color: #919191 !important;
+    color: #777777 !important;
     /* !important prevents hover / active styles */
     opacity: 0.6;
     filter: alpha(opacity=60);
@@ -23021,7 +23006,7 @@ ul.x-tab-strip-bottom .x-tab-left {
 .x-tab-scroller-left:before,
 .x-tab-scroller-right:before {
     box-sizing: border-box;
-    color: #515151;
+    color: #383838;
     content: "";
     font-size: 28px;
     margin-top: -20px;
@@ -23046,7 +23031,7 @@ ul.x-tab-strip-bottom .x-tab-left {
 }
 .x-tab-scroller-left-disabled:before,
 .x-tab-scroller-right-disabled:before {
-    color: #515151;
+    color: #383838;
     opacity: 0.4;
     filter: alpha(opacity=100);
     /* for IE <= 8 */
@@ -24243,7 +24228,7 @@ ul.x-tab-strip-bottom .x-tab-left {
 }
 #modx-leftbar-tabs-xcollapsed .x-layout-mini:after {
     border-right: 0;
-    border-left: 5px solid #515151;
+    border-left: 5px solid #383838;
 }
 @media screen and (max-width: 960px) {
     #modx-leftbar-tabs-xcollapsed .x-layout-mini:after {
@@ -24303,7 +24288,7 @@ ul.x-tab-strip-bottom .x-tab-left {
 
 /* tree states */
 .x-tree-node-el {
-    color: #515151;
+    color: #383838;
     font: normal 14px/2.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     padding: 0 8px;
     /* For legacy icons */
@@ -24338,30 +24323,63 @@ ul.x-tab-strip-bottom .x-tab-left {
     vertical-align: 0;
 }
 
+.published i.icon,
+.published i.icon-large,
+.published a span i.icon,
+.published a span i.icon-large {
+    color: #383838 !important;
+}
+.published i.icon::before,
+.published i.icon-large::before,
+.published a span i.icon::before,
+.published a span i.icon-large::before {
+    color: #383838 !important;
+}
+
 .unpublished,
 .unpublished a span {
-    color: #b3b3b3 !important;
-    font-style: normal;
+    color: #999999;
+    font-style: italic;
 }
 .unpublished i.icon,
 .unpublished i.icon-large,
 .unpublished a span i.icon,
 .unpublished a span i.icon-large {
-    color: #b3b3b3 !important;
     font-style: normal;
+    color: #383838;
+}
+.unpublished i.icon::before,
+.unpublished i.icon-large::before,
+.unpublished a span i.icon::before,
+.unpublished a span i.icon-large::before {
+    font-weight: 400;
 }
 
 .hidemenu,
 .hidemenu a span {
-    color: #999999;
+    color: #8c8c8c !important;
+    font-style: normal;
+}
+.hidemenu.unpublished, .hidemenu.unpublished a span,
+.hidemenu a span.unpublished,
+.hidemenu a span.unpublished a span {
     font-style: italic;
 }
+.hidemenu.unpublished i.icon,
+.hidemenu.unpublished i.icon-large, .hidemenu.unpublished a span i.icon,
+.hidemenu.unpublished a span i.icon-large,
+.hidemenu a span.unpublished i.icon,
+.hidemenu a span.unpublished i.icon-large,
+.hidemenu a span.unpublished a span i.icon,
+.hidemenu a span.unpublished a span i.icon-large {
+    color: #8c8c8c !important;
+}
 .hidemenu i.icon,
 .hidemenu i.icon-large,
 .hidemenu a span i.icon,
 .hidemenu a span i.icon-large {
-    color: #999999;
     font-style: normal;
+    color: #383838;
 }
 
 .deleted {
@@ -24370,7 +24388,10 @@ ul.x-tab-strip-bottom .x-tab-left {
 .deleted i.icon,
 .deleted i.icon-large {
     color: rgba(175, 90, 98, 0.5) !important;
-    font-style: normal;
+}
+.deleted i.icon::before,
+.deleted i.icon-large::before {
+    font-weight: 400;
 }
 .deleted a span {
     color: rgba(175, 90, 98, 0.5) !important;
@@ -24380,7 +24401,7 @@ ul.x-tab-strip-bottom .x-tab-left {
 }
 
 .element-node-disabled a span {
-    color: #aaaaaa;
+    color: #919191;
 }
 
 .x-tree-node {
@@ -24392,7 +24413,7 @@ ul.x-tab-strip-bottom .x-tab-left {
 .x-tree-node .x-tree-node-disabled i.icon,
 .x-tree-node .element-node-disabled a span,
 .x-tree-node .element-node-disabled i.icon {
-    color: #aaaaaa;
+    color: #919191;
 }
 
 .element-node-locked a span {
@@ -24568,7 +24589,7 @@ html[dir=rtl] .x-tree-node-el .modx-tree-node-btn-create {
 .x-dd-drag-ghost a,
 .x-tree-node a span,
 .x-dd-drag-ghost a span {
-    color: #515151;
+    color: #383838;
 }
 
 .x-tree-node div.x-tree-drag-insert-below {
@@ -24957,21 +24978,21 @@ html[dir=rtl] .x-tree-node-el .modx-tree-node-btn-create {
 }
 
 .x-tree-node {
-    color: #515151;
+    color: #383838;
 }
 
 .x-tree-node a,
 .x-dd-drag-ghost a {
-    color: #515151;
+    color: #383838;
 }
 
 .x-tree-node a span,
 .x-dd-drag-ghost a span {
-    color: #515151;
+    color: #383838;
 }
 
 .x-tree-node .x-tree-node-disabled a span {
-    color: #d1d1d1;
+    color: #b7b7b7;
 }
 
 .x-tree-node div.x-tree-drag-insert-below {
@@ -26530,7 +26551,7 @@ hr {
 
 .not-installed {
     color: #999999;
-    font-style: italic;
+    font-style: #8c8c8c !important;
 }
 
 .yellow {
@@ -27940,24 +27961,17 @@ html[dir=rtl] .x-hide-offsets {
     font: normal 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     text-decoration: none;
 }
-.modx-header-breadcrumbs ul li a.menu_hidden {
-    font-style: italic;
-}
-.modx-header-breadcrumbs ul li a.menu_hidden:hover {
-    color: #162a42;
-}
 .modx-header-breadcrumbs ul li a.not_published {
-    color: #b3b3b3 !important;
+    font-style: italic;
 }
 .modx-header-breadcrumbs ul li a.not_published:hover {
     color: #162a42;
 }
-.modx-header-breadcrumbs ul li a.deleted {
-    color: rgba(175, 90, 98, 0.5) !important;
-    text-decoration: line-through;
+.modx-header-breadcrumbs ul li a.menu_hidden {
+    color: #8c8c8c !important;
 }
-.modx-header-breadcrumbs ul li a.deleted:hover {
-    color: #162a42;
+.modx-header-breadcrumbs ul li a.menu_hidden:hover {
+    color: #162a42 !important;
 }
 .modx-header-breadcrumbs ul li:after {
     content: "\f054";
@@ -28863,4 +28877,6 @@ html[dir=rtl] .x-hide-offsets {
 
 .x-datetime-inline-editor .x-datetime-wrap {
     margin-top: 0 !important;
-}
+}
+
+/*# sourceMappingURL=index.css.map */