@nuvoui/core 0.2.1

package/src/styles/utilities/_animations.scss

@@ -0,0 +1,135 @@
+@use 'sass:list';
+
+@use 'sass:map';
+@use './functions' as *;
+
+$generated-keyframes: ();
+
+
+@mixin generateBounceKeyframes($keyframeName, $x, $y) {
+    @if not list.index($generated-keyframes, $keyframeName) {
+        $generated-keyframes: list.append($generated-keyframes, $keyframeName) !global;
+        
+        @keyframes #{$keyframeName} {
+            0% {
+                transform: translateX(-#{$x}) translateY(-#{$y});
+            }
+            50% {
+                transform: translateX(#{$x}) translateY(#{$y});
+            }
+            100% {
+                transform: translateX(-#{$x}) translateY(-#{$y});
+            }
+        }
+    }
+}
+
+
+@mixin animate-move($props) {
+    $defaults: (
+        vertical: 0%,
+        horizontal: 0%,
+        duration: 5s,
+        timing: ease-in-out,
+        iteration: infinite
+    );
+    // Merge with defaults
+    $props: map.merge($defaults, $props);
+
+    $x: map.get($props, 'vertical');
+    $y: map.get($props, 'horizontal');
+    $duration: map.get($props, 'duration');
+    $easing: map.get($props, 'timing');
+    $iteration: map.get($props, 'iteration');
+    
+    // Handle units
+    $x-unit: if($x, safe-unit-name(get-unit($x)), '-');
+    $y-unit: if($y, safe-unit-name(get-unit($y)), '-');
+    
+    // Clean values (remove units)
+    $cleanX: if($x, strip-unit($x), 0);
+    $cleanY: if($y, strip-unit($y), 0);
+
+    $animationName: anim-bounce-#{$cleanX}#{$x-unit}-#{$cleanY}#{$y-unit};
+
+
+    & {
+        animation: #{$animationName} $duration $easing $iteration;
+    }
+    @include generateBounceKeyframes($animationName, $x, $y);
+}
+
+
+@keyframes fade-in-reveal {
+    to {
+        scale: 1;
+        opacity: 1;
+    }
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+    .anim__fade-in-reveal {
+        scale: .2;
+        opacity: 0.7;
+
+        animation: fade-in-reveal linear forwards;
+        animation-timeline: view();
+
+        animation-range-start: cover;
+        animation-range-end: 550px;
+
+        // animation-range: enter;
+        // animation-range: exit;
+    }
+}
+
+@keyframes fadeOutAndCollapse {
+    0% {
+        opacity: 1;
+        bottom: 0px;
+        height: auto;
+    }
+    50% {
+        bottom: -500px;
+        opacity: 0;
+    }
+    100% {
+        bottom: 100%;
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+    }
+}
+
+
+
+
+// @keyframes moveVertical {
+//     0% {
+//       transform: translateY(-5%);
+//     }
+  
+//     50% {
+//       transform: translateY(5%);
+//     }
+  
+//     100% {
+//       transform: translateY(-5%);
+//     }
+//   }
+  
+//   @keyframes moveHorizontal {
+//     0% {
+//       transform: translateX(-50%) translateY(-10%);
+//     }
+  
+//     50% {
+//       transform: translateX(50%) translateY(10%);
+//     }
+  
+//     100% {
+//       transform: translateX(-50%) translateY(-10%);
+//     }
+//   }
+  

package/src/styles/utilities/_colors.scss

@@ -0,0 +1,158 @@
+@use "sass:math";
+@use 'sass:color';
+@use 'sass:map';
+
+@use './variables' as *;
+
+@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';
+}
+
+// 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 adjust-hue($color, 180);
+}
+
+@function triadic($color) {
+    @return (
+        $color,
+        adjust-hue($color, 120),
+        adjust-hue($color, 240)
+    );
+}
+
+@function split-complementary($color) {
+    @return (
+        $color,
+        adjust-hue($color, 150),
+        adjust-hue($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: append($scale, $new-color);
+    }
+    
+    @return $scale;
+}
+
+// Color Relationship Functions
+@function find-text-color($background) {
+    $luminance: luminance($background);
+    @return if($luminance > 0.55, #000, #fff);
+}
+
+// Luminance Calculation
+@function luminance($color) {
+    $r: red($color) / 255;
+    $g: green($color) / 255;
+    $b: 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));
+    
+    @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);
+    
+    @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);
+}
+
+.frosted-glass {
+    @include backdrop-filter(blur(5px) saturate(180%));
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+// <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/_functions.scss

@@ -0,0 +1,59 @@
+@use 'sass:string';
+@use 'sass:math';
+
+@function strip-unit($value) {
+  @return math.div($value, ($value * 0 + 1));
+}
+
+@function safe-unit-name($unit) {
+  
+  @if $unit == '%' {
+      @return 'per';
+  } @else if $unit == '.' {
+      @return 'dot';
+  } @else {
+      @return $unit;
+  }
+}
+
+@function get-unit($value) {
+  $value-str: #{$value};
+  
+  // Relative length units
+  @if string.index($value-str, 'em') {
+      @return 'em';
+  } @else if string.index($value-str, 'rem') {
+      @return 'rem';
+  } @else if string.index($value-str, '%') {
+      @return '%';
+  }
+  
+  // Viewport units
+  @else if string.index($value-str, 'vw') {
+      @return 'vw';
+  } @else if string.index($value-str, 'vh') {
+      @return 'vh';
+  } @else if string.index($value-str, 'vmin') {
+      @return 'vmin';
+  } @else if string.index($value-str, 'vmax') {
+      @return 'vmax';
+  }
+  
+  // Absolute length units
+  @else if string.index($value-str, 'px') {
+      @return 'px';
+  } @else if string.index($value-str, 'cm') {
+      @return 'cm';
+  } @else if string.index($value-str, 'mm') {
+      @return 'mm';
+  } @else if string.index($value-str, 'in') {
+      @return 'in';
+  } @else if string.index($value-str, 'pt') {
+      @return 'pt';
+  } @else if string.index($value-str, 'pc') {
+      @return 'pc';
+  }
+  
+  // Return empty string if no unit found
+  @return '';
+}

package/src/styles/utilities/_position.scss

@@ -0,0 +1,97 @@
+@use './variables' as *;
+// Position Mixins
+@mixin p-static {
+  position: static;
+}
+
+@mixin p-relative {
+  position: relative;
+}
+
+@mixin p-absolute {
+  position: absolute;
+}
+
+@mixin p-fixed {
+  position: fixed;
+}
+
+@mixin p-sticky {
+  position: sticky;
+}
+
+// Position Classes
+.p-static {
+  @include p-static;
+}
+
+.p-relative {
+  @include p-relative;
+}
+
+.p-absolute {
+  @include p-absolute;
+}
+
+.p-fixed {
+  @include p-fixed;
+}
+
+.p-sticky {
+  @include p-sticky;
+}
+
+// Responsive Position Classes
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    .#{$breakpoint}\:p-static {
+      @include p-static;
+    }
+    .#{$breakpoint}\:p-relative {
+      @include p-relative;
+    }
+    .#{$breakpoint}\:p-absolute {
+      @include p-absolute;
+    }
+    .#{$breakpoint}\:p-fixed {
+      @include p-fixed;
+    }
+    .#{$breakpoint}\:p-sticky {
+      @include p-sticky;
+    }
+  }
+}
+
+
+// Top, Right, Bottom, Left Mixins
+@mixin top($value) {
+  top: if($value == 0, $value, $value + px);
+}
+
+@mixin right($value) {
+  right: if($value == 0, $value, $value + px);
+}
+
+@mixin bottom($value) {
+  bottom: if($value == 0, $value, $value + px);
+}
+
+@mixin left($value) {
+  left: if($value == 0, $value, $value + px);
+}
+
+// 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);
+  }
+}

