@nuvoui/core 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",

package/src/styles/abstracts/_config.scss

@@ -76,7 +76,7 @@ $light-theme: (
   "bg-base": #fbfafc,
   "bg-alternate": #1a1a1a,
   "bg-surface": #fff,
-  "border-base": #e5e7eb,
+  "border-base": #d3d5d9,
   "text-color": #1a1a1a,
   "text-muted": #1a1a1a8a,
   "text-subtle": #1a1a1a50,

package/src/styles/base/_base.scss

@@ -107,7 +107,7 @@ body#{$parent-selector} {
 #{$parent-selector} input[type="search"],
 #{$parent-selector} textarea {
   padding: 0.5rem;
-  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
   border-radius: 0.25rem;
   width: 100%; // Full width
   font-family: var(--font-family-base);
@@ -128,7 +128,7 @@ body#{$parent-selector} {
 // Selects
 #{$parent-selector} select {
   padding: 0.5rem;
-  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
   border-radius: 0.25rem;
   width: 100%; // Full width
   font-family: var(--font-family-base);
@@ -144,14 +144,14 @@ body#{$parent-selector} {
 #{$parent-selector} blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
-  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-base, var(--secondary));
   font-style: italic;
 }
 
 // Horizontal Rule
 #{$parent-selector} hr {
   border: none;
-  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
+  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
   margin: 1rem 0;
 }
 

package/src/styles/utilities/_borders.scss

@@ -40,7 +40,7 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 // Core Border Mixins - improved to include style and color by default
 // SKIP Documentation
-@mixin border($val, $style: solid, $color: var(--border-color)) {
+@mixin border($val, $style: solid, $color: var(--border-base)) {
   $val: FN.fix-units($val);
 
   --border-size: #{$val};
@@ -61,7 +61,7 @@ $border-styles: (solid, dashed, dotted, double, none);
   border-top-width: $val;
   @if $val != 0 {
     border-top-style: var(--border-style, solid);
-    border-top-color: var(--border-color);
+    border-top-color: var(--border-base);
   }
 }
 
@@ -71,7 +71,7 @@ $border-styles: (solid, dashed, dotted, double, none);
   border-right-width: $val;
   @if $val != 0 {
     border-right-style: var(--border-style, solid);
-    border-right-color: var(--border-color);
+    border-right-color: var(--border-base);
   }
 }
 
@@ -81,7 +81,7 @@ $border-styles: (solid, dashed, dotted, double, none);
   border-bottom-width: $val;
   @if $val != 0 {
     border-bottom-style: var(--border-style, solid);
-    border-bottom-color: var(--border-color);
+    border-bottom-color: var(--border-base);
   }
 }
 
@@ -91,7 +91,7 @@ $border-styles: (solid, dashed, dotted, double, none);
   border-left-width: $val;
   @if $val != 0 {
     border-left-style: var(--border-style, solid);
-    border-left-color: var(--border-color);
+    border-left-color: var(--border-base);
   }
 }
 
@@ -196,6 +196,16 @@ $border-styles: (solid, dashed, dotted, double, none);
     @include border-left(1);
   }
 
+  #{VAR.$parent-selector} .border-x {
+    @include border-left(1);
+    @include border-right(1);
+  }
+
+  #{VAR.$parent-selector} .border-y {
+    @include border-top(1);
+    @include border-bottom(1);
+  }
+
   // Directional border width
   @each $width in VAR.$border-widths {
     #{VAR.$parent-selector} .border-#{$width},
@@ -217,6 +227,16 @@ $border-styles: (solid, dashed, dotted, double, none);
     #{VAR.$parent-selector} .border-l-#{$width} {
       @include border-left($width);
     }
+
+    #{VAR.$parent-selector} .border-x-#{$width} {
+      @include border-left(1);
+      @include border-right(1);
+    }
+
+    #{VAR.$parent-selector} .border-y-#{$width} {
+      @include border-top($width);
+      @include border-bottom($width);
+    }
   }
 
   // Border radius classes

package/src/styles/utilities/_display.scss

@@ -120,10 +120,6 @@
 }
 
 @if FN.feature-enabled("displays") {
-  #{VAR.$parent-selector} .hide {
-    @include hide;
-  }
-
   #{VAR.$parent-selector} .show {
     @include show;
   }
@@ -170,6 +166,14 @@
     @include collapse;
   }
 
+  #{VAR.$parent-selector} .hide {
+    @include hide;
+  }
+
+  #{VAR.$parent-selector} .hidden {
+    display: none !important;
+  }
+
   #{VAR.$parent-selector} .overflow-hidden {
     @include overflow-hidden;
   }

package/src/styles/utilities/_typography.scss

@@ -258,40 +258,10 @@
   }
 
   // Generate font weight utilities
-  #{VAR.$parent-selector} .font-thin#{$suffix} {
-    @include font(thin);
-  }
-
-  #{VAR.$parent-selector} .font-extralight#{$suffix} {
-    @include font(extralight);
-  }
-
-  #{VAR.$parent-selector} .font-light#{$suffix} {
-    @include font(light);
-  }
-
-  #{VAR.$parent-selector} .font-normal#{$suffix} {
-    @include font(normal);
-  }
-
-  #{VAR.$parent-selector} .font-medium#{$suffix} {
-    @include font(medium);
-  }
-
-  #{VAR.$parent-selector} .font-semibold#{$suffix} {
-    @include font(semibold);
-  }
-
-  #{VAR.$parent-selector} .font-bold#{$suffix} {
-    @include font(bold);
-  }
-
-  #{VAR.$parent-selector} .font-extrabold#{$suffix} {
-    @include font(extrabold);
-  }
-
-  #{VAR.$parent-selector} .font-black#{$suffix} {
-    @include font(black);
+  @each $size, $val in VAR.$font-weights {
+    #{VAR.$parent-selector} .font-#{$size}#{$suffix} {
+      @include font($size);
+    }
   }
 
   // Generate line height utilities