@nuvoui/core 1.1.8 → 1.2.1

package/src/styles/utilities/_borders.scss

@@ -1,29 +1,294 @@
-// _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
+// -----------------------------------------------
 
-.border { @include border(1); }
-.border-0 { @include border(0); }
+// 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
+  }
+}
 
-@each $i in 0 1 2 4 8 {
-    .border-#{$i} { @include border($i); }
+@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));
+  }
 }
 
-.rounded { @include rounded(0.25rem); }
-.square { @include rounded(0) }
-.pill { @include rounded(9999px); }
+@mixin border-right($val) { 
+  $val: if($val == 0, $val, $val + px); 
   
-// Responsive Position Classes
-@each $breakpoint, $width in $breakpoints {
+  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
+// -----------------------------------------------
+@if $generate-utility-classes {
+  // Basic border classes (all sides)
+  .border { @include border(1); }
+  .border-0 { @include border(0); }
+
+  // All sides border width
+  @each $width in $border-widths {
+    .border-#{$width} { @include border($width); }
+  }
+
+  // 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); }
+    
+    // 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); }
+      // 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,18 +81,19 @@
   container-name: $name;
 }
 
+@if $generate-utility-classes {
+  // Utility classes
+  .container-inline-size {
+    container-type: inline-size;
+  }
 
-// Utility classes
-.container-inline-size {
-  container-type: inline-size;
-}
-
-.container-size {
-  container-type: size;
-}
+  .container-size {
+    container-type: size;
+  }
 
-@each $name in ('main', 'sidebar', 'card', 'section') {
-  .container-#{$name} {
-    container-name: $name;
+  @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
@@ -77,61 +77,63 @@
 @mixin overflow-y-auto { overflow-y: auto; }
 
 
-// Base Classes 
-.hide { @include hide; }
-.show { @include show; }
-.block { @include block; }
-.inline { @include inline; }
-.inline-block { @include inline-block; }
-.visible { @include visible; }
-.invisible { @include invisible; }
-.collapse { @include collapse; }
-.contents { @include contents; }
-.overflow-hidden { @include overflow-hidden; }
-.overflow-visible { @include overflow-visible; }
-.overflow-scroll { @include overflow-scroll; }
-.overflow-auto { @include overflow-auto; }
-.overflow-x-hidden { @include overflow-x-hidden; }
-.overflow-y-hidden { @include overflow-y-hidden; }
-.overflow-x-scroll { @include overflow-x-scroll; }
-.overflow-y-scroll { @include overflow-y-scroll; }
-.overflow-x-auto { @include overflow-x-auto; }
-.overflow-y-auto { @include overflow-y-auto; }
-
-
-.d {
-  &-tbl { @include d-tbl; }
-  &-tbl-row { @include d-tbl-row; }
-  &-tbl-cell { @include d-tbl-cell; }
-}
-                 
-// Responsive Variants
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    .hide\@#{$breakpoint} { @include hide; }
-    .show\@#{$breakpoint} { @include show; }
-    .block\@#{$breakpoint} { @include block; }
-    .inline\@#{$breakpoint} { @include inline; }
-    .inline-block\@#{$breakpoint} { @include inline-block; }
-    .visible\@#{$breakpoint} { @include visible; }
-    .invisible\@#{$breakpoint} { @include invisible; }
-    .collapse\@#{$breakpoint} { @include collapse; }
-    .contents\@#{$breakpoint} { @include contents; }
-    .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
-    .overflow-visible\@#{$breakpoint} { @include overflow-visible; }
-    .overflow-scroll\@#{$breakpoint} { @include overflow-scroll; }
-    .overflow-auto\@#{$breakpoint} { @include overflow-auto; }
-    .overflow-x-hidden\@#{$breakpoint} { @include overflow-x-hidden; }
-    .overflow-y-hidden\@#{$breakpoint} { @include overflow-y-hidden; }
-    .overflow-x-scroll\@#{$breakpoint} { @include overflow-x-scroll; }
-    .overflow-y-scroll\@#{$breakpoint} { @include overflow-y-scroll; }
-    .overflow-x-auto\@#{$breakpoint} { @include overflow-x-auto; }
-    .overflow-y-auto\@#{$breakpoint} { @include overflow-y-auto; }
-
-    .d {
-      &-tbl\@#{$breakpoint} { @include d-tbl; }
-      &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
-      &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
+@if $generate-utility-classes {
+  // Base Classes 
+  .hide { @include hide; }
+  .show { @include show; }
+  .block { @include block; }
+  .inline { @include inline; }
+  .inline-block { @include inline-block; }
+  .visible { @include visible; }
+  .invisible { @include invisible; }
+  .collapse { @include collapse; }
+  .contents { @include contents; }
+  .overflow-hidden { @include overflow-hidden; }
+  .overflow-visible { @include overflow-visible; }
+  .overflow-scroll { @include overflow-scroll; }
+  .overflow-auto { @include overflow-auto; }
+  .overflow-x-hidden { @include overflow-x-hidden; }
+  .overflow-y-hidden { @include overflow-y-hidden; }
+  .overflow-x-scroll { @include overflow-x-scroll; }
+  .overflow-y-scroll { @include overflow-y-scroll; }
+  .overflow-x-auto { @include overflow-x-auto; }
+  .overflow-y-auto { @include overflow-y-auto; }
+
+
+  .d {
+    &-tbl { @include d-tbl; }
+    &-tbl-row { @include d-tbl-row; }
+    &-tbl-cell { @include d-tbl-cell; }
+  }
+                  
+  // Responsive Variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      .hide\@#{$breakpoint} { @include hide; }
+      .show\@#{$breakpoint} { @include show; }
+      .block\@#{$breakpoint} { @include block; }
+      .inline\@#{$breakpoint} { @include inline; }
+      .inline-block\@#{$breakpoint} { @include inline-block; }
+      .visible\@#{$breakpoint} { @include visible; }
+      .invisible\@#{$breakpoint} { @include invisible; }
+      .collapse\@#{$breakpoint} { @include collapse; }
+      .contents\@#{$breakpoint} { @include contents; }
+      .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
+      .overflow-visible\@#{$breakpoint} { @include overflow-visible; }
+      .overflow-scroll\@#{$breakpoint} { @include overflow-scroll; }
+      .overflow-auto\@#{$breakpoint} { @include overflow-auto; }
+      .overflow-x-hidden\@#{$breakpoint} { @include overflow-x-hidden; }
+      .overflow-y-hidden\@#{$breakpoint} { @include overflow-y-hidden; }
+      .overflow-x-scroll\@#{$breakpoint} { @include overflow-x-scroll; }
+      .overflow-y-scroll\@#{$breakpoint} { @include overflow-y-scroll; }
+      .overflow-x-auto\@#{$breakpoint} { @include overflow-x-auto; }
+      .overflow-y-auto\@#{$breakpoint} { @include overflow-y-auto; }
+
+      .d {
+        &-tbl\@#{$breakpoint} { @include d-tbl; }
+        &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
+        &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
+      }
     }
   }
 }