fix: complete remaining hardcoded styles migration

Factory Bot · Factory Bot · commit 8c3575f1cea7 · 2026-01-28T15:59:57.000+04:00
- Fix 8 border-radius values
- Fix 6 background colors
- Fix 26 text colors across 17 files

Zero hardcoded styles remaining in src/components/
diff --git a/cortex-gui/src/components/ActivityBar.tsx b/cortex-gui/src/components/ActivityBar.tsx
@@ -230,7 +230,7 @@ function ActivityBarItemComponent(props: ActivityBarItemProps) {
               bottom: "8px",
               width: "2px",
               background: tokens.colors.semantic.primary,
-              "border-radius": "1px",
+              "border-radius": "var(--figma-radius-sm)",
             }}
           />
         </Show>
diff --git a/cortex-gui/src/components/Chat/AgentMessage.tsx b/cortex-gui/src/components/Chat/AgentMessage.tsx
@@ -47,7 +47,7 @@ function NeonGridLoader() {
           style={{
             width: "4px",
             height: "4px",
-            "border-radius": "1px",
+            "border-radius": "var(--figma-radius-sm)",
             background: dotColor,
             opacity: "0.4",
             animation: `gridPulse 1.2s ease-in-out infinite`,
diff --git a/cortex-gui/src/components/Chat/InputArea.tsx b/cortex-gui/src/components/Chat/InputArea.tsx
@@ -52,7 +52,7 @@ function NeonGridLoader() {
           style={{
             width: "4px",
             height: "4px",
-            "border-radius": "1px",
+            "border-radius": "var(--figma-radius-sm)",
             background: dotColor,
             opacity: "0.4",
             animation: `gridPulse 1.2s ease-in-out infinite`,
diff --git a/cortex-gui/src/components/ConfigureDefaultEditorDialog.tsx b/cortex-gui/src/components/ConfigureDefaultEditorDialog.tsx
@@ -408,7 +408,7 @@ export function ConfigureDefaultEditorDialog(
                                   width: "6px",
                                   height: "6px",
                                   "border-radius": "var(--figma-radius-full)",
-                                  background: "#fff",
+                                  background: "var(--figma-bg-primary)",
                                 }}
                               />
                             </Show>
diff --git a/cortex-gui/src/components/OpenWithMenu.tsx b/cortex-gui/src/components/OpenWithMenu.tsx
@@ -506,7 +506,7 @@ export function OpenWithMenu(props: OpenWithMenuProps) {
               }}
             >
               <Show when={rememberChoice()}>
-                <Icon name="check" size={10} style={{ color: "#fff" }} />
+                <Icon name="check" size={10} style={{ color: "var(--figma-text-primary)" }} />
               </Show>
             </span>
 
diff --git a/cortex-gui/src/components/SettingsDialog.tsx b/cortex-gui/src/components/SettingsDialog.tsx
@@ -1241,7 +1241,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                               background: state.config.sandboxMode === mode.value ? "var(--jb-btn-primary-bg)" : "transparent",
                             }}>
                               <Show when={state.config.sandboxMode === mode.value}>
-                                <Icon name="check" style={{ width: "12px", height: "12px", color: "#fff" }} />
+                                <Icon name="check" style={{ width: "12px", height: "12px", color: "var(--figma-text-primary)" }} />
                               </Show>
                             </div>
                             <div>
@@ -1286,7 +1286,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                               background: state.config.approvalMode === mode.value ? "var(--jb-btn-primary-bg)" : "transparent",
                             }}>
                               <Show when={state.config.approvalMode === mode.value}>
-                                <Icon name="check" style={{ width: "12px", height: "12px", color: "#fff" }} />
+                                <Icon name="check" style={{ width: "12px", height: "12px", color: "var(--figma-text-primary)" }} />
                               </Show>
                             </div>
                             <div>
@@ -1785,7 +1785,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                         background: supermaven.state.enabled ? "var(--jb-btn-primary-bg)" : "transparent",
                       }}>
                         <Show when={supermaven.state.enabled}>
-                          <Icon name="check" style={{ width: "12px", height: "12px", color: "#fff" }} />
+                          <Icon name="check" style={{ width: "12px", height: "12px", color: "var(--figma-text-primary)" }} />
                         </Show>
                       </div>
                       <div style={{ flex: "1" }}>
