@nuvoui/core 0.3.1 → 1.0.1

package/src/styles/utilities/_tooltips.scss

@@ -7,7 +7,6 @@
 [data-tooltip][role~="tooltip"]::before,
 [data-tooltip][role~="tooltip"]::after {
     transform: translate3d(0, 0, 0);
-    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     will-change: transform;
     opacity: 0;
@@ -25,7 +24,7 @@
 }
 
 [data-tooltip][role~="tooltip"]::after {
-    background: var(--tooltip-bg); //rgba(17, 17, 17, .95);
+    background: var(--tooltip-bg); // todo: change to a variable
     box-shadow: 0 3px 7px var(--tooltip-shadow-color);
     border-radius: 4px;
     color: #fff;
@@ -47,17 +46,17 @@
 }
 
 [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;
+    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
+    margin-bottom: 5px;
+    transform: translate3d(-50%, 0, 0);
+    bottom: 100%;
+    left: 50%
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::after {
-    margin-bottom: 11px
-}
-
-[role~="tooltip"][data-microtip-position|="top"]::before {
+    margin-bottom: 11px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
     left: 50%
@@ -67,12 +66,6 @@
     transform: translate3d(-50%, -5px, 0)
 }
 
-[role~="tooltip"][data-microtip-position|="top"]::after {
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%
-}
-
 [role~="tooltip"][data-microtip-position="top"]:hover::after {
     transform: translate3d(-50%, -5px, 0)
 }
@@ -96,34 +89,31 @@
 }
 
 [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;
+    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;
-    margin-bottom: 0
-}
-
-[role~="tooltip"][data-microtip-position|="bottom"]::after {
-    margin-top: 11px
-}
-
-[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    margin-bottom: 0;
     transform: translate3d(-50%, -10px, 0);
     bottom: auto;
     left: 50%;
     top: 100%
 }
 
-[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
-    transform: translate3d(-50%, 0, 0)
-}
-
 [role~="tooltip"][data-microtip-position|="bottom"]::after {
+    margin-top: 11px;
     transform: translate3d(-50%, -10px, 0);
     top: 100%;
     left: 50%
 }
 
+
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+    transform: translate3d(-50%, 0, 0)
+}
+
+
 [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
     transform: translate3d(-50%, 0, 0)
 }
@@ -148,15 +138,12 @@
 
 [role~="tooltip"][data-microtip-position="left"]::before,
 [role~="tooltip"][data-microtip-position="left"]::after {
-    bottom: auto;
-    left: auto;
-    right: 100%;
-    top: 50%;
+    inset: auto auto auto 100%;
     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;
+    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;
@@ -181,7 +168,7 @@
 }
 
 [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;
+    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;

package/src/styles/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+
 // Import variables
 @use '../utilities/variables' as *;
 

package/src/styles/utilities/_variables.scss

@@ -1,7 +1,7 @@
 // Global variables that might be used across different modules
-$enable-dark-mode: true;
-$enable-rtl: false;
-$enable-reduced-motion: true;
+$enable-dark-mode: true !default;
+$enable-rtl: true !default;;
+$enable-reduced-motion: true !default;;
 
 $column-count: 12 !default;
 
@@ -33,7 +33,7 @@ $breakpoints: (
   'lg': 1024px,
   'xl': 1280px,
   'xxl': 1536px, 
-);
+) !default;
 
 // Container max-widths
 $container-max-widths: (
@@ -43,28 +43,35 @@ $container-max-widths: (
   'lg': 960px,
   'xl': 1140px,
   'xxl': 1320px,
-);
+) !default;
 
 // _variables.scss
 $font-sizes: (
-  '4xl': 2.5rem,  // 40px
-  '3xl': 2rem,    // 32px
-  '2xl': 1.75rem, // 28px
-  'xl': 1.5rem,   // 24px
-  'lg': 1.25rem,  // 20px
-  'md': 1rem,     // 16px
+  'xs': 0.75rem,  // 12px
   'sm': 0.875rem, // 14px
-  'xs': 0.75rem   // 12px
-);
-
-
-// Column widths for auto-fit
-$column-widths: (
-  'sm': 200px,
-  'md': 300px,
-  'lg': 400px
-);
+  'md': 1rem,     // 16px
+  'lg': 1.25rem,  // 20px
+  'xl': 1.5rem,   // 24px
+  '2xl': 1.75rem, // 28px
+  '3xl': 2rem,    // 32px
+  '4xl': 2.5rem   // 40px
+) !default;
+ 
+$padding-map: (
+  'xs': 0.25rem 0.5rem,
+  'sm': 0.375rem 0.75rem,
+  'md': 0.5rem 1rem,
+  'lg': 0.75rem 1.5rem,
+  'xl': 1rem 2rem,
+  '2xl': 1.25rem 2.5rem,
+  '3xl': 1.5rem 3rem,
+  '4xl': 2rem 4rem, 
+) !default;
 
 $spacings: (
-  0,1,2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100
-)
+  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
+) !default;
+
+$percentages: (
+  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100
+) !default;