Tower: upload at_master_order 18.0.10.0 (via marketplace)

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*