From 6ac80edad7cc4a26226d42da68701bdff0e5539f Mon Sep 17 00:00:00 2001
From: reizumi <reizumichan@protonmail.com>
Date: Thu, 18 Sep 2025 02:21:21 +0800
Subject: [PATCH] style: Improve Zen Folders icon, p=#10410

---
 src/zen/folders/ZenFolder.mjs   | 74 ++++++++++++++++++---------------
 src/zen/folders/zen-folders.css | 22 +++-------
 2 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/src/zen/folders/ZenFolder.mjs b/src/zen/folders/ZenFolder.mjs
index ac556143e..39839f222 100644
--- a/src/zen/folders/ZenFolder.mjs
+++ b/src/zen/folders/ZenFolder.mjs
@@ -21,50 +21,56 @@
 
     static rawIcon = new DOMParser().parseFromString(
       `
-      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="-67.409 -14.145 29.279 28.92">
+      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
         <defs>
-          <linearGradient gradientUnits="userSpaceOnUse" x1="-53.05" y1="-3.8" x2="-53.05" y2="8.998" id="gradient-1">
-            <stop offset="0" style="stop-color: rgb(255, 255, 255);"/>
-            <stop offset="1" style="stop-color: rgb(0% 0% 0%)"/>
+          <linearGradient gradientUnits="userSpaceOnUse" x1="14" y1="5.625" x2="14" y2="22.375" id="gradient-0">
+            <stop offset="0" style="stop-color: rgb(255, 255, 255)"></stop>
+            <stop offset="1" style="stop-color: rgb(0% 0% 0%)"></stop>
           </linearGradient>
-          <linearGradient gradientUnits="userSpaceOnUse" x1="-40.286" y1="-3.091" x2="-40.286" y2="13.31" id="gradient-0" gradientTransform="matrix(1, 0, 0, 1, -12.717999, -4.409)">
-            <stop offset="0" style="stop-color: rgb(255, 255, 255);"/>
-            <stop offset="1" style="stop-color: rgb(0% 0% 0%)"/>
+          <linearGradient gradientUnits="userSpaceOnUse" x1="14" y1="9.625" x2="14" y2="22.375" id="gradient-1">
+            <stop offset="0" style="stop-color: rgb(255, 255, 255)"></stop>
+            <stop offset="1" style="stop-color: rgb(0% 0% 0%)"></stop>
           </linearGradient>
         </defs>
-      <!--Back Folder (path)-->
-        <path shape-rendering="geometricPrecision" d="M -61.3 -5.25 C -61.3 -6.492 -60.293 -7.5 -59.05 -7.5 L -55.102 -7.5 C -54.591 -7.5 -54.096 -7.326 -53.697 -7.007 L -52.84 -6.321 C -52.175 -5.79 -51.349 -5.5 -50.498 -5.5 L -47.05 -5.5 C -45.807 -5.5 -44.8 -4.492 -44.8 -3.25 L -44.731 4.42 L -44.708 6.651 C -44.708 7.894 -45.715 8.901 -46.958 8.901 L -58.958 8.901 C -60.201 8.901 -61.208 7.894 -61.208 6.651 L -61.3 4.752 L -61.3 -5.25 Z" style="stroke-width: 1.3px; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--zen-folder-behind-bgcolor); stroke: var(--zen-folder-stroke);">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="-1;17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-1.5 0" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+        <!--Back Folder (path)-->
+        <path d="M8 5.625H11.9473C12.4866 5.625 13.0105 5.80861 13.4316 6.14551L14.2881 6.83105C14.9308 7.34508 15.7298 7.625 16.5527 7.625H20C21.3117 7.625 22.375 8.68832 22.375 10V20C22.375 21.3117 21.3117 22.375 20 22.375H8C6.68832 22.375 5.625 21.3117 5.625 20V8C5.625 6.68832 6.68832 5.625 8 5.625Z" style="stroke-width: 1.3px; stroke: var(--zen-folder-stroke); fill: var(--zen-folder-behind-bgcolor);">
+          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-2 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </path>
-        <path shape-rendering="geometricPrecision" d="M -61.3 -5.25 C -61.3 -6.492 -60.293 -7.5 -59.05 -7.5 L -55.102 -7.5 C -54.591 -7.5 -54.096 -7.326 -53.697 -7.007 L -52.84 -6.321 C -52.175 -5.79 -51.349 -5.5 -50.498 -5.5 L -47.05 -5.5 C -45.807 -5.5 -44.8 -4.492 -44.8 -3.25 L -44.731 4.42 L -44.708 6.651 C -44.708 7.894 -45.715 8.901 -46.958 8.901 L -58.958 8.901 C -60.201 8.901 -61.208 7.894 -61.208 6.651 L -61.3 4.752 L -61.3 -5.25 Z" style="stroke-width: 1.3px; fill-opacity: 0.1; fill: url(&quot;#gradient-0&quot;); transform-origin: -53.004px 0.701px;">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="-1;17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-1.5 0" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+        <path d="M8 5.625H11.9473C12.4866 5.625 13.0105 5.80861 13.4316 6.14551L14.2881 6.83105C14.9308 7.34508 15.7298 7.625 16.5527 7.625H20C21.3117 7.625 22.375 8.68832 22.375 10V20C22.375 21.3117 21.3117 22.375 20 22.375H8C6.68832 22.375 5.625 21.3117 5.625 20V8C5.625 6.68832 6.68832 5.625 8 5.625Z" style="stroke-width: 1.3px; fill: url(#gradient-0); fill-opacity: 0.1;">
+          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-2 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </path>
-      <!--Front Folder (rect)-->
-        <rect shape-rendering="geometricPrecision" x="-61.301" y="-3.768" width="16.5" height="12.798" rx="2.25" style="stroke-width: 1.3px; transform-box: fill-box; transform-origin: 50% 50%; fill: var(--zen-folder-front-bgcolor); stroke: var(--zen-folder-stroke);" id="object-0">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="1;-17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;3 0" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+        <!--Front Folder (rect)-->
+        <rect x="5.625" y="9.625" width="16.75" height="12.75" rx="2.375" style="stroke-width: 1.3px; stroke: var(--zen-folder-stroke); fill: var(--zen-folder-front-bgcolor);">
+          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </rect>
-        <rect shape-rendering="geometricPrecision" x="-61.3" y="-3.8" width="16.5" height="12.798" style="stroke-width: 1.3px; fill-opacity: 0.1; transform-origin: -53.05px 2.599px; fill: url(&quot;#gradient-1&quot;);" id="rect-1" rx="2.25">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="1;-17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;3 0" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+        <rect x="5.625" y="9.625" width="16.75" height="12.75" rx="2.375" style="stroke-width: 1.3px; fill: url(#gradient-1); fill-opacity: 0.1;">
+          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </rect>
-      <!--Icon (g)-->
-        <g id="folder-icon" shape-rendering="geometricPrecision" style="fill-opacity: 1; transform-origin: -53.05px 5.399px; fill: var(--zen-folder-stroke);">
-          <image href="" height="19px" width="20px"/>
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="-10 -9;-7.5 -9" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animate attributeName="opacity" values="1;1" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
+        <!--Icon (g)-->
+        <g id="folder-icon" style="fill: var(--zen-folder-stroke);">
+          <image href="" height="19" width="20"></image>
+          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animate attributeName="opacity" values="0;0" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </g>
         <!--End Icon (g)-->
-        <g id="folder-dots" style="fill-opacity: 1; fill: var(--zen-folder-stroke);">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="1;-17" dur="0.2s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0.5;5 -0.5" dur="0.2s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <animate attributeName="opacity" values="0;0" dur="0.2s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
-          <path transform="translate(1.2, 0)" shape-rendering="geometricPrecision" d="M -59.363 2.243 C -59.363 2.074 -59.33 1.915 -59.262 1.76 C -59.192 1.612 -59.107 1.478 -58.996 1.373 C -58.885 1.256 -58.751 1.165 -58.598 1.101 C -58.448 1.033 -58.289 1 -58.114 1 C -57.945 1 -57.785 1.033 -57.636 1.101 C -57.482 1.165 -57.354 1.256 -57.244 1.373 C -57.131 1.478 -57.042 1.612 -56.972 1.76 C -56.904 1.915 -56.871 2.074 -56.871 2.243 C -56.871 2.414 -56.904 2.573 -56.972 2.727 C -57.042 2.876 -57.131 3.008 -57.244 3.125 C -57.354 3.232 -57.482 3.321 -57.636 3.385 C -57.785 3.455 -57.945 3.486 -58.114 3.486 C -58.289 3.486 -58.448 3.455 -58.598 3.385 C -58.751 3.321 -58.885 3.232 -58.996 3.125 C -59.107 3.008 -59.192 2.876 -59.262 2.727 C -59.33 2.573 -59.363 2.414 -59.363 2.243 Z"/>
-          <path shape-rendering="geometricPrecision" d="M -54.38 2.243 C -54.38 2.074 -54.347 1.915 -54.279 1.76 C -54.215 1.612 -54.124 1.478 -54.019 1.373 C -53.902 1.256 -53.769 1.165 -53.621 1.101 C -53.466 1.033 -53.306 1 -53.137 1 C -52.966 1 -52.807 1.033 -52.653 1.101 C -52.504 1.165 -52.372 1.256 -52.265 1.373 C -52.148 1.478 -52.059 1.612 -51.995 1.76 C -51.925 1.915 -51.894 2.074 -51.894 2.243 C -51.894 2.414 -51.925 2.573 -51.995 2.727 C -52.059 2.876 -52.148 3.008 -52.265 3.125 C -52.372 3.232 -52.504 3.321 -52.653 3.385 C -52.807 3.455 -52.966 3.486 -53.137 3.486 C -53.306 3.486 -53.466 3.455 -53.621 3.385 C -53.769 3.321 -53.902 3.232 -54.019 3.125 C -54.124 3.008 -54.215 2.876 -54.279 2.727 C -54.347 2.573 -54.38 2.414 -54.38 2.243 Z"/>
-          <path transform="translate(-1.2, 0)" shape-rendering="geometricPrecision" d="M -49.402 2.243 C -49.402 2.074 -49.37 1.915 -49.302 1.76 C -49.232 1.612 -49.147 1.478 -49.036 1.373 C -48.924 1.256 -48.791 1.165 -48.638 1.101 C -48.488 1.033 -48.329 1 -48.154 1 C -47.984 1 -47.824 1.033 -47.676 1.101 C -47.521 1.165 -47.395 1.256 -47.282 1.373 C -47.171 1.478 -47.082 1.612 -47.012 1.76 C -46.942 1.915 -46.911 2.074 -46.911 2.243 C -46.911 2.414 -46.942 2.573 -47.012 2.727 C -47.082 2.876 -47.171 3.008 -47.282 3.125 C -47.395 3.232 -47.521 3.321 -47.676 3.385 C -47.824 3.455 -47.984 3.486 -48.154 3.486 C -48.329 3.486 -48.488 3.455 -48.638 3.385 C -48.791 3.321 -48.924 3.232 -49.036 3.125 C -49.147 3.008 -49.232 2.876 -49.302 2.727 C -49.37 2.573 -49.402 2.414 -49.402 2.243 Z"/>
+        <g id="folder-dots" style="fill: var(--zen-folder-stroke);">
+          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <animate attributeName="opacity" values="0;0" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
+          <ellipse cx="10" cy="16" rx="1.25" ry="1.25"></ellipse>
+          <ellipse cx="14" cy="16" rx="1.25" ry="1.25"></ellipse>
+          <ellipse cx="18" cy="16" rx="1.25" ry="1.25"></ellipse>
         </g>
       </svg>`,
       'image/svg+xml'
diff --git a/src/zen/folders/zen-folders.css b/src/zen/folders/zen-folders.css
index b046b9dc8..0a95b500d 100644
--- a/src/zen/folders/zen-folders.css
+++ b/src/zen/folders/zen-folders.css
@@ -185,7 +185,7 @@ zen-folder {
   visibility: visible;
 
   --zen-folder-behind-bgcolor: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 85%, white),
+    color-mix(in srgb, var(--zen-primary-color) 60%, gray),
     color-mix(in srgb, var(--zen-primary-color) 60%, #c1c1c1)
   );
   --zen-folder-front-bgcolor: light-dark(
@@ -193,8 +193,8 @@ zen-folder {
     color-mix(in srgb, var(--zen-primary-color), black 40%)
   );
   --zen-folder-stroke: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 60%, black),
-    color-mix(in srgb, var(--zen-colors-primary) 20%, var(--toolbox-textcolor))
+    color-mix(in srgb, var(--zen-primary-color) 50%, black),
+    color-mix(in srgb, var(--zen-colors-primary) 15%, var(--toolbox-textcolor))
   );
 
   -moz-window-dragging: no-drag;
@@ -265,7 +265,7 @@ zen-folder {
     }
 
     .tab-group-folder-icon {
-      width: 30px;
+      width: 28px;
       height: 28px;
       align-content: center;
       pointer-events: none;
@@ -273,29 +273,19 @@ zen-folder {
       pointer-events: none;
 
       :root[zen-sidebar-expanded] & {
-        left: 4px;
+        left: 5px;
       }
 
       & svg {
         filter: contrast(125%);
-        transition: 0.2s scale;
-        transform-origin: right bottom;
-
-        :root:not([zen-sidebar-expanded]) & {
-          transform-origin: center bottom;
-        }
 
         & image {
           fill-opacity: 0.9;
           -moz-context-properties: fill, fill-opacity;
           fill: var(--zen-folder-stroke);
-          transform: translate(-182%, 2.4px);
+          transform: translate(4px, 6.5px);
         }
       }
-
-      & svg[state='open'] {
-        scale: 0.92;
-      }
     }
 
     &::before {