@aotearoan/neon 28.7.5 → 28.7.6

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

package/src/sass/components/_drawer.scss

@@ -6,6 +6,7 @@
     &__container {
       position: fixed;
       overflow: hidden;
+      padding: var(--neon-space-20);
       margin: 0;
       z-index: var(--neon-z-index-top);
       @include layout.padding($multiplier: 0.75);
@@ -111,6 +112,7 @@
         pointer-events: auto;
         z-index: var(--neon-z-index-top);
         transition: opacity ease-in-out calc(0.5 * var(--neon-animation-speed-fast));
+        padding: var(--neon-space-20);
       }
     }
 

package/src/sass/components/_field.scss

@@ -4,6 +4,7 @@
 @mixin field {
   .neon-field {
     width: 100%;
+    margin-bottom: var(--neon-margin-bottom-field);
 
     label.neon-field__label {
       margin-bottom: 0;

package/src/sass/components/_footer.scss

@@ -65,4 +65,10 @@
       }
     }
   }
+
+  .neon-page--center {
+    .neon-footer__container {
+      margin: 0 auto;
+    }
+  }
 }

package/src/sass/components/_page.scss

@@ -14,7 +14,7 @@
 
     .neon-page__container {
       @include layout.min-height(100);
-      overflow-x: hidden;
+      overflow: hidden;
 
       @include responsive.responsive(larger-than-tablet) {
         padding-left: var(--neon-gutter-desktop);
@@ -54,6 +54,7 @@
     &--center {
       .neon-page__container {
         margin: 0 auto;
+        min-width: 100vw;
       }
     }
 

package/src/sass/components/_splash-loader.scss

@@ -13,7 +13,7 @@
     z-index: var(--neon-z-index-top);
 
     &--with-overlay {
-      background-color: var(--neon-background-color-overlay);
+      background-color: var(--neon-background-color);
     }
 
     &--fullscreen {

package/src/sass/variables-dark.scss

@@ -2,16 +2,18 @@
 * DARK THEME VARIABLES
 **********************/
 .neon.neon-mode--dark {
+  -webkit-tap-highlight-color: var(--neon-color-low-contrast-d5);
+
   /**
    * @component NeonCard
    * Background color of the card.
    */
-  --neon-background-color-card: var(--neon-color-neutral-d4);
+  --neon-background-color-card: var(--neon-color-high-contrast-d5);
   /**
    * @component NeonCard
    * Card border.
    */
-  --neon-border-card: var(--neon-border);
+  --neon-border-card: none;
   /**
    * Default background color. This is generally the background color of the page.
    */
@@ -753,7 +755,7 @@
   /**
    * HTML pre element background color.
    */
-  --neon-background-color-pre: var(--neon-color-neutral-d3);
+  --neon-background-color-pre: var(--neon-color-high-contrast-d4);
 
 
   /* toggle */
@@ -1162,7 +1164,7 @@
    * @component NeonDrawer,NeonModal,NeonDialog
    * Overlay background color when focussed content is open.
    */
-  --neon-background-color-overlay: rgba(var(--neon-rgb-neutral-d5), 0.75);
+  --neon-background-color-overlay: rgba(var(--neon-rgb-inverse), .75);
   /**
    * @component NeonDrawer,NeonModal,NeonDialog
    * Opaque overlay background color when focussed content is open.
@@ -1276,12 +1278,12 @@
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator.
    */
-  --neon-color-image-carousel-nav-indicator: var(--neon-color-text-primary);
+  --neon-color-image-carousel-nav-indicator: var(--neon-color-neutral-d1);
   /**
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator when in expanded mode.
    */
-  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-text-primary);
+  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-neutral-d1);
   /**
    * @component NeonImageCarousel
    * Color of the buttons in expanded mode.
@@ -1291,12 +1293,12 @@
    * @component NeonImageCarousel
    * Color of the disabled buttons in expanded mode.
    */
-  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d4);
+  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-disabled-text);
   /**
    * @component NeonImageCarousel
    * Background color of the buttons in expanded mode.
    */
-  --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d5);
+  --neon-background-color-image-carousel-expanded-button: var(--neon-color-neutral-d4);
   /**
    * @component NeonImageCarousel
    * Color of the image label in expanded mode.
@@ -1306,7 +1308,7 @@
    * @component NeonImageCarousel
    * Text shadow in expanded mode. This is necessary to make the text readable on top of the image in all cases.
    */
-  --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-inverse);
+  --neon-text-shadow-image-carousel-expanded: none;
 
 
   /* tree menu */

package/src/sass/variables-global.scss

@@ -17,7 +17,7 @@
    * The maximum page width - topnav, footer and page content will be limited to this width for better layout and
    * usability (does not include side nav).
    */
-  --neon-max-width-page: 1920rem;
+  --neon-max-width-page: 1536rem;
 
   /** standardized spacings 1rem = 1px **/
   /** 1rem spacing **/
@@ -200,12 +200,12 @@
    * The background color for light mode, prefer <em>--neon-background-color</em> unless this is required for a
    * specific use case on dark mode.
    */
-  --neon-background-color-light: var(--neon-color-high-contrast-l4);
+  --neon-background-color-light: var(--neon-color-high-contrast-l5);
   /**
    * The background color for dark mode, prefer <em>--neon-background-color</em> unless this is required for a
    * specific use case on light mode.
    */
-  --neon-background-color-dark: var(--neon-color-neutral-d5);
+  --neon-background-color-dark: var(--neon-color-high-contrast-d5);
 
   /** z-index **/
   /** z-index below the default */
