@nuvoui/core 1.3.1 → 1.3.3

package/src/styles/utilities/_borders.scss

@@ -5,6 +5,8 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:string" as str;
+@use "sass:list";
+
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
@@ -38,13 +40,18 @@ $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-base)) {
+@mixin border($val, $style: solid, $color: var(--border-color)) {
   $val: FN.fix-units($val);
 
+  --border-size: #{$val};
+
   border-width: $val;
   @if $val != 0 {
     border-style: $style;
     border-color: $color;
+
+    --border-style: #{$style};
+    --border-color: #{$color};
   }
 }
 
@@ -53,8 +60,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-top-width: $val;
   @if $val != 0 {
-    border-top-style: solid;
-    border-top-color: var(--border);
+    border-top-style: var(--border-style, solid);
+    border-top-color: var(--border-color);
   }
 }
 
@@ -63,8 +70,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-right-width: $val;
   @if $val != 0 {
-    border-right-style: solid;
-    border-right-color: var(--border);
+    border-right-style: var(--border-style, solid);
+    border-right-color: var(--border-color);
   }
 }
 
@@ -73,8 +80,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-bottom-width: $val;
   @if $val != 0 {
-    border-bottom-style: solid;
-    border-bottom-color: var(--border);
+    border-bottom-style: var(--border-style, solid);
+    border-bottom-color: var(--border-color);
   }
 }
 
@@ -83,8 +90,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-left-width: $val;
   @if $val != 0 {
-    border-left-style: solid;
-    border-left-color: var(--border);
+    border-left-style: var(--border-style, solid);
+    border-left-color: var(--border-color);
   }
 }
 
@@ -160,319 +167,124 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 @mixin pill {
   @include rounded(9999px);
-} // todo: doc missing
+}
 
-// -----------------------------------------------
-// UTILITY CLASSES
-// -----------------------------------------------
 @if FN.feature-enabled("borders") {
   // Basic border classes (all sides)
-  .border {
+  #{VAR.$parent-selector} .border {
     @include border(1);
   }
 
-  .border-0 {
+  // Common shortcuts for single-side borders
+  #{VAR.$parent-selector} .border-0 {
     @include border(0);
   }
 
-  // All sides border width
-  @each $width in VAR.$border-widths {
-    .border-#{$width} {
-      @include border($width);
-    }
+  #{VAR.$parent-selector} .border-t {
+    @include border-top(1);
+  }
+
+  #{VAR.$parent-selector} .border-r {
+    @include border-right(1);
+  }
+
+  #{VAR.$parent-selector} .border-b {
+    @include border-bottom(1);
+  }
+
+  #{VAR.$parent-selector} .border-l {
+    @include border-left(1);
   }
 
   // Directional border width
   @each $width in VAR.$border-widths {
-    .border-t-#{$width} {
+    #{VAR.$parent-selector} .border-#{$width},
+    #{VAR.$parent-selector} .hover\:border-#{$width}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$width}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$width}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$width} {
+      @include border($width);
+    }
+    #{VAR.$parent-selector} .border-t-#{$width} {
       @include border-top($width);
     }
-    .border-r-#{$width} {
+    #{VAR.$parent-selector} .border-r-#{$width} {
       @include border-right($width);
     }
-    .border-b-#{$width} {
+    #{VAR.$parent-selector} .border-b-#{$width} {
       @include border-bottom($width);
     }
-    .border-l-#{$width} {
+    #{VAR.$parent-selector} .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 {
+  #{VAR.$parent-selector} .rounded {
     @include rounded;
-  } // Default rounded
-  .square {
+  }
+  #{VAR.$parent-selector} .square {
     @include rounded(0);
   } // Alias for no radius
 
   @each $name, $value in VAR.$border-radii {
-    .rounded-#{$name} {
+    #{VAR.$parent-selector} .rounded-#{$name} {
       @include rounded($value);
     }
-  }
-
-  // Directional border radius
-  @each $name, $value in VAR.$border-radii {
-    .rounded-t-#{$name} {
+    #{VAR.$parent-selector} .rounded-t-#{$name} {
       @include rounded-t($value);
     }
-    .rounded-r-#{$name} {
+    #{VAR.$parent-selector} .rounded-r-#{$name} {
       @include rounded-r($value);
     }
-    .rounded-b-#{$name} {
+    #{VAR.$parent-selector} .rounded-b-#{$name} {
       @include rounded-b($value);
     }
-    .rounded-l-#{$name} {
+    #{VAR.$parent-selector} .rounded-l-#{$name} {
       @include rounded-l($value);
     }
 
     // Individual corners
-    .rounded-tl-#{$name} {
+    #{VAR.$parent-selector} .rounded-tl-#{$name} {
       @include rounded-tl($value);
     }
-    .rounded-tr-#{$name} {
+    #{VAR.$parent-selector} .rounded-tr-#{$name} {
       @include rounded-tr($value);
     }
-    .rounded-br-#{$name} {
+    #{VAR.$parent-selector} .rounded-br-#{$name} {
       @include rounded-br($value);
     }
-    .rounded-bl-#{$name} {
+    #{VAR.$parent-selector} .rounded-bl-#{$name} {
       @include rounded-bl($value);
     }
   }
 
   // Pill shape (alias for full radius)
