nsw-design-system 3.0.2 → 3.1.0

package/src/components/button/_button.scss

@@ -65,7 +65,17 @@ $nsw-buttons: (
     border-hover: transparent,
     focus: var(--nsw-focus),
     hover: white
-  )
+  ),
+  info: (
+    text-color: var(--nsw-text-light),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-status-info),
+    background-hover: var(--nsw-status-info),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-focus),
+    hover: white
+  ),  
 );
 
 .nsw-button {
@@ -97,49 +107,6 @@ $nsw-buttons: (
     @include nsw-focus;
   }
 
-  @each $color, $property-map in $nsw-buttons {
-    &--#{"" + $color} {
-      color: map-get($property-map, text-color);
-      background-color: map-get($property-map, background);
-      border-color: map-get($property-map, border);
-
-      &:visited {
-        color: map-get($property-map, text-color);
-      }
-
-      &:focus {
-        outline-color: map-get($property-map, focus);
-      }
-
-      &:hover {
-        color: map-get($property-map, text-color-hover);
-        background-color: map-get($property-map, background-hover);
-        border-color: map-get($property-map, border-hover);
-        @if map-get($property-map, hover) == white {
-          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
-        }
-        @if map-get($property-map, hover) == black {
-          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.07), rgba(var(--nsw-black-rgb), 0.07));
-        }
-
-        .nsw-material-icons {
-          color: map-get($property-map, text-color-hover);
-        }
-      }
-
-      &:disabled,
-      &.disabled {
-        color: map-get($property-map, text-color);
-        background-color: map-get($property-map, background);
-        border-color: map-get($property-map, border);
-      }
-
-      .nsw-material-icons {
-        color: map-get($property-map, text-color);
-      }
-    }
-  }
-
   &:disabled,
   &.disabled {
     opacity: 0.4;
@@ -206,3 +173,49 @@ $nsw-buttons: (
     }
   }
 }
+
+.nsw-section--invert .nsw-button,
+.nsw-button {
+  @each $color, $property-map in $nsw-buttons {
+    &--#{"" + $color} {
+      color: map-get($property-map, text-color);
+      background-color: map-get($property-map, background);
+      border-color: map-get($property-map, border);
+
+      &:visited {
+        color: map-get($property-map, text-color);
+      }
+
+      &:focus {
+        outline-color: map-get($property-map, focus);
+      }
+
+      &:hover {
+        color: map-get($property-map, text-color-hover);
+        background-color: map-get($property-map, background-hover);
+        border-color: map-get($property-map, border-hover);
+        @if map-get($property-map, hover) == white {
+          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
+        }
+        @if map-get($property-map, hover) == black {
+          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.07), rgba(var(--nsw-black-rgb), 0.07));
+        }
+
+        .nsw-material-icons {
+          color: map-get($property-map, text-color-hover);
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        color: map-get($property-map, text-color);
+        background-color: map-get($property-map, background);
+        border-color: map-get($property-map, border);
+      }
+
+      .nsw-material-icons {
+        color: map-get($property-map, text-color);
+      }
+    }
+  }
+}

package/src/components/callout/_callout.scss

@@ -1,39 +1,9 @@
 .nsw-callout {
   @include component-spacing();
   padding: rem(16px);
-  background: var(--nsw-off-white);
-  position: relative;
-  border-left: solid 6px var(--nsw-brand-dark);
-
-  @include breakpoint('md') {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: rem(24px) rem(24px) rem(24px) rem(16px);
-  }
-
-  .nsw-material-icons {
-    font-size: rem(map-get($nsw-icon-sizes, 30));
-    color: var(--nsw-brand-dark);
-    display: block;
-
-    + .nsw-callout__content {
-      margin-top: rem(12px);
-    }
-
-    @include breakpoint('md') {
-      margin-right: rem(16px);
-      flex: 0 0 auto;
-
-      + .nsw-callout__content {
-        margin-top: 0;
-      }
-    }
-  }
-
-  &__content {
-    *+p {
-      margin-top: rem(12px);
-    }
+  border-left: solid 4px var(--nsw-brand-dark);
+      
+  .nsw-section--invert & {    
+    border-color: var(--nsw-brand-light);
   }
 }

package/src/components/card/_card.scss

@@ -32,6 +32,18 @@
     .nsw-material-icons {
       color: var(--nsw-text-light);
     }
+
+    .nsw-section--invert & {
+      color: var(--nsw-text-dark);
+
+      .nsw-card__content {
+        background-color: var(--nsw-brand-light);
+
+        &::after {
+          background-color: transparent;
+        }
+      }
+    }
   }
 
   &:focus-within {
@@ -56,6 +68,10 @@
     @include breakpoint('lg') {
       padding: rem(32px) rem(32px) rem(94px) rem(32px);
     }
+      
+    .nsw-section--invert & {    
+      border-color: transparent;
+    }
   }
 
   &__title {
@@ -76,6 +92,10 @@
         background-color: transparent;
         outline: none;
       }
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-text-dark);
+      }
     }
   }
 
