nsw-design-system 3.0.2 → 3.1.0

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

@@ -1,7 +1,7 @@
 .nsw-in-page-nav {
   @include component-spacing();
   padding: rem(16px);
-  border-left: solid 4px var(--nsw-brand-accent);
+  border-left: solid 2px var(--nsw-brand-accent);
 
   &__title {
     @include font-size(md);

package/src/components/link-list/_link-list.scss

@@ -50,6 +50,10 @@
     .nsw-material-icons {
       text-decoration: none;
     }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-text-light);
+    }
   }
 
   .nsw-material-icons {

package/src/components/media/_media.scss

@@ -2,6 +2,10 @@
   width: 100%;
   margin: rem(16px) auto;
 
+  .nsw-section--invert & {    
+    color: var(--nsw-text-dark);
+  }
+
   @include breakpoint('md') {
     margin-top: rem(32px);
     margin-bottom: rem(32px);
@@ -107,6 +111,10 @@
       padding-left: 0;
       padding-right: 0;
       padding-bottom: 0;
+
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+      }
     }
   }
 }

package/src/components/pagination/_pagination.scss

@@ -51,6 +51,10 @@
         height: 2px;
         background-color: var(--nsw-brand-accent);        
       }
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+      }
     }    
   }
 }

package/src/components/side-nav/_side-nav.scss