@@ -716,7 +716,7 @@
    * @component NeonMenu
    * Menu font weight
    */
-  --neon-font-weight-menu: var(--neon-font-weight-bold);
+  --neon-font-weight-menu: var(--neon-font-weight-medium);
   /**
    * @component NeonMenu
    * Menu text transformation
@@ -1039,7 +1039,7 @@
    * @component NeonNote
    * Font weight of the note text
    */
-  --neon-font-weight-note-text: var(--neon-font-weight-medium);
+  --neon-font-weight-note-text: var(--neon-font-weight-normal);
   /**
    * @component NeonNote
    * Font size of the note title
@@ -1077,12 +1077,12 @@
    * @component NeonLink
    * Default underline thickness of the link
    */
-  --neon-text-decoration-thickness-link: 1rem;
+  --neon-text-decoration-thickness-link: 1.5rem;
   /**
    * @component NeonLink
    * Default underline thickness of the link when hovered
    */
-  --neon-text-decoration-thickness-link-hover: 1rem;
+  --neon-text-decoration-thickness-link-hover: 1.5rem;
   /**
    * @component NeonLink
    * Offset of the link underline from the text
@@ -1161,7 +1161,7 @@
    * @component NeonInput,NeonTextarea,NeonNumber,NeonPassword
    * Background color opacity when input is active
    */
-  --neon-opacity-input-background-active: 0.03125;
+  --neon-opacity-input-background-active: 0;
 
   /**
    * @component NeonInput,NeonTextarea,NeonNumber,NeonPassword
@@ -1356,7 +1356,7 @@
    * @component NeonImageDevice
    * Image carousel background blur radius when opened full screen
    */
-  --neon-blur-radius-image-carousel: 5px;
+  --neon-blur-radius-image-carousel: 0;
 
   /* tree menu */
   /**
@@ -1398,7 +1398,7 @@
    * @component NeonTreeMenu
    * Tree menu padding left for items (indent)
    */
-  --neon-padding-left-tree-menu-items: 0;
+  --neon-padding-left-tree-menu-items: calc(var(--neon-space-24) + var(--neon-space-4));
 
   /* sticky buttons */
   /**
@@ -1442,4 +1442,12 @@
    * Set the min width of the card list grid card
    */
   --neon-min-width-card-list-grid-card: 288rem;
+
+
+  /* Field component */
+  /**
+   * @component NeonField
+   * Set the margin below the field component
+   */
+  --neon-margin-bottom-field: var(--neon-space-8);
 }

package/src/sass/variables-light.scss

@@ -2,6 +2,7 @@
 * LIGHT THEME VARIABLES
 *********************/
 .neon.neon-mode--light {
+  -webkit-tap-highlight-color: var(--neon-color-low-contrast-l5);
   /**
    * @component NeonCard
    * Background color of the card.
@@ -11,7 +12,7 @@
    * @component NeonCard
    * Card border.
    */
-  --neon-border-card: var(--neon-border);
+  --neon-border-card: none;
   /**
    * Default background color. This is generally the background color of the page.
    */
@@ -753,7 +754,7 @@
   /**
    * HTML pre element background color.
    */
-  --neon-background-color-pre: var(--neon-color-neutral-d5);
+  --neon-background-color-pre: var(--neon-color-high-contrast-d4);
 
 
   /* toggle */
@@ -1162,7 +1163,7 @@
    * @component NeonDrawer,NeonModal,NeonDialog
    * Overlay background color when focussed content is open.
    */
-  --neon-background-color-overlay: rgba(var(--neon-rgb-neutral-d5), 0.75);
+  --neon-background-color-overlay: rgba(var(--neon-rgb-text-primary), .5);
   /**
    * @component NeonDrawer,NeonModal,NeonDialog
    * Opaque overlay background color when focussed content is open.
@@ -1276,27 +1277,27 @@
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator.
    */
-  --neon-color-image-carousel-nav-indicator: var(--neon-color-primary);
+  --neon-color-image-carousel-nav-indicator: var(--neon-color-neutral-l1);
   /**
    * @component NeonImageCarousel
    * Color of the carousel navigation indicator when in expanded mode.
    */
-  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-inverse);
+  --neon-color-image-carousel-expanded-nav-indicator: var(--neon-color-neutral-l1);
   /**
    * @component NeonImageCarousel
    * Color of the buttons in expanded mode.
    */
-  --neon-color-image-carousel-expanded-button: var(--neon-color-inverse);
+  --neon-color-image-carousel-expanded-button: var(--neon-color-text-primary);
   /**
    * @component NeonImageCarousel
    * Color of the disabled buttons in expanded mode.
    */
-  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-low-contrast-d2);
+  --neon-color-image-carousel-expanded-button-disabled: var(--neon-color-disabled-text);
   /**
    * @component NeonImageCarousel
    * Background color of the buttons in expanded mode.
    */
-  --neon-background-color-image-carousel-expanded-button: var(--neon-color-low-contrast-d3);
+  --neon-background-color-image-carousel-expanded-button: var(--neon-color-neutral-l4);
   /**
    * @component NeonImageCarousel
    * Color of the image label in expanded mode.
@@ -1306,7 +1307,7 @@
    * @component NeonImageCarousel
    * Text shadow in expanded mode. This is necessary to make the text readable on top of the image in all cases.
    */
-  --neon-text-shadow-image-carousel-expanded: 1px 1px 2px var(--neon-color-text-primary);
+  --neon-text-shadow-image-carousel-expanded: none;
 
 
   /* tree menu */