fix: checkbox and button border radius (#29476)

## Description
Fix checkbox and button border radius


https://github.com/appsmithorg/appsmith/assets/11555074/8b7cc892-eaa2-4b06-9745-40410cd1d92b



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Updated the default font stack to include 'sans-serif' for better
cross-platform consistency.

- **Style**
  - Adjusted button padding for improved visual alignment and spacing.
- Enhanced checkbox design with responsive border-radius for a more
modern look.

- **Documentation**
- Updated theme settings to reflect the new "Pill" option value for
border-radius, ensuring design consistency across components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx

@@ -9,7 +9,7 @@ const fontFamilyCss = (fontFamily?: FontFamily) => {
   const fontFamilyCss =
     fontFamily && fontFamily !== "System Default"
       ? `${fontFamily}, sans-serif`
-      : "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu'";
+      : "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif";
 
   return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`;
 };

app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css

@@ -11,7 +11,7 @@
   font-family: inherit;
   border-style: solid;
   border-width: var(--border-width-1);
-  padding-inline: var(--inner-spacing-2);
+  padding-inline: var(--inner-spacing-3);
   padding-block: var(--inner-spacing-2);
   min-inline-size: var(--sizing-8);
   border-radius: var(--border-radius-1);

app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css

@@ -10,7 +10,7 @@
     width: var(--sizing-4);
     height: var(--sizing-4);
     box-shadow: var(--checkbox-box-shadow);
-    border-radius: clamp(0px, var(--border-radius-1), 6px);
+    border-radius: clamp(0px, var(--border-radius-1), 25%);
     color: transparent;
     display: inline-flex;
     align-items: center;

app/client/packages/storybook/src/components/ThemeSettings.tsx

@@ -101,7 +101,7 @@ export const ThemeSettings = ({
             >
               <option value="0px">Sharp</option>
               <option value="6px">Rounded</option>
-              <option value="14px">Pill</option>
+              <option value="20px">Pill</option>
             </StyledSelect>
           </Flex>
         )}

app/client/src/pages/Editor/WDSThemePropertyPane/constants.ts

@@ -31,5 +31,5 @@ export const THEME_SETTINGS_SIZING_OPTIONS = [
 export const THEME_SETTINGS_BORDER_RADIUS_OPTIONS = [
   { label: "Sharp", value: "0px" },
   { label: "Rounded", value: "6px" },
-  { label: "Pill", value: "14px" },
+  { label: "Pill", value: "20px" },
 ];