refactor(ui): finish radius references in shared and runtime styles

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/components/folders/use-row-drag-ghost.ts

@@ -11,7 +11,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
  * the label inherit the app font and match the row it was lifted from.
  */
 const DRAG_GHOST_STYLE =
-  'position:fixed;top:-500px;left:0;display:inline-flex;align-items:center;padding:4px 10px;background:var(--surface-active);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text-body);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-medium);z-index:var(--z-toast)'
+  'position:fixed;top:-500px;left:0;display:inline-flex;align-items:center;padding:4px 10px;background:var(--surface-active);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:13px;color:var(--text-body);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-medium);z-index:var(--z-toast)'
 
 const DRAG_GHOST_LABEL_STYLE = 'max-width:200px;overflow:hidden;text-overflow:ellipsis'
 

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -142,7 +142,7 @@ const LAYOUT_STYLES = {
     rowGap: 'pb-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
     attachmentWidth: 'max-w-[70%]',
-    userBubble: 'max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2',
+    userBubble: 'max-w-[70%] overflow-hidden rounded-2xl bg-[var(--surface-5)] px-3.5 py-2',
     assistantRow: 'group/msg',
     footer: 'shrink-0 px-[24px] pb-[16px]',
     footerInner: 'mx-auto max-w-chat',
@@ -154,7 +154,7 @@ const LAYOUT_STYLES = {
     rowGap: 'pb-4',
     userRow: 'flex flex-col items-end gap-[6px] pt-2',
     attachmentWidth: 'max-w-[85%]',
-    userBubble: 'max-w-[85%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3 py-2',
+    userBubble: 'max-w-[85%] overflow-hidden rounded-2xl bg-[var(--surface-5)] px-3 py-2',
     assistantRow: 'group/msg',
     footer: 'shrink-0 px-3 pb-3',
     footerInner: '',

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -178,7 +178,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
       ghost.textContent = ghostLabel
       ghost.className = 'text-small'
       ghost.style.cssText =
-        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
+        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);white-space:nowrap;color:var(--text-primary)'
       document.body.appendChild(ghost)
       e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
       requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -475,7 +475,7 @@ export function WorkflowGroupMetaCell({
     ghost.textContent = name
     ghost.className = 'text-xs'
     ghost.style.cssText =
-      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
+      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);white-space:nowrap;color:var(--text-primary)'
     document.body.appendChild(ghost)
     e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
     requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx

@@ -952,7 +952,7 @@ export function ConditionInput({
                   ? 'rounded-t-sm border-[var(--border-1)] border-b'
                   : isElseConditionTitle(block.title)
                     ? 'rounded-sm border-0'
-                    : 'rounded-t-[4px] border-[var(--border-1)] border-b'
+                    : 'rounded-t-sm border-[var(--border-1)] border-b'
               )}
             >
               <span className='text-[var(--text-tertiary)] text-sm'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts

@@ -19,7 +19,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
   preview.style.cssText = `
     width: 250px;
     background: var(--surface-1);
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     padding: 8px 9px;
     display: flex;
     align-items: center;
@@ -37,7 +37,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
     : document.createElement('div')
   iconContainer.style.width = '24px'
   iconContainer.style.height = '24px'
-  iconContainer.style.borderRadius = '6px'
+  iconContainer.style.borderRadius = 'var(--radius-md)'
   iconContainer.style.display = 'flex'
   iconContainer.style.alignItems = 'center'
   iconContainer.style.justifyContent = 'center'

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx

@@ -60,9 +60,8 @@ interface SubBlockValueEntry {
 const HANDLE_STYLES = {
   horizontal: 'border-none! bg-[var(--surface-7)]! h-5! w-[7px]! rounded-xs!',
   right:
-    'z-[10]! border-none! bg-[var(--workflow-edge)]! h-5! w-[7px]! rounded-r-[2px]! rounded-l-none!',
-  error:
-    'z-[10]! border-none! bg-[var(--text-error)]! h-[7px]! w-6! rounded-b-[2px]! rounded-t-none!',
+    'z-[10]! border-none! bg-[var(--workflow-edge)]! h-5! w-[7px]! rounded-r-xs! rounded-l-none!',
+  error: 'z-[10]! border-none! bg-[var(--text-error)]! h-[7px]! w-6! rounded-b-xs! rounded-t-none!',
 } as const
 
 /** Reusable style object for error handles positioned at bottom-right */

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts

@@ -51,7 +51,7 @@ export function createSidebarDragGhost(label: string, icon?: SidebarDragGhostIco
     padding: 4px 10px;
     background: var(--surface-active);
     border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
     color: var(--text-body);

packages/workflow-renderer/src/note/note-block-view.tsx

@@ -108,7 +108,7 @@ const NOTE_REMARK_PLUGINS = [remarkGfm, remarkBreaks]
  */
 const NOTE_TASK_CHECKBOX_CLASS = [
   'mt-[3px] inline-grid size-[16px] shrink-0 appearance-none place-content-center',
-  'rounded-[3px] border border-[var(--border-1)] bg-transparent',
+  'rounded-sm border border-[var(--border-1)] bg-transparent',
   'checked:border-[var(--text-primary)] checked:bg-[var(--text-primary)]',
   "checked:after:size-[10px] checked:after:bg-[var(--surface-2)] checked:after:content-['']",
   'checked:after:[clip-path:polygon(14%_44%,0_65%,50%_100%,100%_16%,80%_0%,43%_62%)]',