@aotearoan/neon 23.2.1 → 23.2.2

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": "23.2.1",
+  "version": "23.2.2",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_field.scss

@@ -1,8 +1,6 @@
 @use '../includes/responsive';
 @use '../includes/typography';
 
-$message-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
-
 @mixin field {
   .neon-field {
     width: 100%;
@@ -36,7 +34,7 @@ $message-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
       .neon-field__message {
         bottom: 0;
         font-size: var(--neon-font-size-s);
-        min-height: $message-height;
+        min-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
         text-transform: none;
         letter-spacing: initial;
         font-weight: var(--neon-font-weight-normal);

package/src/sass/components/_input.scss

@@ -148,6 +148,11 @@
         color: var(--neon-color-placeholder);
       }
 
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 50rem var(--neon-background-color-autofill) inset;
+        -webkit-text-fill-color: var(--neon-color-autofill);
+      }
+
       &-counter {
         align-self: flex-start;
         user-select: none;

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

@@ -7,34 +7,6 @@
     padding-bottom: calc(var(--neon-space-20) + var(--neon-height-mobile-menu) + var(--neon-border-width));
     gap: var(--neon-gutter);
 
-    @include layout.min-height(
-                    100,
-                    'var(--neon-top-nav-height-desktop) + var(--neon-border-width-top-nav) + var(--neon-footer-height-desktop) + var(--neon-border-width-footer)'
-    );
-
-    @include responsive.responsive(tablet) {
-      @include layout.min-height(
-                      100,
-                      'var(--neon-top-nav-height-tablet) + var(--neon-border-width-top-nav) + var(--neon-footer-height-tablet) + var(--neon-border-width-footer)'
-      );
-    }
-
-    @include responsive.responsive(mobile-large) {
-      @include layout.min-height(100);
-    }
-
-    &.neon-page-container--hide-nav {
-      @include layout.min-height(100, 'var(--neon-footer-height-desktop) + var(--neon-border-width-footer)');
-
-      @include responsive.responsive(tablet) {
-        @include layout.min-height(100, 'var(--neon-footer-height-tablet) + var(--neon-border-width-footer)');
-      }
-
-      @include responsive.responsive(mobile-large) {
-        @include layout.min-height(100);
-      }
-    }
-
     &.neon-page-container--with-sticky-buttons {
       padding-bottom: calc(
               var(--neon-height-page-container-sticky-buttons) + var(--neon-space-20) + var(--neon-height-mobile-menu) +
@@ -44,7 +16,7 @@
 
     h1,
     .neon-page-container__title {
-      padding-top: var(--neon-gutter);
+      padding-top: calc(1.5 * var(--neon-gutter));
       margin-bottom: 0;
     }
 
@@ -52,4 +24,23 @@
       padding-bottom: var(--neon-space-96);
     }
   }
+
+  /* All min-height logic */
+  @include responsive.responsive(larger-than-mobile-large) {
+    .neon-page--with-footer {
+      .neon-page-container {
+        min-height: calc(100% - (var(--neon-footer-height) + var(--neon-border-width-footer)));
+      }
+    }
+  }
+
+  @include responsive.responsive(mobile-large) {
+    .neon-page-container {
+      &--hide-nav {
+        min-height: 100%;
+        --neon-height-mobile-menu: 0rem;
+        --neon-height-mobile-menu-indicator: 0rem;
+      }
+    }
+  }
 }

package/src/sass/components/_page.scss

@@ -8,28 +8,13 @@
     width: 100vw;
     @include layout.min-height(100);
 
-    &--with-top-nav .neon-page__container {
-      @include responsive.responsive(larger-than-tablet) {
-        padding-top: var(--neon-top-nav-height-desktop);
-        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height) + var(--neon-border-width-footer)');
-      }
-
-      @include responsive.responsive(tablet) {
-        padding-top: var(--neon-top-nav-height-tablet);
-        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height) + var(--neon-border-width-footer)');
-      }
-
-      @include responsive.responsive(mobile-large) {
-        padding-top: var(--neon-top-nav-height-mobile);
-        @include layout.min-height(100, 'var(--neon-top-nav-height) + var(--neon-border-width-top-nav) + var(--neon-footer-height) + var(--neon-border-width-footer)');
-      }
-    }
-
     .neon-page__content-wrapper {
       flex-direction: row;
     }
 
     .neon-page__container {
+      @include layout.min-height(100);
+
       @include responsive.responsive(larger-than-tablet) {
         padding-left: var(--neon-gutter-desktop);
         padding-right: var(--neon-gutter-desktop);
@@ -50,6 +35,10 @@
       }
     }
 
