@nuvoui/core 1.3.4 → 1.4.0

package/src/styles/utilities/_colors.scss

@@ -6,158 +6,38 @@
 @use "sass:list";
 @use "sass:string";
 
-@use "../abstracts/config" as *;
-@use "../abstracts/functions" as FN;
-
-// Color Validation
-@function is-valid-color($color) {
-  @return meta.type-of($color) == "color";
-}
-
-// Scale Generation Function
-@function create-color-scale($color) {
-  $scale: ();
-  $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);
-  $green: math.div(color.channel($color, "green"), 255);
-  $blue: math.div(color.channel($color, "blue"), 255);
-
-  $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 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
-}
-
-// Find appropriate text color for a background
-@function find-text-color($background) {
-  $luminance: luminance($background);
-  $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);
-}
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../config/colors" as config-color;
+@use "../config/theme-validation" as config-theme;
+@use "../functions/colors" as color-fn;
 
 // Adaptive contrast mixin
 @mixin adaptive-contrast($color) {
-  background-color: $color;
-  color: find-text-color($color);
+    background-color: $color;
+    color: color-fn.find-text-color($color);
 
-  @media (prefers-contrast: more) {
-    $adjusted: if(color.lightness($color) > 50%, color.adjust($color, $lightness: -10%), color.adjust($color, $lightness: 10%));
-
-    background-color: $adjusted;
-    color: find-text-color($adjusted);
-  }
-}
+    @media (prefers-contrast: more) {
+        $adjusted: if(color.lightness($color) > 50%, color.adjust($color, $lightness: -10%), color.adjust($color, $lightness: 10%));
 
-// Generate color scales
-$colors: (
-  "primary": create-color-scale($primary),
-  "secondary": create-color-scale($secondary),
-  "success": create-color-scale($success),
-  "danger": create-color-scale($danger),
-  "warning": create-color-scale($warning),
-  "info": create-color-scale($info),
-);
-
-// Generate scales for primitives
-$colors-primitives: ();
-
-@each $name, $color in $color-primitives {
-  $colors-primitives: map.set($colors-primitives, $name, create-color-scale($color));
+        background-color: $adjusted;
+        color: color-fn.find-text-color($adjusted);
+    }
 }
 
 // todo: documentation
 @mixin bg($color, $shade: 500) {
-  background-color: get-color($color, $shade);
+    background-color: color-fn.get-color($color, $shade);
 }
 
 @mixin text-color($color-name, $shade: 500) {
-  color: get-color($color-name, $shade);
+    color: color-fn.get-color($color-name, $shade);
 }
 
 @mixin text-on-color($color-name, $shade: 500) {
-  color: find-text-color(get-color($color-name, $shade));
+    color: color-fn.find-text-color(color-fn.get-color($color-name, $shade));
 }
 
 @mixin gradient($direction, $colors...) {
-  background-image: linear-gradient($direction, $colors);
+    background-image: linear-gradient($direction, $colors);
 }

package/src/styles/utilities/_cursor.scss

@@ -1,17 +1,17 @@
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../functions/feature-flags" as fn-flags;
 
 @mixin cursor($cursor-value) {
-  cursor: #{$cursor-value};
+    cursor: #{$cursor-value};
 }
 
-@if FN.feature-enabled("cursors") {
-  $cursor-values: ("auto", "pointer", "default", "move", "not-allowed", "wait", "help", "text", "cell", "crosshair", "grabbing", "grab", "zoom-in", "zoom-out", "none", "progress", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "context-menu", "all-scroll");
+@if fn-flags.feature-enabled("cursors") {
+    $cursor-values: ("auto", "pointer", "default", "move", "not-allowed", "wait", "help", "text", "cell", "crosshair", "grabbing", "grab", "zoom-in", "zoom-out", "none", "progress", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "context-menu", "all-scroll");
 
-  // Generate classes for each cursor value
-  @each $value in $cursor-values {
-    #{VAR.$parent-selector} .cursor-#{$value} {
-      @include cursor($value);
+    // Generate classes for each cursor value
+    @each $value in $cursor-values {
+        #{config-flags.$parent-selector} .cursor-#{$value} {
+            @include cursor($value);
+        }
     }
-  }
 }