@nuvoui/core 1.3.5 → 1.4.0

package/src/styles/utilities/_sizing.scss

@@ -2,294 +2,297 @@
 
 @use "sass:math";
 @use "sass:string" as str;
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
-@use "./container-queries" as Q;
-@use "./media-queries" as MQ;
+@use "../config/feature-flags" as config-flags;
+@use "../config/spacing" as config-spacing;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
+@use "../functions/units" as fn-units;
+@use "../tools/container-queries" as Q;
+@use "../tools/media-queries" as MQ;
 
 @mixin width($value) {
-  width: FN.fix-units($value);
+    width: fn-units.fix-units($value);
 }
 @mixin height($value) {
-  height: FN.fix-units($value);
+    height: fn-units.fix-units($value);
 }
 @mixin min-width($value) {
-  min-width: FN.fix-units($value);
+    min-width: fn-units.fix-units($value);
 }
 @mixin min-height($value) {
-  min-height: FN.fix-units($value);
+    min-height: fn-units.fix-units($value);
 }
 @mixin max-width($value) {
-  max-width: FN.fix-units($value);
+    max-width: fn-units.fix-units($value);
 }
 @mixin max-height($value) {
-  max-height: FN.fix-units($value);
+    max-height: fn-units.fix-units($value);
 }
 @mixin width-percent($i) {
-  width: str.unquote($i + "%");
+    width: str.unquote($i + "%");
 }
 @mixin height-percent($i) {
-  height: str.unquote($i + "%");
+    height: str.unquote($i + "%");
 }
 @mixin min-width-percent($i) {
-  min-width: str.unquote($i + "%");
+    min-width: str.unquote($i + "%");
 }
 @mixin min-height-percent($i) {
-  min-height: str.unquote($i + "%");
+    min-height: str.unquote($i + "%");
 }
 @mixin max-width-percent($i) {
-  max-width: str.unquote($i + "%");
+    max-width: str.unquote($i + "%");
 }
 @mixin max-height-percent($i) {
-  max-height: str.unquote($i + "%");
+    max-height: str.unquote($i + "%");
 }
 
 @mixin w-auto {
-  @include width(auto);
+    @include width(auto);
 }
 @mixin w-full {
-  @include width(100%);
+    @include width(100%);
 }
 @mixin h-auto {
-  @include height(auto);
+    @include height(auto);
 }
 @mixin h-full {
-  @include height(100%);
+    @include height(100%);
 }
 @mixin w-max {
-  @include width(max-content);
+    @include width(max-content);
 }
 @mixin h-max {
-  @include height(max-content);
+    @include height(max-content);
 }
 @mixin w-min {
-  @include width(min-content);
+    @include width(min-content);
 }
 @mixin h-min {
-  @include height(min-content);
+    @include height(min-content);
 }
 @mixin w-fit {
-  @include width(fit-content);
+    @include width(fit-content);
 }
 @mixin h-fit {
-  @include height(fit-content);
+    @include height(fit-content);
 }
 @mixin min-w-full {
-  @include min-width(100%);
+    @include min-width(100%);
 }
 @mixin max-w-full {
-  @include max-width(100%);
+    @include max-width(100%);
 }
 @mixin min-h-full {
-  @include min-height(100%);
+    @include min-height(100%);
 }
 @mixin max-h-full {
-  @include max-height(100%);
+    @include max-height(100%);
 }
 
 @mixin w-screen {
-  width: 100vw;
+    width: 100vw;
 }
 @mixin h-screen {
-  height: 100dvh;
+    height: 100dvh;
 }
 