diff --git a/cortex-gui/src/components/SystemSpecs.tsx b/cortex-gui/src/components/SystemSpecs.tsx
@@ -202,7 +202,7 @@ export function SystemSpecsDialog(props: SystemSpecsDialogProps) {
             <button
               onClick={props.onClose}
               class="w-8 h-8 flex items-center justify-center rounded-lg transition-colors"
-              style={{ color: "#888" }}
+              style={{ color: "var(--figma-text-inactive)" }}
               onMouseEnter={(e) => e.currentTarget.style.background = "var(--ui-panel-bg-lighter)"}
               onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
             >
diff --git a/cortex-gui/src/components/ai/tools/DiffViewer.tsx b/cortex-gui/src/components/ai/tools/DiffViewer.tsx
@@ -280,7 +280,7 @@ export function DiffViewer(props: DiffViewerProps) {
                   "border-radius": "var(--figma-radius-sm)",
                   border: "none",
                   background: "var(--vscode-chat-linesAddedForeground)",
-                  color: "#000",
+                  color: "var(--figma-text-primary)",
                   cursor: "pointer",
                   "font-size": "var(--vscode-chat-font-size-body-xs)",
                   "font-weight": "500",
@@ -428,7 +428,7 @@ function UnifiedDiffView(props: UnifiedDiffViewProps) {
                         "border-radius": "var(--figma-radius-sm)",
                         border: "none",
                         background: "var(--vscode-chat-linesAddedForeground)",
-                        color: "#000",
+                        color: "var(--figma-text-primary)",
                         cursor: "pointer",
                         "font-size": "10px",
                       }}
@@ -624,7 +624,7 @@ function SplitDiffView(props: SplitDiffViewProps) {
                         "border-radius": "var(--figma-radius-sm)",
                         border: "none",
                         background: "var(--vscode-chat-linesAddedForeground)",
-                        color: "#000",
+                        color: "var(--figma-text-primary)",
                         cursor: "pointer",
                         "font-size": "10px",
                       }}
