Tower: upload at_master_order 18.0.10.0 (via marketplace)
This commit is contained in:
186
addons/at_master_order/BRAND_COLOR_GUIDELINE.md
Normal file
186
addons/at_master_order/BRAND_COLOR_GUIDELINE.md
Normal file
@@ -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*
|
||||
Reference in New Issue
Block a user