@kitconcept/volto-light-theme 8.0.0-alpha.27 → 8.0.0-alpha.29

package/src/customizations/volto/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE MapsSidebar.jsx
+ * REASON: Route field changes through dataAdapter to enforce default block width when floating.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import MapsSidebar from '../../../../../../components/Blocks/Maps/MapsSidebar';
+
+export default MapsSidebar;

package/src/customizations/volto/components/manage/Blocks/Maps/View.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE View.jsx
+ * REASON: Use align:noprefix and blockWidth:noprefix CSS custom properties instead of align class.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import MapsView from '../../../../../../components/Blocks/Maps/View';
+
+export default MapsView;

package/src/customizations/volto/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE VideoSidebar.jsx
+ * REASON: Route field changes through dataAdapter to enforce default block width when floating.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import VideoSidebar from '../../../../../../components/Blocks/Video/VideoSidebar';
+
+export default VideoSidebar;

package/src/customizations/volto/components/manage/Blocks/Video/View.jsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE View.jsx
+ * REASON: Use align:noprefix and blockWidth:noprefix CSS custom properties instead of align class.
+ * DATE: 2026-04-16
+ * DEVELOPER: @danalvrz
+ */
+
+import VideoView from '../../../../../../components/Blocks/Video/View';
+
+export default VideoView;

package/src/index.ts

@@ -6,6 +6,7 @@ import { Container } from '@plone/components';
 import EventView from './components/Theme/EventView';
 
 import { migrateToVLT6ColorAndWidthModel } from './transforms/to6';
+import { migrateToVLT8FloatingBlocks } from './transforms/to8';
 
 import installSettings from './config/settings';
 import installBlocks from './config/blocks';
@@ -98,6 +99,13 @@ const applyConfig = (config: ConfigType) => {
     method: migrateToVLT6ColorAndWidthModel,
   });
 
