@aotearoan/neon 19.0.0 → 19.0.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": "19.0.0",
+  "version": "19.0.2",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_badge.scss

@@ -7,11 +7,9 @@
       @each $color in palettes.$neon-functional-colors {
         &.neon-badge--#{$color}:not(.neon-badge--disabled) {
           $neon-badge-color: var(--neon-color-#{$color});
+          color: var(--neon-color-inverse);
           @if ($color == high-contrast) {
-            color: var(--neon-color-inverse);
             $neon-badge-color: var(--neon-color-text);
-          } @else {
-            color: var(--neon-background-color-card);
           }
 
           background: $neon-badge-color;

package/src/sass/components/_button.scss

@@ -229,8 +229,9 @@
     }
 
     border-radius: var(--neon-border-radius-button);
-    font-weight: var(--neon-font-weight-normal);
-    letter-spacing: var(--neon-letter-spacing-m);
+    font-weight: var(--neon-font-weight-button);
+    text-transform: var(--neon-text-transform-button);
+    letter-spacing: var(--neon-letter-spacing-button);
     display: flex;
     align-items: center;
     justify-content: center;

package/src/sass/components/_drawer.scss

@@ -12,7 +12,7 @@
       transition: margin-left ease-in-out var(--neon-animation-speed-slow),
       margin-right ease-in-out var(--neon-animation-speed-slow), margin-top ease-in-out var(--neon-animation-speed-slow),
       margin-bottom ease-in-out var(--neon-animation-speed-slow);
-      background-color: var(--neon-background-color-card);
+      background-color: var(--neon-background-color-drawer);
       box-shadow: var(--neon-box-shadow);
 
       &--full-width {

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

@@ -26,6 +26,7 @@
       user-select: none;
       cursor: pointer;
       transition: none;
+      outline: none;
 
       &--separator-before {
         border-top: var(--neon-border-width-separator-before) var(--neon-border-style) var(--neon-border-color-dropdown);

package/src/sass/components/_dropdown.scss

@@ -49,7 +49,7 @@
       border-radius: var(--neon-border-radius);
       overflow: hidden;
       min-width: calc(100% - 2 * var(--neon-border-width));
-      background-color: var(--neon-background-color-card);
+      background-color: var(--neon-background-color-dropdown-content);
       box-shadow: var(--neon-box-shadow-dropdown);
 
       & > .neon-card-body {

package/src/sass/components/_input.scss

@@ -71,17 +71,8 @@
         &.neon-input--focused {
           .neon-input__text,
           .neon-input__textarea {
-            @if (not index(palettes.$neon-neutral-colors, $color)) {
-              border-color: rgb($input-rgb);
-              background-color: rgba(var(--neon-rgb-#{$color}), 0.03125);
-
-              &::placeholder {
-                color: rgba(var(--neon-rgb-#{$color}), 0.5);
-              }
-            } @else {
-              border-color: rgb($input-rgb);
-              background-color: var(--neon-background-color-input-active);
-            }
+            border-color: rgb($input-rgb);
+            background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
           }
         }
 

package/src/sass/components/_search.scss

@@ -34,7 +34,7 @@
       min-width: 10ch;
 
       input {
-        padding-left: 0;
+        padding-left: var(--neon-space-4);
       }
     }
 
@@ -48,7 +48,7 @@
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
-      border-radius: var(--neon-border-radius);
+      border-radius: var(--neon-border-radius-input);
       padding-left: var(--neon-space-40);
       padding-top: var(--neon-space-2);
       padding-bottom: var(--neon-space-2);
@@ -66,7 +66,11 @@
         &--#{$color} {
           &:focus-within {
             border-color: var(--neon-color-#{$color});
-            background-color: var(--neon-background-color-input-active);
+            background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
+
+            .neon-input .neon-input__text {
+              background-color: transparent;
+            }
           }
         }
       }
@@ -157,6 +161,7 @@
       flex-direction: row;
       user-select: none;
       cursor: pointer;
+      outline: none;
 
       &--separator-before {
         border-top: var(--neon-border-width-separator-before) var(--neon-border-style) var(--neon-border-color-dropdown);

package/src/sass/components/_select.scss

@@ -43,6 +43,7 @@
       flex-direction: row;
       user-select: none;
       cursor: pointer;
+      outline: none;
 
       &--separator-before {
         border-top: var(--neon-border-width-separator-before) var(--neon-border-style) var(--neon-border-color-dropdown);

package/src/sass/variables.scss

@@ -205,6 +205,9 @@
   --neon-border-radius-button: var(--neon-border-radius);
   --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-letter-spacing-button: var(--neon-letter-spacing-m);
 
   /* tabs */
   --neon-border-width-tabs: 4rem;
@@ -276,6 +279,7 @@
 
   /* input */
   --neon-border-radius-input: var(--neon-border-radius);
+  --neon-opacity-input-background-active: 0.03125;
 
   /* skeleton loader */
   --neon-border-radius-skeleton-loader: 12rem;
@@ -502,10 +506,12 @@
     --neon-color-radio-button-bg-active: rgba(var(--neon-rgb-neutral-l3), 0.375);
     --neon-color-radio-button-label: var(--neon-color-neutral-d3);
 
+    /* drawer */
+    --neon-background-color-drawer: var(--neon-background-color-card);
+
     /* input */
     --neon-border-color-input: var(--neon-color-neutral-d2);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
-    --neon-background-color-input-active: var(--neon-color-neutral-d5);
     --neon-color-placeholder: var(--neon-color-low-contrast-d3);
 
     /* drop zone */
@@ -533,6 +539,7 @@
     /* dropdown / dropdown menu / select */
     --neon-border-color-dropdown: var(--neon-color-neutral-d3);
     --neon-box-shadow-dropdown: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) var(--neon-color-neutral-d5);
+    --neon-background-color-dropdown-content: var(--neon-background-color-card);
 
     /* tooltip */
     --neon-box-shadow-tooltip: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) var(--neon-color-neutral-d5);
@@ -563,9 +570,9 @@
     --neon-border-top-footer: none;
 
     /* skeleton loader */
-    --neon-color-loading-1: var(--neon-color-neutral-d3);
-    --neon-color-loading-2: var(--neon-color-neutral-d2);
-    --neon-color-loading-3: rgba(var(--neon-rgb-neutral-d2), 0.5);
+    --neon-color-loading-1: rgb(64, 64, 64);
+    --neon-color-loading-2: rgb(82, 82, 82);
+    --neon-color-loading-3: rgba(82, 82, 82, 0.5);
 
     /* scrollbars */
     --neon-color-scrollbar: rgba(255, 255, 255, 0.05);
@@ -799,6 +806,9 @@
     --neon-opacity-toggle-checked: 0;
     --neon-opacity-toggle-hover: 0.05;
 
+    /* drawer */
+    --neon-background-color-drawer: var(--neon-background-color-card);
+
     /* radio buttons */
     --neon-background-radio-button: none;
     --neon-border-radio-button: var(--neon-border-width) var(--neon-border-style) var(--neon-color-neutral-l3);
@@ -808,7 +818,6 @@
     /* input */
     --neon-border-color-input: var(--neon-color-neutral-l3);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
-    --neon-background-color-input-active: rgba(var(--neon-rgb-high-contrast-l4), 0.5);
     --neon-color-placeholder: var(--neon-color-low-contrast-l3);
 
     /* drop zone */
@@ -836,6 +845,7 @@
     /* dropdown / dropdown menu / select */
     --neon-border-color-dropdown: var(--neon-color-neutral-l4);
     --neon-box-shadow-dropdown: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) rgba(var(--neon-rgb-neutral-d1), 0.5);
+    --neon-background-color-dropdown-content: var(--neon-background-color-card);
 
     /* tooltip */
     --neon-box-shadow-tooltip: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) rgba(var(--neon-rgb-neutral-d1), 0.5);
@@ -866,9 +876,9 @@
     --neon-border-top-footer: none;
 
     /* skeleton loader */
-    --neon-color-loading-1: var(--neon-color-high-contrast-l3);
-    --neon-color-loading-2: rgba(var(--neon-rgb-high-contrast-l2), 0.5);
-    --neon-color-loading-3: var(--neon-color-high-contrast-l2);
+    --neon-color-loading-1: rgb(226, 226, 226);
+    --neon-color-loading-2: rgb(212, 212, 212);
+    --neon-color-loading-3: rgba(212, 212, 212, 0.5);
 
     /* toggle */
     --neon-margin-toggle-option: 1rem;