@schandlergarcia/sf-web-components 2.3.7 → 2.3.9

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.9] - 2026-04-13
+
+### Changed
+- **Theme-driven metric sizing** — Added CSS variables `--dash-metric-size`, `--dash-metric-sub`, `--dash-pct-size`, `--dash-pct-px`, `--dash-pct-py` that differ between neutral (modest 2.25rem) and Engine (bold 3.25rem). All metric numbers, growth percentages, and status badges now scale via these tokens, creating a visible size jump when switching to Engine branding.
+
+## [2.3.8] - 2026-04-13
+
+### Changed
+- **Engine theme overhauled for boldness** — Switched primary accent from cyan (#7DCBD9) to Engine's signature amber/gold (#FFB200) to match their actual website branding. Hero uses true Engine Black (#0D1117), surfaces have warm cream (#fef9ef), borders are gold-tinted (#e2c97a), chart-1 is now amber. Cyan moved to `--dash-info`. This makes the Engine theme dramatically different from the neutral blue theme.
+- **Logo increased to h-14** — Engine logo in dashboard header now renders larger for stronger brand presence.
+
 ## [2.3.7] - 2026-04-11
 
 ### Changed

package/brands/engine/app/pages/PartnerHubDashboard.tsx

@@ -672,7 +672,7 @@ export default function PartnerHubDashboard() {
               <img
                 src={engineLogo}
                 alt="Engine"
-                className="h-11 w-auto dark:invert dark:brightness-0 dark:contrast-100 transition-all duration-300"
+                className="h-14 w-auto dark:invert dark:brightness-0 dark:contrast-100 transition-all duration-300"
               />
               <div className="flex items-center gap-4">
                 <div className="h-10 w-px bg-gradient-to-b from-transparent via-[var(--color-dash-label)]/40 to-transparent" />
@@ -766,7 +766,7 @@ export default function PartnerHubDashboard() {
         <div className="relative max-w-[1600px] mx-auto px-8 py-12 pb-20">
           <div className="max-w-3xl space-y-3 animate-fade-in">
             <h1 className="text-3xl lg:text-4xl font-bold text-white tracking-tight leading-tight">
-              Hey there! Here's what's happening with your properties
+              Hey there Jamie! Here's what's happening with your properties
             </h1>
             <p className="text-lg text-white/70 leading-relaxed">
               Everything you need to manage your partnership with Engine — invoices, bookings, and any items that need your attention.
@@ -801,12 +801,12 @@ export default function PartnerHubDashboard() {
                     <div className="bg-[var(--color-dash-success)]/10 rounded-lg p-2">
                       <BanknotesIcon className="h-5 w-5 text-[var(--color-dash-success)]" />
                     </div>
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)]">
+                    <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)]" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
                       +45%
                     </span>
                   </div>
                   <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
-                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">${(myRevenue / 1000).toFixed(0)}K</p>
+                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>${(myRevenue / 1000).toFixed(0)}K</p>
                   <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">earned with Engine</p>
                 </>
               )}
@@ -827,12 +827,12 @@ export default function PartnerHubDashboard() {
                     <div className="bg-[var(--color-dash-warning)]/10 rounded-lg p-2">
                       <ExclamationTriangleIcon className="h-5 w-5 text-[var(--color-dash-warning)]" />
                     </div>
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-warning)] text-white">
+                    <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-warning)] text-white" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
                       REVIEW
                     </span>
                   </div>
                   <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
-                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myOpenDisputes}</p>
+                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myOpenDisputes}</p>
                   <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">items need attention</p>
                 </>
               )}
@@ -855,7 +855,7 @@ export default function PartnerHubDashboard() {
                     </div>
                   </div>
                   <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Properties</p>
-                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myProperties}</p>
+                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myProperties}</p>
                   <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">active locations</p>
                 </>
               )}
@@ -878,7 +878,7 @@ export default function PartnerHubDashboard() {
                     </div>
                   </div>
                   <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Reservations</p>
-                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myReservations}</p>
+                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myReservations}</p>
                   <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">through Engine</p>
                 </>
               )}
@@ -901,7 +901,7 @@ export default function PartnerHubDashboard() {
                     </div>
                   </div>
                   <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Invoices</p>
-                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myPendingInvoices}</p>
+                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myPendingInvoices}</p>
                   <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">ready to pay</p>
                 </>
               )}
@@ -977,7 +977,7 @@ export default function PartnerHubDashboard() {
                             <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
                               {property.name}
                             </h3>
-                            <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-success)]/20 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
+                            <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-success)]/20 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
                               +{property.growth}% growth
                             </span>
                           </div>
