@kitconcept/volto-light-theme 7.0.0-alpha.2 → 7.0.0-alpha.4

package/.changelog.draft

@@ -1,11 +1,7 @@
-## 7.0.0-alpha.2 (2025-05-19)
+## 7.0.0-alpha.4 (2025-05-22)
 
-### Breaking
+### Internal
 
-- Update to use `volto-button-block` 4a0. @sneridagh [#553](https://github.com/kitconcept/volto-light-theme/pull/553)
-
-### Feature
-
-- Added the `volto-logos-block` and `volto-carousel-block` as recommended add-ons. @sneridagh [#550](https://github.com/kitconcept/volto-light-theme/pull/550)
+- Added some of the Volto's Cypress tests. @sneridagh [#540](https://github.com/kitconcept/volto-light-theme/pull/540)
 
 

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.4 (2025-05-22)
+
+### Internal
+
+- Added some of the Volto's Cypress tests. @sneridagh [#540](https://github.com/kitconcept/volto-light-theme/pull/540)
+
+## 7.0.0-alpha.3 (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 
+
 ## 7.0.0-alpha.2 (2025-05-19)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-alpha.4",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -34,7 +34,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 = {