@@ -53,12 +53,24 @@
 
     &.current {
       background-color: var(--nsw-off-white);
+      
+      .nsw-section--invert & {    
+        background-color: var(--nsw-text-hover-light);
+      }
+    }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-text-light);
     }
   }
 
   &__header {
     border-bottom: solid 2px var(--nsw-brand-dark);
 
+    .nsw-section--invert & {    
+      border-color: var(--nsw-brand-light);
+    }
+
     a {
       font-weight: var(--nsw-font-bold);
       padding: rem(8px) 0;

package/src/components/steps/_steps.scss

@@ -0,0 +1,315 @@
+.nsw-steps {
+  @include component-spacing();
+  counter-reset: step;
+
+  &__item {
+    position: relative;
+
+    &:last-child {
+      .nsw-steps__content {
+        padding-bottom: 0;
+
+        &::before {
+          bottom: 0;
+        }
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: rem(1px);
+      left: 0;
+      width: rem(32px);
+      height: rem(32px);
+      border: rem(4px) solid var(--nsw-brand-accent);
+      border-radius: 100%;
+
+      @include breakpoint('lg') { 
+        width: rem(48px);
+        height: rem(48px);
+        top: rem(-4px);
+      }
+    }
+
+    &::after {
+      @include font-size('md');
+      counter-increment: step;
+      content: counter(step);
+      position: absolute;
+      top: rem(1px);
+      left: 0;
+      width: rem(32px);
+      height: rem(32px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--nsw-brand-accent);
+      font-weight: var(--nsw-font-bold);
+      visibility: hidden;
+
+      @include breakpoint('lg') { 
+        width: rem(48px);
+        height: rem(48px);
+        top: rem(-4px);
+      }    
+    }
+
+    &--fill {
+      &::before {
+        background-color: var(--nsw-brand-accent);
+      }
+      
+      &::after {
+        color: var(--nsw-text-light);
+      }
+
+      .nsw-steps--dark & {
+        &::before {
+          background-color: var(--nsw-brand-dark);
+        }   
+      }
+
+      .nsw-steps--light & {
+        &::before {
+          background-color: var(--nsw-brand-light);
+        }
+      }
+
+      .nsw-steps--supplementary & {
+        &::before {
+          background-color: var(--nsw-brand-supplementary);
+        }
+      }
+    }
+  }
+
+  &__content {
+    position: relative;
+    padding: 0 0 rem(24px) rem(48px);
+
+    @include breakpoint('lg') { 
+      padding: 0 0 rem(32px) rem(72px);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: rem(33px);
+      bottom: rem(-1px);
+      left: rem(14px);
+      width: rem(4px);
+      background-color: var(--nsw-brand-accent);
+
+      @include breakpoint('lg') { 
+        top: rem(44px);
+        left: rem(22px);
+        bottom: rem(4px);
+      }
+    }
+  }
+
+  &--dark {
+    .nsw-steps__item {
+      &::before {
+        border-color: var(--nsw-brand-dark);
+      }
+
+      &::after {
+        color: var(--nsw-brand-dark);
+      }
+
+      &--fill {
+        &::after {
+          color: var(--nsw-text-light);
+        }
+      }
+    }
+
+    .nsw-steps__content {
+      &::before {
+        background-color: var(--nsw-brand-dark);
+      }
+    }
+  }
+
+  &--light {
+    .nsw-steps__item {
+      &::before {
+        border-color: var(--nsw-brand-light);
+      }
+
+      &::after {
+        color: var(--nsw-brand-light);
+      }
+
+      &--fill {
+        &::after {
+          color: var(--nsw-text-dark);
+        }
+      }
+    }
+
+    .nsw-steps__content {
+      &::before {
+        background-color: var(--nsw-brand-light);
+      }
+    }
+  }
+
+  &--supplementary {
+    .nsw-steps__item {
+      &::before {
+        border-color: var(--nsw-brand-supplementary);
+      }
+
+      &::after {
+        color: var(--nsw-brand-supplementary);
+      }
+
+      &--fill {
+        &::after {
+          color: var(--nsw-text-light);
+        }
+      }
+    }
+
+    .nsw-steps__content {
+      &::before {
+        background-color: var(--nsw-brand-supplementary);
+      }
+    }
+  }
+
+  &--counters {
+    .nsw-steps__item {
+      &::after {
+        visibility: visible;
+      }
+    }
+  }
+
+  &--fill {
+    .nsw-steps__item {
+      &::before {
+        background-color: var(--nsw-brand-accent);
+      }
+      
+      &::after {
+        color: var(--nsw-text-light);
+      }
+    }
+
+    &.nsw-steps--dark {
+      .nsw-steps__item {
+        &::before {
+          background-color: var(--nsw-brand-dark);
+        }
+      }      
+    }
+
+    &.nsw-steps--light {
+      .nsw-steps__item {
+        &::before {
+          background-color: var(--nsw-brand-light);
+        }
+      
+        &::after {
+          color: var(--nsw-text-dark);
+        }
+      }      
+    }
+
+    &.nsw-steps--supplementary {
+      .nsw-steps__item {
+        &::before {
+          background-color: var(--nsw-brand-supplementary);
+        }
+      }      
+    }
+  }
+
+  &--medium {
+    .nsw-steps__item {
+      &::before {
+        top: rem(-2px);
+
+        @include breakpoint('lg') { 
+          width: rem(40px);
+          height: rem(40px);
+          top: rem(-4px);
+        }
+      }
+
+      &::after {
+        top: rem(-2px);
+
+        @include breakpoint('lg') { 
+          font-size: var(--nsw-font-size-md-mobile);
+          width: rem(40px);
+          height: rem(40px);
+          top: rem(-4px);
+        }    
+      }
+    }
+
+    .nsw-steps__content {
+      @include breakpoint('lg') { 
+        padding-left: rem(64px);
+      }
+
+      &::before {
+        top: rem(30px);
+        bottom: rem(2px);
+
+        @include breakpoint('lg') { 
+          top: rem(36px);
+          bottom: rem(4px);
+          left: rem(18px);
+        }
+      }
+    }
+  }
+
+  &--small {
+    .nsw-steps__item {
+      &::before {
+        top: rem(-4px);
+
+        @include breakpoint('lg') { 
+          width: rem(32px);
+          height: rem(32px);
+          top: rem(-2px);
+        }
+      }
+
+      &::after {
+        top: rem(-4px);
+
+        @include breakpoint('lg') { 
+          font-size: var(--nsw-font-size-md-mobile);
+          width: rem(32px);
+          height: rem(32px);
+          top: rem(-2px);
+        }    
+      }
+    }
+
+    .nsw-steps__content {
+      @include breakpoint('lg') { 
+        padding-left: rem(56px);
+      }
+
+      &::before {
+        top: rem(28px);
+        bottom: rem(4px);
+
+        @include breakpoint('lg') { 
+          top: rem(30px);
+          bottom: rem(2px);
+          left: rem(14px);
+        }
+      }
+    }
+  }
+}

package/src/components/table/_table.scss

@@ -35,6 +35,10 @@ $nsw-vertical-align: (
 
     tbody tr:nth-of-type(even) {
       background-color: var(--nsw-off-white);
+      
+      .nsw-section--invert & {    
+        background-color: var(--nsw-text-hover-light);
+      }
     }
   }
 

package/src/components/tabs/_tabs.scss

@@ -52,8 +52,16 @@
           left: 0;
           width: 100%;
           height: 0;
-          border-bottom: solid 4px var(--nsw-brand-accent);
+          border-bottom: solid 2px var(--nsw-brand-accent);
         }
+      
+        .nsw-section--invert & {    
+          color: var(--nsw-text-light);
+        }
+      }
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
       }
     }
   }
