Merge pull request #66 from digitalnsw/feature/GDS-721-design-tokens

GDS-721 - design tokens

src/components/button/_button.scss

@@ -2,8 +2,8 @@
   @include font-stack('heading');
   @include font-size('sm');
   @include nsw-spacing(margin, lg md none none);
+  @include border-radius;
   border: solid 2px transparent;
-  border-radius: rem($border-radius);
   white-space: nowrap;
   text-decoration: none;
   padding: rem(12px) rem(24px);
@@ -29,7 +29,7 @@
 
   &:active {
     @include nsw-active;
-    border-color: $nsw-tertiary-blue;
+    border-color: $focus-color;
   }
 
   &:disabled,

src/components/card/_card.scss

@@ -1,10 +1,10 @@
 .nsw-card {
   @include font-stack;
+  @include border-radius;
   background-color: $white;
   box-shadow: map-get($shadows, card);
   transition: map-get($transitions, card);
   position: relative;
-  border-radius: rem($border-radius);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -72,8 +72,13 @@
     @include nsw-spacing(margin, md none none none);
     @include nsw-spacing(bottom, md);
     position: absolute;
-    width: rem(20px);
-    height: rem(20px);
+    width: rem(16px);
+    height: rem(16px);
+
+    @include breakpoint('md') {
+      width: rem(20px);
+      height: rem(20px);
+    }
   }
 
   &__link {

src/components/hero-banner/_hero-banner.scss

@@ -37,7 +37,6 @@
     @include breakpoint('md') {
       @include break-out-reset;
       height: rem(380px);
-      background-color: transparent;
       width: 100%;
     }
   }

src/components/notification/_notification.scss

@@ -42,7 +42,7 @@
 
   @each $color, $variant in $notification {
     &--#{$color} {
-      background-color: map-get($variant, bg);
+      background-color: map-get($variant, background);
       border-color: map-get($variant, border);
 
       .nsw-notification__icon {

src/components/site-wide-message/_site-wide-message.scss

@@ -5,12 +5,12 @@
 
   @each $color, $variant in $sitewide-message {
     @if($color == default) {
-      background-color: map-get($variant, bg);
-      color: map-get($variant, color);
+      background-color: map-get($variant, background);
+      color: map-get($variant, text-color);
     } @else {
       &--#{$color} {
-        background-color: map-get($variant, bg);
-        color: map-get($variant, color);
+        background-color: map-get($variant, background);
+        color: map-get($variant, text-color);
       }
     }
   }

src/components/site-wide-message/index.hbs

@@ -6,10 +6,3 @@ model: site-wide-message.json
 {{>_site-wide-message model}}
 {{>_site-wide-message model type="light"}}
 {{>_site-wide-message model type="critical"}}
-
-{{!--
-Depreceated Variations - will be removed in future release:
-
-{{>_site-wide-message model type="dark"}}
-{{>_site-wide-message model type="alert"}}
---}}

src/components/tab-navigation/_tab-navigation.scss

@@ -7,17 +7,6 @@
     list-style: none;
     display: flex;
     position: relative;
-
-    &::after {
-      content: '';
-      width: 100%;
-      height: 2px;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      background-color: $light20;
-      z-index: 0;
-    }
   }
 
   &__link {
@@ -47,20 +36,20 @@
         bottom: 0;
         left: 0;
         width: 100%;
-        height: 4px;
-        background-color: $nsw-primary-highlight;
+        height: 0;
+        border-bottom: solid 4px $nsw-primary-highlight;
       }
     }
   }
 
   &__content {
     @include nsw-spacing(padding, lg md);
     border-bottom: solid 1px $light20;
+    border-top: solid 2px $light20;
+    margin-top: -2px;
 
     &:focus {
       @include nsw-focus;
-      position: relative;
-      z-index: 2;
     }
   }
 }

src/components/tags/_tags.scss

