@kitconcept/volto-light-theme 8.0.0-alpha.17 → 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/_export_import.scss

@@ -0,0 +1,94 @@
+#page-controlpanel-content-transfer .container {
+  .grid-container {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+    padding-top: $spacing-medium;
+    padding-bottom: $spacing-large;
+    gap: $spacing-small;
+    grid-template-columns: 1fr 1fr;
+
+    @container (max-width: #{$computer-breakpoint}) {
+      grid-template-columns: 1fr;
+    }
+    .grid-column {
+      position: relative;
+      display: flex;
+      height: 250px;
+      flex-wrap: wrap;
+      padding: $spacing-small;
+      border: 1px solid var(--primary-foreground-color);
+      gap: $spacing-small;
+
+      h2 {
+        width: 100%;
+        margin: 0;
+        @include text-heading-h3();
+      }
+
+      & > span {
+        position: absolute;
+        top: $spacing-small;
+        right: $spacing-small;
+
+        svg {
+          width: auto;
+          height: 30px;
+        }
+      }
+
+      .file-input-wrapper {
+        position: relative;
+        margin-top: auto;
+
+        .file-input-name {
+          position: absolute;
+          bottom: 100%;
+          left: 0;
+          margin-bottom: $spacing-small;
+          font-size: 18px;
+          font-weight: 300;
+          line-height: 24px;
+          white-space: nowrap;
+        }
+      }
+
+      button {
+        align-self: end;
+        padding: 8px 20px;
+        border: 1px solid var(--primary-foreground-color);
+        border-radius: unset;
+        margin: 0;
+        background: none;
+        color: var(--primary-foreground-color);
+        cursor: pointer;
+        text-decoration: none;
+
+        @include body-text-bold();
+
+        &:hover,
+        &:active,
+        &:focus {
+          border-color: var(--primary-foreground-color);
+          background-color: var(--primary-foreground-color);
+          color: var(--primary-color);
+        }
+
+        &[data-disabled='true'],
+        &[data-disabled='true']:hover {
+          border-color: color-mix(
+            in srgb,
+            var(--primary-color) 50%,
+            var(--primary-foreground-color)
+          );
+          background-color: var(--primary-color);
+          color: color-mix(
+            in srgb,
+            var(--primary-color) 50%,
+            var(--primary-foreground-color)
+          );
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

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/_insets.scss

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 100%;
-  background-color: #ecebeb;
+  background-color: var(--theme-high-contrast-color);
   .day {
     font-size: 52px;
     font-style: normal;

package/src/theme/_layout.scss

@@ -54,6 +54,12 @@
   }
 }
 
+@mixin adjustEditContainerFullWidth() {
+  max-width: calc(100% - 2 * $spacing-medium);
+  margin-right: auto;
+  margin-left: auto;
+}
+
 // Container adjustments for dealing correctly with absolute positioned elements
 @mixin container-preference-order($zindex) {
   position: relative;
@@ -152,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;
@@ -167,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;
@@ -190,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 {
@@ -254,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,
@@ -269,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 {
@@ -328,6 +330,9 @@ External & Mail link removal for all the blocks.
   [class*='block-editor-']:not(.contained) {
     @include layout-container-width();
     @include adjustMarginsToEditContainer($layout-container-width);
+    &.has--block-width--full {
+      @include adjustEditContainerFullWidth();
+    }
   }
 }
 

package/src/theme/_search-page.scss

@@ -24,6 +24,7 @@
       border: 1px solid var(--accent-color) !important;
       border-radius: 0 !important;
       margin-bottom: 0;
+      cursor: pointer;
       span {
         font-size: 10px;
         font-weight: 700;
@@ -47,6 +48,30 @@
           background-color: var(--primary-foreground-color) !important;
           color: var(--primary-color, #fff) !important;
         }
+        cursor: auto;
+      }
+      &:not(.active) {
+        color: var(--accent-foreground-color);
+
+        svg {
+          color: var(--accent-foreground-color);
+        }
+
+        &:hover {
+          color: color-mix(
+            in srgb,
+            var(--accent-color) 20%,
+            var(--accent-foreground-color)
+          );
+
+          svg {
+            color: color-mix(
+              in srgb,
+              var(--accent-color) 20%,
+              var(--accent-foreground-color)
+            );
+          }
+        }
       }
       svg {
         margin-right: 5px;

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();
 }
@@ -175,3 +174,11 @@ h4 {
     user-select: none;
   }
 }
+
+// Control panel view
+body.view-controlpanelview {
+  h3.ui.icon.header {
+    @include add(size, s);
+    @include add(height, m);
+  }
+}

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();
+            }
           }
         }
       }