diff --git a/addons/at_master_order/BRAND_COLOR_GUIDELINE.md b/addons/at_master_order/BRAND_COLOR_GUIDELINE.md new file mode 100644 index 0000000..6f12929 --- /dev/null +++ b/addons/at_master_order/BRAND_COLOR_GUIDELINE.md @@ -0,0 +1,186 @@ +# Brand Color Guideline - OWL Dashboard Components + +## Primary Brand Color: Steel Blue + +| Color Name | Hex Code | RGB | Usage | +|------------|----------|-----|-------| +| **Steel Blue (Primary)** | `#4682B4` | rgb(70, 130, 180) | Primary accent, buttons, links, icons | +| **Steel Blue Dark** | `#3A6D99` | rgb(58, 109, 153) | Hover states, darker accents | +| **Steel Blue Light** | `#5B9BD5` | rgb(91, 155, 213) | Lighter accents, highlights | +| **Steel Blue Pale** | `#E8F4FC` | rgb(232, 244, 252) | Background tints, selected states | + +--- + +## Design Principles + +### 1. Clean White Header Bar (No Gradients) +```scss +.header { + background: white; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} +``` + +### 2. No SCSS Variables +**❌ AVOID** - Can cause Odoo compilation issues: +```scss +$steel-blue: #4682B4; +$steel-blue-dark: lighten($steel-blue, 10%); // lighten() NOT supported +``` + +**✅ USE** - Hardcoded hex colors: +```scss +color: #4682B4; // Steel Blue +background: #3A6D99; // Steel Blue Dark +border-color: #5B9BD5; // Steel Blue Light +``` + +--- + +## Color Palette Reference + +### Accent Colors (Steel Blue Family) +```scss +// Primary actions, links, icons +.primary-element { + color: #4682B4; +} + +// Hover/active states +.primary-element:hover { + color: #3A6D99; +} + +// Icon backgrounds with gradient +.icon-box { + background: linear-gradient(135deg, #4682B4, #3A6D99); +} +``` + +### Status Colors (Keep Original) +| Status | Background | Text Color | Border | +|--------|------------|------------|--------| +| Success/Complete | `#f0fdf4` | `#22c55e` | `#22c55e` | +| Warning | `#fffbeb` | `#f59e0b` | `#f59e0b` | +| Danger/Critical | `#fef2f2` | `#ef4444` | `#ef4444` | + +### Neutral Colors +| Usage | Hex Code | +|-------|----------| +| Primary text | `#1e293b` | +| Secondary text | `#64748b` | +| Muted text | `#94a3b8` | +| Border light | `#e2e8f0` | +| Background | `#f8f9fa` | +| Card background | `#ffffff` | + +--- + +## Component Styling + +### Cards with Status Borders +```scss +.customer-card { + background: white; + border-radius: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + border-left: 5px solid transparent; + + &.card-complete { + border-left-color: #22c55e; + } + + &.card-warning { + border-left-color: #f59e0b; + } + + &.card-critical { + border-left-color: #ef4444; + } +} +``` + +### Links & Interactive Elements +```scss +.link { + color: #4682B4; + text-decoration: none; + font-weight: 500; + + &:hover { + text-decoration: underline; + color: #3A6D99; + } +} +``` + +### Buttons +```scss +.btn-primary { + background: #4682B4 !important; + border-color: #4682B4 !important; + color: white !important; + + &:hover { + background: #3A6D99 !important; + border-color: #3A6D99 !important; + } +} +``` + +### Icons in Headers +```scss +.title-icon { + color: #4682B4; + margin-right: 10px; +} +``` + +### Checkbox Accent +```scss +input[type="checkbox"] { + accent-color: #4682B4; +} +``` + +--- + +## Summary Card Icons (Gradient Style) +```scss +// Steel Blue card +&.card-blue .card-icon { + background: linear-gradient(135deg, #4682B4, #3A6D99); +} + +// Keep other status gradients +&.card-green .card-icon { + background: linear-gradient(135deg, #22c55e, #16a34a); +} + +&.card-red .card-icon { + background: linear-gradient(135deg, #ef4444, #dc2626); +} +``` + +--- + +## Files Using This Guideline + +| File | Description | +|------|-------------| +| `static/src/scss/inventory_tracking_dashboard.scss` | Inventory CTN tracking | +| `static/src/scss/invoice_tracking_dashboard.scss` | Invoice payment tracking | + +--- + +## Important Notes + +1. **Never use SCSS functions** like `lighten()`, `darken()`, `mix()` - Odoo doesn't support them +2. **Always use hardcoded hex values** - More reliable compilation +3. **Keep status colors (green/yellow/red) unchanged** - They have semantic meaning +4. **Only update blue accent colors** to Steel Blue (#4682B4) + +--- + +*Last Updated: January 2026*