package/src/styles/utilities/_shadows.scss

@@ -0,0 +1,107 @@
+// _shadows.scss
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+@use './variables' as *;
+
+
+// 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),
+);
+
+$shadow-sizes: (
+  'sm': (
+    'x': 0,
+    'y': 1px,
+    'blur': 2px,
+    'spread': 0
+  ),
+  'md': (
+    'x': 0,
+    'y': 4px,
+    'blur': 6px,
+    'spread': -1px
+  ),
+  'lg': (
+    'x': 0,
+    'y': 10px,
+    'blur': 15px,
+    'spread': -3px
+  ),
+  'xl': (
+    'x': 0,
+    'y': 20px,
+    'blur': 25px,
+    'spread': -5px
+  ),
+  'hero': (
+    'x': 0,
+    'y': 20px,
+    'blur': 25px,
+    'spread': 5px
+  ),
+  'monster': (
+    'x': 0,
+    'y': 20px,
+    'blur': 55px,
+    'spread': 20px
+  )
+);
+
+// Shadow Mixins
+@mixin shadow-base($x, $y, $blur, $spread, $color) {
+  transition: box-shadow 0.2s ease-in-out;
+  box-shadow: $x $y $blur $spread $color;
+}
+
+@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'),
+    map.get($shadow, 'y'),
+    map.get($shadow, 'blur'),
+    map.get($shadow, 'spread'),
+    $shadow-color
+  );
+}
+
+@mixin shadow-inset($size: 'md', $color: 'default') {
+  $shadow: map.get($shadow-sizes, $size);
+  $shadow-color: map.get($shadow-colors, $color);
+  
+  box-shadow: inset map.get($shadow, 'x') map.get($shadow, 'y') 
+             map.get($shadow, 'blur') map.get($shadow, 'spread') 
+             $shadow-color;
+}
+
+// Utility Classes
+.shadow-none {
+  box-shadow: none;
+}
+
+@each $size, $values in $shadow-sizes {
+  .shadow-#{$size} {
+    @include shadow($size);
+  }
+  
+  .shadow-#{$size}-dark {
+    @include shadow($size, 'dark');
+  }
+  
+  .shadow-inset-#{$size} {
+    @include shadow-inset($size);
+  }
+}
+
+// Hover variants
+.shadow-hover {
+  &:hover {
+    @include shadow('lg');
+  }
+}

