From 1fcdb67049e2ee124f5fd68fb3b98eaaed812ec7 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sat, 26 Sep 2026 10:59:08 +0800
Subject: [PATCH] fix(web): lighten heavy fills and drop template filler

Checked controls, progress, and update chips use the same charcoal as switches. Template actions and attachment filters no longer use a solid black fill, and the template page drops its two explanatory lines.
---
 apps/web/src/components/AssetsPane.tsx                 | 2 +-
 apps/web/src/components/EditorPane.tsx                 | 4 ++--
 apps/web/src/components/EditorTagPicker.tsx            | 2 +-
 apps/web/src/components/TemplatesPane.tsx              | 5 +----
 apps/web/src/components/dialogs/TemplatesDialog.tsx    | 5 +----
 apps/web/src/components/plugins/PluginCatalogCard.tsx  | 2 +-
 apps/web/src/components/settings/DataExportCard.tsx    | 2 +-
 apps/web/src/components/settings/PluginManagerCard.tsx | 4 ++--
 apps/web/src/components/settings/WebDavBackupCard.tsx  | 2 +-
 apps/web/src/components/ui/badge.tsx                   | 2 +-
 apps/web/src/lib/ui-palette.test.mjs                   | 1 +
 apps/web/src/styles/globals.css                        | 2 +-
 packages/shared/src/i18n/en-US.ts                      | 2 --
 packages/shared/src/i18n/ja.ts                         | 2 --
 packages/shared/src/i18n/zh-CN.ts                      | 2 --
 15 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/components/AssetsPane.tsx b/apps/web/src/components/AssetsPane.tsx
