nsw-design-system 2.13.0 → 3.0.2

package/src/components/footer/_footer.scss

@@ -1,179 +1,127 @@
 .nsw-footer {
-  @include font-stack;
-  border-top: solid 1px $light40;
-
   hr {
-    @include nsw-spacing(margin, md none md none);
+    margin: rem(16px) 0;
     height: 1px;
     border: 0;
-    color: $light40;
-    background-color: $light40;
+    background-color: var(--nsw-grey-03);
   }
 
   &__upper {
-    @include nsw-spacing(padding-top, lg);
-    background-color: $white;
-  }
-
-  &__lower {
-    @include nsw-spacing(padding, md none lg none);
-    background-color: $dark80;
-    color: $white;
-    font-size: rem(12px);
+    background-color: var(--nsw-white);
+    border-top: solid 1px var(--nsw-grey-03);
+    padding-top: rem(24px);
 
-    a {
-      color: $white;
+    .nsw-container {
+      padding-left: rem(8px);
+      padding-right: rem(8px);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-      &:focus {
-        @include nsw-focus($color: $white);
+      @include breakpoint('lg') {
+        padding-left: 0;
+        padding-right: 0;
       }
     }
-
-    p:not([class]) {
-      margin: rem(12px) 0;
-    }
   }
 
-  &__info {
+  &__group {
+    padding: 0 rem(8px) rem(16px) rem(8px);
+    flex: 1 0 auto;
+    min-width: rem(256px);
+    max-width: 50%;
 
     @include breakpoint('md') {
-      display: flex;
-      flex-wrap: nowrap;
+      flex-basis: 50%;
+      min-width: auto;
     }
-  }
 
-  &__copyright {
-    flex: 1 1 auto;
-  }
-
-  &__built {
-    flex: 0 0 rem(200px);
-
-    a:not([class]) {
-      color: $white;
-
-      &:hover {
-        background-color: transparent;
-        outline: none;
-        text-decoration: none;
-      }
-
-      &:focus {
-        @include nsw-focus($offset: false, $color: $white);
-      }
+    @include breakpoint('lg') {
+      padding: 0 rem(16px) rem(24px) rem(16px);
+      flex-basis: 25%;
+    }
 
-      &:visited {
-        color: $white;
-      }
+    ul {
+      @include font-size('xs');
+      list-style: none;
+      margin: rem(4px) 0 0 0;
+      padding: 0;
 
-      &:active {
-        background-color: transparent;
+      a {
+        font-weight: var(--nsw-font-normal);
       }
     }
 
-    @include breakpoint('md') {
-      text-align: right;
+    li:first-child {
+      margin-top: 0;
     }
   }
-}
-
-.nsw-footer-links {
-  @include font-stack('heading');
-  @include nsw-spacing(margin, md none none none);
-  @include nsw-spacing(padding, none);
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  &__item {
-    @include nsw-spacing(margin, none none md none);
-    flex: 1 0 50%;
-    max-width: 50%;
 
-    @include breakpoint('md') {
-      @include nsw-spacing(margin-right, lg);
-      flex: 0 0 auto;
-      max-width: none;
-    }
+  &__heading {
+    @include font-size('sm');
   }
 
-  &__link {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
+  &__lower {
+    @include font-size('xxs');
+    background-color: var(--nsw-grey-01);
+    color: var(--nsw-text-light);
+    padding: rem(16px) 0 rem(24px) 0;
 
-    &:focus {
-      @include nsw-focus($color: $white);
+    a {
+      @include link-light;
     }
-  }
-}
-
-.section-links {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  @include breakpoint('md') {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  a:not([class]) {
-    color: $nsw-primary-blue;
 
-    &:visited {
-      color: $nsw-primary-blue;
+    p {
+      margin: rem(12px) 0;
     }
 
-    &:hover {
-      @include nsw-hover;
-      outline: 2px solid $hover-colour;
-    } 
+    ul {
+      list-style: none;
+      margin: rem(16px) rem(-8px) 0 rem(-8px);
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-    &:focus {
-      @include nsw-focus($offset: false);
+      @include breakpoint('md') {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
 
-    &:active {
-      @include nsw-active;
+    li {
+      flex: 1 0 50%;
+      max-width: 50%;
+      padding: 0 rem(8px);
+      margin: 0 0 rem(16px) 0;
+
+      @include breakpoint('md') {
+        margin-right: rem(24px);
+        padding: 0;
+        flex: 0 0 auto;
+        max-width: none;
+      }
     }
   }
 
-  &__group {
-    @include nsw-spacing(padding-bottom, lg);
-    flex: 1 0 auto;
-    min-width: rem(256px);
-    max-width: 50%;
-
+  &__info {
     @include breakpoint('md') {
-      flex-basis: 50%;
-      min-width: auto;
-    }
-
-    @include breakpoint('lg') {
-      flex-basis: 25%;
+      display: flex;
+      flex-wrap: nowrap;
     }
   }
 
-  &__heading {
-    @include nsw-spacing(margin, none);
-    @include font-stack('heading');
-    @include font-size('sm');
+  &__copyright {
+    flex: 1 1 auto;
+    margin: rem(12px) 0;
   }
 
-  &__list {
-    @include nsw-spacing(margin, none);
-    @include nsw-spacing(padding, none);
-    @include font-size('xs');
-    list-style: none;
-    margin-top: rem(4px);
-  }
+  &__built {
+    flex: 0 0 rem(200px);
+    margin: rem(12px) 0;
 
-  &__item:not(:first-child) {
-    @include nsw-spacing(margin-top, xs);
+    @include breakpoint('md') {
+      text-align: right;
+    }
   }
 }

package/src/components/{forms/_forms.scss → form/_form.scss}

@@ -1,16 +1,15 @@
+$nsw-form-chevron-down: '<svg fill="#333333" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 26l16-16-4-4-12 12-12-12-4 4 16 16z"></path></svg>';
+$nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M29.362 3.742l-18.867 19.204-7.857-7.997-2.638 2.685 9.175 9.34 1.319 1.284 1.318-1.284 20.187-20.547z"></path></svg>';
+
 .nsw-form {
-  @include nsw-spacing(margin-top, xxl);
+  margin-top: rem(48px);
 
   &:first-child {
     margin-top: 0;
   }
 
-  a {
-    @include link;
-  }
-
   &__group {
-    @include nsw-spacing(margin-top, md);
+    margin-top: rem(16px);
 
     &:first-child {
       margin-top: 0;
@@ -18,44 +17,58 @@
   }
 
   &__helper {
-    @include font-stack;
     @include font-size('xs');
     display: block;
     margin-bottom: rem(4px);
 
     &--error,
     &--valid {
-      @include font-stack(heading);
-      @include nsw-spacing(padding, xs md xs xl);
-      @include nsw-spacing(margin-top, xs);
+      margin-top: rem(8px);
+      padding: rem(8px);
+      font-weight: var(--nsw-font-bold);
+      color: var(--nsw-text-dark);
       background-repeat: no-repeat;
       background-position: left rem(8px) top rem(8px);
       background-size: 1rem auto;
+      display: flex;
+      align-items: center;
+
+      .nsw-material-icons {
+        font-size: rem(map-get($nsw-icon-sizes, 20));
+        margin-right: rem(4px);
+      }
     }
 
     &--error {
-      @include background-svg(error, $critical);
-      background-color: $critical-background;
+      background-color: var(--nsw-status-error-bg);
+
+      .nsw-material-icons {
+        color: var(--nsw-status-error);
+      }
     }
 
     &--valid {
-      @include background-svg(tick, $info);
-      background-color: $info-background;
+      background-color: var(--nsw-status-success-bg);
+
+      .nsw-material-icons {
+        color: var(--nsw-status-success);
+      }
     }
   }
 
   &__label {
-    @include font-stack(heading);
     @include font-size('sm');
+    font-weight: var(--nsw-font-bold);
     display: block;
 
     &--small {
-      font-weight: normal;
+      font-weight: var(--nsw-font-normal);
     }
 
     + input,
     + textarea,
-    + select {
+    + select,
+    + .nsw-form__input-group {
       margin-top: rem(4px);
     }
   }
@@ -63,64 +76,84 @@
   &__required {
     &::after {
       content: ' *';
-      color: $nsw-primary-highlight;
+      color: var(--nsw-status-error);
     }
   }
 
   &__input,
   &__select {
-    @include font-stack;
     @include font-size('sm');
-    @include nsw-spacing(padding, sm md);
-    @include border-radius;
-    background-color: $white;
-    color: $dark80;
-    border: 1px solid $dark70;
+    padding: rem(11px) rem(16px);
+    border-radius: var(--nsw-border-radius);
+    background-color: var(--nsw-white);
+    color: var(--nsw-text-dark);
+    border: 1px solid var(--nsw-grey-01);
     vertical-align: middle;
     appearance: none;
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
     width: 100%;
 
-    &:hover {
-      @include nsw-hover;
-    }
-
     &:focus {
       @include nsw-focus;
     }
 
     &:disabled {
-      background-color: $light10;
-      border-color: $light40;
-      color: $light40;
+      border-color: var(--nsw-grey-03);
+      color: var(--nsw-grey-03);
       cursor: not-allowed;
+      opacity: 1;
     }
 
-
     &[aria-invalid='true'],
     &.has-error {
-      border-color: $critical;
+      border-color: var(--nsw-status-error);
       border-width: 2px;
+    }
+  }
 
+  &__input {
+    &:hover {
+      background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
+    }
+
+    &:disabled {
+      background: var(--nsw-off-white);
+    }
+
+    &[aria-invalid='true'],
+    &.has-error {
       &:hover {
-        background-color: $critical-background;
+        background: var(--nsw-status-error-bg);
       }
     }
   }
 
   &__select {
-    @include background-svg(chevron-down, $nsw-primary-blue);
-    @include nsw-spacing(padding-right, xxl);
-    background-repeat: no-repeat;
-    background-position: right rem(16px) center;
+    padding-right: rem(48px);
+    background: var(--nsw-white) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center;
     background-size: rem(16px) auto;
 
+    &:hover {
+      background: svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center, linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
+      background-size: rem(16px) auto, auto;
+      background-color: var(--nsw-white);
+    }
+
     &:disabled {
-      @include background-svg(chevron-down, $light40);
+      background: var(--nsw-off-white) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center;
+      background-size: rem(16px) auto;
+    }
+
+    &[aria-invalid='true'],
+    &.has-error {
+      &:hover {
+        background: var(--nsw-status-error-bg) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center;
+        background-size: rem(16px) auto;
+      }
     }
 
     option {
-      background-color: $white;
+      background-color: var(--nsw-white);
     }
   }
 
@@ -131,6 +164,10 @@
       border-right-width: 0;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+      
+      &:focus {
+        position: relative;
+      }
     }
 
     .nsw-button {
@@ -143,34 +180,44 @@
       border-bottom-left-radius: 0;
       border-width: 1px;
       white-space: nowrap;
+
+      &:focus {
+        outline-color: var(--nsw-focus);
+      }
     }
 
     .nsw-material-icons {
       display: block;
-      color: $nsw-primary-blue;
+      color: var(--nsw-brand-dark);
+      font-size: rem(map-get($nsw-icon-sizes, 30));
+      position: static;
     }
 
     &--icon {
       .nsw-button {
         padding: 0;
-        min-width: rem(50px);
-        border-color: $dark70;
+        min-width: rem(48px);
+        border-color: var(--nsw-grey-01);
         border-left-width: 0;
 
         &:hover {
-          @include nsw-hover;
+          background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
         }
       }
     }
 
     &--large {
       .nsw-form__input {
-        @include nsw-spacing(padding, md);
+        padding: rem(16px);
       }
 
       .nsw-button {
         min-width: rem(58px);
       }
+
+      .nsw-material-icons {
+        font-size: rem(map-get($nsw-icon-sizes, 36));
+      }
     }
   }
 
@@ -179,17 +226,17 @@
   }
 
   &__predictive-list {
-    @include border-radius;
     @include z-index;
+    border-radius: var(--nsw-border-radius);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    background-color: $white;
-    box-shadow: map-get($shadows, card);
+    background-color: var(--nsw-white);
+    box-shadow: 0 4px 12px 0 rgba(var(--nsw-black-rgb), 0.15);
     list-style-type: none;
     padding: 0;
     margin: 0;
     position: absolute;
-    top: rem(50px);
+    top: rem(48px);
     right: 0;
     left: 0;
     overflow: hidden;
@@ -203,26 +250,27 @@
       margin: 0;
     }
 
-    a:not([class]) {
+    a {
       display: block;
       padding: rem(10px);
-      color: $dark80;
+      color: var(--nsw-text-dark);
+      font-weight: var(--nsw-font-normal);
 
       &:hover {
-        outline: none;
+        outline-width: 0;
       }
 
       &:focus {
+        outline-width: 3px;
         outline-offset: -3px;
       }
 
       span {
-        font-weight: bolder;
+        font-weight: var(--nsw-font-bold);
       }
     }
   }
 
-
   &__date {
     padding: 0;
     margin: 0;
@@ -255,15 +303,15 @@
     display: contents;
 
     legend {
-      @include nsw-spacing(margin, none none md none);
       padding: 0;
+      margin: 0 0 rem(16px) 0;
       display: block;
     }
   }
 
   &__legend {
-    @include font-stack(heading);
     @include font-size('sm');
+    font-weight: var(--nsw-font-bold);
     width: 100%;
     display: block;
   }
@@ -280,16 +328,16 @@
 
     &:hover + .nsw-form__checkbox-label::before,
     &:hover + .nsw-form__radio-label::before {
-      @include nsw-hover;
+      background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
     }
 
     &:checked + .nsw-form__checkbox-label::after {
-      @include background-svg(tick, $white);
-      background-color: $nsw-primary-blue;
+      background-image: svg-url($nsw-form-tick);
+      background-color: var(--nsw-brand-dark);
     }
 
     &:checked + .nsw-form__radio-label::after {
-      background-color: $nsw-primary-blue;
+      background-color: var(--nsw-brand-dark);
     }
 
     &:disabled {
@@ -300,13 +348,13 @@
 
       + .nsw-form__checkbox-label::before,
       + .nsw-form__radio-label::before {
-        border-color: $light40;
-        background-color: $light10;
+        border-color: var(--nsw-grey-03);
+        background-color: var(--nsw-off-white);
       }
 
       &:checked + .nsw-form__checkbox-label::after,
       &:checked + .nsw-form__radio-label::after {
-        background-color: $light40;
+        background-color: var(--nsw-grey-03);
       }
     }
 
@@ -315,44 +363,43 @@
     }
 
     &:focus + .nsw-form__radio-label::before {
-      box-shadow: 0 0 0 3px $white, 0 0 0 6px $focus-color;
+      box-shadow: 0 0 0 3px var(--nsw-text-light), 0 0 0 6px var(--nsw-focus);
     }
 
     &[aria-invalid='true'] + .nsw-form__checkbox-label,
     &.has-error + .nsw-form__checkbox-label {
       &:hover::before {
-        background-color: $critical-background;
+        background-image: linear-gradient(var(--nsw-status-error-bg), var(--nsw-status-error-bg));
       }
 
       &::before {
         border-width: 2px;
-        border-color: $critical;
+        border-color: var(--nsw-status-error);
       }
     }
   }
 
   &__checkbox-label,
   &__radio-label {
-    @include font-stack;
     @include font-size('sm');
-    @include nsw-spacing(margin, md none none none);
+    margin: rem(16px) 0 0 0;
     padding: rem(4px) 0 rem(4px) rem(48px);
     min-height: rem(32px);
     display: block;
     position: relative;
 
     &::before {
-      @include nsw-spacing(margin-right, md);
       content: '';
       width: rem(32px);
       height: rem(32px);
-      border: 1px $dark70 solid;
-      background: $white;
+      margin-right: rem(16px);
+      border: 1px var(--nsw-grey-01) solid;
+      background-color: var(--nsw-white);
       top: 0;
       left: 0;
       display: inline-block;
       vertical-align: middle;
-      background-color: $white;
+      background-color: var(--nsw-white);
       position: absolute;
     }
 
@@ -371,17 +418,17 @@
 
   &__checkbox-label {
     &::before {
-      @include border-radius;
+      border-radius: var(--nsw-border-radius);
     }
   }
 
   &__radio-label {
     &::before {
-      @include border-radius('round');
+      border-radius: 50%;
     }
 
     &::after {
-      @include border-radius('round');
+      border-radius: 50%;
     }
   }
 }