@@ -66,12 +74,21 @@
 
     &:focus {
       @include nsw-focus;
+
+      .nsw-section--invert & {    
+        outline-color: var(--nsw-white);
+      }
     }
 
     &--flush {
       padding: 0;
     }
 
+    &--side-flush {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
     &--no-border {
       border-bottom: 0;
     }

package/src/components/tag/_tag.scss

@@ -20,28 +20,52 @@
     outline-width: 3px;
   }
 
+  .nsw-section--invert & {    
+    @include link-light;
+    border-color: var(--nsw-text-light);
+  }
+
   &--checkbox {
     padding: 0;
     border: 0;
     border-radius: 0;
     position: relative;
 
+    &:hover {
+      .nsw-section--invert & {    
+        background-color: transparent;
+      }
+    }
+
     input {
       position: absolute;
       opacity: 0;
 
       &:hover + label {
         @include nsw-hover;
+        
+        .nsw-section--invert & {    
+          background-color: var(--nsw-text-hover-light);
+        }
       }
 
       &:focus + label {
         @include nsw-focus;
         outline-offset: 0;
+
+        .nsw-section--invert & {    
+          outline-color: var(--nsw-white);
+        }
       }
 
       &:checked + label {
         background-color: var(--nsw-brand-dark);
         color: var(--nsw-text-light);
+
+        .nsw-section--invert & {    
+          background-color: var(--nsw-white);
+          color: var(--nsw-text-dark);
+        }
       }
     }
 
@@ -50,6 +74,10 @@
       border: solid 1px var(--nsw-brand-dark);
       border-radius: rem(24px);
       display: inline-block;
+
+      .nsw-section--invert & {    
+        border-color: var(--nsw-text-light);
+      }
     }
   }
 

package/src/core/iconography/_icon.scss

@@ -80,4 +80,8 @@ $nsw-icon-angles: (90, 180, 270);
     justify-content: center;
     align-items: center;
   }
+
+  .nsw-section--invert & {    
+    @include link-light;
+  }
 }

package/src/core/section/_section.scss

@@ -92,4 +92,8 @@ $nsw-sections: (
       color: map-get($variant, color);
     }
   }
+
+  &--invert {
+    color: var(--nsw-text-light);
+  }
 }

package/src/core/typography/_typography.scss

