nsw-design-system 3.2.3 → 3.2.5

package/dist/js/main.js

@@ -458,6 +458,7 @@
         }
 
         submenu.classList.remove('active');
+        submenu.closest('ul').parentElement.classList.remove('no-scroll');
         this.openSubNavElements.pop();
       }
     }, {
@@ -478,6 +479,8 @@
           submenu.addEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false);
         }
 
+        submenu.closest('ul').parentElement.scrollTop = 0;
+        submenu.closest('ul').parentElement.classList.add('no-scroll');
         submenu.classList.add('active');
       }
     }, {
@@ -971,7 +974,11 @@
           this.selectedTab = clickedTab;
 
           if (!clickedTab.classList.contains('js-tabs-fixed')) {
-            this.selectedTab.scrollIntoView();
+            clickedTab.scrollIntoView({
+              behavior: 'smooth',
+              block: 'nearest',
+              inline: 'nearest'
+            });
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.2.3",
+  "version": "3.2.5",
   "description": "Design system for Digital NSW",
   "main": "dist/main.js",
   "style": "dist/main.css",

package/src/components/accordion/_accordion.scss

@@ -41,7 +41,7 @@
 
     button {
       @include font-size('sm');
-      color: var(--nsw-brand-dark);
+      color: var(--nsw-text-link);
       text-decoration: underline;
       text-decoration-skip-ink: auto;
       font-weight: var(--nsw-font-bold);
@@ -50,8 +50,8 @@
       background: none;
 
       &:hover:enabled {
-        @include nsw-hover;
-        outline: 2px solid var(--nsw-text-hover);
+        @include nsw-link-hover;
+        outline: 2px solid var(--nsw-text-link-hover);
 
         .nsw-section--invert & {    
           background-color: var(--nsw-text-hover-light);

package/src/components/form/_form.scss

@@ -250,6 +250,7 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
       font-weight: var(--nsw-font-normal);
 
       &:hover {
+        @include nsw-hover;
         outline-width: 0;
       }
 

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

@@ -36,6 +36,7 @@
     text-decoration: none;
 
     &:hover {
+      @include nsw-hover;
       outline-width: 0;
     }
 

package/src/components/list-item/_list-item.scss

@@ -64,7 +64,7 @@
 
     &:hover {
       .nsw-list-item__title a {
-        @include nsw-hover;
+        @include nsw-link-hover;
       }
     }
 

package/src/components/main-nav/_main-nav.scss

@@ -21,6 +21,14 @@
     visibility: visible;
   }
 
+  &.no-scroll {
+    overflow-y: hidden;
+  
+    @include breakpoint($nsw-desktop-breakpoint) {
+      overflow-y: visible;
+    }
+  }
+
   &.closing {
     transform: translateX(-100%);
   }
@@ -115,6 +123,10 @@
       justify-content: space-between;
       flex-wrap: nowrap;
 
+      &:hover {
+        @include nsw-hover;
+      }
+
       .nsw-material-icons {
         color: var(--nsw-brand-dark);
         margin-right: rem(-8px);
@@ -200,6 +212,14 @@
       visibility: visible;
     }
 
+    &.no-scroll {
+      overflow-y: hidden;
+    
+      @include breakpoint($nsw-desktop-breakpoint) {
+        overflow-y: visible;
+      }
+    }
+
     @include breakpoint($nsw-desktop-breakpoint) {
       @include container;
       padding: rem(48) rem(40);

package/src/components/main-nav/main-nav.js

@@ -198,6 +198,7 @@ class Navigation {
       submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
     }
     submenu.classList.remove('active')
+    submenu.closest('ul').parentElement.classList.remove('no-scroll')
     this.openSubNavElements.pop()
   }
 
@@ -213,6 +214,8 @@ class Navigation {
       submenu.addEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
       submenu.addEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false)
     }
+    submenu.closest('ul').parentElement.scrollTop = 0
+    submenu.closest('ul').parentElement.classList.add('no-scroll')
     submenu.classList.add('active')
   }
 

package/src/components/pagination/_pagination.scss

@@ -25,8 +25,10 @@
     padding: rem(4px);
     min-width: rem(30px);
     border-radius: var(--nsw-border-radius);
+    color: var(--nsw-brand-dark);
 
     &:hover {
+      @include nsw-hover;
       outline-width: 0;
     }
 

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

@@ -44,6 +44,7 @@
     padding: rem(16px);
 
     &:hover {
+      @include nsw-hover;
       outline-width: 0;
     }
 

package/src/components/tabs/_tabs.scss

@@ -34,6 +34,7 @@
       height: 100%;
 
       &:hover {
+        @include nsw-hover;
         outline-width: 0;
       }
 

package/src/components/tabs/tabs.js

@@ -95,7 +95,11 @@ class Tabs {
       this.tabPanel[selectedTabIndex].hidden = true
       this.selectedTab = clickedTab
       if (!clickedTab.classList.contains('js-tabs-fixed')) {
-        this.selectedTab.scrollIntoView()
+        clickedTab.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
       }
     }
   }

package/src/components/tag/_tag.scss

@@ -13,6 +13,7 @@
   }
   
   &:hover {
+    @include nsw-hover;
     outline-width: 0;
   }
 

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

