refactor: rename text-xxxs/text-xxs to text-3xs/text-2xs

tailwind-merge incorrectly classifies text-xxxs as a color class,
causing it to clobber actual text color utilities like text-white.
Renaming to text-3xs/text-2xs follows Tailwind sizing conventions
and is correctly detected by tailwind-merge as font-size.

packages/design-system/src/css/style.css

@@ -25,11 +25,11 @@
 @theme {
   --shadow-interface: var(--interface-panel-box-shadow);
 
-  --text-xxs: 0.625rem;
-  --text-xxs--line-height: calc(1 / 0.625);
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: calc(1 / 0.625);
 
-  --text-xxxs: 0.5625rem;
-  --text-xxxs--line-height: calc(1 / 0.5625);
+  --text-3xs: 0.5625rem;
+  --text-3xs--line-height: calc(1 / 0.5625);
 
   /* Font Families */
   --font-inter: 'Inter', sans-serif;

src/components/common/BadgePill.vue

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

src/components/common/DropdownItem.vue

@@ -59,7 +59,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
     <div
       v-else-if="item.new"
-      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-2xs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/WorkflowActionsList.vue

@@ -44,7 +44,7 @@ const {
       <span class="flex-1">{{ item.label }}</span>
       <span
         v-if="item.badge"
-        class="ml-3 flex items-center gap-1 rounded-full bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
+        class="ml-3 flex items-center gap-1 rounded-full bg-(--primary-background) px-1.5 py-0.5 text-2xs text-base-foreground uppercase"
       >
         {{ item.badge }}
       </span>

src/components/common/statusBadge.variants.ts

@@ -12,9 +12,9 @@ export const statusBadgeVariants = cva({
       contrast: 'bg-base-foreground text-base-background'
     },
     variant: {
-      label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
+      label: 'h-3.5 px-1 text-3xs font-semibold uppercase',
       dot: 'size-2',
-      circle: 'size-3.5 text-xxxs font-semibold'
+      circle: 'size-3.5 text-3xs font-semibold'
     }
   },
   defaultVariants: {

src/components/node/NodePreviewCard.vue

@@ -49,14 +49,14 @@
         class="flex flex-col gap-1"
       >
         <h4
-          class="m-0 text-xxs font-semibold tracking-wide text-muted-foreground uppercase"
+          class="m-0 text-2xs font-semibold tracking-wide text-muted-foreground uppercase"
         >
           {{ $t('nodeHelpPage.inputs') }}
         </h4>
         <div
           v-for="input in inputs"
           :key="input.name"
-          class="flex items-center justify-between gap-2 text-xxs"
+          class="flex items-center justify-between gap-2 text-2xs"
         >
           <span class="text-foreground shrink-0">{{ input.name }}</span>
           <span class="min-w-0 truncate text-muted-foreground">{{
@@ -71,14 +71,14 @@
         class="flex flex-col gap-1"
       >
         <h4
-          class="m-0 text-xxs font-semibold tracking-wide text-muted-foreground uppercase"
+          class="m-0 text-2xs font-semibold tracking-wide text-muted-foreground uppercase"
         >
           {{ $t('nodeHelpPage.outputs') }}
         </h4>
         <div
           v-for="output in outputs"
           :key="output.name"
-          class="flex items-center justify-between gap-2 text-xxs"
+          class="flex items-center justify-between gap-2 text-2xs"
         >
           <span class="text-foreground shrink-0">{{ output.name }}</span>
           <span class="min-w-0 truncate text-muted-foreground">{{

src/components/sidebar/tabs/AppsSidebarTab.vue

@@ -8,7 +8,7 @@
   >
     <template #alt-title>
       <span
-        class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
+        class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-2xs text-base-foreground uppercase"
       >
         {{ $t('g.beta') }}
       </span>

src/components/topbar/TopbarBadge.vue

@@ -13,7 +13,7 @@
     />
     <div
       v-else-if="badge.label"
-      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-3xs font-semibold"
       :class="labelClasses"
     >
       {{ badge.label }}
@@ -32,7 +32,7 @@
       <div class="flex max-w-xs min-w-40 flex-col gap-2 p-3">
         <div
           v-if="badge.label"
-          class="w-fit rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+          class="w-fit rounded-full px-1.5 py-0.5 text-3xs font-semibold"
           :class="labelClasses"
         >
           {{ badge.label }}
@@ -66,7 +66,7 @@
       />
       <div
         v-if="badge.label"
-        class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+        class="shrink-0 rounded-full px-1.5 py-0.5 text-3xs font-semibold"
         :class="labelClasses"
       >
         {{ badge.label }}
@@ -85,7 +85,7 @@
       <div class="flex max-w-xs min-w-40 flex-col gap-2 p-3">
         <div
           v-if="badge.label"
-          class="w-fit rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+          class="w-fit rounded-full px-1.5 py-0.5 text-3xs font-semibold"
           :class="labelClasses"
         >
           {{ badge.label }}
@@ -112,7 +112,7 @@
     />
     <div
       v-if="badge.label"
-      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-3xs font-semibold"
       :class="labelClasses"
     >
       {{ badge.label }}

src/components/ui/textarea/Textarea.stories.ts

@@ -41,7 +41,7 @@ export const WithLabel: Story = {
     },
     template: `
       <div class="relative max-w-sm rounded-lg bg-component-node-widget-background">
-        <label class="pointer-events-none absolute left-3 top-1.5 text-xxs text-muted-foreground z-10">
+        <label class="pointer-events-none absolute left-3 top-1.5 text-2xs text-muted-foreground z-10">
           Prompt
         </label>
         <Textarea

src/core/graph/subgraph/promotedWidgetView.ts

@@ -560,7 +560,7 @@ function drawDisconnectedPlaceholder(
     '#333'
   )
   const textColor = readDesignToken('--color-text-secondary', '#999')
-  const fontSize = readDesignToken('--text-xxs', '11px')
+  const fontSize = readDesignToken('--text-2xs', '11px')
   const fontFamily = readDesignToken('--font-inter', 'sans-serif')
 
   ctx.save()

src/platform/assets/components/UploadModelDialogHeader.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center gap-2 p-4 font-bold">
     <span>{{ $t('assetBrowser.uploadModelGeneric') }}</span>
     <span
-      class="rounded-full bg-white px-1.5 py-0 font-inter text-xxs font-semibold text-black uppercase"
+      class="rounded-full bg-white px-1.5 py-0 font-inter text-2xs font-semibold text-black uppercase"
     >
       {{ $t('g.beta') }}
     </span>

src/renderer/extensions/linearMode/LinearWelcome.vue

@@ -41,7 +41,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
         <i18n-t keypath="linearMode.welcome.getStarted" tag="span">
           <template #runButton>
             <span
-              class="mx-0.5 inline-flex -translate-y-0.5 transform cursor-default items-center rounded-sm bg-primary-background px-3.5 py-0.5 text-xxs font-medium text-base-foreground"
+              class="mx-0.5 inline-flex -translate-y-0.5 transform cursor-default items-center rounded-sm bg-primary-background px-3.5 py-0.5 text-2xs font-medium text-base-foreground"
             >
               {{ t('menu.run') }}
             </span>
@@ -86,7 +86,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
           <i class="icon-[lucide--hammer]" />
           {{ t('linearMode.welcome.buildApp') }}
           <div
-            class="absolute -top-2 -right-2 rounded-full bg-base-foreground px-1 text-xxs text-base-background"
+            class="absolute -top-2 -right-2 rounded-full bg-base-foreground px-1 text-2xs text-base-background"
           >
             {{ t('g.experimental') }}
           </div>

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

@@ -10,7 +10,7 @@
     <label
       v-if="!hideLayoutField"
       :for="id"
-      class="pointer-events-none absolute top-1.5 left-3 z-10 text-xxs text-muted-foreground"
+      class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
     >
       {{ displayName }}
     </label>

src/workbench/extensions/manager/components/manager/PackVersionBadge.vue

@@ -22,7 +22,7 @@
         class="pi pi-arrow-circle-up text-xs text-blue-600"
       />
       <span>{{ installedVersion }}</span>
-      <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
+      <i v-if="!isDisabled" class="pi pi-chevron-right text-2xs" />
     </div>
 
     <Popover