admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): add brand design tokens partial

Browse Source 
EN Plating teal palette + gradient/shadow/radius/spacing/typography
tokens. Single source of truth for the customer portal redesign.
Tokens load first in web.assets_frontend so downstream SCSS sees them.

Refs spec: docs/superpowers/specs/2026-05-17-portal-dashboard-redesign-design.md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-17 02:36:42 -04:00
parent eac337c058
commit 3310b12754
1 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
fusion_plating/fusion_plating_portal/static/src/scss/_fp_portal_tokens.scss Normal file
View File

@@ -0,0 +1,87 @@
// ============================================================================
// Fusion Plating — Customer Portal · Design Tokens
// Brand palette pulled from enplating.com live CSS (2026-05-17).
// Loaded first in web.assets_frontend so every later SCSS file sees these.
// Per Odoo 19 SCSS rules (CLAUDE.md rule 8/9): no @import; tokens are SCSS
// variables that downstream files reference directly, NOT CSS custom props.
// ============================================================================
// Brand palette
$fp-teal-light: #2eaf93;
$fp-teal: #1a6b59;
$fp-teal-dark: #0e3d2f;
$fp-teal-deep: #0a3528;
$fp-mint: #cbf3e6;
$fp-mint-pastel: #f0fdf9;
$fp-aqua: #9ae5d4;
// Surfaces
$fp-page-bg: #f8fafb;
$fp-section-bg: #f3f7f6;
$fp-card-bg: #ffffff;
$fp-card-border: #e5e7eb;
$fp-card-border-dark: #d1d5db;
// Text
$fp-text: #111827;
$fp-text-body: #374151;
$fp-muted: #6b7280;
$fp-muted-light: #9ca3af;
$fp-disabled: #d1d5db;
// Status (functional, NOT brand)
$fp-amber: #f59e0b;
$fp-amber-bg: #fef3c7;
$fp-amber-text: #92400e;
$fp-success: #22c55e;
$fp-success-text: #15803d;
$fp-success-bg: #f0fdf4;
$fp-danger: #ef4444;
$fp-danger-dark: #b91c1c;
$fp-danger-bg: #fef2f2;
// Gradients
$fp-gradient-primary: linear-gradient(135deg, $fp-teal-light 0%, $fp-teal 100%);
$fp-gradient-danger: linear-gradient(135deg, $fp-danger 0%, $fp-danger-dark 100%);
$fp-gradient-mint: linear-gradient(135deg, $fp-mint-pastel 0%, $fp-mint 100%);
$fp-gradient-icon: linear-gradient(135deg, $fp-mint 0%, $fp-aqua 100%);
$fp-gradient-secondary: linear-gradient(180deg, #fff 0%, $fp-section-bg 100%);
$fp-gradient-tab: linear-gradient(180deg, $fp-section-bg 0%, $fp-mint 100%);
// Shadows
$fp-shadow-card: 0 1px 2px rgba(0, 0, 0, .03);
$fp-shadow-card-hover: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
$fp-shadow-button: 0 1px 3px rgba(26, 107, 89, .25), 0 4px 12px rgba(26, 107, 89, .18);
$fp-shadow-button-hover:0 2px 4px rgba(26, 107, 89, .30), 0 6px 16px rgba(26, 107, 89, .22);
$fp-shadow-danger: 0 1px 3px rgba(185, 28, 28, .25), 0 4px 12px rgba(185, 28, 28, .15);
$fp-glow-ring-teal: 0 0 0 4px rgba(46, 175, 147, .20);
$fp-glow-ring-amber: 0 0 0 4px rgba(245, 158, 11, .20);
// Geometry
$fp-radius-pill: 9999px;
$fp-radius-card: 14px;
$fp-radius-button: 9px;
$fp-radius-chip: 8px;
$fp-radius-icon: 7px;
$fp-radius-tile: 11px;
// Spacing scale (rem)
$fp-space-1: .25rem;
$fp-space-2: .5rem;
$fp-space-3: .7rem;
$fp-space-4: 1rem;
$fp-space-5: 1.25rem;
$fp-space-6: 1.5rem;
// Typography
$fp-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
$fp-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
// Dark-mode placeholder — DEFERRED per spec.
// When implementing, branch on $o-webclient-color-scheme per CLAUDE.md rule 9.
// Example pattern (do NOT enable now):
// @if $o-webclient-color-scheme == dark {
// $fp-page-bg: #0e1f1b !global;
// $fp-card-bg: #1a2b27 !global;
// // ...
// }