+    &--with-top-nav .neon-page__container {
+      @include layout.min-height(100, 'var(--neon-top-nav-height)');
+    }
+
     &--left {
       &.neon-page--with-side-nav {
         @include responsive.responsive(larger-than-tablet) {

package/src/sass/components/_switch.scss

@@ -69,6 +69,8 @@
       user-select: none;
       display: flex;
       align-items: center;
+      white-space: nowrap;
+      font-weight: var(--neon-font-weight-semi-bold);
     }
 
     &__input {

package/src/sass/components/_tabs.scss

@@ -137,9 +137,9 @@
 
     .neon-tabs__menu-items--full-width-mobile {
       @include responsive.responsive(mobile-large) {
-        margin: 0 calc(-2 * var(--neon-gutter-mobile));
-        max-width: calc(100% + 4 * var(--neon-gutter-mobile));
-        width: calc(100% + 4 * var(--neon-gutter-mobile));
+        margin: 0 calc(-1 * var(--neon-gutter-mobile));
+        max-width: calc(100% + 2 * var(--neon-gutter-mobile));
+        width: calc(100% + 2 * var(--neon-gutter-mobile));
       }
     }
 

package/src/sass/palette.scss

@@ -16,7 +16,7 @@
   --neon-rgb-disabled-border-light: 220, 220, 220;
   --neon-rgb-disabled-text-light: 200, 200, 200;
   --neon-rgb-low-contrast-l5: 221, 221, 221;
-  --neon-rgb-low-contrast-l4: 201, 201, 201;
+  --neon-rgb-low-contrast-l4: 208, 208, 208;
   --neon-rgb-low-contrast-l3: 176, 176, 176;
   --neon-rgb-low-contrast-l2: 145, 145, 145;
   --neon-rgb-low-contrast-l1: 114, 114, 114;

package/src/sass/variables.scss

@@ -138,13 +138,13 @@
   --neon-font-weight-semi-bold: 600;
   --neon-font-weight-bold: 700;
 
-  --neon-h6-weight: var(--neon-font-weight-normal);
+  --neon-h6-weight: var(--neon-font-weight-medium);
   --neon-h5-weight: var(--neon-font-weight-medium);
   --neon-h4-weight: var(--neon-font-weight-medium);
   --neon-h3-weight: var(--neon-font-weight-semi-bold);
   --neon-h2-weight: var(--neon-font-weight-semi-bold);
-  --neon-h1-weight: var(--neon-font-weight-bold);
-  --neon-h0-weight: var(--neon-font-weight-bold);
+  --neon-h1-weight: var(--neon-font-weight-semi-bold);
+  --neon-h0-weight: var(--neon-font-weight-semi-bold);
 
   --neon-font-weight-em: var(--neon-font-weight-extra-light);
   --neon-font-weight-strong: var(--neon-font-weight-medium);
@@ -299,7 +299,7 @@
   --neon-border-radius-button-xl: var(--neon-border-radius);
   --neon-border-width-outline-button: 1rem;
   --neon-text-transform-button: none;
-  --neon-font-weight-button: var(--neon-font-weight-normal);
+  --neon-font-weight-button: var(--neon-font-weight-medium);
   --neon-letter-spacing-button: var(--neon-letter-spacing-m);
 
   /* tabs */
@@ -496,7 +496,7 @@
     --neon-background-color-warn: var(--neon-color-warn-d1);
     --neon-background-color-error: var(--neon-color-error-d1);
 
-    --neon-border-color: var(--neon-color-neutral-d3);
+    --neon-border-color: var(--neon-color-low-contrast-d5);
     --neon-border: var(--neon-border-width) var(--neon-border-style) var(--neon-border-color);
     --neon-border-hr: 1rem var(--neon-border-style) var(--neon-border-color);
     --neon-color-hr: var(--neon-border-color);
@@ -640,9 +640,11 @@
 
     /* input */
     --neon-color-input: var(--neon-color-text-secondary);
-    --neon-border-color-input: var(--neon-color-neutral-d2);
+    --neon-border-color-input: var(--neon-border-color);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
     --neon-color-placeholder: var(--neon-color-low-contrast-d3);
+    --neon-background-color-autofill: var(--neon-color-primary-d5);
+    --neon-color-autofill: var(--neon-color-text-secondary);
 
     /* drop zone */
     --neon-rgb-drop-zone-background: var(--neon-rgb-neutral-d5);
@@ -813,7 +815,7 @@
     --neon-background-color-warn: var(--neon-color-warn-l1);
     --neon-background-color-error: var(--neon-color-error-l1);
 
-    --neon-border-color: var(--neon-color-neutral-l4);
+    --neon-border-color: var(--neon-color-low-contrast-l4);
     --neon-border: var(--neon-border-width) var(--neon-border-style) var(--neon-border-color);
     --neon-border-hr: 1rem var(--neon-border-style) var(--neon-border-color);
     --neon-color-hr: var(--neon-border-color);
@@ -957,9 +959,11 @@
 
     /* input */
     --neon-color-input: var(--neon-color-text-secondary);
-    --neon-border-color-input: var(--neon-color-neutral-l3);
+    --neon-border-color-input: var(--neon-border-color);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
     --neon-color-placeholder: var(--neon-color-low-contrast-l3);
+    --neon-background-color-autofill: var(--neon-color-primary-l5);
+    --neon-color-autofill: var(--neon-color-text-secondary);
 
     /* drop zone */
     --neon-rgb-drop-zone-background: var(--neon-rgb-high-contrast-l4);