@nuvoui/core 1.2.2 → 1.2.4

package/src/styles/utilities/_spacing.scss

@@ -117,7 +117,7 @@
  * @description Sets padding on all sides
  * @param {Number|String} $val - Padding value
  */
-@mixin p($val) { & { padding: format-unit-value($val); }}
+@mixin p($val) {  padding: format-unit-value($val); }
 
 /**
 * @mixin px
@@ -126,11 +126,8 @@
 */
 @mixin px($val) { 
   $val: format-unit-value($val); 
-
-  & {
-    padding-left: $val; 
-    padding-right: $val; 
-  }
+  
+  padding-inline: $val;
 }
 
 /**
@@ -140,11 +137,8 @@
 */
 @mixin py($val) { 
   $val: format-unit-value($val); 
-
-  & {
-    padding-top: $val; 
-    padding-bottom: $val; 
-  }
+  
+  padding-block: $val;
 }
   
 /**
@@ -153,11 +147,9 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pt($val) { 
-  & {
-     $val: format-unit-value($val); 
-    
-     padding-top: $val; 
-    } 
+  $val: format-unit-value($val); 
+
+  padding-top: $val; 
 }
 
 /**
@@ -166,11 +158,9 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pr($val) { 
-  & {
-     $val: format-unit-value($val); 
-    
-     padding-right: $val; 
-    } 
+  $val: format-unit-value($val); 
+
+  padding-right: $val; 
 }
 
 /**
@@ -179,11 +169,9 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pb($val) { 
-  & {
-     $val: format-unit-value($val); 
-    
-     padding-bottom: $val; 
-    } 
+  $val: format-unit-value($val); 
+
+  padding-bottom: $val; 
 }
 
 /**
@@ -192,11 +180,9 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pl($val) { 
-  & {
-     $val: format-unit-value($val); 
-    
-     padding-left: $val; 
-    } 
+  $val: format-unit-value($val); 
+
+  padding-left: $val; 
 }
 
 // -----------------------------------------------
@@ -209,11 +195,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin m($val) { 
-  & {
-     $val: format-unit-value($val); 
-    
-     margin: $val; 
-    } 
+  $val: format-unit-value($val); 
+
+  margin: $val; 
 }
 
 /**
@@ -224,10 +208,7 @@
 @mixin mx($val) { 
   $val: format-unit-value($val); 
 
-  & {
-    margin-left: $val; 
-    margin-right: $val; 
-  }
+  margin-inline: $val;
 }
 
 /**
@@ -236,12 +217,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin my($val) { 
-  $val: format-unit-value($val); 
+  $val: format-unit-value($val);
 
-  &{
-    margin-top: $val; 
-    margin-bottom: $val; 
-  }
+  margin-block: $val;
 }
 
 /**
@@ -250,11 +228,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mt($val) { 
-  & {  
-    $val: format-unit-value($val); 
-    
-    margin-top: $val; 
-  } 
+  $val: format-unit-value($val); 
+
+  margin-top: $val; 
 }
 
 /**
@@ -263,11 +239,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mr($val) { 
-  & { 
-    $val: format-unit-value($val); 
-    
-    margin-right: $val; 
-  } 
+  $val: format-unit-value($val); 
+  
+  margin-right: $val; 
 }
 
 /**
@@ -276,11 +250,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mb($val) { 
-  & { 
-    $val: format-unit-value($val); 
-    
-    margin-bottom: $val; 
-  } 
+  $val: format-unit-value($val); 
+  
+  margin-bottom: $val; 
 }
 
 /**
@@ -289,24 +261,22 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin ml($val) { 
-  & { 
-    $val: format-unit-value($val); 
-    
-    margin-left: $val; 
-  } 
+  $val: format-unit-value($val); 
+  
+  margin-left: $val; 
 }
 
 /**
 * @mixin ml-auto
 * @description Sets margin-left to auto
 */
-@mixin ml-auto { & {  margin-left: auto; } }
+@mixin ml-auto {   margin-left: auto; } 
 
 /**
 * @mixin mr-auto
 * @description Sets margin-right to auto
 */
