@nuvoui/core 0.3.0 → 1.0.1

package/src/styles/utilities/_colors.scss

@@ -1,20 +1,23 @@
 @use "sass:math";
 @use 'sass:color';
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
 
 @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 
-// _colors.scss
-
 // Color Validation
 @function is-valid-color($color) {
-    @return type-of($color) == 'color';
+    @return meta.type-of($color) == 'color';
 }
 
 // Modern Color Spaces
@@ -39,22 +42,22 @@
 
 // Color Harmony Generation
 @function complementary($color) {
-    @return adjust-hue($color, 180);
+    @return color.adjust($color, 180);
 }
 
 @function triadic($color) {
     @return (
         $color,
-        adjust-hue($color, 120),
-        adjust-hue($color, 240)
+        color.adjust($color, 120),
+        color.adjust($color, 240)
     );
 }
 
 @function split-complementary($color) {
     @return (
         $color,
-        adjust-hue($color, 150),
-        adjust-hue($color, 210)
+        color.adjust($color, 150),
+        color.adjust($color, 210)
     );
 }
 
@@ -74,7 +77,7 @@
     @for $i from 0 through $steps {
         $lightness: 95 - ($i * (90 / $steps));
         $new-color: color.adjust($lch-color, $lightness: $lightness);
-        $scale: append($scale, $new-color);
+        $scale: list.append($scale, $new-color);
     }
     
     @return $scale;
@@ -88,13 +91,13 @@
 
 // Luminance Calculation
 @function luminance($color) {
-    $r: red($color) / 255;
-    $g: green($color) / 255;
-    $b: blue($color) / 255;
+    $r: color.red($color) / 255;
+    $g: color.green($color) / 255;
+    $b: color.blue($color) / 255;
     
-    $r: if($r <= 0.03928, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
-    $g: if($g <= 0.03928, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
-    $b: if($b <= 0.03928, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));
+    $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));
     
     @return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
 }
@@ -119,40 +122,29 @@
     
     @media (prefers-contrast: more) {
         $high-contrast: adjust-contrast($background, 20%);
+        
         background: $high-contrast;
     }
 }
 
 // Filter Mixins
 @mixin backdrop-filter($value) {
-    -webkit-backdrop-filter: $value;
     backdrop-filter: $value;
 }
 
 @mixin filter($value) {
-    -webkit-filter: $value;
     filter: $value;
 }
 
 // Glass Effect Utilities
 .glass-effect {
     @include backdrop-filter(blur(10px));
-    background-color: rgba(255, 255, 255, 0.1);
+
+    background-color: rgb(255 255 255 / 10%);
 }
 
 .frosted-glass {
     @include backdrop-filter(blur(5px) saturate(180%));
-    background-color: rgba(255, 255, 255, 0.8);
+    
+    background-color: rgb(255 255 255 / 80%);
 }
-
-// <div class="bg-primary-0">Lightest shade</div>
-// <div class="bg-primary-4">Middle shade</div>
-// <div class="bg-primary-8">Darkest shade</div>
-
-// <div class="brand-complementary">Complementary colors</div>
-
-// <div class="text-on-background">Accessible text</div>
-
-// <div class="glass-effect">
-//   Blurred backdrop
-// </div>

package/src/styles/utilities/_display.scss

@@ -0,0 +1,39 @@
+
+@use './variables' as *;
+
+// Display Mixins
+@mixin d-none { display: none; }
+@mixin d-block { display: block; }
+@mixin d-inline { display: inline; }
+@mixin d-inline-block { display: inline-block; }
+@mixin d-tbl { display: table; }
+@mixin d-tbl-row { display: table-row; }
+@mixin d-tbl-cell { display: table-cell; }
+
+// Base Classes 
+.hide { @include d-none; }
+.block { @include d-block; }
+.inline { @include d-inline; }
+.inline-block { @include d-inline-block; }
+
+.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 d-none; }
+    .block\@#{$breakpoint} { @include d-block; }
+    .inline\@#{$breakpoint} { @include d-inline; }
+    .inline-block\@#{$breakpoint} { @include d-inline-block; }
+    
+    .d {
+      &-tbl\@#{$breakpoint} { @include d-tbl; }
+      &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
+      &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
+    }
+  }
+}

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