package/src/styles/utilities/_spacing.scss

@@ -0,0 +1,109 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *; 
+
+
+// Padding mixins
+@mixin p($val) { $val: if($val==0, $val, $val + px); padding: $val !important; }
+@mixin px($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; padding-right: $val !important; }
+@mixin py($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; padding-bottom: $val !important; }
+@mixin pt($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; }
+@mixin pr($val) { $val: if($val==0, $val, $val + px); padding-right: $val !important; }
+@mixin pb($val) { $val: if($val==0, $val, $val + px); padding-bottom: $val !important; }
+@mixin pl($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; }
+
+// Margin mixins
+@mixin m($val) { $val: if($val==0, $val, $val + px); margin: $val !important; }
+@mixin mx($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; margin-right: $val !important; }
+@mixin my($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; margin-bottom: $val !important; }
+@mixin mt($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; }
+@mixin mr($val) { $val: if($val==0, $val, $val + px); margin-right: $val !important; }
+@mixin mb($val) { $val: if($val==0, $val, $val + px); margin-bottom: $val !important; }
+@mixin ml($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; }
+
+
+// Generate utilities from spacing map
+@each $i in $spacings {
+    // Padding classes
+    .p-#{$i} { @include p($i); }
+    .px-#{$i} { @include px($i); }
+    .py-#{$i} { @include py($i); }
+    .pt-#{$i} { @include pt($i); }
+    .pr-#{$i} { @include pr($i); }
+    .pb-#{$i} { @include pb($i); }
+    .pl-#{$i} { @include pl($i); }
+
+    // Margin classes
+    .m-#{$i} { @include m($i); }
+    .mx-#{$i} { @include mx($i); }
+    .my-#{$i} { @include my($i); }
+    .mt-#{$i} { @include mt($i); }
+    .mr-#{$i} { @include mr($i); }
+    .mb-#{$i} { @include mb($i); }
+    .ml-#{$i} { @include ml($i); }
+    // .gap-#{$key} { gap: $value; }
+}
+
+
+// Responsive Position Classes
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+        // Generate utilities from spacing map
+        @each $i in $spacings {
+            // Padding classes
+            .#{$breakpoint}\:p-#{$i} { @include p($i); }
+            .#{$breakpoint}\:px-#{$i} { @include px($i); }
+            .#{$breakpoint}\:py-#{$i} { @include py($i); }
+            .#{$breakpoint}\:pt-#{$i} { @include pt($i); }
+            .#{$breakpoint}\:pr-#{$i} { @include pr($i); }
+            .#{$breakpoint}\:pb-#{$i} { @include pb($i); }
+            .#{$breakpoint}\:pl-#{$i} { @include pl($i); }
+
+            // Margin classes
+            .#{$breakpoint}\:m-#{$i} { @include m($i); }
+            .#{$breakpoint}\:mx-#{$i} { @include mx($i); }
+            .#{$breakpoint}\:my-#{$i} { @include my($i); }
+            .#{$breakpoint}\:mt-#{$i} { @include mt($i); }
+            .#{$breakpoint}\:mr-#{$i} { @include mr($i); }
+            .#{$breakpoint}\:mb-#{$i} { @include mb($i); }
+            .#{$breakpoint}\:ml-#{$i} { @include ml($i); }
+            // .gap-#{$key} { gap: $value; }
+        }
+    }
+}
+
+// Auto margin utilities
+@mixin ml-auto { margin-left: auto; }
+@mixin mr-auto { margin-right: auto; }
+@mixin mx-auto { @include ml-auto; @include mr-auto; }
+
+.mx-auto { @include mx-auto; }
+
+
+.ml-auto { @include ml-auto; }
+.mr-auto { @include mr-auto; }
+
+
+
+// Gap Mixins
+@mixin gap($value) {
+    gap: if($value == 0, $value, $value + px);
+}
+
+@mixin gap-x($value) {
+    column-gap: if($value == 0, $value, $value + px);
+}
+
+@mixin gap-y($value) {
+    row-gap: if($value == 0, $value, $value + px);
+}
+
+// Gap Classes
+.gap-auto { gap: auto; }
+
+@each $i in $spacings {
+    .gap-#{$i} { @include gap($i); }
+    .gap-x-#{$i} { @include gap-x($i); }
+    .gap-y-#{$i} { @include gap-y($i); }
+}