From d029b57720ca23f5df7b3eed64dc0be736a34bff Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Fri, 23 Feb 2024 18:07:05 +0100
Subject: [PATCH] feat: add minimum font size field

---
 .../src/app/frameless-theme.scss              |  1 +
 .../src/components/RootLayout.tsx             | 29 ++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/next-templates/src/app/frameless-theme.scss b/packages/next-templates/src/app/frameless-theme.scss
index 5ecc73df..df852745 100644
--- a/packages/next-templates/src/app/frameless-theme.scss
+++ b/packages/next-templates/src/app/frameless-theme.scss
@@ -25,6 +25,7 @@
   --utrecht-paragraph-lead-font-size: var(--frameless-font-scale-2-font-size);
   --utrecht-paragraph-font-size: var(--frameless-font-scale-1-font-size);
   --utrecht-document-font-size: var(--frameless-font-scale-1-font-size);
+  --utrecht-button-font-size: var(--utrecht-document-font-size);
 }
 .frameless-font-size-scale-figure {
   --utrecht-space-around: 0;
diff --git a/packages/next-templates/src/components/RootLayout.tsx b/packages/next-templates/src/components/RootLayout.tsx
index 34a025a0..2fe694ea 100644
--- a/packages/next-templates/src/components/RootLayout.tsx
+++ b/packages/next-templates/src/components/RootLayout.tsx
@@ -5,6 +5,7 @@ import { VoorbeeldTheme } from './VoorbeeldTheme';
 import {
   Button,
   ButtonGroup,
+  Code,
   Document,
   FormLabel,
   Heading1,
@@ -279,12 +280,12 @@ export default function RootLayout({ children }: PropsWithChildren<{}>) {
     ...resetCssVariables,
     ...designTokensMapToCssVariables(tokens),
   });
-  console.log(
-    'variables',
-    Object.entries(cssVariables)
-      .map(([key, value]) => `${key}: ${value};`)
-      .join('\n'),
-  );
+  // console.log(
+  //   'variables',
+  //   Object.entries(cssVariables)
+  //     .map(([key, value]) => `${key}: ${value};`)
+  //     .join('\n'),
+  // );
   // useEffect(() => {
   //   console.log(42, tokens);
   // }, [cssVariables]);
@@ -441,6 +442,17 @@ export default function RootLayout({ children }: PropsWithChildren<{}>) {
               {...useToken({ token: 'utrecht.heading.font-family' })}
               list="font-family-values"
             ></FormFieldTextbox>
+            <FormFieldTextbox
+              label="Minimum font size"
+              min={10}
+              max={64}
+              step={1}
+              type="range"
+              {...useToken({ token: 'frameless.font.minimum-font-size', transformValue: (px) => `${px}px` })}
+            ></FormFieldTextbox>
+            <div>
+              <Code>{userTokens['frameless.font.minimum-font-size'] || ''}</Code>
+            </div>
             <FormField>
               <FormLabel>Font size scale</FormLabel>
               <Select
@@ -495,6 +507,9 @@ export default function RootLayout({ children }: PropsWithChildren<{}>) {
               {...useToken({ token: 'utrecht.button.border-radius', transformValue: (value) => `${value}px` })}
             ></FormFieldTextbox>
           </div>
+          <div>
+            <Code>{userTokens['utrecht.button.border-radius'] || ''}</Code>
+          </div>
         </details>
         <ButtonGroup>
           <Button
@@ -523,7 +538,7 @@ export default function RootLayout({ children }: PropsWithChildren<{}>) {
         )}
       </ThemeBuilderSidebar>
       <ThemeBuilderCanvas>
-        <VoorbeeldTheme style={cssVariables}>
+        <VoorbeeldTheme style={cssVariables} className="frameless-font-scale">
           <div>
             <Surface>
               <Document>