Refactor CSS files and modulate.css for improved styling and build process

Author: arinker

dist/css/modulate-advanced-page-grid.css

@@ -1,4 +1,4 @@
-@layer base, typography, primitive, page, section, widget, utility, theme, override;
+@layer base, typography, primitive, page, module, widget, utility, theme, override;
 
 /* ====================================================================================================
     Defaults
@@ -18,18 +18,15 @@
         --row-gap-min: 10; /* Minimum Row Gap Width */
         --row-gap-max: 100; /* Maximum Row Gap Width */
 
-        --spacing-xs-min: 8;
-        --spacing-xs-max: 16;
-        --spacing-sm-min: 16;
-        --spacing-sm-max: 32;
-        --spacing-md-min: 32;
-        --spacing-md-max: 92;
-        --spacing-lg-min: 64;
-        --spacing-lg-max: 128;
-        --spacing-xl-min: 128;
-        --spacing-xl-max: 256;
-        --spacing-2xl-min: 256;
-        --spacing-2xl-max: 512;
+        --module-padding-block-start-min: 0;
+        --module-padding-block-start-max: 0;
+        --module-padding-block-end-min: 0;
+        --module-padding-block-end-max: 0;
+        --module-margin-block-start-min: 0;
+        --module-margin-block-start-max: 0;
+        --module-margin-block-end-min: 0;
+        --module-margin-block-end-max: 0;
+
         --autolayout-width: 320px;
     }
 }
