@kitconcept/volto-light-theme 6.0.0-alpha.8 → 6.0.0

package/src/theme/_widgets.scss

@@ -1,4 +1,5 @@
-#sidebar-properties {
+#sidebar-properties,
+#sidebar-metadata {
   .field.widget {
     .buttons {
       display: flex;
@@ -28,15 +29,52 @@
   }
 }
 
-.field.color {
+.field.theme-color-picker {
   .eight.wide.column {
     flex-direction: row;
     align-items: center;
 
     input {
+      height: 32px;
       padding-left: 8px;
+      border-bottom-left-radius: 0px;
+      border-top-left-radius: 0px;
       line-height: 1;
     }
+
+    .theme-color-picker-button .react-aria-ColorSwatch {
+      border-bottom-right-radius: 0px;
+      border-top-right-radius: 0px;
+      cursor: pointer;
+    }
+
+    .theme-color-picker-reset {
+      position: absolute;
+      right: 15px;
+
+      &[data-hovered='true'] {
+        cursor: pointer;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+span.color-contrast-label {
+  position: relative;
+  display: block;
+  padding-left: 20%;
+  color: #ed6500;
+  font-size: 13px;
+  a {
+    padding: 0.1rem 0.25rem;
+    border: 1px solid var(--link-foreground-color);
+    border-radius: 100%;
+    margin: 0;
+    margin-left: 4px;
+    margin-left: 4px;
+    font-size: 0.4rem;
+    vertical-align: super;
   }
 }
 
@@ -44,7 +82,7 @@
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
 }
 
-.theme-picker-widget {
+.color-swatch-widget {
   .buttons {
     flex: 1 1 100%;
     margin: 1rem 0 0.5rem;
@@ -77,18 +115,17 @@
   }
 }
 
-.theme-picker-widget button {
+.color-swatch-widget button {
   background-color: var(--theme-color);
 }
 
-// TODO: Remove when layers are in place
-.theme-picker-widget .button.grey,
-.theme-picker-widget .button.grey.active,
-.theme-picker-widget .ui.grey.button:hover {
+.color-swatch-widget .button.grey,
+.color-swatch-widget .button.grey.active,
+.color-swatch-widget .ui.grey.button:hover {
   background-color: var(--theme-color);
 }
-.theme-picker-widget .button.active,
-.theme-picker-widget .button.active:hover {
+.color-swatch-widget .button.active,
+.color-swatch-widget .button.active:hover {
   background-color: var(--theme-color);
 }
 
@@ -100,3 +137,58 @@
     }
   }
 }
+
+.object-list-widget {
+  .field.inline {
+    .add-item-button-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0;
+
+      button {
+        @include button-style;
+      }
+    }
+
+    .eight.wide.column:has(.add-item-button-wrapper) {
+      padding-right: 0;
+    }
+  }
+
+  .olw-item-wrapper {
+    padding: 0 10px;
+    border: 1px solid var(--quanta-smoke);
+    border-radius: 10px;
+    margin-bottom: 10px;
+  }
+
+  .olw-item-title-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    cursor: pointer;
+
+    .drag.handle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .olw-tools {
+    display: flex;
+    align-items: center;
+    button {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+
+  .olw-item-content {
+    margin-bottom: 20px;
+  }
+
+  #sidebar-properties &:first-child {
+    margin-top: 10px;
+  }
+}

package/src/theme/blocks/_eventMetadata.scss

@@ -2,6 +2,7 @@
   .details-container {
     padding-top: $spacing-xlarge;
     padding-bottom: $spacing-xlarge;
+    border-color: var(--theme-foreground-color);
     border-top: 1px solid $black;
     border-bottom: 1px solid $black;
     margin-top: 0px;
@@ -44,6 +45,7 @@
           .separator {
             width: 170px;
             height: 30px;
+            border-color: var(--theme-foreground-color);
             border-right: none;
             border-bottom: 1px solid #000;
           }
@@ -62,14 +64,15 @@
       .event-btn {
         padding: 8px 20px;
         border: 1px solid #000;
+        border-color: var(--theme-foreground-color);
         border-radius: 5px;
         background-color: transparent;
-        color: #000;
+        color: var(--theme-foreground-color, #000);
         font-size: 16px;
         font-weight: $bolder;
         line-height: 20px;
         a {
-          color: #000;
+          color: var(--theme-foreground-color, #000);
           font-size: 16px;
           font-weight: $bolder;
           line-height: 20px;

package/src/theme/blocks/_grid.scss

@@ -125,13 +125,13 @@
       position: absolute;
       z-index: 100;
       bottom: 0;
-      padding: 0 1rem 0 1rem;
+      padding: 0 1rem 15px 1rem;
       margin: 0;
 
       .title {
         margin: 0 0 20px 0;
         color: $white !important;
-        letter-spacing: 1px;
+        letter-spacing: 0;
         @include text-heading-h3();
       }
 
@@ -300,7 +300,7 @@
           .title {
             margin: 0 0 15px 0;
             color: $white !important;
-            letter-spacing: 1px;
+            letter-spacing: 0;
             @include text-heading-h4();
           }
         }

package/src/theme/blocks/_highlight.scss

@@ -1,53 +1,26 @@
-$white: #fff !default;
-$black: #000 !default;
-
 .block.highlight {
-  .title h2 {
-    @include highlight-title();
-  }
-  .description p {
-    @include introduction();
-  }
-  .button a {
-    @include body-text();
-  }
+  --highlight-images-aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
 
-  .highlight-description {
-    a {
-      @include introduction();
-      text-decoration: none;
-    }
-  }
-
-  &[class*='has--descriptionColor--highlight-custom-color-'] {
-    .highlight-description {
-      a {
-        color: $black !important;
-      }
+  .teaser-item.top .highlight-description {
+    .title h2 {
+      @include highlight-title();
     }
-  }
-  &.has--descriptionColor--highlight-custom-color-2 {
-    .highlight-description {
-      a {
-        color: $white !important;
+    .description {
+      a,
+      p,
+      span {
+        @include introduction();
+        --link-foreground-color: var(--theme-foreground-color);
       }
     }
-  }
-}
 
-.block-editor-highlight {
-  &[class*='has--descriptionColor--highlight-custom-color-'] {
-    .highlight-description {
-      a {
-        color: $black !important;
-      }
-    }
-  }
-  &.has--descriptionColor--highlight-custom-color-2 {
-    .highlight-description {
-      a {
-        color: $white !important;
-      }
+    .button a {
+      @include body-text-bold();
+      text-decoration: none;
     }
   }
 }
+.block.highlight.has--descriptionColor--highlight-custom-color-2,
+.block-editor-highlight.has--descriptionColor--highlight-custom-color-2 .block {
+  --theme-foreground-color: #fff;
+}

package/src/theme/blocks/_listing.scss

@@ -53,20 +53,23 @@
       @include block-title();
     }
 
-    .listing-item {
-      a {
-        .listing-body {
-          h2 {
-            @include text-heading-h2();
-          }
-          p {
-            margin-bottom: 0;
-            @include body-text();
-          }
-          p:empty {
-            display: none;
-          }
-        }
+    .listing-body {
+      .headline {
+        margin-bottom: 20px;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        @include headtitle1();
+      }
+      h2 {
+        margin-top: 0;
+        @include text-heading-h2();
+      }
+      p {
+        margin-bottom: 0;
+        @include body-text();
+      }
+      p:empty {
+        display: none;
       }
     }
   }
@@ -79,13 +82,19 @@
       img {
         width: 220px;
         height: min-content;
-        aspect-ratio: $aspect-ratio !important;
+        aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
         @container (max-width: #{$largest-mobile-screen}) {
           width: 100%;
           min-width: 335px;
           margin-bottom: 20px;
         }
       }
+      .headline {
+        margin-bottom: 20px;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        @include headtitle1();
+      }
       h3 {
         margin-top: 0 !important;
         margin-bottom: 40px !important;
@@ -168,7 +177,7 @@
       img.item-image {
         width: 100%;
         margin: 0;
-        aspect-ratio: $aspect-ratio !important;
+        aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
       }
 
       .item {

package/src/theme/blocks/_maps.scss

@@ -1,14 +1,14 @@
 .block.maps {
   iframe {
     height: unset;
-    aspect-ratio: $aspect-ratio;
+    aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
   }
   &.align.left {
     iframe {
       height: unset;
       margin-right: 20px !important;
       margin-bottom: 20px !important;
-      aspect-ratio: $aspect-ratio;
+      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
       @container (max-width: #{$largest-mobile-screen}) {
         margin-bottom: $spacing-large !important;
       }
@@ -21,7 +21,7 @@
       height: unset;
       margin-bottom: 20px !important;
       margin-left: 20px !important;
-      aspect-ratio: $aspect-ratio;
+      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
       @container (max-width: #{$largest-mobile-screen}) {
         margin-bottom: $spacing-large !important;
       }

package/src/theme/blocks/_slider.scss

@@ -20,7 +20,10 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
 
     img {
       // Override Volto's Image Component inline style aspect ratio.
-      aspect-ratio: $sliderImagesAspectRatio !important;
+      aspect-ratio: var(
+        --image-aspect-ratio,
+        $sliderImagesAspectRatio
+      ) !important;
     }
   }
 
@@ -103,6 +106,7 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     border: 1px solid currentColor;
     border-radius: 0;
     background-color: transparent;
+    color: $white;
     font-size: 16px;
     font-weight: 900;
     line-height: 20px;

package/src/theme/main.scss

@@ -34,6 +34,7 @@
 @import 'blocks/maps';
 @import 'blocks-chooser';
 @import 'blocks/eventMetadata';
+@import 'sticky-menu';
 
 @import 'temp';
 

package/src/theme/sticky-menu.scss

@@ -0,0 +1,50 @@
+.sticky-menu {
+  position: fixed;
+  z-index: 1000;
+  top: 373px;
+  right: 0;
+
+  ul {
+    display: flex;
+    width: 115px;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li a {
+      display: flex;
+      height: 93px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 2px;
+      background: var(--sticky-menu-color, #555);
+      color: var(--sticky-menu-foreground-color, #fff);
+      font-family: Inter;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 18px; /* 180% */
+      text-transform: capitalize;
+    }
+
+    .image-wrapper {
+      height: 65px;
+    }
+
+    img {
+      width: 100%;
+      max-width: 65px;
+      height: auto;
+    }
+  }
+
+  @media only screen and (max-width: $largest-mobile-screen) {
+    display: none;
+  }
+}
+
+body.view-editview .sticky-menu {
+  display: none;
+}

package/src/types.d.ts

@@ -0,0 +1,102 @@
+import type { Brain, Image } from '@plone/types';
+
+type hrefType = {
+  '@id': string;
+  title: string;
+} & Partial<Brain>;
+
+type headerAction = {
+  '@id': string;
+  title: string;
+  href: Array<hrefType>;
+  openInNewTab: boolean;
+};
+
+export type Link = {
+  '@id': string;
+  title: string;
+  href: Array<hrefType>;
+  openInNewTab: boolean;
+};
+
+export type Logo = {
+  '@id': string;
+  title: string;
+  logo: Image;
+  href: Array<hrefType>;
+  openInNewTab: boolean;
+};
+
+export type footerLogo = {
+  '@id': string;
+  title: string;
+  logo: Image;
+  href: Array<hrefType>;
+  openInNewTab: boolean;
+};
+
+export type iconLink = {
+  '@id': string;
+  title: string;
+  icon: Image;
+  href: Array<hrefType>;
+  openInNewTab: boolean;
+};
+
+export type SiteHeaderSettings = {
+  logo: Image & { data?: string };
+  complementary_logo: Image & { data?: string };
+  intranet_flag: string;
+  header_actions: Array<headerAction>;
+  has_intranet_header: boolean;
+};
+
+export type SiteThemeSettings = {
+  primary_foreground_color: string;
+  accent_foreground_color: string;
+  accent_color: string;
+  primary_color: string;
+  secondary_foreground_color: string;
+  secondary_color: string;
+};
+
+export type SiteFooterSettings = {
+  footer_logos: Array<footerLogo>;
+  footer_logos_container_width: string;
+  footer_logos_size: string;
+  footer_address: string;
+  footer_column_left_header: string;
+  footer_column_left: Array<Link>;
+  footer_column_middle_header: string;
+  footer_column_middle: Array<Link>;
+  footer_column_right_header: string;
+  footer_column_right: Array<Link>;
+  footer_logo: Image & { data?: string };
+  footer_links: Array<Link>;
+};
+
+export type StickyMenuSettings = {
+  sticky_menu: Array<iconLink>;
+  sticky_menu_color: string;
+  sticky_menu_foreground_color: string;
+};
+
+export type PloneGobrSocialMediaSettings = {
+  social_links: Array<iconLink>;
+};
+
+export type CustomInheritBehavior<T> = {
+  data: T;
+  from: {
+    '@id': string;
+    title: string;
+  };
+};
+
+declare module '@plone/types' {
+  export interface Content {
+    footer_logos: Array<footerLogo>;
+    sticky_menu: Array<stickyMenu>;
+    footer_links: Array<Link>;
+  }
+}

package/tsconfig.json

@@ -15,7 +15,7 @@
     "paths": {
       "@plone/volto/*": [
         "../../core/packages/volto/src/*",
-        "../../../../core/packages/volto/src/*"
+        "../../../../../core/packages/volto/src/*"
       ],
       "@kitconcept/volto-light-theme/*": ["./src/*"]
     }

package/src/components/Footer/Footer.jsx

@@ -1,115 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import React from 'react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { useSelector, shallowEqual } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import Logo from '@plone/volto/components/theme/Logo/Logo';
-import { Container } from '@plone/components';
-import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
-import FooterLinks from './FooterLinks';
-
-const messages = defineMessages({
-  copyright: {
-    id: 'Copyright',
-    defaultMessage: 'Copyright',
-  },
-});
-
-const Footer = () => {
-  const intl = useIntl();
-  const {
-    content,
-    lang,
-    siteActions = [],
-  } = useSelector(
-    (state) => ({
-      lang: state.intl.locale,
-      siteActions: state.actions?.actions?.site_actions,
-      content: state.content.data,
-    }),
-    shallowEqual,
-  );
-  const location = useLocation();
-  const navroot = useSelector((state) => state.navroot.data.navroot);
-  const footerLinks = navroot?.footer_links;
-
-  return (
-    <footer id="footer">
-      <SlotRenderer name="preFooter" content={content} location={location} />
-
-      <Container className="footer">
-        <div className="footer-message">
-          <FormattedMessage
-            id="The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
-            defaultMessage="The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
-            values={{
-              plonecms: (
-                <FormattedMessage
-                  id="Plone{reg} Open Source CMS/WCM"
-                  defaultMessage="Plone{reg} Open Source CMS/WCM"
-                  values={{ reg: <sup>®</sup> }}
-                />
-              ),
-              copyright: (
-                <abbr title={intl.formatMessage(messages.copyright)}>©</abbr>
-              ),
-              current_year: new Date().getFullYear(),
-              plonefoundation: (
-                <a className="item" href="http://plone.org/foundation">
-                  <FormattedMessage
-                    id="Plone Foundation"
-                    defaultMessage="Plone Foundation"
-                  />
-                </a>
-              ),
-            }}
-          />{' '}
-          <br />
-          <FormattedMessage
-            id="Distributed under the {license}."
-            defaultMessage="Distributed under the {license}."
-            values={{
-              license: (
-                <a
-                  className="item"
-                  href="http://creativecommons.org/licenses/GPL/2.0/"
-                >
-                  <FormattedMessage
-                    id="GNU GPL license"
-                    defaultMessage="GNU GPL license"
-                  />
-                </a>
-              ),
-            }}
-          />
-        </div>
-        <FooterLinks
-          links={footerLinks}
-          siteActions={siteActions}
-          lang={lang}
-        />
-        <div className="logo">
-          <Logo />
-        </div>
-        <a className="item powered-by" href="https://plone.org">
-          <FormattedMessage
-            id="Powered by Plone & Python"
-            defaultMessage="Powered by Plone & Python"
-          />
-        </a>
-        <br />
-        <div className="footer-branding">
-          Made with{' '}
-          <span role="img" aria-label="love" style={{ color: 'red' }}>
-            ❤️
-          </span>{' '}
-          by kitconcept
-        </div>
-      </Container>
-
-      <SlotRenderer name="postFooter" content={content} location={location} />
-    </footer>
-  );
-};
-
-export default Footer;