@nuvoui/core 1.1.8 → 1.2.0

package/src/styles/utilities/_tooltips.scss

@@ -1,95 +1,130 @@
+:root {
+  // Tooltip core variables
+  --tooltip-bg: rgba(17 17 17 / 90%);
+  --tooltip-shadow-color: rgb(0 0 0 / 20%);
+  --tooltip-text-color: #FFF;
 
+  // Animation variables
+  --microtip-transition-duration: 0.18s;
+  --microtip-transition-easing: ease-in-out;
+  --microtip-transition-delay: 0s;
 
-[data-tooltip][role~="tooltip"] {
-    position: relative
+  // Typography variables
+  --microtip-font-size: 13px;
+  --microtip-font-weight: normal;
+  --microtip-text-transform: none;
+
+  // Sizing variables
+  --tooltip-small-width: 80px;
+  --tooltip-medium-width: 150px;
+  --tooltip-large-width: 260px;
+  --tooltip-border-radius: 4px;
 }
 
-[data-tooltip][role~="tooltip"]::before,
-[data-tooltip][role~="tooltip"]::after {
+[data-tooltip][role~="tooltip"] {
+  position: relative;
+
+  &::before,
+  &::after {
     transform: translate3d(0, 0, 0);
     backface-visibility: hidden;
     will-change: transform;
     opacity: 0;
     pointer-events: none;
-    transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing)
+      var(--microtip-transition-delay);
     position: absolute;
     box-sizing: border-box;
     z-index: 10;
-    transform-origin: top
-}
+    transform-origin: top;
+  }
 
-[data-tooltip][role~="tooltip"]::before {
+  &::before {
     background-size: 100% auto !important;
-    content: ""
-}
+    content: "";
+  }
 
-[data-tooltip][role~="tooltip"]::after {
-    background: var(--tooltip-bg); // todo: change to a variable
+  &::after {
+    background: var(--tooltip-bg);
     box-shadow: 0 3px 7px var(--tooltip-shadow-color);
-    border-radius: 4px;
-    color: #fff;
+    border-radius: var(--tooltip-border-radius);
+    color: var(--tooltip-text-color);
     content: attr(data-tooltip);
-    font-size: var(--microtip-font-size, 13px);
-    font-weight: var(--microtip-font-weight, normal);
-    text-transform: var(--microtip-text-transform, none);
-    padding: .5em 1em;
+    font-size: var(--microtip-font-size);
+    font-weight: var(--microtip-font-weight);
+    text-transform: var(--microtip-text-transform);
+    padding: 0.5em 1em;
     white-space: nowrap;
-    box-sizing: content-box
-}
+    box-sizing: content-box;
+  }
 
-[data-tooltip][role~="tooltip"]:hover::before,
-[data-tooltip][role~="tooltip"]:hover::after,
-[data-tooltip][role~="tooltip"]:focus::before,
-[data-tooltip][role~="tooltip"]:focus::after {
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
     opacity: 1;
-    pointer-events: auto
+    pointer-events: auto;
+  }
 }
 
-[role~="tooltip"][data-microtip-position|="top"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+// Top position tooltips
+[role~="tooltip"][data-microtip-position|="top"] {
+  &::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+      no-repeat;
     height: 6px;
     width: 18px;
     margin-bottom: 5px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
-    left: 50%
-}
+    left: 50%;
+  }
 
-[role~="tooltip"][data-microtip-position|="top"]::after {
+  &::after {
     margin-bottom: 11px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
-    left: 50%
-}
+    left: 50%;
+  }
 