@@ -111,6 +131,10 @@
       bottom: rem(32px);
       left: rem(32px);
     }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-brand-dark);
+    }
   }
 
   &__image {
@@ -136,6 +160,14 @@
   }
 
   &--light {
+    &:hover {      
+      .nsw-section--invert & {  
+        .nsw-card__content {  
+          background-color: var(--nsw-white);
+        }
+      }
+    }
+
     .nsw-card__content {
       background-color: var(--nsw-brand-light);
       border-color: transparent;
@@ -171,6 +203,16 @@
       .nsw-material-icons {
         color: var(--nsw-brand-dark);
       }
+
+      .nsw-section--invert & {  
+        .nsw-card__content {  
+          background-color: var(--nsw-white);
+        }
+
+        .nsw-material-icons {
+          color: var(--nsw-brand-dark);
+        }
+      }
     }
 
     .nsw-card__content {
@@ -181,6 +223,10 @@
       &::after {
         display: none;
       }
+      
+      .nsw-section--invert & {    
+        border-color: var(--nsw-white);
+      }
     }
 
     .nsw-card__image {
@@ -195,6 +241,10 @@
 
     .nsw-material-icons {
       color: var(--nsw-text-light);
+
+      .nsw-section--invert & {  
+        color: var(--nsw-text-light);
+      }
     }
   }
 
@@ -208,7 +258,7 @@
     .nsw-card__content {
       &::before {
         content: '';
-        height: 6px;
+        height: 4px;
       }
 
       &::after {
@@ -217,7 +267,7 @@
         top: 0;
         left: 0;
         right: 0;
-        height: 6px;
+        height: 4px;
         background-color: var(--nsw-brand-accent);
         transition: background $nsw-transition-duration;
       }
@@ -227,10 +277,10 @@
       &::after {
         content: '';
         position: absolute;
-        bottom: -6px;
+        bottom: -4px;
         left: 0;
         right: 0;
-        height: 6px;
+        height: 4px;
         background-color: var(--nsw-brand-accent);
         transition: background $nsw-transition-duration;
       }
@@ -269,8 +319,8 @@
           top: 0;
           bottom: 0;
           left: auto;
-          right: -6px;
-          width: 6px;
+          right: -4px;
+          width: 4px;
           height: auto;
         }
       }

package/src/components/content-block/_content-block.scss

@@ -22,6 +22,10 @@
         background-color: var(--nsw-text-dark);
         top: rem(18px);
         left: 0;
+      
+        .nsw-section--invert & {    
+          background-color: var(--nsw-text-light);
+        }
       }
     }
   }

package/src/components/filters/_filters.scss

@@ -1,4 +1,4 @@
-.nsw-filters {  
+.nsw-filters {
   .nsw-layout__sidebar & {
     margin: rem(-8px) 0 rem(-16px) 0;
 
@@ -31,6 +31,10 @@
       display: flex;
       align-items: center;
       text-decoration: none;
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-white);
+      }
 
       span {
         text-decoration: underline;
@@ -44,12 +48,21 @@
       padding: rem(1px);
       border: 2px solid var(--nsw-brand-dark);
       text-decoration: none;
+      
+      .nsw-section--invert & {    
+        border-color: var(--nsw-white);
+      }
     }
 
     &.active {
       .nsw-material-icons {
         background-color: var(--nsw-brand-dark);
-        color: var(--nsw-text-light);        
+        color: var(--nsw-text-light);
+      
+        .nsw-section--invert & {    
+          background-color: var(--nsw-white);
+          color: var(--nsw-brand-dark);
+        }
       }
     }
   }
@@ -67,6 +80,10 @@
     @include breakpoint('lg') {
       display: none;
     }
