Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-07 22:20:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
## 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>
This commit is contained in:
Christian Byrne
2026-03-04 23:41:23 -08:00
committed by GitHub
parent 7cd11f0da5
commit 493b1e42aa
66 changed files with 107 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
eslint.config.ts
View File

@@ -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': 'off'
'better-tailwindcss/no-deprecated-classes': 'error'
}
},
// Disables ESLint rules that conflict with formatters

4
src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
View File

@@ -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>

2
src/components/common/BadgePill.vue
View File

@@ -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
)
"

2
src/components/common/FormImageUpload.vue
View File

@@ -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

2
src/components/common/SearchBox.vue
View File

@@ -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'
)
}

2
src/components/common/TreeExplorerV2Node.vue
View File

@@ -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'
)
"

10
src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
View File

@@ -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>

4
src/components/dialog/content/MissingNodesContent.vue
View File

@@ -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'

2
src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
View File

@@ -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" />

2
src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
View File

@@ -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"

2
src/components/graph/CanvasModeSelector.vue
View File

@@ -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">

2
src/components/graph/NodeContextMenu.vue
View File

@@ -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>

10
src/components/graph/modals/ZoomControlsModal.vue
View File

@@ -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>

6
src/components/graph/selectionToolbox/ColorPickerMenu.vue
View File

@@ -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>

2
src/components/helpcenter/HelpCenterMenuContent.vue
View File

@@ -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)"

2
src/components/input/MultiSelect.vue
View File

@@ -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'

2
src/components/input/SingleSelect.vue
View File

@@ -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',

2
src/components/queue/job/JobDetailsPopover.vue
View File

@@ -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>

2
src/components/queue/job/QueueAssetPreview.vue
View File

@@ -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)'

8
src/components/rightSidePanel/parameters/WidgetActions.vue
View File

@@ -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="
() => {

2
src/components/rightSidePanel/settings/TabGlobalSettings.vue
View File

@@ -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"

2
src/components/rightSidePanel/subgraph/SubgraphEditor.vue
View File

@@ -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') }}

2
src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
View File

@@ -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

2
src/components/searchbox/v2/NodeSearchCategorySidebar.vue
View File

@@ -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

2
src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue
View File

@@ -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

14
src/components/searchbox/v2/NodeSearchListItem.vue
View File

@@ -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>

2
src/components/sidebar/ComfyMenuButton.vue
View File

@@ -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>

2
src/components/sidebar/SideToolbar.vue
View File

@@ -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'
)
)

2
src/components/toast/ProgressToastItem.vue
View File

@@ -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"

2
src/components/ui/select/SelectItem.vue
View File

@@ -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',

2
src/components/ui/stepper/FormattedNumberStepper.vue
View File

@@ -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"

2
src/platform/assets/components/AssetBadgeGroup.vue
View File

@@ -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'
)
"
>

2
src/platform/assets/components/Media3DTop.vue
View File

@@ -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"

10
src/platform/assets/components/MediaAssetCard.vue
View File

@@ -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')

2
src/platform/assets/components/MediaAssetFilterMenu.vue
View File

@@ -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'

2
src/platform/assets/components/MediaAudioTop.vue
View File

@@ -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"
>

2
src/platform/assets/components/MediaImageTop.vue
View File

@@ -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

2
src/platform/assets/components/MediaOtherTop.vue
View File

@@ -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"
>

2
src/platform/assets/components/MediaTextTop.vue
View File

@@ -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"
>

2
src/platform/assets/components/MediaVideoTop.vue
View File

@@ -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"
>

8
src/platform/assets/components/ModelImportProgressDialog.vue
View File

@@ -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"

2
src/platform/assets/components/UploadModelConfirmation.vue
View File

@@ -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 }}

2
src/platform/assets/components/UploadModelDialog.vue
View File

@@ -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"

4
src/platform/assets/components/UploadModelProgress.vue
View File

@@ -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"

6
src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
View File

@@ -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>

2
src/platform/secrets/components/SecretListItem.vue
View File

@@ -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>

2
src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
View File

@@ -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" />

10
src/platform/workspace/components/WorkspaceSwitcherPopover.vue
View File

@@ -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-3 w-16 rounded bg-secondary-background" />
<div class="h-4 w-24 rounded-sm 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'

2
src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
View File

@@ -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"
>

2
src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
View File

@@ -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"
>

2
src/renderer/extensions/linearMode/LinearWelcome.vue
View File

@@ -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>

2
src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
View File

@@ -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"

2
src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
View File

@@ -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"

2
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
View File

@@ -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"

6
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
View File

@@ -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" />

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

@@ -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')

2
src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
View File

@@ -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',
{

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

@@ -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'
)
"

2
src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
View File

@@ -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>

5
src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
View File

@@ -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>