From 8dd199deec925666939b37eb04b4260c994aaf54 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 8 Jun 2021 18:39:08 -0700
Subject: [PATCH] Add docs for CSS functions in style props

---
 packages/dev/docs/pages/react-spectrum/styling.mdx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/dev/docs/pages/react-spectrum/styling.mdx b/packages/dev/docs/pages/react-spectrum/styling.mdx
index f52f6559401..d80bb0c507f 100644
--- a/packages/dev/docs/pages/react-spectrum/styling.mdx
+++ b/packages/dev/docs/pages/react-spectrum/styling.mdx
@@ -108,6 +108,15 @@ ReactDOM.render(<DimensionViewer />, document.getElementById('dimension-viewer')
 
 <div id="dimension-viewer" />
 
+### CSS functions
+
+Dimension variables may also be used as part of CSS functions like `calc()`, `min()`, and `max()`. This can be done by simply referring to the variable within the CSS expression.
+For example, you could make an element take up 100% of the width of it's container minus a certain dimension value.
+
+```tsx example
+<View width="calc(100% - size-2000)" height="single-line-height" backgroundColor="green-500" />
+```
+
 ## Responsive styles
 
 In addition to static values, all style props support object syntax to specify different values for the prop depending on the