@kitconcept/volto-light-theme 8.0.0-alpha.18 → 8.0.0-alpha.19

package/src/primitives/Card/Card.tsx

@@ -52,55 +52,32 @@ const Card = (props: CardProps) => {
   const { className, openLinkInNewTab } = props;
 
   const a11yLabelId = React.useId();
-  const linkRef = React.useRef<HTMLAnchorElement>(null);
-
-  const triggerNavigation = () => {
-    // Only navigate if there is *no* text selection
-    const hasSelection = !!window.getSelection()?.toString();
-    if (!hasSelection) {
-      linkRef.current?.click();
-    }
-  };
-
   const isInteractive = !!props.href || !!props.item;
 
-  const onClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    if (!isInteractive) return;
-    if (e.defaultPrevented) return;
-    if (e.target instanceof Element) {
-      const anchor = e.target.closest('a');
-      if (anchor && anchor !== linkRef.current) return;
-    }
-    triggerNavigation();
-  };
-
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!isInteractive) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      triggerNavigation();
-    }
-  };
+  const LinkToItem = React.useCallback(
+    ({ children }: { children: React.ReactNode }) => {
+      return (
+        <ConditionalLink
+          className="card-primary-link"
+          condition={isInteractive}
+          href={href}
+          item={item}
+          openLinkInNewTab={openLinkInNewTab}
+        >
+          {children}
+        </ConditionalLink>
+      );
+    },
+    [href, item, isInteractive, openLinkInNewTab],
+  );
 
   return (
-    <div
-      className={cx('card', className)}
-      onClick={isInteractive ? onClick : undefined}
-      onKeyDown={isInteractive ? onKeyDown : undefined}
-      role={isInteractive ? 'link' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {/* @ts-expect-error since this has no children, should fail */}
-      <ConditionalLink
-        aria-labelledby={a11yLabelId}
-        condition={isInteractive}
-        href={href}
-        item={item}
-        openLinkInNewTab={openLinkInNewTab}
-        ref={linkRef}
-      />
+    <div className={cx('card', className)}>
       <div className="card-inner">
-        {childrenWithProps(props.children, { a11yLabelId })}
+        {childrenWithProps(props.children, {
+          a11yLabelId,
+          LinkToItem,
+        })}
       </div>
     </div>
   );
@@ -150,14 +127,21 @@ const CardImage = (props: CardImageProps) => {
 type CardSummaryProps = {
   /** The ID of the element that labels the card. */
   a11yLabelId?: string;
+  LinkToItem?: React.ElementType;
   children?: React.ReactNode;
 };
 
-const CardSummary = (props: CardSummaryProps) => (
-  <div className="card-summary">
-    {childrenWithProps(props.children, { a11yLabelId: props.a11yLabelId })}
-  </div>
-);
+const CardSummary = (props: CardSummaryProps) => {
+  const { a11yLabelId, LinkToItem } = props;
+  return (
+    <div className="card-summary">
+      {childrenWithProps(props.children, {
+        a11yLabelId,
+        LinkToItem,
+      })}
+    </div>
+  );
+};
 
 const CardActions = (props: any) => (
   <div className="actions-wrapper">{props.children}</div>

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

@@ -17,7 +17,7 @@
   & > strong,
   & > em,
   & > figcaption,
-  & > a:not(.item),
+  & > a,
   & > blockquote,
   & > h2,
   & > h3,
@@ -25,16 +25,6 @@
     color: var(--theme-foreground-color);
   }
 
-  :not(.teaser-item)
-    > a:not(.item):not(
-      :has(> .teaser-item),
-      :has(> .listing-body),
-      :has(> .card-container)
-    ) {
-    color: var(--link-foreground-color, --theme-foreground-color);
-    text-decoration: underline;
-  }
-
   &:first-child:has(> .documentFirstHeading) {
     padding-top: 0;
   }
@@ -503,7 +493,8 @@
     &.listing,
     &.search,
     &.rssBlock {
-      h2.headline {
+      h2.headline,
+      h2.block-title {
         color: var(--theme-foreground-color);
       }
 
@@ -514,40 +505,26 @@
       .listing-item {
         border-bottom-color: var(--theme-foreground-color) !important;
 
-        a > .listing-body {
-          .headline,
-          h3,
-          h2,
-          a,
-          p,
-          span {
-            color: var(--theme-foreground-color);
-          }
+        .headline,
+        h3,
+        h2,
+        a,
+        p,
+        span {
+          color: var(--theme-foreground-color);
         }
 
         .head-title span,
         .head-title {
           color: var(--theme-foreground-color);
         }
-
-        .card-container {
-          background-color: var(--theme-high-contrast-color);
-
-          .content,
-          .content p {
-            color: var(--theme-foreground-color);
-          }
-        }
       }
-      /* I have removed the .card-container className that's why I have to write this css
-       * I will remove all the .card-container className from repo.
-      */
       &.grid .card,
       & .grid-variation .card {
         background-color: var(--theme-high-contrast-color);
 
-        .content,
-        .content p {
+        .card-summary,
+        .card-summary p {
           color: var(--theme-foreground-color);
         }
       }
@@ -1131,19 +1108,28 @@
     }
   }
 
-  table.ui.table.slate-table-block {
-    border-color: var(--theme-low-contrast-foreground-color);
+  table.ui.celled.table.slate-table-block {
+    border-color: color-mix(
+      in srgb,
+      var(--theme-color) 75%,
+      var(--theme-foreground-color)
+    );
 
     tr td,
     th {
-      border-color: var(--theme-low-contrast-foreground-color);
+      border-color: color-mix(
+        in srgb,
+        var(--theme-color) 75%,
+        var(--theme-foreground-color)
+      );
     }
 
     th {
       background-color: var(--theme-high-contrast-color) !important;
+      color: var(--theme-low-contrast-foreground-color);
 
-      p {
-        color: var(--theme-low-contrast-foreground-color) !important;
+      * {
+        color: inherit;
       }
     }
 
@@ -1286,7 +1272,7 @@
       // Navigation
       nav.navigation {
         .item {
-          color: var(--header-foreground);
+          color: var(--header-foreground, var(--primary-foreground-color));
         }
         .submenu-wrapper {
           .submenu.active {

package/src/theme/_footer.scss

@@ -293,6 +293,7 @@
         @include add(size, xs);
         @include add(height, s);
         color: var(--footer-foreground);
+        text-decoration: underline;
       }
     }
   }
@@ -320,13 +321,35 @@
     @include add(size, xs);
     @include add(height, s);
 
-    a {
+    .slate.widget {
+      width: fit-content;
+      margin-right: auto;
+      margin-left: auto;
       @include add(size, xs);
       @include add(height, s);
+      ul,
+      ol,
+      li,
+      p,
+      a {
+        margin-bottom: 0;
+        font: inherit;
+        line-height: inherit;
+      }
+    }
+
+    a {
       color: var(--footer-foreground);
+      font: inherit;
       text-decoration: underline;
     }
 
+    p {
+      @include add(size, xs);
+      @include add(height, s);
+      margin-bottom: 0;
+    }
+
     img {
       margin-top: 25px;
     }
@@ -338,6 +361,9 @@
       content: '';
       @include default-container-width();
     }
+    &:has(.slate p:only-child:empty) {
+      display: none;
+    }
   }
 
   .main-footer + .post-footer {

package/src/theme/_header.scss

@@ -371,7 +371,7 @@
       flex: 3.5 1 0;
       align-self: center;
       justify-content: center;
-      margin-bottom: 40px;
+      margin-bottom: 11px;
 
       @media only screen and (max-width: $largest-mobile-screen) {
         display: none;
@@ -411,6 +411,18 @@
           }
         }
       }
+      .desktop-menu {
+        .item {
+          padding-top: 15px;
+          &:hover::before,
+          &.active::before {
+            bottom: -20px;
+          }
+        }
+        .submenu-wrapper {
+          margin-top: 11px;
+        }
+      }
     }
 
     .complementary-logo {

package/src/theme/_layout.scss

@@ -158,8 +158,7 @@ footer {
 .content-area .ui.container,
 .content-area .q.container,
 .content-area .a.container {
-  a.external:after,
-  a.external:after {
+  a.external:not(.card-primary-link):after {
     @include external-link-icon();
     margin-top: -25px;
     margin-left: 3px;
@@ -173,8 +172,7 @@ footer {
 .content-area #page-edit .ui.container,
 .content-area .q.container,
 .content-area .a.container {
-  a.external:after,
-  a.external:after {
+  a.external:not(.card-primary-link):after {
     @include external-link-icon();
     margin-top: -25px;
     margin-left: 3px;
@@ -196,8 +194,7 @@ External & Mail link removal for all the blocks.
   .block.listing,
   .block.image,
   .block.teaser {
-    a.external:after,
-    a.external:after {
+    a.external:not(.card-primary-link):after {
       display: none;
     }
     p a[href^='mailto:']:after {
@@ -260,11 +257,11 @@ External & Mail link removal for all the blocks.
   & > .block.search.grid,
   & > .block.rssBlock,
   & > .block.search .searchBlock-container,
-  &> .block.eventsearch .search-block-event,
+  & > .block.eventsearch .search-block-event,
+  & > .block h2.block-title,
   & > .block h2.headline,
   & > .block.heading .heading-wrapper,
-  & > .block.teaser .teaser-item.default,
-  & > .block.teaser .card-inner, // deprecate when category is in place
+  & > .block.teaser,
   & > .block.highlight .teaser-description-title,
   & > table,
   & > .table-of-contents,
@@ -275,7 +272,6 @@ External & Mail link removal for all the blocks.
     @include adjustMarginsToContainer($default-container-width);
   }
 
-  & > .block.teaser,
   & > .block.image.align.full,
   & > .block.video.align.full,
   & > .block.maps.align.full {

package/src/theme/_typo-custom.scss

@@ -33,10 +33,8 @@ header .navigation .item {
 
 .content-area,
 .breadcrumbs {
-  p > a,
-  li > a,
-  .breadcrumb a {
-    color: $blue-for-grey-contrast;
+  a:not(.card-primary-link, .label) {
+    color: var(--link-foreground-color, var(--theme-foreground-color));
     text-decoration: underline;
   }
 }
@@ -95,7 +93,8 @@ h1.documentFirstHeading:last-child {
 }
 
 // Block Title
-.block h2.headline {
+.block h2.headline,
+.block h2.block-title {
   @include block-title();
   @include vertical-space-block-title();
 }

package/src/theme/_variables.scss

@@ -126,7 +126,6 @@ $secondary-grey: #ececec !default;
 
   // Header
   --header-background: var(--primary-color);
-  --header-foreground: var(--primary-foreground-color);
 
   //Footer
   --footer-background: var(--secondary-color);
@@ -146,8 +145,8 @@ $secondary-grey: #ececec !default;
 
   // Link color
   --link-color: #0070a2;
-  // Comment out following line to turn <a> links the same color as the text
-  --link-foreground-color: var(--link-color);
+  // Uncomment following line to turn <a> links into a different color than the theme foreground color
+  // --link-foreground-color: var(--link-color);
 
   // It is possible to set an aspect ratio for all images, using the folowing CSS custom property:
   // --image-aspect-ratio: calc(16 / 9);
@@ -433,7 +432,10 @@ $line-heights: (
   display: inline-block;
   width: 11px;
   height: 11px;
-  background-color: var(--link-foreground-color, #0070a2);
+  background-color: var(
+    --theme-foreground-color,
+    var(--link-foreground-color, #0070a2)
+  );
   content: '';
   mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'/%3E%3C/svg%3E")
     no-repeat center;
@@ -443,7 +445,10 @@ $line-heights: (
   display: inline-block;
   width: 11px;
   height: 11px;
-  background-color: var(--link-foreground-color, #0070a2);
+  background-color: var(
+    --theme-foreground-color,
+    var(--link-foreground-color, #0070a2)
+  );
   content: '';
   mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='envelope' class='svg-inline--fa fa-envelope fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'%3E%3C/path%3E%3C/svg%3E")
     no-repeat center;

package/src/theme/blocks/_accordion.scss

@@ -68,6 +68,7 @@
 
       .block.image {
         figure {
+          margin-top: 0;
           &.right {
             margin-left: 20px;
           }
@@ -92,13 +93,18 @@
         }
       }
 
-      .block.teaser {
+      .block.teaser,
+      .block.listing {
         .card-inner .card-summary {
-          h2.title {
-            padding: 0px;
-            margin-bottom: 20px !important;
+          .title {
+            padding: 0;
             background: none;
             text-transform: none;
+            @include text-heading-h2();
+
+            @container (max-width: #{$largest-mobile-screen}) {
+              @include text-heading-h3();
+            }
           }
         }
       }

package/src/theme/blocks/_grid.scss

@@ -37,14 +37,6 @@
     padding-top: 0;
     margin-bottom: 0;
 
-    // External link icon
-    a.external + .card-inner {
-      .card-summary h2:after {
-        @include external-link-icon();
-        margin-left: 3px;
-      }
-    }
-
     a {
       text-decoration: none;
     }
@@ -56,39 +48,6 @@
         ) !important;
       }
     }
-
-    .teaser-item {
-      height: 100%;
-
-      .image-wrapper {
-        margin-bottom: $spacing-medium;
-
-        img {
-          position: relative;
-        }
-      }
-      .content {
-        padding: 0 $spacing-small $spacing-small $spacing-small;
-        @include body-text();
-
-        .headline {
-          margin-bottom: $spacing-small;
-          letter-spacing: 1px;
-          text-transform: uppercase;
-          @include headtitle1();
-        }
-
-        h2 {
-          padding: 0;
-          margin-bottom: $spacing-small !important;
-          @include text-heading-h3();
-        }
-
-        p {
-          margin-bottom: $spacing-small;
-        }
-      }
-    }
   }
 
   .block-editor-teaser {
@@ -304,11 +263,6 @@
 #page-add .block-editor-gridBlock .block.gridBlock {
   @media only screen and (min-width: $largest-mobile-screen) {
     .one {
-      .block.teaser .teaser-item .content h2 {
-        margin-bottom: $spacing-medium !important;
-        @include text-heading-h2();
-      }
-
       .slate {
         h2 {
           margin-bottom: $spacing-medium !important;
@@ -331,14 +285,6 @@
 
     .two,
     .three {
-      .teaser {
-        .teaser-item .content {
-          h2 {
-            margin-bottom: $spacing-small !important;
-            @include text-heading-h3();
-          }
-        }
-      }
       .image {
         figcaption {
           .title {
@@ -365,26 +311,6 @@
     }
 
     .four {
-      .teaser {
-        .teaser-item {
-          .image-wrapper {
-            margin-bottom: $spacing-small !important;
-          }
-          .content {
-            .headline {
-              @include headtitle2();
-            }
-            h2 {
-              margin-bottom: $spacing-small !important;
-              @include text-heading-h4();
-            }
-            p {
-              margin-bottom: 0;
-            }
-          }
-        }
-      }
-
       .image {
         figcaption {
           .title {
@@ -425,10 +351,6 @@
   margin-bottom: 0;
 }
 
-.block.gridBlock h2.title {
-  margin-bottom: $spacing-small !important;
-}
-
 // Watch out for the following rule, it is used to override the default
 // behavior of the block editor when selecting a block but it stopped working
 // if the z-index is still -1 (from 6.0.0-alpha.0)