@@ -62,7 +62,7 @@ blockquote {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
-  border-left: solid 6px var(--nsw-brand-accent);
+  border-left: solid 2px var(--nsw-brand-accent);
   padding: rem(20px) rem(24px);
 
   @include breakpoint('md') {
@@ -90,6 +90,10 @@ table {
     text-align: left;
     vertical-align: baseline;
     border-bottom: solid 1px var(--nsw-grey-01);
+
+    .nsw-section--invert & {    
+      border-color: var(--nsw-white);
+    }
   }
 
   th,
@@ -100,6 +104,10 @@ table {
 
   thead {
     border-bottom: solid 2px var(--nsw-grey-01);
+    
+    .nsw-section--invert & {    
+      border-color: var(--nsw-white);
+    }
   }
 }
 
@@ -196,6 +204,10 @@ h6,
 
 a {
   @include link;
+
+  .nsw-section--invert & {    
+    @include link-light();
+  }
 }
 
 .nsw-link {
@@ -264,3 +276,61 @@ a {
     padding-top: rem($grid-gutters*2);
   }
 }
+
+:root {
+  --nsw-font-size-xxs: var(--nsw-font-size-xxs-mobile);
+  --nsw-font-height-xxs: var(--nsw-font-height-xxs-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-xxs: var(--nsw-font-size-xxs-desktop);
+    --nsw-font-height-xxs: var(--nsw-font-height-xxs-desktop);
+  }
+
+  --nsw-font-size-xs: var(--nsw-font-size-xs-mobile);
+  --nsw-font-height-xs: var(--nsw-font-height-xs-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-xs: var(--nsw-font-size-xs-desktop);
+    --nsw-font-height-xs: var(--nsw-font-height-xs-desktop);
+  }
+  
+  --nsw-font-size-sm: var(--nsw-font-size-sm-mobile);
+  --nsw-font-height-sm: var(--nsw-font-height-sm-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-sm: var(--nsw-font-size-sm-desktop);
+    --nsw-font-height-sm: var(--nsw-font-height-sm-desktop);
+  }
+
+  --nsw-font-size-md: var(--nsw-font-size-md-mobile);
+  --nsw-font-height-md: var(--nsw-font-height-md-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-md: var(--nsw-font-size-md-desktop);
+    --nsw-font-height-md: var(--nsw-font-height-md-desktop);
+  }
+
+  --nsw-font-size-lg: var(--nsw-font-size-lg-mobile);
+  --nsw-font-height-lg: var(--nsw-font-height-lg-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-lg: var(--nsw-font-size-lg-desktop);
+    --nsw-font-height-lg: var(--nsw-font-height-lg-desktop);
+  }
+
+  --nsw-font-size-xl: var(--nsw-font-size-xl-mobile);
+  --nsw-font-height-xl: var(--nsw-font-height-xl-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-xl: var(--nsw-font-size-xl-desktop);
+    --nsw-font-height-xl: var(--nsw-font-height-xl-desktop);
+  }
+
+  --nsw-font-size-xxl: var(--nsw-font-size-xxl-mobile);
+  --nsw-font-height-xxl: var(--nsw-font-height-xxl-mobile);
+
+  @include breakpoint($nsw-font-size-reponsive-breakpoint) { 
+    --nsw-font-size-xxl: var(--nsw-font-size-xxl-desktop);
+    --nsw-font-height-xxl: var(--nsw-font-height-xxl-desktop);
+  }
+}

package/src/global/scss/base/_mixins.scss

@@ -163,7 +163,7 @@
 // Font-size mixin - returns the font size for mobile and desktop based of the values in $font-sizes map
 @mixin font-size($size) {
   @if $size != 'xxs' and $size != 'xs' and $size != 'sm' and $size != 'md' and $size != 'lg' and $size != 'xl' and $size != 'xxl' {
-    @error 'NSW-DS font-size mixin allows the following values for $sizes: xs, sm, md, lg, xl, xxl, xxxl. You have used "#{$size}"';
+    @error 'NSW-DS font-size mixin allows the following values for $sizes: xxs, xs, sm, md, lg, xl, xxl. You have used "#{$size}"';
   }
 
   @if $size {

package/src/global/scss/helpers/_all.scss

@@ -1,4 +1,6 @@
+@import 'border';
 @import 'colour';
 @import 'list';
+@import 'shadow';
 @import 'text';
 @import 'visibility';

package/src/global/scss/helpers/_border.scss

@@ -0,0 +1,20 @@
+$nsw-helper-border-sizes: (2, 4, 6);
+$nsw-helper-border-sides: ('left', 'right', 'top', 'bottom');
+
+/* stylelint-disable declaration-no-important */
+
+.nsw-border {
+  @each $size in $nsw-helper-border-sizes {
+    &--#{"" + $size} {
+      border: #{$size+'px'} solid var(--nsw-brand-accent) !important;
+    }
+
+    @each $side in $nsw-helper-border-sides {
+      &--#{"" + $side}-#{"" + $size} {
+        border-#{"" + $side}: #{$size+'px'} solid var(--nsw-brand-accent) !important;
+      }
+    }
+  }
+}
+
+/* stylelint-enable declaration-no-important */

package/src/global/scss/helpers/_shadow.scss

@@ -0,0 +1,3 @@
+.nsw-box-shadow { 
+  box-shadow: var(--nsw-box-shadow);
+}

package/src/global/scss/settings/_palette.scss

@@ -32,7 +32,7 @@
   --nsw-palette-red-01: #630019;
   --nsw-palette-red-02: #d7153a;
   --nsw-palette-red-03: #ffb8c1;
-  --nsw-palette-red-04: #f3e2e6;
+  --nsw-palette-red-04: #ffe6ea;
 
   --nsw-palette-orange-01: #941b00;
   --nsw-palette-orange-02: #f3631b;

package/src/global/scss/settings/_theme.scss

@@ -77,6 +77,9 @@
   /* Borders */
   --nsw-border-radius: #{rem(4px)};
 
+  /* Shadows */
+  --nsw-box-shadow: 0 #{rem(4px)} #{rem(12px)} 0 rgba(var(--nsw-black-rgb), 0.15);
+
   /* Maximum width of container */
   --nsw-container-width: #{rem(1200px)};
 }

package/src/main.scss

@@ -31,6 +31,7 @@
 @import 'components/progress-indicator/progress-indicator';
 @import 'components/results-bar/results-bar';
 @import 'components/side-nav/side-nav';
+@import 'components/steps/steps';
 @import 'components/table/table';
 @import 'components/tabs/tabs';
 @import 'components/tag/tag';