index c9df0901..b467687f 100644
--- a/apps/web/src/components/AssetsPane.tsx
+++ b/apps/web/src/components/AssetsPane.tsx
@@ -236,7 +236,7 @@ export const AssetsPane = ({ onClose, repository, onOpenExecutionCenter }: Asset
                 onClick={() => setFilterType(type)}
                 className={`rounded-lg border border-transparent px-3 py-1.5 text-xs transition-colors ${
                   filterType === type
-                    ? "bg-slate-950 font-semibold text-slate-50"
+                    ? "bg-workspace-selection font-semibold text-slate-950"
                     : "font-medium text-slate-600 hover:bg-slate-100"
                 }`}
               >
diff --git a/apps/web/src/components/EditorPane.tsx b/apps/web/src/components/EditorPane.tsx
index 91e61763..d2737498 100644
--- a/apps/web/src/components/EditorPane.tsx
+++ b/apps/web/src/components/EditorPane.tsx
@@ -3795,7 +3795,7 @@ const RichEditorPane = ({
             </IconTooltip>
             {mobileEditingActive && !readOnly && (
               <button
-                className="inline-flex h-8 items-center justify-center rounded-full bg-slate-950 px-3 text-xs font-semibold text-white transition hover:bg-slate-800 disabled:bg-slate-200 disabled:text-slate-500 sm:hidden"
+                className="inline-flex h-8 items-center justify-center rounded-full bg-slate-700 px-3 text-xs font-semibold text-slate-50 transition hover:bg-slate-800 disabled:bg-slate-200 disabled:text-slate-500 sm:hidden"
                 type="button"
                 disabled={mobileDoneDisabled}
                 onClick={handleMobileDone}
@@ -4171,7 +4171,7 @@ const RichEditorPane = ({
                 />
                 <div className="absolute right-3 top-3 flex gap-2">
                   <button
-                    className="rounded-full border border-slate-900 bg-slate-900 px-3 py-1.5 text-sm font-semibold text-slate-50 shadow-sm"
+                    className="rounded-full border border-slate-700 bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-50 shadow-sm"
                     type="button"
                     onClick={() => void handleMobileClipboardInput()}
                   >
diff --git a/apps/web/src/components/EditorTagPicker.tsx b/apps/web/src/components/EditorTagPicker.tsx
index 8d42d44e..91c847c8 100644
--- a/apps/web/src/components/EditorTagPicker.tsx
+++ b/apps/web/src/components/EditorTagPicker.tsx
@@ -258,7 +258,7 @@ export const EditorTagPicker = ({ contentMarkdown, disabled, loadTags, title, va
                     onClick={() => toggleTag(tag.name)}
                     aria-pressed={selected}
                   >
-                    <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded border ${selected ? "border-slate-950 bg-slate-950 text-slate-50" : "border-slate-300 bg-card text-transparent"}`}>
+                    <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded border ${selected ? "border-[var(--checkbox-on)] bg-[var(--checkbox-on)] text-[var(--checkbox-mark)]" : "border-slate-300 bg-card text-transparent"}`}>
                       {selected && <Check className="h-3.5 w-3.5" />}
                     </span>
                     <span className="min-w-0 flex-1 truncate font-medium">#{tag.name}</span>
diff --git a/apps/web/src/components/TemplatesPane.tsx b/apps/web/src/components/TemplatesPane.tsx
index d29311fd..88f56b33 100644
--- a/apps/web/src/components/TemplatesPane.tsx
+++ b/apps/web/src/components/TemplatesPane.tsx
@@ -176,7 +176,6 @@ export const TemplatesPane = ({
               <LayoutList className="h-4 w-4 text-slate-900" />
               {t("templates.title")}
             </h1>
-            <p className="mt-0.5 text-xs text-slate-500">{t("templates.description")}</p>
           </div>
         </div>
         <ExecutionCenterButton onClick={onOpenExecutionCenter} />
@@ -186,7 +185,6 @@ export const TemplatesPane = ({
       <main className="min-h-0 flex-1 overflow-y-auto px-4 py-6 lg:px-8 lg:py-8">
         <div className="mx-auto w-full max-w-5xl space-y-8">
 
-          {/* Every template is workspace-owned and fully editable. */}
           <section>
             <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
               <div>
@@ -196,7 +194,6 @@ export const TemplatesPane = ({
                     {savedTemplates.length}
                   </span>
                 </h2>
-                <p className="mt-0.5 text-xs text-slate-500">{t("templates.myTemplatesSubtitle")}</p>
               </div>
               {!creatingTemplate && !editingTemplate && (
                 <Button
@@ -425,7 +422,7 @@ export const TemplatesPane = ({
 
                       <button
                         type="button"
-                        className="inline-flex items-center gap-1.5 rounded-lg bg-slate-950 px-3 py-1.5 text-xs font-semibold text-slate-50 transition-colors hover:bg-slate-800 disabled:opacity-50"
+                        className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-card px-3 py-1.5 text-xs font-semibold text-slate-800 shadow-2xs transition-colors hover:bg-slate-50 hover:text-slate-950 disabled:opacity-50"
                         disabled={!canCreateMemo || isCreating}
                         onClick={(e) => {
                           e.stopPropagation();
diff --git a/apps/web/src/components/dialogs/TemplatesDialog.tsx b/apps/web/src/components/dialogs/TemplatesDialog.tsx
index 6e9efd6e..cbfc7036 100644
--- a/apps/web/src/components/dialogs/TemplatesDialog.tsx
+++ b/apps/web/src/components/dialogs/TemplatesDialog.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Check, LayoutList, Pencil, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import type { MemoTemplate } from "@edgeever/shared";
@@ -61,9 +61,6 @@ export const TemplatesDialog = ({
               <LayoutList className="h-4 w-4 text-slate-900" />
               {t("templates.title")}
             </DialogTitle>
-            <DialogDescription className="mt-1 text-xs text-slate-500">
-              {t("templates.description")}
-            </DialogDescription>
           </div>
         </DialogHeader>
 
diff --git a/apps/web/src/components/plugins/PluginCatalogCard.tsx b/apps/web/src/components/plugins/PluginCatalogCard.tsx
index 5fcbf7f2..d1ebb6f5 100644
--- a/apps/web/src/components/plugins/PluginCatalogCard.tsx
+++ b/apps/web/src/components/plugins/PluginCatalogCard.tsx
@@ -95,7 +95,7 @@ export const PluginCatalogCard = ({
               </span>
             ) : null}
             {update ? (
-              <span className="rounded-full bg-slate-950 px-2 py-0.5 text-xs font-medium text-slate-50">
+              <span className="rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-800">
                 {t("plugins.updates.available", { version: update.latestVersion })}
               </span>
             ) : null}
diff --git a/apps/web/src/components/settings/DataExportCard.tsx b/apps/web/src/components/settings/DataExportCard.tsx
index 5faa2953..6d84c8ae 100644
--- a/apps/web/src/components/settings/DataExportCard.tsx
+++ b/apps/web/src/components/settings/DataExportCard.tsx
@@ -39,7 +39,7 @@ const Progress = ({ progress }: { progress: EdgeEverZipProgress }) => {
   const percentage = progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0;
   return (
     <div className="h-1.5 overflow-hidden rounded-full bg-slate-200">
-      <div className="h-full rounded-full bg-slate-900 transition-[width]" style={{ width: `${percentage}%` }} />
+      <div className="h-full rounded-full bg-slate-600 transition-[width]" style={{ width: `${percentage}%` }} />
     </div>
   );
 };
diff --git a/apps/web/src/components/settings/PluginManagerCard.tsx b/apps/web/src/components/settings/PluginManagerCard.tsx
index f73138f1..1ad82a35 100644
--- a/apps/web/src/components/settings/PluginManagerCard.tsx
+++ b/apps/web/src/components/settings/PluginManagerCard.tsx
@@ -176,7 +176,7 @@ const PluginDetailView = ({
             <h2 className="text-sm font-semibold text-slate-950">{name}</h2>
             <span className="rounded bg-slate-100 px-1.5 py-0.5 text-xs font-semibold uppercase tracking-wide text-slate-500">{manifest.type}</span>
             {update ? (
-              <span className="rounded-full bg-slate-950 px-2 py-0.5 text-xs font-medium text-slate-50">
+              <span className="rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-800">
                 {t("plugins.updates.available", { version: update.latestVersion })}
               </span>
             ) : null}
@@ -423,7 +423,7 @@ export const PluginManagerCard = ({
                       : t("plugins.updates.found", { count: lastManualCheckCount })}
                 </span>
                 {lastManualCheckCount === null && (updateQuery.data?.updates.length ?? 0) > 0 ? (
-                  <span className="rounded-full bg-slate-950 px-1.5 py-0.5 text-xs font-semibold text-slate-50">
+                  <span className="rounded-full bg-slate-200 px-1.5 py-0.5 text-xs font-semibold text-slate-800">
                     {updateQuery.data?.updates.length}
                   </span>
                 ) : null}
diff --git a/apps/web/src/components/settings/WebDavBackupCard.tsx b/apps/web/src/components/settings/WebDavBackupCard.tsx
index 4e19c673..237c765e 100644
--- a/apps/web/src/components/settings/WebDavBackupCard.tsx
+++ b/apps/web/src/components/settings/WebDavBackupCard.tsx
@@ -27,7 +27,7 @@ const Progress = ({ progress }: { progress: EdgeEverZipProgress }) => {
   const percentage = progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0;
   return (
     <div className="h-1.5 overflow-hidden rounded-full bg-slate-200">
-      <div className="h-full rounded-full bg-slate-900 transition-[width]" style={{ width: `${percentage}%` }} />
+      <div className="h-full rounded-full bg-slate-600 transition-[width]" style={{ width: `${percentage}%` }} />
     </div>
   );
 };
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index c8cec46c..63602e51 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -7,7 +7,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-slate-900 text-slate-50",
+        default: "border-transparent bg-slate-700 text-slate-50",
         secondary: "border-transparent bg-slate-100 text-slate-900",
         destructive: "border-transparent bg-red-600 text-white",
         outline: "border-slate-200 text-slate-950",
diff --git a/apps/web/src/lib/ui-palette.test.mjs b/apps/web/src/lib/ui-palette.test.mjs
index 67dc49a2..779561fd 100644
--- a/apps/web/src/lib/ui-palette.test.mjs
+++ b/apps/web/src/lib/ui-palette.test.mjs
@@ -26,6 +26,7 @@ describe("application color system", () => {
     expect(globals).toContain("--accent-foreground: 0 0% 7%;");
     expect(globals).not.toContain("--accent-foreground: 158 70% 25%;");
     expect(globals).toContain("--switch-track-on: #525252;");
+    expect(globals).toContain("--checkbox-on: #525252;");
     expect(globals).toContain("--switch-track-on: #e7ebe8;");
     expect(switchSource).toContain("data-[state=checked]:bg-[var(--switch-track-on)]");
     expect(switchSource).not.toContain("bg-emerald-500");
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index ef89f2c0..5b5f3abe 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -310,7 +310,7 @@ html.dark[data-edgeever-environment="demo"] body::after {
     --switch-thumb: #ffffff;
     --switch-track-on: #525252;
     --switch-thumb-on: #ffffff;
-    --checkbox-on: #1a1d21;
+    --checkbox-on: #525252;
     --checkbox-mark: #ffffff;
     --slate-50-rgb: 250 250 250;
     --slate-100-rgb: 245 245 245;
diff --git a/packages/shared/src/i18n/en-US.ts b/packages/shared/src/i18n/en-US.ts
index 3f0c0cbf..ba25469a 100644
--- a/packages/shared/src/i18n/en-US.ts
+++ b/packages/shared/src/i18n/en-US.ts
@@ -2390,7 +2390,6 @@ export const enUS = {
   },
   templates: {
     title: "Template Center",
-    description: "Create, edit, and reuse your note templates.",
     create: "New Template",
     useTemplate: "New note from template",
     useThisTemplate: "Use Template",
@@ -2398,7 +2397,6 @@ export const enUS = {
     previewTitle: "Template Preview",
     createDescription: "Create a reusable template from scratch.",
     myTemplates: "Templates",
-    myTemplatesSubtitle: "Every template belongs to this workspace and can be edited or deleted",
     savedDescription: "A reusable note template.",
     emptyMyTemplates: "No templates yet",
     emptyMyTemplatesHint: "Click \"New Template\" above or save any note as a template directly in the editor.",
diff --git a/packages/shared/src/i18n/ja.ts b/packages/shared/src/i18n/ja.ts
index 4a8ad750..c9ec3629 100644
--- a/packages/shared/src/i18n/ja.ts
+++ b/packages/shared/src/i18n/ja.ts
@@ -2390,7 +2390,6 @@ export const ja = {
   },
   templates: {
     title: "テンプレートセンター",
-    description: "ノートテンプレートを作成、編集、再利用します。",
     create: "新しいテンプレート",
     useTemplate: "テンプレートから新しいノート",
     useThisTemplate: "このテンプレートを使う",
@@ -2398,7 +2397,6 @@ export const ja = {
     previewTitle: "テンプレートプレビュー",
     createDescription: "ゼロから再利用できるテンプレートを作成します。",
     myTemplates: "テンプレート",
-    myTemplatesSubtitle: "すべてのテンプレートはこのワークスペースに属し、編集や削除ができます",
     savedDescription: "再利用できるノートテンプレートです。",
     emptyMyTemplates: "まだテンプレートがありません",
     emptyMyTemplatesHint: "上の「新しいテンプレート」をクリックするか、エディタで任意のノートをテンプレートとして保存できます。",
diff --git a/packages/shared/src/i18n/zh-CN.ts b/packages/shared/src/i18n/zh-CN.ts
index 37776ed6..92ce4d3f 100644
--- a/packages/shared/src/i18n/zh-CN.ts
+++ b/packages/shared/src/i18n/zh-CN.ts
@@ -2388,7 +2388,6 @@ export const zhCN = {
   },
   templates: {
     title: "模板中心",
-    description: "创建、修改和复用你的笔记模板。",
     create: "新建模板",
     useTemplate: "从模板新建笔记",
     useThisTemplate: "使用此模板新建",
@@ -2396,7 +2395,6 @@ export const zhCN = {
     previewTitle: "模板结构预览",
     createDescription: "从零开始创建一个可重复使用的模板。",
     myTemplates: "模板",
-    myTemplatesSubtitle: "所有模板都属于当前工作区，可以自由修改或删除",
     savedDescription: "可重复使用的笔记模板。",
     emptyMyTemplates: "暂无模板",
     emptyMyTemplatesHint: "你可以点击上方「新建模板」，或在笔记编辑器中将常用笔记另存为模板。",