@@ -34,6 +34,11 @@
   background-color: var(--nsw-text-hover);
 }
 
+// Default text link hover state
+@mixin nsw-link-hover {
+  background-color: var(--nsw-text-link-hover);
+}
+
 // A block to click around the link
 @mixin pseudo-clickable-block {
   &::after {
@@ -98,12 +103,12 @@
 //Links
 @mixin link() {
   font-weight: var(--nsw-font-bold);
-  color: var(--nsw-brand-dark);
+  color: var(--nsw-text-link);
   text-decoration: underline;
 
   &:hover {
-    @include nsw-hover;
-    outline: 2px solid var(--nsw-text-hover);
+    @include nsw-link-hover;
+    outline: 2px solid var(--nsw-text-link-hover);
   }
 
   &:focus {
@@ -116,11 +121,11 @@
 }
 
 @mixin link-dark() {
-  color: var(--nsw-brand-dark);
+  color: var(--nsw-text-link);
 
   &:hover {
-    background-color: var(--nsw-text-hover);
-    outline-color: var(--nsw-text-hover);
+    background-color: var(--nsw-text-link-hover);
+    outline-color: var(--nsw-text-link-hover);
   }
 
   &:focus {

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

@@ -4,60 +4,118 @@
   --nsw-palette-grey-03: #cdd3d6;
   --nsw-palette-grey-04: #ebebeb;
 
+  --nsw-palette-grey-01-rgb: 34, 39, 43;
+  --nsw-palette-grey-02-rgb: 73, 80, 84;
+  --nsw-palette-grey-03-rgb: 205, 211, 214;
+  --nsw-palette-grey-04-rgb: 235, 235, 235;
+
   --nsw-palette-green-01: #004000;
   --nsw-palette-green-02: #00aa45;
   --nsw-palette-green-03: #a8edb3;
   --nsw-palette-green-04: #dbfadf;
 
+  --nsw-palette-green-01-rgb: 0, 64, 0;
+  --nsw-palette-green-02-rgb: 0, 170, 69;
+  --nsw-palette-green-03-rgb: 168, 237, 179;
+  --nsw-palette-green-04-rgb: 219, 250, 223;
+
   --nsw-palette-teal-01: #0b3f47;
   --nsw-palette-teal-02: #2e808e;
   --nsw-palette-teal-03: #8cdbe5;
   --nsw-palette-teal-04: #d1eeea;
 
+  --nsw-palette-teal-01-rgb: 11, 63, 71;
+  --nsw-palette-teal-02-rgb: 46, 128, 142;
+  --nsw-palette-teal-03-rgb: 140, 219, 229;
+  --nsw-palette-teal-04-rgb: 209, 238, 234;
+
   --nsw-palette-blue-01: #002664;
   --nsw-palette-blue-02: #146cfd;
   --nsw-palette-blue-03: #8ce0ff;
   --nsw-palette-blue-04: #cbedfd;
 
+  --nsw-palette-blue-01-rgb: 0, 38, 100;
+  --nsw-palette-blue-02-rgb: 20, 108, 253;
+  --nsw-palette-blue-03-rgb: 140, 224, 255;
+  --nsw-palette-blue-04-rgb: 203, 237, 253;
+
   --nsw-palette-purple-01: #441170;
   --nsw-palette-purple-02: #8055f1;
   --nsw-palette-purple-03: #cebfff;
   --nsw-palette-purple-04: #e6e1fd;
 
+  --nsw-palette-purple-01-rgb: 68, 17, 112;
+  --nsw-palette-purple-02-rgb: 128, 85, 241;
+  --nsw-palette-purple-03-rgb: 206, 191, 255;
+  --nsw-palette-purple-04-rgb: 230, 225, 253;
+
   --nsw-palette-pink-01: #65004d;
   --nsw-palette-pink-02: #d912ae;
   --nsw-palette-pink-03: #f4b5e6;
   --nsw-palette-pink-04: #fddef2;
 
+  --nsw-palette-pink-01-rgb: 101, 0, 77;
+  --nsw-palette-pink-02-rgb: 217, 18, 174;
+  --nsw-palette-pink-03-rgb: 244, 181, 230;
+  --nsw-palette-pink-04-rgb: 253, 222, 242;
+
   --nsw-palette-red-01: #630019;
   --nsw-palette-red-02: #d7153a;
   --nsw-palette-red-03: #ffb8c1;
   --nsw-palette-red-04: #ffe6ea;
 
+  --nsw-palette-red-01-rgb: 99, 0, 25;
+  --nsw-palette-red-02-rgb: 215, 21, 58;
+  --nsw-palette-red-03-rgb: 255, 184, 193;
+  --nsw-palette-red-04-rgb: 255, 230, 234;
+
   --nsw-palette-orange-01: #941b00;
   --nsw-palette-orange-02: #f3631b;
   --nsw-palette-orange-03: #ffce99;
   --nsw-palette-orange-04: #fdeddf;
 
+  --nsw-palette-orange-01-rgb: 148, 27, 0;
+  --nsw-palette-orange-02-rgb: 243, 99, 27;
+  --nsw-palette-orange-03-rgb: 255, 206, 153;
+  --nsw-palette-orange-04-rgb: 253, 237, 223;
+
   --nsw-palette-yellow-01: #694800;
   --nsw-palette-yellow-02: #faaf05;
   --nsw-palette-yellow-03: #fde79a;
   --nsw-palette-yellow-04: #fff4cf;
 
+  --nsw-palette-yellow-01-rgb: 105, 72, 0;
+  --nsw-palette-yellow-02-rgb: 250, 175, 5;
+  --nsw-palette-yellow-03-rgb: 253, 231, 154;
+  --nsw-palette-yellow-04-rgb: 255, 244, 207;
+
   --nsw-palette-brown-01: #523719;
   --nsw-palette-brown-02: #b68d5d;
   --nsw-palette-brown-03: #e8d0b5;
   --nsw-palette-brown-04: #ede3d7;
 
+  --nsw-palette-brown-01-rgb: 82, 55, 25;
+  --nsw-palette-brown-02-rgb: 182, 141, 93;
+  --nsw-palette-brown-03-rgb: 232, 208, 181;
+  --nsw-palette-brown-04-rgb: 237, 227, 215;
+
   --nsw-palette-black: #000000;
   --nsw-palette-white: #ffffff;
   --nsw-palette-off-white: #f2f2f2;
 
+  --nsw-palette-black-rgb: 0, 0, 0;
+  --nsw-palette-white-rgb: 255, 255, 255;
+  --nsw-palette-off-white-rgb: 242, 242, 242;
+
   --nsw-palette-focus: #0085b3;
-  --nsw-palette-hover: #{rgba(#0085b3, 0.2)};
-  --nsw-palette-hover-light: #{rgba(#ffffff, 0.2)};
   --nsw-palette-visited: #551a8b;
 
+  --nsw-palette-focus-rgb: 0, 133, 179;
+  --nsw-palette-visited-rgb: 85, 26, 139;
+
+  --nsw-palette-hover: rgba(var(--nsw-palette-focus-rgb), 0.2);
+  --nsw-palette-hover-light: rgba(var(--nsw-palette-white-rgb), 0.2);
+
   --nsw-palette-info-blue: #2e5299;
   --nsw-palette-info-blue-bg: #eaedf4;
   --nsw-palette-success-green: #00a908;
@@ -66,4 +124,13 @@
   --nsw-palette-warning-orange-bg: #fbeee5;
   --nsw-palette-error-red: #b81237;
   --nsw-palette-error-red-bg: #f7e7eb;
+
+  --nsw-palette-info-blue-rgb: 46, 82, 153;
+  --nsw-palette-info-blue-bg-rgb: 234, 237, 244;
+  --nsw-palette-success-green-rgb: 0, 169, 8;
+  --nsw-palette-success-green-bg-rgb: 229, 246, 230;
+  --nsw-palette-warning-orange-rgb: 220, 88, 0;
+  --nsw-palette-warning-orange-bg-rgb: 251, 238, 229;
+  --nsw-palette-error-red-rgb: 184, 18, 55;
+  --nsw-palette-error-red-bg-rgb: 247, 231, 235;
 }

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

@@ -7,10 +7,15 @@
 
   --nsw-text-dark: var(--nsw-palette-grey-01);
   --nsw-text-light: var(--nsw-palette-white);
-  --nsw-focus: var(--nsw-palette-focus);
-  --nsw-text-hover: var(--nsw-palette-hover);
-  --nsw-text-hover-light: var(--nsw-palette-hover-light);
+
+  --nsw-text-hover: rgba(var(--nsw-palette-blue-01-rgb), 0.1);
+  --nsw-text-hover-light: rgba(var(--nsw-palette-white-rgb), 0.1);
+
+  --nsw-text-link: var(--nsw-palette-blue-01);
+  --nsw-text-link-hover: rgba(var(--nsw-palette-blue-01-rgb), 0.1);
+
   --nsw-text-visited: var(--nsw-palette-visited);
+  --nsw-focus: var(--nsw-palette-focus);
 
   --nsw-black: var(--nsw-palette-black);
   --nsw-white: var(--nsw-palette-white);
@@ -29,8 +34,8 @@
   --nsw-status-error: var(--nsw-palette-error-red);
   --nsw-status-error-bg: var(--nsw-palette-error-red-bg);
 
-  --nsw-black-rgb: 0, 0, 0;
-  --nsw-white-rgb: 255, 255, 255;
+  --nsw-black-rgb: var(--nsw-palette-black-rgb);
+  --nsw-white-rgb: var(--nsw-palette-white-rgb);
 
   /* Font */
   --nsw-font-family: 'Public Sans', sans-serif;