@schandlergarcia/sf-web-components 2.3.17 → 2.4.0

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.4.0] - 2026-05-07
+
+### Removed
+- **Engine brand assets** — deleted `brands/engine/` (global.css, app/, sample data, PRD, GraphQL schema, Engine logo, Engine-specific hooks like `useEvaAgent` and `useEngineLiveData`).
+- **Top-level `data/` directory** — removed all Engine Travel Command Center data, schema, agent API config, and the README/USAGE docs that documented Engine-only assets.
+- **`brand:engine` and `demo:engine` npm scripts** — removed from `package.json` and from the postinstall script that adds scripts to consuming projects.
+
+### Changed
+- **`src/styles/global.css` is now truly neutral** — replaced the `--color-engine-*` palette and the Cyan/Engine-Black brand ramp with a slate-based neutral `--color-brand-*` ramp; replaced the Engine-coded `.heroui-scope` (Engine Black `#0D1117`, Cyan `#7DCBD9`, Orange-Red `#FD4B23`, Amber `#FFB200`, Engine Blue `#157DE5`) with neutral `oklch()` defaults. The `:root` `--dash-*` tokens (which previously used Engine amber/cream) now use neutral slate/standard semantic colors.
+- **`scripts/apply-brand.mjs` is now brand-agnostic** — sample-data file copying discovers `*-sample-data.js` / `*-live-data.js` / `*-data.{js,ts}` files dynamically instead of hardcoding `engine-sample-data.js`, `engine-live-data.js`, `partner-hub-sample-data.js`. Logo copying discovers any `*.png|jpg|svg|webp|gif` file at the brand root instead of hardcoding `engine_logo.png`. Updated header docs to remove Engine examples.
+- **`CLAUDE.md` Brand System section rewritten** — removed the "Engine Brand" callout and the `brand:engine` example. Now explains the brand system as optional infrastructure (no brands ship by default) and documents the conventions a `brands/<name>/` folder can use.
+- **`README.md` Sample Data section removed** — the package no longer ships Engine Travel sample data.
+
+### Context
+- The package and its source files no longer carry any Engine Travel branding so it can be used as a neutral baseline for building a new app on top of the component library and Command Center builder. The brand system itself remains available; teams can drop their own brand under `brands/<name>/`.
+
 ## [2.3.17] - 2026-04-15
 
 ### Changed

package/CLAUDE.md

@@ -67,8 +67,7 @@ sf-web-components/
 │   │   └── workspace/         # CommandCenter.tsx.template
 │   ├── lib/                   # Utilities (utils.ts)
 │   └── styles/                # global.css with neutral brand tokens
-├── brands/
-│   └── engine/                # Engine brand (global.css, sample data, PRD, hooks)
+├── brands/                    # Optional brand bundles (none ship by default)
 ├── scripts/
 │   ├── postinstall.mjs        # Runs after npm install in consuming projects
 │   ├── apply-brand.mjs        # Apply/reset brand themes
@@ -86,23 +85,23 @@ sf-web-components/
 
 ## Brand System
 
-The package ships with a **neutral theme** by default. Opt into a specific brand:
+The package ships with a **neutral theme** by default. No brands ship out of the box; the brand system is optional infrastructure for layering custom themes/demo apps on top of the neutral baseline.
 
 ```bash
-npm run brand:engine    # Apply Engine brand (colors, sample data, PRD, hooks)
-npm run brand:reset     # Revert to neutral theme
-npm run brand:list      # Show available brands
+npm run brand:list      # Show available brands (empty by default)
+npm run brand:reset     # Restore neutral theme (clears any active brand)
 ```
 
-When a brand is active, the reset script (`npm run reset:command-center`) preserves the brand's `global.css` instead of restoring neutral. The `.brand` marker file tracks which brand is active.
+To add a brand, drop a folder under `brands/<name>/` containing any of:
 
