Add BrandColorLight for subtle card tinting in menu builder

New BrandColorLight column on Businesses table. Menu builder cards
(categories, subcategories, items) get a very subtle tint from the
light brand color. White when no color is set. Brand color picker
now has both dark and light fields.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

api/businesses/get.cfm

@@ -44,6 +44,7 @@ try {
             HeaderImageExtension,
             TaxRate,
             BrandColor,
+            BrandColorLight,
             SessionEnabled,
             SessionLockMinutes,
             SessionPaymentStrategy,
@@ -150,6 +151,7 @@ try {
         "TaxRate": taxRate,
         "TaxRatePercent": taxRate * 100,
         "BrandColor": len(q.BrandColor) ? (left(q.BrandColor, 1) == chr(35) ? q.BrandColor : chr(35) & q.BrandColor) : "",
+        "BrandColorLight": len(q.BrandColorLight) ? (left(q.BrandColorLight, 1) == chr(35) ? q.BrandColorLight : chr(35) & q.BrandColorLight) : "",
         "SessionEnabled": isNumeric(q.SessionEnabled) ? q.SessionEnabled : 0,
         "SessionLockMinutes": isNumeric(q.SessionLockMinutes) ? q.SessionLockMinutes : 30,
         "SessionPaymentStrategy": len(q.SessionPaymentStrategy) ? q.SessionPaymentStrategy : "A",

api/businesses/saveBrandColor.cfm

@@ -29,30 +29,27 @@ if (bizId LTE 0) {
   apiAbort({ "OK": false, "ERROR": "missing_businessid", "MESSAGE": "BusinessID is required" });
 }
 
-// Validate color format
+// Helper to validate and normalize a hex color
-brandColor = structKeyExists(data, "BrandColor") && isSimpleValue(data.BrandColor) ? trim(data.BrandColor) : "";
+function normalizeHex(raw) {
-
+  var c = isSimpleValue(raw) ? trim(raw) : "";
-// Allow empty to clear, or validate hex format
+  if (!len(c)) return "";
-if (len(brandColor) GT 0) {
+  if (left(c, 1) == chr(35)) c = right(c, len(c) - 1);
-  // Strip leading # if present
+  if (len(c) != 6 || !reFind("^[0-9A-Fa-f]{6}$", c))
-  if (left(brandColor, 1) == chr(35)) {
-    brandColor = right(brandColor, len(brandColor) - 1);
-  }
-  // Must be exactly 6 hex chars
-  if (len(brandColor) != 6 || !reFind("^[0-9A-Fa-f]{6}$", brandColor)) {
     apiAbort({ "OK": false, "ERROR": "invalid_color", "MESSAGE": "Color must be a valid 6-digit hex color (e.g. 1B4D3E or ##1B4D3E)" });
-  }
+  return uCase(c);
-  // Store uppercase, no # prefix
-  brandColor = uCase(brandColor);
 }
 
+brandColor = normalizeHex(structKeyExists(data, "BrandColor") ? data.BrandColor : "");
+brandColorLight = normalizeHex(structKeyExists(data, "BrandColorLight") ? data.BrandColorLight : "");
+
 // Update the database
 queryTimed("
   UPDATE Businesses
-  SET BrandColor = :color
+  SET BrandColor = :color, BrandColorLight = :colorLight
   WHERE ID = :bizId
 ", {
   color: { value: brandColor, cfsqltype: "cf_sql_varchar" },
+  colorLight: { value: brandColorLight, cfsqltype: "cf_sql_varchar" },
   bizId: { value: bizId, cfsqltype: "cf_sql_integer" }
 }, { datasource: "payfrit" });
 
@@ -60,7 +57,8 @@ writeOutput(serializeJSON({
   "OK": true,
   "ERROR": "",
   "MESSAGE": "Brand color saved",
-  "BRANDCOLOR": brandColor
+  "BRANDCOLOR": brandColor,
+  "BRANDCOLORLIGHT": brandColorLight
 }));
 </cfscript>
 

api/menu/getForBuilder.cfm

@@ -461,14 +461,18 @@ try {
         arrayAppend(templateLibrary, templatesById[templateID]);
     }
 
-    // Get business brand color
+    // Get business brand colors
     brandColor = "";
+    brandColorLight = "";
     try {
         qBrand = queryTimed("
-            SELECT BrandColor AS BusinessBrandColor FROM Businesses WHERE ID = :bizId
+            SELECT BrandColor, BrandColorLight FROM Businesses WHERE ID = :bizId
         ", { bizId: businessID }, { datasource: "payfrit" });
-        if (qBrand.recordCount > 0 && len(trim(qBrand.BusinessBrandColor))) {
+        if (qBrand.recordCount > 0) {
-            brandColor = left(qBrand.BusinessBrandColor, 1) == chr(35) ? qBrand.BusinessBrandColor : chr(35) & qBrand.BusinessBrandColor;
+            if (len(trim(qBrand.BrandColor)))
+                brandColor = left(qBrand.BrandColor, 1) == chr(35) ? qBrand.BrandColor : chr(35) & qBrand.BrandColor;
+            if (len(trim(qBrand.BrandColorLight)))
+                brandColorLight = left(qBrand.BrandColorLight, 1) == chr(35) ? qBrand.BrandColorLight : chr(35) & qBrand.BrandColorLight;
         }
     } catch (any e) {
         // Column may not exist yet, ignore
@@ -481,6 +485,7 @@ try {
     response["DEFAULT_MENU_ID"] = defaultMenuID;
     response["TEMPLATES"] = templateLibrary;
     response["BRANDCOLOR"] = brandColor;
+    response["BRANDCOLORLIGHT"] = brandColorLight;
     response["CATEGORY_COUNT"] = arrayLen(categories);
     response["TEMPLATE_COUNT"] = arrayLen(templateLibrary);
     response["MENU_COUNT"] = arrayLen(allMenus);

portal/menu-builder.html

@@ -162,7 +162,7 @@
 
     /* Category Card */
     .category-card {
-      background: var(--gray-50);
+      background: var(--brand-tint, var(--gray-50));
       border-radius: 12px;
       border: 2px solid var(--gray-200);
       overflow: hidden;
@@ -182,7 +182,7 @@
       display: flex;
       align-items: center;
       padding: 12px 16px;
-      background: #fff;
+      background: var(--brand-tint, #fff);
       cursor: grab;
       gap: 12px;
     }
@@ -314,7 +314,7 @@
       align-items: center;
       gap: 12px;
       padding: 10px 12px;
-      background: #fff;
+      background: var(--brand-tint, #fff);
       border-radius: 8px;
       border: 1px solid var(--gray-200);
       cursor: grab;
@@ -3622,12 +3622,15 @@
       // Show brand color picker modal
       showBrandColorPicker() {
         const currentColor = this.brandColor || '#1B4D3E';
-        document.getElementById('modalTitle').textContent = 'Brand Color';
+        const currentLight = this.brandColorLight || '';
+        document.getElementById('modalTitle').textContent = 'Brand Colors';
         document.getElementById('modalBody').innerHTML = `
-          <p style="margin-bottom: 16px; color: var(--text-muted);">
+          <div style="margin-bottom: 20px;">
-            This color is used for the category bar gradients in the customer app.
+            <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px;">Brand Color (Dark)</label>
+            <p style="margin-bottom: 10px; color: var(--text-muted); font-size: 12px;">
+              Used for category bar gradients in the customer app.
             </p>
-          <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
+            <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;">
               <input type="color" id="brandColorInput" value="${currentColor}"
                 style="width: 60px; height: 40px; border: none; cursor: pointer; border-radius: 4px;">
               <input type="text" id="brandColorHex" value="${currentColor}"
@@ -3635,8 +3638,8 @@
                 pattern="^#[0-9A-Fa-f]{6}$" maxlength="7">
               <div id="brandColorPreview" style="flex: 1; height: 40px; border-radius: 4px; background: linear-gradient(to bottom, ${currentColor}44, ${currentColor}00, ${currentColor}66);"></div>
             </div>
-          <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;">
+            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            <button type="button" class="color-preset" data-color="#1B4D3E" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #1B4D3E;" title="Forest Green (Default)"></button>
+              <button type="button" class="color-preset" data-color="#1B4D3E" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #1B4D3E;" title="Forest Green"></button>
               <button type="button" class="color-preset" data-color="#2C3E50" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #2C3E50;" title="Midnight Blue"></button>
               <button type="button" class="color-preset" data-color="#8B4513" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #8B4513;" title="Saddle Brown"></button>
               <button type="button" class="color-preset" data-color="#800020" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #800020;" title="Burgundy"></button>
@@ -3645,14 +3648,30 @@
               <button type="button" class="color-preset" data-color="#CC5500" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #CC5500;" title="Burnt Orange"></button>
               <button type="button" class="color-preset" data-color="#355E3B" style="width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #355E3B;" title="Hunter Green"></button>
             </div>
+          </div>
+          <div style="border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 20px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px;">Brand Color (Light)</label>
+            <p style="margin-bottom: 10px; color: var(--text-muted); font-size: 12px;">
+              Subtle tint for menu builder cards and backgrounds. Leave empty for white.
+            </p>
+            <div style="display: flex; align-items: center; gap: 16px;">
+              <input type="color" id="brandColorLightInput" value="${currentLight || '#F5F5F5'}"
+                style="width: 60px; height: 40px; border: none; cursor: pointer; border-radius: 4px;">
+              <input type="text" id="brandColorLightHex" value="${currentLight}"
+                style="width: 100px; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-family: monospace;"
+                placeholder="#F5F5F5" maxlength="7">
+              <div id="brandColorLightPreview" style="flex: 1; height: 40px; border-radius: 4px; border: 1px solid var(--border); background: ${currentLight || '#fff'};"></div>
+              <button type="button" class="btn btn-secondary" style="font-size: 12px; padding: 6px 10px;" onclick="document.getElementById('brandColorLightHex').value='';document.getElementById('brandColorLightPreview').style.background='#fff';">Clear</button>
+            </div>
+          </div>
           <div style="display: flex; gap: 8px; justify-content: flex-end;">
             <button type="button" class="btn btn-secondary" onclick="MenuBuilder.closeModal()">Cancel</button>
-            <button type="button" class="btn btn-primary" onclick="MenuBuilder.saveBrandColor()">Save Color</button>
+            <button type="button" class="btn btn-primary" onclick="MenuBuilder.saveBrandColor()">Save Colors</button>
           </div>
         `;
         this.showModal();
 
-        // Wire up color picker sync
+        // Wire up dark color picker sync
         const colorInput = document.getElementById('brandColorInput');
         const hexInput = document.getElementById('brandColorHex');
         const preview = document.getElementById('brandColorPreview');
@@ -3675,7 +3694,7 @@
           }
         });
 
-        // Preset buttons
+        // Preset buttons (dark only)
         document.querySelectorAll('.color-preset').forEach(btn => {
           btn.addEventListener('click', () => {
             const color = btn.dataset.color;
@@ -3684,13 +3703,37 @@
             updatePreview(color);
           });
         });
+
+        // Wire up light color picker sync
+        const lightInput = document.getElementById('brandColorLightInput');
+        const lightHex = document.getElementById('brandColorLightHex');
+        const lightPreview = document.getElementById('brandColorLightPreview');
+
+        lightInput.addEventListener('input', (e) => {
+          lightHex.value = e.target.value.toUpperCase();
+          lightPreview.style.background = e.target.value;
+        });
+
+        lightHex.addEventListener('input', (e) => {
+          let val = e.target.value;
+          if (!val.startsWith('#')) val = '#' + val;
+          if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
+            lightInput.value = val;
+            lightPreview.style.background = val;
+          }
+        });
       },
 
       // Save brand color
       async saveBrandColor() {
         const color = document.getElementById('brandColorHex').value.toUpperCase();
         if (!/^#[0-9A-Fa-f]{6}$/.test(color)) {
-          this.toast('Invalid color format. Use #RRGGBB', 'error');
+          this.toast('Invalid dark color format. Use #RRGGBB', 'error');
+          return;
+        }
+        const lightColor = (document.getElementById('brandColorLightHex')?.value || '').toUpperCase();
+        if (lightColor && !/^#[0-9A-Fa-f]{6}$/.test(lightColor)) {
+          this.toast('Invalid light color format. Use #RRGGBB or leave empty', 'error');
           return;
         }
 
@@ -3698,12 +3741,18 @@
           const response = await fetch(`${this.config.apiBaseUrl}/businesses/saveBrandColor.cfm`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ BusinessID: this.config.businessId, BrandColor: color })
+            body: JSON.stringify({
+              BusinessID: this.config.businessId,
+              BrandColor: color,
+              BrandColorLight: lightColor
+            })
           });
           const data = await response.json();
           if (data.OK) {
             this.brandColor = color;
+            this.brandColorLight = data.BRANDCOLORLIGHT ? '#' + data.BRANDCOLORLIGHT : '';
             document.getElementById('brandColorSwatch').style.background = color;
+            this.applyBrandTint();
             this.closeModal();
             this.toast('Brand color saved!', 'success');
           } else {
@@ -3715,6 +3764,16 @@
         }
       },
 
+      applyBrandTint() {
+        const canvas = document.getElementById('menuCanvas');
+        if (!canvas) return;
+        if (this.brandColorLight && this.brandColorLight.length >= 4) {
+          canvas.style.setProperty('--brand-tint', this.brandColorLight + '0A');
+        } else {
+          canvas.style.setProperty('--brand-tint', 'transparent');
+        }
+      },
+
       // Load menu from API
       async loadMenu(menuId = null) {
         try {
@@ -3749,12 +3808,14 @@
 
             // Store templates from API (default to empty array if not provided)
             this.templates = data.TEMPLATES || [];
-            // Load brand color if set
+            // Load brand colors
             if (data.BRANDCOLOR && data.BRANDCOLOR.length > 0) {
               this.brandColor = data.BRANDCOLOR;
               const swatch = document.getElementById('brandColorSwatch');
               if (swatch) swatch.style.background = data.BRANDCOLOR;
             }
+            this.brandColorLight = data.BRANDCOLORLIGHT || '';
+            this.applyBrandTint();
             this.renderTemplateLibrary();
             this.render();
           } else {