@@ -0,0 +1,147 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use './variables' as *;
+
+// Breakpoint mixins
+@mixin media-up($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media screen and (min-width: map.get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else if meta.type-of($breakpoint) == number {
+    @media screen and (min-width: $breakpoint) {
+      @content;
+    }
+  }
+}
+
+@mixin media-down($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media screen and (max-width: (map.get($breakpoints, $breakpoint) - 0.02px)) {
+      @content;
+    }
+  } @else if meta.type-of($breakpoint) == number {
+    @media screen and (max-width: ($breakpoint - 0.02px)) {
+      @content;
+    }
+  }
+}
+
+@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)) {
+      @content;
+    }
+  }
+}
+
+// Only at specific breakpoint
+@mixin media-only($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    $min: map.get($breakpoints, $breakpoint);
+    $next-breakpoint: null;
+    
+    @each $name, $width in $breakpoints {
+      @if $width > $min and (meta.type-of($next-breakpoint) == 'null' or $width < $next-breakpoint) {
+        $next-breakpoint: $width;
+      }
+    }
+    
+    @if $next-breakpoint {
+      @media (min-width: $min) and (max-width: ($next-breakpoint - 1)) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $min) {
+        @content;
+      }
+    }
+  }
+}
+
+// Example: @include container(45em) { }
+@mixin container-query($size) {
+  @container (min-width: $size) {
+    @content;
+  }
+}
+
+// Touch devices
+@mixin touch {
+  @media (hover: none) and (pointer: coarse) {
+    @content;
+  }
+}
+
+// Print media
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+// Modern feature detection
+// Example: @include supports(display: grid) { }
+@mixin 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) {
+    @content;
+  }
+}
+
+// Device orientation
+@mixin landscape {
+  @media screen and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin portrait {
+  @media screen and (orientation: portrait) {
+    @content;
+  }
+}
+
+// Modern aspect ratio
+@mixin aspect-ratio($ratio) {
+  aspect-ratio: #{$ratio};
+}
+
+// Dynamic viewport units (modern browsers)
+@mixin dvh {
+  @supports (height: 100dvh) {
+    height: 100dvh;
+  }
+  
+  @supports not (height: 100dvh) {
+    height: 100vh;
+  }
+}
+
+// Safe area insets (notches, home indicators)
+@mixin safe-area-inset($property, $position) {
+  #{$property}: env(safe-area-inset-#{$position});
+}
+
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// High contrast mode
+@mixin high-contrast {
+  @media (forced-colors: active) {
+    @content;
+  }
+}

package/src/styles/utilities/_opacity.scss

@@ -0,0 +1,20 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+// Opacity Utilities
+@each $i in $percentages {
+  .opacity-#{$i} { opacity: math.div($i, 100); }
+  .hover\:opacity-#{$i}:hover { opacity: math.div($i, 100); }
+}
+
+// Responsive Variants for Opacity
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    @each $i in $percentages {
+      .opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
+      .hover\:opacity-#{$i}\@#{$breakpoint}:hover { opacity: math.div($i, 100); }
+    }
+  }
+}

package/src/styles/utilities/_position.scss

@@ -1,63 +1,66 @@
 @use './variables' as *;
+
 // Position Mixins
-@mixin p-static {
+@mixin static {
   position: static;
 }
 
-@mixin p-relative {
+@mixin relative {
   position: relative;
 }
 
-@mixin p-absolute {
+@mixin absolute {
   position: absolute;
 }
 
-@mixin p-fixed {
+@mixin fixed {
   position: fixed;
-}
-
-@mixin p-sticky {
+} 
+ 
+@mixin sticky {
   position: sticky;
-}
+  z-index: 999;
+  top: 0;
+} 
 
 // Position Classes
-.p-static {
-  @include p-static;
+.static {
+  @include static;
 }
 
-.p-relative {
-  @include p-relative;
+.relative {
+  @include relative;
 }
 
-.p-absolute {
-  @include p-absolute;
+.absolute {
+  @include absolute;
 }
 
-.p-fixed {
-  @include p-fixed;
+.fixed {
+  @include fixed;
 }
 
-.p-sticky {
-  @include p-sticky;
+.sticky {
+  @include sticky;
 }
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    .p-static\@#{$breakpoint} {
-      @include p-static;
+    .static\@#{$breakpoint} {
+      @include static;
     }
-    .p-relative\@#{$breakpoint} {
-      @include p-relative;
+    .relative\@#{$breakpoint} {
+      @include relative;
     }
-    .p-absolute\@#{$breakpoint} {
-      @include p-absolute;
+    .absolute\@#{$breakpoint} {
+      @include absolute;
     }
-    .p-fixed\@#{$breakpoint} {
-      @include p-fixed;
+    .fixed\@#{$breakpoint} {
+      @include fixed;
     }
-    .p-sticky\@#{$breakpoint} {
-      @include p-sticky;
+    .sticky\@#{$breakpoint} {
+      @include sticky;
     }
   }
 }
@@ -81,17 +84,23 @@
 }
 
 // Top, Right, Bottom, Left Classes
