refactor(styles): establish shared design system

src/App.vue

@@ -1,85 +1,21 @@
 <script setup lang="ts">
-import { NConfigProvider, NDialogProvider, NGlobalStyle, NMessageProvider, NNotificationProvider, type GlobalThemeOverrides } from 'naive-ui'
+import { NConfigProvider, NDialogProvider, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui'
 import AppHeader from '@/components/layout/AppHeader.vue'
+import { openCloudThemeOverrides } from '@/lib/theme'
 import { Analytics } from "@vercel/analytics/vue"
 import { SpeedInsights } from "@vercel/speed-insights/vue"
-
-const themeOverrides: GlobalThemeOverrides = {
-  common: {
-    primaryColor: '#0f766e',
-    primaryColorHover: '#115e59',
-    primaryColorPressed: '#134e4a',
-    primaryColorSuppl: '#0f766e',
-    infoColor: '#0369a1',
-    successColor: '#0f766e',
-    warningColor: '#d97706',
-    errorColor: '#dc2626',
-    borderRadius: '0px',
-    borderRadiusSmall: '0px',
-    fontFamily: '"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif',
-    fontFamilyMono: '"IBM Plex Mono", "SFMono-Regular", monospace',
-    bodyColor: '#f3f7fb',
-    cardColor: '#ffffff',
-    modalColor: '#ffffff',
-    popoverColor: '#ffffff',
-    tableColor: '#ffffff',
-    textColorBase: '#0f172a',
-    textColor1: '#0f172a',
-    textColor2: '#334155',
-    textColor3: '#64748b',
-    textColorDisabled: '#94a3b8',
-    dividerColor: '#d9e3ee',
-    borderColor: '#d9e3ee',
-    inputColor: '#ffffff',
-  },
-  Button: {
-    borderRadiusTiny: '0px',
-    borderRadiusSmall: '0px',
-    borderRadiusMedium: '0px',
-    borderRadiusLarge: '0px',
-    textColorPrimary: '#0f172a',
-    textColorHoverPrimary: '#0f172a',
-  },
-  Card: {
-    borderRadius: '0px',
-    borderRadiusEmbedded: '0px',
-    paddingMedium: '24px',
-  },
-  Input: {
-    borderRadius: '0px',
-  },
-  Select: {
-    peers: {
-      InternalSelection: {
-        borderRadius: '0px',
-      },
-    },
-  },
-  Tabs: {
-    tabBorderRadius: '0px',
-  },
-  Tag: {
-    borderRadius: '0px',
-  },
-  Alert: {
-    borderRadius: '0px',
-  },
-  Modal: {
-    borderRadius: '0px',
-  },
-}
 </script>
 
 <template>
-  <NConfigProvider :theme-overrides="themeOverrides">
+  <NConfigProvider :theme-overrides="openCloudThemeOverrides">
     <NGlobalStyle />
     <NDialogProvider>
       <NNotificationProvider>
         <NMessageProvider>
-          <div class="min-h-screen flex flex-col bg-[radial-gradient(circle_at_top_left,_rgba(12,148,136,0.12),_transparent_28%),linear-gradient(180deg,#f8fbfd_0%,#eef4f8_100%)]">
+          <div class="oc-app-shell">
             <AppHeader />
             <main class="relative flex-1">
-              <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(15,23,42,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.03)_1px,transparent_1px)] bg-[size:32px_32px] opacity-35"></div>
+              <div class="oc-app-grid"></div>
               <div class="relative">
                 <RouterView />
               </div>