@@ -46,30 +43,6 @@
         --column-gap-v: calc(((100 * (var(--column-gap-max) - var(--column-gap-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
         --column-gap-r: calc((((var(--grid-s-min) * var(--column-gap-max)) - (var(--grid-s-max) * var(--column-gap-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
         --column-gap: clamp(calc((var(--column-gap-min) / var(--grid-rem)) * 1rem), calc(var(--column-gap-v) + var(--column-gap-r) * 1rem), calc((var(--column-gap-max) / var(--grid-rem)) * 1rem));
-
-        --spacing-xs-v: calc(((100 * (var(--spacing-xs-max) - var(--spacing-xs-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
-        --spacing-xs-r: calc((((var(--grid-s-min) * var(--spacing-xs-max)) - (var(--grid-s-max) * var(--spacing-xs-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
-        --spacing-xs: clamp(calc((var(--spacing-xs-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-xs-v) + var(--spacing-xs-r) * 1rem), calc((var(--spacing-xs-max) / var(--grid-rem)) * 1rem));
-
-        --spacing-sm-v: calc(((100 * (var(--spacing-sm-max) - var(--spacing-sm-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
-        --spacing-sm-r: calc((((var(--grid-s-min) * var(--spacing-sm-max)) - (var(--grid-s-max) * var(--spacing-sm-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
-        --spacing-sm: clamp(calc((var(--spacing-sm-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-sm-v) + var(--spacing-sm-r) * 1rem), calc((var(--spacing-sm-max) / var(--grid-rem)) * 1rem));
-
-        --spacing-md-v: calc(((100 * (var(--spacing-md-max) - var(--spacing-md-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
-        --spacing-md-r: calc((((var(--grid-s-min) * var(--spacing-md-max)) - (var(--grid-s-max) * var(--spacing-md-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
-        --spacing-md: clamp(calc((var(--spacing-md-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-md-v) + var(--spacing-md-r) * 1rem), calc((var(--spacing-md-max) / var(--grid-rem)) * 1rem));
-
-        --spacing-lg-v: calc(((100 * (var(--spacing-lg-max) - var(--spacing-lg-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
-        --spacing-lg-r: calc((((var(--grid-s-min) * var(--spacing-lg-max)) - (var(--grid-s-max) * var(--spacing-lg-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
-        --spacing-lg: clamp(calc((var(--spacing-lg-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-lg-v) + var(--spacing-lg-r) * 1rem), calc((var(--spacing-lg-max) / var(--grid-rem)) * 1rem));
-
-        --spacing-xl-v: calc(((100 * (var(--spacing-xl-max) - var(--spacing-xl-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
-        --spacing-xl-r: calc((((var(--grid-s-min) * var(--spacing-xl-max)) - (var(--grid-s-max) * var(--spacing-xl-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
-        --spacing-xl: clamp(calc((var(--spacing-xl-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-xl-v) + var(--spacing-xl-r) * 1rem), calc((var(--spacing-xl-max) / var(--grid-rem)) * 1rem));
-
-        --spacing-2xl-v: calc(((100 * (var(--spacing-2xl-max) - var(--spacing-2xl-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
-        --spacing-2xl-r: calc((((var(--grid-s-min) * var(--spacing-2xl-max)) - (var(--grid-s-max) * var(--spacing-2xl-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
-        --spacing-2xl: clamp(calc((var(--spacing-2xl-min) / var(--grid-rem)) * 1rem), calc(var(--spacing-2xl-v) + var(--spacing-2xl-r) * 1rem), calc((var(--spacing-2xl-max) / var(--grid-rem)) * 1rem));
     }
 }
 
@@ -78,27 +51,39 @@
 ==================================================================================================== */
 @layer base {
     .page-grid {
+        --module-margin-block-start-v: calc(((100 * (var(--module-margin-block-start-max) - var(--module-margin-block-start-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
+        --module-margin-block-start-r: calc((((var(--grid-s-min) * var(--module-margin-block-start-max)) - (var(--grid-s-max) * var(--module-margin-block-start-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
+        --module-margin-block-start: clamp(calc((var(--module-margin-block-start-min) / var(--grid-rem)) * 1rem), calc(var(--module-margin-block-start-v) + var(--module-margin-block-start-r) * 1rem), calc((var(--module-margin-block-start-max) / var(--grid-rem)) * 1rem));
+
+        --module-margin-block-end-v: calc(((100 * (var(--module-margin-block-end-max) - var(--module-margin-block-end-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
+        --module-margin-block-end-r: calc((((var(--grid-s-min) * var(--module-margin-block-end-max)) - (var(--grid-s-max) * var(--module-margin-block-end-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
+        --module-margin-block-end: clamp(calc((var(--module-margin-block-end-min) / var(--grid-rem)) * 1rem), calc(var(--module-margin-block-end-v) + var(--module-margin-block-end-r) * 1rem), calc((var(--module-margin-block-end-max) / var(--grid-rem)) * 1rem));
+
+        --module-padding-block-start-v: calc(((100 * (var(--module-padding-block-start-max) - var(--module-padding-block-start-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
+        --module-padding-block-start-r: calc((((var(--grid-s-min) * var(--module-padding-block-start-max)) - (var(--grid-s-max) * var(--module-padding-block-start-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
+        --module-padding-block-start: clamp(calc((var(--module-padding-block-start-min) / var(--grid-rem)) * 1rem), calc(var(--module-padding-block-start-v) + var(--module-padding-block-start-r) * 1rem), calc((var(--module-padding-block-start-max) / var(--grid-rem)) * 1rem));
+
+        --module-padding-block-end-v: calc(((100 * (var(--module-padding-block-end-max) - var(--module-padding-block-end-min))) / (var(--grid-s-max) - var(--grid-s-min))) * 1vw);
+        --module-padding-block-end-r: calc((((var(--grid-s-min) * var(--module-padding-block-end-max)) - (var(--grid-s-max) * var(--module-padding-block-end-min))) / (var(--grid-s-min) - var(--grid-s-max))) / var(--grid-rem));
+        --module-padding-block-end: clamp(calc((var(--module-padding-block-end-min) / var(--grid-rem)) * 1rem), calc(var(--module-padding-block-end-v) + var(--module-padding-block-end-r) * 1rem), calc((var(--module-padding-block-end-max) / var(--grid-rem)) * 1rem));
+
         background: var(--cs-background-framed);
         position: relative;
         display: grid;
         width: 100dvw;
         gap: 0;
 
-        --section-padding-block-start: 0;
-        --section-padding-block-end: 0;
-        --section-margin-block-start: 0;
-        --section-margin-block-end: 0;
         --page-grid-rows: [row-start] minmax(0, min-content) [row-end];
 
         grid-template-rows:
             [module-start]
-            var(--section-margin-block-start)
+            var(--module-margin-block-start)
             [frame-start]
-            var(--section-padding-block-start)
+            var(--module-padding-block-start)
             var(--page-grid-rows)
-            var(--section-padding-block-end)
+            var(--module-padding-block-end)
             [frame-end]
-            var(--section-margin-block-end)
+            var(--module-margin-block-end)
             [module-end];
 
         --column-width: [col-start] minmax(0, calc(((var(--grid-width-max) * 1px) - ((var(--grid-columns) - 1) * var(--column-gap))) / var(--grid-columns))) [col-end];