GCWing · GCWing · Aug 31, 2026 · Aug 31, 2026 · Aug 31, 2026 · Aug 31, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -529,6 +529,9 @@ jobs:
       - name: Check repository hygiene
         run: pnpm run check:repo-hygiene
 
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Validate interactive capability contract
         run: pnpm run capabilities:check && pnpm run capabilities:test && pnpm run website:test && pnpm run website:build
 
@@ -538,9 +541,6 @@ jobs:
       - name: Check core boundaries
         run: pnpm run check:core-boundaries
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
       - name: Setup Bun for package resource preflight
         if: needs.build-impact.outputs.frontend_required != 'false'
         uses: oven-sh/setup-bun@v2

diff --git a/BitFun-Installer/README.md b/BitFun-Installer/README.md
@@ -77,9 +77,9 @@ BitFun-Installer/
 │   ├── hooks/
 │   │   └── useInstaller.ts    # Core installer state machine
 │   ├── styles/
-│   │   ├── global.css         # Base styles
-│   │   ├── variables.css      # Design tokens
+│   │   ├── global.css         # Base styles consuming canonical tokens
 │   │   └── animations.css     # Keyframe animations
+│   ├── theme/                 # Canonical theme projection + installer presets
 │   ├── types/
 │   │   └── installer.ts       # TypeScript types
 │   ├── App.tsx
@@ -202,7 +202,9 @@ src-tauri/target/release-fast/bitfun-installer.exe
 
 ### Changing the UI Theme
 
-Edit [variables.css](src/styles/variables.css). Colors, spacing, and animations are controlled by CSS custom properties.
+Shared light/dark values come from `@bitfun/theme-bitfun`. Installer-only named presets live in
+[installerThemesData.ts](src/theme/installerThemesData.ts), and components consume only canonical
+`--bf-*` variables projected by [installerThemeRuntime.ts](src/theme/installerThemeRuntime.ts).
 
 ### Adding Install Steps
 

diff --git a/BitFun-Installer/index.html b/BitFun-Installer/index.html
@@ -3,19 +3,11 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="" />
   <title>Install BitFun</title>
-  <script>
-    (function () {
-      var dark = '#121214';
-      var light = '#e8ecf2';
-      var m = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
-      document.documentElement.style.backgroundColor = m && m.matches ? dark : light;
-    })();
-  </script>
+  <script type="module" src="/src/theme/installerThemeBootstrap.ts"></script>
   <style>
     html, body { margin: 0; padding: 0; }