@@ -4,8 +4,8 @@
   @include nsw-spacing(margin, md xs xs none);
   @include nsw-spacing(padding, xs sm );
   @include font-size('sm');
+  @include border-radius;
   border: 2px solid $light40;
-  border-radius: rem($border-radius);
   background-color: $white;
   display: inline-block;
   text-decoration: none;

src/global/scss/settings/_settings.scss

@@ -35,6 +35,12 @@ $transitions: (
   card: box-shadow 0.25s ease-in-out
 ) !default;
 
+$border-radii: (
+  none: 0,
+  default: 4px,
+  round: 50%,
+) !default;
+
 $border-radius: 4px !default;
 $border-width: 1px !default;
 
@@ -56,7 +62,6 @@ $spacing-sizes: (
 $nsw-primary-blue: #002664 !default;
 $nsw-primary-highlight: #d7153a !default;
 $nsw-secondary-blue: #2e5299 !default;
-$nsw-tertiary-blue: #0085b3 !default;
 
 // Shades
 $black: #000000 !default;
@@ -68,18 +73,21 @@ $light20: #e4e4e6 !default;
 $light10: #f4f4f7 !default;
 $white: #ffffff !default;
 
-// Notifications
-$info-blue: #2e5299 !default;
-$info-blue-light10: #eaedf4 !default;
-$success-green: #00a908 !default;
-$success-green-light10: #e5f6e6 !default;
-$warning-orange: #dc5800 !default;
-$warning-orange-light10: #fbeee5 !default;
-$error-red: #b81237 !default;
-$error-red-light10: #f7e7eb !default;
+// Utility colors
+$info: $nsw-secondary-blue !default;
+$info-background: #eaedf4 !default;
+$success: #00a908 !default;
+$success-background: #e5f6e6 !default;
+$warning: #dc5800 !default;
+$warning-background: #fbeee5 !default;
+$critical: #b81237 !default;
+$critical-background: #f7e7eb !default;
+$focus-color: #0085b3 !default;
+$hover-colour: rgba($focus-color, 0.2);
+$link-color: $nsw-primary-blue;
+$link-visited: #551a8b;
 
-// sitewide message
-$alert-yellow: #ffcb2d;
+$focus-offset: 3px;
 
 //Box Shadows
 $shadows: (
@@ -88,17 +96,6 @@ $shadows: (
   card-hover: 2px 6px 12px 0 rgba($black, 0.25),
 ) !default;
 
-//Focus and Hover
-$focus-color: $nsw-tertiary-blue !default;
-$focus-offset: 3px;
-
-$hover-colour: rgba($nsw-tertiary-blue, 0.2);
-
-//Links
-$link-color: $nsw-primary-blue;
-$link-hover-outline-color: rgba($nsw-tertiary-blue, 0.2);
-$link-visited: #551a8b;
-
 // Breakpoints
 $breakpoints: (
   xs: 0,
@@ -109,7 +106,6 @@ $breakpoints: (
 ) !default;
 
 // z-index
-
 $z-index: (
   top: 9001,
   middle: 2,
@@ -153,24 +149,24 @@ $grid-col-sizes: (
 // Notification variations
 $notification: (
   info: (
-    border: $info-blue,
-    bg: $info-blue-light10,
-    fill: $info-blue,
+    border: $info,
+    background: $info-background,
+    fill: $info,
   ),
   success: (
-    border: $success-green,
-    bg: $success-green-light10,
-    fill: $success-green,
+    border: $success,
+    background: $success-background,
+    fill: $success,
   ),
   warning: (
-    border: $warning-orange,
-    bg: $warning-orange-light10,
-    fill: $warning-orange,
+    border: $warning,
+    background: $warning-background,
+    fill: $warning,
   ),
   error: (
-    border: $error-red,
-    bg: $error-red-light10,
-    fill: $error-red,
+    border: $critical,
+    background: $critical-background,
+    fill: $critical,
   ),
 ) !default;
 
@@ -181,69 +177,60 @@ $overlays: (
 ) !default;
 
 $icon-colors: (
-  error: $error-red,
-  success: $success-green,
-  info: $info-blue,
-  warning: $warning-orange,
+  error: $critical,
+  success: $success,
+  info: $info,
+  warning: $warning,
   default: $nsw-primary-blue,
 ) !default;
 
 $button-variations: (
   primary: (
-    color: $white,
-    colorHover: $white,
-    bg: $nsw-primary-blue,
-    bgHover: lighten($nsw-primary-blue, 5.88),
+    text-color: $white,
+    text-color-hover: $white,
+    background: $nsw-primary-blue,
+    background-hover: lighten($nsw-primary-blue, 5.88),
     border: $nsw-primary-blue,
-    borderHover: lighten($nsw-primary-blue, 5.88)
+    border-hover: lighten($nsw-primary-blue, 5.88)
   ),
   highlight: (
-    color: $white,
-    colorHover: $white,
-    bg: $nsw-primary-highlight,
-    bgHover: lighten($nsw-primary-highlight, 5.88),
+    text-color: $white,
+    text-color-hover: $white,
+    background: $nsw-primary-highlight,
+    background-hover: lighten($nsw-primary-highlight, 5.88),
     border: $nsw-primary-highlight,
-    borderHover: lighten($nsw-primary-highlight, 5.88)
+    border-hover: lighten($nsw-primary-highlight, 5.88)
   ),
   outline: (
-    color: $dark80,
-    colorHover: $white,
-    bg: $white,
-    bgHover: $nsw-primary-blue,
+    text-color: $dark80,
+    text-color-hover: $white,
+    background: $white,
+    background-hover: $nsw-primary-blue,
     border: $nsw-primary-blue,
-    borderHover: $nsw-primary-blue
+    border-hover: $nsw-primary-blue
   ),
   white: (
-    color: $dark80,
-    colorHover: $dark80,
-    bg: $white,
-    bgHover: $light20,
+    text-color: $dark80,
+    text-color-hover: $dark80,
+    background: $white,
+    background-hover: $light20,
     border: $white,
-    borderHover: $light20
+    border-hover: $light20
   ),
 ) !default;
 
 $sitewide-message: (
   default: (
-    color: $white,
-    bg: $nsw-secondary-blue,
+    text-color: $white,
+    background: $nsw-secondary-blue,
   ),
   light: (
-    color: $dark80,
-    bg: $info-blue-light10,
+    text-color: $dark80,
+    background: $info-background,
   ),
   critical: (
-    color: $white,
-    bg: $error-red,
-  ),
-  // DO NOT USE: dark & alert to be removed in the future
-  alert: (
-    color: $dark80,
-    bg: $alert-yellow,
-  ),
-  dark: (
-    color: $white,
-    bg: $dark80,
+    text-color: $white,
+    background: $critical,
   ),
 ) !default;
 

src/global/scss/tools/_buttons.scss

@@ -1,15 +1,15 @@
 @mixin button-variant($property-map) {
   @if type-of($property-map) != 'map' {
-    @error 'NSW-DS button-variant mixin accepts a map of values consisting of the following keys: color, colorHover, bg, bgHover, border, borderHover.';
+    @error 'NSW-DS button-variant mixin accepts a map of values consisting of the following keys: text-color, text-color-hover, background, background-hover, border, border-hover.';
   }
 
-  color: map-get($property-map, color);
-  background-color: map-get($property-map, bg);
+  color: map-get($property-map, text-color);
+  background-color: map-get($property-map, background);
   border-color: map-get($property-map, border);
 
   &:hover {
-    color: map-get($property-map, colorHover);
-    background-color: map-get($property-map, bgHover);
-    border-color: map-get($property-map, borderHover);
+    color: map-get($property-map, text-color-hover);
+    background-color: map-get($property-map, background-hover);
+    border-color: map-get($property-map, border-hover);
   }
 }