refactor(ui): success tone + Heading props, and migrate the colour/heading sites

src/components/shared/ComponentEditor/components/ComponentSpecErrorsList.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
+import { Heading } from "@/components/ui/typography";
 
 export const ComponentSpecErrorsList = ({
   validationErrors,
@@ -15,9 +15,9 @@ export const ComponentSpecErrorsList = ({
     <BlockStack className="p-4 px-8 bg-destructive/10 border border-t-4 border-destructive/30 text-destructive">
       <InlineStack gap="2">
         <Icon name="OctagonAlert" size="lg" className="text-destructive" />
-        <Text tone="critical" as="h2" size="lg">
+        <Heading level={2} tone="critical" size="lg">
           Invalid component spec
-        </Text>
+        </Heading>
       </InlineStack>
       <ul className="list-disc list-inside space-y-1 p-4">
         {validationErrors.map((error, idx) => (

src/components/shared/ImportPipeline.tsx

@@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import { Heading, Paragraph } from "@/components/ui/typography";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
 import { getDefaultEditorPath } from "@/routes/editorRoutes";
 import {
@@ -226,23 +227,37 @@ const ImportPipeline = ({
 
           {successMessage && (
             <div className="border border-green-200 bg-green-50 p-3 rounded-md mt-4 dark:border-green-500/30 dark:bg-green-500/10">
-              <h4 className="text-green-600 font-medium mb-1 dark:text-green-300">
+              <Heading
+                level={4}
+                tone="success"
+                size="md"
+                className="font-medium mb-1"
+              >
                 Import Successful
-              </h4>
-              <p className="text-green-500 text-sm dark:text-green-400">
+              </Heading>
+              <Paragraph tone="success" size="sm">
                 {successMessage}
-              </p>
+              </Paragraph>
             </div>
           )}
 
           {error && (
             <div className="border border-red-200 bg-red-50 p-3 rounded-md mt-4 dark:border-red-500/30 dark:bg-red-500/10">
-              <h4 className="text-red-600 font-medium mb-1 dark:text-red-300">
+              <Heading
+                level={4}
+                tone="critical"
+                size="md"
+                className="font-medium mb-1"
+              >
                 Import Failed
-              </h4>
-              <p className="text-red-500 text-sm whitespace-pre-wrap dark:text-red-400">
+              </Heading>
+              <Paragraph
+                tone="critical"
+                size="sm"
+                className="whitespace-pre-wrap"
+              >
                 {error}
-              </p>
+              </Paragraph>
             </div>
           )}
 

src/components/shared/ReactFlow/FlowSidebar/components/ImportComponent.tsx

@@ -27,6 +27,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/spinner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Paragraph } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
@@ -225,12 +226,16 @@ const ImportComponent = ({
                         {!selectedFileName && (
                           <div className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors">
                             <Upload className="h-8 w-8 text-gray-400 mb-2" />
-                            <p className="text-sm text-gray-600 dark:text-muted-foreground">
+                            <Paragraph tone="subdued" size="sm">
                               Drop your YAML file here or click to browse
-                            </p>
-                            <p className="text-xs text-gray-500 mt-1">
+                            </Paragraph>
+                            <Paragraph
+                              tone="subdued"
+                              size="xs"
+                              className="mt-1"
+                            >
                               Supports .yaml files
-                            </p>
+                            </Paragraph>
                           </div>
                         )}
                         {selectedFileName && (
@@ -262,9 +267,9 @@ const ImportComponent = ({
                         </Button>
                       )}
                     </div>
-                    <p className="text-sm text-gray-500">
+                    <Paragraph tone="subdued" size="sm">
                       Select a YAML file containing a pipeline component
-                    </p>
+                    </Paragraph>
                   </div>
                 </div>
               </TabsContent>
@@ -280,9 +285,9 @@ const ImportComponent = ({
                       onChange={handleUrlChange}
                       disabled={isPending}
                     />
-                    <p className="text-sm text-gray-500">
+                    <Paragraph tone="subdued" size="sm">
                       Enter the URL of a component YAML file
-                    </p>
+                    </Paragraph>
                   </div>
                 </div>
               </TabsContent>

src/components/shared/ReactFlow/FlowSidebar/components/SearchFilter.tsx

@@ -8,6 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Heading } from "@/components/ui/typography";
 import { type SearchFilterProps } from "@/types/componentLibrary";
 import { ComponentSearchFilter } from "@/utils/constants";
 
@@ -44,7 +45,9 @@ const SearchFilter = ({
       </PopoverTrigger>
       <PopoverContent className="w-40">
         <div className="grid gap-2">
-          <h4>Filter Search</h4>
+          <Heading level={4} size="md">
+            Filter Search
+          </Heading>
           <div className="space-y-2">
             {availableFilters.map((filter) => {
               if (filter === ComponentSearchFilter.EXACTMATCH) return;

src/components/shared/ReactFlow/FlowSidebar/components/SidebarSection.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
+import { Heading } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 
 interface SidebarSectionProps {
@@ -24,13 +24,13 @@ export const SidebarSection = ({
   return (
     <BlockStack gap="2" className={cn("p-2", className)}>
       <InlineStack align="space-between" className="w-full">
-        <Text
-          as="h3"
+        <Heading
+          level={3}
           size="sm"
           className="font-medium text-sidebar-foreground/70"
         >
           {title}
-        </Text>
+        </Heading>
         {headerAction}
       </InlineStack>
 

src/components/shared/TaskDetails/IO.tsx

@@ -1,4 +1,5 @@
 import { Badge } from "@/components/ui/badge";
+import { Heading } from "@/components/ui/typography";
 import type { ComponentSpec } from "@/utils/componentSpec";
 
 interface TaskIOProps {
@@ -10,7 +11,9 @@ const TaskIO = ({ componentSpec }: TaskIOProps) => {
     <div className="h-full overflow-auto hide-scrollbar">
       {componentSpec?.inputs && componentSpec.inputs.length > 0 && (
         <div className="mb-4">
-          <h4 className="text-sm font-medium mb-2">Inputs</h4>
+          <Heading level={4} size="sm" className="font-medium mb-2">
+            Inputs
+          </Heading>
           <div className="border rounded-md divide-y">
             {componentSpec.inputs.map((input, index) => (
               <div key={index} className="flex flex-col px-3 py-2 gap-2">
@@ -48,7 +51,9 @@ const TaskIO = ({ componentSpec }: TaskIOProps) => {
 
       {componentSpec?.outputs && componentSpec.outputs.length > 0 && (
         <div>
-          <h4 className="text-sm font-medium mb-2">Outputs</h4>
+          <Heading level={4} size="sm" className="font-medium mb-2">
+            Outputs
+          </Heading>
           <div className="border rounded-md divide-y">
             {componentSpec.outputs.map((output) => (
               <div key={output.name} className="flex flex-col px-3 py-2 gap-2">

src/components/ui/typography.tsx

@@ -31,6 +31,7 @@ const textVariants = cva("", {
       inverted: "text-inverted",
       info: "text-foreground underline decoration-dotted",
       warning: "text-warning",
+      success: "text-success",
     },
     size: {
       xs: "text-xs",
@@ -124,12 +125,17 @@ Paragraph.displayName = "Paragraph";
 export const Heading = ({
   children,
   level = 1,
-}: PropsWithChildren<{ level: 1 | 2 | 3 | 4 | 5 | 6 }>) => {
+  size,
+  weight,
+  ...rest
+}: PropsWithChildren<{ level: 1 | 2 | 3 | 4 | 5 | 6 }> &
+  Omit<TextProps, "as" | "children">) => {
   return (
     <Text
+      {...rest}
       as={`h${level}`}
-      size={level === 1 ? "md" : "sm"}
-      weight={level < 3 ? "semibold" : "regular"}
+      size={size ?? (level === 1 ? "md" : "sm")}
+      weight={weight ?? (level < 3 ? "semibold" : "regular")}
       role="heading"
       aria-level={level}
     >

src/providers/ContextPanelProvider.tsx

@@ -8,6 +8,7 @@ import {
   useState,
 } from "react";
 
+import { Paragraph } from "@/components/ui/typography";
 import { deselectAllNodes } from "@/utils/flowUtils";
 
 import {
@@ -29,7 +30,7 @@ const ContextPanelContext = createRequiredContext<ContextPanelContextType>(
 
 const EMPTY_STATE = (
   <div className="flex items-center justify-center h-full">
-    <p className="text-gray-500">Select an element to see details</p>
+    <Paragraph tone="subdued">Select an element to see details</Paragraph>
   </div>
 );
 

src/routes/v2/pages/Editor/components/ArgumentRow/ArgumentRow.tsx

@@ -183,7 +183,7 @@ export const ArgumentRow = observer(function ArgumentRow({
           {inputSpec.name.replace(/_/g, " ")}
         </Text>
         {typeLabel && (
-          <Text size="xs" className="text-gray-400 shrink-0">
+          <Text size="xs" tone="subdued" className="shrink-0">
             ({typeLabel}
             {!inputSpec.optional ? "*" : ""})
           </Text>

src/routes/v2/pages/Editor/components/ArgumentRow/components/ThunderMenu/components/QuickConnectSubmenu.tsx

@@ -62,7 +62,7 @@ export function QuickConnectSubmenu({
                     {port.portName}
                   </Text>
                   {typeLabel && (
-                    <Text size="xs" className="text-gray-400 shrink-0 ml-auto">
+                    <Text size="xs" tone="subdued" className="shrink-0 ml-auto">
                       {typeLabel}
                     </Text>
                   )}

src/routes/v2/pages/Editor/components/ContextPanel/components/MultiSelectionDetails/components/BatchArgumentRow.tsx

@@ -197,17 +197,17 @@ export const BatchArgumentRow = observer(function BatchArgumentRow({
             {aggArg.name}
           </Text>
           {aggArg.typeLabel && (
-            <Text size="xs" className="text-gray-400 shrink-0">
+            <Text size="xs" tone="subdued" className="shrink-0">
               {aggArg.typeLabel}
             </Text>
           )}
           {!aggArg.optional && (
-            <Text size="xs" className="text-red-400 shrink-0">
+            <Text size="xs" tone="critical" className="shrink-0">
               *
             </Text>
           )}
         </InlineStack>
-        <Text size="xs" className="text-gray-400 shrink-0 mr-1">
+        <Text size="xs" tone="subdued" className="shrink-0 mr-1">
           {aggArg.taskIds.length} tasks
         </Text>
         <ThunderMenu

src/routes/v2/pages/Editor/components/ContextPanel/components/MultiSelectionDetails/components/BatchTaskColor.tsx

@@ -31,7 +31,7 @@ export const BatchTaskColor = observer(function BatchTaskColor({
       <Separator />
       <InlineStack align="space-between" gap="2" className="w-full">
         <InlineStack gap="2" blockAlign="center">
-          <Text size="xs" className="text-gray-600 dark:text-muted-foreground">
+          <Text size="xs" tone="subdued">
             Task color
           </Text>
           {!allSame && (

src/routes/v2/pages/Editor/components/CreateSubgraphForm.tsx

@@ -39,7 +39,7 @@ export function CreateSubgraphForm({
         <Label className="text-gray-600 dark:text-muted-foreground">
           Create Subgraph
         </Label>
-        <Text size="xs" className="text-gray-400">
+        <Text size="xs" tone="subdued">
           Group {selectedTaskCount} tasks into a reusable component
         </Text>
       </BlockStack>

src/routes/v2/pages/Editor/components/DriverPermissionGate.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
-import { Text } from "@/components/ui/typography";
+import { Heading, Text } from "@/components/ui/typography";
 import type { PipelineFolder } from "@/services/pipelineStorage/PipelineFolder";
 import { usePipelineStorage } from "@/services/pipelineStorage/PipelineStorageProvider";
 import type { PipelineStorageService } from "@/services/pipelineStorage/PipelineStorageService";
@@ -92,9 +92,9 @@ export function DriverPermissionGate({
   return (
     <BlockStack fill align="center" inlineAlign="center" gap="4">
       <Icon name="ShieldAlert" className="size-12 text-muted-foreground" />
-      <Text as="h2" size="lg" weight="semibold">
+      <Heading level={2} size="lg" weight="semibold">
         Permission Required
-      </Text>
+      </Heading>
       <Text tone="subdued" className="text-center max-w-md">
         This pipeline is stored in &ldquo;{data.folder?.name}&rdquo; which
         requires access permission.

src/routes/v2/pages/Editor/components/EditorMenuBar/components/RunsMenu.tsx

@@ -56,7 +56,7 @@ export const RunsMenu = observer(function RunsMenu() {
           <>
             <DropdownMenuSeparator />
             <div className="px-2 py-1.5">
-              <Text size="xs" className="text-red-500">
+              <Text size="xs" tone="critical">
                 {errorCount} validation {errorCount === 1 ? "issue" : "issues"}
               </Text>
             </div>

src/routes/v2/pages/Editor/components/EmptyEditorState.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
+import { Heading } from "@/components/ui/typography";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
 import { APP_ROUTES } from "@/routes/router";
 // TODO: extract PipelineFolders picker to shared or restructure via routing composition
@@ -38,9 +38,9 @@ export function EmptyEditorState() {
       >
         <InlineStack gap="2" blockAlign="center">
           <Icon name="FolderOpen" size="md" className="text-stone-500" />
-          <Text as="h2" size="lg" weight="semibold">
+          <Heading level={2} size="lg" weight="semibold">
             Open Pipeline
-          </Text>
+          </Heading>
         </InlineStack>
         <PipelineFolders onPipelineClick={handlePipelineClick} />
       </BlockStack>

src/routes/v2/pages/Editor/components/HistoryContent/components/InitialStateMarker.tsx

@@ -42,7 +42,7 @@ export function InitialStateMarker({
       >
         Initial state
         {isCurrent && (
-          <Text as="span" size="xs" className="text-green-500 ml-1">
+          <Text as="span" size="xs" tone="success" className="ml-1">
             ●
           </Text>
         )}

src/routes/v2/pages/Editor/components/PressedKeysList.tsx

@@ -2,7 +2,7 @@ import { autorun } from "mobx";
 import { useEffect, useState } from "react";
 
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
+import { Heading, Text } from "@/components/ui/typography";
 import type { KeyConstant } from "@/routes/v2/shared/shortcuts/keys";
 import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
 
@@ -17,16 +17,9 @@ export const PressedKeysList = function PressedKeysList() {
 
   return (
     <BlockStack>
-      <Text
-        as="h3"
-        size="xs"
-        weight="semibold"
-        tone="subdued"
-        role="heading"
-        aria-level={3}
-      >
+      <Heading level={3} size="xs" weight="semibold" tone="subdued">
         Pressed Keys ({pressedKeys.length})
-      </Text>
+      </Heading>
       <InlineStack gap="2" blockAlign="center">
         {pressedKeys.map((key) => (
           <Text key={key} size="xs">