refactor: compress cross-surface theme tokens

BitFun-Installer/src-tauri/src/installer/types.rs

@@ -70,6 +70,9 @@ impl From<bitfun_ai_adapters::types::RemoteModelInfo> for RemoteModelInfo {
 pub enum ConnectionTestMessageCode {
     ToolCallsNotDetected,
     ImageInputCheckFailed,
+    TlsOrCertificateIssue,
+    ProxyIssue,
+    NetworkIssue,
 }
 
 impl From<bitfun_ai_adapters::types::ConnectionTestMessageCode> for ConnectionTestMessageCode {
@@ -81,6 +84,13 @@ impl From<bitfun_ai_adapters::types::ConnectionTestMessageCode> for ConnectionTe
             bitfun_ai_adapters::types::ConnectionTestMessageCode::ImageInputCheckFailed => {
                 Self::ImageInputCheckFailed
             }
+            bitfun_ai_adapters::types::ConnectionTestMessageCode::TlsOrCertificateIssue => {
+                Self::TlsOrCertificateIssue
+            }
+            bitfun_ai_adapters::types::ConnectionTestMessageCode::ProxyIssue => Self::ProxyIssue,
+            bitfun_ai_adapters::types::ConnectionTestMessageCode::NetworkIssue => {
+                Self::NetworkIssue
+            }
         }
     }
 }

BitFun-Installer/src/pages/LanguageSelect.tsx

@@ -44,13 +44,13 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
           <img src={logoUrl} alt="BitFun" style={{
             display: 'block', margin: '0 auto 16px',
             width: 56, height: 56, borderRadius: 14,
-            filter: 'drop-shadow(0 0 40px rgba(100, 180, 255, 0.15))',
+            filter: 'drop-shadow(0 0 40px var(--color-accent-100))',
           }} />
           <h1 style={{
             fontFamily: 'var(--font-sans)', fontSize: 42, fontWeight: 700,
             color: 'var(--color-text-primary)', letterSpacing: '-0.03em',
             lineHeight: 0.95, margin: '0 0 16px 0',
-            textShadow: '0 0 60px rgba(100, 180, 255, 0.3)',
+            textShadow: '0 0 60px var(--color-accent-200)',
           }}>BitFun</h1>
         </div>
 
@@ -106,9 +106,9 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
                       style={{
                         display: 'flex', alignItems: 'center', gap: 12,
                         padding: '14px 16px', width: '100%',
-                        background: isSelected ? 'rgba(96, 165, 250, 0.14)' : 'rgba(148, 163, 184, 0.08)',
+                        background: isSelected ? 'var(--color-accent-100)' : 'var(--element-bg-subtle)',
                         border: 'none',
-                        borderRadius: 'var(--radius-sm)',
+                        borderRadius: 'var(--size-radius-sm)',
                         cursor: 'pointer', textAlign: 'left',
                         transition: 'all 0.25s ease',
                         outline: 'none',
@@ -117,12 +117,12 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
                       }}
                       onMouseEnter={(e) => {
                         if (!isSelected) {
-                          e.currentTarget.style.background = 'rgba(148, 163, 184, 0.14)';
+                          e.currentTarget.style.background = 'var(--element-bg-soft)';
                         }
                       }}
                       onMouseLeave={(e) => {
                         if (!isSelected) {
-                          e.currentTarget.style.background = 'rgba(148, 163, 184, 0.08)';
+                          e.currentTarget.style.background = 'var(--element-bg-subtle)';
                         }
                       }}
                     >

BitFun-Installer/src/pages/Options.tsx

@@ -107,7 +107,7 @@ export function Options({
                 </div>
               ) : null}
               {!existingInstall.mainBinaryPresent ? (
-                <div style={{ marginBottom: 8, color: 'var(--color-warning, #c9a227)' }}>
+                <div style={{ marginBottom: 8, color: 'var(--color-warning)' }}>
                   {t('options.existingInstallBinaryMissing')}
                 </div>
               ) : null}

BitFun-Installer/src/pages/ThemeSetup.tsx

@@ -29,7 +29,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
     width: '100%',
     borderRadius: 12,
     padding: 8,
-    background: active ? 'rgba(96, 165, 250, 0.14)' : 'rgba(148, 163, 184, 0.08)',
+    background: active ? 'var(--color-accent-100)' : 'var(--element-bg-subtle)',
     border: 'none',
     cursor: 'pointer',
     transition: 'background 0.2s ease',

BitFun-Installer/src/styles/global.css