-@if FN.feature-enabled("sizing") {
-  #{VAR.$parent-selector} .w-screen {
-    @include w-screen;
-  }
-
-  #{VAR.$parent-selector} .h-screen {
-    @include h-screen;
-  }
-
-  #{VAR.$parent-selector} .w-auto {
-    @include w-auto;
-  }
-
-  #{VAR.$parent-selector} .w-full {
-    @include w-full;
-  }
-
-  #{VAR.$parent-selector} .h-auto {
-    @include h-auto;
-  }
-
-  #{VAR.$parent-selector} .h-full {
-    @include h-full;
-  }
-
-  #{VAR.$parent-selector} .w-min {
-    @include w-min;
-  }
-
-  #{VAR.$parent-selector} .h-min {
-    @include h-min;
-  }
-
-  #{VAR.$parent-selector} .w-fit {
-    @include w-fit;
-  }
-
-  #{VAR.$parent-selector} .h-fit {
-    @include h-fit;
-  }
-
-  #{VAR.$parent-selector} .min-w-full {
-    @include min-w-full;
-  }
-
-  #{VAR.$parent-selector} .max-w-full {
-    @include max-w-full;
-  }
-
-  #{VAR.$parent-selector} .min-h-full {
-    @include min-h-full;
-  }
-
-  #{VAR.$parent-selector} .max-h-full {
-    @include max-h-full;
-  }
-
-  // Percentage widths
-  @each $i in VAR.$percentages {
-    #{VAR.$parent-selector} .w-#{$i}p {
-      @include width-percent($i);
-    }
-    #{VAR.$parent-selector} .h-#{$i}p {
-      @include height-percent($i);
-    }
-    #{VAR.$parent-selector} .min-w-#{$i}p {
-      @include min-width-percent($i);
-    }
-    #{VAR.$parent-selector} .min-h-#{$i}p {
-      @include min-height-percent($i);
-    }
-    #{VAR.$parent-selector} .max-w-#{$i}p {
-      @include max-width-percent($i);
-    }
-    #{VAR.$parent-selector} .max-h-#{$i}p {
-      @include max-height-percent($i);
+@if fn-flags.feature-enabled("sizing") {
+    #{config-flags.$parent-selector} .w-screen {
+        @include w-screen;
     }
-  }
 
-  // Generate utilities from spacing map
-  @each $key, $value in VAR.$spacings {
-    #{VAR.$parent-selector} .w-#{$key},
-    #{VAR.$parent-selector} .hover\:w-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:w-#{$key} {
-      @include width($value);
-    }
-    #{VAR.$parent-selector} .h-#{$key},
-    #{VAR.$parent-selector} .hover\:h-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:h-#{$key} {
-      @include height($value);
+    #{config-flags.$parent-selector} .h-screen {
+        @include h-screen;
     }
 
-    #{VAR.$parent-selector} .min-w-#{$key} {
-      @include min-width($value);
-    }
-    #{VAR.$parent-selector} .min-h-#{$key} {
-      @include min-height($value);
-    }
-    #{VAR.$parent-selector} .max-w-#{$key} {
-      @include max-width($value);
+    #{config-flags.$parent-selector} .w-auto {
+        @include w-auto;
     }
-    #{VAR.$parent-selector} .max-h-#{$key} {
-      @include max-height($value);
+
+    #{config-flags.$parent-selector} .w-full {
+        @include w-full;
     }
-  }
 
-  // Pixel widths based on spacing scale
-  @each $breakpoint, $width in VAR.$breakpoints {
-    #{VAR.$parent-selector} .w-#{$breakpoint} {
-      @include width($width);
+    #{config-flags.$parent-selector} .h-auto {
+        @include h-auto;
     }
-    #{VAR.$parent-selector} .min-w-#{$breakpoint} {
-      @include min-width($width);
+
+    #{config-flags.$parent-selector} .h-full {
+        @include h-full;
     }
-    #{VAR.$parent-selector} .max-w-#{$breakpoint} {
-      @include max-width($width);
+
+    #{config-flags.$parent-selector} .w-min {
+        @include w-min;
     }
 
-    #{VAR.$parent-selector} .w-auto\@#{$breakpoint} {
-      @include w-auto;
+    #{config-flags.$parent-selector} .h-min {
+        @include h-min;
     }
-    #{VAR.$parent-selector} .w-full\@#{$breakpoint} {
-      @include w-full;
+
+    #{config-flags.$parent-selector} .w-fit {
+        @include w-fit;
     }
