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

@@ -160,6 +160,8 @@ button {
   .node-uw-ct-web-page-delete-form .form-actions{
     .button[data-drupal-selector="edit-cancel"]{
       margin-left: 0 !important;
+      padding: var(--size-05);
+      padding-top: 10px;
     }
     @media(min-width: $screen-md) {
       grid-template-columns: 8rem 8rem;

src/patterns/01-core/mixins/_headings.scss

@@ -3,6 +3,7 @@
 
 @mixin heading-base {
   color: inherit;
+  clear: both;
   font-family: var(--font-condensedbook);
   font-weight: var(--font-weight-400);
   hyphens: none;

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

@@ -83,7 +83,7 @@
   --uw-black: #000;
   --uw-black-1: #dfdfdf;
   --uw-black-2: #a2a2a2;
-  --uw-black-3: #787878;
+  --uw-black-3: #787878; //local  site footer color
   --uw-black-4: #000;
   --uw-black-primary: #000;
   --uw-gold: #fdd54f;

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

 // Media Query Ranges
 $screen-xxs: 240px;
 $screen-xs: 30rem;
+$screen-fb: 37.5rem;
 $screen-sm: 40.06rem;
 $screen-md: 48.06rem;
 $screen-lg: 63.1875rem;

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

@@ -9,7 +9,9 @@
   --size-2: 1rem;      // 16px sm
   --size-205: 1.25rem; // 20px
   --size-3: 1.5rem;    // 24px md
+  --size-305: 1.75rem;
   --size-4: 2rem;      // 32px lg
+  --size-405: 2.125rem;
   --size-5: 2.5rem;    // 40px
   --size-6: 3rem;      // 48px
   --size-7: 3.5rem;    // 56px xl

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

@@ -10,6 +10,9 @@
   &.block-local-tasks-block {
     margin-bottom: 0;
   }
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 // disable margin for layout builder blocks

src/patterns/03-layouts/footer/_footer.scss

@@ -9,18 +9,14 @@
   width: 100%;
   &__wrapper {
     @include uw-contained-width();
-    display: grid;
-    grid-template-columns: 100%;
     padding: var(--size-2);
     text-size-adjust: none;
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm) {
+      display: grid;
       grid-template-columns: 50% 50%;
     }
     @media(min-width: $screen-md) {
-      grid-template-columns: 28% auto 14rem;
-    }
-    @media(min-width: $screen-lg) {
-      grid-template-columns: 28% auto 16rem;
+      grid-template-columns: 25% auto 17rem;
     }
   }
   &__address {
@@ -49,7 +45,7 @@
     -webkit-font-smoothing: antialiased;
     grid-column: 1 / 3;
     padding-bottom: var(--size-1);
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm) {
       grid-column: 1 / 2;
       grid-row: 2 / 3;
     }
@@ -62,10 +58,9 @@
     grid-column: 1 / 3;
     grid-row: 3 / 4;
     margin: 0 auto;
-    max-width: 13rem;
     text-align: center;
     width: 100%;
-    @media(min-width: $screen-xs) {
+    @media(min-width: $screen-sm) {
       grid-column: 2 / 3;
       grid-row: 2 / 3;
     }
@@ -73,7 +68,6 @@
       grid-column: 3 / 4;
       grid-row: 1 / 2;
       margin: 0;
-      max-width: 16rem;
       padding-left: var(--size-1);
       text-align: left;
     }

src/patterns/03-layouts/footer/footer.twig

@@ -4,13 +4,18 @@
             {% include "@layouts/site-footer/site-footer.twig" with {
                 body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                 site_name: "Faculty of Environment",
-                logo_link: "https://uwaterloo.ca/",
+                logo_link: "https://uwaterloo.ca/environment",
                 logo_url: "/images/uwaterloo-logo.svg",
                 logo_alt_text: "Faculty of Environment",
+                social_media: sf_social_media,
                 facebook: "https://www.facebook.com/University.Waterloo"
             } %}
         {% endblock %}
     </div>
+  {%  if pattern_lab %}
+    {%  set faculty = faculty ? faculty : 'org-default' %}
+    {%  set branding_level = branding_level ? branding_level : 'full' %}
+  {% endif %}
     <div class="uw-footer__wrapper">
       {% if branding_level == 'full' %}
       <div class="uw-footer__address">
@@ -24,7 +29,7 @@
         <div class="uw-footer__social">
           {% include "@components/menu/menu--social/menu--social.twig" with {
             'social_media': social_media,
-            social_media_placement: 'global-site-footer',
+            "social_media_placement": 'global-site-footer',
 
           } %}
             <div class="uw-footer__social-directory">

src/patterns/03-layouts/footer/footer.yml

@@ -64,16 +64,18 @@ footer_menu:
     in_active_trail: false
 social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
-    - text: "Twitter"
-      url: "https://twitter.com/uWaterloo"
-    - text: "YouTube"
-      url: "https://www.youtube.com/user/uwaterloo"
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Tiktok"
+      url: "https://www.tiktok.com"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: "global-site-footer"
 modifier_classes: 'black'
 territorial_text: '<p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land granted to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is coordinated within our <a href="https://uwaterloo.ca/indigenous" >Office of Indigenous Relations</a>.</p>'

src/patterns/03-layouts/header/_header.scss

@@ -12,10 +12,14 @@ $site-name-bg: var(--gray-2);
     min-height: var(--size-7);
     padding: var(--size-1);
     position: relative;
-    transition: margin 300ms;
+    transition: margin 200ms;
+    &:has(input.uw-input--checkboxform:checked) {
+      margin-bottom: var(--size-8);
+      transition: margin 200ms ease;
+    }
     &.open{
       margin-bottom: var(--size-8);
-      transition: margin 300ms;
+      transition: margin 200ms ease;
     }
     @media(min-width: $screen-md) {
       @include uw-contained-width;

src/patterns/03-layouts/site-container/site-container.yml

@@ -116,18 +116,32 @@ footer_menu:
         attributes:
           class: ''
     in_active_trail: false
-social_media:
+sf_social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
+    - text: "Instagram"
+      url: "https://www.instagram.com/uofwaterloo/"
     - text: "Twitter"
       url: "https://twitter.com/uWaterloo"
+    - text: "LinkedIn"
+      url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
     - text: "YouTube"
       url: "https://www.youtube.com/user/uwaterloo"
+social_media:
+  menu_tree:
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Tiktok"
+      url: "https://www.tiktok.com"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: "global-site-footer"
 nav_items:
   - text: 'About Psychology'

src/patterns/03-layouts/site-footer/_site-footer.scss

@@ -17,9 +17,9 @@
     }
   }
   &__title {
-    color: var(--uw-white-1);
-    //font-family: gesso-font-family(condensedbook);
-    //font-size: rem(gesso-font-size(3));
+    color: var(--uw-white);
+    font-family: var(--font-condensedbook);
+    font-size: var(--font-size-3);
     grid-column: 1 / 2;
     grid-row: 1 / 2;
     padding-bottom: var(--size-2);
@@ -29,6 +29,12 @@
       grid-row: 1 / 2;
       text-align: left;
     }
+    a{
+      @include link(
+        var(--uw-white),
+        var(--uw-white)
+      );
+    }
   }
   &__logo {
     grid-column: 1 / 2;
@@ -44,17 +50,13 @@
     grid-column: 1 / 2;
     grid-row: 3 / 4;
     margin: 0 auto;
-    padding-bottom: var(--size-4);
     width: 100%;
     @media(min-width: $screen-md) {
+      padding-bottom: var(--size-4);
       grid-column: 2 / 3;
       grid-row: 1 / 2;
       margin: 0;
     }
-
-    @media(min-width: $screen-xl) {
-      //padding:0;
-    }
   }
 
   &__content {
@@ -68,7 +70,6 @@
     color: var(--uw-white-1);
     grid-column: 1 / 2;
     grid-row: 2 / 3;
-    padding-bottom: var(--size-2);
     text-align: center;
     @media(min-width: $screen-md) {
       grid-column: 1 / 3;

src/patterns/03-layouts/site-footer/site-footer.twig

@@ -17,14 +17,11 @@
     {%  endif %}
     <div class="uw-site-footer__social-media">
       {% include "@components/menu/menu--social/menu--social.twig" with {
-        social_media_placement: 'local-site-footer',
+        "social_media_placement": 'local-site-footer',
       } %}
     </div>
     <div class="uw-site-footer__content">
       {{ body }}
-{#      {%  if is_demo_site_container %}#}
-{#        {% include "@base/typography/typography.twig"  %}#}
-{#      {% endif %}#}
     </div>
   </div>
 </div>

src/patterns/03-layouts/site-footer/site-footer.yml

 body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 site_name: "Faculty of Environment"
 logo_link: "https://uwaterloo.ca"
-logo_url: "/images/uwaterloo-logo.svg"
 logo_alt_text: "Faculty of Health logo"
 home_link : "#"
 facebook: "https://www.facebook.com/University.Waterloo"
 social_media:
   menu_tree:
-    - text: "Facebook"
-      url: "https://www.facebook.com/university.waterloo"
-    - text: "Twitter"
-      url: "https://twitter.com/uWaterloo"
-    - text: "YouTube"
-      url: "https://www.youtube.com/user/uwaterloo"
     - text: "Instagram"
       url: "https://www.instagram.com/uofwaterloo/"
+    - text: "Twitter"
+      url: "https://twitter.com/uWaterloo"
     - text: "LinkedIn"
       url: "https://www.linkedin.com/edu/school?id=10875"
-    - text: "Snapchat"
-      url: "https://www.snapchat.com/add/uofwaterloo"
+    - text: "Facebook"
+      url: "https://www.facebook.com/university.waterloo"
+    - text: "YouTube"
+      url: "https://www.youtube.com/user/uwaterloo"
 social_media_placement: "local-site-footer"

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

@@ -41,7 +41,7 @@ form {
   font-weight: 400;
 }
 .js-media-library-view {
-  background: gesso-color(form, fieldset, fieldset-background);
+  background: var(--gray-2);
   border: 1px solid #bfbfbf;
   border-radius: 2px;
   padding: var(--size-2);
@@ -165,7 +165,8 @@ form {
 // Edits of buttons in the wcms forms
 .button,
 button {
-  [aria-label="Layout Builder tools"] & {
+  [aria-label="Layout Builder tools"] &,
+  .layout-builder-discard-changes.confirmation & {
     font-size: var(--font-size-00);
     height: 2.5rem;
     line-height: var(--font-lineheight-2);

src/patterns/04-components/_index.scss

@@ -51,7 +51,6 @@
 @forward 'site-logo/site-logo';
 @forward 'site-name/site-name';
 @forward 'skiplinks/skiplinks';
-@forward 'social-media/social-media--icon/social-media--icon';
 @forward 'svg/svg';
 @forward 'tableau/tableau';
 @forward 'tabs/tabs';

src/patterns/04-components/button/_button.scss

@@ -40,7 +40,7 @@ button{
   &:hover,
   &:focus {
     background-color: var(--orange-9);
-    color: var(--uw-white);
+    color: var(--uw-white) !important;
   }
 }
 .button[data-drupal-selector="edit-cancel"]{

src/patterns/04-components/card/card-elements/_links.twig

@@ -50,7 +50,7 @@
 
       {% if links.contact %}
         {% include '@components/card/card-elements/_link.twig' with {
-          'label': 'Contact for additional informationn',
+          'label': 'Contact for additional information',
           'link_type': 'contact-for',
           'links': links.contact
         } %}

src/patterns/04-components/icon/_icon.scss

@@ -16,4 +16,16 @@
   * {
     transition: none;
   }
+  .icon--social &{
+    align-items: center;
+    display: inline-flex;
+    height: var(--size-3);
+    line-height: normal;
+    padding: 0;
+    width: var(--size-3);
+    svg {
+      height: var(--size-3);
+      width: var(--size-3);
+    }
+  }
 }

src/patterns/04-components/icon/icon--button/_icon--button.scss

@@ -19,7 +19,7 @@ $icon-font-size-small: var(--font-size-0) !default;
   height: var(--size-6);
   line-height: normal;
   padding: 0 var(--size-1);
-  transition: background 0.2s ease-in;
+  transition: all  0.2s ease-in;
 
   .uw-icon {
     align-items: center;
@@ -29,7 +29,6 @@ $icon-font-size-small: var(--font-size-0) !default;
       fill: var(--uw-black);
     }
   }
-
   &.uw-icon-link {
     color: var(--uw-black);
     text-decoration: none;
@@ -38,7 +37,6 @@ $icon-font-size-small: var(--font-size-0) !default;
     &:focus {
       background: $button-background-color-hover;
       color: var(--uw-black) !important;
-
       .uw-icon {
         svg{
           fill: var(--uw-black);
@@ -46,4 +44,49 @@ $icon-font-size-small: var(--font-size-0) !default;
       }
     }
   }
+  &.icon--social{
+    border-radius: 50%;
+    height: var(--size-4);
+    padding: 0 var(--size-03);
+    width: var(--size-4);
+    .uw-site-footer__block &{
+      background: none;
+      border-color: var(--uw-black-3);
+      .uw-icon {
+        svg{
+          fill: var(--uw-white);
+        }
+      }
+      &:hover,
+      &:focus {
+        background: var(--uw-white);
+        border-color: var(--uw-white);
+        outline: none;
+        .uw-icon {
+          svg{
+            fill: var(--uw-black-3);
+          }
+        }
+      }
+    }
+    .uw-footer__social & {
+      background: none;
+      border-color: var(--uw-black);
+      .uw-icon {
+        svg{
+          fill: var(--uw-white);
+        }
+      }
+      &:hover,
+      &:focus {
+        border-color: var(--uw-gold);
+        background: var(--uw-gold);
+        .uw-icon {
+          svg{
+            fill: var(--uw-black);
+          }
+        }
+      }
+    }
+  }
 }