Add clamp-with-max & size-clamp sass functions

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1711466115649
+    "version": 1711467668591
 }

assets/styles/main.scss

@@ -20,6 +20,7 @@
 // Settings
 // ==========================================================================
 
+@import "settings/config";
 @import "settings/config.breakpoints";
 @import "settings/config.colors";
 @import "settings/config.eases";
@@ -27,7 +28,6 @@
 @import "settings/config.spacers";
 @import "settings/config.timings";
 @import "settings/config.zindexes";
-@import "settings/config";
 @import "settings/config.variables";
 
 // Generic

assets/styles/settings/_config.scss

@@ -32,12 +32,13 @@ $easing:    ease("power2.out");
 
 // Spacing Units
 // =============================================================================
-$unit:       60px;
+$unit:        60px;
-$unit-small: 20px;
+$unit-small:  20px;
+$vw-viewport: 1440;
 
 // Container
 // ==========================================================================
-$padding:         $unit;
+$padding:     $unit;
 
 // Grid
 // ==========================================================================

assets/styles/settings/_config.spacers.scss

@@ -33,14 +33,14 @@
 
 $spacers: (
     'gutter':   var(--grid-gutter),
-    '2xs':      #{spacingClamp('2xs')},
+    '2xs':      #{size-clamp('2xs')},
-    'xs':       #{spacingClamp('xs')},
+    'xs':       #{size-clamp('xs')},
-    'sm':       #{spacingClamp('sm')},
+    'sm':       #{size-clamp('sm')},
-    'md':       #{spacingClamp('md')},
+    'md':       #{size-clamp('md')},
-    'lg':       #{spacingClamp('lg')},
+    'lg':       #{size-clamp('lg')},
-    'xl':       #{spacingClamp('xl')},
+    'xl':       #{size-clamp('xl')},
-    '2xl':      #{spacingClamp('2xl')},
+    '2xl':      #{size-clamp('2xl')},
-    '3xl':      #{spacingClamp('3xl')},
+    '3xl':      #{size-clamp('3xl')},
 );
 
 // Function

assets/styles/tools/_functions.scss

@@ -178,6 +178,19 @@ $context: 'frontend' !default;
     @return calc(#{$number} * var(--vw, 1vw));
 }
 
+@function clamp-with-max($min, $size, $max) {
+    $vw-context: $vw-viewport * 0.01;
+    @return clamp(#{$min}, calc(#{$size} / #{$vw-context} * 1vw), #{$max});
+}
+
+@function size-clamp($size) {
+    @return clamp-with-max(
+        calc(#{rem(1px)} * var(--spacing-#{$size}-mobile)),
+        var(--spacing-#{$size}-desktop),
+        calc(#{rem(1px)} * var(--spacing-#{$size}-desktop))
+    );
+}
+
 // Returns clamp of calculated preferred responsive font size
 // within a font size and breakpoint range.
 //