-  .pill {
+  #{VAR.$parent-selector} .pill {
     @include pill;
   }
 
   // Border styles - these override the default solid style if needed
   @each $style in $border-styles {
-    .border-#{$style} {
+    #{VAR.$parent-selector} .border-#{$style},
+    #{VAR.$parent-selector} .hover\:border-#{$style}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$style}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$style}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\: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 VAR.$border-widths {
-    .hover\:border-#{$width}:hover {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .hover\:border-#{$style}:hover {
-      @include border-style($style);
+  @each $color-name in VAR.$color-names-with-basic {
+    #{VAR.$parent-selector} .border-#{$color-name},
+    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$color-name}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$color-name}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
+      @include border-color(var(--#{$color-name}));
     }
   }
 
-  // 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 VAR.$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 VAR.$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
   // -----------------------------------------------
@@ -481,33 +293,33 @@ $border-styles: (solid, dashed, dotted, double, none);
     @media (min-width: #{$width}) {
       // Border width responsive
       @each $val in VAR.$border-widths {
-        .border-#{$val}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .border-#{$val}\@#{$breakpoint} {
           @include border($val);
         }
       }
 
       // Common shortcuts for responsive
-      .border\@#{$breakpoint} {
+      #{VAR.$parent-selector} .border\@#{$breakpoint} {
         @include border(1);
       }
-      .border-0\@#{$breakpoint} {
+      #{VAR.$parent-selector} .border-0\@#{$breakpoint} {
         @include border(0);
       }
 
       // Border radius responsive
       @each $name, $value in VAR.$border-radii {
-        .rounded-#{$name}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .rounded-#{$name}\@#{$breakpoint} {
           @include rounded($value);
         }
       }
 
-      .rounded\@#{$breakpoint} {
+      #{VAR.$parent-selector} .rounded\@#{$breakpoint} {
         @include rounded;
       }
-      .square\@#{$breakpoint} {
+      #{VAR.$parent-selector} .square\@#{$breakpoint} {
         @include rounded(0);
       }
-      .pill\@#{$breakpoint} {
+      #{VAR.$parent-selector} .pill\@#{$breakpoint} {
         @include pill;
       }
     }

package/src/styles/utilities/_colors.scss

@@ -4,8 +4,10 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:list";
+@use "sass:string";
 
 @use "../abstracts/config" as *;
+@use "../abstracts/functions" as FN;
 
 // Color Validation
 @function is-valid-color($color) {
@@ -15,39 +17,76 @@
 // Scale Generation Function
 @function create-color-scale($color) {
   $scale: ();
-  $stops: (
-    50: 95%,
-    100: 85%,
-    200: 75%,
-    300: 65%,
-    400: 55%,
-    500: 50%,
-    // Base color
-    600: 45%,
-    700: 35%,
-    800: 25%,
-    900: 15%,
-  );
-
-  @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);
-    }
+  $stops: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
 
+  @each $shade in $stops {
+    $adjusted-color: get-color($color, $shade);
     $scale: map.set($scale, $shade, $adjusted-color);
   }
 
   @return $scale;
 }
 
+@function get-color($color, $shade: 500) {
+  @if FN.is-css-var($color) {
+    @if $shade != 500 {
+      @warn "CSS variables do not support shade values. ";
+    }
+    @return FN.get-css-var($color);
+  }
+
+  $colors-list: (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "danger": $danger,
+    "warning": $warning,
+    "info": $info,
+  );
+
+  @if meta.type-of($shade) == "string" {
+    $shade: FN.to-number($shade);
+  }
+
+  @if FN.get-type($color) == "color" {
+    $color: FN.to-color($color);
+  } @else if map.has-key($colors-list, $color) {
+    $color: map.get($colors-list, $color);
+  } @else if map.has-key($color-primitives, $color) {
+    $color: map.get($color-primitives, $color);
+  } @else {
+    @warn "Unexpected color value: #{$color}";
+    @return currentColor;
+  }
+
+  $x1: 50; // First input value
+  $y1: 95; // First output percentage
+  $x2: 900; // Second input value
+  $y2: 15; // Second output percentage
+  // Calculate slope (m) of the line
+  $slope: math.div($y2 - $y1, $x2 - $x1);
+
+  // Calculate y-intercept (b) of the line: y = mx + b
+  $y-intercept: $y1 - ($slope * $x1);
+
+  // Calculate the output percentage using the linear equation: y = mx + b
+  $result: ($slope * $shade) + $y-intercept;
+  $lightness: math.percentage(math.div($result, 100));
+  $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);
+  }
+
+  @return $adjusted-color;
+}
+
 // Luminance calculation for contrast
 @function luminance($color) {
   $red: math.div(color.channel($color, "red"), 255);
@@ -64,7 +103,16 @@
 // Find appropriate text color for a background
 @function find-text-color($background) {
   $luminance: luminance($background);
-  @return if($luminance > 0.55, #000, #fff);
+  $dark-color: #000;
+  @if map.has-key($light-theme, "text-color") {
+    $dark-color: map.get($light-theme, "text-color");
+  }
+
+  $light-color: #fff;
+  @if map.has-key($light-theme, "text-inverted") {
+    $light-color: map.get($light-theme, "text-inverted");
+  }
+  @return if($luminance > 0.55, $dark-color, $light-color);
 }
 
 // Adaptive contrast mixin
@@ -98,12 +146,18 @@ $colors-primitives: ();
 }
 
 // todo: documentation
-@mixin bg($color) {
-  background-color: $color;
+@mixin bg($color, $shade: 500) {
+  background-color: get-color($color, $shade);
+}
+
+@mixin text-color($color-name, $shade: 500) {
+  color: get-color($color-name, $shade);
 }
-@mixin color($color) {
-  color: $color;
+
+@mixin text-on-color($color-name, $shade: 500) {
+  color: find-text-color(get-color($color-name, $shade));
 }
+
 @mixin gradient($direction, $colors...) {
   background-image: linear-gradient($direction, $colors);
 }