diff --git a/cortex-gui/src/components/debug/BreakpointWidget.tsx b/cortex-gui/src/components/debug/BreakpointWidget.tsx
@@ -362,7 +362,7 @@ export const BreakpointWidget: Component<BreakpointWidgetProps> = (props) => {
               "background-color": enabled()
                 ? "var(--vscode-button-background, var(--figma-info))"
                 : "var(--vscode-input-background, var(--figma-bg-hover))",
-              "border-radius": "9px",
+              "border-radius": "var(--figma-radius-full)",
               position: "relative",
               transition: "background-color 0.2s",
               "margin-right": "8px",
diff --git a/cortex-gui/src/components/debugger/DataBreakpointDialog.tsx b/cortex-gui/src/components/debugger/DataBreakpointDialog.tsx
@@ -195,7 +195,7 @@ export function DataBreakpointDialog(props: DataBreakpointDialogProps) {
             <div style={{
               width: "4px",
               height: "4px",
-              background: "#fff",
+              background: "var(--figma-bg-primary)",
               "border-radius": "var(--figma-radius-full)",
             }} />
           </div>
diff --git a/cortex-gui/src/components/debugger/LogpointDialog.tsx b/cortex-gui/src/components/debugger/LogpointDialog.tsx
@@ -164,7 +164,7 @@ export function LogpointDialog(props: LogpointDialogProps) {
               width: "4px",
               height: "4px",
               "border-radius": "var(--figma-radius-full)",
-              background: "#fff",
+              background: "var(--figma-bg-primary)",
             }} />
           </div>
           <Text variant="muted" size="xs">
diff --git a/cortex-gui/src/components/debugger/VariableVisualizers.tsx b/cortex-gui/src/components/debugger/VariableVisualizers.tsx
@@ -795,7 +795,7 @@ export function ColorVisualizer(props: ColorVisualizerProps): JSX.Element {
 
   const swatchStyle = createMemo((): JSX.CSSProperties => {
     const pc = parsedColor();
-    if (!pc) return { background: "#ccc" };
+    if (!pc) return { background: "var(--figma-text-inactive)" };
     
     const bgColor = pc.a !== undefined
       ? `rgba(${pc.r}, ${pc.g}, ${pc.b}, ${pc.a})`
diff --git a/cortex-gui/src/components/dev/ComponentPreview.tsx b/cortex-gui/src/components/dev/ComponentPreview.tsx
@@ -211,7 +211,7 @@ const SampleAvatar: Component<{
           width: `${size}px`,
           height: `${size}px`,
           background: "linear-gradient(135deg, var(--figma-info), var(--figma-info))",
-          color: "#fff",
+          color: "var(--figma-text-primary)",
           "font-size": `${size / 2.5}px`,
         }}
       >
@@ -254,7 +254,7 @@ const SampleSwitch: Component<{
         <div
           class="absolute top-0.5 w-4 h-4 rounded-full transition-transform"
           style={{
-            background: "#fff",
+            background: "var(--figma-bg-primary)",
             transform: isChecked() ? "translateX(22px)" : "translateX(2px)",
           }}
         />
diff --git a/cortex-gui/src/components/editor/TabBar.tsx b/cortex-gui/src/components/editor/TabBar.tsx
@@ -529,7 +529,7 @@ function Tab(props: TabProps) {
               "font-size": "10px",
               "font-weight": "600",
               background: decoration().badgeColor,
-              color: "#fff",
+              color: "var(--figma-text-primary)",
               "margin-left": "4px",
               "flex-shrink": "0",
             }}
diff --git a/cortex-gui/src/components/extensions/ExtensionBisect.tsx b/cortex-gui/src/components/extensions/ExtensionBisect.tsx
@@ -216,7 +216,7 @@ export const ExtensionBisect: Component<ExtensionBisectProps> = (props) => {
             display: "flex",
             "align-items": "center",
             "justify-content": "center",
-            color: "#fff",
+            color: "var(--figma-text-primary)",
             transition: "background-color 0.2s ease",
           }}
         >
@@ -327,7 +327,7 @@ export const ExtensionBisect: Component<ExtensionBisectProps> = (props) => {
                 "border-radius": tokens.radius.md,
                 border: "none",
                 "background-color": tokens.colors.semantic.primary,
-                color: "#fff",
+                color: "var(--figma-text-primary)",
                 "font-size": "13px",
                 "font-weight": 600,
                 cursor: isLoading() ? "not-allowed" : "pointer",
@@ -593,7 +593,7 @@ export const ExtensionBisect: Component<ExtensionBisectProps> = (props) => {
                   "border-radius": tokens.radius.md,
                   border: "none",
                   "background-color": tokens.colors.semantic.primary,
-                  color: "#fff",
+                  color: "var(--figma-text-primary)",
                   "font-size": "13px",
                   "font-weight": 500,
                   cursor: isLoading() ? "not-allowed" : "pointer",
@@ -702,7 +702,7 @@ export const ExtensionBisect: Component<ExtensionBisectProps> = (props) => {
                 "border-radius": tokens.radius.md,
                 border: "none",
                 "background-color": tokens.colors.semantic.primary,
-                color: "#fff",
+                color: "var(--figma-text-primary)",
                 "font-size": "13px",
                 "font-weight": 500,
                 cursor: isLoading() ? "not-allowed" : "pointer",
diff --git a/cortex-gui/src/components/extensions/ExtensionCard.tsx b/cortex-gui/src/components/extensions/ExtensionCard.tsx
@@ -288,7 +288,7 @@ export const ExtensionCard: Component<ExtensionCardProps> = (props) => {
                   overflow: "hidden",
                   "text-overflow": "ellipsis",
                   "background-color": tokens.colors.semantic.info,
-                  color: "#fff",
+                  color: "var(--figma-text-primary)",
                   opacity: isUpdating() ? 0.7 : 1,
                   display: "flex",
                   "align-items": "center",
@@ -352,7 +352,7 @@ export const ExtensionCard: Component<ExtensionCardProps> = (props) => {
                 "background-color": confirmingUninstall()
                   ? tokens.colors.semantic.error
                   : tokens.colors.surface.canvas,
-                color: "#fff",
+                color: "var(--figma-text-primary)",
               }}
             >
               {confirmingUninstall() ? "Confirm" : "Uninstall"}
diff --git a/cortex-gui/src/components/extensions/ExtensionDetail.tsx b/cortex-gui/src/components/extensions/ExtensionDetail.tsx
@@ -801,7 +801,7 @@ export const ExtensionDetail: Component<ExtensionDetailProps> = (props) => {
                 "max-width": "300px",
                 cursor: isUpdating() ? "not-allowed" : "pointer",
                 "background-color": "var(--info, var(--figma-info))",
-                color: "#fff",
+                color: "var(--figma-text-primary)",
                 opacity: isUpdating() ? 0.7 : 1,
                 transition: "background-color 0.2s ease",
                 display: "flex",
diff --git a/cortex-gui/src/components/extensions/ExtensionMarketplace.tsx b/cortex-gui/src/components/extensions/ExtensionMarketplace.tsx
@@ -473,7 +473,7 @@ export const ExtensionMarketplace: Component<ExtensionMarketplaceProps> = (props
               "border-radius": "var(--figma-radius-md)",
               border: "none",
               "background-color": tokens.colors.semantic.primary,
-              color: "#fff",
+              color: "var(--figma-text-primary)",
               "font-size": "13px",
               "font-weight": 500,
               cursor: loading() ? "not-allowed" : "pointer",
@@ -785,7 +785,7 @@ export const ExtensionMarketplace: Component<ExtensionMarketplaceProps> = (props
                     "border-radius": "var(--figma-radius-md)",
                     border: "none",
                     "background-color": tokens.colors.semantic.primary,
-                    color: "#fff",
+                    color: "var(--figma-text-primary)",
                     "font-size": "13px",
                     "font-weight": 500,
                     cursor: "pointer",
diff --git a/cortex-gui/src/components/figma/FigmaActivityBar.tsx b/cortex-gui/src/components/figma/FigmaActivityBar.tsx
@@ -187,7 +187,7 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
     bottom: "6px",
     width: "2px",
     background: "var(--figma-accent-primary, var(--figma-accent-primary))",
-    "border-radius": "1px",
+    "border-radius": "var(--figma-radius-sm)",
     opacity: props.isActive ? "1" : "0",
     transition: "opacity var(--figma-transition-fast, 100ms ease)",
   });
@@ -213,7 +213,7 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
     "font-family": "var(--figma-font-sans, Inter, sans-serif)",
     "font-size": "9px",
     "font-weight": "600",
-    "border-radius": "7px",
+    "border-radius": "var(--figma-radius-md)",
     "line-height": "1",
   });
 
diff --git a/cortex-gui/src/components/figma/FigmaChangesPanel.tsx b/cortex-gui/src/components/figma/FigmaChangesPanel.tsx
@@ -69,7 +69,7 @@ export const FigmaChangesPanel: Component<FigmaChangesPanelProps> = (props) => {
   const tabCountStyle = (): JSX.CSSProperties => ({
     "font-size": "11px",
     background: "var(--figma-accent-primary)",
-    color: "#000",
+    color: "var(--figma-text-primary)",
     padding: "1px 5px",
     "border-radius": "var(--figma-radius-md)",
     "font-weight": "500",
diff --git a/cortex-gui/src/components/figma/FigmaConversationView.tsx b/cortex-gui/src/components/figma/FigmaConversationView.tsx
@@ -120,7 +120,7 @@ export const FigmaConversationView: Component<FigmaConversationViewProps> = (pro
     "font-family": "'Inter', sans-serif",
     "font-size": "12px",
     "font-weight": "500",
-    color: "#000",
+    color: "var(--figma-text-primary)",
     cursor: "pointer",
     display: "flex",
     "align-items": "center",
diff --git a/cortex-gui/src/components/figma/FigmaDesktopLayout.tsx b/cortex-gui/src/components/figma/FigmaDesktopLayout.tsx
@@ -160,7 +160,7 @@ function EmptyExplorer(props: { onOpenFolder: () => void }) {
           "font-family": "'Inter', sans-serif",
           "font-size": "13px",
           "font-weight": "500",
-          color: "#000",
+          color: "var(--figma-text-primary)",
           cursor: "pointer",
         }}
       >
diff --git a/cortex-gui/src/components/settings/ArraySettingWidget.tsx b/cortex-gui/src/components/settings/ArraySettingWidget.tsx
@@ -454,7 +454,7 @@ function ArrayItem(props: ArrayItemProps) {
                 border: "none",
                 "border-radius": tokens.radius.sm,
                 cursor: "pointer",
-                color: "#fff",
+                color: "var(--figma-text-primary)",
               }}
               title="Save (Enter)"
             >
diff --git a/cortex-gui/src/components/settings/IconThemeSelector.tsx b/cortex-gui/src/components/settings/IconThemeSelector.tsx
@@ -150,7 +150,7 @@ function ThemeCard(props: ThemeCardProps) {
             "justify-content": "center",
           }}
         >
-          <Icon name="check" style={{ width: "12px", height: "12px", color: "#fff" }} />
+          <Icon name="check" style={{ width: "12px", height: "12px", color: "var(--figma-text-primary)" }} />
         </div>
       </Show>
 
diff --git a/cortex-gui/src/components/settings/ThemePreview.tsx b/cortex-gui/src/components/settings/ThemePreview.tsx
@@ -369,7 +369,7 @@ function ThemeCard(props: ThemeCardProps) {
               width: "20px",
               height: "20px",
               background: "var(--jb-btn-primary-bg)",
-              color: "#fff",
+              color: "var(--figma-text-primary)",
               "border-radius": "var(--figma-radius-full)",
               "margin-left": "auto",
             }}>
@@ -392,14 +392,14 @@ function ThemeCard(props: ThemeCardProps) {
           gap: "6px",
           padding: "6px 12px",
           background: "var(--cortex-accent)",
-          color: "#fff",
+          color: "var(--figma-text-primary)",
           "font-size": "12px",
           "font-weight": "500",
         }}>
           <span style={{
             width: "6px",
             height: "6px",
-            background: "#fff",
+            background: "var(--figma-bg-primary)",
             "border-radius": "var(--figma-radius-full)",
             animation: "blink 1s ease-in-out infinite",
           }} />
diff --git a/cortex-gui/src/components/terminal/ShellIntegrationDecorations.tsx b/cortex-gui/src/components/terminal/ShellIntegrationDecorations.tsx
@@ -594,7 +594,7 @@ export const ShellIntegrationDecorations: Component<ShellIntegrationDecorationsP
                       width: "8px",
                       height: "4px",
                       "background-color": entry.decoration.color,
-                      "border-radius": "1px",
+                      "border-radius": "var(--figma-radius-sm)",
                       cursor: "pointer",
                       "pointer-events": "auto",
                     }}
diff --git a/cortex-gui/src/components/terminal/TerminalSplitPanel.tsx b/cortex-gui/src/components/terminal/TerminalSplitPanel.tsx
@@ -632,7 +632,7 @@ export function TerminalSplitPanel(props: TerminalSplitPanelProps) {
                 background: tokens.colors.accent.primary,
                 border: "none",
                 "border-radius": tokens.radius.md,
-                color: "#fff",
+                color: "var(--figma-text-primary)",
                 cursor: "pointer",
                 "font-size": "13px",
               }}
