@aotearoan/neon 19.0.2 → 21.0.0

package/dist/src/neon.d.ts

@@ -36,6 +36,7 @@ export { default as NeonLinearProgress } from './components/feedback/linear-prog
 export { default as NeonLink } from './components/navigation/link/NeonLink.vue';
 export { default as NeonList } from './components/user-input/list/NeonList.vue';
 export { default as NeonMenu } from './components/navigation/menu/NeonMenu.vue';
+export { default as NeonMobileMenu } from './components/navigation/mobile-menu/NeonMobileMenu.vue';
 export { default as NeonModal } from './components/layout/modal/NeonModal.vue';
 export { default as NeonNote } from './components/feedback/note/NeonNote.vue';
 export { default as NeonNotificationCounter } from './components/feedback/notification-counter/NeonNotificationCounter.vue';
@@ -83,7 +84,6 @@ export { NeonSize } from './common/enums/NeonSize';
 export { NeonSplashLoaderSize } from './common/enums/NeonSplashLoaderSize';
 export { NeonState } from './common/enums/NeonState';
 export { NeonSwitchStyle } from './common/enums/NeonSwitchStyle';
-export { NeonTabsStyle } from './common/enums/NeonTabsStyle';
 export { NeonToggleChipSize } from './common/enums/NeonToggleChipSize';
 export { NeonToggleStyle } from './common/enums/NeonToggleStyle';
 export { NeonTooltipStyle } from './common/enums/NeonTooltipStyle';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "19.0.2",
+  "version": "21.0.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/color-variables.scss

@@ -1,9 +1,11 @@
 .neon {
-  --neon-color-text-dark: rgb(var(--neon-rgb-text-dark));
-  --neon-color-text-strong-dark: rgb(var(--neon-rgb-text-strong-dark));
+  --neon-color-text-primary-light: rgb(var(--neon-rgb-text-primary-light));
+  --neon-color-text-secondary-light: rgb(var(--neon-rgb-text-secondary-light));
+  --neon-color-text-tertiary-light: rgb(var(--neon-rgb-text-tertiary-light));
 
-  --neon-color-text-light: rgb(var(--neon-rgb-text-light));
-  --neon-color-text-strong-light: rgb(var(--neon-rgb-text-strong-light));
+  --neon-color-text-primary-dark: rgb(var(--neon-rgb-text-primary-dark));
+  --neon-color-text-secondary-dark: rgb(var(--neon-rgb-text-secondary-dark));
+  --neon-color-text-tertiary-dark: rgb(var(--neon-rgb-text-tertiary-dark));
 
   --neon-color-disabled-background-dark: rgb(var(--neon-rgb-disabled-background-dark));
   --neon-color-disabled-border-dark: rgb(var(--neon-rgb-disabled-border-dark));

package/src/sass/components/_action-menu.scss

@@ -50,7 +50,7 @@
 
       &-count {
         font-variant: tabular-nums;
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
       }
 
       .neon-link__label {

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

@@ -129,7 +129,7 @@
     &__title {
       line-height: var(--neon-line-height-one);
       font-size: var(--neon-font-size-m);
-      font-weight: var(--neon-font-weight-bold);
+      font-weight: var(--neon-font-weight-semi-bold);
       font-family: var(--neon-font-family-heading);
       letter-spacing: var(--neon-letter-spacing-m);
     }
@@ -151,7 +151,7 @@
         align-items: center;
         width: var(--neon-width-alert-action);
         justify-content: center;
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
 
         &:focus {
           border-radius: 0;

package/src/sass/components/_badge.scss

@@ -9,7 +9,7 @@
           $neon-badge-color: var(--neon-color-#{$color});
           color: var(--neon-color-inverse);
           @if ($color == high-contrast) {
-            $neon-badge-color: var(--neon-color-text);
+            $neon-badge-color: var(--neon-color-text-secondary);
           }
 
           background: $neon-badge-color;
@@ -79,7 +79,7 @@
     }
 
     text-transform: uppercase;
-    font-weight: var(--neon-font-weight-semi-bold);
+    font-weight: var(--neon-font-weight-medium);
     letter-spacing: var(--neon-letter-spacing-m);
     display: flex;
     justify-content: center;

package/src/sass/components/_button.scss

@@ -57,7 +57,7 @@
   &:hover:not(:disabled),
   &:active:not(:disabled) {
     @if ($color == 'inverse') {
-      @include svg.color-with-svg(var(--neon-color-text));
+      @include svg.color-with-svg(var(--neon-color-text-secondary));
     } @else {
       @include svg.color-with-svg(var(--neon-color-inverse));
     }
@@ -95,6 +95,14 @@
   }
 }
 
+@mixin input-button($color) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
+    border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-#{$color});
+  }
+}
+
 @mixin button-small {
   height: var(--neon-size-s);
   font-size: var(--neon-font-size-s);
@@ -309,6 +317,10 @@
         &.neon-button--text {
           @include text-button($color);
         }
+
+        &.neon-button--input {
+          @include input-button($color);
+        }
       }
     }
 
