fix: enable no-deprecated-classes tailwind lint rule (#9417)

## Summary

Enable `better-tailwindcss/no-deprecated-classes` lint rule and auto-fix
all 103 violations across 65 files. First PR in a stacked series for
#9300.

## Changes

- **What**: Replace deprecated Tailwind v3 classes with v4 equivalents:
  - `rounded` → `rounded-sm` (85)
  - `flex-shrink-0` → `shrink-0` (16)
  - `flex-grow` → `grow` (2)
- Enable `no-deprecated-classes` as `'error'` in eslint config
- Update one test asserting on `'rounded'` class string

## Review Focus

Mechanical auto-fix PR — all changes produced by `eslint --fix`. No
visual or behavioral changes (Tailwind v4 aliases these classes
identically).

Fixes #9300 (partial — 1 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9417-fix-enable-no-deprecated-classes-tailwind-lint-rule-31a6d73d3650819eaef4cf8ad84fb186)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>

eslint.config.ts

@@ -131,8 +131,7 @@ export default defineConfig([
       // Off: large batch change (v3→v4 renames like rounded→rounded-sm),
       // enable and apply with `eslint --fix` in a follow-up PR
       'better-tailwindcss/enforce-canonical-classes': 'off',
-      // Off: large batch change, enable and apply with `eslint --fix`
+      'better-tailwindcss/no-deprecated-classes': 'error'
-      'better-tailwindcss/no-deprecated-classes': 'off'
     }
   },
   // Disables ESLint rules that conflict with formatters

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -19,7 +19,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200"
+            class="shortcut-item flex items-center justify-between rounded-sm py-2 transition-colors duration-200"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -35,7 +35,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge min-w-6 rounded bg-muted-background px-2 py-1 text-center font-mono text-xs"
+                  class="key-badge min-w-6 rounded-sm bg-muted-background px-2 py-1 text-center font-mono text-xs"
                 >
                   {{ formatKey(key) }}
                 </span>

src/components/common/BadgePill.vue

@@ -2,7 +2,7 @@
   <span
     :class="
       cn(
-        'flex items-center gap-1 rounded border px-1.5 py-0.5 text-xxs',
+        'flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-xxs',
         textColorClass
       )
     "

src/components/common/FormImageUpload.vue

@@ -2,7 +2,7 @@
   <div class="image-upload-wrapper">
     <div class="flex items-center gap-2">
       <div
-        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
+        class="preview-box flex h-16 w-16 items-center justify-center rounded-sm border p-2"
         :class="{ 'bg-base-background': !modelValue }"
       >
         <img

src/components/common/SearchBox.vue

@@ -117,7 +117,7 @@ watchDebounced(
 const wrapperStyle = computed(() => {
   if (showBorder) {
     return cn(
-      'rounded p-2 border border-solid border-border-default box-border',
+      'rounded-sm p-2 border border-solid border-border-default box-border',
       isLarge.value ? 'h-10' : 'h-8'
     )
   }

src/components/common/TreeExplorerV2Node.vue

@@ -27,7 +27,7 @@
       <button
         :class="
           cn(
-            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted-foreground hover:text-foreground',
+            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground hover:text-foreground',
             'opacity-0 group-hover/tree-node:opacity-100'
           )
         "

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -133,7 +133,7 @@
         <!-- Title -->
         <span
           v-if="isLoading"
-          class="inline-block h-8 w-48 animate-pulse rounded bg-dialog-surface"
+          class="inline-block h-8 w-48 animate-pulse rounded-sm bg-dialog-surface"
         ></span>
 
         <!-- Template Cards Grid -->
@@ -164,10 +164,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
+                    class="mb-2 h-6 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
+                    class="h-4 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
@@ -349,10 +349,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
+                    class="mb-2 h-6 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
+                    class="h-4 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>

src/components/dialog/content/MissingNodesContent.vue

@@ -68,7 +68,7 @@
             @keydown.space.prevent="toggleSelectAll"
           >
             <div
-              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
               :class="
                 isAllSelected || isSomeSelected
                   ? 'bg-primary-background'
@@ -113,7 +113,7 @@
             @keydown.space.prevent="toggleNode(node.label)"
           >
             <div
-              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
               :class="
                 replacedTypes.has(node.label) || selectedTypes.has(node.label)
                   ? 'bg-primary-background'

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('subscription.cancelDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         :disabled="isLoading"
         @click="onClose"

src/components/graph/CanvasModeSelector.vue

@@ -40,7 +40,7 @@
       </div>
 
       <div
-        class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
         @click="setMode('hand')"
       >
         <div class="flex items-center gap-2">

src/components/graph/NodeContextMenu.vue

@@ -16,7 +16,7 @@
         <span class="flex-1">{{ item.label }}</span>
         <span
           v-if="item.shortcut"
-          class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xs"
+          class="flex h-3.5 min-w-3.5 items-center justify-center rounded-sm bg-interface-menu-keybind-surface-default px-1 py-0 text-xs"
         >
           {{ item.shortcut }}
         </span>

src/components/graph/modals/ZoomControlsModal.vue

@@ -10,7 +10,7 @@
     >
       <div class="flex flex-col gap-1">
         <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -22,7 +22,7 @@
         </div>
 
         <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -34,7 +34,7 @@
         </div>
 
         <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
           <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
@@ -45,7 +45,7 @@
 
         <div
           ref="zoomInputContainer"
-          class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
+          class="zoomInputContainer flex items-center gap-1 rounded-sm bg-input-surface p-2"
         >
           <InputNumber
             :default-value="canvasStore.appScalePercentage"
@@ -59,7 +59,7 @@
             @input="applyZoom"
             @keyup.enter="applyZoom"
           />
-          <span class="flex-shrink-0 text-sm text-text-primary">%</span>
+          <span class="shrink-0 text-sm text-text-primary">%</span>
         </div>
       </div>
     </div>

src/components/graph/selectionToolbox/ColorPickerMenu.vue

@@ -31,7 +31,7 @@
         :key="subOption.label"
         :class="
           cn(
-            'hover:bg-secondary-background-hover rounded cursor-pointer',
+            'hover:bg-secondary-background-hover rounded-sm cursor-pointer',
             isColorSubmenu
               ? 'w-7 h-7 flex items-center justify-center'
               : 'flex items-center gap-2 px-3 py-1.5 text-sm',
@@ -51,9 +51,9 @@
         <template v-else-if="!subOption.color">
           <i
             v-if="isShapeSelected(subOption)"
-            class="icon-[lucide--check] size-4 flex-shrink-0"
+            class="icon-[lucide--check] size-4 shrink-0"
           />
-          <div v-else class="w-4 flex-shrink-0" />
+          <div v-else class="w-4 shrink-0" />
           <span>{{ subOption.label }}</span>
         </template>
       </div>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -102,7 +102,7 @@
         <article
           v-for="release in releaseStore.recentReleases"
           :key="release.id || release.version"
-          class="release-menu-item flex h-12 min-h-6 cursor-pointer items-center gap-2 self-stretch rounded p-2 transition-colors hover:bg-interface-menu-component-surface-hovered"
+          class="release-menu-item flex h-12 min-h-6 cursor-pointer items-center gap-2 self-stretch rounded-sm p-2 transition-colors hover:bg-interface-menu-component-surface-hovered"
           role="button"
           tabindex="0"
           @click="onReleaseClick(release)"

src/components/input/MultiSelect.vue

@@ -154,7 +154,7 @@
         :style="popoverStyle"
       >
         <div
-          class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
               ? 'bg-primary-background'

src/components/input/SingleSelect.vue

@@ -57,7 +57,7 @@
       option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
         class: cn(
           // Row layout
-          'flex items-center justify-between gap-3 px-2 py-3 rounded',
+          'flex items-center justify-between gap-3 px-2 py-3 rounded-sm',
           'hover:bg-secondary-background-hover',
           // Add focus state for keyboard navigation
           context.focused && 'bg-secondary-background-hover',

src/components/queue/job/JobDetailsPopover.vue

@@ -82,7 +82,7 @@
           </Button>
         </div>
         <div
-          class="col-span-2 mt-2 rounded bg-interface-panel-hover-surface px-4 py-2 text-[0.75rem] leading-normal text-text-secondary"
+          class="col-span-2 mt-2 rounded-sm bg-interface-panel-hover-surface px-4 py-2 text-[0.75rem] leading-normal text-text-secondary"
         >
           {{ errorMessageValue }}
         </div>

src/components/queue/job/QueueAssetPreview.vue

@@ -12,7 +12,7 @@
         />
         <div
           v-if="timeLabel"
-          class="absolute bottom-2 left-2 rounded px-2 py-0.5 text-xs text-text-primary"
+          class="absolute bottom-2 left-2 rounded-sm px-2 py-0.5 text-xs text-text-primary"
           :style="{
             background: 'rgba(217, 217, 217, 0.40)',
             backdropFilter: 'blur(2px)'

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -123,7 +123,7 @@ function handleResetToDefault() {
       <Button
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleRename()
@@ -139,7 +139,7 @@ function handleResetToDefault() {
         v-if="hasParents"
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             if (isShownOnParents) handleHideInput()
@@ -161,7 +161,7 @@ function handleResetToDefault() {
       <Button
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleToggleFavorite()
@@ -183,7 +183,7 @@ function handleResetToDefault() {
         v-if="hasDefault"
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         :disabled="isCurrentValueDefault"
         @click="
           () => {

src/components/rightSidePanel/settings/TabGlobalSettings.vue

@@ -136,7 +136,7 @@ function openFullSettings() {
           >
             <Slider
               :model-value="[gridSpacing]"
-              class="flex-grow text-xs"
+              class="grow text-xs"
               :min="GRID_SIZE_MIN"
               :max="GRID_SIZE_MAX"
               :step="GRID_SIZE_STEP"

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -282,7 +282,7 @@ onMounted(() => {
       >
         <Button
           size="sm"
-          class="rounded border-none px-3 py-0.5"
+          class="rounded-sm border-none px-3 py-0.5"
           @click.stop="showRecommended"
         >
           {{ $t('subgraphStore.showRecommended') }}

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -27,7 +27,7 @@ function getIcon() {
   <div
     :class="
       cn(
-        'flex py-1 px-2 break-all rounded items-center gap-1',
+        'flex py-1 px-2 break-all rounded-sm items-center gap-1',
         'bg-node-component-surface',
         props.isDraggable && 'hover:ring-1 ring-accent-background',
         props.class

src/components/searchbox/v2/NodeSearchCategorySidebar.vue

@@ -121,7 +121,7 @@ const categoryTree = computed<CategoryNode[]>(() => {
 
 function categoryBtnClass(id: string) {
   return cn(
-    'cursor-pointer border-none bg-transparent rounded px-3 py-2.5 text-left text-sm transition-colors',
+    'cursor-pointer border-none bg-transparent rounded-sm px-3 py-2.5 text-left text-sm transition-colors',
     selectedCategory.value === id
       ? CATEGORY_SELECTED_CLASS
       : CATEGORY_UNSELECTED_CLASS

src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue

@@ -6,7 +6,7 @@
     :style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
     :class="
       cn(
-        'w-full cursor-pointer rounded border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
+        'w-full cursor-pointer rounded-sm border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
         selectedCategory === node.key
           ? CATEGORY_SELECTED_CLASS
           : CATEGORY_UNSELECTED_CLASS

src/components/searchbox/v2/NodeSearchListItem.vue

@@ -11,7 +11,7 @@
         <span v-if="showIdName">&nbsp;</span>
         <span
           v-if="showIdName"
-          class="rounded bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+          class="rounded-sm bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
           v-html="highlightQuery(nodeDef.name, currentQuery)"
         />
 
@@ -28,7 +28,7 @@
             nodeDef.nodeSource.type !== NodeSourceType.Core &&
             nodeDef.nodeSource.type !== NodeSourceType.Unknown
           "
-          class="inline-flex shrink-0 rounded border border-border px-1.5 py-0.5 text-xs bg-base-foreground/5 text-base-foreground/70 mr-0.5"
+          class="inline-flex shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-xs bg-base-foreground/5 text-base-foreground/70 mr-0.5"
         >
           {{ nodeDef.nodeSource.displayText }}
         </span>
@@ -46,31 +46,31 @@
     <div v-if="!showDescription" class="flex items-center gap-1">
       <span
         v-if="nodeDef.deprecated"
-        class="rounded bg-red-500/20 px-1.5 py-0.5 text-xs text-red-400"
+        class="rounded-sm bg-red-500/20 px-1.5 py-0.5 text-xs text-red-400"
       >
         {{ $t('g.deprecated') }}
       </span>
       <span
         v-if="nodeDef.experimental"
-        class="rounded bg-blue-500/20 px-1.5 py-0.5 text-xs text-blue-400"
+        class="rounded-sm bg-blue-500/20 px-1.5 py-0.5 text-xs text-blue-400"
       >
         {{ $t('g.experimental') }}
       </span>
       <span
         v-if="nodeDef.dev_only"
-        class="rounded bg-cyan-500/20 px-1.5 py-0.5 text-xs text-cyan-400"
+        class="rounded-sm bg-cyan-500/20 px-1.5 py-0.5 text-xs text-cyan-400"
       >
         {{ $t('g.devOnly') }}
       </span>
       <span
         v-if="showNodeFrequency && nodeFrequency > 0"
-        class="rounded bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+        class="rounded-sm bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
       >
         {{ formatNumberWithSuffix(nodeFrequency, { roundToInt: true }) }}
       </span>
       <span
         v-if="nodeDef.nodeSource.type !== NodeSourceType.Unknown"
-        class="rounded bg-secondary-background px-2 py-0.5 text-sm text-muted-foreground"
+        class="rounded-sm bg-secondary-background px-2 py-0.5 text-sm text-muted-foreground"
       >
         {{ nodeDef.nodeSource.displayText }}
       </span>

src/components/sidebar/ComfyMenuButton.vue

@@ -60,7 +60,7 @@
         />
         <span
           v-if="item?.comfyCommand?.keybinding"
-          class="keybinding-tag ml-auto rounded border border-surface p-1 text-xs text-nowrap text-muted"
+          class="keybinding-tag ml-auto rounded-sm border border-surface p-1 text-xs text-nowrap text-muted"
         >
           {{ item.comfyCommand.keybinding.combo.toString() }}
         </span>

src/components/sidebar/SideToolbar.vue

@@ -154,7 +154,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0',
+    'sidebar-item-group flex flex-col items-center overflow-hidden shrink-0',
     !isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
   )
 )

src/components/toast/ProgressToastItem.vue

@@ -35,7 +35,7 @@ const isPending = computed(() => job.status === 'created')
       }}</span>
     </div>
 
-    <div class="flex flex-shrink-0 items-center gap-2">
+    <div class="flex shrink-0 items-center gap-2">
       <template v-if="isFailed">
         <i
           class="icon-[lucide--circle-alert] size-4 text-destructive-background"

src/components/ui/select/SelectItem.vue

@@ -16,7 +16,7 @@ const { class: className, ...restProps } = defineProps<
     :class="
       cn(
         'relative flex w-full cursor-pointer select-none items-center justify-between',
-        'gap-3 rounded px-2 py-3 text-sm outline-none',
+        'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
         'hover:bg-secondary-background-hover',
         'focus:bg-secondary-background-hover',
         'data-[state=checked]:bg-secondary-background-selected',

src/components/ui/stepper/FormattedNumberStepper.vue

@@ -28,7 +28,7 @@
         type="text"
         inputmode="numeric"
         :style="{ width: `${inputWidth}ch` }"
-        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
+        class="min-w-0 rounded-sm border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
         :disabled="disabled"
         @input="handleInputChange"
         @blur="handleInputBlur"

src/platform/assets/components/AssetBadgeGroup.vue

@@ -7,7 +7,7 @@
       :key="badge.label"
       :class="
         cn(
-          'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
+          'px-2 py-1 rounded-sm text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
         )
       "
     >

src/platform/assets/components/Media3DTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <img
       v-if="!thumbnailError"
       :src="thumbnailSrc"

src/platform/assets/components/MediaAssetCard.vue

@@ -87,13 +87,15 @@
       <div v-if="loading" class="flex justify-between items-start">
         <div class="flex flex-col gap-1">
           <div
-            class="h-4 w-24 animate-pulse rounded bg-modal-card-background"
+            class="h-4 w-24 animate-pulse rounded-sm bg-modal-card-background"
           />
           <div
-            class="h-3 w-20 animate-pulse rounded bg-modal-card-background"
+            class="h-3 w-20 animate-pulse rounded-sm bg-modal-card-background"
           />
         </div>
-        <div class="h-6 w-12 animate-pulse rounded bg-modal-card-background" />
+        <div
+          class="h-6 w-12 animate-pulse rounded-sm bg-modal-card-background"
+        />
       </div>
 
       <!-- Content -->
@@ -113,7 +115,7 @@
         </div>
 
         <!-- Right side: Output count -->
-        <div v-if="showOutputCount" class="flex-shrink-0">
+        <div v-if="showOutputCount" class="shrink-0">
           <Button
             v-tooltip.top.pt:pointer-events-none="
               $t('mediaAsset.actions.seeMoreOutputs')

src/platform/assets/components/MediaAssetFilterMenu.vue

@@ -24,7 +24,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
       @keydown.space.prevent="toggleMediaType(filter.type)"
     >
       <div
-        class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+        class="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
         :class="
           mediaTypeFilters.includes(filter.type)
             ? 'bg-primary-background border-primary-background'

src/platform/assets/components/MediaAudioTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <div
       class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >

src/platform/assets/components/MediaImageTop.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative size-full overflow-hidden rounded bg-modal-card-placeholder-background"
+    class="relative size-full overflow-hidden rounded-sm bg-modal-card-placeholder-background"
     @dblclick="emit('view')"
   >
     <img

src/platform/assets/components/MediaOtherTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <div
       class="flex size-full items-center justify-center bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >

src/platform/assets/components/MediaTextTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <div
       class="flex size-full items-center justify-center bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >

src/platform/assets/components/MediaVideoTop.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative size-full overflow-hidden rounded bg-black"
+    class="relative size-full overflow-hidden rounded-sm bg-black"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
   >

src/platform/assets/components/ModelImportProgressDialog.vue

@@ -176,7 +176,7 @@ function closeDialog() {
       >
         <div class="flex min-w-0 flex-1 items-center gap-2 text-sm">
           <template v-if="isInProgress">
-            <Loader size="sm" class="flex-shrink-0 text-muted-foreground" />
+            <Loader size="sm" class="shrink-0 text-muted-foreground" />
             <span
               class="min-w-0 flex-1 truncate font-bold text-base-foreground"
             >
@@ -185,7 +185,7 @@ function closeDialog() {
           </template>
           <template v-else-if="failedJobs.length > 0">
             <i
-              class="icon-[lucide--circle-alert] size-4 flex-shrink-0 text-destructive-background"
+              class="icon-[lucide--circle-alert] size-4 shrink-0 text-destructive-background"
             />
             <span class="min-w-0 truncate font-bold text-base-foreground">
               {{
@@ -197,7 +197,7 @@ function closeDialog() {
           </template>
           <template v-else>
             <i
-              class="icon-[lucide--check-circle] size-4 flex-shrink-0 text-jade-600"
+              class="icon-[lucide--check-circle] size-4 shrink-0 text-jade-600"
             />
             <span class="min-w-0 truncate font-bold text-base-foreground">
               {{ t('progressToast.allDownloadsCompleted') }}
@@ -205,7 +205,7 @@ function closeDialog() {
           </template>
         </div>
 
-        <div class="flex flex-shrink-0 items-center gap-2">
+        <div class="flex shrink-0 items-center gap-2">
           <span
             v-if="isInProgress"
             class="whitespace-nowrap text-sm text-muted-foreground"

src/platform/assets/components/UploadModelConfirmation.vue

@@ -11,7 +11,7 @@
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="size-14 flex-shrink-0 rounded object-cover"
+          class="size-14 shrink-0 rounded-sm object-cover"
         />
         <p class="m-0 min-w-0 flex-1 truncate text-base-foreground">
           {{ metadata?.filename || metadata?.name }}

src/platform/assets/components/UploadModelDialog.vue

@@ -32,7 +32,7 @@
 
     <!-- Navigation Footer - always visible -->
     <UploadModelFooter
-      class="flex-shrink-0"
+      class="shrink-0"
       :current-step="currentStep"
       :is-fetching-metadata="isFetchingMetadata"
       :is-uploading="isUploading"

src/platform/assets/components/UploadModelProgress.vue

@@ -16,7 +16,7 @@
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="size-14 flex-shrink-0 rounded object-cover"
+          class="size-14 shrink-0 rounded-sm object-cover"
         />
         <div
           class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
@@ -47,7 +47,7 @@
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="size-14 flex-shrink-0 rounded object-cover"
+          class="size-14 shrink-0 rounded-sm object-cover"
         />
         <div
           class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"

src/platform/cloud/onboarding/CloudAuthTimeoutView.vue

@@ -9,7 +9,7 @@
       </p>
 
       <!-- Troubleshooting Section -->
-      <div class="mb-4 rounded bg-secondary-background px-3 py-2 text-left">
+      <div class="mb-4 rounded-sm bg-secondary-background px-3 py-2 text-left">
         <h3 class="mb-2 text-sm font-semibold text-text-primary">
           {{ $t('cloudOnboarding.authTimeout.troubleshooting') }}
         </h3>
@@ -28,7 +28,7 @@
       <!-- Technical Details (Collapsible) -->
       <div v-if="errorMessage" class="mb-4 text-left">
         <button
-          class="flex w-full items-center justify-between rounded bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
+          class="flex w-full items-center justify-between rounded-sm bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
           @click="showTechnicalDetails = !showTechnicalDetails"
         >
           <span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
@@ -41,7 +41,7 @@
         </button>
         <div
           v-if="showTechnicalDetails"
-          class="mt-2 rounded border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
+          class="mt-2 rounded-sm border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
         >
           {{ errorMessage }}
         </div>

src/platform/secrets/components/SecretListItem.vue

@@ -13,7 +13,7 @@
         />
         <span
           v-else-if="secret.provider"
-          class="rounded bg-base-surface px-2 py-0.5 text-xs text-muted"
+          class="rounded-sm bg-base-surface px-2 py-0.5 text-xs text-muted"
         >
           {{ providerLabel }}
         </span>

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue

@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />

src/platform/workspace/components/WorkspaceSwitcherPopover.vue

@@ -6,12 +6,12 @@
         <div
           v-for="i in 2"
           :key="i"
-          class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
+          class="flex h-[54px] animate-pulse items-center gap-2 rounded-sm px-2 py-4"
         >
           <div class="size-8 rounded-full bg-secondary-background" />
           <div class="flex flex-1 flex-col gap-1">
-            <div class="h-4 w-24 rounded bg-secondary-background" />
+            <div class="h-4 w-24 rounded-sm bg-secondary-background" />
-            <div class="h-3 w-16 rounded bg-secondary-background" />
+            <div class="h-3 w-16 rounded-sm bg-secondary-background" />
           </div>
         </div>
       </div>
@@ -23,7 +23,7 @@
             <div
               :class="
                 cn(
-                  'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
+                  'group flex h-[54px] w-full items-center gap-2 rounded-sm px-2 py-4',
                   'hover:bg-secondary-background-hover',
                   isCurrentWorkspace(workspace) && 'bg-secondary-background'
                 )
@@ -72,7 +72,7 @@
         <div
           :class="
             cn(
-              'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
+              'flex h-12 w-full items-center gap-2 rounded-sm px-2 py-2',
               canCreateWorkspace
                 ? 'cursor-pointer hover:bg-secondary-background-hover'
                 : 'cursor-default'

src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.createWorkspaceDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.deleteDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.editWorkspaceDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue

@@ -14,7 +14,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue

@@ -14,7 +14,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onDismiss"
       >

src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.leaveDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.removeMemberDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue

@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.revokeInviteDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >

src/renderer/extensions/linearMode/LinearWelcome.vue

@@ -33,7 +33,7 @@ const { hasOutputs } = storeToRefs(appModeStore)
         <i18n-t keypath="linearMode.welcome.getStarted" tag="span">
           <template #runButton>
             <span
-              class="inline-flex items-center px-3.5 py-0.5 mx-0.5 transform -translate-y-0.5 rounded bg-primary-background text-base-foreground text-xxs font-medium cursor-default"
+              class="inline-flex items-center px-3.5 py-0.5 mx-0.5 transform -translate-y-0.5 rounded-sm bg-primary-background text-base-foreground text-xxs font-medium cursor-default"
             >
               {{ t('menu.run') }}
             </span>

src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue

@@ -76,7 +76,7 @@ const controlMode = defineModel<ControlOptions>()
       >
         <div class="flex items-center gap-2 flex-1 min-w-0 text-wrap">
           <div
-            class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
+            class="flex items-center justify-center w-8 h-8 rounded-lg shrink-0 bg-secondary-background border border-border-subtle"
           >
             <i
               v-if="option.icon"

src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <div class="max-h-[48rem] rounded border p-4">
+    <div class="max-h-[48rem] rounded-sm border p-4">
       <Chart
         :type="chartType"
         :data="chartData"

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue

@@ -4,7 +4,7 @@
       <Slider
         :model-value="[modelValue]"
         v-bind="filteredProps"
-        class="flex-grow text-xs"
+        class="grow text-xs"
         :step="stepValue"
         :aria-label="widget.name"
         @update:model-value="updateLocalValue"

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -20,7 +20,7 @@
           variant="textonly"
           size="unset"
           :aria-label="$t('g.playPause')"
-          class="size-6 rounded"
+          class="size-6 rounded-sm"
           @click="togglePlayPause"
         >
           <i
@@ -61,7 +61,7 @@
           variant="textonly"
           size="unset"
           :aria-label="$t('g.volume')"
-          class="size-6 rounded"
+          class="size-6 rounded-sm"
           @click="toggleMute"
         >
           <i
@@ -94,7 +94,7 @@
           variant="textonly"
           size="unset"
           :aria-label="$t('g.moreOptions')"
-          class="size-6 rounded"
+          class="size-6 rounded-sm"
           @click="toggleOptionsMenu"
         >
           <i class="text-secondary icon-[lucide--more-vertical] size-4" />

src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts

@@ -93,7 +93,7 @@ describe('FormSelectButton Core Component', () => {
       expect(button.classes()).toContain('h-6')
       expect(button.classes()).toContain('px-5')
       expect(button.classes()).toContain('py-[5px]')
-      expect(button.classes()).toContain('rounded')
+      expect(button.classes()).toContain('rounded-sm')
       expect(button.classes()).toContain('text-center')
       expect(button.classes()).toContain('text-xs')
       expect(button.classes()).toContain('font-normal')

src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue

@@ -9,7 +9,7 @@
       :key="getOptionValue(option, index)"
       :class="
         cn(
-          'flex-1 min-w-0 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate',
+          'flex-1 min-w-0 h-6 px-5 py-[5px] rounded-sm flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate',
           'bg-transparent border-none',
           'text-center text-xs font-normal',
           {

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -85,7 +85,7 @@ const theButtonStyle = computed(() =>
         class="icon-[lucide--chevron-down]"
         :class="
           cn(
-            'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
+            'mr-2 size-4 transition-transform duration-200 shrink-0 text-component-node-foreground-secondary',
             isOpen && 'rotate-180'
           )
         "

src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue

@@ -16,7 +16,7 @@
         <em v-else-if="segment.type === 'italic'">{{ segment.text }}</em>
         <code
           v-else-if="segment.type === 'code'"
-          class="rounded px-1 py-0.5 text-xs"
+          class="rounded-sm px-1 py-0.5 text-xs"
           >{{ segment.text }}</code
         >
         <span v-else>{{ segment.text }}</span>

src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue

@@ -7,7 +7,10 @@
     >
       <!-- Import failed conflicts show detailed error message -->
       <template v-if="conflict.type === 'import_failed'">
-        <div v-if="conflict.required_value" class="overflow-x-hidden rounded">
+        <div
+          v-if="conflict.required_value"
+          class="overflow-x-hidden rounded-sm"
+        >
           <p class="m-0 text-xs text-muted-foreground break-all font-mono">
             {{ conflict.required_value }}
           </p>