chore: fix review changes

adithyaakrishna · adithyaakrishna · commit 5b6fcc3ea221 · 2026-03-25T10:41:02.000+05:30
diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
@@ -235,7 +235,7 @@ export default function Collaboration() {
               variant='blue'
               size='md'
               dot
-              className='bg-[var(--brand-accent)]/10 font-season text-[var(--brand-accent)] uppercase tracking-[0.02em]'
+              className='bg-[color-mix(in_srgb,var(--brand-accent)_10%,transparent)] font-season text-[var(--brand-accent)] uppercase tracking-[0.02em]'
             >
               Teams
             </Badge>
diff --git a/apps/sim/app/(home)/components/enterprise/enterprise.tsx b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
@@ -83,7 +83,7 @@ function TrustStrip() {
           <strong className='font-[430] font-season text-small text-white leading-none'>
             SOC 2 & HIPAA
           </strong>
-          <span className='font-[430] font-season text-[var(--landing-text-subtle)]/30 text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[var(--landing-text-subtle)]/55'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
             Type II · PHI protected →
           </span>
         </div>
@@ -103,7 +103,7 @@ function TrustStrip() {
           <strong className='font-[430] font-season text-small text-white leading-none'>
             Open Source
           </strong>
-          <span className='font-[430] font-season text-[var(--landing-text-subtle)]/30 text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[var(--landing-text-subtle)]/55'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
             View on GitHub →
           </span>
         </div>
@@ -118,7 +118,7 @@ function TrustStrip() {
           <strong className='font-[430] font-season text-small text-white leading-none'>
             SSO & SCIM
           </strong>
-          <span className='font-[430] font-season text-[var(--landing-text-subtle)]/30 text-xs leading-none tracking-[0.02em]'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em]'>
             Okta, Azure AD, Google
           </span>
         </div>
diff --git a/apps/sim/app/(home)/components/templates/templates.tsx b/apps/sim/app/(home)/components/templates/templates.tsx
@@ -521,7 +521,7 @@ export default function Templates() {
                           isActive
                             ? 'z-10'
                             : cn(
-                                'flex items-center px-3 py-2.5 hover:bg-[var(--landing-bg-card)]/50',
+                                'flex items-center px-3 py-2.5 hover:bg-[color-mix(in_srgb,var(--landing-bg-card)_50%,transparent)]',
                                 index < TEMPLATE_WORKFLOWS.length - 1 &&
                                   'shadow-[inset_0_-1px_0_0_#2A2A2A]'
                               )
diff --git a/apps/sim/app/form/[identifier]/components/form-field.tsx b/apps/sim/app/form/[identifier]/components/form-field.tsx
@@ -141,7 +141,7 @@ export function FormField({
               className={cn(
                 'flex cursor-pointer flex-col items-center justify-center rounded-[10px] border-2 border-dashed px-6 py-8 transition-colors',
                 isDragging
-                  ? 'border-[var(--brand)] bg-[var(--brand)]/5'
+                  ? 'border-[var(--brand)] bg-[color-mix(in_srgb,var(--brand)_5%,transparent)]'
                   : 'border-border hover:border-muted-foreground/50'
               )}
             >
diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx
@@ -857,7 +857,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
             {/* Last updated overlay */}
             {template.updatedAt && (
-              <div className='pointer-events-none absolute right-[12px] bottom-3 rounded-sm bg-[var(--bg)]/80 px-2 py-1 backdrop-blur-sm'>
+              <div className='pointer-events-none absolute right-[12px] bottom-3 rounded-sm bg-[color-mix(in_srgb,var(--bg)_80%,transparent)] px-2 py-1 backdrop-blur-sm'>
                 <span className='font-medium text-[var(--text-muted)] text-caption'>
                   Last updated{' '}
                   {formatDistanceToNow(new Date(template.updatedAt), {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
@@ -42,7 +42,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
               className='flex items-center gap-2 px-3.5 py-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'
             >
               <div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>
-                <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[var(--text-tertiary)]/40' />
+                <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[color-mix(in_srgb,var(--text-tertiary)_40%,transparent)]' />
               </div>
 
               <div className='min-w-0 flex-1'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
@@ -1183,7 +1183,7 @@ export function CredentialsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-lg border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-2.5 py-2 text-[var(--status-red)] text-small'>
+                <div className='rounded-lg border border-[color-mix(in_srgb,var(--status-red)_40%,transparent)] bg-[color-mix(in_srgb,var(--status-red)_10%,transparent)] px-2.5 py-2 text-[var(--status-red)] text-small'>
                   {detailsError}
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
@@ -908,7 +908,7 @@ export function IntegrationsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-lg border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-2.5 py-2 text-[var(--status-red)] text-small'>
+                <div className='rounded-lg border border-[color-mix(in_srgb,var(--status-red)_40%,transparent)] bg-[color-mix(in_srgb,var(--status-red)_10%,transparent)] px-2.5 py-2 text-[var(--status-red)] text-small'>
                   {detailsError}
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
@@ -1089,7 +1089,7 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
                 className={cn(
                   'flex-1 rounded-md border px-3 py-2.5 text-left transition-colors',
                   selectedTier === PRO_TIER.credits
-                    ? 'border-[var(--accent)] bg-[var(--accent)]/5'
+                    ? 'border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_5%,transparent)]'
                     : 'border-[var(--border-1)] hover-hover:border-[var(--border-2)]'
                 )}
                 onClick={() => setSelectedTier(PRO_TIER.credits)}
@@ -1105,7 +1105,7 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
                 className={cn(
                   'flex-1 rounded-md border px-3 py-2.5 text-left transition-colors',
                   selectedTier === MAX_TIER.credits
-                    ? 'border-[var(--accent)] bg-[var(--accent)]/5'
+                    ? 'border-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_5%,transparent)]'
                     : 'border-[var(--border-1)] hover-hover:border-[var(--border-2)]'
                 )}
                 onClick={() => setSelectedTier(MAX_TIER.credits)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -214,7 +214,7 @@ export function Versions({
               className={clsx(
                 'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
                 isSelected
-                  ? 'bg-[var(--accent)]/10 hover-hover:bg-[var(--accent)]/15'
+                  ? 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,var(--accent)_15%,transparent)]'
                   : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
               )}
               onClick={() => handleRowClick(v.version)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
@@ -164,15 +164,15 @@ export function KnowledgeBaseSelector({
           {selectedKnowledgeBases.map((kb) => (
             <div
               key={kb.id}
-              className='inline-flex items-center rounded-md border border-[var(--brand-knowledge)]/20 bg-[var(--brand-knowledge)]/10 px-2 py-1 text-xs'
+              className='inline-flex items-center rounded-md border border-[color-mix(in_srgb,var(--brand-knowledge)_20%,transparent)] bg-[color-mix(in_srgb,var(--brand-knowledge)_10%,transparent)] px-2 py-1 text-xs'
             >
               <PackageSearchIcon className='mr-1 h-3 w-3 text-[var(--brand-knowledge)]' />
               <span className='font-medium text-[var(--brand-knowledge)]'>{kb.name}</span>
               {!disabled && !isPreview && (
                 <button
                   type='button'
                   onClick={() => handleRemoveKnowledgeBase(kb.id)}
-                  className='ml-1 text-[var(--brand-knowledge)]/60 hover-hover:text-[var(--brand-knowledge)]'
+                  className='ml-1 text-[color-mix(in_srgb,var(--brand-knowledge)_60%,transparent)] hover-hover:text-[var(--brand-knowledge)]'
                   aria-label={`Remove ${kb.name}`}
                 >
                   <X className='h-3 w-3' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -1786,7 +1786,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           <PopoverScrollArea ref={scrollAreaRef}>
             <TagDropdownBackButton setSelectedIndex={setSelectedIndex} />
             {flatTagList.length === 0 ? (
-              <div className='px-1.5 py-2 text-[var(--white)]/60 text-caption'>
+              <div className='px-1.5 py-2 text-[color-mix(in_srgb,var(--white)_60%,transparent)] text-caption'>
                 No matching tags found
               </div>
             ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -145,7 +145,7 @@ const WorkflowEdgeComponent = ({
               }
             }}
           >
-            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[var(--text-error)]/80' />
+            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[color-mix(in_srgb,var(--text-error)_80%,transparent)]' />
           </div>
         </EdgeLabelRenderer>
       )}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -373,7 +373,7 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={ref}
       className={cn(
-        'flex justify-end gap-2 rounded-b-xl border-[var(--border)] border-t bg-[var(--surface-3)]/50 px-4 py-3',
+        'flex justify-end gap-2 rounded-b-xl border-[var(--border)] border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] px-4 py-3',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/slider/slider.tsx b/apps/sim/components/emcn/components/slider/slider.tsx
@@ -30,7 +30,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
         <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='relative block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--text-muted)]/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
+      <SliderPrimitive.Thumb className='relative block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
     </SliderPrimitive.Root>
   )
 )
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -16,7 +16,7 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--text-muted)]/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/table/table.tsx b/apps/sim/components/emcn/components/table/table.tsx
@@ -54,7 +54,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t bg-[var(--surface-3)]/50 font-medium [&>tr]:last:border-b-0',
+      'border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] font-medium [&>tr]:last:border-b-0',
       className
     )}
     {...props}
diff --git a/apps/sim/components/emcn/components/tag-input/tag-input.tsx b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
@@ -401,7 +401,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           />
         )}
         {isDragging && (
-          <div className='absolute inset-0 flex items-center justify-center rounded-sm bg-[var(--surface-5)]/90'>
+          <div className='absolute inset-0 flex items-center justify-center rounded-sm bg-[color-mix(in_srgb,var(--surface-5)_90%,transparent)]'>
             <span className='text-[var(--text-tertiary)] text-small'>Drop file here</span>
           </div>
         )}

Original file line number	Diff line number	Diff line change
`@@ -235,7 +235,7 @@ export default function Collaboration() {`
`235`	`235`	`variant='blue'`
`236`	`236`	`size='md'`
`237`	`237`	`dot`
`238`		`- className='bg-[var(--brand-accent)]/10 font-season text-[var(--brand-accent)] uppercase tracking-[0.02em]'`
	`238`	`+ className='bg-[color-mix(in_srgb,var(--brand-accent)_10%,transparent)] font-season text-[var(--brand-accent)] uppercase tracking-[0.02em]'`
`239`	`239`	`>`
`240`	`240`	`Teams`
`241`	`241`	`</Badge>`
Original file line number	Diff line number	Diff line change
`@@ -521,7 +521,7 @@ export default function Templates() {`
`521`	`521`	`isActive`
`522`	`522`	`? 'z-10'`
`523`	`523`	`: cn(`
`524`		`- 'flex items-center px-3 py-2.5 hover:bg-[var(--landing-bg-card)]/50',`
	`524`	`+ 'flex items-center px-3 py-2.5 hover:bg-[color-mix(in_srgb,var(--landing-bg-card)_50%,transparent)]',`
`525`	`525`	`index < TEMPLATE_WORKFLOWS.length - 1 &&`
`526`	`526`	`'shadow-[inset_0_-1px_0_0_#2A2A2A]'`
`527`	`527`	`)`
Original file line number	Diff line number	Diff line change
`@@ -141,7 +141,7 @@ export function FormField({`
`141`	`141`	`className={cn(`
`142`	`142`	`'flex cursor-pointer flex-col items-center justify-center rounded-[10px] border-2 border-dashed px-6 py-8 transition-colors',`
`143`	`143`	`isDragging`
`144`		`- ? 'border-[var(--brand)] bg-[var(--brand)]/5'`
	`144`	`+ ? 'border-[var(--brand)] bg-[color-mix(in_srgb,var(--brand)_5%,transparent)]'`
`145`	`145`	`: 'border-border hover:border-muted-foreground/50'`
`146`	`146`	`)}`
`147`	`147`	`>`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu`
`42`	`42`	`className='flex items-center gap-2 px-3.5 py-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'`
`43`	`43`	`>`
`44`	`44`	`<div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>`
`45`		`- <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[var(--text-tertiary)]/40' />`
	`45`	`+ <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[color-mix(in_srgb,var(--text-tertiary)_40%,transparent)]' />`
`46`	`46`	`</div>`
`47`	`47`
`48`	`48`	`<div className='min-w-0 flex-1'>`