Use `rounded` instead of `rounded-sm`

In component styles where the intent is to match the default border
radius sizing, use unqualified `rounded` instead of `rounded-sm`. The
default border radius happens to be 2px, which is equivalent to the
default `rounded-sm` value out of the box with Tailwind, but the intent
is instead "use the default border radius size".

Add a border-radius default to tailwind config.

src/sidebar/components/MarkdownEditor.tsx

@@ -186,7 +186,7 @@ function TextArea({
   return (
     <textarea
       className={classnames(
-        'border rounded-sm p-2',
+        'border rounded p-2',
         'text-color-text-light bg-grey-0',
         'focus:bg-white focus:outline-none focus:shadow-focus-inner',
         classes

src/sidebar/components/Menu.tsx

@@ -194,7 +194,7 @@ export default function Menu({
         aria-haspopup={true}
         className={classnames(
           'focus-visible-ring',
-          'flex items-center justify-center rounded-sm transition-colors',
+          'flex items-center justify-center rounded transition-colors',
           {
             'text-grey-7 hover:text-grey-9': !isOpen,
             'text-brand': isOpen,

src/sidebar/components/TagListItem.tsx

@@ -22,7 +22,7 @@ export default function TagListItem({
   tag,
 }: TagListItemProps) {
   return (
-    <li className="flex items-center border rounded-sm bg-grey-0">
+    <li className="flex items-center border rounded bg-grey-0">
       <div className="grow px-1.5 py-1 touch:p-2">
         {href ? (
           <Link
@@ -54,7 +54,7 @@ export default function TagListItem({
             // Rounded border to match container edges and make keyboard focus
             // ring shape conform. Turn off left side
             // border radius to maintain a straight dividing line
-            'border-l rounded-sm rounded-l-none',
+            'border-l rounded rounded-l-none',
             'text-grey-6 hover:text-color-text hover:bg-grey-2',
             // Emulates transitions on *Button shared component styling
             'transition-colors duration-200',

src/styles/sidebar/_base.scss

@@ -17,7 +17,7 @@
     // Ensure the tag has width in order for :focus styling to render correctly.
     @apply inline-block;
     // Give links a radius to allow :focus styling to appear similar to that of buttons
-    @apply rounded-sm;
+    @apply rounded;
     @apply text-brand no-underline;
   }
 

src/styles/sidebar/components/StyledText.scss

@@ -89,7 +89,7 @@
     }
 
     pre code {
-      @apply block p-3 bg-grey-1 rounded-sm overflow-scroll;
+      @apply block p-3 bg-grey-1 rounded overflow-scroll;
     }
 
     a {

tailwind.config.mjs

@@ -26,12 +26,8 @@ export default {
         'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',
       },
       borderRadius: {
-        // Tailwind provides a default set of border-radius utility styles
-        // in rem units. Add some values for places where border radius needs
-        // to be a fixed size and not scale with changes to root font size
-        // example: bucket bar indicator buttons
-        'px-sm': '2px',
-        px: '4px',
+        // Equivalent to tailwind default `rounded-sm` size
+        DEFAULT: '0.125rem',
       },
       boxShadow: {
         'adder-toolbar': '0px 2px 10px 0px rgba(0, 0, 0, 0.25)',
@@ -232,8 +228,8 @@ export default {
         },
         // Tailwind does not provide this specific break utility: https://tailwindcss.com/docs/word-break
         '.break-anywhere': {
-          'overflow-wrap': 'anywhere'
-        }
+          'overflow-wrap': 'anywhere',
+        },
       });
       addComponents({
         // Add a custom class to set all properties to initial values. Used