+
+    .nsw-section--invert & {
+      background-color: var(--nsw-brand-dark);
+    }
   }
 
   &__wrapper {
@@ -81,6 +98,10 @@
       overflow-y: auto;
       background-color: var(--nsw-white);
       padding: rem(73px) rem(16px) rem(101px) rem(16px);
+      
+      .nsw-section--invert & {    
+        background-color: var(--nsw-brand-dark);
+      }
 
       @include breakpoint('lg') {
         display: block;
@@ -88,6 +109,10 @@
         background-color: transparent;
         padding: 0;
         overflow-y: visible;
+        
+        .nsw-section--invert & {    
+          background-color: transparent;
+        }
       }
     }
 
@@ -122,14 +147,23 @@
       background-color: var(--nsw-white);
       padding: rem(24px) rem(16px);
 
+      .nsw-section--invert & {
+        background-color: var(--nsw-brand-dark);
+      }
+
       @include breakpoint('lg') {
         position: static;
         padding: rem(32px) 0;
+        background-color: transparent;
+
+        .nsw-section--invert & {
+          background-color: transparent;
+        }
       }
     }
   }
 
-  &__cancel {   
+  &__cancel {
     padding-bottom: rem(32px);
 
     .nsw-filters--fixed & {
@@ -139,6 +173,7 @@
       @include breakpoint('lg') {
         padding-top: 0;
         border: 0;
+        background-color: transparent;
       }
     }
 
@@ -149,13 +184,21 @@
 
     button {
       @include link-button;
+
+      .nsw-section--invert & {
+        @include link-light;
+      }
     }
   }
 
   &__more,
-  &__less { 
+  &__less {
     @include link-button;
     margin-top: rem(24px);
+
+    .nsw-section--invert & {
+      @include link-light;
+    }
   }
 
   .hidden {
@@ -165,4 +208,8 @@
 
 .filters-open {
   overflow: hidden;
+
+  @include breakpoint('lg') {
+    overflow: unset;
+  }
 }

package/src/components/header/_header.scss

@@ -102,12 +102,20 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      margin: rem(12px) rem(72px) rem(12px) 0;
+      margin: rem(20px) rem(72px) rem(20px) 0;
 
       &:focus-within {
         @include nsw-focus;
       }
     }
+
+    .nsw-header__rectangular-logo {
+      @include breakpoint('lg') {
+        height: rem(60px);
+        margin-top: rem(8px);
+        margin-bottom: rem(8px);
+      }
+    }
   }
 
   &__waratah {
@@ -126,6 +134,14 @@
       @include breakpoint($nsw-desktop-breakpoint) {
         height: rem(76px);
       }
+
+      &.nsw-header__waratah-gov {
+        height: rem(55px);
+
+        @include breakpoint($nsw-desktop-breakpoint) {
+          height: rem(76px);
+        }
+      }
     }
 
     a {
@@ -155,19 +171,35 @@
         margin-left: rem(24px);
 
         @include breakpoint($nsw-desktop-breakpoint) {
-          margin-left: rem(48px);
+          margin-left: rem(40px);
         }
       }      
     }
   }
 
+  &__waratah-gov {
+    margin-bottom: rem(-7px);
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      margin-bottom: 0;
+    }
+
+    .hide {
+      display: none;
+
+      @include breakpoint($nsw-desktop-breakpoint) {
+        display: inline;
+      }
+    }
+  }
+
   &__name {
     padding: rem(12px) 0;
     color: var(--nsw-brand-dark);
 
     @include breakpoint($nsw-desktop-breakpoint) {
       padding: 0;
-      margin-left: rem(32px);
+      margin-left: rem(40px);
     }
   }
 
@@ -178,6 +210,10 @@
     display: flex;
     align-items: center;
 
+    @include breakpoint('lg') {
+      line-height: rem(28px);
+    }
+
     .nsw-tag {
       margin-left: rem(24px);
     }
@@ -193,7 +229,6 @@
     justify-content: center;
 
     @include breakpoint($nsw-desktop-breakpoint) {
-      padding-left: rem(16px);
       justify-content: flex-start;
     }
 

package/src/components/hero-banner/_hero-banner.scss

@@ -92,7 +92,7 @@
 
   &__list {
     @include z-index;
-    border-left: solid 4px var(--nsw-brand-accent);
+    border-left: solid 2px var(--nsw-brand-accent);
     padding-left: rem(16px);
     position: relative;
 
@@ -145,34 +145,33 @@
     object-position: center;
   }
 
