style(frontend): Round by 6px by default (#19701)

* style(frontend): Round by 6px by default

* Silence `buildResponse` destructuring error

The destructuring fails when a previously imported .scss file can't be found, e.g. after switching branches - but in that case there already is an actually helpful error in the logs, so we don't need this destructuring noise.

* Update UI snapshots for `chromium` (2)

* Maybe fix wrong story

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/build.mjs

@@ -1,13 +1,14 @@
 #!/usr/bin/env node
 import * as path from 'path'
 import { fileURLToPath } from 'url'
+
 import {
+    buildInParallel,
+    copyIndexHtml,
     copyPublicFolder,
+    createHashlessEntrypoints,
     isDev,
     startDevServer,
-    createHashlessEntrypoints,
-    buildInParallel,
-    copyIndexHtml,
 } from './utils.mjs'
 
 export const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -58,6 +59,10 @@ await buildInParallel(
     ],
     {
         async onBuildComplete(config, buildResponse) {
+            if (!buildResponse) {
+                return
+            }
+
             const { chunks, entrypoints } = buildResponse
 
             if (config.name === 'PostHog App') {

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

@@ -44,7 +44,7 @@ type CardProps = {
 }
 
 const Card = ({ children, className }: CardProps): JSX.Element => (
-    <div className={clsx('SidePanelWelcome__card border rounded-md px-4 py-3 w-full overflow-hidden', className)}>
+    <div className={clsx('SidePanelWelcome__card border rounded px-4 py-3 w-full overflow-hidden', className)}>
         {children}
     </div>
 )

frontend/src/lib/components/DebugNotice.tsx

@@ -57,7 +57,7 @@ export function DebugNotice(): JSX.Element | null {
     }
     return (
         <div
-            className="border rounded-md bg-bg-3000 overflow-hidden mb-1.5 w-full font-mono max-w-60"
+            className="border rounded bg-bg-3000 overflow-hidden mb-1.5 w-full font-mono max-w-60"
             // eslint-disable-next-line react/forbid-dom-props
             style={{ fontSize: 13 }} // utility classes don't have a 13px variant
         >

frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories.tsx

@@ -14,7 +14,7 @@ export function EmptyDisplay(): JSX.Element {
     return <HTMLElementsDisplay elements={[] as ElementType[]} />
 }
 
-export const EXAMPLE_ELEMENTS = [
+export const EXAMPLE_ELEMENTS: ElementType[] = [
     {
         text: 'Insights',
         tag_name: 'span',

frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx

@@ -40,7 +40,7 @@ export const ProductIntroduction = ({
     const { updateHasSeenProductIntroFor } = useActions(userLogic)
     const actionable = action || actionElementOverride
     return (
-        <div className="border-2 border-dashed border-border w-full p-8 justify-center rounded-md mt-2 mb-4">
+        <div className="border-2 border-dashed border-border w-full p-8 justify-center rounded mt-2 mb-4">
             {!isEmpty && (
                 <div className="flex justify-end -mb-6 -mt-2 -mr-2">
                     <div>

frontend/src/lib/lemon-ui/LemonCard/LemonCard.tsx

@@ -13,7 +13,7 @@ export function LemonCard({ hoverEffect = true, className, children, onClick, fo
         <div
             className={`LemonCard ${hoverEffect && 'LemonCard--hoverEffect'} border ${
                 focused ? 'border-2 border-primary' : 'border-border'
-            } rounded-lg p-6 bg-bg-light ${className}`}
+            } rounded p-6 bg-bg-light ${className}`}
             onClick={onClick}
         >
             {children}

frontend/src/queries/QueryEditor/QueryEditor.tsx

@@ -51,7 +51,7 @@ export function QueryEditor(props: QueryEditorProps): JSX.Element {
             <div
                 data-attr="query-editor"
                 className={clsx(
-                    'flex flex-col p-2 bg-mid space-y-2 resize-y overflow-auto h-80 rounded-sm',
+                    'flex flex-col p-2 bg-mid space-y-2 resize-y overflow-auto h-80 rounded',
                     props.className
                 )}
             >

frontend/src/scenes/billing/PlanComparison.tsx

@@ -365,7 +365,7 @@ export const PlanComparisonModal = ({
     return (
         <LemonModal isOpen={modalOpen} onClose={onClose}>
             <div className="PlanComparisonModal flex w-full h-full justify-center p-8">
-                <div className="text-left bg-bg-light rounded-md relative w-full">
+                <div className="text-left bg-bg-light rounded relative w-full">
                     <h2>{product.name} plans</h2>
                     <PlanComparison product={product} includeAddons={includeAddons} />
                 </div>

frontend/src/scenes/billing/ProductPricingModal.tsx

@@ -30,7 +30,7 @@ export const ProductPricingModal = ({
     return (
         <LemonModal isOpen={modalOpen} onClose={onClose}>
             <div className="flex items-center w-full h-full justify-center p-8">
-                <div className="text-left bg-bg-light rounded-md relative w-full">
+                <div className="text-left bg-bg-light rounded relative w-full">
                     <h5 className="text-gray mb-1">{capitalizeFirstLetter(product.name)} pricing, starting at</h5>
                     <p className="mb-1">
                         <span className="font-bold text-base">

frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx

@@ -12,7 +12,7 @@ import { dashboardLogic } from './dashboardLogic'
 
 function SkeletonCard({ children, active }: { children: React.ReactNode; active: boolean }): JSX.Element {
     return (
-        <div className="border rounded-md p-10 h-full space-y-4 flex-1 flex flex-col justify-between">
+        <div className="border rounded p-10 h-full space-y-4 flex-1 flex flex-col justify-between">
             <div className="space-y-4">
                 <LemonSkeleton className="w-1/3 h-4" active={active} />
                 <LemonSkeleton className="w-1/2 h-4" active={active} />

frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx

@@ -93,7 +93,7 @@ export function InsightTimeoutState({
                 ) : (
                     <p className="mx-auto text-center mb-6">Crunching through hogloads of data...</p>
                 )}
-                <div className="p-4 rounded-lg bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>

frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx

@@ -141,7 +141,7 @@ export function PresentationTypeCard({
             // eslint-disable-next-line react/forbid-dom-props
             style={{ height: 180, width: 200 }}
             className={clsx(
-                'border rounded-md relative px-4 py-2 overflow-hidden',
+                'border rounded relative px-4 py-2 overflow-hidden',
                 active ? 'border-primary' : 'border-border'
             )}
         >

tailwind.config.js

@@ -39,18 +39,25 @@ const config = {
             ],
             mono: ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'monospace'],
         },
+        screens: {
+            // Sync with vars.scss
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
+            '2xl': '1600px',
+        },
+        borderRadius: {
+            'none': '0',
+            'sm': '0.25rem', // Originally 0.125rem, but we're rounder
+            DEFAULT: '0.375rem', // Originally 0.25rem, but we're rounder - aligned with var(--radius)
+            'lg': '0.5rem',
+            'full': '9999px',
+        },
         extend: {
             fontSize: {
                 xxs: ['0.625rem', '0.75rem'], // 10px (12px of line height)
             },
-            screens: {
-                // Sync with vars.scss
-                sm: '576px',
-                md: '768px',
-                lg: '992px',
-                xl: '1200px',
-                '2xl': '1600px',
-            },
             spacing: {
                 // Some additional larger widths for compatibility with our pre-Tailwind system
                 // Don't add new ones here, in new code just use the `w-[32rem]` style for arbitrary values