Revert #14832 and Improve Tree Resource Contrast to Fix #16465

This PR reverts #14832 and implements improved color contrast and icon styling to resolve the usability issue described in #16465.

- Restores the previous SCSS files removed in #14832
- Adjusts color variables for better contrast and clarity
- Aligns MODX 3 tree display with MODX 2 behavior for hidden/unpublished resources

Fixes #16465.

Requires asset build to see changes.

Author: jaygilmore

_build/templates/default/sass/_colors-and-vars.scss

@@ -132,7 +132,7 @@ $treeHeaderBorder: 1px solid #CDCDCD;
 $treeHeaderBg: $lightestGray;
 $treeBg: $lightestGray;
 $treeBgSelected: #D6E7F8;
-$treeColor: $darkGray;
+$treeColor: darken($darkGray,10%);
 $treeColorDesaturated: lighten(desaturate($treeColor,100%), 25%);
 $treeColor_2: #728DA7;
 $treePseudoRootBg: #F1F1F1;
@@ -145,17 +145,16 @@ $treeItemBg: $white;
 $treeItemColor: $mediumGray;
 
 $iconColor: $treeText;
+$unpublished: $treeText;
 
 $deactivatedTextColor: lighten($treeColor, 35%); // do not use 50% here - makes base color nearly invisible
 $disabledTextColor: $deactivatedTextColor;
 
-$unpublished: lighten($treeText, 10%) !important;
-$hidden: $treeText;
-$unpubText: normal;
-$hiddenText: italic;
-// locked is already signaled with lock-icon, no need to use other semantic style here
-// as italic is used for "unpublished"
-$lockedText: inherit; // italic;
+$hidden: darken($treeText,5%) !important;
+$unpubText: italic;
+/* locked is already signaled with lock-icon, no need to use other semantic style here
+   as italic is used for "unpublished" */
+$lockedText: inherit; //italic;
 
 $delTextColor: fade-out(darken(lighten(desaturate($red,50%), 33%), 25%), 0.5) !important;
 $delTextStyle: normal;

_build/templates/default/sass/_tree.scss

@@ -219,15 +219,20 @@
 
   i.icon,
   i.icon-large {
-    color: $unpublished;
     font-style: normal;
+    color: $treeColor;
   }
 }
 
 .hidemenu,
 .hidemenu a span {
   color: $hidden;
-  font-style: $hiddenText;
+  font-style: normal;
+
+  &.unpublished,
+  &.unpublished a span {
+    font-style: $unpubText;
+  }
 
   i.icon,
   i.icon-large {
@@ -241,8 +246,7 @@
 
   i.icon,
   i.icon-large {
-    color: $delTextColor;
-    font-style: normal;
+    color: $delTextColor; // font-style: normal;
   }
 
   a span {

_build/templates/default/sass/index.scss

@@ -128,7 +128,7 @@ hr {
 
 .not-installed {
   color: $mediumGray;
-  font-style: $hiddenText;
+  font-style: $hidden;
 }
 
 .yellow {
@@ -1640,28 +1640,19 @@ iframe[classname="x-hidden"] {
         font: normal 18px $bodyfonts;
         text-decoration: none;
 
-        &.menu_hidden {
-          font-style: $hiddenText;
-
-          &:hover {
-            color: darken($colorSplash, 10%);
-          }
-        }
-
         &.not_published {
-          color: $unpublished;
+          font-style: $unpubText;
 
           &:hover {
             color: darken($colorSplash, 10%);
           }
         }
 
-        &.deleted {
-          color: $delTextColor;
-          text-decoration: $delTextDeco;
+        &.menu_hidden {
+          color: $hidden;
 
           &:hover {
-            color: darken($colorSplash, 10%);
+            color: darken($colorSplash, 10%) !important;
           }
         }
       }