@aotearoan/neon 22.5.2 → 23.0.1

package/src/sass/components/_alert-container.scss

@@ -2,7 +2,6 @@
 @use '../includes/layout';
 @use '../includes/responsive';
 @use '../includes/scrollbars';
-@use '../includes/outline';
 @use '../includes/svg';
 
 @mixin alert-container {
@@ -13,7 +12,7 @@
     pointer-events: none;
     touch-action: none;
     width: var(--neon-width-alert);
-    max-width: var(--neon-width-alert);
+    max-width: min(var(--neon-width-alert), 100%);
 
     @include layout.max-height(100);
 
@@ -60,17 +59,20 @@
     }
 
     &__message {
+      --neon-rgb-link: var(--neon-rgb-inverse);
       pointer-events: visible;
       touch-action: auto;
       height: 100%;
       min-height: var(--neon-space-80);
       margin: var(--neon-space-4);
+      padding: var(--neon-padding-alert);
       border-radius: var(--neon-border-radius-alert);
       display: flex;
       flex-direction: row;
-      justify-content: flex-start;
+      gap: var(--neon-gap-alert);
+      justify-content: center;
+      align-items: center;
       position: relative;
-      font-size: var(--neon-font-size-m);
       box-shadow: var(--neon-box-shadow-alert);
       overflow: hidden;
 
@@ -79,99 +81,94 @@
 
         &.neon-alert__message--#{$color} {
           background-color: var(--neon-background-color-alert-#{$color});
-          @include svg.color-with-svg(rgb($alert-rgb));
+          @include svg.color-with-svg(var(--neon-color-alert-#{$color}));
           color: var(--neon-color-inverse);
 
-          &:focus-within:not(.neon-alert__message--with-actions) {
-            @include outline.box-shadow-outline($alert-rgb);
-          }
-
           .neon-alert__title {
-            color: rgb(var(--neon-rgb-alert-#{$color}));
+            color: var(--neon-color-alert-#{$color});
           }
 
           .neon-alert__actions {
-            border-left: var(--neon-border-width-alert) var(--neon-border-style) rgba($alert-rgb, var(--neon-border-opacity-alert-action));
-
             .neon-alert__action {
               transition: all var(--neon-animation-speed-fast) ease-in-out;
-              color: rgba($alert-rgb, 0.5);
+              color: var(--neon-color-alert-#{$color});
 
               &:focus,
               &:hover {
-                color: rgb($alert-rgb);
+                color: var(--neon-color-alert-#{$color});
                 text-decoration: none;
-                background-color: rgba($alert-rgb, 0.125);
+                background-color: var(--neon-background-color-alert-#{$color});
               }
             }
           }
-
-          .neon-alert__action + .neon-alert__action {
-            border-top: var(--neon-border-width-alert) var(--neon-border-style) rgba($alert-rgb, var(--neon-border-opacity-alert-action));
-          }
         }
       }
 
-      &--dismissable:not(.neon-alert__message--with-actions) {
+      &--dismissible:not(.neon-alert__message--with-actions) {
         cursor: pointer;
       }
 
-      .neon-icon {
-        min-width: var(--neon-space-32);
-        width: var(--neon-space-32);
-        min-height: var(--neon-space-32);
-        height: var(--neon-space-32);
-        margin: var(--neon-space-8) var(--neon-space-8) var(--neon-space-8) var(--neon-space-12);
+      &-icon {
+        min-width: var(--neon-size-alert-icon);
+        width: var(--neon-size-alert-icon);
+        min-height: var(--neon-size-alert-icon);
+        height: var(--neon-size-alert-icon);
         align-self: center;
       }
     }
 
     &__title {
-      line-height: var(--neon-line-height-one);
-      font-size: var(--neon-font-size-m);
-      font-weight: var(--neon-font-weight-semi-bold);
-      font-family: var(--neon-font-family-heading);
-      letter-spacing: var(--neon-letter-spacing-m);
+      line-height: var(--neon-line-height-alert-title);
+      font-size: var(--neon-font-size-alert-title);
+      font-weight: var(--neon-font-weight-alert-title);
+      font-family: var(--neon-font-family-alert-title);
+      letter-spacing: var(--neon-letter-spacing-alert-title);
+    }
+
+    &__close {
+      min-width: var(--neon-size-alert-close-icon);
+      width: var(--neon-size-alert-close-icon);
+      min-height: var(--neon-size-alert-close-icon);
+      height: var(--neon-size-alert-close-icon);
+      outline: none;
+      cursor: pointer;
     }
 
     &__body {
-      font-size: var(--neon-font-size-s);
+      line-height: var(--neon-line-height-alert-body);
+      font-size: var(--neon-font-size-alert-body);
+      font-weight: var(--neon-font-weight-alert-body);
+      font-family: var(--neon-font-family-alert-body);
+      letter-spacing: var(--neon-letter-spacing-alert-body);
     }
 
     .neon-alert__actions {
-      margin-left: var(--neon-space-8);
+      flex-direction: row;
 
       .neon-alert__action {
         padding: var(--neon-space-8);
-        font-size: var(--neon-font-size-xs);
+        font-size: var(--neon-font-size-alert-action);
         text-transform: uppercase;
-        letter-spacing: var(--neon-letter-spacing-m);
+        letter-spacing: var(--neon-letter-spacing-alert-action);
         height: 100%;
         display: flex;
         align-items: center;
-        width: var(--neon-width-alert-action);
         justify-content: center;
-        font-weight: var(--neon-font-weight-semi-bold);
-
-        &:focus {
-          border-radius: 0;
-
-          &:first-child {
-            border-top-right-radius: calc(2 * var(--neon-border-radius));
-          }
+        font-weight: var(--neon-font-weight-alert-action);
 
-          &:last-child {
-            border-bottom-right-radius: calc(2 * var(--neon-border-radius));
+        &:focus-visible {
+          .neon-alert__action-label {
+            outline: none;
+            text-decoration: underline;
           }
         }
       }
     }
 
     &__content {
-      padding-top: var(--neon-space-8);
-      padding-bottom: var(--neon-space-8);
       justify-content: center;
       flex: 1 1 auto;
+      gap: var(--neon-space-4);
       outline: none;
     }
   }

package/src/sass/components/_button.scss

@@ -190,6 +190,7 @@
     margin-left: 0;
     margin-right: 0;
     cursor: pointer;
+    text-decoration: none;
     font-family: var(--neon-font-family-body);
 
     &--s {
@@ -290,13 +291,19 @@
       &--#{$color} {
         &.neon-button--solid:not(.neon-button--disabled) {
           @if ($color == 'inverse') {
-            color: var(--neon-color-solid-button-inverse);
+            .neon-button__label {
+              color: var(--neon-color-solid-button-inverse);
+            }
             @include svg.color-with-svg(var(--neon-color-solid-button-inverse));
           } @else if ($color == 'low-contrast') {
-            color: var(--neon-color-solid-button-inverse);
+            .neon-button__label {
+              color: var(--neon-color-solid-button-inverse);
+            }
             @include svg.color-with-svg(var(--neon-color-solid-button-inverse));
           } @else {
-            color: var(--neon-color-solid-button);
+            .neon-button__label {
+              color: var(--neon-color-solid-button);
+            }
             @include svg.color-with-svg(var(--neon-color-solid-button));
           }
 

package/src/sass/components/_card-list.scss

@@ -24,17 +24,6 @@
       .neon-link {
         width: 100%;
         min-width: 100%;
-
-        &::after {
-          display: none;
-        }
-
-        &:hover,
-        &:focus {
-          &::after {
-            display: none;
-          }
-        }
       }
     }
 

package/src/sass/components/_drawer.scss

@@ -24,7 +24,7 @@
     &--right {
       .neon-drawer__container {
         top: 0;
-        width: var(--neon-side-nav-width);
+        width: var(--neon-width-drawer);
         @include layout.min-height(100);
         @include layout.height(100);
       }
@@ -61,6 +61,7 @@
       .neon-drawer__container {
         left: 0;
         @include layout.width(100);
+        height: var(--neon-height-drawer);
       }
     }
 

package/src/sass/components/_dropdown.scss

@@ -158,6 +158,7 @@
     &__button {
       flex: 1 0 auto;
       width: inherit;
+      gap: var(--neon-space-8);
     }
 
     &__badge {

package/src/sass/components/_field-group.scss

@@ -144,10 +144,21 @@
         }
       }
     }
-  }
 
-  .neon-button {
-    margin-left: calc(-1 * var(--neon-border-width));
-    z-index: var(--neon-z-index-above);
+    .neon-button {
+      margin-left: calc(-1 * var(--neon-border-width));
+      z-index: var(--neon-z-index-above);
+    }
+
+    .neon-number {
+      width: 100%;
+
+      input.neon-number__input.neon-input__textfield {
+        &,
+        &:focus {
+          border: none;
+        }
+      }
+    }
   }
 }

package/src/sass/components/_link.scss

@@ -1,24 +1,19 @@
 @use '../includes/outline';
 
-%neon-link-no-style {
+@mixin neon-link-style {
   cursor: pointer;
-  text-decoration: none;
+  position: relative;
+  align-items: center;
 
   &:not(.neon-button) {
+    display: inline-flex;
     width: fit-content;
 
-    &:hover:not(:active) {
-      text-decoration: none;
-    }
-  }
-}
-
-a[href]:not(.neon-link--no-style) {
-  @extend %neon-link-no-style;
-
-  &:not(.neon-button) {
     color: var(--neon-color-link);
     transition: color ease-in-out var(--neon-animation-speed-fast);
+    text-decoration: underline;
+    text-underline-offset: var(--neon-text-underline-offset-link);
+    text-decoration-thickness: var(--neon-text-decoration-thickness-link);
     opacity: 1;
 
     &:visited {
@@ -28,53 +23,42 @@ a[href]:not(.neon-link--no-style) {
     &:active,
     &:hover {
       color: var(--neon-color-link-hover);
+      text-decoration-thickness: var(--neon-text-decoration-thickness-link-hover);
     }
-  }
-}
-
-@mixin link {
-  .neon-link {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-
-    @include outline.focus-outline-styles(var(--neon-rgb-link));
-
-    &:not(.neon-link--no-style) {
-      @extend %neon-link-no-style;
-
-      &:not(.neon-button) {
-        color: var(--neon-color-link);
-        transition: color ease-in-out var(--neon-animation-speed-fast);
-        opacity: 1;
-
-        &:visited {
-          color: var(--neon-color-link-visited);
-        }
 
-        &:active,
-        &:hover {
-          color: var(--neon-color-link-hover);
-        }
+    &:focus-visible {
+      &:not(.neon-link--no-style) {
+        outline: none;
+        text-decoration: none;
+        background-color: var(--neon-color-link);
+        color: var(--neon-color-inverse);
       }
     }
+  }
 
-    &--outline-text {
-      &:after {
-        height: var(--neon-border-width-link);
-        background-color: var(--neon-color-link);
-      }
+  &.neon-link--no-style {
+    text-decoration: none;
 
-      &:hover {
-        color: var(--neon-color-link-hover);
+    &,
+    &:visited,
+    &:active,
+    &:hover {
+      color: inherit;
+    }
 
-        &:after {
-          background-color: var(--neon-color-link-hover);
-          height: var(--neon-border-width-link-hover);
-        }
-      }
+    &.neon-link {
+      @include outline.focus-outline-styles(var(--neon-rgb-link));
     }
+  }
+}
+
+a[href] {
+  @include neon-link-style;
+}
+
+@mixin link {
+  .neon-link {
+    @include neon-link-style;
 
     &__external-indicator {
       width: var(--neon-font-size-s);
@@ -96,7 +80,7 @@ a[href]:not(.neon-link--no-style) {
       }
 
       &:hover,
-      &:focus {
+      &:focus-visible {
         &:after {
           width: calc(100% - 4.5 * var(--neon-space-4));
         }

package/src/sass/components/_number.scss

@@ -111,6 +111,12 @@
       .neon-input__textfield:focus {
         max-width: calc(100% + var(--neon-border-width));
       }
+
+      .neon-input {
+        .neon-icon {
+          display: none;
+        }
+      }
     }
 
     .neon-input .neon-input__textfield {
@@ -130,11 +136,5 @@
         margin: 0;
       }
     }
-
-    .neon-input {
-      .neon-icon {
-        display: none;
-      }
-    }
   }
 }

package/src/sass/components/_tabs.scss

@@ -32,12 +32,6 @@
             background-color: $tab-hover-color;
           }
         }
-
-        .neon-tab {
-          &:focus-visible:before {
-            background-color: $tab-hover-color;
-          }
-        }
       }
     }
 
@@ -49,8 +43,8 @@
     }
 
     .neon-tabs__menu-item {
-      --neon-border-width-link: 0rem;
-      --neon-border-width-link-hover: 0rem;
+      --neon-text-decoration-thickness-link: 0rem;
+      --neon-text-decoration-thickness-link-hover: 0rem;
 
       text-decoration: none;
       position: relative;
@@ -197,24 +191,8 @@
       display: flex;
     }
 
-    &:before {
-      content: '';
-      position: absolute;
-      top: var(--neon-base-space);
-      right: 0;
-      width: calc(2 * var(--neon-base-space));
-      height: calc(2 * var(--neon-base-space));
-      border-radius: var(--neon-border-radius);
-      display: flex;
-      transition: all var(--neon-animation-speed-fast) ease-in-out;
-    }
-
     &:focus-visible {
       outline: none;
-
-      &:before {
-        background-color: var(--neon-color-low-contrast);
-      }
     }
   }
 

package/src/sass/components/_toast-container.scss

@@ -22,57 +22,49 @@
     .neon-toast__message {
       pointer-events: visible;
       touch-action: auto;
-      height: var(--neon-size-l);
       min-width: var(--neon-width-toast);
       margin: var(--neon-space-4);
       overflow: hidden;
-      border-radius: calc(2 * var(--neon-border-radius));
+      border-radius: var(--neon-border-radius-toast);
       display: flex;
       flex-direction: row;
+      gap: var(--neon-gap-toast);
       align-items: center;
       justify-content: space-between;
       position: relative;
-      padding: var(--neon-space-12) calc(3.5 * var(--neon-space-4));
+      padding: var(--neon-padding-toast);
       box-shadow: var(--neon-box-shadow-alert);
 
       @each $color in palettes.$alert-colors {
-        $alert-background-rgb: var(--neon-rgb-#{$color});
-
         &.neon-toast__message--#{$color} {
-          background-color: rgb($alert-background-rgb);
+          background-color: var(--neon-background-color-toast-#{$color});
           @include svg.color-with-svg(var(--neon-color-toast-#{$color}));
 
           &:focus-within {
-            @include outline.box-shadow-outline($alert-background-rgb);
+            @include outline.box-shadow-outline(var(--neon-rgb-#{$color}));
           }
         }
       }
 
-      &--dismissable {
+      &--dismissible {
         cursor: pointer;
       }
 
       .neon-toast__close {
-        min-width: var(--neon-font-size-l);
-        width: var(--neon-font-size-l);
-        min-height: var(--neon-font-size-l);
-        height: var(--neon-font-size-l);
-        margin-left: calc(3.5 * var(--neon-space-4));
-        opacity: 0.5;
+        min-width: var(--neon-size-toast-close-icon);
+        width: var(--neon-size-toast-close-icon);
+        min-height: var(--neon-size-toast-close-icon);
+        height: var(--neon-size-toast-close-icon);
         outline: none;
       }
-
-      &:hover {
-        .neon-toast__close {
-          opacity: 1;
-        }
-      }
     }
 
     .neon-toast__title {
-      line-height: var(--neon-line-height-one);
-      font-size: var(--neon-font-size-m);
-      font-weight: var(--neon-font-weight-normal);
+      line-height: var(--neon-line-height-toast);
+      font-size: var(--neon-font-size-toast);
+      font-weight: var(--neon-font-weight-toast);
+      font-family: var(--neon-font-family-toast);
+      letter-spacing: var(--neon-letter-spacing-toast);
     }
   }
 }

package/src/sass/components/_toggle-chip.scss

@@ -1,9 +1,9 @@
 @use '../includes/palettes';
 @use '../includes/svg';
 
-@mixin neon-toggle-chip-size($neon-toggle-chip-size, $neon-toggle-chip-padding) {
+@mixin neon-toggle-chip-size($neon-toggle-chip-size, $neon-toggle-chip-font-size, $neon-toggle-chip-padding) {
   height: var(--neon-size-#{$neon-toggle-chip-size});
-  font-size: var(--neon-font-size-#{$neon-toggle-chip-size});
+  font-size: var(--neon-font-size-#{$neon-toggle-chip-font-size});
   padding-left: calc(#{$neon-toggle-chip-padding} * var(--neon-space-4));
   padding-right: calc(#{$neon-toggle-chip-padding} * var(--neon-space-4));
 
@@ -61,6 +61,7 @@
       user-select: none;
       display: flex;
       align-items: center;
+      white-space: nowrap;
     }
 
     &__input {
@@ -81,19 +82,19 @@
     }
 
     &--xs {
-      @include neon-toggle-chip-size('xs', 2);
+      @include neon-toggle-chip-size('xs', 's', 2);
     }
 
     &--s {
-      @include neon-toggle-chip-size('s', 2.5);
+      @include neon-toggle-chip-size('s', 'm', 2.5);
     }
 
     &--m {
-      @include neon-toggle-chip-size('m', 3.5);
+      @include neon-toggle-chip-size('m', 'm', 3.5);
     }
 
     &--l {
-      @include neon-toggle-chip-size('l', 5);
+      @include neon-toggle-chip-size('l', 'l', 5);
     }
 
     &:active:not(.neon-toggle-chip--disabled):not(.neon-toggle-chip--show-check) {

package/src/sass/global/_base-html.scss

@@ -34,41 +34,13 @@
 
   ol {
     padding: 0;
-    list-style: none;
-    counter-reset: li;
     display: flex;
     flex-direction: column;
+    gap: var(--neon-space-16);
 
     > li {
-      counter-increment: li;
       max-width: var(--neon-max-paragraph-width);
-      margin-left: var(--neon-space-32);
-
-      &::before {
-        display: inline-flex;
-        content: counter(li);
-        margin-right: var(--neon-space-16);
-        width: var(--neon-space-24);
-        justify-content: flex-start;
-        font-variant: tabular-nums;
-        color: var(--neon-color-neutral);
-        position: absolute;
-        left: var(--neon-space-24);
-      }
-    }
-
-    > li:nth-child(1),
-    > li:nth-child(2),
-    > li:nth-child(3),
-    > li:nth-child(4),
-    > li:nth-child(5),
-    > li:nth-child(6),
-    > li:nth-child(7),
-    > li:nth-child(8),
-    > li:nth-child(9) {
-      &::before {
-        content: "0" counter(li);
-      }
+      margin-left: var(--neon-space-16);
     }
   }
 

package/src/sass/includes/_outline.scss

@@ -12,7 +12,7 @@
       font-weight: var(--neon-font-weight-semi-bold);
       position: absolute;
       left: 0;
-      bottom: var(--neon-border-bottom-offset-link);
+      bottom: var(--neon-text-underline-offset-link);
       width: 100%;
       height: var(--neon-border-width-outline);
       display: flex;
@@ -21,7 +21,7 @@
       transition: background-color var(--neon-animation-speed-slow) ease-in-out, color var(--neon-animation-speed-slow) ease-in-out;
     }
 
-    &:focus {
+    &:focus-visible {
       color: rgb($outline-rgb);
 
       &:after {
@@ -33,7 +33,7 @@
 
 @mixin focus-border-outline($outline-rgb) {
   &--outline-border {
-    &:focus {
+    &:focus-visible {
       @include box-shadow-outline($outline-rgb);
     }
   }
@@ -57,7 +57,7 @@
       background-color: transparent;
     }
 
-    &:focus {
+    &:focus-visible {
       &:before {
         width: var(--neon-space-8);
         height: var(--neon-space-8);
@@ -72,14 +72,14 @@
   &--outline-background {
     transition: all var(--neon-animation-speed-fast) ease-in-out;
 
-    &:focus {
+    &:focus-visible {
       background-color: rgba($outline-rgb, 0.125);
     }
   }
 }
 
 @mixin focus-outline-styles($outline-rgb) {
-  &:focus {
+  &:focus-visible {
     outline: none;
   }