feat: apply Figma syntax highlighting colors to Monaco editor

Author: Factory Bot

cortex-gui/src/context/ThemeContext.tsx

@@ -184,22 +184,22 @@ const lightColors: ThemeColors = {
   borderActive: "#d4d4d8",
 };
 
-// JetBrains Dark Editor Colors
+// Figma Design Editor Colors
 const darkEditorColors: EditorColors = {
-  editorBackground: "#18181a",
-  editorForeground: "#D8DEE9",
-  editorLineHighlight: "#292929",
-  editorSelectionBackground: "#40404099",
-  editorSelectionForeground: "#ffffff",
+  editorBackground: "#1A1B1F",            // Figma card background
+  editorForeground: "#FFFFFF",            // White text
+  editorLineHighlight: "rgba(255,255,255,0.05)",
+  editorSelectionBackground: "rgba(255,255,255,0.15)",
+  editorSelectionForeground: "#FFFFFF",
   editorCursor: "#FFFFFF",
-  editorWhitespace: "#505050B3",
-  editorIndentGuide: "#404040B3",
-  editorIndentGuideActive: "#505050",
-  editorLineNumber: "#505050",
+  editorWhitespace: "rgba(255,255,255,0.1)",
+  editorIndentGuide: "rgba(255,255,255,0.05)",
+  editorIndentGuideActive: "rgba(255,255,255,0.1)",
+  editorLineNumber: "rgba(255,255,255,0.5)",  // Figma line numbers
   editorLineNumberActive: "#FFFFFF",
-  editorRuler: "#494949",
-  editorGutter: "#1a1a1a",
-  editorFoldBackground: "#292929",
+  editorRuler: "rgba(255,255,255,0.1)",
+  editorGutter: "#1A1B1F",
+  editorFoldBackground: "rgba(255,255,255,0.05)",
 };
 
 const lightEditorColors: EditorColors = {
@@ -219,25 +219,26 @@ const lightEditorColors: EditorColors = {
   editorFoldBackground: "#f4f4f5",
 };
 
+// Figma Design Exact Syntax Colors
 const darkSyntaxColors: SyntaxColors = {
-  comment: "#6b7280",
-  string: "#86efac",
-  number: "#fcd34d",
-  keyword: "#c4b5fd",
-  operator: "#e4e4e7",
-  function: "#93c5fd",
-  variable: "#f0abfc",
-  type: "#67e8f9",
-  class: "#fbbf24",
-  constant: "#fb923c",
-  parameter: "#fdba74",
-  property: "#a5b4fc",
-  punctuation: "#a1a1aa",
-  tag: "#f472b6",
-  attribute: "#67e8f9",
-  regexp: "#f87171",
-  escape: "#fbbf24",
-  invalid: "#ef4444",
+  comment: "rgba(255,255,255,0.5)",  // Line numbers, comments
+  string: "#8EFF96",                  // Strings, template literals
+  number: "#8EFF96",                  // Numbers
+  keyword: "#FEAB78",                 // const, typeof, if, false, true
+  operator: "#FFFFFF",                // =, ===, &&, ||
+  function: "#66BFFF",                // useTranslation, useState, Object.keys
+  variable: "#FFFFFF",                // Default text
+  type: "#FEAB78",                    // <boolean>, type annotations
+  class: "#66BFFF",                   // Class names
+  constant: "#FEAB78",                // false, true, null
+  parameter: "#FFFFFF",               // Function parameters
+  property: "#FFB7FA",                // .length, .household, .members
+  punctuation: "#FFFFFF",             // (), {}, []
+  tag: "#FEAB78",                     // JSX tags
+  attribute: "#FFB7FA",               // JSX attributes
+  regexp: "#8EFF96",                  // Regular expressions
+  escape: "#FEAB78",                  // Escape sequences
+  invalid: "#ef4444",                 // Invalid code
 };
 
 const lightSyntaxColors: SyntaxColors = {

cortex-gui/src/styles/figma-tokens.css

@@ -501,18 +501,23 @@
   --figma-skeleton-highlight: var(--figma-bg-hover);
 
   /* ===========================================================================
-     CODE/SYNTAX HIGHLIGHTING
+     CODE/SYNTAX HIGHLIGHTING - Figma Design Exact Colors
      =========================================================================== */
-  --figma-syntax-keyword: #FF79C6;
-  --figma-syntax-string: #50FA7B;
-  --figma-syntax-number: #BD93F9;
-  --figma-syntax-comment: #6272A4;
-  --figma-syntax-function: #8BE9FD;
-  --figma-syntax-variable: #F8F8F2;
-  --figma-syntax-type: #FFB86C;
-  --figma-syntax-constant: #BD93F9;
-  --figma-syntax-operator: #FF79C6;
-  --figma-syntax-bracket: #F8F8F2;
+  --figma-syntax-keyword: #FEAB78;        /* const, typeof, if, false, true */
+  --figma-syntax-string: #8EFF96;         /* "object", template literals, numbers */
+  --figma-syntax-number: #8EFF96;         /* 0, 1, numeric values */
+  --figma-syntax-comment: rgba(255,255,255,0.5);  /* Comments, line numbers */
+  --figma-syntax-function: #66BFFF;       /* useTranslation, useState, Object.keys */
+  --figma-syntax-variable: #FFFFFF;       /* Default text, variables */
+  --figma-syntax-type: #FEAB78;           /* <boolean>, type annotations */
+  --figma-syntax-constant: #FEAB78;       /* false, true, null */
+  --figma-syntax-operator: #FFFFFF;       /* =, ===, &&, || */
+  --figma-syntax-bracket: #FFFFFF;        /* (), {}, [] */
+  --figma-syntax-property: #FFB7FA;       /* .length, .household, .members */
+  --figma-syntax-parameter: #FFFFFF;      /* Function parameters */
+  --figma-syntax-line-number: rgba(255,255,255,0.5);
+  --figma-syntax-type-hint-bg: rgba(255,255,255,0.05);
+  --figma-syntax-type-hint-text: rgba(255,255,255,0.5);
 }
 
 /* ===========================================================================