@@ -996,7 +996,7 @@ export default function PartnerHubDashboard() {
 
                         {/* Growth indicator */}
                         <div className="text-right flex-shrink-0">
-                          <p className="text-4xl font-black text-[var(--color-dash-success)] mb-1">
+                          <p className="font-black text-[var(--color-dash-success)] mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>
                             {property.growth}%
                           </p>
                           <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
@@ -1044,7 +1044,7 @@ export default function PartnerHubDashboard() {
                       ATR-00001 · Summit Austin Convention Center · TechCorp Inc. booking
                     </p>
                   </div>
-                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-warning)] text-white flex-shrink-0">
+                  <span className="inline-flex items-center rounded-full font-bold bg-[var(--color-dash-warning)] text-white flex-shrink-0" style={{ fontSize: 'var(--dash-pct-size)', padding: 'var(--dash-pct-py) var(--dash-pct-px)' }}>
                     NEEDS REVIEW
                   </span>
                 </div>
@@ -1054,17 +1054,17 @@ export default function PartnerHubDashboard() {
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
               <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
                 <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Current Penalty</p>
-                <p className="text-3xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">$9,000</p>
+                <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-sub)' }}>$9,000</p>
                 <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">You owe Engine</p>
               </div>
               <div className="bg-[var(--color-dash-success)]/5 dark:bg-[var(--color-dash-success)]/10 rounded-xl p-5 border border-[var(--color-dash-success)]/30">
                 <p className="text-xs font-semibold text-[var(--color-dash-success)] mb-2 uppercase tracking-wider">Resale Credit Missing</p>
-                <p className="text-3xl font-black text-[var(--color-dash-success)] mb-1">-$2,400</p>
+                <p className="font-black text-[var(--color-dash-success)] mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-sub)' }}>-$2,400</p>
                 <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Should reduce penalty</p>
               </div>
               <div className="bg-[var(--color-dash-accent)]/5 dark:bg-[var(--color-dash-accent)]/10 rounded-xl p-5 border border-[var(--color-dash-accent)]/30">
                 <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Corrected Amount</p>
-                <p className="text-3xl font-black text-[var(--color-dash-accent)] mb-1">$6,600</p>
+                <p className="font-black text-[var(--color-dash-accent)] mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-sub)' }}>$6,600</p>
                 <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">What you should owe</p>
               </div>
             </div>

package/brands/engine/global.css

@@ -93,21 +93,26 @@
 
 :root {
   --dash-text:    #0D1117;
-  --dash-muted:   #4a5568;
-  --dash-label:   #9ca3af;
-  --dash-surface: #f0fafb;
-  --dash-border:  #a8dde5;
-  --dash-accent:  #7DCBD9;
+  --dash-muted:   #3d4047;
+  --dash-label:   #8b8d91;
+  --dash-surface: #fef9ef;
+  --dash-border:  #e2c97a;
+  --dash-accent:  #FFB200;
   --dash-success: #1E9D6D;
-  --dash-info:    #157DE5;
-  --dash-warning: #FFB200;
-  --dash-danger:  #FD4B23;
-  --dash-dark:    #0c3044;
-  --dash-darker:  #071d2a;
-  --dash-chart-1: #7DCBD9;
+  --dash-info:    #7DCBD9;
+  --dash-warning: #FD4B23;
+  --dash-danger:  #dc2626;
+  --dash-dark:    #0D1117;
+  --dash-darker:  #06090d;
+  --dash-chart-1: #FFB200;
   --dash-chart-2: #1E9D6D;
-  --dash-chart-3: #FD4B23;
-  --dash-chart-4: #FFB200;
+  --dash-chart-3: #7DCBD9;
+  --dash-chart-4: #FD4B23;
+  --dash-metric-size: 3.25rem;
+  --dash-metric-sub: 2.25rem;
+  --dash-pct-size: 0.875rem;
+  --dash-pct-px: 0.75rem;
+  --dash-pct-py: 0.25rem;
   --color-dash-text:    var(--dash-text);
   --color-dash-muted:   var(--dash-muted);
   --color-dash-label:   var(--dash-label);

package/dist/styles/global.css

@@ -95,6 +95,11 @@
   --dash-chart-2: #16a34a;
   --dash-chart-3: #e11d48;
   --dash-chart-4: #7c3aed;
+  --dash-metric-size: 2.25rem;
+  --dash-metric-sub: 1.875rem;
+  --dash-pct-size: 0.75rem;
+  --dash-pct-px: 0.5rem;
+  --dash-pct-py: 0.125rem;
   --color-dash-text:    var(--dash-text);
   --color-dash-muted:   var(--dash-muted);
   --color-dash-label:   var(--dash-label);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/src/styles/global.css

@@ -95,6 +95,11 @@
   --dash-chart-2: #16a34a;
   --dash-chart-3: #e11d48;
   --dash-chart-4: #7c3aed;
+  --dash-metric-size: 2.25rem;
+  --dash-metric-sub: 1.875rem;
+  --dash-pct-size: 0.75rem;
+  --dash-pct-px: 0.5rem;
+  --dash-pct-py: 0.125rem;
   --color-dash-text:    var(--dash-text);
   --color-dash-muted:   var(--dash-muted);
   --color-dash-label:   var(--dash-label);