feat: differentiate between header and footer colors

src/app/app.routes.spec.ts

@@ -16,7 +16,8 @@ const tenant: Tenant = {
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
   success_color: '#198754',
-  header_footer_bg_color: '#313131',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

src/app/app.spec.ts

@@ -15,7 +15,8 @@ const tenant: Tenant = {
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
   success_color: '#198754',
-  header_footer_bg_color: '#313131',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

src/app/app.ts

@@ -34,7 +34,8 @@ function hexToRgb(hex: string): string {
     '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
     '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
     '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
-    '[style.--tenant-header-footer-bg]': 'tenantHeaderFooterBgColor()'
+    '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
+    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
   }
 })
 export class App {
@@ -66,10 +67,15 @@ export class App {
   protected readonly tenantSuccessColorRgb = computed(() =>
     hexToRgb(this.tenantSuccessColor())
   );
-  protected readonly tenantHeaderFooterBgColor = computed(
+  protected readonly tenantHeaderBgColor = computed(
     () =>
-      this.tenantService.tenant()?.header_footer_bg_color ??
+      this.tenantService.tenant()?.header_bg_color ??
-      DEFAULT_TENANT_BRANDING.headerFooterBgColor
+      DEFAULT_TENANT_BRANDING.headerBgColor
+  );
+  protected readonly tenantFooterBgColor = computed(
+    () =>
+      this.tenantService.tenant()?.footer_bg_color ??
+      DEFAULT_TENANT_BRANDING.footerBgColor
   );
 }
 

src/app/core/layout/store-layout/store-footer/store-footer.component.scss

@@ -1,5 +1,5 @@
 .store-layout__footer {
-  background-color: var(--tenant-header-footer-bg);
+  background-color: var(--tenant-footer-bg);
 }
 
 .store-layout__brand-slot {

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -1,6 +1,6 @@
 .store-layout__header {
   color: #ffffff;
-  background-color: var(--tenant-header-footer-bg);
+  background-color: var(--tenant-header-bg);
   box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
 }
 
@@ -58,14 +58,14 @@
 .store-layout__search-button {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.2);
-  background-color: color-mix(in srgb, white 10%, var(--tenant-header-footer-bg));
+  background-color: color-mix(in srgb, white 10%, var(--tenant-header-bg));
 }
 
 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.28);
-  background-color: color-mix(in srgb, white 16%, var(--tenant-header-footer-bg));
+  background-color: color-mix(in srgb, white 16%, var(--tenant-header-bg));
 }
 
 .store-layout__action-button {

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -15,7 +15,8 @@ const tenant: Tenant = {
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
   success_color: '#198754',
-  header_footer_bg_color: '#313131',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

src/app/core/services/tenant-ssr-cache.store.ts

@@ -18,7 +18,8 @@ export const DEFAULT_TENANT_BRANDING = {
   secondaryColor: '#9e9e9e',
   dangerColor: '#fd4c4c',
   successColor: '#198754',
-  headerFooterBgColor: '#313131'
+  headerBgColor: '#313131',
+  footerBgColor: '#313131'
 } as const;
 
 export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');

src/app/core/services/tenant.interface.ts

@@ -9,7 +9,8 @@ export interface Tenant {
   secondary_color: string;
   danger_color: string;
   success_color: string;
-  header_footer_bg_color: string;
+  header_bg_color: string;
+  footer_bg_color: string;
   header_logo: string;
   footer_logo: string;
 }

src/app/core/services/tenant.service.spec.ts

@@ -17,7 +17,8 @@ const tenant: Tenant = {
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
   success_color: '#198754',
-  header_footer_bg_color: '#313131',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -220,7 +220,7 @@
         <div class="col-md-6 mb-3 mb-md-0">
           <div class="tenant-logo-card">
             <div class="tenant-logo-card__label">Logo del Header</div>
-            <div class="tenant-logo-card__container header-footer-bg">
+            <div class="tenant-logo-card__container header-bg">
               @if (tenant()?.header_logo) {
                 <img [src]="tenant()?.header_logo" alt="Header Logo" class="tenant-logo-card__img" />
               } @else {
@@ -236,7 +236,7 @@
         <div class="col-md-6">
           <div class="tenant-logo-card">
             <div class="tenant-logo-card__label">Logo del Footer</div>
-            <div class="tenant-logo-card__container header-footer-bg">
+            <div class="tenant-logo-card__container footer-bg">
               @if (tenant()?.footer_logo) {
                 <img [src]="tenant()?.footer_logo" alt="Footer Logo" class="tenant-logo-card__img" />
               } @else {
@@ -295,6 +295,26 @@
               </div>
             </div>
           </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-header-bg)'"></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Header BG</span>
+                <code class="color-swatch-card__value">{{ tenant()?.header_bg_color || 'Default' }}</code>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-3 mb-3">
+            <div class="color-swatch-card shadow-sm">
+              <div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-footer-bg)'"></div>
+              <div class="color-swatch-card__body">
+                <span class="color-swatch-card__title">Footer BG</span>
+                <code class="color-swatch-card__value">{{ tenant()?.footer_bg_color || 'Default' }}</code>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -164,8 +164,12 @@ h1 {
     }
   }
 
-  .header-footer-bg {
+  .header-bg {
-    background-color: var(--tenant-header-footer-bg, #f8f9fa);
+    background-color: var(--tenant-header-bg, #f8f9fa);
+  }
+
+  .footer-bg {
+    background-color: var(--tenant-footer-bg, #f8f9fa);
   }
 
   .color-swatch-card {

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -14,7 +14,8 @@ const tenant: Tenant = {
   secondary_color: '#A0A0A0',
   danger_color: '#FF8888',
   success_color: '#198754',
-  header_footer_bg_color: '#313131',
+  header_bg_color: '#313131',
+  footer_bg_color: '#313131',
   header_logo: 'https://example.com/header.png',
   footer_logo: 'https://example.com/footer.png'
 };