-### Engine Brand
-- **Primary:** Engine Black `#0D1117`
-- **Accent:** Cyan `#7DCBD9`, Green `#1E9D6D`, Blue `#157DE5`
-- **Secondary:** Orange-Red `#FD4B23`, Amber `#FFB200`
-- **Neutrals:** Dark Gray `#616368`, Mid Gray `#B0B1B3`, Light Gray `#F3F3F4`
+- `global.css` — overrides applied to `src/styles/global.css`
+- `app/` — full demo app (pages, hooks, api, features) installed via `--demo`
+- `*.png` / `*.svg` — logo assets installed into `src/assets/images/`
+- `*-sample-data.js` / `*-live-data.js` — installed into `src/data/`
+- `*_PRD.md` / `*-prd.md` — product requirements docs copied to project root
+- `schema.graphql` — data schema copied to project root
 
-Installs: Engine-branded `global.css`, sample data, live data, PRD, GraphQL schema, Eva agent hook, agent config, and Engine logo.
+When a brand is active, the reset script (`npm run reset:command-center`) preserves the brand's `global.css` instead of restoring neutral. The `.brand` marker file tracks which brand is active.
 
 ## Key Conventions
 

package/README.md

@@ -75,21 +75,6 @@ This library includes:
 - Filter components
 - Layout components
 