-  &__graphic {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
+  &__lines {
+    display: none;
+    background-color: var(--nsw-brand-light);
+    position: relative;
 
-    &--transparent {
-      opacity: 0.2;
+    @include breakpoint('md') {
+      display: block;
+      width: 100%;
     }
-  }
 
-  &__bg {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: var(--nsw-brand-dark);
-    opacity: 0.2;
-    /*
-    background-image: url("data:image/svg+xml,%3Csvg width='206' height='220' viewBox='0 0 206 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M206 220V36.232L32.136 220H206zm-189.5 0H0L206 2.143v17.46L16.5 220z'/%3E%3C/svg%3E");
-    background-size: rem(206px);
-    background-position: right bottom;
-    background-repeat: no-repeat;
-    */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: rem(-16px);
+      width: rem(32px);
+      background-color: var(--nsw-brand-supplementary);
+    }
   }
 
   &--light {
     background-color: var(--nsw-brand-light);
+
+    .nsw-hero-banner__lines {
+      background-color: var(--nsw-brand-dark);
+    }
   }
 
   &--dark {
@@ -190,10 +189,45 @@
       }
     }
 
-    /*
-    .nsw-hero-banner__bg {
-      background-image: url("data:image/svg+xml,%3Csvg width='206' height='220' viewBox='0 0 206 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M206 220V36.232L32.136 220H206zm-189.5 0H0L206 2.143v17.46L16.5 220z'/%3E%3C/svg%3E");
+    .nsw-hero-banner__list {
+      border-color: var(--nsw-brand-light);
+    }
+  }
+
+  &--lines {
+    border-bottom: rem(32px) solid var(--nsw-brand-light);
+
+    @include breakpoint('md') {
+      border: 0;
+    }
+
+    &.nsw-hero-banner--light {
+      border-color: var(--nsw-brand-dark);
+    }
+
+    &::after {
+      visibility: hidden;
+
+      @include breakpoint('md') {
+        visibility: visible;
+      }
+    }
+
+    .nsw-hero-banner__container {
+      border-bottom: rem(16px) solid var(--nsw-brand-supplementary);
+
+      @include breakpoint('md') {
+        border: 0;
+      }
+    }
+
+    .nsw-hero-banner__box {
+      width: 25%;
+
+      @include breakpoint('xl') {
+        width: 50%;
+        padding-left: calc(var(--nsw-container-width)/4+#{rem($grid-gutters)}*2);
+      }
     }
-    */
   }
 }

package/src/components/hero-search/_hero-search.scss

@@ -16,7 +16,7 @@
   &__wrapper {
     padding: rem(32px) rem(16px);
     background-color: var(--nsw-off-white);
-    border-bottom: solid 6px var(--nsw-brand-accent);
+    border-bottom: solid 4px var(--nsw-brand-accent);
 
     @include breakpoint('md') {
       border-top-left-radius: var(--nsw-border-radius);

package/src/components/in-page-alert/_in-page-alert.scss

@@ -26,7 +26,7 @@ $nsw-in-page-alerts: (
   @include component-spacing();
   padding: rem(16px);
   position: relative;
-  border-left: solid 6px var(--nsw-brand-accent);
+  border-left: solid 4px var(--nsw-brand-accent);
   background-color: var(--nsw-grey-04);
   display: flex;
   flex-direction: row;
@@ -35,10 +35,19 @@ $nsw-in-page-alerts: (
   @include breakpoint('md') {
     padding: rem(24px) rem(24px) rem(24px) rem(16px);
   }
+      
+  .nsw-section--invert & {    
+    color: var(--nsw-text-dark);
+
+    a {
+      @include link-dark;
+    }
+  }
 
   &__icon {
-    font-size: rem(map-get($nsw-icon-sizes, 36));
+    font-size: rem(map-get($nsw-icon-sizes, 30));
     margin-right: rem(16px);
+    margin-top: rem(-2px);
   }
 
   @each $color, $variant in $nsw-in-page-alerts {
@@ -51,4 +60,15 @@ $nsw-in-page-alerts: (
       }
     }
   }
+
+  &--compact {
+    padding: rem(8px);
+    border: 0;
+
+    .nsw-in-page-alert__icon {
+      font-size: rem(map-get($nsw-icon-sizes, 20));
+      margin-right: rem(8px);
+      margin-top: 0;
+    }
+  }
 }