feat: improve admin panel design (#14464)

packages/frontend/admin/tailwind.config.js

@@ -1,8 +1,16 @@
 /** @type {import('tailwindcss').Config} */
+const { baseTheme, themeToVar } = require('@toeverything/theme');
+
+const themeVar = (key, fallback) =>
+  `var(${themeToVar(key)}${fallback ? `, ${fallback}` : ''})`;
+
 module.exports = {
   darkMode: ['class'],
-  // TODO(@forehalo): we are not running webpack in admin dir
-  content: ['./packages/frontend/admin/src/**/*.{ts,tsx}'],
+  // Keep both roots so class scanning works in monorepo-root and package-root runs.
+  content: [
+    './src/**/*.{ts,tsx}',
+    './packages/frontend/admin/src/**/*.{ts,tsx}',
+  ],
   prefix: '',
   theme: {
     container: {
@@ -13,46 +21,87 @@ module.exports = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: themeVar('fontFamily', baseTheme.fontFamily),
+        mono: themeVar('fontCodeFamily', baseTheme.fontCodeFamily),
+      },
+      fontSize: {
+        xxs: '11px',
+        base: themeVar('fontBase', baseTheme.fontBase),
+        sm: themeVar('fontSm', baseTheme.fontSm),
+        xs: themeVar('fontXs', baseTheme.fontXs),
+      },
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: 'var(--border)',
+        input: 'var(--input)',
+        ring: 'var(--ring)',
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: 'var(--primary)',
+          foreground: 'var(--primary-foreground)',
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: 'var(--secondary)',
+          foreground: 'var(--secondary-foreground)',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          DEFAULT: 'var(--destructive)',
+          foreground: 'var(--destructive-foreground)',
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: 'var(--muted)',
+          foreground: 'var(--muted-foreground)',
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: 'var(--accent)',
+          foreground: 'var(--accent-foreground)',
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: 'var(--popover)',
+          foreground: 'var(--popover-foreground)',
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: 'var(--card)',
+          foreground: 'var(--card-foreground)',
+        },
+        // Selfhost sidebar tokens
+        sidebar: {
+          bg: 'var(--affine-v2-selfhost-layer-background-sidebarBg-sidebarBg)',
+          foreground: 'var(--affine-v2-selfhost-text-sidebar-primary)',
+          'foreground-secondary':
+            'var(--affine-v2-selfhost-text-sidebar-secondary)',
+          hover: 'var(--affine-v2-selfhost-button-sidebarButton-bg-hover)',
+          active: 'var(--affine-v2-selfhost-button-sidebarButton-bg-select)',
+        },
+        // Chip / badge tokens
+        chip: {
+          blue: 'var(--affine-v2-chip-label-blue)',
+          white: 'var(--affine-v2-chip-label-white)',
+          text: 'var(--affine-v2-chip-label-text)',
+        },
+        // Toggle tokens
+        toggle: {
+          on: 'var(--affine-v2-selfhost-toggle-backgroundOn)',
+          off: 'var(--affine-v2-selfhost-toggle-backgroundOff)',
+          thumb: 'var(--affine-v2-selfhost-toggle-foreground)',
         },
       },
       borderRadius: {
-        lg: 'var(--radius)',
+        lg: `var(--radius, ${themeVar('popoverRadius')})`,
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      spacing: {
+        paragraph: themeVar('paragraphSpace', baseTheme.paragraphSpace),
+      },
+      boxShadow: {
+        menu: themeVar('menuShadow'),
+        overlay: themeVar('overlayShadow'),
+        1: themeVar('shadow1'),
+        2: themeVar('shadow2'),
+        3: themeVar('shadow3'),
+      },
       keyframes: {
         'accordion-down': {
           from: { height: '0' },