src/patterns/01-core/elements/_select.scss

@@ -16,7 +16,6 @@
   appearance: none;
   border: var(--size-xs) solid  var(--gray-3);
   border-radius: var(--radius-1);
-  color: inherit;
   cursor: pointer;
   font-family: var(--font-systemmedium);
   font-size: inherit;

src/patterns/01-core/elements/_table.scss

@@ -2,7 +2,6 @@
 // Table styles.
 
 :where(caption) {
-  color: var(--gray-5);
   font-size: var(--font-size-0);
   font-style: italic;
   padding: var(--size-1);

src/patterns/01-core/elements/_textarea.scss

@@ -5,7 +5,6 @@
   border: var(--size-xs) solid   var(--gray-3);
   box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
   box-sizing: border-box;
-  color: inherit;
   cursor: pointer;
   font-family: var(--font-systemmedium);
   font-size: var(--font-size-0);

src/patterns/01-core/props/_colors.scss

@@ -46,7 +46,7 @@
   --neutral-2: #a2a2a2;
   --neutral-3: #787878;
   --neutral-4: #000;
-  --neutral-primary: #000;
+  --neutral-primary: #fafafa;
   --sci-1: #b4d5ff;
   --sci-2: #63a0ff;
   --sci-3: #0073ce;
@@ -221,6 +221,7 @@
 
 $faculties_colours: (
   'org-default': uw-gold,
+  'org-default-b': uw-black,
   'org-ahs': ahs,
   'org-art': art,
   'org-eng': eng,
@@ -234,7 +235,6 @@ $faculties_colours: (
   'org-ren': ren,
   'neutral': neutral
 );
-
 //Swatches
 .pl-colors .color-demo > div > div{
   background-color: rgba(0, 0, 0, 0.6);

src/patterns/03-layouts/block/_block.scss

@@ -14,17 +14,21 @@
     margin-bottom: 0;
   }
   // On nodes, move block title to top of block, while preserving spacing underneath.
+  // Needs to be done using positioning because negative margin here pushes sections up.
   .uw-main & > {
     h2:first-child,
     .uw-admin-label + h2 {
-      margin-top: -0.25em; /* Using ems so it adjusts to font size. */
+      position: relative;
+      bottom: 0.25em; /* Using ems so it adjusts to font size. */
+      margin-bottom: calc(var(--size-1) - 0.25em);
       padding-top: 0;
     }
   }
   &:last-of-type {
     margin-bottom: 0;
   }
-  // On nodes, move an initial header in copy text to top of block, while preserving spacing underneath, unless there was a block title..
+  // On nodes, move an initial header in copy text to top of block, while preserving spacing underneath, unless there was a block title.
+  // Using negative margin here doesn't seem to cause problems here so not refactoring in case it introduces issues.
   .uw-main & .uw-admin-label + .contextual + .uw-copy-text,
   .uw-main & .uw-copy-text:first-child {
     .uw-copy-text__wrapper > :where(h2, h3, h4, h5, h6):first-child {
@@ -34,6 +38,7 @@
   }
 }
 
+
 // disable margin for layout builder blocks
 .block--provider-layout-builder {
   margin-bottom: 0;

src/patterns/03-layouts/layout/_layout.scss

 @use '../../01-core' as *;
+
 :root {
   /* establish a default for calculations */
   --base-section-margin: calc(var(--grid-gap) * 0.5);
@@ -6,12 +7,28 @@
   --section-margin: var(--base-section-margin);
   --layout-max-width-narrow: calc(100vw - 2rem);
 }
+
+/* Only apply top padding to the first section when there's a background. */
+.card__content section.layout:first-child:not(.uw-section__background-color,.uw-section__background-image) {
+  padding-top: 0;
+}
+
+/* Only apply bottom padding to the last section when there's a background or a separator. */
+.card__content section.layout:last-child:not(.uw-section__background-color,.uw-section__background-image,.uw-section-separator--bottom,.uw-section-separator--narrow) {
+  padding-bottom: 0;
+}
+@media(min-width: $screen-md) {
+  .card__content section.layout:last-child.uw-section-separator--narrow {
+    padding-bottom: unset;
+  }
+}
+
 .uw-section-spacing {
   &--75 {
     --section-margin: calc(var(--base-section-margin) * 0.75);
     &.layout {
-      margin-bottom: var(--section-margin);
       padding-bottom: var(--section-margin);
+      padding-top: var(--section-margin);
       &.card__media {
         margin-bottom: 0 !important;
       }
@@ -20,29 +37,29 @@
   &--50 {
     --section-margin: calc(var(--base-section-margin) * 0.5);
     &.layout {
-      margin-bottom: var(--section-margin);
       padding-bottom: var(--section-margin);
+      padding-top: var(--section-margin);
     }
   }
   &--25 {
     --section-margin: calc(var(--base-section-margin) * 0.25);
     &.layout {
-      margin-bottom: var(--section-margin);
       padding-bottom: var(--section-margin);
+      padding-top: var(--section-margin);
     }
   }
   &--none {
     --section-margin: 0;
     &.layout {
-      margin-bottom: var(--section-margin);
       padding-bottom: var(--section-margin);
+      padding-top: var(--section-margin);
     }
   }
   &--default {
     --section-margin: var(--base-section-margin);
     &.layout {
-      margin-bottom: var(--section-margin);
       padding-bottom: var(--section-margin);
+      padding-top: var(--section-margin);
     }
   }
   &.layout  {
@@ -59,7 +76,7 @@
   }
   &--bottom {
     position: relative;
-    &:not(.is-layout-builder-highlighted){
+    &:not(.is-layout-builder-highlighted) {
       border-color: var(--layout-border-color);
       border-style: var(--layout-border-style);
       border-bottom-width: var(--layout-border-width);
@@ -77,11 +94,24 @@
     }
   }
 }
+
 .layout {
   --layout-border-width: var(--size-xs);
+  // Puts padding on mobile view.
   @include uw-contained-width(var(--layout-max-width-narrow));
+  &.uw-section__background-color {
+    max-width: 100% !important;
+    padding-left: calc((100% - var(--layout-max-width-narrow)) / 2);
+    padding-right: calc((100% - var(--layout-max-width-narrow)) / 2);
+  }
+  // Desktop max width no padding look.
   @media(min-width: $screen-xl) {
     @include uw-contained-width(var(--layout-max-width));
+    &.uw-section__background-color {
+      max-width: 100% !important;
+      padding-left: calc((100% - var(--layout-max-width)) / 2);
+      padding-right: calc((100% - var(--layout-max-width)) / 2);
+    }
   }
   &.layout-builder__layout {
     padding-top: var(--size-2);
@@ -102,27 +132,75 @@
   }
   &.uw-contained-width {
     @include uw-contained-width(var(--layout-max-width-narrow));
+    &.uw-section__background--contained {
+      padding-left: var(--size-2);
+      padding-right: var(--size-2);
+    }
+    &.uw-section__background-color,
+    &.uw-section__background--full-width {
+      max-width: 100% !important;
+      padding-left: calc((100% - var(--layout-max-width-narrow)) / 2);
+      padding-right: calc((100% - var(--layout-max-width-narrow)) / 2);
+    }
     @media(min-width: $screen-xl) {
       // Reset the width so we use all the width when we have room to.
       @include uw-contained-width(var(--layout-max-width));
+      &.uw-section__background-color,
+      &.uw-section__background--full-width {
+        max-width: 100% !important;
+        padding-left: calc((100% - var(--layout-max-width)) / 2);
+        padding-right: calc((100% - var(--layout-max-width)) / 2);
+      }
     }
     &.card__media {
       max-width: var(--layout-max-width);
     }
     &--narrow {
+
       /* Match the width of WCMS2's narrow: 496px */
-      max-width: 31rem;
+      @media(min-width: $screen-xs) {
+        max-width: 31rem;
+      }
+      &.uw-section__background-color,
+      &.uw-section__background--full-width {
+        padding-left: var(--size-2);
+        padding-right: var(--size-2);
+      }
+      @media(min-width: $screen-md) {
+        &.uw-section__background-color,
+        &.uw-section__background--full-width {
+          max-width: 100% !important;
+          padding-left: calc((100% - 31rem) / 2);
+          padding-right: calc((100% - 31rem) / 2);
+        }
+      }
     }
 
     &--wide {
       /* Match the width of WCMS2's wide: 753px */
       max-width: 47.0625rem;
+      &.uw-section__background-color,
+      &.uw-section__background--full-width {
+        max-width: 100% !important;
+        padding-left: var(--size-2);
+        padding-right: var(--size-2);
+      }
+      @media(min-width: $screen-md) {
+        &.uw-section__background-color,
+        &.uw-section__background--full-width {
+          max-width: 100% !important;
+          padding-left: calc((100% - 47.0625rem) / 2);
+          padding-right: calc((100% - 47.0625rem) / 2);
+        }
+      }
     }
   }
   &.uw-full-width {
     @include uw-full-width-padding;
     overflow: hidden;
-
+    .layout__region:not(:has(.block-uw-cbl-image)) {
+      padding-top: var(--size-1);
+    }
     .uw-caption{
       > p{
         padding-left: var(--size-2);
@@ -147,7 +225,7 @@
       padding: var(--size-1) 0 0;
     }
 
-    &.layout--uw-1-col{
+    &.layout--uw-1-col {
       .block-inline-blockuw-cbl-banner-images,
       .block-inline-blockuw-cbl-image,
       .block-uw-cbl-image,

src/patterns/03-layouts/layout/_layout.twig

@@ -6,6 +6,19 @@
   5: 'fifth',
 } %}
 
+
+{% if settings.layout_builder_background_color %}
+  {% set classes = classes|merge(['uw-section__background-color']) %}
+{% endif %}
+
+{% if options.image %}
+  {% include '@components/background-image/background-image.twig' with {
+    'image': options.image,
+    'image_class': 'uw-section__background-image-' ~ settings.layout_builder_background_image,
+  } %}
+  {% set classes = classes|merge(['uw-section__background-image-' ~ settings.layout_builder_background_image ]) %}
+{% endif %}
+
 {% set section_classes = '' %}
 <section
   {% if pattern_lab %}

src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig

@@ -18,6 +18,7 @@
     classes: classes,
     num_of_blocks: num_of_blocks,
     inverted_l_left: 1,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig

@@ -18,6 +18,7 @@
     classes: classes,
     num_of_blocks: num_of_blocks,
     inverted_l_right: 1,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/media/_media.scss

@@ -33,3 +33,43 @@
     order: 1;
   }
 }
+
+// Adjust the image size in the layout builder off canvas flyout
+// when choosing background image in section options.
+.media-library-form-element {
+  .fieldset-legend {
+    font-size: var(--font-size-000) !important;
+    font-weight: bold !important;
+  }
+  input[name="layout_builder_background_image-media-library-update"] {
+    display: none !important;
+  }
+  .media-library-form-element-empty-text {
+    font-size: var(--font-size-000) !important;
+    font-style: italic !important;
+  }
+  .media-library-item {
+    background: none;
+  }
+  .media-library-item__preview {
+    padding-bottom: 0;
+    .uw-picture {
+      width: 100% !important;
+    }
+    .uw-picture__fallback {
+      width: 100% !important;
+    }
+  }
+  .media-library-selection {
+    margin-top: 0;
+  }
+}
+.media-library-selection .media-library-item--grid {
+  width: auto !important;
+}
+.media-library-item--grid::before {
+  border: none;
+}
+.media-library-item__name {
+  color: var(--uw-black);
+}

src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss

@@ -312,6 +312,7 @@ button {
   padding: 0.2rem var(--size-2);
   position: absolute;
   top: -1.5rem !important;
+  text-shadow: none;
 }
 
 // Give padding for the admin labels.

src/patterns/04-components/_index.scss

 @forward '00-cms-styles/dashboards/dashboards';
 @forward '00-cms-styles/layout-builder/layout-builder';
 @forward '00-cms-styles/toolbar-menu/toolbar-menu';
+@forward 'background-color/background-color';
+@forward 'background-image/background-image';
 @forward 'banners/banners';
 @forward 'blockquote/blockquote';
 @forward 'button/button';

src/patterns/04-components/background-color/_background-color.scss

+// @file
+// Background color styles override.
+
+@use '../../01-core' as *;
+
+@each $faculty, $colour in $faculties_colours {
+  .uw-section__background--#{$faculty} {
+    background-color: var(--#{$colour}-primary);
+    .block-layout-builder,
+    .layout-builder-block {
+      background: transparent;
+    }
+    @if $faculty == org-default or $faculty == neutral {
+      color: var(--uw-black);
+      .highlight {
+        color: var(--uw-black);
+      }
+      :where(hr) {
+        border-color: var(--uw-black);
+      }
+      :where(blockquote) {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+      .uw-blockquote__text,
+      .uw-blockquote__text::before,
+      .uw-blockquote__text::after,
+      .uw-blockquote__attribution--wrapper,
+      .uw-blockquote__attribution--wrapper cite {
+        color: var(--black);
+      }
+    }
+    @else {
+      color: var(--uw-white);
+      :where(hr) {
+        border-color: var(--uw-white);
+      }
+      table {
+        td,
+        tr,
+        th {
+          background-color: transparent;
+        }
+        th[scope="row"],
+        th[scope="col"],
+        thead,
+        tfoot {
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+      }
+      mark,
+      form input {
+        color: var(--uw-black);
+      }
+
+      :where(blockquote),
+      :where(code),
+      :where(kbd) {
+        color: var(--uw-white);
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+      :where(kbd),
+      :where(var) {
+        border-color: var(--uw-white);
+      }
+      .uw-blockquote__text,
+      .uw-blockquote__text::before,
+      .uw-blockquote__text::after,
+      .uw-blockquote__attribution--wrapper,
+      .uw-blockquote__attribution--wrapper cite,
+      cite,
+      .highlight,
+      .description {
+        color: var(--uw-white);
+      }
+    }
+    @if $faculty == neutral {
+      :where(blockquote) {
+        background-color: var(--uw-white);
+      }
+    }
+  }
+}

src/patterns/04-components/background-image/_background-image.scss

+.uw-section__background-image {
+  background-position: center;
+  background-size: cover;
+  .block-layout-builder,
+  .layout-builder-block {
+    background: transparent;
+  }
+  :where(blockquote) {
+    background-color: transparent;
+    color: var(--uw-black);
+  }
+}
+.uw-section__text-color--white,
+.uw-section__text-color--white-black-shadow {
+  color: var(--uw-white);
+  mark {
+    color: var(--uw-black) !important;
+  }
+  :where(code) {
+    color: var(--uw-black);
+  }
+  table {
+    * {
+      color: var(--uw-black) !important;
+    }
+    caption {
+      background-color: rgba(255, 255, 255, 0.75);
+    }
+  }
+  .description,
+  .uw-blockquote__text,
+  .uw-blockquote__text::before,
+  .uw-blockquote__text::after,
+  .uw-blockquote__attribution--wrapper,
+  .uw-blockquote__attribution--wrapper cite {
+    color: var(--uw-white);
+  }
+  form input {
+    color: var(--uw-black);
+  }
+}
+
+.uw-section__text-color--black,
+.uw-section__text-color--black-white-shadow {
+  color: var(--uw-black);
+  table {
+    * {
+      color: var(--uw-black) !important;
+      text-shadow: transparent 0 0 0;
+    }
+    caption {
+      background-color: rgba(255, 255, 255, 0.75);
+    }
+  }
+  .uw-blockquote__text {
+    color: var(--uw-black);
+    &::after,
+    &::before {
+      color: var(--uw-black);
+    }
+  }
+}
+
+.uw-section__text-color--black-white-shadow {
+  text-shadow: var(--uw-white) 1px 1px 2px;
+}
+
+.uw-section__text-color--white-black-shadow {
+  text-shadow: var(--uw-black) 1px 1px 2px;
+}
+
+.uw-section__tint-color--black,
+.uw-section__tint-color--white,
+.uw-section__tint-color--none {
+  position: relative;
+  &::before {
+    background-color: transparent;
+    bottom: 0;
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: var(--layer-background);
+  }
+  .layout__region {
+    position: relative;
+    z-index: var(--layer-wrapper);
+  }
+}
+.uw-section__tint-color--black {
+  // Adds the black filter to image overlay.
+  &::before {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.uw-section__tint-color--white {
+  // Adds the white filter to image overlay.
+  &::before {
+    background-color: rgba(255, 255, 255, 0.75);
+  }
+}

src/patterns/04-components/background-image/background-image.twig

+<style>
+
+  {% for source in image.sources|reverse %}
+  @media only screen and {{ source.media | replace({'all and': ''}) }} {
+    .{{ image_class }} {
+      background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
+    }
+  }}
+  {% endfor %}
+</style>