@kitconcept/volto-light-theme 7.7.0 → 7.8.0

package/.changelog.draft

@@ -1,7 +1,14 @@
-## 7.7.0 (2026-01-29)
+## 7.8.0 (2026-02-23)
 
 ### Feature
 
-- Add sticky menu in mobile view. @iFlameing 
+- Remove empty space  when next element has a grey background color and add blockWidth widget @Tishasoumya-02 [#758](https://github.com/kitconcept/volto-light-theme/pull/758)
+
+### Bugfix
+
+- Fix color for social icons in post footer. @danalvrz 
+- Fix color in language selector, and remove extra margin between Teaser and Button blocks. @danalvrz 
+- Fix sticky menu not clickable at default zoom setting @Tishasoumya-02 
+- Move the head title after the date in NewsView and EventView, making it consistent with the listing view. @iFlameing 
 
 

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 <!-- towncrier release notes start -->
 
+## 7.8.0 (2026-02-23)
+
+### Feature
+
+- Remove empty space  when next element has a grey background color and add blockWidth widget @Tishasoumya-02 [#758](https://github.com/kitconcept/volto-light-theme/pull/758)
+
+### Bugfix
+
+- Fix color for social icons in post footer. @danalvrz 
+- Fix color in language selector, and remove extra margin between Teaser and Button blocks. @danalvrz 
+- Fix sticky menu not clickable at default zoom setting @Tishasoumya-02 
+- Move the head title after the date in NewsView and EventView, making it consistent with the listing view. @iFlameing 
+
 ## 7.7.0 (2026-01-29)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Blocks/Banner/schema.js

@@ -0,0 +1,26 @@
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+});
+export const BannerStylingSchema = ({ schema, formData, intl }) => {
+  addStyling({ schema, intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    filterActions: ['layout', 'default'],
+  };
+
+  return schema;
+};

package/src/components/Theme/EventView.jsx

@@ -73,14 +73,14 @@ const EventView = (props) => {
   return (
     <Container id="page-document" className="view-wrapper event-view">
       <div className="dates">
-        {content?.head_title && (
-          <span className="head-title"> {content?.head_title}</span>
-        )}{' '}
         {formattedDate ? (
           <span className="day" suppressHydrationWarning>
             {formattedDate}
           </span>
-        ) : null}
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
+        )}
       </div>
       {hasBlocksData(content) ? (
         <>

package/src/components/Theme/NewsItemView.jsx

@@ -21,9 +21,6 @@ const NewsItemView = ({ content }) => {
   return (
     <Container id="page-document" className="view-wrapper newsitem-view">
       <div className="dates">
-        {content?.head_title && (
-          <span className="head-title"> {content?.head_title}</span>
-        )}{' '}
         {content.effective ? (
           <FormattedDate
             key="day"
@@ -35,7 +32,10 @@ const NewsItemView = ({ content }) => {
             }}
             className="day"
           />
-        ) : null}
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
+        )}
       </div>
       <RenderBlocks content={content} />
     </Container>

package/src/config/blocks.tsx

@@ -31,6 +31,8 @@ import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
 
 import { searchBlockSchemaEnhancer } from '../components/Blocks/Search/schema';
 
+import { BannerStylingSchema } from '../components/Blocks/Banner/schema';
+
 import gridSVG from '../icons/block_icn_grid.svg';
 import accordionSVG from '../icons/block_icn_accordion.svg';
 import descriptionSVG from '@plone/volto/icons/description.svg';
@@ -61,6 +63,7 @@ declare module '@plone/types' {
     hero: BlockConfigBase;
     slateTable: BlockConfigBase;
     eventCalendar: BlockConfigBase;
+    banner: BlockConfigBase;
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
@@ -365,6 +368,11 @@ export default function install(config: ConfigType) {
     schemaEnhancer: defaultStylingSchema,
   };
 
+  config.blocks.blocksConfig.banner = {
+    ...config.blocks.blocksConfig.banner,
+    schemaEnhancer: BannerStylingSchema,
+  };
+
   config.blocks.blocksConfig.search = {
     ...config.blocks.blocksConfig.search,
     schemaEnhancer: composeSchema(

package/src/theme/_bgcolor-blocks-layout.scss

@@ -407,6 +407,14 @@
   }
 }
 
+// Banner block, if next block has different bgcolor it snaps to the bottom
+#page-document
+  .blocks-group-wrapper:has(
+    :last-child.banner.next--has--different--backgroundColor
+  ) {
+  padding-bottom: 0;
+}
+
 // Color map
 @mixin use-theme-colors() {
   #page-document {
@@ -1269,6 +1277,9 @@
             color: var(--header-foreground);
           }
         }
+        .language-selector a {
+          color: var(--header-foreground);
+        }
       }
 
       // Navigation

package/src/theme/_content.scss

@@ -1,3 +1,12 @@
+@mixin day-with-head-title-separator {
+  .day:has(+ .head-title) {
+    &::after {
+      margin-left: 8px;
+      content: '|';
+    }
+  }
+}
+
 .ui.basic.segment.content-area {
   // We cancel the padding and margin from the segment
   // allowing the content elements to be the ones that push for
@@ -18,6 +27,8 @@
   #page-document .dates {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
+    @include day-with-head-title-separator();
+
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
     color: var(--primary-foreground-color);
@@ -27,13 +38,6 @@
       text-transform: uppercase;
     }
 
-    .head-title:has(+ .day) {
-      &::after {
-        margin-left: 8px;
-        content: '|';
-      }
-    }
-
     @container (max-width: #{$tablet-breakpoint} ) {
       .day,
       .head-title {
@@ -91,6 +95,7 @@
     }
   }
   .dates {
+    @include day-with-head-title-separator();
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
     color: var(--primary-foreground-color);
@@ -103,12 +108,6 @@
       letter-spacing: 1px;
       text-transform: uppercase;
     }
-    .head-title {
-      &::after {
-        margin-left: 8px;
-        content: '|';
-      }
-    }
     @container (max-width: #{$tablet-breakpoint} ) {
       .day,
       .head-title {

package/src/theme/_footer.scss

@@ -343,6 +343,7 @@
   .main-footer + .post-footer {
     background-color: var(--primary-color, $white);
     color: var(--primary-foreground-color, $black);
+    --social-network-icon-color-main: var(--primary-foreground-color, $black);
   }
 }
 

package/src/theme/blocks/_banner.scss

@@ -0,0 +1,3 @@
+.block.banner.has--block-width--layout {
+  max-width: 100% !important;
+}

package/src/theme/blocks/_teaser.scss

@@ -131,6 +131,7 @@
       border-bottom: none;
     }
     &.next--is--__button {
+      margin-bottom: 0 !important;
       .card-inner,
       .teaser-item.default {
         padding-bottom: 40px;

package/src/theme/main.scss

@@ -37,6 +37,7 @@
 @import 'blocks/rss';
 @import 'blocks/eventSearch';
 @import 'blocks/error-boundary';
+@import 'blocks/banner';
 @import 'sticky-menu';
 @import 'mobile-sticky-menu';
 @import 'card';

package/src/theme/sticky-menu.scss

@@ -4,7 +4,7 @@ body.cms-ui .sticky-menu {
 
 .sticky-menu {
   position: fixed;
-  z-index: 11;
+  z-index: 13;
   top: 50vh;
   right: 0;
   transform: translateY(-50%);