Add Theia base + Product OS vision and guides
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
254
UI-DESIGN-GUIDE.md
Normal file
254
UI-DESIGN-GUIDE.md
Normal file
@@ -0,0 +1,254 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user