Initial commit

src/lib/utils.js

@@ -0,0 +1,34 @@
+import { clsx } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
+
+/**
+ * The design system adds named type-scale utilities (`text-title`, `text-body-sm`,
+ * `text-caption`…). tailwind-merge does not know them, so by default it files
+ * them under the text-colour group and treats `text-title-lg text-ink-1` as a
+ * conflict — silently dropping one of the two.
+ *
+ * Registering the scale as font sizes makes size and colour independent again,
+ * which is what lets components set both without ordering mattering.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        {
+          text: [
+            'display-lg', 'display',
+            'title-lg', 'title',
+            'body-lg', 'body', 'body-sm',
+            'caption', 'overline',
+          ],
+        },
+      ],
+    },
+  },
+})
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+export const isIframe = window.self !== window.top;