feat: add minimum font size field

frameless · Feb 23, 2024 · d029b57 · d029b57
1 parent 12e745e
commit d029b57
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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>