feat: aligned current unassigned hex to old globals

emir-karabeg · emir-karabeg · commit f3857910c260 · 2025-11-22T15:53:07.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
@@ -125,7 +125,7 @@ export const TxtIcon: React.FC<IconProps> = ({ className = 'w-6 h-6' }) => (
     <path d='M14 2V8H20' fill='#9E9E9E' />
     <path
       d='M14 2L20 8V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2H14Z'
-      stroke='#424242'
+      stroke='var(--border-muted)'
       strokeWidth='0.5'
       strokeLinecap='round'
       strokeLinejoin='round'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
@@ -287,7 +287,7 @@ export function WorkflowDetails({
                   <LineChart
                     data={details.errorRates}
                     label='Error Rate'
-                    color='#ef4444'
+                    color='var(--text-error)'
                     unit='%'
                   />
                   {hasDuration && (
@@ -467,12 +467,12 @@ export function WorkflowDetails({
                                   <div
                                     className='h-[6px] w-[6px] rounded-[2px]'
                                     style={{
-                                      backgroundColor: isError ? '#EF4444' : '#B7B7B7',
+                                      backgroundColor: isError ? 'var(--text-error)' : '#B7B7B7',
                                     }}
                                   />
                                   <span
                                     className='font-medium text-[11.5px]'
-                                    style={{ color: isError ? '#EF4444' : '#B7B7B7' }}
+                                    style={{ color: isError ? 'var(--text-error)' : '#B7B7B7' }}
                                   >
                                     {statusLabel}
                                   </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -483,12 +483,12 @@ export default function Logs() {
                                 <div
                                   className='h-[6px] w-[6px] rounded-[2px]'
                                   style={{
-                                    backgroundColor: isError ? '#EF4444' : '#B7B7B7',
+                                    backgroundColor: isError ? 'var(--text-error)' : '#B7B7B7',
                                   }}
                                 />
                                 <span
                                   className='font-medium text-[11.5px]'
-                                  style={{ color: isError ? '#EF4444' : '#B7B7B7' }}
+                                  style={{ color: isError ? 'var(--text-error)' : '#B7B7B7' }}
                                 >
                                   {statusLabel}
                                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -25,7 +25,12 @@ interface TemplateCardProps {
 
 export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('h-[268px] w-full rounded-[8px] bg-[#202020] p-[8px]', className)}>
+    <div
+      className={cn(
+        'h-[268px] w-full rounded-[8px] bg-[var(--surface-elevated)] p-[8px]',
+        className
+      )}
+    >
       <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-gray-700' />
 
       <div className='mt-[14px] flex items-center justify-between'>
@@ -193,7 +198,10 @@ function TemplateCardInner({
   return (
     <div
       onClick={handleCardClick}
-      className={cn('w-full cursor-pointer rounded-[8px] bg-[#202020] p-[8px]', className)}
+      className={cn(
+        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-elevated)] p-[8px]',
+        className
+      )}
     >
       <div
         ref={previewRef}
@@ -238,7 +246,7 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[#4A4A4A]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-14)]'
                 style={{ marginLeft: '-4px' }}
               >
                 <span className='font-medium text-[10px] text-white'>+{blockTypes.length - 3}</span>
@@ -273,7 +281,7 @@ function TemplateCardInner({
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
             </div>
           ) : (
-            <div className='flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
+            <div className='flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-14)]'>
               <User className='h-[18px] w-[18px] text-[#888888]' />
             </div>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
@@ -37,7 +37,7 @@ function ShimmerOverlayText({ label, value, active = false }: ShimmerOverlayText
   return (
     <span className='relative inline-block'>
       <span style={{ color: '#B8B8B8' }}>{label}</span>
-      <span style={{ color: '#787878' }}>{value}</span>
+      <span style={{ color: 'var(--text-muted)' }}>{value}</span>
       {active ? (
         <span
           aria-hidden='true'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
@@ -188,7 +188,7 @@ function ShimmerOverlayText({
       {actionVerb ? (
         <>
           <span style={{ color: '#B8B8B8' }}>{actionVerb}</span>
-          <span style={{ color: '#787878' }}>{remainder}</span>
+          <span style={{ color: 'var(--text-muted)' }}>{remainder}</span>
         </>
       ) : (
         <span>{text}</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
@@ -552,11 +552,15 @@ export function MentionMenu({
                         active={index === submenuActiveIndex}
                       >
                         <span className='min-w-0 flex-1 truncate'>{log.workflowName}</span>
-                        <span className='text-[#AEAEAE] text-[10px] dark:text-[#AEAEAE]'>·</span>
+                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+                          ·
+                        </span>
                         <span className='whitespace-nowrap text-[10px]'>
                           {formatTimestamp(log.createdAt)}
                         </span>
-                        <span className='text-[#AEAEAE] text-[10px] dark:text-[#AEAEAE]'>·</span>
+                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+                          ·
+                        </span>
                         <span className='text-[10px] capitalize'>
                           {(log.trigger || 'manual').toLowerCase()}
                         </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -25,7 +25,7 @@ interface ConnectionBlocksProps {
 }
 
 const TREE_STYLES = {
-  LINE_COLOR: '#2C2C2C',
+  LINE_COLOR: 'var(--border)',
   LINE_OFFSET: 4,
 } as const
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -89,7 +89,7 @@ export function SubflowEditor({
               className='h-[1.25px]'
               style={{
                 backgroundImage:
-                  'repeating-linear-gradient(to right, #2C2C2C 0px, #2C2C2C 6px, transparent 6px, transparent 12px)',
+                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
               }}
             />
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -364,7 +364,7 @@ export function Editor() {
                               className='h-[1.25px]'
                               style={{
                                 backgroundImage:
-                                  'repeating-linear-gradient(to right, #2C2C2C 0px, #2C2C2C 6px, transparent 6px, transparent 12px)',
+                                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
                               }}
                             />
                           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
@@ -18,7 +18,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
   const preview = document.createElement('div')
   preview.style.cssText = `
     width: 250px;
-    background: #232323;
+    background: var(--surface-1);
     border-radius: 8px;
     padding: 8px 9px;
     display: flex;
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -25,7 +25,7 @@ const SubflowNodeStyles: React.FC = () => {
       /* Drag-over states */
       .loop-node-drag-over,
       .parallel-node-drag-over {
-        box-shadow: 0 0 0 1.75px #33B4FF !important;
+        box-shadow: 0 0 0 1.75px var(--brand-secondary) !important;
         border-radius: 8px !important;
       }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -827,7 +827,7 @@ export function Terminal() {
                         >
                           <div
                             className='h-[6px] w-[6px] rounded-[2px]'
-                            style={{ backgroundColor: '#EF4444' }}
+                            style={{ backgroundColor: 'var(--text-error)' }}
                           />
                           <span className='flex-1'>Error</span>
                           {filters.statuses.has('error') && <Check className='h-3 w-3' />}
@@ -1086,12 +1086,16 @@ export function Terminal() {
                             <div
                               className='h-[6px] w-[6px] rounded-[2px]'
                               style={{
-                                backgroundColor: statusInfo.isError ? '#EF4444' : '#B7B7B7',
+                                backgroundColor: statusInfo.isError
+                                  ? 'var(--text-error)'
+                                  : '#B7B7B7',
                               }}
                             />
                             <span
                               className='font-medium text-[11.5px]'
-                              style={{ color: statusInfo.isError ? '#EF4444' : '#B7B7B7' }}
+                              style={{
+                                color: statusInfo.isError ? 'var(--text-error)' : '#B7B7B7',
+                              }}
                             >
                               {statusInfo.label}
                             </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -867,15 +867,15 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                         className={!childIsDeployed || childNeedsRedeploy ? 'cursor-pointer' : ''}
                         style={{
                           borderColor: !childIsDeployed
-                            ? '#EF4444'
+                            ? 'var(--text-error)'
                             : childNeedsRedeploy
-                              ? '#FF6600'
-                              : '#22C55E',
+                              ? 'var(--warning)'
+                              : 'var(--brand-tertiary)',
                           color: !childIsDeployed
-                            ? '#EF4444'
+                            ? 'var(--text-error)'
                             : childNeedsRedeploy
-                              ? '#FF6600'
-                              : '#22C55E',
+                              ? 'var(--warning)'
+                              : 'var(--brand-tertiary)',
                         }}
                         onClick={(e) => {
                           e.stopPropagation()
@@ -923,8 +923,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                         variant='outline'
                         className={scheduleInfo?.isDisabled ? 'cursor-pointer' : ''}
                         style={{
-                          borderColor: scheduleInfo?.isDisabled ? '#FF6600' : '#22C55E',
-                          color: scheduleInfo?.isDisabled ? '#FF6600' : '#22C55E',
+                          borderColor: scheduleInfo?.isDisabled
+                            ? 'var(--warning)'
+                            : 'var(--brand-tertiary)',
+                          color: scheduleInfo?.isDisabled
+                            ? 'var(--warning)'
+                            : 'var(--brand-tertiary)',
                         }}
                         onClick={(e) => {
                           e.stopPropagation()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
@@ -49,7 +49,7 @@ export function getBlockRingStyles(options: BlockRingOptions): {
       !isFocused &&
       !isDeletedBlock &&
       diffStatus === 'new' &&
-      'ring-[#22C55E]',
+      'ring-[var(--brand-tertiary)]',
     !isActive &&
       !isPending &&
       !isFocused &&
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -308,7 +308,7 @@ const WorkflowContent = React.memo(() => {
    */
   const connectionLineStyle = useMemo(() => {
     return {
-      stroke: isErrorConnectionDrag ? '#EF4444' : '#434343',
+      stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--surface-12)',
       strokeWidth: 2,
     }
   }, [isErrorConnectionDrag])
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
@@ -74,15 +74,17 @@ export function UsageHeader({
           </div>
           <div className='flex items-center gap-[4px] text-xs tabular-nums'>
             {isBlocked ? (
-              <span className='font-medium text-[#B1B1B1] text-[12px]'>Payment required</span>
+              <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                Payment required
+              </span>
             ) : (
               <>
-                <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                   ${current.toFixed(2)}
                 </span>
-                <span className='font-medium text-[#B1B1B1] text-[12px]'>/</span>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
                 {rightContent ?? (
-                  <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+                  <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                     ${limit}
                   </span>
                 )}
@@ -100,7 +102,11 @@ export function UsageHeader({
                 key={i}
                 className='h-[6px] flex-1 rounded-[2px]'
                 style={{
-                  backgroundColor: isFilled ? (isAlmostOut ? '#ef4444' : '#34B5FF') : '#414141',
+                  backgroundColor: isFilled
+                    ? isAlmostOut
+                      ? 'var(--text-error)'
+                      : '#34B5FF'
+                    : '#414141',
                 }}
               />
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -109,11 +109,11 @@ export function TeamSeatsOverview({
             )}
           </div>
           <div className='flex items-center gap-[4px] text-xs tabular-nums'>
-            <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
               {usedSeats} used
             </span>
-            <span className='font-medium text-[#B1B1B1] text-[12px]'>/</span>
-            <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
               {totalSeats} total
             </span>
           </div>
@@ -128,7 +128,7 @@ export function TeamSeatsOverview({
                 key={i}
                 className={cn(
                   'h-[6px] flex-1 rounded-full transition-colors',
-                  isFilled ? 'bg-[#34B5FF]' : 'bg-[#2C2C2C]'
+                  isFilled ? 'bg-[#34B5FF]' : 'bg-[var(--border)]'
                 )}
               />
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
@@ -126,7 +126,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
             organizationId={activeOrg.id}
           />
         ) : (
-          <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+          <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
             ${currentCap.toFixed(0)}
           </span>
         )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
@@ -275,7 +275,7 @@ export function WorkflowPreview({
 
   return (
     <ReactFlowProvider>
-      <div style={{ height, width, backgroundColor: '#1B1B1B' }} className={cn('preview-mode')}>
+      <div style={{ height, width, backgroundColor: 'var(--bg)' }} className={cn('preview-mode')}>
         <ReactFlow
           nodes={nodes}
           edges={edges}

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ interface ConnectionBlocksProps {`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`const TREE_STYLES = {`
`28`		`- LINE_COLOR: '#2C2C2C',`
	`28`	`+ LINE_COLOR: 'var(--border)',`
`29`	`29`	`LINE_OFFSET: 4,`
`30`	`30`	`} as const`
`31`	`31`