+  config.registerUtility({
+    name: 'migrateToVLT8FloatingBlocks',
+    type: 'transform',
+    dependencies: { reducer: 'content' },
+    method: migrateToVLT8FloatingBlocks,
+  });
+
   config.views.contentTypesViews.Event = EventView;
 
   config.addonReducers = {

package/src/primitives/Card/Card.tsx

@@ -94,10 +94,12 @@ type CardImageProps = {
   imageComponent?: React.ComponentType<any>;
   children?: React.ReactNode;
   showPlaceholderImage?: boolean;
+  sizes?: string;
 };
 
 const CardImage = (props: CardImageProps) => {
-  const { src, item, image, imageComponent, showPlaceholderImage } = props;
+  const { src, item, image, imageComponent, showPlaceholderImage, sizes } =
+    props;
   const Image = imageComponent || DefaultImage;
 
   return (
@@ -115,6 +117,7 @@ const CardImage = (props: CardImageProps) => {
             alt=""
             loading="lazy"
             responsive={true}
+            sizes={sizes}
           />
         )
       ) : (

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

@@ -1327,7 +1327,7 @@
 
           & > button:not(:hover, :active, :focus) {
             svg path {
-              fill: var(--secondary-foreground-color);
+              fill: var(--search-foreground);
             }
           }
         }

package/src/theme/_footer.scss

@@ -13,8 +13,11 @@
     --footer-foreground: var(--primary-foreground-color, #{$black});
   }
 
-  .container:not(:has(.container)) {
-    padding: 0;
+  & > .container:not(:empty) {
+    padding: $spacing-xlarge 0;
+    .container {
+      @include adjustMarginsToContainer($default-container-width);
+    }
   }
 
   & > :first-child:not(:empty) {
@@ -35,10 +38,6 @@
     --footer-background: var(--secondary-color, #{$white});
     --footer-foreground: var(--secondary-foreground-color, #{$black});
 
-    padding: $spacing-xlarge 2rem 100px 2rem;
-    @media only screen and (max-width: $largest-mobile-screen) {
-      padding: $spacing-xlarge $spacing-small;
-    }
     background: var(--footer-background);
     color: var(--footer-foreground, $black);
 
@@ -106,7 +105,7 @@
 
         img {
           max-width: 100%;
-          height: auto;
+          max-height: 90px;
         }
       }
     }
@@ -186,50 +185,56 @@
   }
 
   .post-footer {
-    padding: $spacing-xlarge $spacing-small;
     background: var(--footer-background);
     color: var(--footer-foreground, $black);
     font-size: 18px;
   }
 
   .follow-us-links-and-logo {
-    display: flex;
-    margin-bottom: 50px;
+    display: grid;
 
-    &.no-logo {
-      justify-content: center;
+    margin-bottom: $spacing-large;
+    grid-template-areas:
+      'social logo'
+      'links  links';
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 
-      .followus-and-links {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
+    .follow-us {
+      grid-area: social;
+    }
+    .footer-logo {
+      grid-area: logo;
+    }
+    .footer-links {
+      grid-area: links;
+    }
 
-      .follow-us {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-      }
+    &:not(:has(.footer-logo)) .follow-us {
+      grid-column: 1 / -1;
+    }
+    &:not(:has(.follow-us)) .footer-logo {
+      grid-column: 1 / -1;
+      justify-self: center;
+    }
+    .follow-us {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
 
-      .footer-links {
-        ul {
-          justify-content: center;
-        }
+    .footer-links {
+      ul {
+        justify-content: center;
       }
     }
 
     @media only screen and (max-width: $largest-mobile-screen) {
-      flex-direction: column;
       align-items: center;
-
-      .followus-and-links {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
+      grid-template-areas:
+        'social'
+        'logo'
+        'links';
+      grid-template-columns: minmax(0, 1fr);
 
       .follow-us {
         display: flex;
@@ -246,9 +251,10 @@
       }
 
       .footer-links {
+        margin-top: $spacing-large;
         ul {
           flex-wrap: wrap;
-          gap: 10px;
+          gap: 10px 0;
           li {
             margin-right: 0;
           }
@@ -256,7 +262,6 @@
       }
 
       .footer-logo {
-        padding-top: 50px;
         margin: 0 auto;
         span {
           text-align: center;
@@ -273,6 +278,8 @@
   .follow-us {
     ul {
       display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
       padding-left: 0;
       margin: 0;
       list-style: none;
@@ -280,13 +287,13 @@
   }
 
   .follow-us {
-    margin-bottom: 50px;
+    margin-bottom: $spacing-large;
     text-align: left;
 
     span {
       @include headtitle2();
       display: block;
-      margin-bottom: 50px;
+      margin-bottom: $spacing-large;
       text-transform: uppercase;
     }
 
@@ -307,15 +314,17 @@
     li {
       position: relative;
       padding: 0 8px;
+      margin-bottom: 8px;
       @include add(size, xs);
       @include add(height, s);
 
       &:not(:last-child):after {
         position: absolute;
-        right: -3px;
+        right: 0;
         display: inline-block;
         color: var(--footer-foreground, $black);
         content: '|';
+        transform: translateX(50%);
       }
 
       a {
@@ -328,21 +337,23 @@
   }
 
   .footer-logo {
-    min-width: 180px;
-    max-width: 240px;
-    height: auto;
-    margin-left: auto;
-
+    display: flex;
+    max-width: 200px;
+    flex-direction: column;
+    margin-bottom: $spacing-large;
+    justify-self: end;
     span {
       display: block;
-      margin-bottom: 50px;
+      margin-bottom: $spacing-large;
       text-align: left;
       text-transform: uppercase;
       @include headtitle2();
     }
 
     img {
-      width: 100%;
+      max-width: 100%;
+      height: auto;
+      object-fit: contain;
     }
   }
 
@@ -385,7 +396,7 @@
 
     &:before {
       display: block;
-      padding-top: 50px;
+      padding-top: $spacing-large;
       border-top: 1px solid var(--footer-foreground, $black);
       content: '';
       @include default-container-width();
@@ -410,9 +421,8 @@ ul.logos-container {
   padding: $pre-footer-vertical-spacing 0;
   padding-left: 0;
   margin-top: 0;
-  margin-bottom: $spacing-medium;
   gap: 60px 20px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   list-style: none;
 
   .logo-image {

package/src/theme/_layout.scss

@@ -216,16 +216,6 @@ External & Mail link removal for all the blocks.
   & > p,
   & > span,
   & > blockquote,
-  & > .block.image.align.left.medium,
-  & > .block.image.align.left.small,
-  & > .block.image.align.right.medium,
-  & > .block.video.align.left,
-  & > .block.video.align.right,
-  & > .block.maps.align.left,
-  & > .block.maps.align.right,
-  & > .block.image.align.right.small,
-  & > .block.video.align.center .video-inner,
-  & > .block.maps.align.center .maps-inner,
   .download-event,
   .block.separator.has--align--left .line,
   .block.separator.has--align--center .line,
@@ -238,16 +228,6 @@ External & Mail link removal for all the blocks.
   }
 
   & > h1.documentFirstHeading,
-  & > .block.image.align.left,
-  & > .block.image.align.right,
-  & > .block.image.align.center,
-  & > .block.image.align.wide figure,
-  & > .block.video.align.left,
-  & > .block.video.align.right,
-  & > .block.maps.align.left,
-  & > .block.maps.align.right,
-  & > .block.video.align.wide .video-inner,
-  & > .block.maps.align.wide .maps-inner,
   & > .block.__button,
   & > .block.eventMetadata .details-container,
   & > .block.listing .listing-item,
@@ -272,21 +252,7 @@ External & Mail link removal for all the blocks.
     @include adjustMarginsToContainer($default-container-width);
   }
 
-  & > .block.image.align.full,
-  & > .block.video.align.full,
-  & > .block.maps.align.full {
-    @include layout-container-width();
-  }
-
   /* Styling align left and right in mobile view */
-  .block.video.align.right .video-inner,
-  .block.video.align.left .video-inner,
-  .block.maps.align.right iframe,
-  .block.maps.align.left iframe {
-    @container (max-width: #{$largest-mobile-screen}) {
-      width: 100%;
-    }
-  }
 
   & > h1.documentFirstHeading {
     @include adjustMarginsToContainer($default-container-width);
@@ -296,6 +262,13 @@ External & Mail link removal for all the blocks.
     // This is the default spacing in between same-color blocks
     margin-bottom: $block-vertical-space;
 
+    // Listing followed by another listing (same bg) without headline: 40px gap
+    &.listing.next--has--same--backgroundColor.next--is--same--block-type:has(
+        + .block.listing:not(.has--headline)
+      ) {
+      margin-bottom: $spacing-medium;
+    }
+
     // Default side margins on smaller screens
     &.has--block-width--narrow {
       @include adjustMarginsToContainer($narrow-container-width);
@@ -340,14 +313,6 @@ External & Mail link removal for all the blocks.
 #page-add,
 #page-edit {
   .block.slate .slate-editor,
-  .block-editor-image.left.medium,
-  .block-editor-image.left.small,
-  .block-editor-image.right.medium,
-  .block-editor-image.right.small,
-  .block-editor-video.align.left,
-  .block-editor-video.align.right,
-  .block-editor-video.center .video-inner,
-  .block.maps.align.center .maps-inner,
   .block-editor-separator.has--align--left
     .block.separator.inner
     .block.separator
@@ -366,17 +331,6 @@ External & Mail link removal for all the blocks.
   }
 
   .block-editor-title h1,
-  .block-editor-image.left.large,
-  .block-editor-image.right.large,
-  .block-editor-image.wide figure, // Wide images are always large
-  .block-editor-image.wide.large figure,
-  .block-editor-video.align.left,
-  .block-editor-video.align.right,
-  .block.maps.align.left,
-  .block.maps.align.right,
-  .block.video.align.wide .video-inner,
-  .block.maps.align.wide .maps-inner,
-
   .block.introduction .slate-editor,
   .block.heading .heading-wrapper,
   .block-editor-listing .items,
@@ -397,21 +351,12 @@ External & Mail link removal for all the blocks.
   }
 
   .block-editor-slate,
-  .block-editor-image,
   .block-editor-slider,
   .block-editor-teaser,
   .block-editor-separator.has--align--left {
     @include layout-container-width();
     @include adjustMarginsToEditContainer($layout-container-width);
   }
-
-  /* Styling align left and right in mobile view */
-  .block.video.align.right .video-inner,
-  .block.video.align.left .video-inner {
-    @container (max-width: #{$largest-mobile-screen}) {
-      width: 100%;
-    }
-  }
 }
 
 // Grids adjustments (has to be paired with collections/grid.variables)

package/src/theme/_typo-custom.scss

@@ -35,7 +35,7 @@ header .navigation .item {
 .cms-ui.view-editview {
   .content-area,
   .breadcrumbs {
-    a:not(.card-primary-link, .label, .item) {
+    a:not(.card-primary-link, .label, .item, .link-container) {
       color: var(--link-foreground-color, var(--theme-foreground-color));
       font: inherit;
       line-height: inherit;

package/src/theme/_variables.scss

@@ -454,3 +454,24 @@ $line-heights: (
     no-repeat center;
   white-space: nowrap;
 }
+
+@mixin floated-figure($align) {
+  max-width: calc(var(--default-container-width) / 2 - 10px);
+  height: auto;
+  margin-bottom: $spacing-small;
+
+  @if $align == 'right' {
+    margin-left: $spacing-small;
+    float: right;
+  } @else {
+    margin-right: $spacing-small;
+    float: left;
+  }
+
+  @media only screen and (max-width: #{$largest-mobile-screen}) {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    float: none;
+  }
+}

package/src/theme/blocks/_grid.scss

@@ -89,6 +89,7 @@
   }
 
   .block.image {
+    margin-top: 0;
     figcaption {
       position: absolute;
       z-index: 100;

package/src/theme/blocks/_highlight.scss

@@ -6,11 +6,10 @@
       @include highlight-title();
     }
     .description {
-      a,
-      p,
-      span {
+      --link-foreground-color: var(--theme-foreground-color);
+
+      p {
         @include introduction();
-        --link-foreground-color: var(--theme-foreground-color);
       }
     }
 
@@ -19,8 +18,12 @@
       text-decoration: none;
     }
   }
+  .block-inner-container {
+    max-width: var(--layout-container-width);
+  }
 }
-.block.highlight.has--descriptionColor--highlight-custom-color-2,
-.block-editor-highlight.has--descriptionColor--highlight-custom-color-2 .block {
-  --theme-foreground-color: #fff;
+.color-swatch-widget[class*='field-wrapper-descriptionColor'] {
+  & + .color-swatch-widget.field-wrapper-theme {
+    padding-top: 16px;
+  }
 }