From 6dcafa91f4bca70038f6da23c1914077099d0fdc Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 8 Dec 2023 12:14:20 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20responsive=20helper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This helper provides handy functions to make components responsive.
---
 packages/react/src/utils/_responsive.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 packages/react/src/utils/_responsive.scss

diff --git a/packages/react/src/utils/_responsive.scss b/packages/react/src/utils/_responsive.scss
new file mode 100644
index 0000000..c11e569
--- /dev/null
+++ b/packages/react/src/utils/_responsive.scss
@@ -0,0 +1,13 @@
+@use "sass:map";
+@use "../cunningham-tokens" as *;
+
+@function breakpoint($name, $tokens: $themes) {
+  @return map.get($tokens, 'default', 'theme', 'breakpoints', $name);
+}
+
+@mixin container($name, $tokens: $themes) {
+  $breakpoint: breakpoint($name, $tokens);
+  @container (max-width: #{$breakpoint}) {
+    @content;
+  }
+}