@@ -350,6 +362,18 @@
       }
     }
 
+    &.neon-button--input {
+      border-radius: var(--neon-border-radius-input);
+      border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+      background-color: var(--neon-background-color-input);
+      color: var(--neon-color-input);
+
+      &.neon-button--disabled {
+        color: var(--neon-color-disabled-text);
+        border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-disabled-border);
+      }
+    }
+
     &--state-loading,
     &--state-success,
     &--state-error {

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

@@ -52,14 +52,14 @@
       white-space: nowrap;
       user-select: none;
       font-size: var(--neon-font-size-l);
-      font-weight: var(--neon-font-weight-semi-bold);
+      font-weight: var(--neon-font-weight-medium);
       width: 30%;
       text-align: right;
       margin-left: auto;
     }
 
     &__card {
-      color: var(--neon-color-text);
+      color: var(--neon-color-text-secondary);
       --neon-border-radius-card: var(--neon-border-radius-card-list);
       user-select: none;
       box-shadow: var(--neon-box-shadow-card-list);

package/src/sass/components/_date-picker.scss

@@ -114,7 +114,7 @@
         border-radius: 50%;
         font-size: var(--neon-font-size-s);
         cursor: pointer;
-        color: var(--neon-color-text-strong);
+        color: var(--neon-color-text-primary);
         background-color: transparent;
 
         &--empty {
@@ -140,7 +140,7 @@
         max-width: 88rem;
         font-size: var(--neon-font-size-s);
         cursor: pointer;
-        color: var(--neon-color-text-strong);
+        color: var(--neon-color-text-primary);
         background-color: transparent;
 
         &.neon-date-picker__calendar-option--disabled {
@@ -152,7 +152,7 @@
 
     .neon-date-picker__calendar-title-readonly {
       align-self: center;
-      font-weight: var(--neon-font-weight-semi-bold);
+      font-weight: var(--neon-font-weight-medium);
     }
 
     @each $color in palettes.$neon-functional-colors {
@@ -161,7 +161,7 @@
         .neon-date-picker__calendar-options .neon-date-picker__calendar-option--today {
           color: var(--neon-color-#{$color});
           background-color: rgba(var(--neon-rgb-#{$color}), 0.125);
-          font-weight: var(--neon-font-weight-bold);
+          font-weight: var(--neon-font-weight-semi-bold);
         }
 
         .neon-date-picker__calendar-date--selected:not(:disabled) {
@@ -171,7 +171,7 @@
           &.neon-date-picker__calendar-date--selected:hover {
             color: var(--neon-color-inverse);
             background-color: var(--neon-color-#{$color});
-            font-weight: var(--neon-font-weight-bold);
+            font-weight: var(--neon-font-weight-semi-bold);
           }
         }
 
@@ -182,7 +182,7 @@
           &.neon-date-picker__calendar-option--selected:hover {
             color: var(--neon-color-inverse);
             background-color: var(--neon-color-#{$color});
-            font-weight: var(--neon-font-weight-bold);
+            font-weight: var(--neon-font-weight-semi-bold);
           }
         }
 
@@ -202,7 +202,7 @@
           &:active {
             color: var(--neon-color-#{$color});
             background-color: rgba(var(--neon-rgb-#{$color}), 0.25);
-            font-weight: var(--neon-font-weight-bold);
+            font-weight: var(--neon-font-weight-semi-bold);
           }
         }
 

package/src/sass/components/_dropdown-menu.scss

@@ -54,7 +54,7 @@
 
       .neon-link {
         text-decoration: none;
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
 
       .neon-link,
@@ -81,7 +81,7 @@
 
       &--group-title {
         .neon-dropdown-menu__item-container {
-          font-weight: var(--neon-font-weight-semi-bold);
+          font-weight: var(--neon-font-weight-medium);
           letter-spacing: var(--neon-letter-spacing-s);
           cursor: default;
 

package/src/sass/components/_expansion-panel.scss

@@ -28,7 +28,7 @@
       align-items: center;
       cursor: pointer;
       letter-spacing: var(--neon-letter-spacing-s);
-      font-weight: var(--neon-font-weight-light);
+      font-weight: var(--neon-font-weight-extra-light);
       @include layout.padding-horizontal(0.75, 0.75);
       padding-top: 0;
       padding-bottom: 0;
@@ -148,7 +148,7 @@
     }
 
     .neon-expansion-indicator {
-      margin-right: -3rem;
+      margin-right: -2rem;
     }
 
     &--full-width {

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

@@ -38,14 +38,14 @@
               }
             }
           } @else {
-            color: rgba(var(--neon-rgb-text), 0.75);
+            color: rgba(var(--neon-rgb-text-secondary), 0.75);
 
             &:hover,
             &:focus {
-              color: var(--neon-color-text);
+              color: var(--neon-color-text-secondary);
 
               &:after {
-                background-color: var(--neon-color-text);
+                background-color: var(--neon-color-text-secondary);
               }
             }
           }
@@ -65,7 +65,7 @@
         min-width: fit-content;
         margin-right: var(--neon-space-24);
         font-size: var(--neon-font-size-xs);
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
         font-variant: tabular-nums;
         line-height: 1;
       }
@@ -77,12 +77,12 @@
       }
 
       &:not(.neon-filter-list__item--disabled) {
-        color: rgba(var(--neon-rgb-text), 0.75);
+        color: rgba(var(--neon-rgb-text-secondary), 0.75);
 
         &.neon-filter-list__item--selected,
         &.neon-filter-list__item:hover,
         &.neon-filter-list__item:focus {
-          color: var(--neon-color-text);
+          color: var(--neon-color-text-secondary);
         }
 
         &.neon-filter-list__item:hover,

package/src/sass/components/_icon.scss

@@ -13,7 +13,7 @@
 
   @each $neon-icon-type in $neon-icon-types {
     .#{$neon-icon-type} {
-      @include svg.svg-colors(var(--neon-color-text));
+      @include svg.svg-colors(var(--neon-color-text-secondary));
 
       @each $color in palettes.$neon-functional-colors {
         &--#{$color}:not(.#{$neon-icon-type}--disabled):not(.#{$neon-icon-type}--inverse) {

package/src/sass/components/_image-carousel.scss

@@ -28,7 +28,7 @@
       max-height: 100%;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
-      overscroll-behavior: contain;
+      overscroll-behavior-x: contain;
 
       @include scrollbars.hide-scrollbars();
 
@@ -40,6 +40,7 @@
     .neon-image-carousel__item {
       display: flex;
       min-width: 100%;
+      padding: var(--neon-space-2);
       scroll-snap-align: start;
       scroll-snap-stop: always;
       opacity: 0;

package/src/sass/components/_input.scss

@@ -38,9 +38,9 @@
 
         &.neon-icon--name-close {
           @if ($size == 'l') {
-            padding: calc(2.75 * var(--neon-space-4));
+            padding: calc(2.25 * var(--neon-space-4));
           } @else {
-            padding: calc(1.75 * var(--neon-space-4));
+            padding: calc(1.5 * var(--neon-space-4));
           }
         }
       }
@@ -71,18 +71,18 @@
         &.neon-input--focused {
           .neon-input__text,
           .neon-input__textarea {
-            border-color: rgb($input-rgb);
+            border-color: var(--neon-color-#{$color});
             background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
           }
         }
-
-        .neon-icon:focus {
-          background-color: rgba($input-rgb, 0.125);
-          box-shadow: 0 0 0 2rem rgba($input-rgb, 0.125);
-        }
       }
     }
 
+    .neon-icon:focus {
+      background-color: rgba(var(--neon-rgb-low-contrast), 0.125);
+      box-shadow: 0 0 0 2rem rgba(var(--neon-rgb-low-contrast), 0.125);
+    }
+
     &.neon-input--with-state-highlight.neon-input--state-success {
       .neon-input__text,
       .neon-input__textarea {
@@ -123,14 +123,14 @@
     &__text,
     &__textarea {
       border-radius: var(--neon-border-radius-input);
-      border: var(--neon-border-width) var(--neon-border-style);
+      border: var(--neon-border-width-input) var(--neon-border-style);
       padding: var(--neon-space-4) var(--neon-space-10);
       line-height: var(--neon-line-height-one);
       outline: none;
       font-family: var(--neon-font-family-body);
       width: 100%;
       border-color: var(--neon-border-color-input);
-      color: var(--neon-color-text);
+      color: var(--neon-color-input);
       background-color: var(--neon-background-color-input);
       box-shadow: var(--neon-inset-shadow);
 
@@ -153,7 +153,7 @@
 
     &:not(.neon-input--placeholder-visible) {
       input[type='password'] {
-        font-weight: bold;
+        font-weight: var(--neon-font-weight-semi-bold);
         letter-spacing: calc(2 * var(--neon-letter-spacing-m));
       }
     }

package/src/sass/components/_label.scss

@@ -77,7 +77,7 @@
     user-select: none;
     min-width: fit-content;
     width: fit-content;
-    font-weight: var(--neon-font-weight-semi-bold);
+    font-weight: var(--neon-font-weight-medium);
 
     &__label {
       white-space: nowrap;

package/src/sass/components/_linear-progress.scss

@@ -89,7 +89,7 @@
 
     &__output {
       margin-left: var(--neon-space-8);
-      font-weight: var(--neon-font-weight-bold);
+      font-weight: var(--neon-font-weight-semi-bold);
       font-variant: tabular-nums;
     }
   }

package/src/sass/components/_list.scss

@@ -14,7 +14,7 @@
           @if (not($color == 'low-contrast' or $color == 'neutral')) {
             @include svg.color-with-svg(rgba($list-foreground-rgb, 0.75));
           } @else {
-            @include svg.color-with-svg(rgba(var(--neon-rgb-text), 0.75));
+            @include svg.color-with-svg(rgba(var(--neon-rgb-text-secondary), 0.75));
           }
 
           &:hover,
@@ -23,7 +23,7 @@
             @if (not($color == 'low-contrast' or $color == 'neutral')) {
               @include svg.color-with-svg(rgba($list-foreground-rgb));
             } @else {
-              @include svg.color-with-svg(var(--neon-color-text));
+              @include svg.color-with-svg(var(--neon-color-text-secondary));
             }
           }
         }

package/src/sass/components/_menu.scss

@@ -78,7 +78,7 @@
 
             & > .neon-link:not(.router-link-active),
             .neon-button:not(.router-link-active) {
-              @include svg.color-with-svg(var(--neon-color-text));
+              @include svg.color-with-svg(var(--neon-color-text-secondary));
             }
           }
         }

package/src/sass/components/_mobile-menu.scss

@@ -0,0 +1,110 @@
+@use '../includes/palettes';
+@use '../includes/svg';
+
+@mixin mobile-menu {
+  .neon-mobile-menu {
+    user-select: none;
+    flex-direction: row;
+    width: 100%;
+    background-color: var(--neon-background-color-mobile-menu);
+    border-top: var(--neon-border-top-mobile-menu);
+
+    &__item {
+      width: 100%;
+
+      .neon-link {
+        .neon-mobile-menu__link-container {
+          padding-top: var(--neon-space-12);
+          padding-bottom: var(--neon-space-8);
+          width: 100%;
+          justify-content: center;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+          gap: var(--neon-space-4);
+          font-family: var(--neon-font-family-mobile-menu);
+          font-size: var(--neon-font-size-mobile-menu);
+          line-height: var(--neon-line-height-mobile-menu);
+          font-weight: var(--neon-font-weight-mobile-menu);
+          opacity: var(--neon-opacity-mobile-menu-inactive);
+          transition: opacity ease-in-out var(--neon-animation-speed-slow);
+          @include svg.color-with-svg(var(--neon-color-text-primary));
+
+          &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            opacity: 0;
+            height: var(--neon-height-mobile-menu-indicator);
+            transition: opacity ease-in-out var(--neon-animation-speed-slow);
+          }
+        }
+
+        &:hover {
+          .neon-mobile-menu__link-container {
+            opacity: 1;
+
+            &:before {
+              opacity: 1;
+            }
+          }
+        }
+
+        &:focus {
+          .neon-mobile-menu__link-container {
+            opacity: 1;
+          }
+        }
+
+        &.router-link-active {
+          .neon-mobile-menu__link-container {
+            opacity: 1;
+
+            &:before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .neon-icon {
+        width: 24rem;
+        height: 24rem;
+      }
+
+      .neon-link {
+        width: 100%;
+        text-decoration: none;
+        height: var(--neon-height-mobile-menu);
+      }
+
+      &--disabled {
+        .neon-link {
+          .neon-mobile-menu__link-container {
+            opacity: 1;
+            cursor: not-allowed;
+            @include svg.color-with-svg(var(--neon-color-disabled-text));
+          }
+        }
+      }
+    }
+
+    @each $color in palettes.$neon-functional-colors {
+      &.neon-mobile-menu--#{$color} {
+        .neon-mobile-menu__item:not(.neon-mobile-menu__item--disabled) {
+          .neon-link {
+            .neon-mobile-menu__link-container:before {
+              background-color: var(--neon-color-#{$color});
+            }
+
+            &:focus {
+              background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-mobile-menu-focus));
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/sass/components/_note.scss

@@ -43,7 +43,7 @@
 
         .neon-note__title {
           @if ($color == low-contrast or $color == high-contrast or $color == neutral) {
-            color: var(--neon-color-text-strong);
+            color: var(--neon-color-text-primary);
           } @else {
             color: var(--neon-color-#{$color});
           }

package/src/sass/components/_notification-counter.scss

@@ -15,13 +15,13 @@
     top: -10rem;
     right: -10rem;
     user-select: none;
-    font-weight: var(--neon-font-weight-semi-bold);
+    font-weight: var(--neon-font-weight-medium);
 
     @each $color in palettes.$neon-functional-colors {
       &--#{$color} {
         color: var(--neon-color-inverse);
         @if ($color == high-contrast) {
-          background-color: var(--neon-color-text);
+          background-color: var(--neon-color-text-secondary);
         } @else {
           background-color: var(--neon-color-#{$color});
         }

package/src/sass/components/_number.scss

@@ -32,7 +32,7 @@
           @if (not index(palettes.$neon-neutral-colors, $color)) {
             @include svg.color-with-svg(rgb($number-component-rgb));
           } @else {
-            @include svg.color-with-svg(var(--neon-color-text));
+            @include svg.color-with-svg(var(--neon-color-text-secondary));
           }
 
           &:hover,
@@ -43,7 +43,7 @@
             @if (not index(palettes.$neon-neutral-colors, $color)) {
               @include svg.color-with-svg(rgb($number-component-rgb));
             } @else {
-              @include svg.color-with-svg(var(--neon-color-text));
+              @include svg.color-with-svg(var(--neon-color-text-secondary));
             }
           }
         }

package/src/sass/components/_range-slider.scss

@@ -102,7 +102,7 @@
     &.neon-range-slider__output-range-separator {
       margin-left: var(--neon-space-6);
       margin-right: var(--neon-space-6);
-      font-weight: var(--neon-font-weight-bold);
+      font-weight: var(--neon-font-weight-semi-bold);
       opacity: 0.25;
       top: -1rem;
       position: relative;

package/src/sass/components/_search.scss

@@ -172,7 +172,7 @@
       }
 
       .neon-link {
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
 
       &-container {
@@ -191,7 +191,7 @@
         flex: 1 0 auto;
         user-select: none;
         align-items: center;
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
         font-size: var(--neon-font-size-xs);
         text-transform: uppercase;
         padding: var(--neon-space-12) var(--neon-space-16) var(--neon-space-4);

package/src/sass/components/_select.scss

@@ -21,6 +21,20 @@
             background-color: rgba(var(--neon-rgb-#{$color}), 0.05);
           }
         }
+
+        &:not(.neon-select--disabled):focus-within {
+          .neon-dropdown__button.neon-button--input {
+            border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-#{$color});
+          }
+        }
+      }
+    }
+
+    &--with-placeholder {
+      .neon-dropdown__button {
+        color: var(--neon-color-placeholder);
+        font-style: var(--neon-font-style-placeholder);
+        font-weight: var(--neon-font-weight-placeholder);
       }
     }
 
@@ -54,7 +68,7 @@
       }
 
       .neon-link {
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
 
       &--disabled {
@@ -86,7 +100,7 @@
         flex: 1 0 auto;
         user-select: none;
         align-items: center;
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
         font-size: var(--neon-font-size-xs);
         text-transform: uppercase;
         padding: var(--neon-space-12) var(--neon-space-16) var(--neon-space-4);