feat(desktop): update sidebar color scheme

Innei · Innei · commit 1c9cb9c3baf6 · 2025-04-23T20:17:46.000+08:00
- Introduced new sidebar color variables in Tailwind configuration and CSS files.
- Updated various components to utilize the new sidebar colors for consistency.
- Adjusted vibrancy settings in the window creation process for improved visual effects.
- Refactored background and media components to align with the new color scheme.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/src/main/src/window.ts b/apps/desktop/src/main/src/window.ts
@@ -61,8 +61,8 @@ export function createWindow(
           x: 18,
           y: 18,
         },
-        vibrancy: "under-window",
-        visualEffectState: "active",
+        vibrancy: "sidebar",
+        visualEffectState: "followWindow",
         transparent: true,
       } as Electron.BrowserWindowConstructorOptions)
       break
diff --git a/apps/desktop/src/renderer/index.html b/apps/desktop/src/renderer/index.html
@@ -111,13 +111,13 @@
           width: 16rem;
           flex-shrink: 0;
           height: 100%;
-          background-color: hsl(var(--fo-native));
+          background-color: hsl(var(--fo-sidebar));
         }
         [data-build-type="electron"] .sidebar {
-          background-color: hsl(var(--fo-native) / 0.3);
+          background-color: hsl(var(--fo-sidebar) / 0.3);
         }
         [data-build-type="electron"][data-theme="dark"] .sidebar {
-          background-color: hsl(var(--fo-native) / 0.1);
+          background-color: hsl(var(--fo-sidebar) / 0.1);
         }
         .content {
           flex-grow: 1;
@@ -127,18 +127,18 @@
         }
 
         [data-theme="light"] {
-          --fo-native: 240 1.6% 87.6%;
+          --fo-sidebar: 240 1.6% 87.6%;
         }
         [data-theme="dark"] {
-          --fo-native: 30 1.7% 23.5%;
+          --fo-sidebar: 30 1.7% 23.5%;
         }
 
         [data-build-type="web"] {
-          --fo-native: 240 4.8% 95.9%;
+          --fo-sidebar: 240 4.8% 95.9%;
         }
 
         [data-build-type="web"][data-theme="dark"] {
-          --fo-native: 220 8.1% 14.5%;
+          --fo-sidebar: 220 8.1% 14.5%;
         }
       </style>
       <div class="skeleton">
diff --git a/apps/desktop/src/renderer/src/components/ui/background/WindowUnderBlur.tsx b/apps/desktop/src/renderer/src/components/ui/background/WindowUnderBlur.tsx
@@ -7,24 +7,14 @@ import { useUISettingKey } from "~/atoms/settings/ui"
 type Props = Component<
   React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 >
-const MacOSVibrancy: Props = ({ className, children, ...rest }) => (
-  <Focusable className={cn("bg-native/30 dark:bg-native/10", className)} {...rest}>
-    {children}
-  </Focusable>
-)
+const MacOSVibrancy: Props = ({ children, ...rest }) => <Focusable {...rest}>{children}</Focusable>
 
 const Noop: Props = ({ children, className, ...rest }) => (
-  <Focusable className={cn("bg-native", className)} {...rest}>
+  <Focusable className={cn("bg-sidebar", className)} {...rest}>
     {children}
   </Focusable>
 )
 