-[role~="tooltip"][data-microtip-position|="top"]:hover::before {
-    transform: translate3d(-50%, -5px, 0)
+  &:hover::before {
+    transform: translate3d(-50%, -5px, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="top"]:hover::after {
-    transform: translate3d(-50%, -5px, 0)
+[role~="tooltip"][data-microtip-position="top"] {
+  &:hover::after {
+    transform: translate3d(-50%, -5px, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="top-left"]::after {
+[role~="tooltip"][data-microtip-position="top-left"] {
+  &::after {
     transform: translate3d(calc(-100% + 16px), 0, 0);
-    bottom: 100%
-}
+    bottom: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), -5px, 0)
+  &:hover::after {
+    transform: translate3d(calc(-100% + 16px), -5px, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="top-right"]::after {
+[role~="tooltip"][data-microtip-position="top-right"] {
+  &::after {
     transform: translate3d(calc(0% + -16px), 0, 0);
-    bottom: 100%
-}
+    bottom: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), -5px, 0)
+  &:hover::after {
+    transform: translate3d(calc(0% + -16px), -5px, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position|="bottom"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+// Bottom position tooltips
+[role~="tooltip"][data-microtip-position|="bottom"] {
+  &::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+      no-repeat;
     height: 6px;
     width: 18px;
     margin-top: 5px;
@@ -97,104 +132,117 @@
     transform: translate3d(-50%, -10px, 0);
     bottom: auto;
     left: 50%;
-    top: 100%
-}
+    top: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  &::after {
     margin-top: 11px;
     transform: translate3d(-50%, -10px, 0);
     top: 100%;
-    left: 50%
-}
-
-
+    left: 50%;
+  }
 
-[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
-    transform: translate3d(-50%, 0, 0)
+  &:hover::before {
+    transform: translate3d(-50%, 0, 0);
+  }
 }
 
-
-[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
-    transform: translate3d(-50%, 0, 0)
+[role~="tooltip"][data-microtip-position="bottom"] {
+  &:hover::after {
+    transform: translate3d(-50%, 0, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+[role~="tooltip"][data-microtip-position="bottom-left"] {
+  &::after {
     transform: translate3d(calc(-100% + 16px), -10px, 0);
-    top: 100%
-}
+    top: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0)
+  &:hover::after {
+    transform: translate3d(calc(-100% + 16px), 0, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+[role~="tooltip"][data-microtip-position="bottom-right"] {
+  &::after {
     transform: translate3d(calc(0% + -16px), -10px, 0);
-    top: 100%
-}
+    top: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), 0, 0)
+  &:hover::after {
+    transform: translate3d(calc(0% + -16px), 0, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="left"]::before,
-[role~="tooltip"][data-microtip-position="left"]::after {
+// Left position tooltips
+[role~="tooltip"][data-microtip-position="left"] {
+  &::before,
+  &::after {
     inset: auto auto auto 100%;
-    transform: translate3d(10px, -50%, 0)
-}
+    transform: translate3d(10px, -50%, 0);
+  }
 
-[role~="tooltip"][data-microtip-position="left"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  &::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+      no-repeat;
     height: 18px;
     width: 6px;
     margin-right: 5px;
-    margin-bottom: 0
-}
+    margin-bottom: 0;
+  }
 
-[role~="tooltip"][data-microtip-position="left"]::after {
-    margin-right: 11px
-}
+  &::after {
+    margin-right: 11px;
+  }
 
-[role~="tooltip"][data-microtip-position="left"]:hover::before,
-[role~="tooltip"][data-microtip-position="left"]:hover::after {
-    transform: translate3d(0, -50%, 0)
+  &:hover::before,
+  &:hover::after {
+    transform: translate3d(0, -50%, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="right"]::before,
-[role~="tooltip"][data-microtip-position="right"]::after {
+// Right position tooltips
+[role~="tooltip"][data-microtip-position="right"] {
+  &::before,
+  &::after {
     bottom: auto;
     left: 100%;
     top: 50%;
-    transform: translate3d(-10px, -50%, 0)
-}
+    transform: translate3d(-10px, -50%, 0);
+  }
 
-[role~="tooltip"][data-microtip-position="right"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  &::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+      no-repeat;
     height: 18px;
     width: 6px;
     margin-bottom: 0;
-    margin-left: 5px
-}
+    margin-left: 5px;
+  }
 
-[role~="tooltip"][data-microtip-position="right"]::after {
-    margin-left: 11px
-}
+  &::after {
+    margin-left: 11px;
+  }
 
-[role~="tooltip"][data-microtip-position="right"]:hover::before,
-[role~="tooltip"][data-microtip-position="right"]:hover::after {
-    transform: translate3d(0, -50%, 0)
+  &:hover::before,
+  &:hover::after {
+    transform: translate3d(0, -50%, 0);
+  }
 }
 
+// Tooltip sizes
 [role~="tooltip"][data-microtip-size="small"]::after {
-    white-space: initial;
-    width: 80px
+  white-space: initial;
+  width: var(--tooltip-small-width);
 }
 
 [role~="tooltip"][data-microtip-size="medium"]::after {
-    white-space: initial;
-    width: 150px
+  white-space: initial;
+  width: var(--tooltip-medium-width);
 }
 
 [role~="tooltip"][data-microtip-size="large"]::after {
-    white-space: initial;
-    width: 260px
-}
+  white-space: initial;
+  width: var(--tooltip-large-width);
+}

package/src/styles/utilities/_transitions.scss

@@ -1,5 +1,5 @@
 // _transitions.scss
-@use './variables' as *;
+@use '../abstracts'  as *;
 
 /**
  * Transition Utilities

package/src/styles/utilities/_typography.scss

@@ -4,7 +4,7 @@
 @use 'sass:map';
 
 // Import variables
-@use '../utilities/variables' as VAR;
+@use '../abstracts'  as VAR;
 
 
 /**
@@ -29,12 +29,12 @@
 /**
 * Text size utility
 * @param {string} $size - The size of the text.
-*/
+*/ 
 @mixin text-size($size) {
   @if map.has-key(VAR.$font-sizes, $size) {
     font-size: map.get(VAR.$font-sizes, $size);
   } @else {
-    @warn "Font size '#{$size}' not found in $font-sizes map.";
+    font-size: $size;
   }
   
 }
@@ -160,7 +160,7 @@
 
 }
 
-@include responsive-typography();
+@include responsive-typography;
 .break-normal { @include break-normal; }
 .break-words { @include break-words; }
 .break-all { @include break-all; }

package/src/styles/utilities/_functions.scss

@@ -1,84 +0,0 @@
-@use 'sass:string';
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:meta';
-@use 'variables' as *;
-
-@function str-replace($string, $search, $replace: " ") {
-    $index: string.index($string, $search);
-    @if $index {
-      @return string.slice($string, 1, $index - 1)
-        + $replace
-        + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-    }
-    @return $string;
-  }
-
-@function get-breakpoint-value($bp) {
-    @if map.has-key($breakpoints, $bp) {
-        @return map.get($breakpoints, $bp);
-    } @else if meta.type-of($bp) == number {
-        @return $bp;
-    } @else {
-        @warn 'Invalid breakpoint: #{$bp}';
-        @return null;
-    }
-}
-
-@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/_variables.scss

@@ -1,126 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-
-$base-size: 16;
-@function rem($px) {
-  @if $px == 0 {
-    @return 0;
-  }
-  
-  // Strip units if $px has any
-  $value: if(math.unit($px) == '', $px, math.div($px, math.unit($px)));
-  
-  @return math.div($value, $base-size) * 1rem;
-}
-
-// 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;
-
-$default-container-name: nuvoui-container !default;
-$nuvoui-container-queries: false !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;
-
-// Breakpoints
-$breakpoints: (
-  'xs': 480px,
-  'sm': 640px,
-  'md': 768px,
-  'lg': 1024px,
-  'xl': 1280px,
-  '2xl': 1536px, 
-) !default;
-
-$grid-item-sizes: (
-  'xs': 200px,
-  'sm': 250px, 
-  'md': 300px,
-  'lg': 350px,
-  'xl': 400px
-) !default;
-
-// _variables.scss
-$font-sizes: (
-  'xs': 0.75rem,  // 12px
-  'sm': 0.875rem, // 14px
-  'md': 1rem,     // 16px
-  'lg': 1.25rem,  // 20px
-  'xl': 1.5rem,   // 24px
-  '2xl': 1.75rem, // 28px
-  '3xl': 2rem,    // 32px
-  '4xl': 2.5rem   // 40px
-) !default;
-
-@debug rem(4);
-// Updated spacing map
-$spacings: (
-  0: 0,
-  1: rem(4),    // 0.25rem
-  2: rem(8),    // 0.5rem
-  3: rem(12),   // 0.75rem
-  4: rem(16),   // 1rem
-  5: rem(20),   // 1.25rem
-  6: rem(24),   // 1.5rem
-  8: rem(32),   // 2rem
-  10: rem(40),  // 2.5rem
-  12: rem(48),  // 3rem
-  16: rem(64),  // 4rem
-  20: rem(80),  // 5rem
-  24: rem(96),  // 6rem
-  32: rem(128), // 8rem
-  40: rem(160), // 10rem
-  48: rem(192), // 12rem
-  56: rem(224), // 14rem
-  64: rem(256)  // 16rem
-);
-
-$percentages: (
-  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
-) !default;