@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/theme/_widgets.scss

@@ -89,20 +89,18 @@ span.color-contrast-label {
 }
 
 .color-swatch-widget {
-  .buttons {
-    flex: 1 1 100%;
-    margin: 1rem 0 0.5rem;
-    text-align: center;
+  .react-aria-RadioGroup {
+    gap: 5px;
   }
 
-  button {
+  .color-swatch-option-handler {
     position: relative;
     width: 32px;
     height: 32px;
     padding: 1rem;
     border: 2px solid #ccc;
     border-radius: 100%;
-    margin-right: 0.25rem;
+    cursor: pointer;
 
     &.active {
       border: 2px solid red;
@@ -121,18 +119,9 @@ span.color-contrast-label {
   }
 }
 
-.color-swatch-widget button {
-  background-color: var(--theme-color);
-}
-
-.color-swatch-widget .button.grey,
-.color-swatch-widget .button.grey.active,
-.color-swatch-widget .ui.grey.button:hover {
-  background-color: var(--theme-color);
-}
-.color-swatch-widget .button.active,
-.color-swatch-widget .button.active:hover {
+.color-swatch-widget .color-swatch-option-handler {
   background-color: var(--theme-color);
+  color: var(--theme-foreground-color);
 }
 
 .buttons-widget-option {

package/src/theme/blocks/_accordion.scss

@@ -26,6 +26,7 @@
       & > span,
       .input-accordion-title {
         @include introduction();
+        max-width: calc(100% - 50px); // 100% - svg height
         color: $darkGrey;
       }
 
@@ -67,6 +68,7 @@
 
       .block.image {
         figure {
+          margin-top: 0;
           &.right {
             margin-left: 20px;
           }
@@ -91,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/_form.scss

@@ -0,0 +1,350 @@
+%form-outlined-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 20px;
+  border: 1px solid var(--theme-foreground-color);
+  border-radius: 0;
+  margin: 0;
+  background-color: var(--theme-color);
+  color: var(--theme-foreground-color);
+
+  @include body-text-bold();
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-color: var(--theme-foreground-color);
+    background-color: var(--theme-foreground-color);
+    color: var(--theme-color);
+  }
+}
+
+.block.schemaForm {
+  --form-error-foreground: #cc0000;
+  --form-error-background: #f2cecd;
+
+  & > h2,
+  & > p,
+  & > .formDescription,
+  & > .container {
+    @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
+  }
+
+  h2 {
+    @include block-title();
+
+    margin-bottom: $spacing-small;
+  }
+
+  .formDescription {
+    margin-bottom: $spacing-medium;
+  }
+
+  form.ui.form {
+    fieldset {
+      padding: 0;
+      border: 0;
+      margin: 0;
+    }
+
+    .ui.segments,
+    .ui.raised.segments,
+    .ui.segment {
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      margin: 0;
+      background: none;
+      box-shadow: none;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    .field {
+      padding-bottom: 0 !important;
+      margin-bottom: $spacing-small;
+
+      .ui.grid {
+        display: block;
+        margin: 0;
+
+        > .row {
+          display: block;
+          padding: 0;
+        }
+
+        > .row > .column {
+          width: 100% !important;
+          padding: 0;
+        }
+      }
+
+      .wrapper > label {
+        display: block;
+        margin-bottom: 0;
+
+        @include add(size, xs);
+        @include add(height, s);
+        @include add(weight, bold);
+
+        color: var(--theme-low-contrast-foreground-color);
+        opacity: 0.9;
+      }
+
+      &:focus-within .wrapper > label {
+        color: var(--theme-foreground-color);
+        opacity: 1;
+      }
+
+      &.required .wrapper > label::after {
+        margin-left: 2px;
+        background: none;
+        content: '*';
+      }
+
+      &.required .wrapper .ui.checkbox::after {
+        margin-left: 2px;
+        background: none;
+        content: '*';
+      }
+
+      .help {
+        border-bottom: none;
+        margin: 0;
+
+        color: var(--theme-low-contrast-foreground-color);
+
+        @include add(size, xs);
+        @include add(height, m);
+      }
+
+      &.error {
+        .wrapper > label,
+        .help {
+          color: var(--form-error-foreground);
+        }
+
+        .ui.input > input,
+        input[type='text'],
+        input[type='email'],
+        input[type='number'],
+        input[type='password'],
+        textarea,
+        .react-select__control,
+        .DateInput_input,
+        .rc-time-picker-input {
+          background: var(--form-error-background);
+          color: var(--form-error-foreground);
+
+          &::placeholder {
+            color: var(--form-error-foreground);
+          }
+        }
+      }
+
+      &.textarea .wrapper {
+        margin-top: 0;
+      }
+    }
+
+    .ui.input {
+      width: 100%;
+    }
+
+    .ui.input > input,
+    input[type='text'],
+    input[type='email'],
+    input[type='number'],
+    input[type='password'],
+    textarea,
+    .react-select__control,
+    .DateInput_input,
+    .rc-time-picker-input {
+      width: 100%;
+      padding: $spacing-small;
+      border: 0;
+      border-radius: 0;
+      background: var(--theme-high-contrast-color);
+      box-shadow: none;
+      color: var(--theme-foreground-color);
+
+      @include body-text();
+
+      &::placeholder {
+        color: var(--theme-low-contrast-foreground-color);
+        opacity: 0.6;
+      }
+
+      &:focus,
+      &:focus-visible {
+        outline: 2px solid var(--theme-foreground-color);
+        outline-offset: -2px;
+      }
+    }
+
+    textarea {
+      min-height: 180px;
+      margin-top: 5px;
+      resize: vertical;
+    }
+
+    .react-select__control {
+      display: flex;
+      min-height: auto;
+      padding: $spacing-small;
+
+      .react-select__value-container {
+        padding: 0;
+      }
+
+      .react-select__single-value {
+        color: var(--theme-foreground-color);
+      }
+
+      .react-select__placeholder {
+        color: var(--theme-low-contrast-foreground-color);
+        opacity: 0.6;
+      }
+
+      .react-select__indicator-separator {
+        display: none;
+      }
+
+      .react-select__indicator svg path {
+        fill: var(--theme-foreground-color);
+      }
+    }
+
+    .react-select__menu {
+      border-radius: 0;
+      margin: 0;
+      background: var(--theme-high-contrast-color);
+      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
+    }
+
+    .react-select__menu-list {
+      padding: 0;
+    }
+
+    .react-select__option {
+      padding: 12px $spacing-small;
+      background: transparent;
+      color: var(--theme-foreground-color);
+      cursor: pointer;
+
+      @include body-text();
+
+      &.react-select__option--is-focused,
+      &.react-select__option--is-selected {
+        background: var(--theme-foreground-color);
+        color: var(--theme-high-contrast-color);
+      }
+    }
+
+    .date-time-widget-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: $spacing-small;
+
+      .DateInput {
+        width: 140px;
+      }
+      .time-input input {
+        width: 90px !important;
+      }
+    }
+
+    .file-widget-dropzone {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: $spacing-small;
+      cursor: pointer;
+      gap: $spacing-small;
+
+      .dropzone-placeholder {
+        width: 100%;
+        padding: $spacing-medium;
+        margin-top: 0;
+        background: var(--theme-high-contrast-color);
+      }
+
+      .dropzone-text {
+        margin: 0;
+
+        @include body-text();
+
+        color: var(--theme-low-contrast-foreground-color);
+      }
+
+      .label-file-widget-input {
+        @extend %form-outlined-button;
+      }
+    }
+
+    .field.help .file-widget-dropzone {
+      margin-bottom: 0;
+    }
+
+    .ui.segment.actions {
+      display: flex;
+      padding: 0;
+      margin-top: $spacing-xlarge;
+      gap: $spacing-small;
+
+      &::after {
+        display: none;
+      }
+
+      button {
+        @extend %form-outlined-button;
+
+        float: none !important;
+
+        &:not(.primary) {
+          border-color: var(--theme-low-contrast-foreground-color);
+          color: var(--theme-low-contrast-foreground-color);
+
+          &:hover,
+          &:active,
+          &:focus {
+            border-color: var(--theme-low-contrast-foreground-color);
+            background-color: var(--theme-low-contrast-foreground-color);
+            color: var(--theme-color);
+          }
+        }
+      }
+    }
+  }
+
+  .inline.field .wrapper {
+    min-height: auto;
+    border-bottom: none;
+  }
+
+  .field-file-name:empty {
+    display: none;
+  }
+
+  .negative.attached.message {
+    flex-direction: row;
+  }
+}
+
+#page-edit,
+#page-add {
+  .block.schemaForm {
+    .field {
+      .toolbar {
+        display: flex;
+        align-items: flex-start;
+        margin-top: 15px;
+      }
+    }
+  }
+}

package/src/theme/blocks/_grid.scss

@@ -37,13 +37,6 @@
     padding-top: 0;
     margin-bottom: 0;
 
-    // External link icon
-    a.external {
-      .card-summary h2:after {
-        @include external-link-icon();
-      }
-    }
-
     a {
       text-decoration: none;
     }
@@ -55,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 {
@@ -129,6 +89,7 @@
   }
 
   .block.image {
+    margin-top: 0;
     figcaption {
       position: absolute;
       z-index: 100;
@@ -173,11 +134,20 @@
       content: '';
       opacity: 0.75;
     }
+    figure figcaption:not(:has(strong.title)) {
+      display: none;
+    }
+    figure:not(:has(figcaption strong.title)):after {
+      display: none;
+    }
   }
 
   .block-editor-image {
     padding: 0;
     margin: 0.5rem !important;
+    figure {
+      max-width: unset;
+    }
   }
 
   .block.listing {
@@ -294,11 +264,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;
@@ -321,14 +286,6 @@
 
     .two,
     .three {
-      .teaser {
-        .teaser-item .content {
-          h2 {
-            margin-bottom: $spacing-small !important;
-            @include text-heading-h3();
-          }
-        }
-      }
       .image {
         figcaption {
           .title {
@@ -355,26 +312,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 {
@@ -415,10 +352,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)

package/src/theme/blocks/_highlight.scss

@@ -6,11 +6,10 @@
       @include highlight-title();
     }
     .description {
-      a,
-      p,
-      span {
+      --link-foreground-color: var(--theme-foreground-color);
+
+      p {
         @include introduction();
-        --link-foreground-color: var(--theme-foreground-color);
       }
     }
 
@@ -19,8 +18,12 @@
       text-decoration: none;
     }
   }
+  .block-inner-container {
+    max-width: var(--layout-container-width);
+  }
 }
-.block.highlight.has--descriptionColor--highlight-custom-color-2,
-.block-editor-highlight.has--descriptionColor--highlight-custom-color-2 .block {
-  --theme-foreground-color: #fff;
+.color-swatch-widget[class*='field-wrapper-descriptionColor'] {
+  & + .color-swatch-widget.field-wrapper-theme {
+    padding-top: 16px;
+  }
 }