-@for $i from 0 through 100{
-  .top-#{$i} {
-    @include top($i);
-  }
-  .right-#{$i} {
-    @include right($i);
-  }
-  .bottom-#{$i} {
-    @include bottom($i);
-  }
-  .left-#{$i} {
-    @include left($i);
+@each $i in $spacings {
+  .top-#{$i} {@include top($i);}
+  .right-#{$i} {@include right($i);}
+  .bottom-#{$i} {@include bottom($i);}
+  .left-#{$i} {@include left($i);}
+}
+
+
+// Pixel widths based on spacing scale
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+      // Generate utilities from spacing map
+      @each $i in $spacings {
+          .top-#{$i}\@#{$breakpoint} {height: if($i == 0, $i, $i + px);}
+          .right-#{$i}\@#{$breakpoint} {width: if($i == 0, $i, $i + px);}
+          .bottom-#{$i}\@#{$breakpoint} {min-width: if($i == 0, $i, $i + px);}
+          .left-#{$i}\@#{$breakpoint} {min-height: if($i == 0, $i, $i + px);}
+      }
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -7,10 +7,10 @@
 
 // Shadow Variables
 $shadow-colors: (
-  'default': rgba(0, 0, 0, 0.1),
-  'dark': rgba(0, 0, 0, 0.2),
-  'darker': rgba(0, 0, 0, 0.35),
-  'darkest': rgba(0, 0, 0, 0.5),
+  'default': rgb(0 0 0 / 10%),
+  'dark': rgb(0 0 0 / 20%),
+  'darker': rgb(0 0 0 / 35%),
+  'darkest': rgb(0 0 0 / 50%),
 );
 
 $shadow-sizes: (
@@ -60,7 +60,6 @@ $shadow-sizes: (
 
 @mixin shadow($size: 'md', $color: 'default') {
   $shadow: map.get($shadow-sizes, $size);
-
   $shadow-color: map.get($shadow-colors, $color);
   @include shadow-base(
     map.get($shadow, 'x'),

package/src/styles/utilities/_sizing.scss

@@ -0,0 +1,73 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+@mixin width($value) { width: if($value == 0, $value, $value + px); }
+@mixin height($value) { height: if($value == 0, $value, $value + px); }
+@mixin min-width($value) { min-width: if($value == 0, $value, $value + px); }
+@mixin min-height($value) { min-height: if($value == 0, $value, $value + px); }
+@mixin max-width($value) { max-width: if($value == 0, $value, $value + px); }
+@mixin max-height($value) { max-height: if($value == 0, $value, $value + px); }
+
+@mixin width-percent($i) { width: #{$i + '%'}; }
+@mixin height-percent($i) { height: #{$i + '%'};  }
+@mixin min-width-percent($i) { min-width: #{$i + '%'}; }
+@mixin min-height-percent($i) { min-height: #{$i + '%'};  }
+@mixin max-width-percent($i) { max-width: #{$i + '%'}; }
+@mixin max-height-percent($i) { max-height: #{$i + '%'};  }
+
+
+@mixin w-auto { width: auto; }
+@mixin w-full { width: 100%; }
+@mixin h-auto { height: auto; }
+@mixin h-full { height: 100%; }
+@mixin min-w-full { min-width: 100%; }
+@mixin max-w-full { max-width: 100%; }
+@mixin min-h-full { min-height: 100%; }
+@mixin max-h-full { max-height: 100%; }
+
+:not(.flex)>.w-auto { @include w-auto; }
+:not(.flex)>.w-full { @include w-full; }
+
+.h-auto { @include h-auto; }
+.h-full { @include h-full; }
+.min-w-full { @include min-w-full }
+.max-w-full { @include max-w-full }
+.min-h-full { @include min-h-full }
+.max-h-full { @include max-h-full }
+
+// Percentage widths
+@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); }
+}
+
+// Generate utilities from spacing map
+@each $i in $spacings {
+    .w-#{$i} { @include width($i); }
+    .h-#{$i} { @include height($i); }
+    .min-w-#{$i} { @include min-width($i) }
+    .min-h-#{$i} { @include min-height($i) }
+    .max-w-#{$i} { @include max-width($i) }
+    .max-h-#{$i} { @include max-height($i) }
+}
+
+// Pixel widths based on spacing scale
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+        // Generate utilities from spacing map
+        @each $i in $spacings {
+            .w-#{$i}\@#{$breakpoint} { @include width($i); }
+            .h-#{$i}\@#{$breakpoint} { @include height($i); }
+            .min-w-#{$i}\@#{$breakpoint} { @include min-width($i) }
+            .min-h-#{$i}\@#{$breakpoint} { @include min-height($i) }
+            .max-w-#{$i}\@#{$breakpoint} { @include max-width($i) }
+            .max-h-#{$i}\@#{$breakpoint} { @include max-height($i) }
+        }
+    }
+}