From 87ed15849ca39a2f371c5e7b2d0039c76b9195cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 30 Jan 2026 15:00:14 +0100
Subject: [PATCH 1/2] style(code-editor):  code editor tokenization and
 light/dark mode compatibiliy

---
 .../components/code-editor/code-editor.scss   | 95 ++++++++++++++++++-
 .../code-editor/code-editor.stories.tsx       |  2 +-
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/code-editor/code-editor.scss b/libs/shared/ui/src/lib/components/code-editor/code-editor.scss
index d0c5fac05e9..39dc6bea4df 100644
--- a/libs/shared/ui/src/lib/components/code-editor/code-editor.scss
+++ b/libs/shared/ui/src/lib/components/code-editor/code-editor.scss
@@ -1,3 +1,97 @@
+// Monaco base values
+.monaco-editor {
+  background-color: var(--neutral-1) !important;
+  color: var(--neutral-12) !important;
+}
+
+.monaco-editor .margin,
+.monaco-editor .sticky-widget-line-numbers,
+.monaco-editor .sticky-widget-lines-scrollable {
+  background-color: var(--neutral-1) !important;
+}
+
+.monaco-editor .sticky-widget {
+  box-shadow: 0 4px 2px -2px var(--background-1) !important;
+  border-bottom: 1px solid var(--neutral-6) !important;
+}
+
+.monaco-editor .scroll-decoration {
+  box-shadow: 0 6px 6px -6px inset var(--background-1) !important;
+}
+
+.monaco-editor .monaco-editor-background {
+  background-color: var(--neutral-1);
+}
+
+.monaco-editor .line-numbers,
+.monaco-editor .sticky-line-number-inner {
+  color: var(--neutral-11) !important;
+}
+
+.monaco-editor .line-numbers.active-line-number {
+  color: var(--neutral-12) !important;
+}
+
+.monaco-editor .mtk22 {
+  color: var(--accent-11);
+}
+
+.monaco-editor .mtk22 {
+  color: var(--accent-11);
+}
+
+.monaco-editor .mtk5 {
+  color: var(--info-11);
+}
+
+.monaco-editor .mtk1 {
+  color: var(--neutral-11);
+}
+
+.monaco-editor .lines-content .core-guide-indent {
+  box-shadow: 1px 0 0 0 var(--neutral-6) !important;
+}
+
+.monaco-editor .lines-content .core-guide-indent.indent-active {
+  box-shadow: 1px 0 0 0 var(--neutral-8) !important;
+}
+
+.monaco-editor .view-overlays .current-line-exact {
+  border: 2px solid var(--neutral-6) !important;
+}
+
+.monaco-editor .cursors-layer .cursor {
+  background-color: var(--neutral-11) !important; /* block caret */
+}
+
+.monaco-editor .selected-text {
+  background-color: var(--neutral-2) !important; /* no alpha */
+}
+
+.monaco-editor .selectionHighlight {
+  background-color: var(--neutral-1) !important;
+}
+
+.monaco-editor .selectionHighlight {
+  background-color: var(--neutral-1) !important;
+}
+
+.monaco-editor .wordHighlightStrong {
+  background-color: var(--neutral-1) !important;
+}
+
+.monaco-editor .codicon-folding-expanded {
+  color: var(--neutral-11) !important;
+}
+
+.monaco-editor .codicon-folding-expanded:hover {
+  color: var(--neutral-12) !important;
+}
+
+.monaco-editor .folded-background {
+  background-color: var(--info-3) !important;
+}
+
 // Audit logs simple editor
 .audit-logs-simple-code-editor > .monaco-editor,
 .audit-logs-failed-code-editor > .monaco-editor {
@@ -34,7 +128,6 @@
   }
 
   // JSON attributes + ':'
-  .mtk1,
   .mtk20 {
     color: #0d74ce !important;
   }
diff --git a/libs/shared/ui/src/lib/components/code-editor/code-editor.stories.tsx b/libs/shared/ui/src/lib/components/code-editor/code-editor.stories.tsx
index e375ea9dd32..3133d2aa531 100644
--- a/libs/shared/ui/src/lib/components/code-editor/code-editor.stories.tsx
+++ b/libs/shared/ui/src/lib/components/code-editor/code-editor.stories.tsx
@@ -24,7 +24,7 @@ const Story: Meta<typeof CodeEditor> = {
   title: 'CodeEditor',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),

From e3e356e8b4fd1ff64d7fd9d4724ed4f3281b7421 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 30 Jan 2026 15:13:51 +0100
Subject: [PATCH 2/2] style(code-editor): refactor + formatting

---
 .../page-settings-resources-feature.tsx             |  5 +----
 .../feature/src/lib/spotlight/spotlight.tsx         |  2 +-
 .../src/lib/components/code-editor/code-editor.scss | 13 +------------
 3 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx b/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx
index 58a2e865dde..f595acb5063 100644
--- a/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx
+++ b/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx
@@ -13,10 +13,7 @@ import {
   useEditCluster,
   useUpdateKarpenterPrivateFargate,
 } from '@qovery/domains/clusters/feature'
-import {
-  type ClusterResourcesEdit,
-  type SCWControlPlaneFeatureType,
-} from '@qovery/shared/interfaces'
+import { type ClusterResourcesEdit, type SCWControlPlaneFeatureType } from '@qovery/shared/interfaces'
 import { useModal } from '@qovery/shared/ui'
 import { PageSettingsResources } from '../../ui/page-settings-resources/page-settings-resources'
 
diff --git a/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx b/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx
index bfd052d2f6c..d91ff7a4d0e 100644
--- a/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx
+++ b/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx
@@ -263,7 +263,7 @@ export function Spotlight({ organizationId, open, onOpenChange }: SpotlightProps
       className="bg-surface-neutral-subtle"
       loop
     >
-      <div className="outline-neutral rounded-lg bg-surface-neutral outline outline-[1px]">
+      <div className="rounded-lg bg-surface-neutral outline outline-[1px] outline-neutral">
         <div className="flex w-full items-center border-b border-neutral pl-4 text-base text-neutral-subtle">
           <Icon iconName="magnifying-glass" iconStyle="regular" />
           <Command.Input
diff --git a/libs/shared/ui/src/lib/components/code-editor/code-editor.scss b/libs/shared/ui/src/lib/components/code-editor/code-editor.scss
index 39dc6bea4df..b203dd91a66 100644
--- a/libs/shared/ui/src/lib/components/code-editor/code-editor.scss
+++ b/libs/shared/ui/src/lib/components/code-editor/code-editor.scss
@@ -36,10 +36,6 @@
   color: var(--accent-11);
 }
 
-.monaco-editor .mtk22 {
-  color: var(--accent-11);
-}
-
 .monaco-editor .mtk5 {
   color: var(--info-11);
 }
@@ -68,14 +64,7 @@
   background-color: var(--neutral-2) !important; /* no alpha */
 }
 
-.monaco-editor .selectionHighlight {
-  background-color: var(--neutral-1) !important;
-}
-
-.monaco-editor .selectionHighlight {
-  background-color: var(--neutral-1) !important;
-}
-
+.monaco-editor .selectionHighlight,
 .monaco-editor .wordHighlightStrong {
   background-color: var(--neutral-1) !important;
 }