@@ -27,7 +27,7 @@ html, body, #root {
   display: flex; align-items: center; justify-content: space-between;
   padding: 0 16px;
   background: var(--color-bg-primary);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+  border-bottom: 1px solid var(--border-subtle);
   -webkit-app-region: drag;
   flex-shrink: 0; position: relative; z-index: 10;
 }
@@ -58,20 +58,20 @@ html, body, #root {
   width: 32px; height: 32px; padding: 0;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  color: #8a8a8a;
+  border-radius: var(--size-radius-sm);
+  color: var(--color-text-muted);
   cursor: pointer; outline: none;
   transition: background var(--motion-fast) ease,
               color var(--motion-fast) ease;
 }
 .window-controls__btn:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: #b8b8b8;
+  background: var(--element-bg-subtle);
+  color: var(--color-text-secondary);
 }
 .window-controls__btn:active { opacity: 0.8; }
 .window-controls__btn--close:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: #ef4444;
+  background: var(--element-bg-subtle);
+  color: var(--color-error);
 }
 
 .installer-content {
@@ -115,7 +115,7 @@ html, body, #root {
   gap: 10px;
   flex-wrap: wrap;
   padding: 10px 22px 12px;
-  border-top: 1px solid rgba(148, 163, 184, 0.12);
+  border-top: 1px solid var(--border-subtle);
   background: var(--color-bg-primary);
   flex-shrink: 0;
 }
@@ -135,7 +135,7 @@ html, body, #root {
   min-height: 28px;
   background: transparent;
   border: 1px dashed var(--border-base);
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   font-family: var(--font-sans);
   font-size: 13px; font-weight: 500;
   color: var(--color-text-muted);
@@ -204,14 +204,14 @@ html, body, #root {
   width: 100%;
   background: transparent;
   border: 1px dashed var(--border-base);
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   cursor: pointer; text-align: left;
   box-shadow: none;
   transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease, border-style 0.25s ease;
   position: relative; overflow: hidden;
 }
 .card-btn:hover {
-  background: rgba(148, 163, 184, 0.08);
+  background: var(--element-bg-subtle);
   border-style: solid;
   border-color: var(--border-medium);
   transform: translateY(-1px);
@@ -220,17 +220,17 @@ html, body, #root {
 .card-btn:active { transform: translateY(0); }
 .card-btn:focus-visible {
   outline: none;
-  background: rgba(148, 163, 184, 0.14);
+  background: var(--element-bg-soft);
   box-shadow: none;
 }
-.card-btn:hover .card-btn__icon { background: rgba(148, 163, 184, 0.16); }
+.card-btn:hover .card-btn__icon { background: var(--element-bg-soft); }
 .card-btn:hover .card-btn__icon svg { color: var(--color-accent-600); }
 .card-btn:hover .card-btn__arrow { opacity: 0.8; transform: translateX(0); }
 
 .card-btn__icon {
   flex-shrink: 0; width: 40px; height: 40px;
   display: flex; align-items: center; justify-content: center;
-  background: rgba(148, 163, 184, 0.1);
+  background: var(--element-bg-subtle);
   border-radius: 10px;
   transition: all 0.25s ease;
 }
@@ -252,7 +252,7 @@ html, body, #root {
   flex: 1; padding: 10px 14px;
   background: var(--element-bg-subtle);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   color: var(--color-text-primary);
   font-size: 12px; font-family: var(--font-mono);
   outline: none; transition: all 0.25s ease;
@@ -275,7 +275,7 @@ html, body, #root {
   gap: 8px;
   background: var(--element-bg-subtle);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   color: var(--color-text-primary);
   cursor: pointer;
   text-align: left;
@@ -326,8 +326,8 @@ html, body, #root {
   padding: 4px;
   background: var(--color-bg-secondary);
   border: 1px solid var(--border-medium);
-  border-radius: var(--radius-sm);
-  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
+  border-radius: var(--size-radius-sm);
+  box-shadow: none;
 }
 
 .bf-select-search {
@@ -343,7 +343,7 @@ html, body, #root {
   min-height: 30px;
   padding: 6px 8px;
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   background: var(--element-bg-subtle);
   color: var(--color-text-primary);
   font-size: 12px;
@@ -366,7 +366,7 @@ html, body, #root {
   background: transparent;
   color: var(--color-text-primary);
   padding: 8px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   text-align: left;
   display: flex;
   flex-direction: column;
@@ -538,7 +538,7 @@ html, body, #root {
   gap: 10px;
   flex-wrap: wrap;
   padding: 10px 22px 12px;
-  border-top: 1px solid rgba(148, 163, 184, 0.12);
+  border-top: 1px solid var(--border-subtle);
   background: var(--color-bg-primary);
   flex-shrink: 0;
 }
