@agg-build/ui 1.2.11 → 1.3.0

package/README.md

@@ -82,7 +82,40 @@ Override theme tokens with CSS variables on the `.agg-root` container (automatic
   --agg-color-primary: #ed8200;
   --agg-color-foreground: #1a1a1a;
   --agg-radius-md: 8px;
-  --agg-font-family-sans: "Inter", sans-serif;
+  --agg-font-family-sans: "Your Font", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+You can also set `--agg-font-family-sans` on `:root`; a value on `.agg-root` wins because it is
+scoped closer to the AGG UI tree.
+
+With Next.js `next/font`, expose the generated font variable on an ancestor, then map it into the
+AGG token on `.agg-root`:
+
+```tsx
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export default function App() {
+  return (
+    <div className={inter.variable}>
+      <AggProvider>
+        <div className="agg-root">
+          <AggApp />
+        </div>
+      </AggProvider>
+    </div>
+  );
+}
+```
+
+```css
+.agg-root {
+  --agg-font-family-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
 }
 ```
 

package/dist/{chunk-NWJHFGBZ.mjs → chunk-55ODXLOS.mjs}

@@ -3,7 +3,7 @@ import {
   AGG_TERMS_OF_SERVICE_URL,
   Icon,
   cn
-} from "./chunk-SJLHOAKK.mjs";
+} from "./chunk-QUZWA34R.mjs";
 
 // src/geo-block-banner/index.tsx
 import { useLabels } from "@agg-build/hooks";