-## Sample Data
-
-The package includes pre-seeded sample data in the `data/` directory:
-- **Engine Travel Command Center** sample data with real Salesforce field names
-- Dashboard-ready data (map markers, chart data, metrics, etc.)
-- Easy to swap for live data later
-
-**Copy to your project:**
-```bash
-# From your webapp directory
-cp node_modules/@schandlergarcia/sf-web-components/data/engine-sample-data.js src/data/
-```
-
-See `data/README.md` and `data/USAGE.md` in the package for full documentation.
-
 ## Utilities
 
 ```tsx

package/dist/styles/global.css

@@ -58,31 +58,18 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Engine brand palette — official guidelines */
-  --color-engine-black:  #0D1117;
-  --color-engine-cyan:   #7DCBD9;
-  --color-engine-green:  #1E9D6D;
-  --color-engine-blue:   #157DE5;
-  --color-engine-orange: #FD4B23;
-  --color-engine-amber:  #FFB200;
-  --color-engine-bg:     #F3F3F4;
-  --color-engine-border: #B0B1B3;
-  --color-engine-text:   #0D1117;
-  --color-engine-muted:  #616368;
-  --color-engine-label:  #B0B1B3;
-
-  /* Engine Cyan brand ramp */
-  --color-brand-50:  #F0FAFB;
-  --color-brand-100: #D9F2F5;
-  --color-brand-200: #B3E5EB;
-  --color-brand-300: #7DCBD9;
-  --color-brand-400: #5BB8CA;
-  --color-brand-500: #3AA0B5;
-  --color-brand-600: #2D849A;
-  --color-brand-700: #266B7E;
-  --color-brand-800: #235768;
-  --color-brand-900: #1F4858;
-  --color-brand-950: #112E3A;
+  /* Neutral brand ramp — override per-app to apply your brand colors */
+  --color-brand-50:  #f8fafc;
+  --color-brand-100: #f1f5f9;
+  --color-brand-200: #e2e8f0;
+  --color-brand-300: #cbd5e1;
+  --color-brand-400: #94a3b8;
+  --color-brand-500: #64748b;
+  --color-brand-600: #475569;
+  --color-brand-700: #334155;
+  --color-brand-800: #1e293b;
+  --color-brand-900: #0f172a;
+  --color-brand-950: #020617;
 
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
@@ -92,22 +79,22 @@
 }
 
 :root {
-  --dash-text:    #0D1117;
-  --dash-muted:   #3d4047;
-  --dash-label:   #8b8d91;
-  --dash-surface: #fef9ef;
-  --dash-border:  #e2c97a;
-  --dash-accent:  #FFB200;
+  --dash-text:    #0f172a;
+  --dash-muted:   #475569;
+  --dash-label:   #94a3b8;
+  --dash-surface: #ffffff;
+  --dash-border:  #e2e8f0;
+  --dash-accent:  #64748b;
   --dash-success: #34d399;
   --dash-info:    #67e8f9;
-  --dash-warning: #FD4B23;
+  --dash-warning: #f59e0b;
   --dash-danger:  #dc2626;
-  --dash-dark:    #0D1117;
-  --dash-darker:  #06090d;
-  --dash-chart-1: #FFB200;
-  --dash-chart-2: #1E9D6D;
-  --dash-chart-3: #7DCBD9;
-  --dash-chart-4: #FD4B23;
+  --dash-dark:    #0f172a;
+  --dash-darker:  #020617;
+  --dash-chart-1: #64748b;
+  --dash-chart-2: #34d399;
+  --dash-chart-3: #67e8f9;
+  --dash-chart-4: #f59e0b;
   --dash-metric-size: 2.5rem;
   --dash-metric-sub: 2.25rem;
   --color-dash-text:    var(--dash-text);
@@ -206,37 +193,37 @@
 
 /*
  * Restore HeroUI theme variables inside the Command Center scope.
- * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
+ * Neutral defaults — override per-app to apply your brand colors.
  */
 .heroui-scope {
-  --primary: #0D1117;
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.9911 0 0);
-  --secondary: #7DCBD9;
-  --secondary-foreground: #0D1117;
-  --success: #1E9D6D;
+  --secondary: oklch(0.55 0.02 240);
+  --secondary-foreground: oklch(0.9911 0 0);
+  --success: #16a34a;
   --success-foreground: oklch(0.9911 0 0);
-  --warning: #FFB200;
-  --warning-foreground: #0D1117;
-  --danger: #FD4B23;
+  --warning: #f59e0b;
+  --warning-foreground: oklch(0.205 0 0);
+  --danger: #dc2626;
   --danger-foreground: oklch(0.9911 0 0);
 
   --muted: oklch(0.5517 0.0138 285.94);
   --accent: oklch(0.6204 0.195 253.83);
   --accent-foreground: oklch(0.9911 0 0);
-  --background: #F3F3F4;
-  --foreground: #0D1117;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
   --default: oklch(94% 0.001 286.375);
-  --default-foreground: #0D1117;
-  --border: #B0B1B3;
+  --default-foreground: oklch(0.145 0 0);
+  --border: oklch(0.85 0.005 286);
   --separator: oklch(92% 0.004 286.32);
   --segment: oklch(100% 0 0);
-  --segment-foreground: #0D1117;
+  --segment-foreground: oklch(0.145 0 0);
   --surface: oklch(100% 0 0);
-  --surface-foreground: #0D1117;
+  --surface-foreground: oklch(0.145 0 0);
   --overlay: oklch(100% 0 0);
-  --overlay-foreground: #0D1117;
-  --focus: #157DE5;
-  --link: #0D1117;
+  --overlay-foreground: oklch(0.145 0 0);
+  --focus: oklch(0.6 0.18 250);
+  --link: oklch(0.205 0 0);
 }
 
 /* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
@@ -261,9 +248,9 @@ body > .fixed.inset-x-0.rounded-2xl {
   --overlay: oklch(0.2103 0.0059 285.89);
   --overlay-foreground: oklch(0.9911 0 0);
   --warning: oklch(0.8203 0.1388 76.34);
-  --warning-foreground: #0D1117;
+  --warning-foreground: oklch(0.145 0 0);
   --danger: oklch(0.594 0.1967 24.63);
   --danger-foreground: oklch(0.9911 0 0);
-  --focus: #157DE5;
+  --focus: oklch(0.6 0.18 250);
   --link: oklch(0.9911 0 0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "2.3.17",
+  "version": "2.4.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,7 +52,6 @@
     "reset:command-center": "bash scripts/reset-command-center.sh",
     "validate:dashboard": "bash scripts/validate-dashboard.sh",
     "graphql:schema": "node scripts/get-graphql-schema.mjs",
-    "brand:engine": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine",
     "brand:reset": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset",
     "brand:list": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --list"
   },

package/scripts/apply-brand.mjs

@@ -4,14 +4,19 @@
  * apply-brand.mjs — Apply a brand theme or install a full demo app.
  *
  * Usage:
- *   node scripts/apply-brand.mjs engine          # Apply Engine brand colors only
- *   node scripts/apply-brand.mjs --demo engine   # Install full Engine demo app (neutral theme)
- *   node scripts/apply-brand.mjs --list          # List available brands
- *   node scripts/apply-brand.mjs --reset         # Remove brand, restore neutral theme
+ *   node scripts/apply-brand.mjs <brand>          # Apply brand colors only
+ *   node scripts/apply-brand.mjs --demo <brand>   # Install full demo app for a brand
+ *   node scripts/apply-brand.mjs --list           # List available brands
+ *   node scripts/apply-brand.mjs --reset          # Remove brand, restore neutral theme
  *
- * The demo command installs the full app (dashboard, routes, hooks, queries,
- * features) but keeps the neutral color palette. Run brand:engine afterwards
- * to switch to Engine colors.
+ * Brands live in brands/<name>/ at the package root. Each brand may provide:
+ *   - global.css            (theme overrides applied to src/styles/global.css)
+ *   - app/                  (full demo app: pages, hooks, api, features, etc.)
+ *   - schema.graphql        (data schema)
+ *   - *.png                 (brand logo assets)
+ *   - *_PRD.md / *-prd.md   (product requirements docs)
+ *
+ * No brands ship with the package by default. Add your own under brands/.
  */
 
 import fs from 'fs';
@@ -184,17 +189,21 @@ if (isDemo) {
     }
   }
 
-  // Copy sample data files
-  const dataFiles = ['engine-sample-data.js', 'engine-live-data.js', 'partner-hub-sample-data.js'];
+  // Copy any *.js / *.ts data files at the brand root into src/data/
+  const dataFiles = fs.readdirSync(brandDir).filter(f => {
+    if (!fs.statSync(path.join(brandDir, f)).isFile()) return false;
+    return f.endsWith('-sample-data.js')
+        || f.endsWith('-live-data.js')
+        || f.endsWith('-data.ts')
+        || f.endsWith('-data.js');
+  });
   for (const file of dataFiles) {
     const src = path.join(brandDir, file);
     const dst = path.join(cwd, 'src/data', file);
-    if (fs.existsSync(src)) {
-      fs.mkdirSync(path.dirname(dst), { recursive: true });
-      fs.copyFileSync(src, dst);
-      console.log(`  ✓ Installed src/data/${file}`);
-      installed++;
-    }
+    fs.mkdirSync(path.dirname(dst), { recursive: true });
+    fs.copyFileSync(src, dst);
+    console.log(`  ✓ Installed src/data/${file}`);
+    installed++;
   }
 
   // Copy PRDs to project root
@@ -213,13 +222,16 @@ if (isDemo) {
     installed++;
   }
 
-  // Copy logo
-  const logo = path.join(brandDir, 'engine_logo.png');
-  if (fs.existsSync(logo)) {
-    const logoTarget = path.join(cwd, 'src/assets/images/engine_logo.png');
-    fs.mkdirSync(path.dirname(logoTarget), { recursive: true });
-    fs.copyFileSync(logo, logoTarget);
-    console.log('  ✓ Installed engine_logo.png');
+  // Copy any logo/image assets at the brand root into src/assets/images/
+  const imageFiles = fs.readdirSync(brandDir).filter(f =>
+    /\.(png|jpe?g|svg|webp|gif)$/i.test(f)
+  );
+  for (const file of imageFiles) {
+    const src = path.join(brandDir, file);
+    const dst = path.join(cwd, 'src/assets/images', file);
+    fs.mkdirSync(path.dirname(dst), { recursive: true });
+    fs.copyFileSync(src, dst);
+    console.log(`  ✓ Installed src/assets/images/${file}`);
     installed++;
   }
 
@@ -259,14 +271,19 @@ if (fs.existsSync(brandCSS)) {
   installed++;
 }
 
-// 2. Logo → src/assets/images/
-const logo = path.join(brandDir, 'engine_logo.png');
-if (fs.existsSync(logo)) {
-  const logoTarget = path.join(cwd, 'src/assets/images/engine_logo.png');
-  fs.mkdirSync(path.dirname(logoTarget), { recursive: true });
-  fs.copyFileSync(logo, logoTarget);
-  console.log('  ✓ Installed engine_logo.png');
-  installed++;
+// 2. Any logo/image assets → src/assets/images/
+if (fs.existsSync(brandDir)) {
+  const imageFiles = fs.readdirSync(brandDir).filter(f =>
+    /\.(png|jpe?g|svg|webp|gif)$/i.test(f)
+  );
+  for (const file of imageFiles) {
+    const src = path.join(brandDir, file);
+    const dst = path.join(cwd, 'src/assets/images', file);
+    fs.mkdirSync(path.dirname(dst), { recursive: true });
+    fs.copyFileSync(src, dst);
+    console.log(`  ✓ Installed src/assets/images/${file}`);
+    installed++;
+  }
 }
 
 // 3. Write .brand marker

package/scripts/postinstall.mjs

@@ -341,11 +341,7 @@ if (fs.existsSync(packageJsonPath)) {
       scriptsAdded.push('sfwc:setup');
     }
 
-    // Add brand scripts
-    if (!packageJson.scripts['brand:engine']) {
-      packageJson.scripts['brand:engine'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine';
-      scriptsAdded.push('brand:engine');
-    }
+    // Add brand scripts (no brands ship by default — add your own under brands/)
     if (!packageJson.scripts['brand:reset']) {
       packageJson.scripts['brand:reset'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset';
       scriptsAdded.push('brand:reset');
@@ -355,12 +351,6 @@ if (fs.existsSync(packageJsonPath)) {
       scriptsAdded.push('brand:list');
     }
 
-    // Add demo scripts
-    if (!packageJson.scripts['demo:engine']) {
-      packageJson.scripts['demo:engine'] = 'node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --demo engine';
-      scriptsAdded.push('demo:engine');
-    }
-
     if (scriptsAdded.length > 0) {
       fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
       scriptsAdded.forEach(script => {

package/src/styles/global.css

@@ -58,31 +58,18 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Engine brand palette — official guidelines */
-  --color-engine-black:  #0D1117;
-  --color-engine-cyan:   #7DCBD9;
-  --color-engine-green:  #1E9D6D;
-  --color-engine-blue:   #157DE5;
-  --color-engine-orange: #FD4B23;
-  --color-engine-amber:  #FFB200;
-  --color-engine-bg:     #F3F3F4;
-  --color-engine-border: #B0B1B3;
-  --color-engine-text:   #0D1117;
-  --color-engine-muted:  #616368;
-  --color-engine-label:  #B0B1B3;
-
-  /* Engine Cyan brand ramp */
-  --color-brand-50:  #F0FAFB;
-  --color-brand-100: #D9F2F5;
-  --color-brand-200: #B3E5EB;
-  --color-brand-300: #7DCBD9;
-  --color-brand-400: #5BB8CA;
-  --color-brand-500: #3AA0B5;
-  --color-brand-600: #2D849A;
-  --color-brand-700: #266B7E;
-  --color-brand-800: #235768;
-  --color-brand-900: #1F4858;
-  --color-brand-950: #112E3A;
+  /* Neutral brand ramp — override per-app to apply your brand colors */
+  --color-brand-50:  #f8fafc;
+  --color-brand-100: #f1f5f9;
+  --color-brand-200: #e2e8f0;
+  --color-brand-300: #cbd5e1;
+  --color-brand-400: #94a3b8;
+  --color-brand-500: #64748b;
+  --color-brand-600: #475569;
+  --color-brand-700: #334155;
+  --color-brand-800: #1e293b;
+  --color-brand-900: #0f172a;
+  --color-brand-950: #020617;
 
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
@@ -92,22 +79,22 @@
 }
 
 :root {
-  --dash-text:    #0D1117;
-  --dash-muted:   #3d4047;
-  --dash-label:   #8b8d91;
-  --dash-surface: #fef9ef;
-  --dash-border:  #e2c97a;
-  --dash-accent:  #FFB200;
+  --dash-text:    #0f172a;
+  --dash-muted:   #475569;
+  --dash-label:   #94a3b8;
+  --dash-surface: #ffffff;
+  --dash-border:  #e2e8f0;
+  --dash-accent:  #64748b;
   --dash-success: #34d399;
   --dash-info:    #67e8f9;
-  --dash-warning: #FD4B23;
+  --dash-warning: #f59e0b;
   --dash-danger:  #dc2626;
-  --dash-dark:    #0D1117;
-  --dash-darker:  #06090d;
-  --dash-chart-1: #FFB200;
-  --dash-chart-2: #1E9D6D;
-  --dash-chart-3: #7DCBD9;
-  --dash-chart-4: #FD4B23;
+  --dash-dark:    #0f172a;
+  --dash-darker:  #020617;
+  --dash-chart-1: #64748b;
+  --dash-chart-2: #34d399;
+  --dash-chart-3: #67e8f9;
+  --dash-chart-4: #f59e0b;
   --dash-metric-size: 2.5rem;
   --dash-metric-sub: 2.25rem;
   --color-dash-text:    var(--dash-text);
@@ -206,37 +193,37 @@
 
 /*
  * Restore HeroUI theme variables inside the Command Center scope.
- * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
+ * Neutral defaults — override per-app to apply your brand colors.
  */
 .heroui-scope {
-  --primary: #0D1117;
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.9911 0 0);
-  --secondary: #7DCBD9;
-  --secondary-foreground: #0D1117;
-  --success: #1E9D6D;
+  --secondary: oklch(0.55 0.02 240);
+  --secondary-foreground: oklch(0.9911 0 0);
+  --success: #16a34a;
   --success-foreground: oklch(0.9911 0 0);
-  --warning: #FFB200;
-  --warning-foreground: #0D1117;
-  --danger: #FD4B23;
+  --warning: #f59e0b;
+  --warning-foreground: oklch(0.205 0 0);
+  --danger: #dc2626;
   --danger-foreground: oklch(0.9911 0 0);
 
   --muted: oklch(0.5517 0.0138 285.94);
   --accent: oklch(0.6204 0.195 253.83);
   --accent-foreground: oklch(0.9911 0 0);
-  --background: #F3F3F4;
-  --foreground: #0D1117;
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
   --default: oklch(94% 0.001 286.375);
-  --default-foreground: #0D1117;
-  --border: #B0B1B3;
+  --default-foreground: oklch(0.145 0 0);
+  --border: oklch(0.85 0.005 286);
   --separator: oklch(92% 0.004 286.32);
   --segment: oklch(100% 0 0);
-  --segment-foreground: #0D1117;
+  --segment-foreground: oklch(0.145 0 0);
   --surface: oklch(100% 0 0);
-  --surface-foreground: #0D1117;
+  --surface-foreground: oklch(0.145 0 0);
   --overlay: oklch(100% 0 0);
-  --overlay-foreground: #0D1117;
-  --focus: #157DE5;
-  --link: #0D1117;
+  --overlay-foreground: oklch(0.145 0 0);
+  --focus: oklch(0.6 0.18 250);
+  --link: oklch(0.205 0 0);
 }
 
 /* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
@@ -261,9 +248,9 @@ body > .fixed.inset-x-0.rounded-2xl {
   --overlay: oklch(0.2103 0.0059 285.89);
   --overlay-foreground: oklch(0.9911 0 0);
   --warning: oklch(0.8203 0.1388 76.34);
-  --warning-foreground: #0D1117;
+  --warning-foreground: oklch(0.145 0 0);
   --danger: oklch(0.594 0.1967 24.63);
   --danger-foreground: oklch(0.9911 0 0);
-  --focus: #157DE5;
+  --focus: oklch(0.6 0.18 250);
   --link: oklch(0.9911 0 0);
 }