-    #{VAR.$parent-selector} .h-auto\@#{$breakpoint} {
-      @include h-auto;
+
+    #{config-flags.$parent-selector} .h-fit {
+        @include h-fit;
     }
-    #{VAR.$parent-selector} .h-full\@#{$breakpoint} {
-      @include h-full;
+
+    #{config-flags.$parent-selector} .min-w-full {
+        @include min-w-full;
     }
-    #{VAR.$parent-selector} .w-min\@#{$breakpoint} {
-      @include w-min;
+
+    #{config-flags.$parent-selector} .max-w-full {
+        @include max-w-full;
     }
-    #{VAR.$parent-selector} .h-min\@#{$breakpoint} {
-      @include h-min;
+
+    #{config-flags.$parent-selector} .min-h-full {
+        @include min-h-full;
     }
-    #{VAR.$parent-selector} .w-fit\@#{$breakpoint} {
-      @include w-fit;
+
+    #{config-flags.$parent-selector} .max-h-full {
+        @include max-h-full;
     }
-    #{VAR.$parent-selector} .h-fit\@#{$breakpoint} {
-      @include h-fit;
+
+    // Percentage widths
+    @each $i in config-spacing.$percentages {
+        #{config-flags.$parent-selector} .w-#{$i}p {
+            @include width-percent($i);
+        }
+        #{config-flags.$parent-selector} .h-#{$i}p {
+            @include height-percent($i);
+        }
+        #{config-flags.$parent-selector} .min-w-#{$i}p {
+            @include min-width-percent($i);
+        }
+        #{config-flags.$parent-selector} .min-h-#{$i}p {
+            @include min-height-percent($i);
+        }
+        #{config-flags.$parent-selector} .max-w-#{$i}p {
+            @include max-width-percent($i);
+        }
+        #{config-flags.$parent-selector} .max-h-#{$i}p {
+            @include max-height-percent($i);
+        }
     }
 
-    @include MQ.media-up($breakpoint) {
-      // Generate utilities from spacing map
-      @each $i in VAR.$percentages {
-        #{VAR.$parent-selector} .w-#{$i}p\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:w-#{$i}p\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:w-#{$i}p\@#{$breakpoint} {
-          @include width-percent($i);
+    // Generate utilities from spacing map
+    @each $key, $value in config-spacing.$spacings {
+        #{config-flags.$parent-selector} .w-#{$key},
+        #{config-flags.$parent-selector} .hover\:w-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:w-#{$key} {
+            @include width($value);
         }
-        #{VAR.$parent-selector} .h-#{$i}p\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:h-#{$i}p\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:h-#{$i}p\@#{$breakpoint} {
-          @include height-percent($i);
+        #{config-flags.$parent-selector} .h-#{$key},
+        #{config-flags.$parent-selector} .hover\:h-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:h-#{$key} {
+            @include height($value);
         }
 
-        #{VAR.$parent-selector} .min-w-#{$i}p\@#{$breakpoint} {
-          @include min-width-percent($i);
+        #{config-flags.$parent-selector} .min-w-#{$key} {
+            @include min-width($value);
         }
-        #{VAR.$parent-selector} .min-h-#{$i}p\@#{$breakpoint} {
-          @include min-height-percent($i);
+        #{config-flags.$parent-selector} .min-h-#{$key} {
+            @include min-height($value);
         }
-        #{VAR.$parent-selector} .max-w-#{$i}p\@#{$breakpoint} {
-          @include max-width-percent($i);
+        #{config-flags.$parent-selector} .max-w-#{$key} {
+            @include max-width($value);
         }
-        #{VAR.$parent-selector} .max-h-#{$i}p\@#{$breakpoint} {
-          @include max-height-percent($i);
+        #{config-flags.$parent-selector} .max-h-#{$key} {
+            @include max-height($value);
         }
-      }
+    }
 
