feat(desktop): unify variable colors

Innei · Innei · commit 2433d75e2a4c · 2025-04-22T23:11:12.000+08:00
Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -70,6 +70,7 @@
     "electron-devtools-installer": "4.0.0",
     "electron-packager-languages": "0.6.0",
     "electron-vite": "3.1.0",
+    "es-toolkit": "1.35.0",
     "fake-indexeddb": "6.0.0",
     "happy-dom": "17.4.4",
     "hono": "4.7.7",
diff --git a/apps/desktop/tailwind.config.ts b/apps/desktop/tailwind.config.ts
@@ -1,99 +1,120 @@
+import { merge } from "es-toolkit/compat"
 import plugin from "tailwindcss/plugin"
 import resolveConfig from "tailwindcss/resolveConfig"
 
 import { baseTwConfig } from "../../configs/tailwind.base.config"
 
 const isWebBuild = !!process.env.WEB_BUILD || !!process.env.RN_BUILD || !!process.env.VERCEL
+export default resolveConfig(
+  merge({}, baseTwConfig, {
+    content: [
+      "./src/renderer/src/**/*.{ts,tsx}",
+      "./apps/web/src/**/*.{ts,tsx}",
 
-export default resolveConfig({
-  ...baseTwConfig,
-  content: [
-    "./src/renderer/src/**/*.{ts,tsx}",
-    "./apps/web/src/**/*.{ts,tsx}",
+      "./src/renderer/index.html",
+      "./apps/web/index.html",
+      "../../packages/**/*.{ts,tsx}",
+      "!../../packages/**/node_modules",
+    ],
+    future: {
+      hoverOnlyWhenSupported: isWebBuild,
+    },
+    theme: {
+      extend: {
+        cursor: {
+          button: "var(--cursor-button)",
+          select: "var(--cursor-select)",
+          checkbox: "var(--cursor-checkbox)",
+          link: "var(--cursor-link)",
+          menu: "var(--cursor-menu)",
+          radio: "var(--cursor-radio)",
+          switch: "var(--cursor-switch)",
+          card: "var(--cursor-card)",
+        },
 
-    "./src/renderer/index.html",
-    "./apps/web/index.html",
-    "../../packages/**/*.{ts,tsx}",
-    "!../../packages/**/node_modules",
-  ],
-  future: {
-    hoverOnlyWhenSupported: isWebBuild,
-  },
-  theme: {
-    ...baseTwConfig.theme,
-    extend: {
-      ...baseTwConfig.theme?.extend,
-      spacing: {
-        "safe-inset-top": "var(--fo-window-padding-top, 0)",
-        "margin-macos-traffic-light-x": "var(--fo-macos-traffic-light-width, 0)",
-        "margin-macos-traffic-light-y": "var(--fo-macos-traffic-light-height, 0)",
-      },
+        width: {
+          "feed-col": "var(--fo-feed-col-w)",
+        },
+        spacing: {
+          "safe-inset-top": "var(--fo-window-padding-top, 0)",
+          "margin-macos-traffic-light-x": "var(--fo-macos-traffic-light-width, 0)",
+          "margin-macos-traffic-light-y": "var(--fo-macos-traffic-light-height, 0)",
+        },
 
-      height: {
-        screen: "100svh",
-      },
-      keyframes: {
-        glow: {
-          "0%, 100%": { opacity: "0.5" },
-          "50%": { opacity: "0.7" },
+        height: {
+          screen: "100svh",
+        },
+
+        keyframes: {
+          "caret-blink": {
+            "0%,70%,100%": { opacity: "1" },
+            "20%,50%": { opacity: "0" },
+          },
+          glow: {
+            "0%, 100%": { opacity: "0.5" },
+            "50%": { opacity: "0.7" },
+          },
+        },
+        animation: {
+          "caret-blink": "caret-blink 1.25s ease-out infinite",
         },
       },
     },
-  },
-  plugins: [
-    ...baseTwConfig.plugins,
-    plugin(({ addVariant }) => {
-      addVariant("f-motion-reduce", '[data-motion-reduce="true"] &')
-      addVariant("group-motion-reduce", ':merge(.group)[data-motion-reduce="true"] &')
-      addVariant("peer-motion-reduce", ':merge(.peer)[data-motion-reduce="true"] ~ &')
+    plugins: [
+      ...baseTwConfig.plugins,
+      plugin(({ addVariant }) => {
+        addVariant("f-motion-reduce", '[data-motion-reduce="true"] &')
+        addVariant("group-motion-reduce", ':merge(.group)[data-motion-reduce="true"] &')
+        addVariant("peer-motion-reduce", ':merge(.peer)[data-motion-reduce="true"] ~ &')
 
-      addVariant("zen-mode-macos", ":where(html[data-zen-mode='true'][data-os='macOS']) &")
-      addVariant("zen-mode-windows", ":where(html[data-zen-mode='true'][data-os='Windows']) &")
+        addVariant("zen-mode-macos", ":where(html[data-zen-mode='true'][data-os='macOS']) &")
+        addVariant("zen-mode-windows", ":where(html[data-zen-mode='true'][data-os='Windows']) &")
 
-      addVariant("zen-mode", ":where(html[data-zen-mode='true']) &")
-      addVariant("macos", ":where(html[data-os='macOS']) &")
-      addVariant("windows", ":where(html[data-os='Windows']) &")
-    }),
+        addVariant("zen-mode", ":where(html[data-zen-mode='true']) &")
+        addVariant("macos", ":where(html[data-os='macOS']) &")
+        addVariant("windows", ":where(html[data-os='Windows']) &")
+      }),
 
-    plugin(({ addUtilities, matchUtilities, theme }) => {
-      addUtilities({
-        ".safe-inset-top": {
-          top: "var(--fo-window-padding-top, 0)",
-        },
-      })
+      plugin(({ addUtilities, matchUtilities, theme }) => {
+        addUtilities({
+          ".safe-inset-top": {
+            top: "var(--fo-window-padding-top, 0)",
+          },
+        })
 
-      const safeInsetTopVariants = {}
-      for (let i = 1; i <= 16; i++) {
-        safeInsetTopVariants[`.safe-inset-top-${i}`] = {
-          top: `calc(var(--fo-window-padding-top, 0px) + ${theme(`spacing.${i}`)})`,
+        const safeInsetTopVariants = {}
+        for (let i = 1; i <= 16; i++) {
+          safeInsetTopVariants[`.safe-inset-top-${i}`] = {
+            top: `calc(var(--fo-window-padding-top, 0px) + ${theme(`spacing.${i}`)})`,
+          }
         }
-      }
-      addUtilities(safeInsetTopVariants)
+        addUtilities(safeInsetTopVariants)
 
-      // left macos traffic light
-      const leftMacosTrafficLightVariants = {}
-      addUtilities({
-        ".left-macos-traffic-light": {
-          left: "var(--fo-macos-traffic-light-width, 0)",
-        },
-      })
+        // left macos traffic light
+        const leftMacosTrafficLightVariants = {}
+        addUtilities({
+          ".left-macos-traffic-light": {
+            left: "var(--fo-macos-traffic-light-width, 0)",
+          },
+        })
 
-      for (let i = 1; i <= 16; i++) {
-        leftMacosTrafficLightVariants[`.left-macos-traffic-light-${i}`] = {
-          left: `calc(var(--fo-macos-traffic-light-width, 0px) + ${theme(`spacing.${i}`)})`,
+        for (let i = 1; i <= 16; i++) {
+          leftMacosTrafficLightVariants[`.left-macos-traffic-light-${i}`] = {
+            left: `calc(var(--fo-macos-traffic-light-width, 0px) + ${theme(`spacing.${i}`)})`,
+          }
         }
-      }
-      addUtilities(leftMacosTrafficLightVariants)
+        addUtilities(leftMacosTrafficLightVariants)
 
-      // Add arbitrary value support
-      matchUtilities(
-        {
-          "safe-inset-top": (value) => ({
-            top: `calc(var(--fo-window-padding-top, 0px) + ${value})`,
-          }),
-        },
-        { values: theme("spacing") },
-      )
-    }),
-  ],
-})
+        // Add arbitrary value support
+        matchUtilities(
+          {
+            "safe-inset-top": (value) => ({
+              top: `calc(var(--fo-window-padding-top, 0px) + ${value})`,
+            }),
+          },
+          { values: theme("spacing") },
+        )
+      }),
+    ],
+  }),
+)
diff --git a/configs/tailwind.base.config.ts b/configs/tailwind.base.config.ts
@@ -25,19 +25,7 @@ export const baseTwConfig = {
         theme: "var(--fo-font-family)",
         default: "SN pro, sans-serif, system-ui",
       },
-      cursor: {
-        button: "var(--cursor-button)",
-        select: "var(--cursor-select)",
-        checkbox: "var(--cursor-checkbox)",
-        link: "var(--cursor-link)",
-        menu: "var(--cursor-menu)",
-        radio: "var(--cursor-radio)",
-        switch: "var(--cursor-switch)",
-        card: "var(--cursor-card)",
-      },
-      width: {
-        "feed-col": "var(--fo-feed-col-w)",
-      },
+
       colors: {
         border: "hsl(var(--border) / <alpha-value>)",
         background: "hsl(var(--background) / <alpha-value>)",
@@ -70,17 +58,17 @@ export const baseTwConfig = {
           // https://uicolors.app/create
           accent: {
             DEFAULT: "hsl(var(--fo-a) / <alpha-value>)",
-            50: "#fff7ec",
-            100: "#ffeed3",
-            200: "#ffd9a5",
-            300: "#ffbd6d",
-            400: "#ff9532",
-            500: "#ff760a",
-            600: "#ff5c00",
-            700: "#cc4102",
-            800: "#a1330b",
-            900: "#822c0c",
-            950: "#461304",
+            "50": "#fff8ed",
+            "100": "#ffeed4",
+            "200": "#ffdaa8",
+            "300": "#ffbe70",
+            "400": "#ff9737",
+            "500": "#ff760a",
+            "600": "#f05d06",
+            "700": "#c74507",
+            "800": "#9e360e",
+            "900": "#7f2f0f",
+            "950": "#451505",
           },
 
           vibrancyFg: "hsl(var(--fo-vibrancy-foreground) / <alpha-value>)",
@@ -127,16 +115,6 @@ export const baseTwConfig = {
           },
         },
       }),
-
-      keyframes: {
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
-        },
-      },
-      animation: {
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
-      },
     },
   },
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
