@aotearoan/neon 25.0.0 → 25.0.1

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

package/src/sass/components/_button.scss

@@ -373,13 +373,13 @@
 
     &.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);
+      border: var(--neon-border-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);
+        border: var(--neon-border-input-disabled);
       }
     }
 

package/src/sass/components/_field-group.scss

@@ -67,7 +67,7 @@
     }
 
     &.neon-field-group--internal {
-      border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+      border: var(--neon-border-input);
       border-radius: var(--neon-border-radius-input);
 
       .neon-input-indicator {

package/src/sass/components/_input.scss

@@ -128,13 +128,12 @@
     &__text,
     &__textarea {
       border-radius: var(--neon-border-radius-input);
-      border: var(--neon-border-width-input) var(--neon-border-style);
+      border: var(--neon-border-input);
       padding: var(--neon-base-space) calc(2 * var(--neon-base-space));
       line-height: var(--neon-line-height-input);
       outline: none;
       font-family: var(--neon-font-family-body);
       width: 100%;
-      border-color: var(--neon-border-color-input);
       color: var(--neon-color-input);
       background-color: var(--neon-background-color-input);
       box-shadow: var(--neon-inset-shadow);

package/src/sass/components/_label.scss

@@ -67,7 +67,7 @@
       @include neon-label-size('l', 1, 'l');
     }
 
-    text-transform: uppercase;
+    text-transform: var(--neon-text-transform-label);
     border-radius: var(--neon-border-radius-label);
     letter-spacing: var(--neon-letter-spacing-s);
     display: flex;

package/src/sass/components/_toggle.scss

@@ -156,7 +156,7 @@
 
       .neon-toggle__label {
         padding: var(--neon-space-16);
-        border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+        border: var(--neon-border-input);
         width: 100%;
         border-radius: var(--neon-border-radius-input);
       }

package/src/sass/variables.scss

@@ -95,6 +95,10 @@
   --neon-border-width-separator-before: 1rem;
   --neon-border-style: solid;
 
+  /* background colors */
+  --neon-background-color-light: var(--neon-color-high-contrast-l4);
+  --neon-background-color-dark: var(--neon-color-neutral-d5);
+
   /* z-index */
   --neon-z-index-below: -1;
   --neon-z-index-default: 0;
@@ -420,6 +424,7 @@
 
   /* label */
   --neon-border-radius-label: 2rem;
+  --neon-text-transform-label: none;
 
   /* badge */
   --neon-background-gradient-angle-badge: 45deg;
@@ -473,7 +478,7 @@
   &.neon-mode--dark {
     --neon-background-color-card: var(--neon-color-neutral-d4);
     --neon-border-card: var(--neon-border);
-    --neon-background-color: var(--neon-color-neutral-d5);
+    --neon-background-color: var(--neon-background-color-dark);
 
     --neon-rgb-text-primary: var(--neon-rgb-text-primary-dark);
     --neon-color-text-primary: var(--neon-color-text-primary-dark);
@@ -687,6 +692,8 @@
     /* input */
     --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-border-color);
+    --neon-border-input: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+    --neon-border-input-disabled: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-disabled-border);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
     --neon-rgb-placeholder: var(--neon-rgb-neutral-d1);
     --neon-color-placeholder: var(--neon-color-neutral-d1);
@@ -829,7 +836,7 @@
   &.neon-mode--light {
     --neon-background-color-card: var(--neon-color-high-contrast-l5);
     --neon-border-card: var(--neon-border);
-    --neon-background-color: var(--neon-color-high-contrast-l4);
+    --neon-background-color: var(--neon-background-color-light);
 
     --neon-rgb-text-primary: var(--neon-rgb-text-primary-light);
     --neon-color-text-primary: var(--neon-color-text-primary-light);
@@ -1043,6 +1050,8 @@
     /* input */
     --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-border-color);
+    --neon-border-input: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+    --neon-border-input-disabled: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-disabled-border);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
     --neon-rgb-placeholder: var(--neon-rgb-neutral-l1);
     --neon-color-placeholder: var(--neon-color-neutral-l1);