-      @each $key, $value in VAR.$spacings {
-        #{VAR.$parent-selector} .w-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:w-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:w-#{$key}\@#{$breakpoint} {
-          @include width($value);
+    // Pixel widths based on spacing scale
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        #{config-flags.$parent-selector} .w-#{$breakpoint} {
+            @include width($width);
+        }
+        #{config-flags.$parent-selector} .min-w-#{$breakpoint} {
+            @include min-width($width);
         }
-        #{VAR.$parent-selector} .h-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:h-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:h-#{$key}\@#{$breakpoint} {
-          @include height($value);
+        #{config-flags.$parent-selector} .max-w-#{$breakpoint} {
+            @include max-width($width);
         }
 
-        #{VAR.$parent-selector} .min-w-#{$key}\@#{$breakpoint} {
-          @include min-width($value);
+        #{config-flags.$parent-selector} .w-auto\@#{$breakpoint} {
+            @include w-auto;
+        }
+        #{config-flags.$parent-selector} .w-full\@#{$breakpoint} {
+            @include w-full;
+        }
+        #{config-flags.$parent-selector} .h-auto\@#{$breakpoint} {
+            @include h-auto;
+        }
+        #{config-flags.$parent-selector} .h-full\@#{$breakpoint} {
+            @include h-full;
         }
-        #{VAR.$parent-selector} .min-h-#{$key}\@#{$breakpoint} {
-          @include min-height($value);
+        #{config-flags.$parent-selector} .w-min\@#{$breakpoint} {
+            @include w-min;
         }
-        #{VAR.$parent-selector} .max-w-#{$key}\@#{$breakpoint} {
-          @include max-width($value);
+        #{config-flags.$parent-selector} .h-min\@#{$breakpoint} {
+            @include h-min;
         }
-        #{VAR.$parent-selector} .max-h-#{$key}\@#{$breakpoint} {
-          @include max-height($value);
+        #{config-flags.$parent-selector} .w-fit\@#{$breakpoint} {
+            @include w-fit;
+        }
+        #{config-flags.$parent-selector} .h-fit\@#{$breakpoint} {
+            @include h-fit;
+        }
+
+        @include MQ.media-up($breakpoint) {
+            // Generate utilities from spacing map
+            @each $i in config-spacing.$percentages {
+                #{config-flags.$parent-selector} .w-#{$i}p\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:w-#{$i}p\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:w-#{$i}p\@#{$breakpoint} {
+                    @include width-percent($i);
+                }
+                #{config-flags.$parent-selector} .h-#{$i}p\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:h-#{$i}p\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:h-#{$i}p\@#{$breakpoint} {
+                    @include height-percent($i);
+                }
+
+                #{config-flags.$parent-selector} .min-w-#{$i}p\@#{$breakpoint} {
+                    @include min-width-percent($i);
+                }
+                #{config-flags.$parent-selector} .min-h-#{$i}p\@#{$breakpoint} {
+                    @include min-height-percent($i);
+                }
+                #{config-flags.$parent-selector} .max-w-#{$i}p\@#{$breakpoint} {
+                    @include max-width-percent($i);
+                }
+                #{config-flags.$parent-selector} .max-h-#{$i}p\@#{$breakpoint} {
+                    @include max-height-percent($i);
+                }
+            }
+
+            @each $key, $value in config-spacing.$spacings {
+                #{config-flags.$parent-selector} .w-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:w-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:w-#{$key}\@#{$breakpoint} {
+                    @include width($value);
+                }
+                #{config-flags.$parent-selector} .h-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:h-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:h-#{$key}\@#{$breakpoint} {
+                    @include height($value);
+                }
+
+                #{config-flags.$parent-selector} .min-w-#{$key}\@#{$breakpoint} {
+                    @include min-width($value);
+                }
+                #{config-flags.$parent-selector} .min-h-#{$key}\@#{$breakpoint} {
+                    @include min-height($value);
+                }
+                #{config-flags.$parent-selector} .max-w-#{$key}\@#{$breakpoint} {
+                    @include max-width($value);
+                }
+                #{config-flags.$parent-selector} .max-h-#{$key}\@#{$breakpoint} {
+                    @include max-height($value);
+                }
+            }
         }
-      }
     }
-  }
 }