diff --git a/cortex-gui/src/components/terminal/TerminalSplitView.tsx b/cortex-gui/src/components/terminal/TerminalSplitView.tsx
@@ -159,7 +159,7 @@ function Sash(props: SashProps) {
       ? tokens.colors.accent.primary
       : tokens.colors.border.default,
     transition: "background 150ms ease",
-    "border-radius": "1px",
+    "border-radius": "var(--figma-radius-sm)",
   });
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -506,7 +506,7 @@ export function OpenWithMenu(props: OpenWithMenuProps) {`
`506`	`506`	`}}`
`507`	`507`	`>`
`508`	`508`	`<Show when={rememberChoice()}>`
`509`		`- <Icon name="check" size={10} style={{ color: "#fff" }} />`
	`509`	`+ <Icon name="check" size={10} style={{ color: "var(--figma-text-primary)" }} />`
`510`	`510`	`</Show>`
`511`	`511`	`</span>`
`512`	`512`
Original file line number	Diff line number	Diff line change
`@@ -202,7 +202,7 @@ export function SystemSpecsDialog(props: SystemSpecsDialogProps) {`
`202`	`202`	`<button`
`203`	`203`	`onClick={props.onClose}`
`204`	`204`	`class="w-8 h-8 flex items-center justify-center rounded-lg transition-colors"`
`205`		`- style={{ color: "#888" }}`
	`205`	`+ style={{ color: "var(--figma-text-inactive)" }}`
`206`	`206`	`onMouseEnter={(e) => e.currentTarget.style.background = "var(--ui-panel-bg-lighter)"}`
`207`	`207`	`onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}`
`208`	`208`	`>`