@kitconcept/volto-light-theme 5.0.0 → 6.0.0-alpha.0

package/src/theme/blocks/_image.scss

@@ -4,16 +4,9 @@ figure {
   margin: 0;
 }
 
-// Image  Block (FZJ https://github.com/kitconcept/fzj-internet/blob/7043ff8317dde8e5bfe5b0b1e76c5fdd8f331e7e/theme/extras/custom.less#L1814)
-.block-editor-image.full figcaption,
-.block.image.full figcaption {
+.block.image.has--block-width--full figcaption {
   padding-right: 25px;
   padding-left: 25px;
-
-  @media only screen and (min-width: 1470px) {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
 }
 
 .block.image {
@@ -28,14 +21,12 @@ figure {
     margin-bottom: 0 !important;
   }
 
-  &.align.left.has--backgroundColor--grey,
-  &.align.right.has--backgroundColor--grey {
-    margin-top: 0;
-
-    figure {
-      // Paddings do not collapse, so we have to substract the ever
-      // present padding bottom for every block
-      padding-top: $heading-text-top-spacing - $block-vertical-space;
+  &.has--block-width--default,
+  &.has--block-width--narrow,
+  &.has--block-width--full {
+    figure:not(.left, .right) {
+      margin-top: $spacing-large;
+      margin-bottom: $spacing-large;
     }
   }
 
@@ -43,6 +34,7 @@ figure {
     img {
       width: 100% !important;
       height: auto;
+      aspect-ratio: var(--image-aspect-ratio, auto);
     }
 
     &.right {
@@ -114,7 +106,6 @@ figure {
 
     &.center {
       width: 100% !important;
-      margin-top: $spacing-large;
       margin-right: auto !important;
       margin-bottom: $spacing-large;
       margin-left: auto !important;
@@ -378,3 +369,33 @@ figcaption {
     }
   }
 }
+
+// Image block overrides
+#page-edit,
+#page-add {
+  .block-editor-image figure.center {
+    @include variable-container-width();
+  }
+
+  .block-editor-image.default figure {
+    max-width: var(--default-container-width);
+  }
+}
+
+#page-document .blocks-group-wrapper > .block.image.align.center {
+  @include variable-container-width();
+}
+#page-document .blocks-group-wrapper > .block.image.align.center figure {
+  @include variable-container-width();
+}
+
+#page-document .blocks-group-wrapper {
+  & > .block.image.align.center.has--block-width--default {
+    // Unfortunately needed to have more specificity than the top one
+    // TODO: Remove when using layers and the BMv3
+    @include adjustMarginsToContainer($default-container-width);
+  }
+  & > .block.image.align.center.has--block-width--layout {
+    @include adjustMarginsToContainer($layout-container-width);
+  }
+}

package/src/theme/blocks/_introduction.scss

@@ -1,5 +1,17 @@
 #page-document .block.introduction {
   @include vertical-space-introduction();
+
+  & + .block.introduction {
+    margin-top: $spacing-medium;
+  }
+
+  &:has(+ .block.introduction) {
+    margin-bottom: 0;
+  }
+
+  &:has(+ .block.__button) {
+    margin-bottom: 0;
+  }
 }
 
 .block.introduction {
@@ -27,6 +39,10 @@
     margin-bottom: $block-vertical-space;
   }
 
+  .block-container {
+    @include default-container-width();
+  }
+
   h2 {
     @include highlight-title();
     margin-bottom: $spacing-large;

package/src/theme/blocks/_listing.scss

@@ -7,7 +7,7 @@
   &.next--is--__button {
     .listing-item:last-child {
       padding-bottom: 40px !important;
-      border-bottom: 1px solid $black !important;
+      border-bottom: 1px solid vas(--theme-font-color, black);
     }
   }
 
@@ -57,7 +57,6 @@
       a {
         .listing-body {
           h2 {
-            color: $black;
             @include text-heading-h2();
           }
           p {
@@ -164,7 +163,6 @@
       .card-container {
         width: 100%;
         height: 100% !important;
-        background-color: $lightgrey;
       }
 
       img.item-image {
@@ -183,7 +181,6 @@
         .headline {
           padding: 0 !important;
           margin-bottom: 20px;
-          color: $black;
           letter-spacing: 1px;
           text-transform: uppercase;
           @include headtitle1();
@@ -192,7 +189,6 @@
 
         h2 {
           margin: 0 0 20px 0;
-          color: $black;
           @include text-heading-h3();
         }
         p {
@@ -263,7 +259,6 @@
       display: block;
       padding: 25px 0 0 0;
       background: none;
-      color: #666;
       font-size: 14px;
       font-weight: 300;
       line-height: 18px;

package/src/theme/blocks/_search.scss

@@ -23,13 +23,8 @@
     .listing-item {
       h2,
       h3 {
-        color: $black;
         @include text-heading-h2();
       }
-      &:last-child {
-        padding-bottom: 40px !important;
-        border-bottom: 1px solid $black !important;
-      }
     }
 
     h2.headline {
@@ -87,11 +82,9 @@
           padding: 19px 0 19px 24px;
           border: none;
           background-color: transparent;
-          color: $black;
           font-size: 24px;
 
           &::placeholder {
-            color: $black;
             opacity: 1;
           }
         }
@@ -102,7 +95,6 @@
         top: 19px;
         right: 24px;
         padding-left: 14px;
-        background-color: $veryLightGrey !important;
 
         svg {
           width: 36px !important;
@@ -215,7 +207,7 @@
 
         .react-select__option--is-selected {
           svg {
-            fill: $black !important;
+            fill: $black;
           }
         }
       }
@@ -232,20 +224,6 @@
       .sort-label {
         display: none;
       }
-
-      svg path {
-        fill: $black;
-        stroke: $black;
-      }
-
-      .active {
-        background-color: $black !important;
-
-        svg path {
-          fill: $white;
-          stroke: $white;
-        }
-      }
     }
   }
 }

package/src/theme/blocks/_separator.scss

@@ -1,31 +1,28 @@
-#page-document .block.separator {
+#page-document .block.separator,
+#page-edit .block-editor-separator,
+#page-add .block-editor-separator {
   // cancel the original padding from the add-on
   &:not(.inner):not([role='presentation']) {
     padding: 0 !important;
   }
 
-  &.has--align--center,
-  &.inner {
-    margin-right: auto;
-    margin-left: auto;
+  &.has--shortLine--true {
+    .line::after {
+      width: 165px;
+    }
   }
 
-  @include vertical-space-separator();
-}
+  .line {
+    display: grid;
+    max-width: var(--block-width) !important;
+    justify-content: var(--block-alignment);
+    @include variable-container-width();
 
-#page-edit .block-editor-separator {
-  &.has--backgroundColor--grey {
-    background-color: $lightgrey;
-  }
-  .block.separator {
-    &.inner {
-      margin-right: auto;
-      margin-left: auto;
-
-      .block.separator {
-        margin-right: auto;
-        margin-left: auto;
-      }
+    &::after {
+      width: calc(100cqw - 2 * $horizontal-space-small-screens);
+      max-width: inherit;
     }
   }
+
+  @include vertical-space-separator();
 }

package/src/theme/blocks/_slider.scss

@@ -30,6 +30,63 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
   }
   .teaser-item {
     padding-bottom: $spacing-medium;
+
+    .teaser-item-title {
+      position: absolute;
+      top: 50%;
+      width: 570px;
+      min-height: 321px;
+      padding: 60px 50px 60px 100px;
+      background: rgba(0, 0, 0, 0.75);
+      color: white;
+      transform: translateY(-50%);
+
+      @container (max-width: 1024px) {
+        padding: 30px 30px 30px 80px;
+      }
+
+      @media only screen and (max-width: $computer-width) {
+        position: static;
+        width: 100%;
+        padding: 60px 20px;
+        background: $black;
+        transform: none;
+      }
+      &.has--slider--flagAlign--right {
+        right: 0;
+      }
+
+      .title {
+        .supertitle {
+          display: inline-block;
+          margin-bottom: 20px;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 1px;
+          line-height: 18px;
+          text-transform: uppercase;
+        }
+        h2 {
+          @include text-heading-h2();
+          margin-top: 0px;
+          margin-bottom: $spacing-medium;
+          color: $white;
+        }
+      }
+      p {
+        @include introduction();
+        display: -webkit-box;
+        overflow: hidden;
+        margin-bottom: 50px;
+        -webkit-box-orient: vertical;
+        color: $white;
+        -webkit-line-clamp: 5;
+        text-overflow: ellipsis;
+        @media only screen and (max-width: $computer-width) {
+          margin-bottom: $spacing-large;
+        }
+      }
+    }
   }
 
   .slide-wrapper:not(.empty-slide) {
@@ -40,68 +97,12 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     position: relative;
   }
 
-  .teaser-item-title {
-    position: absolute;
-    top: 50%;
-    width: 570px;
-    min-height: 321px;
-    padding: 60px 50px 60px 100px;
-    background: rgba(0, 0, 0, 0.75);
-    color: #fff;
-    transform: translateY(-50%);
-
-    @container (max-width: 1024px) {
-      padding: 30px 30px 30px 80px;
-    }
-
-    @media only screen and (max-width: $computer-width) {
-      position: static;
-      width: 100%;
-      padding: 60px 20px;
-      background: $black;
-      transform: none;
-    }
-    &.has--slider--flagAlign--right {
-      right: 0;
-    }
-
-    .title {
-      .supertitle {
-        display: inline-block;
-        margin-bottom: 20px;
-        font-size: 14px;
-        font-weight: 700;
-        letter-spacing: 1px;
-        line-height: 18px;
-        text-transform: uppercase;
-      }
-      h2 {
-        @include text-heading-h2();
-        margin-top: 0px;
-        margin-bottom: $spacing-medium;
-      }
-    }
-    p {
-      @include introduction();
-      display: -webkit-box;
-      overflow: hidden;
-      margin-bottom: 50px;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 5;
-      text-overflow: ellipsis;
-      @media only screen and (max-width: $computer-width) {
-        margin-bottom: $spacing-large;
-      }
-    }
-  }
-
   .ui.button {
     display: initial;
     padding: 8px 20px;
     border: 1px solid currentColor;
     border-radius: 0;
     background-color: transparent;
-    color: inherit;
     font-size: 16px;
     font-weight: 900;
     line-height: 20px;

package/src/theme/blocks/_teaser.scss

@@ -1,6 +1,6 @@
 // Override the Image component `aspect-ratio`
 .teaser-item .image-wrapper img {
-  aspect-ratio: $aspect-ratio !important;
+  aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
 }
 
 // Block Teaser Standalone
@@ -19,7 +19,7 @@
     }
   }
 
-  .teaser-item.default {
+  .teaser-item {
     align-items: start;
     padding-bottom: 40px; // same as vertical spacing in margin-bottom
     border-bottom: 1px solid $black;
@@ -122,7 +122,7 @@
     &.next--is--__button {
       .teaser-item.default {
         padding-bottom: 40px;
-        border-bottom: 1px solid $black;
+        border-bottom: 1px solid;
       }
     }
   }

package/src/theme/main.scss

@@ -5,6 +5,7 @@
 @import 'typography';
 @import 'utils';
 @import 'layout';
+@import 'widgets';
 
 @import 'container';
 

package/src/transforms/to6.ts

@@ -0,0 +1,94 @@
+import type { BlocksFormData } from '@plone/types';
+import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
+
+import config from '@plone/volto/registry';
+
+function* visitBlocks(blocks) {
+  for (const key in blocks) {
+    if (blocks.hasOwnProperty(key)) {
+      const block = blocks[key];
+      yield block;
+      if (block.blocks) {
+        yield* visitBlocks(block.blocks);
+      }
+    }
+  }
+}
+
+export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
+  const NORMALIZED_WIDTHS = [
+    ...config.blocks.widths,
+    {
+      style: {
+        '--block-width': 'var(--default-container-width)',
+      },
+      name: 'wide',
+      label: 'Default',
+    },
+  ];
+
+  for (const block of visitBlocks(data.blocks)) {
+    if (block?.styles?.backgroundColor) {
+      if (block.styles.backgroundColor === 'transparent') {
+        block.styles.backgroundColor = 'default';
+      }
+      block.theme = block.styles.backgroundColor;
+      delete block.styles.backgroundColor;
+    }
+
+    if (block['@type'] === '__button') {
+      block.styles = {
+        ...block.styles,
+        'blockWidth:noprefix':
+          block.styles?.['blockWidth:noprefix'] ??
+          findStyleByName(
+            NORMALIZED_WIDTHS,
+            `${block.styles?.buttonAlign === 'wide' ? 'default' : 'narrow'}`,
+          ),
+      };
+
+      delete block.styles.buttonAlign;
+    }
+
+    if (block['@type'] === 'separator') {
+      block.styles = {
+        ...block.styles,
+        shortLine:
+          block.styles?.['shortLine'] ?? block?.styles?.align === 'left'
+            ? true
+            : false,
+        'align:noprefix': block.styles?.['align:noprefix'] ?? {
+          '--block-alignment': 'var(--align-left)',
+        },
+        'blockWidth:noprefix':
+          block.styles?.['blockWidth:noprefix'] ??
+          findStyleByName(
+            NORMALIZED_WIDTHS,
+            `${block.styles?.align === 'full' ? 'default' : 'narrow'}`,
+          ),
+      };
+
+      delete block.styles.align;
+    }
+
+    if (
+      block['@type'] === 'image' &&
+      !['left', 'right'].includes(block?.align)
+    ) {
+      block.styles = {
+        ...block.styles,
+        'blockWidth:noprefix':
+          block.styles?.['blockWidth:noprefix'] ??
+          findStyleByName(
+            NORMALIZED_WIDTHS,
+            block?.align === 'wide'
+              ? 'default'
+              : block?.align === 'center'
+                ? 'narrow'
+                : block.align,
+          ),
+      };
+      block.align = 'center';
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "module": "preserve",
+    "noEmit": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "jsx": "react-jsx",
+    "paths": {
+      "@plone/volto/*": [
+        "../../core/packages/volto/src/*",
+        "../../../../core/packages/volto/src/*"
+      ],
+      "@kitconcept/volto-light-theme/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "**/*.test.{js,jsx,ts,tsx}",
+    "**/*.spec.{js,jsx,ts,tsx}",
+    "**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}

package/.release-it.json

@@ -1,31 +0,0 @@
-{
-  "plugins": {
-    "../../core/packages/scripts/prepublish.js": {}
-  },
-  "hooks": {
-    "after:bump": [
-      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
-      "pipx run towncrier build --yes --version ${version}",
-      "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
-      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
-      "git add ../../CHANGELOG.md ../../package.json"
-    ],
-    "after:release": "rm .changelog.draft"
-  },
-  "npm": {
-    "publish": false
-  },
-  "git": {
-    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
-    "requireUpstream": false,
-    "requireCleanWorkingDir": false,
-    "commitMessage": "Release ${version}",
-    "tagName": "${version}",
-    "tagAnnotation": "Release ${version}"
-  },
-  "github": {
-    "release": true,
-    "releaseName": "${version}",
-    "releaseNotes": "cat .changelog.draft"
-  }
-}

package/babel.config.js

@@ -1,17 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  const presets = ['razzle'];
-  const plugins = [
-    [
-      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
-      {
-        messagesDir: './build/messages/',
-      },
-    ],
-  ];
-
-  return {
-    plugins,
-    presets,
-  };
-};

package/build/messages/src/components/Anontools/Anontools.json

@@ -1,10 +0,0 @@
-[
-  {
-    "id": "Register",
-    "defaultMessage": "Register"
-  },
-  {
-    "id": "Log in",
-    "defaultMessage": "Log in"
-  }
-]

package/build/messages/src/components/Blocks/Button/schema.json

@@ -1,6 +0,0 @@
-[
-  {
-    "id": "Block Width",
-    "defaultMessage": "Block Width"
-  }
-]

package/build/messages/src/components/Blocks/EventMetadata/View.json

@@ -1,30 +0,0 @@
-[
-  {
-    "id": "Start",
-    "defaultMessage": "Start"
-  },
-  {
-    "id": "End",
-    "defaultMessage": "End"
-  },
-  {
-    "id": "Location",
-    "defaultMessage": "Location"
-  },
-  {
-    "id": "Website",
-    "defaultMessage": "Website"
-  },
-  {
-    "id": "Contact",
-    "defaultMessage": "Contact"
-  },
-  {
-    "id": "Phone",
-    "defaultMessage": "Phone"
-  },
-  {
-    "id": "ICS-Download",
-    "defaultMessage": "ICS Download"
-  }
-]

package/build/messages/src/components/Blocks/Image/Edit.json

@@ -1,10 +0,0 @@
-[
-  {
-    "id": "Browse the site, drop an image, or type an URL",
-    "defaultMessage": "Browse the site, drop an image, or type an URL"
-  },
-  {
-    "id": "Uploading image",
-    "defaultMessage": "Uploading image"
-  }
-]