nsw-design-system 2.14.2 → 3.0.3

package/src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,68 +1,63 @@
-.nsw-breadcrumb {
+.nsw-breadcrumbs {
   @include font-size('xs');
-  @include nsw-spacing(margin-top, lg);
-  font-family: var(--nsw-font-family);
+  margin-top: rem(24px);
 
-  &__list {
+  ol {
     margin: 0;
     padding-left: 0;
     list-style: none;
   }
 
-  &__item {
+  li {
     display: none;
 
-    & + &::before {
-      content: '';
+    &::before {
+      @include material-icons;
+      content: 'keyboard_arrow_right';
+      font-size: rem(map-get($nsw-icon-sizes, 20));
+      line-height: rem(8px);
       display: inline-block;
-      border-right: 2px solid currentColor;
-      border-bottom: 2px solid currentColor;
-      width: rem(6px);
-      height: rem(6px);
-      transform: rotate(-45deg);
-      margin-right: rem(6px);
-      margin-left: rem(6px);
-      top: -1px;
       position: relative;
+      top: rem(6px);
     }
 
     @include breakpoint('md') {
       display: inline;
     }
-  }
 
-  &__item:nth-last-child(2),
-  &__item:last-child {
-    display: inline;
-  }
+    &:nth-last-child(2),
+    &:last-child {
+      display: inline;
+    }
 
-  &__item:nth-last-child(2) {
-    &::before {
-      display: none;
+    &:nth-last-child(2) {
+      &::before {
+        display: none;
 
-      @include breakpoint('md') {
-        display: inline-block;
+        @include breakpoint('md') {
+          display: inline-block;
+        }
       }
     }
-  }
-
-  &__link {
-    color: var(--nsw-brand-dark);
-    text-decoration: underline;
-    text-decoration-skip-ink: auto;
 
-    &:hover {
-      @include nsw-hover;
-    }
+    &:first-child {
+      &::before {
+        display: none;
 
-    &:focus {
-      @include nsw-focus($offset: false);
+        @include breakpoint('md') {
+          display: none;
+        }
+      }
     }
   }
 
-  &--current {
-    text-decoration: none;
-    pointer-events: none;
-    color: var(--nsw-text-dark);
+  a {
+    font-weight: var(--nsw-font-normal);
+
+    &.current {
+      text-decoration: none;
+      pointer-events: none;
+      color: var(--nsw-text-dark);
+    }
   }
 }

package/src/components/button/_button.scss

@@ -1,13 +1,91 @@
+$nsw-buttons: (
+  dark: (
+    text-color: var(--nsw-text-light),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-brand-dark),
+    background-hover: var(--nsw-brand-dark),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-focus),
+    hover: white
+  ),
+  dark-outline: (
+    text-color: var(--nsw-brand-dark),
+    text-color-hover: var(--nsw-text-light),
+    background: transparent,
+    background-hover: var(--nsw-brand-dark),
+    border: var(--nsw-brand-dark),
+    focus: var(--nsw-focus),
+    border-hover: transparent
+  ),
+  dark-outline-solid: (
+    text-color: var(--nsw-brand-dark),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-white),
+    background-hover: var(--nsw-brand-dark),
+    border: var(--nsw-brand-dark),
+    focus: var(--nsw-focus),
+    border-hover: transparent
+  ),
+  light: (
+    text-color: var(--nsw-text-dark),
+    text-color-hover: var(--nsw-text-dark),
+    background: var(--nsw-brand-light),
+    background-hover: var(--nsw-brand-light),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-focus),
+    hover: black
+  ),
+  light-outline: (
+    text-color: var(--nsw-brand-light),
+    text-color-hover: var(--nsw-text-dark),
+    background: transparent,
+    background-hover: var(--nsw-brand-light),
+    border: var(--nsw-brand-light),
+    focus: var(--nsw-focus),
+    border-hover: transparent
+  ),
+  white: (
+    text-color: var(--nsw-text-dark),
+    text-color-hover: var(--nsw-text-dark),
+    background: var(--nsw-white),
+    background-hover: var(--nsw-white),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-white),
+    hover: black
+  ),
+  danger: (
+    text-color: var(--nsw-text-light),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-status-error),
+    background-hover: var(--nsw-status-error),
+    border: transparent,
+    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 {
   @include font-size('sm');
-  @include nsw-spacing(margin, lg md none none);
   border-radius: var(--nsw-border-radius);
-  font-family: var(--nsw-font-family);
   font-weight: var(--nsw-font-bold);
   border: solid 2px transparent;
   white-space: normal;
   text-decoration: none;
-  padding: rem(12px) rem(24px);
+  padding: rem(10px) rem(22px);
   cursor: pointer;
   -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
   text-decoration: none;
@@ -21,34 +99,65 @@
     min-width: rem(124px);
   }
 
+  &:hover {
+    outline: none;
+  }
+
   &:focus {
     @include nsw-focus;
   }
 
-  @each $color, $value in $button-variations {
+  @each $color, $property-map in $nsw-buttons {
     &--#{"" + $color} {
-      @include button-variant($value);
+      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.38;
+    opacity: 0.4;
     cursor: not-allowed;
   }
 
-  &--full-width {
-    display: block;
-    width: 100%;
-
-    @include breakpoint($desktop-breakpoint) {
-      display: inline-block;
-      width: auto;
-    }
-  }
-
   .nsw-material-icons {
-    font-size: rem(24px);
+    font-size: rem(map-get($nsw-icon-sizes, 24));
     line-height: rem(10px);
     position: relative;
     bottom: rem(-7px);
@@ -60,18 +169,50 @@
     &:last-child {
       margin-left: rem(8px);
     }
+
+    &:only-child {
+      margin: 0;
+    }
   }
-}
 
-/* Legacy start */
+  &--small {
+    @include font-size('xs');
+    padding: rem(5px);
+
+    .nsw-material-icons {
+      font-size: rem(map-get($nsw-icon-sizes, 20));
+
+      &:first-child {
+        margin-right: rem(4px);
+      }
+
+      &:last-child {
+        margin-left: rem(4px);
+      }
 
-.nsw-button--block {
-  display: block;
-  width: 100%;
+      &:only-child {
+        margin: 0;
+      }    
+    }
+  }
+
+  &--flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  + .nsw-button--block {
-    margin-bottom: 0;
+    .nsw-material-icons {
+      position: static;
+    }
   }
-}
 
-/* Legacy end */
+  &--full-width {
+    display: block;
+    width: 100%;
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      display: inline-block;
+      width: auto;
+    }
+  }
+}

package/src/components/callout/_callout.scss

@@ -1,82 +1,5 @@
 .nsw-callout {
-  @include nsw-spacing(padding, md);
   @include component-spacing();
-  font-family: var(--nsw-font-family);
-  background: var(--nsw-off-white);
-  position: relative;
-  border-left: solid 6px var(--nsw-brand-dark);
-
-  @include breakpoint('md') {
-    @include nsw-spacing(padding, lg lg lg md);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  }
-
-  &__icon {
-    + .nsw-callout__content {
-      margin-top: 10px;
-    }
-
-    @include breakpoint('md') {
-      margin-right: 10px;
-      flex: 0 0 auto;
-
-      + .nsw-callout__content {
-        margin-top: 0;
-      }
-
-      &.nsw-icon {
-        width: rem(32px);
-        height: rem(32px);     
-      }
-    }
-
-    &.nsw-material-icons {
-      position: relative;
-      top: -3px;
-      left: -3px;
-    }
-
-    &.nsw-icon {
-      width: rem(24px);
-      height: rem(24px);
-
-      + .nsw-callout__content {
-        @include nsw-spacing(margin-top, md);
-      }
-
-      @include breakpoint('md') {
-        @include nsw-spacing(margin-right, md);
-
-        + .nsw-callout__content {
-          @include nsw-spacing(margin-top, none);
-        }
-      }
-    }
-  }
-
-  &__content {
-    @include breakpoint('md') {
-      @include nsw-spacing(margin-top, none);
-    }
-
-    p:not([class]) {
-      @include nsw-spacing(margin, sm none none none);
-    }
-
-    a:not([class]) {
-      @include text-link;
-    }
-
-    .nsw-text-link {
-      @include nsw-spacing(margin-top, sm);
-    }
-  }
-
-  &__title {
-    @include font-size('md');
-    font-weight: var(--nsw-font-bold);
-    margin: 0;
-  }
+  padding: rem(16px);
+  border-left: solid 4px var(--nsw-brand-dark);
 }