@@ -558,7 +558,7 @@ html, body, #root {
 .checkbox-item {
   display: flex; align-items: center; gap: 10px;
   cursor: pointer; padding: 8px 10px;
-  border-radius: var(--radius-sm);
+  border-radius: var(--size-radius-sm);
   transition: background var(--motion-fast) ease;
 }
 .checkbox-item:hover { background: var(--element-bg-subtle); }
@@ -571,7 +571,7 @@ html, body, #root {
   transition: all var(--motion-fast) ease; flex-shrink: 0;
 }
 .checkbox-box.checked { background: var(--color-accent-500); border-color: var(--color-accent-500); }
-.checkbox-box svg { width: 10px; height: 10px; color: white; opacity: 0; transition: opacity var(--motion-fast) ease; }
+.checkbox-box svg { width: 10px; height: 10px; color: var(--color-bg-secondary); opacity: 0; transition: opacity var(--motion-fast) ease; }
 .checkbox-box.checked svg { opacity: 1; }
 
 .checkbox-label { font-size: 13px; color: var(--color-text-secondary); transition: color var(--motion-fast) ease; }
@@ -590,7 +590,7 @@ html, body, #root {
 }
 .progress-bar-fill::after {
   content: ''; position: absolute; inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  background: linear-gradient(90deg, transparent, var(--color-accent-200), transparent);
   background-size: 200% 100%;
   animation: shimmer 2s linear infinite;
 }

BitFun-Installer/src/styles/variables.css

@@ -20,17 +20,13 @@
   --color-accent-400: rgba(96, 165, 250, 0.4);
   --color-accent-500: #60a5fa;
   --color-accent-600: #3b82f6;
-  --color-accent-700: rgba(59, 130, 246, 0.8);
-  --color-accent-800: rgba(59, 130, 246, 0.9);
 
   --color-purple-50: rgba(139, 92, 246, 0.04);
   --color-purple-100: rgba(139, 92, 246, 0.08);
   --color-purple-200: rgba(139, 92, 246, 0.15);
-  --color-purple-300: rgba(139, 92, 246, 0.25);
   --color-purple-400: rgba(139, 92, 246, 0.4);
   --color-purple-500: #8b5cf6;
   --color-purple-600: #7c3aed;
-  --color-purple-700: rgba(124, 58, 237, 0.8);
   --color-purple-800: rgba(124, 58, 237, 0.9);
 
   --color-success: #34d399;
@@ -53,9 +49,9 @@
   --border-strong: rgba(255, 255, 255, 0.32);
   --border-prominent: rgba(225, 171, 128, 0.50);
 
-  --radius-sm: 6px;
-  --radius-base: 8px;
-  --radius-lg: 12px;
+  --size-radius-sm: 6px;
+  --size-radius-base: 8px;
+  --size-radius-lg: 12px;
 
   --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei',
     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display',

BitFun-Installer/src/theme/installerThemeRuntime.ts

@@ -3,6 +3,9 @@ import { SYSTEM_THEME_ID, type ThemeId, type ThemePreferenceId } from '../types/
 import type { InstallerTheme } from './installerThemesData';
 import { findInstallerThemeById } from './installerThemesData';
 
+const ACCENT_STOPS = ['50', '100', '200', '300', '400', '500', '600'] as const;
+const SECONDARY_ACCENT_STOPS = ['50', '100', '200', '400', '500', '600', '800'] as const;
+
 /** Same rule as main app `getSystemPreferredDefaultThemeId`: dark -> bitfun-dark, else bitfun-light. */
 export function getSystemPreferredBuiltinThemeId(): ThemeId {
   if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
@@ -45,15 +48,13 @@ export function applyInstallerThemeToDocument(theme: InstallerTheme): void {
   root.style.setProperty('--color-highlight', colors.semantic.highlight);
   root.style.setProperty('--color-highlight-bg', colors.semantic.highlightBg);
 
-  Object.entries(colors.accent).forEach(([key, value]) => {
-    root.style.setProperty(`--color-accent-${key}`, value);
+  ACCENT_STOPS.forEach((key) => {
+    root.style.setProperty(`--color-accent-${key}`, colors.accent[key]);
   });
 
-  if (colors.purple) {
-    Object.entries(colors.purple).forEach(([key, value]) => {
-      root.style.setProperty(`--color-purple-${key}`, value);
-    });
-  }
+  SECONDARY_ACCENT_STOPS.forEach((key) => {
+    root.style.setProperty(`--color-purple-${key}`, colors.purple[key]);
+  });
 
   root.setAttribute('data-theme', theme.id);
   root.setAttribute('data-theme-type', theme.type);