@nuvoui/core 1.1.3 → 1.1.5

package/src/styles/utilities/_colors.scss

@@ -6,86 +6,44 @@
 
 @use './variables' as *;
 
-
-// todo: only functions and may be not needed
-
-@each $color-name, $color-value in $colors {
-    .text-#{$color-name} { color: $color-value; }
-    .bg-#{$color-name} { background-color: $color-value; }
-}
-
-// Modern Color System 
 // Color Validation
 @function is-valid-color($color) {
     @return meta.type-of($color) == 'color';
 }
 
-// Modern Color Spaces
-@function to-lch($color) {
-    @if not is-valid-color($color) {
-        @error "Invalid color provided to to-lch";
-    }
-    @return color.adjust($color, $space: lch);
-}
-
-@function adaptive-color($color, $lightness-shift) {
-    @return color.adjust($color, $space: lch, $lightness: $lightness-shift);
-}
-
-// Semantic Color System
-@function get-surface-color($color, $elevation) {
-    $lch-color: to-lch($color);
-    @return color.adjust($lch-color, 
-        $lightness: if($elevation > 0, 5 * $elevation, 0)
-    );
-}
-
-// Color Harmony Generation
-@function complementary($color) {
-    @return color.adjust($color, 180);
-}
-
-@function triadic($color) {
-    @return (
-        $color,
-        color.adjust($color, 120),
-        color.adjust($color, 240)
+@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%
     );
-}
-
-@function split-complementary($color) {
-    @return (
+  
+    @each $stop, $mix in $stops {
+      $value: if($stop == 500,
         $color,
-        color.adjust($color, 150),
-        color.adjust($color, 210)
-    );
-}
-
-@function get-accent-palette($primary, $accent-angle: 45deg) {
-    $lch: to-lch($primary);
-    @return (
-        subtle: color.adjust($lch, $lightness: 15%, $hue: $accent-angle),
-        vibrant: color.adjust($lch, $saturation: 20%, $hue: $accent-angle * 2)
-    );
-}
-
-// Color Scale Generation
-@function create-scale($color, $steps: 9) {
-    $scale: ();
-    $lch-color: to-lch($color);
-    
-    @for $i from 0 through $steps {
-        $lightness: 95 - ($i * (90 / $steps));
-        $new-color: color.adjust($lch-color, $lightness: $lightness);
-        $scale: list.append($scale, $new-color);
+        if($stop < 500,
+          color.mix(white, $color, $mix),
+          color.mix(black, $color, (100% - $mix))
+        )
+      );
+      $scale: map.set($scale, $stop, $value);
     }
     
     @return $scale;
-}
+  }
+
 
 // Color Relationship Functions