-// Disable blur effect on Windows, because electron backgroundMaterial has some issues
-// const Win32Material: Props = ({ className, children, ...rest }) => (
-//   <div className={cn("bg-transparent", className)} {...rest}>
-//     {children}
-//   </div>
-// )
 export const WindowUnderBlur: Props = SYSTEM_CAN_UNDER_BLUR_WINDOW
   ? (props) => {
       const opaqueSidebar = useUISettingKey("opaqueSidebar")
diff --git a/apps/desktop/src/renderer/src/components/ui/media/preview-media.tsx b/apps/desktop/src/renderer/src/components/ui/media/preview-media.tsx
@@ -87,7 +87,7 @@ const Wrapper: Component<{
           className={cn(
             "relative flex h-full w-auto overflow-hidden",
             sideContent
-              ? "bg-native min-w-96 items-center justify-center rounded-l-xl"
+              ? "bg-sidebar min-w-96 items-center justify-center rounded-l-xl"
               : "rounded-xl",
           )}
         >
diff --git a/apps/desktop/src/renderer/src/modules/app-layout/feed-column/desktop.tsx b/apps/desktop/src/renderer/src/modules/app-layout/feed-column/desktop.tsx
@@ -287,7 +287,7 @@ const FeedResponsiveResizerContainer = ({
           "--fo-feed-col-w": `${position}px`,
         }}
       >
-        <Slot className={!feedColumnShow ? "!bg-native" : ""}>{children}</Slot>
+        <Slot className={!feedColumnShow ? "!bg-sidebar" : ""}>{children}</Slot>
       </div>
 
       <div
diff --git a/apps/desktop/src/renderer/src/modules/modal/shortcuts.tsx b/apps/desktop/src/renderer/src/modules/modal/shortcuts.tsx
@@ -52,17 +52,19 @@ const ShortcutModalContent = () => {
         <i className="i-mgc-close-cute-re" />
       </MotionButtonBase>
       <ScrollArea.ScrollArea scrollbarClassName="w-2" rootClassName="w-full h-full">
-        <div className="w-full space-y-6 px-4 pb-5 pt-3">
+        <div className="w-full space-y-6 px-4 pb-5 pt-6">
           {Object.keys(shortcuts).map((type) => (
             <section key={type}>
-              <div className="mb-2 text-base font-medium capitalize">{t(shortcutsType[type])}</div>
+              <div className="text-text-secondary mb-2 pl-4 text-xs font-medium capitalize">
+                {t(shortcutsType[type])}
+              </div>
               <div className="rounded-md border text-[13px] text-zinc-600 dark:text-zinc-300">
                 {Object.keys(shortcuts[type]).map((action, index) => (
                   <div
                     key={`${type}-${action}`}
                     className={cn(
                       "flex h-9 items-center justify-between px-3 py-1.5",
-                      index % 2 && "bg-native/40",
+                      index % 2 && "bg-fill-quinary",
                     )}
                   >
                     <div>{t(shortcuts[type][action].name)}</div>
diff --git a/apps/desktop/src/renderer/src/modules/settings/modal/layout.tsx b/apps/desktop/src/renderer/src/modules/settings/modal/layout.tsx
@@ -1,3 +1,4 @@
+import { Spring } from "@follow/components/constants/spring.js"
 import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { LetsIconsResizeDownRightLight } from "@follow/components/icons/resize.jsx"
@@ -66,15 +67,15 @@ export function SettingModalLayout(
     overlay: state.modalOverlay,
   }))
 
-  const measureDragConstraints = useCallback((constraints: BoundingBox) => {
+  const measureDragConstraints = useRef((constraints: BoundingBox) => {
     if (getOS() === "Windows") {
       return {
         ...constraints,
         top: constraints.top + ElECTRON_CUSTOM_TITLEBAR_HEIGHT,
       }
     }
     return constraints
-  }, [])
+  }).current
 
   return (
     <div
@@ -87,6 +88,7 @@ export function SettingModalLayout(
           opacity: 0,
           scale: 0.96,
         }}
+        transition={Spring.presets.smooth}
         className={cn(
           "border-border bg-theme-background relative flex rounded-xl rounded-br-none border",
           !overlay && "shadow-perfect",
diff --git a/apps/desktop/src/renderer/src/pages/settings/(settings)/shortcuts.tsx b/apps/desktop/src/renderer/src/pages/settings/(settings)/shortcuts.tsx
@@ -23,14 +23,16 @@ export function Component() {
       <div className="mt-4 space-y-6">
         {Object.keys(shortcuts).map((type) => (
           <section key={type}>
-            <div className="mb-2 text-sm font-medium capitalize">{t(shortcutsType[type])}</div>
-            <div className="rounded-md border text-[13px] text-zinc-600 dark:text-zinc-300">
+            <div className="text-text-secondary mb-2 text-sm font-medium capitalize">
+              {t(shortcutsType[type])}
+            </div>
+            <div className="text-text rounded-md border text-[13px]">
               {Object.keys(shortcuts[type]).map((action, index) => (
                 <div
                   key={`${type}-${action}`}
                   className={cn(
                     "flex h-9 items-center justify-between px-3 py-1.5",
-                    index % 2 && "bg-native/40",
+                    index % 2 && "bg-fill-quinary",
                   )}
                 >
                   <div>{t(shortcuts[type][action].name)}</div>
diff --git a/apps/desktop/tailwind.config.ts b/apps/desktop/tailwind.config.ts
@@ -1,6 +1,7 @@
 import { merge } from "es-toolkit/compat"
 import plugin from "tailwindcss/plugin"
 import resolveConfig from "tailwindcss/resolveConfig"
+import type { Config } from "tailwindcss/types/config"
 
 import { baseTwConfig } from "../../configs/tailwind.base.config"
 
@@ -44,7 +45,9 @@ export default resolveConfig(
         height: {
           screen: "100svh",
         },
-
+        colors: {
+          sidebar: "hsl(var(--fo-sidebar) / <alpha-value>)",
+        },
         keyframes: {
           "caret-blink": {
             "0%,70%,100%": { opacity: "1" },
@@ -116,5 +119,5 @@ export default resolveConfig(
         )
       }),
     ],
-  }),
+  } as Config),
 )
diff --git a/configs/tailwind.base.config.ts b/configs/tailwind.base.config.ts
@@ -35,11 +35,6 @@ const twConfig = {
 
         accent: "hsl(var(--fo-a) / <alpha-value>)",
 
-        native: {
-          DEFAULT: "hsl(var(--fo-native) / <alpha-value>)",
-          active: "hsl(var(--fo-native-active) / <alpha-value>)",
-        },
-
         theme: {
           // https://uicolors.app/create
           accent: {
diff --git a/packages/components/assets/colors-media.css b/packages/components/assets/colors-media.css
@@ -59,13 +59,13 @@
 }
 
 :root {
-  --fo-native: 240 4.8% 95.9%;
-  --fo-native-active: 240 4.9% 83.9%;
+  --fo-sidebar: 240 4.8% 95.9%;
+  --fo-sidebar-active: 240 4.9% 83.9%;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --fo-native: 220 8.1% 14.5%;
-    --fo-native-active: 198 31.3% 6.3%;
+    --fo-sidebar: 220 8.1% 14.5%;
+    --fo-sidebar-active: 198 31.3% 6.3%;
   }
 }
diff --git a/packages/components/assets/colors.css b/packages/components/assets/colors.css
@@ -45,20 +45,20 @@
 }
 
 [data-theme="light"] {
-  --fo-native: 240 1.6% 87.6%;
-  --fo-native-active: 240 0.9% 78.2%;
+  --fo-sidebar: 240 1.6% 87.6%;
+  --fo-sidebar-active: 240 0.9% 78.2%;
 }
 [data-theme="dark"] {
-  --fo-native: 30 1.7% 23.5%;
-  --fo-native-active: 20 2.1% 28.4%;
+  --fo-sidebar: 30 1.7% 23.5%;
+  --fo-sidebar-active: 20 2.1% 28.4%;
 }
 
 [data-build-type="web"] {
-  --fo-native: 240 4.8% 95.9%;
-  --fo-native-active: 240 4.9% 83.9%;
+  --fo-sidebar: 240 4.8% 95.9%;
+  --fo-sidebar-active: 240 4.9% 83.9%;
 }
 
 [data-build-type="web"][data-theme="dark"] {
-  --fo-native: 220 8.1% 14.5%;
-  --fo-native-active: 198 31.3% 6.3%;
+  --fo-sidebar: 220 8.1% 14.5%;
+  --fo-sidebar-active: 198 31.3% 6.3%;
 }

Original file line number	Diff line number	Diff line change
`@@ -111,13 +111,13 @@`
`111`	`111`	`width: 16rem;`
`112`	`112`	`flex-shrink: 0;`
`113`	`113`	`height: 100%;`
`114`		`- background-color: hsl(var(--fo-native));`
	`114`	`+ background-color: hsl(var(--fo-sidebar));`
`115`	`115`	`}`
`116`	`116`	`[data-build-type="electron"] .sidebar {`
`117`		`- background-color: hsl(var(--fo-native) / 0.3);`
	`117`	`+ background-color: hsl(var(--fo-sidebar) / 0.3);`
`118`	`118`	`}`
`119`	`119`	`[data-build-type="electron"][data-theme="dark"] .sidebar {`
`120`		`- background-color: hsl(var(--fo-native) / 0.1);`
	`120`	`+ background-color: hsl(var(--fo-sidebar) / 0.1);`
`121`	`121`	`}`
`122`	`122`	`.content {`
`123`	`123`	`flex-grow: 1;`
`@@ -127,18 +127,18 @@`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`[data-theme="light"] {`
`130`		`- --fo-native: 240 1.6% 87.6%;`
	`130`	`+ --fo-sidebar: 240 1.6% 87.6%;`
`131`	`131`	`}`
`132`	`132`	`[data-theme="dark"] {`
`133`		`- --fo-native: 30 1.7% 23.5%;`
	`133`	`+ --fo-sidebar: 30 1.7% 23.5%;`
`134`	`134`	`}`
`135`	`135`
`136`	`136`	`[data-build-type="web"] {`
`137`		`- --fo-native: 240 4.8% 95.9%;`
	`137`	`+ --fo-sidebar: 240 4.8% 95.9%;`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`[data-build-type="web"][data-theme="dark"] {`
`141`		`- --fo-native: 220 8.1% 14.5%;`
	`141`	`+ --fo-sidebar: 220 8.1% 14.5%;`
`142`	`142`	`}`
`143`	`143`	`</style>`
`144`	`144`	`<div class="skeleton">`
Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@ const Wrapper: Component<{`
`87`	`87`	`className={cn(`
`88`	`88`	`"relative flex h-full w-auto overflow-hidden",`
`89`	`89`	`sideContent`
`90`		`- ? "bg-native min-w-96 items-center justify-center rounded-l-xl"`
	`90`	`+ ? "bg-sidebar min-w-96 items-center justify-center rounded-l-xl"`
`91`	`91`	`: "rounded-xl",`
`92`	`92`	`)}`
`93`	`93`	`>`
Original file line number	Diff line number	Diff line change
`@@ -287,7 +287,7 @@ const FeedResponsiveResizerContainer = ({`
`287`	`287`	"--fo-feed-col-w": `${position}px`,
`288`	`288`	`}}`
`289`	`289`	`>`
`290`		`- <Slot className={!feedColumnShow ? "!bg-native" : ""}>{children}</Slot>`
	`290`	`+ <Slot className={!feedColumnShow ? "!bg-sidebar" : ""}>{children}</Slot>`
`291`	`291`	`</div>`
`292`	`292`
`293`	`293`	`<div`