add border radius support to theme

apps/theme/app/page.tsx

@@ -40,11 +40,13 @@ export default function Home() {
   const brandOneTheme = useThemeStore((state) => state.brandOneTheme);
   const brandTwoTheme = useThemeStore((state) => state.brandTwoTheme);
   const brandThreeTheme = useThemeStore((state) => state.brandThreeTheme);
+  const borderRadius = useThemeStore((state) => state.borderRadius);
   const setAccentTheme = useThemeStore((state) => state.setAccentTheme);
   const setNeutralTheme = useThemeStore((state) => state.setNeutralTheme);
   const setBrandOneTheme = useThemeStore((state) => state.setBrandOneTheme);
   const setBrandTwoTheme = useThemeStore((state) => state.setBrandTwoTheme);
   const setBrandThreeTheme = useThemeStore((state) => state.setBrandThreeTheme);
+  const setBorderRadius = useThemeStore((state) => state.setBorderRadius);
 
   const selectedColor = useThemeStore((state) => state.selectedColor);
 
@@ -118,6 +120,14 @@ export default function Home() {
     };
   });
 
+  /* Set border radius token when it changes */
+  useEffect(() => {
+    const previewElem = document.getElementById('preview');
+    if (previewElem) {
+      previewElem.style.setProperty('--ds-border-radius-base', borderRadius);
+    }
+  }, [borderRadius]);
+
   /**
    * Check if the header should be sticky
    */
@@ -256,6 +266,10 @@ export default function Home() {
             onContrastModeChanged={(mode) => {
               setContrastMode(mode);
             }}
+            onBorderRadiusChanged={(radius) => {
+              setBorderRadius(radius);
+            }}
+            borderRadius={borderRadius}
           />
           <Scales themeMode={themeMode} />
 

apps/theme/components/ThemeToolbar/ThemeToolbar.module.css

@@ -2,8 +2,9 @@
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  gap: 32px;
+  gap: var(--ds-spacing-4);
   padding: 12px 0;
+  flex-wrap: wrap;
 }
 
 .pickersContainer {

apps/theme/components/ThemeToolbar/ThemeToolbar.tsx

@@ -1,7 +1,6 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import cl from 'clsx/lite';
 import { NativeSelect } from '@digdir/designsystemet-react';
-import type { ChangeEvent } from 'react';
 import type {
   ColorError,
   ColorType,
@@ -20,19 +19,25 @@ type ThemeToolbarProps = {
   brand1Error: ColorError;
   brand2Error: ColorError;
   brand3Error: ColorError;
+  borderRadius: string;
   onColorChanged: (type: ColorType, color: CssColor) => void;
   onContrastModeChanged: (mode: 'aa' | 'aaa') => void;
+  onBorderRadiusChanged: (radius: string) => void;
   contrastMode: ContrastMode;
 };
 
+export const borderRadii = ['0', '0.25rem', '0.5rem', '0.75rem', '1rem'];
+
 export const ThemeToolbar = ({
   accentError,
   neutralError,
   brand1Error,
   brand2Error,
   brand3Error,
+  borderRadius,
   onColorChanged,
   onContrastModeChanged,
+  onBorderRadiusChanged,
   contrastMode,
 }: ThemeToolbarProps) => {
   const accentTheme = useThemeStore((state) => state.accentTheme);
@@ -90,14 +95,32 @@ export const ThemeToolbar = ({
             size='md'
             className={classes.contrastSelect}
             value={contrastMode}
-            onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+            onChange={(e) => {
               onContrastModeChanged(e.target.value as 'aa' | 'aaa');
             }}
           >
             <option value='aa'>AA</option>
             <option value='aaa'>AAA (WIP)</option>
           </NativeSelect>
         </div>
+        <div className={classes.borderRadii}>
+          <NativeSelect
+            label='Border radius'
+            size='md'
+            className={classes.borderRadiiSelect}
+            value={borderRadius}
+            onChange={(e) => onBorderRadiusChanged(e.target.value)}
+          >
+            {borderRadii.map((radius) => (
+              <option
+                key={radius}
+                value={radius}
+              >
+                {radius}
+              </option>
+            ))}
+          </NativeSelect>
+        </div>
         <div className={classes.dropdown}>
           <TokenModal
             accentColor={accentTheme.color}

apps/theme/store.ts

@@ -27,6 +27,8 @@ type ColorStore = {
   setBrandThreeTheme: (theme: ThemeInfo, color: CssColor) => void;
   selectedColor: { color: ColorInfo; type: ColorType };
   setSelectedColor: (color: ColorInfo, type: ColorType) => void;
+  borderRadius: string;
+  setBorderRadius: (radius: string) => void;
 };
 
 const defaultTheme = () => {
@@ -67,6 +69,8 @@ export const useThemeStore = create(
       },
       type: 'accent',
     },
+    borderRadius: '0.25rem',
+    setBorderRadius: (radius) => set({ borderRadius: radius }),
     setSelectedColor: (color, type) =>
       set({ selectedColor: { color: color, type: type } }),
     setAccentTheme: (theme, color) => set({ accentTheme: { theme, color } }),

apps/theme/utils/tokenMapping.ts

@@ -86,6 +86,15 @@ export const mapTokens = () => {
 
   setToken('--ds-color-focus-outer', 'var(--neutral-13)');
   setToken('--ds-color-focus-inner', 'var(--neutral-1)');
+
+  setToken('--ds-border-radius-sm', 'calc(var(--ds-border-radius-base)*0.5)');
+  setToken('--ds-border-radius-md', 'calc(var(--ds-border-radius-base)*1)');
+  setToken('--ds-border-radius-lg', 'calc(var(--ds-border-radius-base)*2)');
+  setToken('--ds-border-radius-xl', 'calc(var(--ds-border-radius-base)*3)');
+  setToken('--ds-border-radius-2xl', 'calc(var(--ds-border-radius-base)*4)');
+  setToken('--ds-border-radius-3xl', 'calc(var(--ds-border-radius-base)*6)');
+  setToken('--ds-border-radius-4xl', 'calc(var(--ds-border-radius-base)*8)');
+  setToken('--ds-border-radius-full', '624.9375rem');
 };
 
 const setToken = (token: string, color: string) => {

packages/css/checkbox.css

@@ -29,7 +29,7 @@
     cursor: pointer;
     box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
     background: var(--dsc-checkbox-background);
-    border-radius: var(--ds-border-radius-md);
+    border-radius: min(0.25rem, var(--ds-border-radius-md));
   }
 
   .ds-checkbox__input::before {