-    html { background-color: #121214; }
-    body { background-color: inherit; }
   </style>
 </head>
 <body>

diff --git a/BitFun-Installer/package.json b/BitFun-Installer/package.json
@@ -24,6 +24,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@bitfun/theme-bitfun": "workspace:^",
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/plugin-dialog": "^2.6.0",
     "i18next": "^25.8.0",

diff --git a/BitFun-Installer/src/App.tsx b/BitFun-Installer/src/App.tsx
@@ -136,7 +136,7 @@ function App() {
       {!isFullscreen && (
         <div style={{
           height: 1,
-          background: 'repeating-linear-gradient(90deg, var(--element-bg-medium) 0 5px, transparent 5px 10px)',
+          background: 'repeating-linear-gradient(90deg, var(--bf-color-action-neutral-surface-pressed) 0 5px, transparent 5px 10px)',
           position: 'relative',
           flexShrink: 0,
           overflow: 'hidden',
@@ -145,8 +145,8 @@ function App() {
             height: '100%',
             width: `${((stepNum ?? 0) / 4) * 100}%`,
             background: useSuccessStepColor
-              ? 'repeating-linear-gradient(90deg, var(--color-success) 0 5px, transparent 5px 10px)'
-              : 'repeating-linear-gradient(90deg, var(--color-accent-500) 0 5px, transparent 5px 10px)',
+              ? 'repeating-linear-gradient(90deg, var(--bf-color-status-success-content) 0 5px, transparent 5px 10px)'
+              : 'repeating-linear-gradient(90deg, var(--bf-color-accent-default) 0 5px, transparent 5px 10px)',
             transition: 'width 400ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease',
           }} />
         </div>

diff --git a/BitFun-Installer/src/components/InstallErrorPanel.tsx b/BitFun-Installer/src/components/InstallErrorPanel.tsx
@@ -23,9 +23,9 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
         marginTop: 10,
         padding: '10px 12px',
         borderRadius: 10,
-        border: '1px solid color-mix(in srgb, var(--border-base) 70%, transparent)',
-        background: 'color-mix(in srgb, var(--element-bg-subtle) 80%, transparent)',
-        color: 'var(--color-text-secondary)',
+        border: '1px solid color-mix(in srgb, var(--bf-color-border-default) 70%, transparent)',
+        background: 'color-mix(in srgb, var(--bf-color-surface-subtle) 80%, transparent)',
+        color: 'var(--bf-color-content-secondary)',
         fontSize: 11,
         lineHeight: 1.55,
         textAlign: variant === 'bare' ? 'center' : 'left',
@@ -40,7 +40,7 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
       <>
         <div
           style={{
-            color: 'var(--color-text-muted)',
+            color: 'var(--bf-color-content-muted)',
             fontSize: 12,
             lineHeight: 1.6,
             textAlign: 'center',
@@ -60,9 +60,9 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
         marginTop: 10,
         padding: '10px 12px',
         borderRadius: 10,
-        border: '1px solid color-mix(in srgb, var(--color-error) 55%, transparent)',
-        background: 'color-mix(in srgb, var(--color-error) 10%, transparent)',
-        color: 'var(--color-text-primary)',
+        border: '1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 55%, transparent)',
+        background: 'color-mix(in srgb, var(--bf-color-status-danger-content) 10%, transparent)',
+        color: 'var(--bf-color-content-primary)',
         fontSize: 12,
         lineHeight: 1.5,
       }}

diff --git a/BitFun-Installer/src/components/ProgressBar.tsx b/BitFun-Installer/src/components/ProgressBar.tsx
@@ -10,7 +10,7 @@ export function ProgressBar({ percent, completed = false }: ProgressBarProps) {
         className="progress-bar-fill"
         style={{
           width: `${Math.min(100, Math.max(0, percent))}%`,
-          background: completed ? 'var(--color-success)' : 'var(--color-accent-500)',
+          background: completed ? 'var(--bf-color-status-success-content)' : 'var(--bf-color-accent-default)',
         }}
       />
     </div>

diff --git a/BitFun-Installer/src/pages/LanguageSelect.tsx b/BitFun-Installer/src/pages/LanguageSelect.tsx
@@ -29,11 +29,11 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
         display: 'flex', flexDirection: 'column',
         alignItems: 'center', justifyContent: 'center',
         position: 'relative', overflow: 'hidden',
-        background: 'var(--color-bg-primary)',
+        background: 'var(--bf-color-surface-canvas)',
       }}>
         <div style={{
           position: 'absolute', top: 0, bottom: 0, right: 0, width: 1,
-          backgroundImage: `linear-gradient(180deg, var(--border-subtle) 0%, var(--border-subtle) 50%, transparent 50%, transparent 100%)`,
+          backgroundImage: `linear-gradient(180deg, var(--bf-color-border-subtle) 0%, var(--bf-color-border-subtle) 50%, transparent 50%, transparent 100%)`,
           backgroundSize: '1px 8px', pointerEvents: 'none', zIndex: 10,
         }} />
 
@@ -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 color-mix(in srgb, var(--color-accent-500) 8%, transparent))',
+            filter: 'drop-shadow(0 0 40px color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent))',
           }} />
           <h1 style={{
-            fontFamily: 'var(--font-sans)', fontSize: 42, fontWeight: 700,
-            color: 'var(--color-text-primary)', letterSpacing: '-0.03em',
+            fontFamily: 'var(--bf-font-family-sans)', fontSize: 42, fontWeight: 700,
+            color: 'var(--bf-color-content-primary)', letterSpacing: '-0.03em',
             lineHeight: 0.95, margin: '0 0 16px 0',
-            textShadow: '0 0 60px color-mix(in srgb, var(--color-accent-500) 15%, transparent)',
+            textShadow: '0 0 60px color-mix(in srgb, var(--bf-color-accent-default) 15%, transparent)',
           }}>BitFun</h1>
         </div>
 
@@ -68,7 +68,7 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
             padding: '0 24px',
             textAlign: 'center',
             fontSize: 11,
-            color: 'var(--color-text-muted)',
+            color: 'var(--bf-color-content-muted)',
             opacity: 0.6,
             letterSpacing: '0.5px',
           }}>
