feat: Improved color rendering for folder icons, b=no-bug, c=folders

Author: mr-cheffy

src/zen/folders/zen-folders.css

@@ -177,16 +177,18 @@ tab-group[split-view-group] .tab-group-line {
 zen-folder {
   display: flex;
   flex-direction: column;
-  --zen-folder-behind-bgcolor: color-mix(
-    in srgb,
-    var(--zen-primary-color) 75%,
-    light-dark(black, white)
+  --zen-folder-behind-bgcolor: light-dark(
+    color-mix(in srgb, var(--zen-primary-color) 85%, white),
+    color-mix(in srgb, var(--zen-primary-color) 75%, white)
   );
   --zen-folder-front-bgcolor: light-dark(
-    color-mix(in srgb, var(--zen-primary-color), white 75%),
-    color-mix(in srgb, var(--zen-primary-color), black 40%)
+    color-mix(in srgb, var(--zen-primary-color), white 70%),
+    color-mix(in srgb, var(--zen-primary-color), black 20%)
+  );
+  --zen-folder-stroke: light-dark(
+    color-mix(in srgb, var(--zen-primary-color) 70%, black),
+    color-mix(in srgb, var(--zen-colors-primary) 20%, var(--toolbox-textcolor))
   );
-  --zen-folder-stroke: color-mix(in srgb, var(--zen-colors-primary) 10%, var(--toolbox-textcolor));
 
   -moz-window-dragging: no-drag;
 
@@ -259,11 +261,15 @@ zen-folder {
         left: 2px;
       }
 
-      & svg image {
-        fill-opacity: 0.9;
-        -moz-context-properties: fill, fill-opacity;
-        fill: var(--zen-folder-stroke);
-        transform: translate(-180%, 10%);
+      & svg {
+        filter: contrast(150%);
+
+        & image {
+          fill-opacity: 0.9;
+          -moz-context-properties: fill, fill-opacity;
+          fill: var(--zen-folder-stroke);
+          transform: translate(-180%, 10%);
+        }
       }
     }