feat (theme): update fluid-size sass function

BeAPI · Sep 23, 2024 · 7ccd848 · 7ccd848
1 parent dacf9d0
commit 7ccd848
Showing 1 changed file with 10 additions and 16 deletions.
diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss
@@ -7,32 +7,26 @@
  *
  * @author Cédric Andrietti
  *
- * @param $min-size -> Minimal display size (mobile)
- * @param $max-size -> Maximal display size (Desktop)
- * @param $fluid-breakpoint-start -> Start fluid after this value
- * @param $fluid-breakpoint-end -> End fluid after this value - To be defined with designer
+ * @param $min -> Minimal display size (mobile)
+ * @param $max -> Maximal display size (Desktop)
+ * @param $start -> Start breakpoint
+ * @param $end -> End breakpoint
  *
  * Examples :
  *
  *      h1 {
- *          font-size: #{fluid-size(58px, 156px)};
+ *          font-size: #{fluid-size(58px, 156px, sm, md)};
  *          line-height: #{fluid-size(1.05, 1.2)};
  *      }
  *
  */
 
+@use "sass:map";
 @use "sass:math";
 
-@function fluid-size($min-size, $max-size, $fluid-breakpoint-start: 375, $fluid-breakpoint-end: 1440) {
-    $default_scale_factor : 1;
-    $view_port_width_offset : math.div($fluid-breakpoint-start, 100) * 1px;
-    $linear_factor : 100 * math.div(( $max-size - $min-size ), ( $fluid-breakpoint-end - $fluid-breakpoint-start ));
-    $linear_factor_scaled : strip-units($linear_factor * $default_scale_factor);
-    $fluid_target_font_size : #{$min-size}#{" + ((1vw - "}#{$view_port_width_offset}#{") * "}#{$linear_factor_scaled}#{")"};
+@function fluid-size($min, $max, $start: xs, $end: sm) {
+    $start: math.div(map.get($breakpoints, $start), 100);
+    $end: math.div(map.get($breakpoints, $end), 100);
 
-    @return clamp(
-        #{$min-size},
-        #{$fluid_target_font_size},
-        #{$max-size}
-    );
+    @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max});
 }