@@ -107,36 +107,36 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
                         display: 'flex', alignItems: 'center', gap: 12,
                         padding: '14px 16px', width: '100%',
                         background: isSelected
-                          ? 'color-mix(in srgb, var(--color-accent-500) 8%, transparent)'
-                          : 'var(--element-bg-subtle)',
+                          ? 'color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent)'
+                          : 'var(--bf-color-surface-subtle)',
                         border: 'none',
-                        borderRadius: 'var(--size-radius-sm)',
+                        borderRadius: 'var(--bf-radius-sm)',
                         cursor: 'pointer', textAlign: 'left',
                         transition: 'all 0.25s ease',
                         outline: 'none',
-                        fontFamily: 'var(--font-sans)',
+                        fontFamily: 'var(--bf-font-family-sans)',
                         boxShadow: 'none',
                       }}
                       onMouseEnter={(e) => {
                         if (!isSelected) {
-                          e.currentTarget.style.background = 'var(--element-bg-soft)';
+                          e.currentTarget.style.background = 'var(--bf-color-action-neutral-surface)';
                         }
                       }}
                       onMouseLeave={(e) => {
                         if (!isSelected) {
-                          e.currentTarget.style.background = 'var(--element-bg-subtle)';
+                          e.currentTarget.style.background = 'var(--bf-color-surface-subtle)';
                         }
                       }}
                     >
                       <div style={{ flex: 1 }}>
                         <div style={{
                           fontSize: 14, fontWeight: 500,
-                          color: isSelected ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
+                          color: isSelected ? 'var(--bf-color-content-primary)' : 'var(--bf-color-content-secondary)',
                           transition: 'color 0.2s ease',
                         }}>{lang.nativeName}</div>
                         <div style={{
                           fontSize: 11,
-                          color: 'var(--color-text-muted)', opacity: 0.7,
+                          color: 'var(--bf-color-content-muted)', opacity: 0.7,
                           marginTop: 2,
                         }}>{lang.label}</div>
                       </div>

