@nuvoui/core 1.1.8 → 1.2.0

package/src/styles/utilities/_borders.scss

@@ -1,29 +1,293 @@
-// _spacing.scss
+// _borders.scss
+// Border utility classes for NuvoUI
 
 @use 'sass:math';
-@use './variables' as *;
+@use 'sass:map';
+@use '../abstracts'  as *;
 
-// todo: mixins mising and also finalize .b .bb or not to .b
-@mixin border($val) { $val: if($val == 0, $val, $val + px); border-width: $val; }
-@mixin rounded($val) { border-radius: $val; }
+// -----------------------------------------------
+// MIXINS
+// -----------------------------------------------
 
+// Core Border Mixins - improved to include style and color by default
+@mixin border($val) { 
+  $val: if($val == 0, $val, $val + px); 
+  
+  border-width: $val; 
+  @if $val != 0 {
+    border-style: solid; // Apply solid style by default when width > 0
+    border-color: var(--border, var(--border)); // Apply default color
+  }
+}
+
+@mixin border-top($val) { 
+  $val: if($val == 0, $val, $val + px); 
+  
+  border-top-width: $val; 
+  @if $val != 0 {
+    border-top-style: solid;
+    border-top-color: var(--border, var(--border));
+  }
+}
+
+@mixin border-right($val) { 
+  $val: if($val == 0, $val, $val + px); 
+  
+  border-right-width: $val; 
+  @if $val != 0 {
+    border-right-style: solid;
+    border-right-color: var(--border, var(--border));
+  }
+}
+
+@mixin border-bottom($val) { 
+  $val: if($val == 0, $val, $val + px); 
+  
+  border-bottom-width: $val; 
+  @if $val != 0 {
+    border-bottom-style: solid;
+    border-bottom-color: var(--border, var(--border));
+  }
+}
+
+@mixin border-left($val) { 
+  $val: if($val == 0, $val, $val + px); 
+
+  border-left-width: $val; 
+  @if $val != 0 {
+    border-left-style: solid;
+    border-left-color: var(--border, var(--border));
+  }
+}
+
+// Border Radius Mixins
+@mixin rounded($val: map.get($border-radii, 'md')) { 
+  border-radius: $val; 
+}
+
+@mixin rounded-t($val) { 
+  border-top-left-radius: $val;
+  border-top-right-radius: $val;
+}
+
+@mixin rounded-r($val) { 
+  border-top-right-radius: $val;
+  border-bottom-right-radius: $val;
+}
+
+@mixin rounded-b($val) { 
+  border-bottom-left-radius: $val;
+  border-bottom-right-radius: $val;
+}
+
+@mixin rounded-l($val) { 
+  border-top-left-radius: $val;
+  border-bottom-left-radius: $val;
+}
+
+@mixin rounded-tl($val) { border-top-left-radius: $val; }
+@mixin rounded-tr($val) { border-top-right-radius: $val; }
+@mixin rounded-br($val) { border-bottom-right-radius: $val; }
+@mixin rounded-bl($val) { border-bottom-left-radius: $val; }
+
+// Border Style and Color
+@mixin border-style($style) { border-style: $style; }
+@mixin border-color($color) { border-color: $color; }
+
+// Combined border properties
+@mixin border-all($width, $style, $color) {
+  border-width: $width;
+  border-style: $style;
+  border-color: $color;
+}
+
+// -----------------------------------------------
+// VARIABLES
+// -----------------------------------------------
+
+// Common border width values that are most useful
+$border-widths: (0, 1, 2, 4, 8);
+
+// Common border radius values that are most useful
+$border-radii: (
+  'xs': 0.25rem,
+  'sm': 0.375rem,
+  'md': 0.5rem,
+  'lg': 0.75rem,
+  'xl': 1rem,
+  '2xl': 1.25rem,
+  'full': 9999px,
+  'none': 0
+);
+
+// Common border styles
+$border-styles: (solid, dashed, dotted, double, none);
+
+// -----------------------------------------------
+// UTILITY CLASSES
+// -----------------------------------------------
+
+// Basic border classes (all sides)
 .border { @include border(1); }
 .border-0 { @include border(0); }
 
