feat: exposes editor-line-number-active-fg theme variable (#1833)

Fixes issue with active line number looking bad in light theme.

- Exposes editor-line-number-active-fg as editor semanatic variable
- Sets to blue/black in light theme to match vs code light theme
approach

Author: dsmmcken

packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css

@@ -3,7 +3,8 @@
   --dh-color-editor-bg: var(--dh-color-content-bg);
   --dh-color-editor-fg: var(--dh-color-gray-900);
   --dh-color-editor-error-fg: var(--dh-color-visual-red);
-  --dh-color-editor-line-number-fg: var(--dh-color-gray-700);
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-600);
+  --dh-color-editor-line-number-active-fg: var(--dh-color-gray-800);
   --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
   --dh-color-editor-selection-bg: var(--dh-color-text-highlight);
   --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-300);

packages/components/src/theme/theme-light/theme-light-semantic-editor.css

@@ -3,7 +3,8 @@
   --dh-color-editor-bg: var(--dh-color-content-bg);
   --dh-color-editor-fg: var(--dh-color-gray-900);
   --dh-color-editor-error-fg: var(--dh-color-visual-red);
-  --dh-color-editor-line-number-fg: var(--dh-color-gray-700);
+  --dh-color-editor-line-number-fg: var(--dh-color-cyan-1000);
+  --dh-color-editor-line-number-active-fg: var(--dh-color-gray-900);
   --dh-color-editor-line-highlight-bg: var(--dh-color-gray-100);
   --dh-color-editor-selection-bg: var(--dh-color-text-highlight);
   --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-200);

packages/console/src/monaco/MonacoTheme.module.scss

@@ -42,6 +42,9 @@
 
   //editor
   editor-line-number-foreground: var(--dh-color-editor-line-number-fg);
+  editor-line-number-active-foreground: var(
+    --dh-color-editor-line-number-active-fg
+  );
   editor-selection-background: var(--dh-color-editor-selection-bg);
   editor-inactive-selection-background: var(
     --dh-color-editor-inactive-selection-bg

packages/console/src/monaco/MonacoUtils.ts

@@ -136,6 +136,8 @@ class MonacoUtils {
         MonacoTheme['editor-line-highlight-background'],
       'editorLineNumber.foreground':
         MonacoTheme['editor-line-number-foreground'],
+      'editorLineNumber.activeForeground':
+        MonacoTheme['editor-line-number-active-foreground'],
       'editor.selectionBackground': MonacoTheme['editor-selection-background'],
       'editor.inactiveSelectionBackground':
         MonacoTheme['editor-inactive-selection-background'],