expose border radius to lab

apps/laboratory/src/components/Theming/BorderRadiusInput.tsx

@@ -0,0 +1,48 @@
+import {
+  Heading,
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderThumb,
+  SliderTrack
+} from '@chakra-ui/react'
+
+import { ThemeStore } from '../../utils/StoreUtil'
+import { useProxy } from 'valtio/utils'
+
+export default function BorderRadiusInput() {
+  const state = useProxy(ThemeStore.state)
+
+  return (
+    <>
+      <Heading size="sm" fontWeight="400" as="h2">
+        Border Radius
+      </Heading>
+      <Slider
+        min={0}
+        max={10}
+        value={parseInt(state.borderRadius.replace('px', ''), 10)}
+        onChange={val => {
+          ThemeStore.setBorderRadius(`${val}px`)
+        }}
+      >
+        <SliderMark
+          value={parseInt(state.borderRadius.replace('px', ''), 10)}
+          textAlign="center"
+          bg="blackAlpha.700"
+          color="white"
+          mt="3"
+          ml="-5"
+          borderRadius="base"
+          w="12"
+        >
+          {state.borderRadius}
+        </SliderMark>
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <SliderThumb />
+      </Slider>
+    </>
+  )
+}

apps/laboratory/src/layout/Header.tsx

@@ -18,6 +18,7 @@ import {
 } from '@chakra-ui/react'
 import MixColorInput from '../components/Theming/MixColorInput'
 import AccentColorInput from '../components/Theming/AccentColorInput'
+import BorderRadiusInput from '../components/Theming/BorderRadiusInput'
 
 export default function Header() {
   const { colorMode, toggleColorMode } = useColorMode()
@@ -38,6 +39,9 @@ export default function Header() {
               <Flex gridGap="4" flexDirection="column">
                 <AccentColorInput />
               </Flex>
+              <Flex gridGap="4" flexDirection="column">
+                <BorderRadiusInput />
+              </Flex>
             </Flex>
           </DrawerBody>
         </DrawerContent>

apps/laboratory/src/utils/StoreUtil.ts

@@ -14,13 +14,15 @@ interface ThemeStoreState {
   mixColorStrength: number
   mixColor?: string
   accentColor?: string
+  borderRadius: string
   themeVariables: ThemeVariables
 }
 
 const state = proxy<ThemeStoreState>({
   mixColorStrength: 0,
   mixColor: undefined,
   accentColor: undefined,
+  borderRadius: '4px',
   themeVariables: {}
 })
 
@@ -42,6 +44,11 @@ export const ThemeStore = {
     modal.setThemeVariables({ '--w3m-accent': value })
   },
 
+  setBorderRadius(value: ThemeStoreState['borderRadius']) {
+    state.borderRadius = value
+    modal.setThemeVariables({ '--w3m-border-radius-master': value })
+  },
+
   setThemeVariables(value: ThemeStoreState['themeVariables']) {
     state.themeVariables = value
     modal.setThemeVariables(value)