255 lines
6.8 KiB
Markdown
255 lines
6.8 KiB
Markdown
# Product OS - UI Shell Design Guide
|
|
|
|
## 🎨 Design Customization Map
|
|
|
|
### **Quick Reference: Where to Change What**
|
|
|
|
| What You Want to Change | File to Edit | Line/Section |
|
|
|------------------------|--------------|--------------|
|
|
| **Colors** | `packages/monaco/data/monaco-themes/vscode/dark_vs.json` | All colors |
|
|
| **Fonts** | `packages/core/src/browser/style/index.css` | Lines 40-62 |
|
|
| **Panel Sizes** | `packages/core/src/browser/shell/application-shell.ts` | Lines 2269-2288 |
|
|
| **Layout Structure** | `packages/core/src/browser/shell/application-shell.ts` | Lines 188-220 |
|
|
| **Borders & Spacing** | `packages/core/src/browser/style/index.css` | Lines 24-76 |
|
|
|
|
---
|
|
|
|
## 1. COLOR CUSTOMIZATION
|
|
|
|
### File: `packages/monaco/data/monaco-themes/vscode/dark_vs.json`
|
|
|
|
```json
|
|
{
|
|
"colors": {
|
|
"editor.background": "#1E1E1E", // Main editor area
|
|
"editor.foreground": "#D4D4D4", // Text color
|
|
|
|
// SIDEBAR
|
|
"sideBar.background": "#252526", // Left/right sidebar background
|
|
"sideBarTitle.foreground": "#BBBBBB", // Sidebar titles
|
|
|
|
// ACTIVITY BAR (left icon strip)
|
|
"activityBar.background": "#333333", // Activity bar background
|
|
"activityBarBadge.background": "#007ACC", // Badge colors (notifications)
|
|
|
|
// PANELS (bottom area)
|
|
"panel.background": "#1E1E1E", // Bottom panel (terminal, etc)
|
|
"panel.border": "#454545", // Panel borders
|
|
|
|
// TABS
|
|
"tab.activeBackground": "#1E1E1E", // Active tab
|
|
"tab.inactiveBackground": "#2D2D2D", // Inactive tabs
|
|
"tab.activeForeground": "#FFFFFF", // Active tab text
|
|
|
|
// MENU
|
|
"menu.background": "#252526", // Menu background
|
|
"menu.foreground": "#CCCCCC", // Menu text
|
|
|
|
// STATUS BAR (bottom)
|
|
"statusBar.background": "#007ACC", // Status bar background
|
|
"statusBar.foreground": "#FFFFFF", // Status bar text
|
|
|
|
// BUTTONS
|
|
"button.background": "#0E639C", // Button background
|
|
"button.foreground": "#FFFFFF", // Button text
|
|
|
|
// INPUTS
|
|
"input.background": "#3C3C3C", // Input fields
|
|
"input.foreground": "#CCCCCC", // Input text
|
|
"input.border": "#454545", // Input borders
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 2. TYPOGRAPHY
|
|
|
|
### File: `packages/core/src/browser/style/index.css`
|
|
|
|
```css
|
|
:root {
|
|
/* UI Font (menus, buttons, labels) */
|
|
--theia-ui-font-size1: 13px; /* Base size */
|
|
--theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
/* Code Font (editor, terminal) */
|
|
--theia-code-font-size: 13px;
|
|
--theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono";
|
|
|
|
/* Change to your preferred fonts: */
|
|
/* --theia-ui-font-family: "Inter", "SF Pro", sans-serif; */
|
|
/* --theia-code-font-family: "JetBrains Mono", "Fira Code", monospace; */
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 3. SPACING & LAYOUT
|
|
|
|
### File: `packages/core/src/browser/style/index.css`
|
|
|
|
```css
|
|
:root {
|
|
--theia-ui-padding: 6px; /* General padding */
|
|
--theia-border-width: 1px; /* Border thickness */
|
|
--theia-panel-border-width: 1px; /* Panel borders */
|
|
--theia-icon-size: 16px; /* Icon size */
|
|
}
|
|
```
|
|
|
|
### File: `packages/core/src/browser/shell/application-shell.ts`
|
|
|
|
```typescript
|
|
// Panel size ratios (line ~2269)
|
|
export const DEFAULT_OPTIONS = {
|
|
bottomPanel: {
|
|
initialSizeRatio: 0.382 // 38.2% of window height
|
|
},
|
|
leftPanel: {
|
|
initialSizeRatio: 0.191 // 19.1% of window width
|
|
},
|
|
rightPanel: {
|
|
initialSizeRatio: 0.191 // 19.1% of window width
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 4. QUICK DESIGN CHANGES - Copy & Paste
|
|
|
|
### A. Modern Dark Blue Theme
|
|
|
|
**File:** `packages/monaco/data/monaco-themes/vscode/dark_vs.json`
|
|
|
|
```json
|
|
{
|
|
"colors": {
|
|
"editor.background": "#0D1117",
|
|
"sideBar.background": "#161B22",
|
|
"activityBar.background": "#010409",
|
|
"activityBarBadge.background": "#1F6FEB",
|
|
"statusBar.background": "#1F6FEB",
|
|
"panel.background": "#0D1117",
|
|
"tab.activeBackground": "#0D1117",
|
|
"tab.inactiveBackground": "#161B22"
|
|
}
|
|
}
|
|
```
|
|
|
|
### B. Increase Font Sizes
|
|
|
|
**File:** `packages/core/src/browser/style/index.css`
|
|
|
|
```css
|
|
:root {
|
|
--theia-ui-font-size1: 15px; /* Was 13px */
|
|
--theia-code-font-size: 15px; /* Was 13px */
|
|
}
|
|
```
|
|
|
|
### C. Wider Sidebars
|
|
|
|
**File:** `packages/core/src/browser/shell/application-shell.ts`
|
|
|
|
```typescript
|
|
leftPanel: {
|
|
initialSizeRatio: 0.25 // 25% instead of 19.1%
|
|
},
|
|
rightPanel: {
|
|
initialSizeRatio: 0.25 // 25% instead of 19.1%
|
|
}
|
|
```
|
|
|
|
### D. Smaller Bottom Panel
|
|
|
|
```typescript
|
|
bottomPanel: {
|
|
initialSizeRatio: 0.30 // 30% instead of 38.2%
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 5. PRODUCT OS BRANDING
|
|
|
|
### Custom Colors for Product OS
|
|
|
|
```json
|
|
{
|
|
"colors": {
|
|
// Google Cloud inspired
|
|
"activityBarBadge.background": "#4285F4", // Google Blue
|
|
"statusBar.background": "#34A853", // Google Green
|
|
"button.background": "#4285F4",
|
|
|
|
// Dark background
|
|
"editor.background": "#121212",
|
|
"sideBar.background": "#1E1E1E",
|
|
"activityBar.background": "#0A0A0A",
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Testing Your Changes
|
|
|
|
### Development Workflow:
|
|
|
|
1. **Edit design files** (CSS, JSON, TypeScript)
|
|
2. **Rebuild:**
|
|
```bash
|
|
cd /Users/markhenderson/Cursor\ Projects/master-ai/theia
|
|
npm run build:electron
|
|
```
|
|
3. **Test:**
|
|
```bash
|
|
npm run start:electron
|
|
```
|
|
4. **See changes immediately!**
|
|
|
|
### Watch Mode (auto-rebuild):
|
|
```bash
|
|
npm run watch:electron
|
|
```
|
|
|
|
---
|
|
|
|
## 📁 File Structure Summary
|
|
|
|
```
|
|
theia/
|
|
├── packages/
|
|
│ ├── core/src/browser/
|
|
│ │ ├── style/
|
|
│ │ │ └── index.css ← Typography, spacing, borders
|
|
│ │ └── shell/
|
|
│ │ └── application-shell.ts ← Panel sizes, layout structure
|
|
│ └── monaco/data/monaco-themes/vscode/
|
|
│ └── dark_vs.json ← All colors
|
|
└── examples/electron/
|
|
├── package.json ← App name, branding
|
|
└── resources/ ← Icon, splash screen
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Next Steps for Product OS Design
|
|
|
|
1. **Lock dark theme** (remove light theme option)
|
|
2. **Custom color palette** (Google Cloud colors)
|
|
3. **Simplify UI** (hide developer-focused elements)
|
|
4. **Custom panels** (replace File Explorer with Product sections)
|
|
5. **Branding** (logo, splash screen, app icon)
|
|
|
|
---
|
|
|
|
## 💡 Pro Tips
|
|
|
|
- **CSS Variables** are your friend - change one variable, affects everywhere
|
|
- **Hot reload:** Changes to CSS show immediately with watch mode
|
|
- **Theme files:** JSON files control all colors - easy to swap themes
|
|
- **Test often:** Build and test frequently to see visual changes
|