nsw-design-system 3.0.4 → 3.2.0

package/src/components/tabs/_tabs.scss

@@ -54,6 +54,14 @@
           height: 0;
           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

@@ -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 {

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/_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.js

@@ -1,6 +1,7 @@
 import SiteSearch from './components/header/header'
 import Navigation from './components/main-nav/main-nav'
 import Accordion from './components/accordion/accordion'
+import Dialog from './components/dialog/dialog'
 import Filters from './components/filters/filters'
 import Tabs from './components/tabs/tabs'
 import GlobalAlert from './components/global-alert/global-alert'
@@ -30,6 +31,7 @@ function initSite() {
   const openSearchButton = document.querySelectorAll('.js-open-search')
   const closeSearchButton = document.querySelectorAll('.js-close-search')
   const accordions = document.querySelectorAll('.js-accordion')
+  const dialogs = document.querySelectorAll('.js-dialog')
   const filters = document.querySelectorAll('.js-filters')
   const tabs = document.querySelectorAll('.js-tabs')
   const globalAlert = document.querySelectorAll('.js-global-alert')
@@ -49,6 +51,10 @@ function initSite() {
     new Accordion(element).init()
   })
 
+  dialogs.forEach((element) => {
+    new Dialog(element).init()
+  })
+
   if (filters) {
     filters.forEach((element) => {
       new Filters(element).init()

package/src/main.scss

@@ -8,6 +8,7 @@
 @import 'core/all';
 
 @import 'components/accordion/accordion';
+@import 'components/dialog/dialog';
 @import 'components/breadcrumbs/breadcrumbs';
 @import 'components/button/button';
 @import 'components/callout/callout';
@@ -31,6 +32,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';