From 549c4f235a4951b60d2ce2e8eea27d8f8074b453 Mon Sep 17 00:00:00 2001
From: Christian Schira <c.schira@21torr.com>
Date: Tue, 8 Apr 2025 16:15:55 +0200
Subject: [PATCH 1/2] add docs about the new atlantis function `fluid-prop()`

---
 docs/ts-scss/atlantis/index.mdx   |  1 +
 docs/ts-scss/atlantis/library.mdx | 34 +++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/docs/ts-scss/atlantis/index.mdx b/docs/ts-scss/atlantis/index.mdx
index 06e0e5b..3032e1f 100644
--- a/docs/ts-scss/atlantis/index.mdx
+++ b/docs/ts-scss/atlantis/index.mdx
@@ -71,4 +71,5 @@ All available mixins:
 
 All available functions:
 
+- [`fluid-prop()`](library#functions/fluid/fluid-prop)
 - [`inline-svg()`](library#functions/svg/inline-svg)
diff --git a/docs/ts-scss/atlantis/library.mdx b/docs/ts-scss/atlantis/library.mdx
index 040eaa2..343eced 100644
--- a/docs/ts-scss/atlantis/library.mdx
+++ b/docs/ts-scss/atlantis/library.mdx
@@ -313,6 +313,40 @@ Prevents wrapping of text by displaying ellipsis instead.
 
 
 ## Functions
+### Fluid
+#### `.fluid-prop()` {#functions/fluid/fluid-prop}
+
+```scss
+@include atlantis.fluid-prop($min-vw, $max-vw, $min-value, $max-value);
+```
+
+Returns a clamp function with calculated values, depending on the given params.
+
+* `$min-vw` -> viewport at which the value starts to be fluid
+* `$max-vw` -> viewport at which the value ends to be fluid
+* `$min-value` -> value at the beginning
+* `$max-value` -> value at the end
+
+Usage:
+
+```scss
+.element {
+	font-size: atlantis.fluid-prop(30rem, 140rem, 2rem, 4rem);
+}
+```
+
+We recommend for multiple uses, such as font-sizes that all have the same `$min-vw` and `$max-vw` value, to build a helper function that is then used for better readability when using the function. For example:
+
+```scss
+@function font-fluid-prop ($min-value, $max-value) {
+	@return atlantis.fluid-prop(30rem, 140rem, $min-value, $max-value);
+}
+
+.element {
+	font-size: font-fluid-prop(2rem, 4rem);
+}
+```
+
 ### SVG
 #### `.inline-svg()` {#functions/svg/inline-svg}
 

From 1a7e07efa13188625d3cc731fa7190f05ff876a8 Mon Sep 17 00:00:00 2001
From: Christian Schira <c.schira@21torr.com>
Date: Wed, 9 Apr 2025 16:31:00 +0200
Subject: [PATCH 2/2] update atlantis/`fluid-prop` example for better context

---
 docs/ts-scss/atlantis/library.mdx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/ts-scss/atlantis/library.mdx b/docs/ts-scss/atlantis/library.mdx
index 343eced..692abd7 100644
--- a/docs/ts-scss/atlantis/library.mdx
+++ b/docs/ts-scss/atlantis/library.mdx
@@ -317,7 +317,7 @@ Prevents wrapping of text by displaying ellipsis instead.
 #### `.fluid-prop()` {#functions/fluid/fluid-prop}
 
 ```scss
-@include atlantis.fluid-prop($min-vw, $max-vw, $min-value, $max-value);
+atlantis.fluid-prop($min-vw, $max-vw, $min-value, $max-value);
 ```
 
 Returns a clamp function with calculated values, depending on the given params.
@@ -337,13 +337,19 @@ Usage:
 
 We recommend for multiple uses, such as font-sizes that all have the same `$min-vw` and `$max-vw` value, to build a helper function that is then used for better readability when using the function. For example:
 
-```scss
+```scss title="_mixins.scss"
+@use "~@21torr/atlantis/mixins" as atlantis;
+
 @function font-fluid-prop ($min-value, $max-value) {
 	@return atlantis.fluid-prop(30rem, 140rem, $min-value, $max-value);
 }
+```
+
+```scss title="element.scss"
+@use "mixins";
 
 .element {
-	font-size: font-fluid-prop(2rem, 4rem);
+	font-size: mixins.font-fluid-prop(2rem, 4rem);
 }
 ```
 
@@ -351,7 +357,7 @@ We recommend for multiple uses, such as font-sizes that all have the same `$min-
 #### `.inline-svg()` {#functions/svg/inline-svg}
 
 ```scss
-@include atlantis.inline-svg($svg);
+atlantis.inline-svg($svg);
 ```
 
 Inlines the SVG on the element. Will return a `url()` element so it can be used directly as an image.