@nuvoui/core 1.3.1 → 1.3.3

package/src/styles/utilities/_display.scss

@@ -40,6 +40,26 @@
   display: initial;
 }
 
+// @description Establishes a grid container.
+@mixin grid {
+  display: grid;
+}
+
+// @description Establishes a inline-grid container.
+@mixin grid-inline {
+  display: inline-grid;
+}
+
+// @description Establishes a flex container.
+@mixin flex {
+  display: flex;
+}
+
+// @description Establishes a flex-inline container.
+@mixin flex-inline {
+  display: inline-flex;
+}
+
 // @description Set display to table.
 @mixin d-tbl {
   display: table;
@@ -120,6 +140,24 @@
     @include inline-block;
   }
 
+  #{VAR.$parent-selector} .contents {
+    @include contents;
+  }
+
+  #{VAR.$parent-selector} .grid {
+    @include grid;
+
+    &.inline {
+      @include grid-inline;
+    }
+  }
+  #{VAR.$parent-selector} .flex {
+    @include flex;
+
+    &.inline {
+      @include flex-inline;
+    }
+  }
   #{VAR.$parent-selector} .visible {
     @include visible;
   }
@@ -132,10 +170,6 @@
     @include collapse;
   }
 
-  #{VAR.$parent-selector} .contents {
-    @include contents;
-  }
-
   #{VAR.$parent-selector} .overflow-hidden {
     @include overflow-hidden;
   }
@@ -208,6 +242,24 @@
       #{VAR.$parent-selector} .inline-block\@#{$breakpoint} {
         @include inline-block;
       }
+
+      #{VAR.$parent-selector} .contents\@#{$breakpoint} {
+        @include contents;
+      }
+      #{VAR.$parent-selector} .grid\@#{$breakpoint} {
+        @include grid;
+
+        &.inline {
+          @include grid-inline;
+        }
+      }
+      #{VAR.$parent-selector} .flex\@#{$breakpoint} {
+        @include flex;
+
+        &.inline {
+          @include flex-inline;
+        }
+      }
       #{VAR.$parent-selector} .visible\@#{$breakpoint} {
         @include visible;
       }
@@ -217,9 +269,6 @@
       #{VAR.$parent-selector} .collapse\@#{$breakpoint} {
         @include collapse;
       }
-      #{VAR.$parent-selector} .contents\@#{$breakpoint} {
-        @include contents;
-      }
       #{VAR.$parent-selector} .overflow-hidden\@#{$breakpoint} {
         @include overflow-hidden;
       }

package/src/styles/utilities/_typography.scss

@@ -34,32 +34,16 @@
 }
 
 // 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($weight) {
+  @if map.has-key(VAR.$font-weights, #{$weight}) {
+    font-weight: map.get(VAR.$font-weights, $weight);
+  } @else if meta.type-of($weight) == number {
+    font-weight: $weight;
+  } @else {
+    @warn "Unknown font weight: #{$weight} setting it to default.";
+
+    font-weight: 400; // Default to normal weight
+  }
 }
 
 @mixin leading($value) {
@@ -86,18 +70,23 @@
 @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);
 }
@@ -106,12 +95,15 @@
 @mixin text-left {
   text-align: left;
 }
+
 @mixin text-center {
   text-align: center;
 }
+
 @mixin text-right {
   text-align: right;
 }
+
 @mixin text-justify {
   text-align: justify;
 }
@@ -120,12 +112,15 @@
 @mixin uppercase {
   text-transform: uppercase;
 }
+
 @mixin lowercase {
   text-transform: lowercase;
 }
+
 @mixin capitalize {
   text-transform: capitalize;
 }
+
 @mixin normal-case {
   text-transform: none;
 }
@@ -134,6 +129,7 @@
 @mixin italic {
   font-style: italic;
 }
+
 @mixin not-italic {
   font-style: normal;
 }
@@ -142,9 +138,11 @@
 @mixin underline {
   text-decoration: underline;
 }
+
 @mixin line-through {
   text-decoration: line-through;
 }
+
 @mixin no-underline {
   text-decoration: none;
 }
@@ -180,21 +178,27 @@
 @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;
 }
@@ -223,18 +227,23 @@
 @mixin tracking-tighter {
   @include tracking(tighter);
 }
+
 @mixin tracking-tight {
   @include tracking(tight);
 }
+
 @mixin tracking-normal {
   @include tracking(normal);
 }
+
 @mixin tracking-wide {
   @include tracking(wide);
 }
+
 @mixin tracking-wider {
   @include tracking(wider);
 }
+
 @mixin tracking-widest {
   @include tracking(widest);
 }
@@ -250,39 +259,39 @@
 
   // Generate font weight utilities
   #{VAR.$parent-selector} .font-thin#{$suffix} {
-    @include font-thin;
+    @include font(thin);
   }
 
   #{VAR.$parent-selector} .font-extralight#{$suffix} {
-    @include font-extralight;
+    @include font(extralight);
   }
 
   #{VAR.$parent-selector} .font-light#{$suffix} {
-    @include font-light;
+    @include font(light);
   }
 
   #{VAR.$parent-selector} .font-normal#{$suffix} {
-    @include font-normal;
+    @include font(normal);
   }
 
   #{VAR.$parent-selector} .font-medium#{$suffix} {
-    @include font-medium;
+    @include font(medium);
   }
 
   #{VAR.$parent-selector} .font-semibold#{$suffix} {
-    @include font-semibold;
+    @include font(semibold);
   }
 
   #{VAR.$parent-selector} .font-bold#{$suffix} {
-    @include font-bold;
+    @include font(bold);
   }
 
   #{VAR.$parent-selector} .font-extrabold#{$suffix} {
-    @include font-extrabold;
+    @include font(extrabold);
   }
 
   #{VAR.$parent-selector} .font-black#{$suffix} {
-    @include font-black;
+    @include font(black);
   }
 
   // Generate line height utilities