-@each $i in 0 1 2 4 8 {
-    .border-#{$i} { @include border($i); }
+// All sides border width
+@each $width in $border-widths {
+  .border-#{$width} { @include border($width); }
 }
 
-.rounded { @include rounded(0.25rem); }
-.square { @include rounded(0) }
-.pill { @include rounded(9999px); }
+// Directional border width
+@each $width in $border-widths {
+  .border-t-#{$width} { @include border-top($width); }
+  .border-r-#{$width} { @include border-right($width); }
+  .border-b-#{$width} { @include border-bottom($width); }
+  .border-l-#{$width} { @include border-left($width); }
+}
+
+// Common shortcuts for single-side borders
+.border-t { @include border-top(1); }
+.border-r { @include border-right(1); }
+.border-b { @include border-bottom(1); }
+.border-l { @include border-left(1); }
+
+// Border radius classes
+.rounded { @include rounded; } // Default rounded
+.square { @include rounded(0); } // Alias for no radius
+
+@each $name, $value in $border-radii {
+  .rounded-#{$name} { @include rounded($value); }
+}
+
+// Directional border radius
+@each $name, $value in $border-radii {
+  .rounded-t-#{$name} { @include rounded-t($value); }
+  .rounded-r-#{$name} { @include rounded-r($value); }
+  .rounded-b-#{$name} { @include rounded-b($value); }
+  .rounded-l-#{$name} { @include rounded-l($value); }
   
-// Responsive Position Classes
+  // Individual corners
+  .rounded-tl-#{$name} { @include rounded-tl($value); }
+  .rounded-tr-#{$name} { @include rounded-tr($value); }
+  .rounded-br-#{$name} { @include rounded-br($value); }
+  .rounded-bl-#{$name} { @include rounded-bl($value); }
+}
+
+// Pill shape (alias for full radius)
+.pill { @include rounded(9999px); }
+
+// Border styles - these override the default solid style if needed
+@each $style in $border-styles {
+  .border-#{$style} { @include border-style($style); }
+}
+
+// Border colors - these override the default color if needed
+.border-default { @include border-color(var(--border)); }
+.border-light { @include border-color(var(--border-light-color)); }
+.border-dark { @include border-color(var(--border-dark-color)); }
+.border-primary { @include border-color(var(--primary)); }
+.border-secondary { @include border-color(var(--secondary)); }
+.border-success { @include border-color(var(--success)); }
+.border-danger { @include border-color(var(--danger)); }
+.border-warning { @include border-color(var(--warning)); }
+.border-info { @include border-color(var(--info)); }
+
+// Common combined border utilities (style + color)
+.border-primary-solid {
+  @include border-style(solid);
+  @include border-color(var(--primary));
+}
+
+.border-danger-dashed {
+  @include border-style(dashed);
+  @include border-color(var(--danger));
+}
+
+// -----------------------------------------------
+// HOVER, ACTIVE, AND FOCUS STATES
+// -----------------------------------------------
+
+// Hover state border classes
+@each $width in $border-widths {
+  .hover\:border-#{$width}:hover { @include border($width); }
+}
+
+@each $style in $border-styles {
+  .hover\:border-#{$style}:hover { @include border-style($style); }
+}
+
+// Border colors on hover
+.hover\:border-default:hover { @include border-color(var(--border)); }
+.hover\:border-light:hover { @include border-color(var(--border-light-color)); }
+.hover\:border-dark:hover { @include border-color(var(--border-dark-color)); }
+.hover\:border-primary:hover { @include border-color(var(--primary)); }
+.hover\:border-secondary:hover { @include border-color(var(--secondary)); }
+.hover\:border-success:hover { @include border-color(var(--success)); }
+.hover\:border-danger:hover { @include border-color(var(--danger)); }
+.hover\:border-warning:hover { @include border-color(var(--warning)); }
+.hover\:border-info:hover { @include border-color(var(--info)); }
+
+// Active state border classes
+@each $width in $border-widths {
+  .active\:border-#{$width}:active { @include border($width); }
+}
+
+@each $style in $border-styles {
+  .active\:border-#{$style}:active { @include border-style($style); }
+}
+
+// Border colors on active state
+.active\:border-default:active { @include border-color(var(--border)); }
+.active\:border-light:active { @include border-color(var(--border-light-color)); }
+.active\:border-dark:active { @include border-color(var(--border-dark-color)); }
+.active\:border-primary:active { @include border-color(var(--primary)); }
+.active\:border-secondary:active { @include border-color(var(--secondary)); }
+.active\:border-success:active { @include border-color(var(--success)); }
+.active\:border-danger:active { @include border-color(var(--danger)); }
+.active\:border-warning:active { @include border-color(var(--warning)); }
+.active\:border-info:active { @include border-color(var(--info)); }
+
+// Focus state border classes
+@each $width in $border-widths {
+  .focus\:border-#{$width}:focus { @include border($width); }
+}
+
+@each $style in $border-styles {
+  .focus\:border-#{$style}:focus { @include border-style($style); }
+}
+
+// Border colors on focus
+.focus\:border-default:focus { @include border-color(var(--border)); }
+.focus\:border-light:focus { @include border-color(var(--border-light-color)); }
+.focus\:border-dark:focus { @include border-color(var(--border-dark-color)); }
+.focus\:border-primary:focus { @include border-color(var(--primary)); }
+.focus\:border-secondary:focus { @include border-color(var(--secondary)); }
+.focus\:border-success:focus { @include border-color(var(--success)); }
+.focus\:border-danger:focus { @include border-color(var(--danger)); }
+.focus\:border-warning:focus { @include border-color(var(--warning)); }
+.focus\:border-info:focus { @include border-color(var(--info)); }
+
+// -----------------------------------------------
+// RESPONSIVE CLASSES
+// -----------------------------------------------
+
 @each $breakpoint, $width in $breakpoints {
-    @media (min-width: #{$width}) {
-        @each $i in 0 2 3 4 5 10 15 20 25 {
-            .rounded-#{$i}\@#{$breakpoint} { @include border($i); }
-        }
-        .rounded\@#{$breakpoint} { @include border(0.25rem); }
+  @media (min-width: #{$width}) {
+    // Border width responsive
+    @each $val in $border-widths {
+      .border-#{$val}\@#{$breakpoint} { @include border($val); }
+    }
+    
+    // Common shortcuts for responsive
+    .border\@#{$breakpoint} { @include border(1); }
+    .border-0\@#{$breakpoint} { @include border(0); }
+    
+    // Border radius responsive
+    @each $name, $value in $border-radii {
+      .rounded-#{$name}\@#{$breakpoint} { @include rounded($value); }
     }
+    
+    .rounded\@#{$breakpoint} { @include rounded; }
+    .square\@#{$breakpoint} { @include rounded(0); }
+    .pill\@#{$breakpoint} { @include rounded(9999px); }
+  }
 }

package/src/styles/utilities/_colors.scss

@@ -1,16 +1,18 @@
+// _colors.scss - Color functions and scale generation
 @use "sass:math";
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
 
-@use './variables' as *;
+@use '../abstracts'  as *;
 
 // Color Validation
 @function is-valid-color($color) {
     @return meta.type-of($color) == 'color';
 }
 
+// Scale Generation Function
 @function create-color-scale($color) {
     $scale: ();
     $stops: (
@@ -25,62 +27,61 @@
       800: 25%,
       900: 15%
     );
-  
-    @each $stop, $mix in $stops {
-      $value: if($stop == 500,
-        $color,
-        if($stop < 500,
-          color.mix(white, $color, $mix),
-          color.mix(black, $color, (100% - $mix))
-        )
-      );
-      $scale: map.set($scale, $stop, $value);
+
+    @each $shade, $lightness in $stops {
+        $adjusted-color: $color;
+        
+        @if $shade < 500 {
+            // Lighter shades: mix with white
+            $mix-percentage: math.div($lightness - 50%, 50%) * 100%;
+            $adjusted-color: color.mix(white, $color, $mix-percentage);
+        } @else if $shade > 500 {
+            // Darker shades: mix with black
+            $mix-percentage: math.div(50% - $lightness, 50%) * 100%;
+            $adjusted-color: color.mix(black, $color, $mix-percentage);
+        }
+        
+        $scale: map.set($scale, $shade, $adjusted-color);
     }
     
     @return $scale;
-  }
-
-
-// Color Relationship Functions
-@function find-text-color($color) {
-    $luminance: luminance($color);
-    @return if($luminance > 0.55, #000, #fff);
 }
 
-// Luminance Calculation
+// Luminance calculation for contrast
 @function luminance($color) {
-    $r: color.red($color) / 255;
-    $g: color.green($color) / 255;
-    $b: color.blue($color) / 255;
+  $red: math.div(color.channel($color, "red"), 255);
+  $green: math.div(color.channel($color, "green"), 255);
+  $blue: math.div(color.channel($color, "blue"), 255);
     
-    $r: if($r <= 0.0393, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
-    $g: if($g <= 0.0393, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
-    $b: if($b <= 0.0393, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));
+    $red: if($red <= 0.0393, math.div($red, 12.92), math.pow((math.div($red + 0.055, 1.055)), 2.4));
+    $green: if($green <= 0.0393, math.div($green, 12.92), math.pow((math.div($green + 0.055, 1.055)), 2.4));
+    $blue: if($blue <= 0.0393, math.div($blue, 12.92), math.pow((math.div($blue + 0.055, 1.055)), 2.4));
     
-    @return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
+    @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Find appropriate text color for a background
+@function find-text-color($background) {
+    $luminance: luminance($background);
+    @return if($luminance > 0.55, #000, #fff);
 }
 
-// Context-Aware Colors
+// Adaptive contrast mixin
 @mixin adaptive-contrast($color) {
-    background: $color;
+    background-color: $color;
     color: find-text-color($color);
     
     @media (prefers-contrast: more) {
-        $high-contrast: adjust-contrast($color, 20%);
-        
-        background: $high-contrast;
-    }
-}
-
-// Filter Mixins
-@mixin backdrop-filter($value) {
-    backdrop-filter: $value;
-}
+        $adjusted: if(color.lightness($color) > 50%, 
+            color.adjust($color, $lightness: -10%), 
+            color.adjust($color, $lightness: 10%));
 
-@mixin filter($value) {
-    filter: $value;
+        background-color: $adjusted;
+        color: find-text-color($adjusted);
+    }
 }
 
+// Generate color scales
 $colors: (
   'primary': create-color-scale($primary),
   'secondary': create-color-scale($secondary),
@@ -88,17 +89,35 @@ $colors: (
   'danger': create-color-scale($danger),
   'warning': create-color-scale($warning),
   'info': create-color-scale($info)
-); 
+);
 
-// Glass Effect Utilities
-.glass-effect {
-    @include backdrop-filter(blur(10px));
+// Generate scales for primitives
+$colors-primitives: ();
 
-    background-color: rgb(255 255 255 / 10%);
+@each $name, $color in $color-primitives {
+    $colors-primitives: map.set($colors-primitives, $name, create-color-scale($color));
 }
 
-.frosted-glass {
-    @include backdrop-filter(blur(5px) saturate(180%));
-    
-    background-color: rgb(255 255 255 / 80%);
+// todo: documentation
+@mixin bg($color) {
+    & {
+        background-color: $color;
+    }
+}
+@mixin color($color) {
+    & {
+        color: $color;
+    }
+}
+@mixin gradient($direction, $colors...) {
+    background-image: linear-gradient($direction, $colors);
 }
+
+// Filter Mixins
+@mixin backdrop-filter($value) {
+    backdrop-filter: $value;
+}
+
+@mixin filter($value) {
+    filter: $value;
+} 

package/src/styles/utilities/_container-queries.scss

@@ -1,8 +1,8 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use './variables' as *;
-@use './functions' as FN;
-
+@use "sass:map";
+@use "sass:meta";
+@use "../abstracts" as *;
+@use "../abstracts/functions" as FN;
+ 
 /**
  * Container Query Mixins
  *
@@ -48,13 +48,13 @@
 @mixin container-only($breakpoint, $containerName: null) {
   $min: FN.get-breakpoint-value($breakpoint);
   $next-breakpoint: null;
-  
+
   @each $name, $width in $breakpoints {
     @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
       $next-breakpoint: $width;
     }
   }
-  
+
   @if $next-breakpoint {
     @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $next-breakpoint } - 0.02px)) {
       @content;
@@ -81,7 +81,6 @@
   container-name: $name;
 }
 
-
 // Utility classes
 .container-inline-size {
   container-type: inline-size;
@@ -91,8 +90,8 @@
   container-type: size;
 }
 
-@each $name in ('main', 'sidebar', 'card', 'section') {
+@each $name in ("main", "sidebar", "card", "section") {
   .container-#{$name} {
     container-name: $name;
   }
-}
+}

package/src/styles/utilities/_display.scss

@@ -1,8 +1,8 @@
 // Section: Utilities
 // Module: Display
 
-@use './variables' as *;
-@use './functions' as FN;
+@use '../abstracts'  as *;
+@use '../abstracts/functions' as FN;
 
 /**
  * Display Utilities