spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design consistency audit fixes: alerts, cards, dark mode, utilities

Browse Source 
Alert sweep (113 alerts, 79 files):
  All persistent static banners now carry alert-permanent so the
  layout's 5-second auto-dismiss cannot swallow guidance, warnings,
  or validation errors. Transient dismissible toasts left untouched.

CSS fixes (site.css):
  .card.shadow-sm      — strips rogue border from ~40 drifted cards
  .card-header.bg-white — rebinds to var(--bs-body-bg) so card
                          headers follow dark/light theme correctly
  Typography utilities  — .text-2xs (.68rem), .text-xs (.73rem)
  Token color classes   — .text-ember, .text-ok, .text-bad,
                          .text-warn, .text-cool, .bg-paper-2
  Layout utilities      — .mw-xs/sm/md/lg replace inline max-width
  Comment              — documents text-ember vs text-primary intent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-05-10 18:05:29 -04:00
parent f6d457fe0e
commit 328b195127
80 changed files with 603 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/wwwroot/css/site.css
+42
View File
@@ -979,3 +979,45 @@ a.tag-index-badge:hover {
filter: brightness(0.88);
text-decoration: none;
}
/* =============================================================
Design system utilities — audit fixes 2026-05
============================================================= */
/* ── Card consistency ──────────────────────────────────────────
Standard is `card border-0 shadow-sm`. Any shadow card that
drifted to just `shadow-sm` gets border stripped here. */
.card.shadow-sm {
border: 0 !important;
}
/* ── Card header dark-mode fix ─────────────────────────────────
bg-white hardcodes light mode. Rebind to theme surface so
card headers follow the user's dark/light preference. */
.card-header.bg-white {
background-color: var(--bs-body-bg) !important;
}
/* ── Typography scale utilities ────────────────────────────────
Fills the gap between Bootstrap's .small and the custom
.nav-section-title / .pcl-metric-label sizes. */
.text-2xs { font-size: 0.68rem; line-height: 1.4; }
.text-xs { font-size: 0.73rem; line-height: 1.4; }
/* ── Token color utilities ─────────────────────────────────────
Use .text-ember for the amber brand accent.
Use .text-primary only for near-black ink (Bootstrap default).
Never use text-primary when you want the orange accent. */
.text-ember { color: var(--pcl-ember) !important; }
.text-ok { color: var(--pcl-ok) !important; }
.text-bad { color: var(--pcl-bad) !important; }
.text-warn { color: var(--pcl-warn) !important; }
.text-cool { color: var(--pcl-cool) !important; }
.bg-paper-2 { background-color: var(--pcl-paper-2) !important; }
/* ── Max-width layout constraints ──────────────────────────────
Use these instead of inline style="max-width:Npx" */
.mw-xs { max-width: 280px; }
.mw-sm { max-width: 360px; }
.mw-md { max-width: 480px; }
.mw-lg { max-width: 640px; }