This commit is contained in:
gsinghpal
2026-05-22 18:01:31 -04:00
parent d127e19b45
commit f661724c72
34 changed files with 1011 additions and 59 deletions

View File

@@ -0,0 +1,68 @@
// =============================================================================
// Fusion Plating — Job Status pill on the SO list
// Copyright 2026 Nexa Systems Inc. · License OPL-1
//
// One pill per row, one colour per phase, vibrant + saturated so phases
// pop at a glance against both the light and dark Odoo bundles. Same
// hue map for both modes — saturated 500-level Tailwind hues with white
// text give consistent contrast against either page background.
// =============================================================================
// ----- Vibrant tints (light + dark) -----
$_fp-muted-bg : #6b7280; // slate
$_fp-warning-bg : #f59e0b; // amber
$_fp-primary-bg : #8b5cf6; // violet
$_fp-info-bg : #3b82f6; // blue
$_fp-shipping-bg : #06b6d4; // cyan
$_fp-delivered-bg : #14b8a6; // teal
$_fp-invoiced-bg : #84cc16; // lime
$_fp-paid-bg : #16a34a; // green
$_fp-danger-bg : #ef4444; // red
// Matching glow shadows — darker tone of the same hue for a subtle
// drop-shadow that gives the pill a "lifted" feel without being noisy.
$_fp-muted-glow : rgba(31, 41, 55, 0.35);
$_fp-warning-glow : rgba(180, 83, 9, 0.45);
$_fp-primary-glow : rgba(91, 33, 182, 0.45);
$_fp-info-glow : rgba(29, 78, 216, 0.45);
$_fp-shipping-glow : rgba(14, 116, 144, 0.45);
$_fp-delivered-glow : rgba(15, 118, 110, 0.45);
$_fp-invoiced-glow : rgba(101, 163, 13, 0.45);
$_fp-paid-glow : rgba(21, 128, 61, 0.5);
$_fp-danger-glow : rgba(185, 28, 28, 0.45);
// =============================================================================
// Pill base
// =============================================================================
.fp-job-status {
display: inline-block;
padding: 0.4em 0.95em;
border-radius: 999px;
font-weight: 600;
font-size: 0.82em;
line-height: 1.25;
letter-spacing: 0.015em;
white-space: nowrap;
text-align: center;
min-width: 72px;
color: #ffffff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
// =============================================================================
// Per-kind tints — same map applies to light + dark bundles. White text
// gives consistent contrast against any saturated mid-tone hue.
// =============================================================================
.fp-kind-muted { background-color: $_fp-muted-bg; box-shadow: 0 1px 3px $_fp-muted-glow; }
.fp-kind-warning { background-color: $_fp-warning-bg; box-shadow: 0 1px 3px $_fp-warning-glow; }
.fp-kind-primary { background-color: $_fp-primary-bg; box-shadow: 0 1px 3px $_fp-primary-glow; }
.fp-kind-info { background-color: $_fp-info-bg; box-shadow: 0 1px 3px $_fp-info-glow; }
.fp-kind-shipping { background-color: $_fp-shipping-bg; box-shadow: 0 1px 3px $_fp-shipping-glow; }
.fp-kind-delivered { background-color: $_fp-delivered-bg; box-shadow: 0 1px 3px $_fp-delivered-glow; }
.fp-kind-invoiced { background-color: $_fp-invoiced-bg; box-shadow: 0 1px 3px $_fp-invoiced-glow; }
.fp-kind-paid {
background-color: $_fp-paid-bg;
box-shadow: 0 1px 4px $_fp-paid-glow;
font-weight: 700;
}
.fp-kind-danger { background-color: $_fp-danger-bg; box-shadow: 0 1px 3px $_fp-danger-glow; }