@aotearoan/neon 19.0.2 → 20.0.0

package/dist/src/components/user-input/select/NeonSelect.d.ts

@@ -318,6 +318,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -342,6 +345,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -601,6 +607,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -625,6 +634,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -700,6 +712,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         default: null;
                     };
                     inverse: {
+                        /**
+                         * A list of options to render in the select.
+                         */
                         type: BooleanConstructor;
                         default: boolean;
                     };
@@ -724,6 +739,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         default: null;
                     };
                     inverse: {
+                        /**
+                         * A list of options to render in the select.
+                         */
                         type: BooleanConstructor;
                         default: boolean;
                     };
@@ -1108,6 +1126,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -1132,6 +1153,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -1391,6 +1415,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -1415,6 +1442,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -1490,6 +1520,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         default: null;
                     };
                     inverse: {
+                        /**
+                         * A list of options to render in the select.
+                         */
                         type: BooleanConstructor;
                         default: boolean;
                     };
@@ -1514,6 +1547,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         default: null;
                     };
                     inverse: {
+                        /**
+                         * A list of options to render in the select.
+                         */
                         type: BooleanConstructor;
                         default: boolean;
                     };
@@ -2082,6 +2118,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -2106,6 +2145,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -2365,6 +2407,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -2389,6 +2434,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: null;
                 };
                 inverse: {
+                    /**
+                     * A list of options to render in the select.
+                     */
                     type: BooleanConstructor;
                     default: boolean;
                 };
@@ -2464,6 +2512,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         default: null;
                     };
                     inverse: {
+                        /**
+                         * A list of options to render in the select.
+                         */
                         type: BooleanConstructor;
                         default: boolean;
                     };
@@ -2488,6 +2539,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         default: null;
                     };
                     inverse: {
+                        /**
+                         * A list of options to render in the select.
+                         */
                         type: BooleanConstructor;
                         default: boolean;
                     };
@@ -2555,6 +2609,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         inverse: {
+            /**
+             * A list of options to render in the select.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -2579,6 +2636,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         inverse: {
+            /**
+             * A list of options to render in the select.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -2687,6 +2747,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: null;
             };
             inverse: {
+                /**
+                 * A list of options to render in the select.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };
@@ -2711,6 +2774,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: null;
             };
             inverse: {
+                /**
+                 * A list of options to render in the select.
+                 */
                 type: BooleanConstructor;
                 default: boolean;
             };

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": "20.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));
     }

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/_input.scss

@@ -130,7 +130,7 @@
       font-family: var(--neon-font-family-body);
       width: 100%;
       border-color: var(--neon-border-color-input);
-      color: var(--neon-color-text);
+      olor: var(--neon-color-text-secondary);
       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/_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

@@ -54,7 +54,7 @@
       }
 
       .neon-link {
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
 
       &--disabled {
@@ -86,7 +86,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/_slider.scss

@@ -107,7 +107,7 @@ $neon-width-slider-tooltip: 201rem;
         font-size: var(--neon-font-size-s);
         font-variant: tabular-nums;
         line-height: 1;
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
         letter-spacing: 0;
         padding: var(--neon-space-8);
         border-radius: var(--neon-border-radius-slider-tooltip);

package/src/sass/components/_stepper.scss

@@ -90,7 +90,7 @@
       &--active,
       &--has-value {
         .neon-stepper__step-title {
-          color: var(--neon-color-text-strong);
+          color: var(--neon-color-text-primary);
         }
       }
 
@@ -102,7 +102,7 @@
         }
 
         .neon-stepper__step-title {
-          font-weight: var(--neon-font-weight-bold);
+          font-weight: var(--neon-font-weight-semi-bold);
         }
       }
     }
@@ -118,7 +118,7 @@
 
         .neon-stepper__step--active, {
           .neon-stepper__step-title {
-            font-weight: var(--neon-font-weight-bold);
+            font-weight: var(--neon-font-weight-semi-bold);
             color: var(--neon-color-#{$color});
           }
         }