-@function find-text-color($background) {
-    $luminance: luminance($background);
+@function find-text-color($color) {
+    $luminance: luminance($color);
     @return if($luminance > 0.55, #000, #fff);
 }
 
@@ -102,26 +60,13 @@
     @return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
 }
 
-// Contrast Calculations
-@function get-contrast-ratio($foreground, $background) {
-    $l1: luminance($foreground) + 0.05;
-    $l2: luminance($background) + 0.05;
-    @return if($l1 > $l2, $l1 / $l2, $l2 / $l1);
-}
-
-// Color Validation
-@function has-sufficient-contrast($text, $background) {
-    $contrast: get-contrast-ratio($text, $background);
-    @return $contrast >= 4.5;
-}
-
 // Context-Aware Colors
-@mixin adaptive-contrast($background) {
-    background: $background;
-    color: find-text-color($background);
+@mixin adaptive-contrast($color) {
+    background: $color;
+    color: find-text-color($color);
     
     @media (prefers-contrast: more) {
-        $high-contrast: adjust-contrast($background, 20%);
+        $high-contrast: adjust-contrast($color, 20%);
         
         background: $high-contrast;
     }
@@ -136,6 +81,15 @@
     filter: $value;
 }
 
+$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)
+); 
+
 // Glass Effect Utilities
 .glass-effect {
     @include backdrop-filter(blur(10px));

package/src/styles/utilities/_functions.scss

@@ -1,5 +1,8 @@
 @use 'sass:string';
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use 'variables' as *;
 
 @function strip-unit($value) {
   @return math.div($value, ($value * 0 + 1));
@@ -56,4 +59,126 @@
   
   // Return empty string if no unit found
   @return '';
+}
+
+@if $enable-debuger {
+    .NuvoUI-Debugger-Wrapper {
+        color: #fff;
+        font-family: Arial, sans-serif;
+        position: fixed;
+        z-index: 999999;
+        inset: 10px auto auto 10px;
+        pointer-events: none;
+
+        &.top-left {
+            inset: 10px auto auto 10px;
+            text-align: left;
+        }
+
+        &.top-right {
+            inset: 10px 10px auto auto;
+            text-align: right;
+        }
+
+        &.bottom-left {
+            inset: auto auto 10px 10px;
+            text-align: left;
+        }
+
+        &.bottom-right {
+            inset: auto 10px 10px auto;
+            text-align: right;
+        }
+
+        .NuvoUI-Debugger-Main, .NuvoUI-Debugger{
+            padding: 10px;
+            background-color: rgb(0 0 0 / 80%);
+            border-radius: 5px;
+            border: 1px solid green;
+            box-shadow: 0 0 2px 0 #fff;
+            pointer-events: none;
+        }
+
+        .NuvoUI-Debugger-Main {
+            $breakpoint-keys: map.keys($breakpoints);
+            $total: list.length($breakpoint-keys);
+
+            &::before,
+            &::after {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
+
+            &::before {
+                font-weight: bold;
+            }
+
+            @for $i from 1 through $total {
+                $current: list.nth($breakpoint-keys, $i);
+                $current-width: map.get($breakpoints, $current);
+
+                @if $i == 1 {
+                    @media (max-width: $current-width) {
+                        &::before {
+                            content: "Screen: #{$current}";
+                        }
+                    }
+                } @else {
+                    $prev: list.nth($breakpoint-keys, $i - 1);
+                    $prev-width: map.get($breakpoints, $prev);
+
+                    @media (min-width: $prev-width) and (max-width: ($current-width - 1)) {
+                        &::before {
+                            content: "Screen: #{$current}";
+                        }
+                    }
+                }
+            }
+
+            &::after {
+                content: attr(data-size);
+            }
+        }
+
+        .NuvoUI-Debugger {
+            margin-top: 10px;
+
+            &::before,
+            &::after {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
+
+            &::before {
+                font-weight: bold;
+                content: attr(data-element);
+            }
+
+            &::after {
+                content: attr(data-size);
+            }
+        }
+
+        .NuvoUI-Debugger-Close {
+            color: #fff;
+            cursor: pointer;
+            font-size: 14px;
+            pointer-events: auto;
+            position: absolute;
+            right: 0;
+            top: 0;
+            background: #00800199;
+            border-radius: 20px;
+            height: 14px;
+            width: 14px;
+            line-height: 14px;
+            text-align: center;
+
+            &:hover {
+                background: #008001;
+            }
+        }
+    }
 }

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

@@ -28,8 +28,28 @@
 }
 
 @mixin media-between($lower, $upper) {
-  @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
-    @media screen and (min-width: map.get($breakpoints, $lower)) and (max-width: (map.get($breakpoints, $upper) - 0.02px)) {
+
+  $-lower: null;
+  $-upper: null;
+
+  @if map.has-key($breakpoints, $lower) {
+    $-lower: map.get($breakpoints, $lower);
+  } @else if meta.type-of($lower) == number {
+    $-lower: $lower - 0.02px;
+  } @else {
+    @warn 'Unknown lower breakpoint: #{$lower}';
+  }
+
+  @if map.has-key($breakpoints, $upper) {
+    $-upper: map.get($breakpoints, $upper);
+  } @else if meta.type-of($upper) == number {
+    $-upper: $upper - 0.02px;
+  } @else {
+    @warn 'Unknown uppper breakpoint: #{$upper}';
+  }
+  
+  @if $-lower and $-upper {
+    @media screen and (min-width: $-lower) and (max-width: $-upper) {
       @content;
     }
   }
@@ -80,21 +100,17 @@
   }
 }
 
-// Modern feature detection
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
-  @supports #{$property} {
+  @supports (#{$property}) {
     @content;
   }
 }
 
-
-
-
 // Mixin: Dark Mode
 // Applies styles when the user prefers a dark color scheme.
 @mixin dark-mode {
-  @media (prefers-color-scheme: dark) {
+  [data-theme='dark'] & {
     @content;
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -81,7 +81,7 @@ $shadow-sizes: (
 
 // Utility Classes
 .shadow-none {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 @each $size, $values in $shadow-sizes {

package/src/styles/utilities/_sizing.scss

@@ -41,10 +41,10 @@
 @each $i in $percentages {
     .w-#{$i}per { @include width-percent($i); }
     .h-#{$i}per { @include height-percent($i); }
-    .min-w-#{$i} { @include min-width-percent($i); }
-    .min-h-#{$i} { @include min-height-percent($i); }
-    .max-w-#{$i} { @include max-width-percent($i); }
-    .max-h-#{$i} { @include max-height-percent($i); }
+    .min-w-#{$i}per { @include min-width-percent($i); }
+    .min-h-#{$i}per { @include min-height-percent($i); }
+    .max-w-#{$i}per { @include max-width-percent($i); }
+    .max-h-#{$i}per { @include max-height-percent($i); }
 }
 
 // Generate utilities from spacing map
@@ -62,6 +62,12 @@
     @media (min-width: $width) {
         // Generate utilities from spacing map
         @each $i in $spacings {
+            .w-#{$i}per\@#{$breakpoint} { @include width-percent($i); }
+            .h-#{$i}per\@#{$breakpoint} { @include height-percent($i); }
+            .min-w-#{$i}per\@#{$breakpoint} { @include min-width-percent($i); }
+            .min-h-#{$i}per\@#{$breakpoint} { @include min-height-percent($i); }
+            .max-w-#{$i}per\@#{$breakpoint} { @include max-width-percent($i); }
+            .max-h-#{$i}per\@#{$breakpoint} { @include max-height-percent($i); }
             .w-#{$i}\@#{$breakpoint} { @include width($i); }
             .h-#{$i}\@#{$breakpoint} { @include height($i); }
             .min-w-#{$i}\@#{$breakpoint} { @include min-width($i) }

package/src/styles/utilities/_spacing.scss

@@ -16,28 +16,27 @@
 
    // Convert value to string for unit checking
   $value-str: if(meta.type-of($value) == 'string', string.unquote($value), #{$value});
-  @debug string.unquote( $value-str); // .widget:hover
   
   @return $value-str;
 }
 
 // Padding mixins
-@mixin p($val) { padding: format-unit-value($val) !important; }
-@mixin px($val) { $val: format-unit-value($val); padding-left: $val !important; padding-right: $val !important; }
-@mixin py($val) { $val: format-unit-value($val); padding-top: $val !important; padding-bottom: $val !important; }
-@mixin pt($val) { $val: format-unit-value($val); padding-top: $val !important; }
-@mixin pr($val) { $val: format-unit-value($val); padding-right: $val !important; }
-@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val !important; }
-@mixin pl($val) { $val: format-unit-value($val); padding-left: $val !important; }
+@mixin p($val) { padding: format-unit-value($val); }
+@mixin px($val) { $val: format-unit-value($val); padding-left: $val; padding-right: $val; }
+@mixin py($val) { $val: format-unit-value($val); padding-top: $val; padding-bottom: $val; }
+@mixin pt($val) { $val: format-unit-value($val); padding-top: $val; }
+@mixin pr($val) { $val: format-unit-value($val); padding-right: $val; }
+@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val; }
+@mixin pl($val) { $val: format-unit-value($val); padding-left: $val; }
 
 // Margin mixins
-@mixin m($val) { $val: format-unit-value($val); margin: $val !important; }
-@mixin mx($val) { $val: format-unit-value($val); margin-left: $val !important; margin-right: $val !important; }
-@mixin my($val) { $val: format-unit-value($val); margin-top: $val !important; margin-bottom: $val !important; }
-@mixin mt($val) { $val: format-unit-value($val); margin-top: $val !important; }
-@mixin mr($val) { $val: format-unit-value($val); margin-right: $val !important; }
-@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val !important; }
-@mixin ml($val) { $val: format-unit-value($val); margin-left: $val !important; }
+@mixin m($val) { $val: format-unit-value($val); margin: $val; }
+@mixin mx($val) { $val: format-unit-value($val); margin-left: $val; margin-right: $val; }
+@mixin my($val) { $val: format-unit-value($val); margin-top: $val; margin-bottom: $val; }
+@mixin mt($val) { $val: format-unit-value($val); margin-top: $val; }
+@mixin mr($val) { $val: format-unit-value($val); margin-right: $val; }
+@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val; }
+@mixin ml($val) { $val: format-unit-value($val); margin-left: $val; }
 
 // Auto margin utilities
 @mixin ml-auto { margin-left: auto; }

package/src/styles/utilities/_variables.scss

@@ -1,29 +1,59 @@
+@use 'sass:map';
+
 // Global variables that might be used across different modules
+$enable-debuger: false !default;
 $enable-dark-mode: true !default;
 $enable-rtl: true !default;;
 $enable-reduced-motion: true !default;;
 
 $column-count: 12 !default;
 
-$color-primary: #007bff !default;
-$color-secondary: #6c757d !default;
-$color-success: #28a745 !default;
-$color-danger: #dc3545 !default;
-$color-warning: #ffc107 !default;
-$color-info: #17a2b8 !default;
-$color-light: #f8f9fa !default;
-$color-dark: #1c1f22 !default;
+$primary: #007bff !default;
+$secondary: #6c757d !default;
+$success: #28a745 !default;
+$danger: #dc3545 !default;
+$warning: #ffc107 !default;
+$info: #17a2b8 !default;
+
+$color-primitives: (
+  'gray': #6b7280,
+  'red': #ef4444,
+  'blue': #3b82f6,
+  'green': #22c55e,
+  'yellow': #eab308,
+  'purple': #a855f7,
+  'pink': #ec4899
+) !default;
+
+
+$theme-tokens: (
+  'background',
+  'foreground',
+  'surface',
+  'border',
+  'text-primary',
+  'text-secondary'
+) !default;
+
+// Default theme config (can be overridden)
+$light-theme: (
+  'background': #fff,
+  'foreground': #000,
+  'surface': #fff,
+  'border': #e5e7eb,
+  'text-primary': #000,
+  'text-secondary': #4b5563
+) !default;
+
+$dark-theme: (
+  'background': #000,
+  'foreground': #fff,
+  'surface': #1a1a1a,
+  'border': #2e2e2e,
+  'text-primary': #fff,
+  'text-secondary': #a3a3a3
+) !default;
 
-$colors: (
-  'primary': $color-primary,
-  'secondary': $color-secondary,
-  'success': $color-success,
-  'danger': $color-danger,
-  'warning': $color-warning,
-  'info': $color-info,
-  'light': $color-light,
-  'dark': $color-dark
-);
 
 // Breakpoints
 $breakpoints: (
@@ -32,7 +62,7 @@ $breakpoints: (
   'md': 768px,
   'lg': 1024px,
   'xl': 1280px,
-  'xxl': 1536px, 
+  '2xl': 1536px, 
 ) !default;
 
 // Container max-widths
@@ -42,7 +72,7 @@ $container-max-widths: (
   'md': 720px,
   'lg': 960px,
   'xl': 1140px,
-  'xxl': 1320px,
+  '2xl': 1320px,
 ) !default;
 
 // _variables.scss
@@ -69,9 +99,9 @@ $padding-map: (
 ) !default;
 
 $spacings: (
-  0,1,2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,125,150,175,200,250,300,350,400,450,500
+  0,1,2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,150,200,250,300,350,400,450,500
 ) !default;
 
 $percentages: (
-  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100
+  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
 ) !default;