@kitconcept/volto-light-theme 7.0.0-alpha.25 → 7.0.0-alpha.26

package/.changelog.draft

@@ -1,15 +1,8 @@
-## 7.0.0-alpha.25 (2025-09-01)
-
-### Feature
-
-- Fixed missing person grid listing with correct styles. @sneridagh 
+## 7.0.0-alpha.26 (2025-09-03)
 
 ### Bugfix
 
-- Fix teaser regression in accordion due to semantic UI title classname leak @iRohitSingh [#634](https://github.com/kitconcept/volto-light-theme/pull/634)
-- Fix Grid listing variant List with Image not showing columns 3 & 4 properly @iRohitSingh [#636](https://github.com/kitconcept/volto-light-theme/pull/636)
-- Fix download link on File content-type if the file has no filename. [@jnptk] 
-- Fixed bug in person teaser standalone centering. @sneridagh 
-- fix the margin-bottom and arrows for simple slider in mobile view @Tishasoumya-02 
+- Fix css for cross button on hover @Tishasoumya-02 
+- Remove arrows and fix the background and text colors for slider simple variant @Tishasoumya-02 
 
 

package/CHANGELOG.md

@@ -8,6 +8,13 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.26 (2025-09-03)
+
+### Bugfix
+
+- Fix css for cross button on hover @Tishasoumya-02 
+- Remove arrows and fix the background and text colors for slider simple variant @Tishasoumya-02 
+
 ## 7.0.0-alpha.25 (2025-09-01)
 
 ### Feature

package/package.json

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

package/src/components/Blocks/Image/Edit.jsx

@@ -30,7 +30,11 @@ function Edit(props) {
 
   const handleChange = React.useCallback(
     async (id, image, { title, image_field, image_scales } = {}) => {
-      const url = image ? image['@id'] || image : '';
+      const url = Array.isArray(image)
+        ? image?.[0]?.['@id']
+        : image
+          ? image['@id'] || image
+          : '';
 
       props.onChangeBlock(props.block, {
         ...props.data,

package/src/config/widgets.ts

@@ -40,6 +40,7 @@ export default function install(config: ConfigType) {
   // ObjectList widget override - use our own non-semanticUI widget
   // it uses also dnd-kit for drag and drop
   config.widgets.widget.object_list = ObjectList;
+  config.widgets.id.preview_image_link = config.widgets.widget.image;
 
   config.widgets.widget.blockWidth = BlockWidth;
   config.widgets.widget.blockAlignment = BlockAlignment;

package/src/theme/_widgets.scss

@@ -252,3 +252,10 @@ span.color-contrast-label {
   color: #d01157 !important;
   font-size: 14px;
 }
+
+.field-wrapper-preview_image_link
+  .image-upload-widget-image
+  .image-upload-widget-toolbar
+  .icon.circled:hover {
+  background: $greySnow;
+}

package/src/theme/blocks/_slider.scss

@@ -187,12 +187,12 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
           height: 100%;
           align-content: start;
           padding: 60px 20px;
-          background: var(--theme-foreground-color);
-          color: $white;
+          background: var(--theme-color);
+          color: var(--theme-foreground-color);
           .ui.button,
           .title > h2,
           p.slider-description {
-            color: $white !important;
+            color: var(--theme-foreground-color) !important;
           }
           p.slider-description {
             -webkit-line-clamp: 8;
@@ -225,28 +225,17 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
       width: 130px;
       height: 100%;
       align-items: center;
+      background: none;
+      opacity: 1;
 
-      @media only screen and (min-width: $computer-width) {
-        background: none;
-        opacity: 1;
-      }
       svg.icon {
         width: 50px !important;
         height: 50px !important;
         padding: 40px;
         color: var(--theme-foreground-color);
-        @media only screen and (max-width: $computer-width) {
-          padding: 0;
-          color: $white;
-        }
       }
       @media only screen and (max-width: $computer-width) {
-        position: absolute;
-        width: 50px;
-        height: calc(
-          var(--slider-container-width) * 1 /
-            var(--slider-images-aspect-ratio, 1.77777778)
-        );
+        display: none;
       }
     }
     .ui.button {