@kitconcept/volto-light-theme 6.0.1 → 6.1.0

package/.changelog.draft

@@ -1,7 +1,8 @@
-## 6.0.1 (2025-05-15)
+## 6.1.0 (2025-05-20)
 
-### Bugfix
+### Feature
 
-- Removed background color specification in the whole footer. We only want it in some areas of it, and depending if some sections are present or not. @sneridagh 
+- Improve Footer color handling. @danalvrz [#551](https://github.com/kitconcept/volto-light-theme/pull/551)
+- Added support for a customizable colophon footer. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,13 @@
 
 <!-- towncrier release notes start -->
 
+## 6.1.0 (2025-05-20)
+
+### Feature
+
+- Improve Footer color handling. @danalvrz [#551](https://github.com/kitconcept/volto-light-theme/pull/551)
+- Added support for a customizable colophon footer. @sneridagh 
+
 ## 6.0.1 (2025-05-15)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -33,7 +33,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "release-it": "^17.7.0",
-    "@plone/types": "1.4.4"
+    "@plone/types": "1.4.5"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

package/src/components/Footer/Footer.tsx

@@ -20,7 +20,9 @@ const Footer = () => {
 
   return (
     <footer id="footer">
-      <SlotRenderer name="preFooter" content={content} />
+      <div className="pre-footer">
+        <SlotRenderer name="preFooter" content={content} />
+      </div>
       <SlotRenderer name="footer" content={content} />
       <Container className="post-footer">
         <SlotRenderer name="postFooter" content={content} />

package/src/components/Footer/slots/Colophon.tsx

@@ -3,7 +3,7 @@ import Copyright from './Copyright';
 import Logo from '../../Logo/Logo';
 import type { Content } from '@plone/types';
 import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
-import type { SiteHeaderSettings } from '../../../types';
+import type { SiteFooterSettings, SiteHeaderSettings } from '../../../types';
 
 const Colophon = ({ content }: { content: Content }) => {
   const logo = useLiveData<SiteHeaderSettings['logo']>(
@@ -12,11 +12,23 @@ const Colophon = ({ content }: { content: Content }) => {
     'logo',
   );
 
+  const footer_colophon_text = useLiveData<
+    SiteFooterSettings['footer_colophon_text']
+  >(content, 'voltolighttheme.footer', 'footer_colophon_text');
+
   return (
     <Container className="colophon">
-      <div className="powered-by">Powered by Plone and Volto Light Theme</div>
-      <Copyright />
-      {!logo && <Logo />}
+      {footer_colophon_text ? (
+        <>{footer_colophon_text}</>
+      ) : (
+        <>
+          <div className="powered-by">
+            Powered by Plone and Volto Light Theme
+          </div>
+          <Copyright />
+          {!logo && <Logo />}
+        </>
+      )}
     </Container>
   );
 };

package/src/components/Footer/slots/CoreFooter.tsx

@@ -34,7 +34,7 @@ const CoreFooter = ({ content }: { content: Content }) => {
   >(content, 'kitconcept.footer', 'footer_column_right');
 
   return (
-    <Container className="footer">
+    <Container className="main-footer">
       <Container className="default">
         <div className="footer-grid">
           <div className="address-column">

package/src/theme/_footer.scss

@@ -1,21 +1,41 @@
 #footer {
-  padding-top: $footer-vertical-spacing-top;
+  margin-top: 1rem;
+
+  background: var(--footer-background);
+  color: var(--footer-foreground, $black);
   text-align: center;
 
+  &:has(.main-footer) {
+    --footer-background: var(--primary-color, $white);
+    --footer-foreground: var(--primary-foreground-color, $black);
+  }
+
   .container {
     padding: 0 1rem;
   }
 
-  .post-footer {
-    padding: $spacing-xlarge 2rem;
-    background: var(--footer-background);
+  & > :first-child:not(:empty) {
+    padding-top: $footer-vertical-spacing-top;
+  }
+
+  .pre-footer {
+    &:has(.logos-container) {
+      --footer-background: var(--primary-color, $white);
+      --footer-foreground: var(--primary-foreground-color, $black);
+    }
+
+    background: var(--footer-background, $white);
     color: var(--footer-foreground, $black);
-    font-size: 18px;
   }
 
-  .footer {
+  .main-footer {
+    --footer-background: var(--secondary-color, $white);
+    --footer-foreground: var(--secondary-foreground-color, $black);
+
     padding: $spacing-xlarge 2rem;
+    background: var(--footer-background);
     color: var(--footer-foreground, $black);
+
     font-size: 18px;
 
     a {
@@ -56,6 +76,18 @@
         justify-content: center;
       }
     }
+    .address-column {
+      & > a:has(img) {
+        display: block;
+        max-width: 200px;
+
+        img {
+          max-width: 100%;
+          height: auto;
+          object-fit: contain;
+        }
+      }
+    }
 
     .logo {
       display: flex;
@@ -132,6 +164,13 @@
     }
   }
 
+  .post-footer {
+    padding: $spacing-xlarge 2rem;
+    background: var(--footer-background);
+    color: var(--footer-foreground, $black);
+    font-size: 18px;
+  }
+
   .follow-us-links-and-logo {
     display: flex;
     margin-bottom: 50px;
@@ -299,8 +338,9 @@
     }
   }
 
-  .footer + .post-footer {
-    background-color: transparent;
+  .main-footer + .post-footer {
+    background-color: var(--primary-color, $white);
+    color: var(--primary-foreground-color, $black);
   }
 }
 

package/src/types.d.ts

@@ -73,6 +73,7 @@ export type SiteFooterSettings = {
   footer_column_right: Array<Link>;
   footer_logo: Image & { data?: string };
   footer_links: Array<Link>;
+  footer_colophon_text: string;
 };
 
 export type StickyMenuSettings = {