Keep workflow preview values readable (#8256)

* fix(ui): keep preview values readable and restore version tint

* fix(ui): keep preview file actions inert

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx

@@ -231,7 +231,7 @@ export function Versions({
               className={cn(
                 'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
                 isSelected
-                  ? 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,var(--accent)_15%,transparent)]'
+                  ? 'bg-[color-mix(in_srgb,hsl(var(--accent))_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,hsl(var(--accent))_15%,transparent)]'
                   : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
               )}
               onClick={() => handleRowClick(v.version)}

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

@@ -1114,6 +1114,7 @@ export function ConditionInput({
                       overlayRefs.current.delete(block.id)
                     }
                   }}
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 font-sans text-sm',
                     (isPreview || disabled) && 'opacity-50'

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

@@ -197,6 +197,7 @@ export function EvalInput({
                   className='text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
                 />
                 <div
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm',
                     (isPreview || disabled) && 'opacity-50'

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

@@ -215,12 +215,13 @@ function SingleFileSelector({
         iconSize='compact'
         className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
         onClick={onClear}
-        disabled={isDeleting}
+        disabled={disabled || isDeleting}
+        data-preview-full-opacity={disabled || undefined}
       >
         {isDeleting ? (
           <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
         ) : (
-          <X className='size-4 opacity-50 hover-hover:opacity-100' />
+          <X className='size-4 opacity-50 hover-hover:opacity-100' data-preview-full-opacity />
         )}
       </Button>
     </div>
@@ -770,12 +771,13 @@ export function FileUpload({
           iconSize='compact'
           className='-translate-y-1/2 absolute top-1/2 right-[4px]'
           onClick={(e) => handleRemoveFile(file, e)}
-          disabled={isDeleting}
+          disabled={disabled || isPreview || isDeleting}
+          data-preview-full-opacity={isPreview || undefined}
         >
           {isDeleting ? (
             <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
           ) : (
-            <X className='size-4 opacity-50' />
+            <X className='size-4 opacity-50' data-preview-full-opacity />
           )}
         </Button>
       </div>
@@ -972,7 +974,7 @@ export function FileUpload({
           onOpenChange={(open) => {
             if (open) void refetchWorkspaceFiles()
           }}
-          disabled={disabled}
+          disabled={disabled || isPreview}
           isLoading={loadingWorkspaceFiles}
           formatFileSize={formatFileSize}
           truncateMiddle={truncateMiddle}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx

@@ -123,7 +123,7 @@ export function GroupedCheckboxList({
         )}
       >
         <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
+          <ManageWorkspace className='size-4 shrink-0 opacity-50' data-preview-full-opacity />
           <span className='truncate'>Configure PII Types</span>
         </span>
         <SelectedCountDisplay

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

@@ -376,6 +376,7 @@ export function LongInput({
               />
               <div
                 ref={overlayRef}
+                data-preview-full-opacity={isPreview || undefined}
                 className={cn(
                   'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
                   (isPreview || disabled) && 'opacity-50',

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

@@ -547,6 +547,7 @@ export function MessagesInput({
       {currentMessages.map((message, index) => (
         <div
           key={messageIdsRef.current[index] ?? `fallback-${index}`}
+          data-preview-full-opacity={isPreview || undefined}
           className={cn(
             'relative flex w-full flex-col rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
             disabled && 'opacity-50'

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

@@ -393,6 +393,7 @@ export const ShortInput = memo(function ShortInput({
                 />
                 <div
                   ref={overlayRef}
+                  data-preview-full-opacity={isPreview || undefined}
                   className={cn(
                     'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                     (isPreview || disabled) && 'opacity-50',

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

@@ -61,7 +61,10 @@ export function SliderInput({
   const isDisabled = isPreview || disabled
 
   return (
-    <div className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}>
+    <div
+      data-preview-full-opacity={isPreview || undefined}
+      className={cn('relative pt-2 pb-[22px]', isDisabled && 'opacity-50')}
+    >
       <Slider
         value={[normalizedValue]}
         min={min}

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

@@ -725,6 +725,7 @@ export function FieldFormat({
                         ref={(el) => {
                           if (el) descriptionOverlayRefs.current[field.id] = el
                         }}
+                        data-preview-full-opacity={isPreview || undefined}
                         style={{ scrollbarWidth: 'none' }}
                         className={cn(
                           'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',