-@mixin mr-auto { & {  margin-right: auto; } }
+@mixin mr-auto {   margin-right: auto; } 
 
 /**
 * @mixin mx-auto
@@ -424,39 +394,39 @@
   // -----------------------------------------------
 
   @each $breakpoint, $width in $breakpoints {
-      @media (min-width: #{$width}) {
-          .mx-auto\@#{$breakpoint} { @include mx-auto; }
-          .ml-auto\@#{$breakpoint} { @include ml-auto; }
-          .mr-auto\@#{$breakpoint} { @include mr-auto; }
-
-          // Generate utilities from spacing map
-          @each $key, $value in $spacings {
-              // Padding classes
-              .p-#{$key}\@#{$breakpoint} { @include p($value); }
-              .px-#{$key}\@#{$breakpoint} { @include px($value); }
-              .py-#{$key}\@#{$breakpoint} { @include py($value); }
-              .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
-              .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
-              .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
-              .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
-
-              // Margin classes
-              .m-#{$key}\@#{$breakpoint} { @include m($value); }
-              .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
-              .my-#{$key}\@#{$breakpoint} { @include my($value); }
-              .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
-              .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
-              .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
-              .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
-
-              .gap-#{$key}\@#{$breakpoint} { gap: $value; }
-              .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
-              .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
-        
-              // Space classes
-              .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
-              .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
-          }
+    @media (min-width: #{$width}) {
+      .mx-auto\@#{$breakpoint} { @include mx-auto; }
+      .ml-auto\@#{$breakpoint} { @include ml-auto; }
+      .mr-auto\@#{$breakpoint} { @include mr-auto; }
+
+      // Generate utilities from spacing map
+      @each $key, $value in $spacings {
+        // Padding classes
+        .p-#{$key}\@#{$breakpoint} { @include p($value); }
+        .px-#{$key}\@#{$breakpoint} { @include px($value); }
+        .py-#{$key}\@#{$breakpoint} { @include py($value); }
+        .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
+        .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
+        .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
+        .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
+
+        // Margin classes
+        .m-#{$key}\@#{$breakpoint} { @include m($value); }
+        .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
+        .my-#{$key}\@#{$breakpoint} { @include my($value); }
+        .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
+        .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
+        .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
+        .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
+
+        .gap-#{$key}\@#{$breakpoint} { gap: $value; }
+        .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
+        .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
+  
+        // Space classes
+        .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
+        .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
       }
+    }
   }
-}
+}

package/src/styles/utilities/_transitions.scss

@@ -13,11 +13,9 @@
 
 // Base transition mixins
 @mixin transition {
-  & {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 // Property-specific transition mixins
@@ -155,4 +153,4 @@ $delays: (
       }
     }
   }
-}
+}

package/src/styles/utilities/_typography.scss

@@ -32,135 +32,131 @@
 * @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 {
       font-size: $size;
     }
-  }
 }
 
 // Font weights
-@mixin font-thin { & { font-weight: 100; } }
-@mixin font-extralight { & { font-weight: 200; } }
-@mixin font-light { & { font-weight: 300; } }
-@mixin font-normal { & { font-weight: 400; } }
-@mixin font-medium { & { font-weight: 500; } }
-@mixin font-semibold { & { font-weight: 600; } }
-@mixin font-bold { & { font-weight: 700; } }
-@mixin font-extrabold { & { font-weight: 800; } }
-@mixin font-black { & { font-weight: 900; } }
+@mixin font-thin { font-weight: 100; }
+@mixin font-extralight { font-weight: 200; }
+@mixin font-light { font-weight: 300; }
+@mixin font-normal { font-weight: 400; }
+@mixin font-medium { font-weight: 500; }
+@mixin font-semibold { font-weight: 600; }
+@mixin font-bold { font-weight: 700; }
+@mixin font-extrabold { font-weight: 800; }
+@mixin font-black { font-weight: 900; }
 
 
 @mixin leading($value){
-  & {
-    @if meta.type-of($value) == 'number' {
-      line-height: $value;
-    } @else if $value == 'none' {
-      line-height: 1;
-    } @else if $value == 'tight' {
-      line-height: 1.25;
-    } @else if $value == 'snug' {
-      line-height: 1.375;
-    } @else if $value == 'normal' {
-      line-height: 1.5;
-    } @else if $value == 'relaxed' {
-      line-height: 1.625;
-    } @else if $value == 'loose' {
-      line-height: 2;
-    } @else {
-      line-height: $value;
-    }
+  @if meta.type-of($value) == 'number' {
+    line-height: $value;
+  } @else if $value == 'none' {
+    line-height: 1;
+  } @else if $value == 'tight' {
+    line-height: 1.25;
+  } @else if $value == 'snug' {
+    line-height: 1.375;
+  } @else if $value == 'normal' {
+    line-height: 1.5;
+  } @else if $value == 'relaxed' {
+    line-height: 1.625;
+  } @else if $value == 'loose' {
+    line-height: 2;
+  } @else {
+    line-height: $value;
   }
 }
 
 // Line heights
-@mixin leading-none { & { @include leading(none);} }
-@mixin leading-tight { & { @include leading(tight);} }
-@mixin leading-snug { & { @include leading(snug);} }
-@mixin leading-normal { & { @include leading(normal);} }
-@mixin leading-relaxed { & { @include leading(relaxed);} }
-@mixin leading-loose { & { @include leading(loose);} }
+@mixin leading-none { @include leading(none);} 
+@mixin leading-tight { @include leading(tight);} 
+@mixin leading-snug { @include leading(snug);} 
+@mixin leading-normal { @include leading(normal);} 
+@mixin leading-relaxed { @include leading(relaxed);} 
+@mixin leading-loose { @include leading(loose);} 
 
 // Text alignment
-@mixin text-left { & { text-align: left; } }
-@mixin text-center { & { text-align: center; } }
-@mixin text-right { & { text-align: right; } }
-@mixin text-justify { & { text-align: justify; } }
+@mixin text-left { text-align: left; }
+@mixin text-center { text-align: center; }
+@mixin text-right { text-align: right; }
+@mixin text-justify { text-align: justify; }
 
 
 // Text transform mixins
-@mixin uppercase { & { text-transform: uppercase; } }
-@mixin lowercase { & { text-transform: lowercase; } }
-@mixin capitalize { & { text-transform: capitalize; } }
-@mixin normal-case { & { text-transform: none; } }
+@mixin uppercase { text-transform: uppercase; }
+@mixin lowercase { text-transform: lowercase; }
+@mixin capitalize { text-transform: capitalize; }
+@mixin normal-case { text-transform: none; }
 
 // Font style mixins
-@mixin italic { & { font-style: italic; } }
-@mixin not-italic { & { font-style: normal; } }
+@mixin italic { font-style: italic; } 
+@mixin not-italic { font-style: normal; } 
 
 // Text decoration mixins
-@mixin underline { & { text-decoration: underline; } }
-@mixin line-through { & { text-decoration: line-through; } }
-@mixin no-underline { & { text-decoration: none; } }
+@mixin underline { text-decoration: underline; } 
+@mixin line-through { text-decoration: line-through; } 
+@mixin no-underline { text-decoration: none; } 
 
 // Text overflow mixin
 @mixin truncate { 
-  & { 
-    overflow: hidden; 
-    text-overflow: ellipsis; 
-    white-space: nowrap; 
-  } 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+  white-space: nowrap; 
+}
+
+@mixin overflow-label {
+  white-space: nowrap;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 0;
 }
 
 @mixin truncate-lines($lines: 2) {
-  & {
-    display: -webkit-box;
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 
 @mixin break-normal {
-  & {
-    overflow-wrap: normal;
-    word-break: normal;
-  }
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
-@mixin break-words { & {overflow-wrap: break-word; }}
-@mixin break-all { & {word-break: break-all; }}
-@mixin whitespace-normal { & {white-space: normal; }}
-@mixin whitespace-nowrap { & {white-space: nowrap; }}
-@mixin whitespace-pre { & {white-space: pre; }}
-@mixin whitespace-pre-line { & {white-space: pre-line; }}
-@mixin whitespace-pre-wrap { & {white-space: pre-wrap; }}
+@mixin break-words { overflow-wrap: break-word; }
+@mixin break-all { word-break: break-all; }
+@mixin whitespace-normal { white-space: normal; }
+@mixin whitespace-nowrap { white-space: nowrap; }
+@mixin whitespace-pre { white-space: pre; }
+@mixin whitespace-pre-line { white-space: pre-line; }
+@mixin whitespace-pre-wrap { white-space: pre-wrap; }
 
 
 // Custom letter spacing mixin with value
 @mixin tracking($value) {
-  & {
-    @if meta.type-of($value) == 'number' {
-      letter-spacing: $value;
-    } @else if $value == 'tighter' {
-      letter-spacing: -0.05em;
-    } @else if $value == 'tight' {
-      letter-spacing: -0.025em;
-    } @else if $value == 'normal' {
-      letter-spacing: 0;
-    } @else if $value == 'wide' {
-      letter-spacing: 0.025em;
-    } @else if $value == 'wider' {
-      letter-spacing: 0.05em;
-    } @else if $value == 'widest' {
-      letter-spacing: 0.1em;
-    } @else {
-      letter-spacing: $value;
-    }
+  @if meta.type-of($value) == 'number' {
+    letter-spacing: $value;
+  } @else if $value == 'tighter' {
+    letter-spacing: -0.05em;
+  } @else if $value == 'tight' {
+    letter-spacing: -0.025em;
+  } @else if $value == 'normal' {
+    letter-spacing: 0;
+  } @else if $value == 'wide' {
+    letter-spacing: 0.025em;
+  } @else if $value == 'wider' {
+    letter-spacing: 0.05em;
+  } @else if $value == 'widest' {
+    letter-spacing: 0.1em;
+  } @else {
+    letter-spacing: $value;
   }
 }
 
@@ -230,6 +226,8 @@
   .tracking-wide#{$suffix} { @include tracking(wide) };
   .tracking-wider#{$suffix} { @include tracking(wider) };
   .tracking-widest#{$suffix} { @include tracking(widest) };
+  
+  .overflow-label#{$suffix}{@include overflow-label};
 }
 
 @if VAR.$generate-utility-classes {
@@ -244,12 +242,11 @@
   .whitespace-pre-wrap { @include whitespace-pre-wrap; }
 
   @each $breakpoint, $width in VAR.$breakpoints {
-      @media (min-width: #{$width}) {
-          @each $size, $val in VAR.$font-sizes {
-              .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
-          }
-          @include responsive-typography($breakpoint);
+    @media (min-width: #{$width}) {
+      @each $size, $val in VAR.$font-sizes {
+        .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
       }
+      @include responsive-typography($breakpoint);
+    }
   }
-
 }