diff --git a/BitFun-Installer/src/pages/Options.tsx b/BitFun-Installer/src/pages/Options.tsx
@@ -79,7 +79,7 @@ export function Options({
     <div className="page-shell">
       <div className="page-scroll">
         <div className="page-container page-container--center" style={{ maxWidth: 560 }}>
-          <div style={{ marginBottom: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
+          <div style={{ marginBottom: 8, fontSize: 12, color: 'var(--bf-color-content-muted)' }}>
             {t('options.subtitle')}
           </div>
           {existingInstall?.detected ? (
@@ -88,11 +88,11 @@ export function Options({
                 marginBottom: 16,
                 padding: '12px 14px',
                 borderRadius: 10,
-                border: '1px solid color-mix(in srgb, var(--color-accent-500) 45%, transparent)',
-                background: 'color-mix(in srgb, var(--color-accent-500) 8%, transparent)',
+                border: '1px solid color-mix(in srgb, var(--bf-color-accent-default) 45%, transparent)',
+                background: 'color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent)',
                 fontSize: 12,
                 lineHeight: 1.55,
-                color: 'var(--color-text-primary)',
+                color: 'var(--bf-color-content-primary)',
               }}
             >
               <div style={{ fontWeight: 600, marginBottom: 8 }}>{t('options.existingInstallTitle')}</div>
@@ -107,7 +107,7 @@ export function Options({
                 </div>
               ) : null}
               {!existingInstall.mainBinaryPresent ? (
-                <div style={{ marginBottom: 8, color: 'var(--color-warning)' }}>
+                <div style={{ marginBottom: 8, color: 'var(--bf-color-status-warning-content)' }}>
                   {t('options.existingInstallBinaryMissing')}
                 </div>
               ) : null}
@@ -173,7 +173,7 @@ export function Options({
                   gap: 16,
                   marginTop: 8,
                   fontSize: 11,
-                  color: 'var(--color-text-muted)',
+                  color: 'var(--bf-color-content-muted)',
                   opacity: 0.7,
                   flexWrap: 'wrap',
                 }}
@@ -184,7 +184,7 @@ export function Options({
                   {diskSpace.available < Number.MAX_SAFE_INTEGER ? formatBytes(diskSpace.available) : '-'}
                 </span>
                 {!diskSpace.sufficient && (
-                  <span style={{ color: 'var(--color-error)' }}>{t('options.insufficientSpace')}</span>
+                  <span style={{ color: 'var(--bf-color-status-danger-content)' }}>{t('options.insufficientSpace')}</span>
                 )}
               </div>
             )}

diff --git a/BitFun-Installer/src/pages/Progress.tsx b/BitFun-Installer/src/pages/Progress.tsx
@@ -44,10 +44,10 @@ export function ProgressPage({
         >
           {!error ? (
             <>
-              <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: 6 }}>
+              <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--bf-color-content-primary)', marginBottom: 6 }}>
                 {t('progress.title')}
               </p>
-              <p style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 22 }}>
+              <p style={{ fontSize: 12, color: 'var(--bf-color-content-muted)', marginBottom: 22 }}>
                 {stepLabel}
               </p>
               <div style={{ width: '100%', maxWidth: 320 }}>
@@ -59,7 +59,7 @@ export function ProgressPage({
                     gap: 8,
                     marginTop: 8,
                     fontSize: 11,
-                    color: 'var(--color-text-muted)',
+                    color: 'var(--bf-color-content-muted)',
                     opacity: 0.7,
                     flexWrap: 'wrap',
                   }}
@@ -76,15 +76,15 @@ export function ProgressPage({
                 height="18"
                 viewBox="0 0 24 24"
                 fill="none"
-                stroke="var(--color-error)"
+                stroke="var(--bf-color-status-danger-content)"
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 style={{ marginBottom: 14, animation: 'scaleIn 350ms ease forwards' }}
               >
                 <circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
               </svg>
-              <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-text-primary)', marginBottom: 8 }}>{t('progress.failed')}</p>
+              <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--bf-color-content-primary)', marginBottom: 8 }}>{t('progress.failed')}</p>
               <InstallErrorPanel message={error} variant="bare" />
             </>
           )}

diff --git a/BitFun-Installer/src/pages/ThemeSetup.tsx b/BitFun-Installer/src/pages/ThemeSetup.tsx
@@ -30,8 +30,8 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
     borderRadius: 12,
     padding: 8,
     background: active
-      ? 'color-mix(in srgb, var(--color-accent-500) 8%, transparent)'
-      : 'var(--element-bg-subtle)',
+      ? 'color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent)'
+      : 'var(--bf-color-surface-subtle)',
     border: 'none',
     cursor: 'pointer',
     transition: 'background 0.2s ease',
@@ -74,7 +74,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
         <div className="page-container page-container--center" style={{ maxWidth: 760 }}>
           <p style={{
             fontSize: 14,
-            color: 'var(--color-text-secondary)',
+            color: 'var(--bf-color-content-secondary)',
             marginBottom: 12,
           }}>
             {t('themeSetup.subtitle')}
@@ -98,7 +98,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
                 <div style={{ flex: 1, background: lightPreview.colors.background.primary }} />
                 <div style={{ flex: 1, background: darkPreview.colors.background.primary }} />
               </div>
-              <div style={{ fontSize: 11, color: 'var(--color-text-primary)' }}>
+              <div style={{ fontSize: 11, color: 'var(--bf-color-content-primary)' }}>
                 {t('themeSetup.followSystem')}
               </div>
             </button>
@@ -115,7 +115,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
                     </div>
                   </div>
                 </div>
-                <div style={{ fontSize: 11, color: 'var(--color-text-primary)' }}>
+                <div style={{ fontSize: 11, color: 'var(--bf-color-content-primary)' }}>
                   {t(`themeSetup.themeNames.${theme.id}`, { defaultValue: theme.name })}
                 </div>
               </button>
@@ -132,7 +132,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
 
           {finishError && (
             <div style={{
-              color: 'var(--color-error)',
+              color: 'var(--bf-color-status-danger-content)',
               marginBottom: 12,
               fontSize: 12,
               width: '100%',