fix: light mode ui for doc editor and query panel (#1556)

Author: saravmajestic

webview_panels/.storybook/main.ts

@@ -13,6 +13,9 @@ const config: StorybookConfig = {
     name: "@storybook/react-vite",
     options: {},
   },
+  typescript: {
+    reactDocgen: false,
+  },
   core: {
     builder: "@storybook/builder-vite",
   },
@@ -25,9 +28,7 @@ const config: StorybookConfig = {
         "./__mocks__/vscode.ts"
       );
 
-      config.resolve.alias["crypto"] = require.resolve(
-        "./__mocks__/crypto.ts"
-      );
+      config.resolve.alias["crypto"] = require.resolve("./__mocks__/crypto.ts");
     }
     // Merge custom configuration into the default config
     return mergeConfig(config, {

webview_panels/src/modules/documentationEditor/styles.module.scss

@@ -277,6 +277,7 @@
           width: 100%;
           text-align: left;
           background-color: transparent;
+          color: var(--text-color--title);
         }
       }
     }

webview_panels/src/modules/queryPanel/components/queryLimit/styles.module.scss

@@ -5,7 +5,7 @@
 }
 
 .input {
-  background-color: var(--gray--gray-02);
+  background-color: var(--background--02);
   border: none;
   outline: none;
   max-width: 80px;
@@ -18,7 +18,7 @@
   &:focus {
     border: none;
     outline: none;
-    background-color: var(--gray--gray-02);
+    background-color: var(--background--02);
   }
 }
 
@@ -48,7 +48,7 @@
   align-items: center;
 
   .label {
-    padding: 0.25rem 0.75rem;
+    padding: 0.3rem 0.75rem;
     border: 1px solid var(--gray--gray-02);
     border-right: none;
     border-top-left-radius: 0.25rem;