[Backport 5.6.x] Fix Cody Web CSS (#64373)

closes: https://linear.app/sourcegraph/issue/SRCH-866/improve-cody-web-theming-for-consistency-with-rest-of-product This PR updates the Cody Web CSS based on the changes requested by @rrhyne. Few buttons implemented in Cody doesn't satisfy the design requirements and do not use the css variable so we couldn't update them easily but rather had to override the styles. ## Test plan Before: ![CleanShot 2024-08-08 at 22 53 48@2x](https://github.com/user-attachments/assets/95e10b42-b740-4663-a761-69449ec62296) After: ![CleanShot 2024-08-08 at 22 54 12@2x](https://github.com/user-attachments/assets/bffbd10a-c87b-4eca-9582-b23eebccb60e) ## Changelog - Make Cody Web styles more accessible. <br> Backport 2dd38b3 from #64370 Co-authored-by: Naman Kumar <[email protected]>
sourcegraph · Aug 8, 2024 · 02a0898 · 02a0898
1 parent 614ca63
commit 02a0898
Show file tree

Hide file tree

Showing 2 changed files with 175 additions and 14 deletions.
diff --git a/client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte b/client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte
@@ -1,10 +1,10 @@
 <script context="module" lang="ts">
-    function getTelemetrySourceClient(): string {
-        if (window.context?.sourcegraphDotComMode) {
-            return 'dotcom.web'
-        }
-        return 'server.web'
-    }
+function getTelemetrySourceClient(): string {
+	if (window.context?.sourcegraphDotComMode) {
+		return "dotcom.web";
+	}
+	return "server.web";
+}
 </script>
 
 <script lang="ts">
@@ -96,16 +96,26 @@
         --mention-color-opacity: 100%;
 
         // LLM picker tokens
-        --vscode-quickInput-background: var(--dropdown-bg);
+        --vscode-quickInput-background: var(--body-bg);
         --vscode-dropdown-border: var(--border-color);
         --vscode-dropdown-foreground: var(--body-color);
         --vscode-foreground: var(--body-color);
+        --vscode-list-activeSelectionBackground: #e8f7ff;
+        --vscode-list-activeSelectionForeground: var(--primary);
+        --vscode-input-placeholderForeground: var(--body-color);
+        --vscode-button-foreground: var(--body-color);
+        --vscode-keybindingLabel-background: transparent;
+        --vscode-keybindingLabel-foreground: var(--body-color);
 
         line-height: 1.55;
         padding-bottom: 2rem;
         flex: 1;
         min-height: 0;
 
+        :global(button) {
+            opacity: 1;
+        }
+
         :global(h3),
         :global(h4) {
             font-size: inherit;
@@ -157,10 +167,71 @@
         :global([cmdk-root] input:focus-visible) {
             box-shadow: unset !important;
         }
+
+        // As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
+        // the design requirements. Hence here we are overriding the button
+        // styles here to fix them.
+        :global(button:has(h4)),
+        :global([cmdk-root] a) {
+            background-color: transparent;
+            color: var(--body-color);
+            padding: 2px 4px;
+
+            &:hover {
+                color: #181b26;
+                background-color: #eff2f5;
+            }
+
+            &:active {
+                color: #1c7ed6;
+                background-color: #e8f7ff;
+            }
+
+            &:disabled {
+                color: #798baf;
+                background-color: #798baf;
+            }
+
+            &:focus {
+                color: #181b26;
+                background: transparent;
+                box-shadow: 0 0 0 2px #a3d0ff;
+            }
+        }
+        :global(.theme-dark) & {
+            --vscode-list-activeSelectionBackground: #031824;
+
+            // As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
+            // the design requirements. Hence here we are overriding the button
+            // styles here to fix them.
+            :global(button:has(h4)),
+            :global([cmdk-root] a) {
+                &:hover {
+                    color: #e6ebf2;
+                    background-color: #14171f;
+                }
+
+                &:active {
+                    color: #1c7ed6;
+                    background-color: #031824;
+                }
+
+                &:disabled {
+                    color: #5e6e8c;
+                    background-color: #0f111a;
+                }
+
+                &:focus {
+                    color: #e6ebf2;
+                    background: transparent;
+                    box-shadow: 0 0 0 2px #0b4c90;
+                }
+            }
+        }
     }
 
     :global([data-floating-ui-portal]) {
-        --vscode-quickInput-background: var(--secondary-2);
+        --vscode-quickInput-background: var(--body-bg);
         --vscode-widget-border: var(--border-color);
         --vscode-list-activeSelectionBackground: var(--primary);
         --vscode-foreground: var(--body-color);
@@ -169,4 +240,13 @@
         // Which causes glitch effect in Cody Web
         --vscode-sideBar-background: transparent;
     }
+
+    :global([cmdk-root]) {
+        --vscode-list-activeSelectionBackground: #e8f7ff;
+        --vscode-list-activeSelectionForeground: var(--primary);
+
+        :global(.theme-dark) & {
+            --vscode-list-activeSelectionBackground: #031824;
+        }
+    }
 </style>
diff --git a/client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss b/client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss
@@ -17,14 +17,24 @@
     --mention-color-opacity: 100%;
 
     // LLM picker tokens
-    --vscode-quickInput-background: var(--dropdown-bg);
+    --vscode-quickInput-background: var(--search-box-color);
     --vscode-dropdown-border: var(--border-color);
     --vscode-dropdown-foreground: var(--body-color);
     --vscode-foreground: var(--body-color);
+    --vscode-list-activeSelectionBackground: #e8f7ff;
+    --vscode-list-activeSelectionForeground: var(--primary);
+    --vscode-input-placeholderForeground: var(--body-color);
+    --vscode-button-foreground: var(--body-color);
+    --vscode-keybindingLabel-background: transparent;
+    --vscode-keybindingLabel-foreground: var(--body-color);
 
     line-height: 1.55;
     padding-bottom: 2rem;
 
+    button {
+        opacity: 1;
+    }
+
     h3,
     h4 {
         font-size: inherit;
@@ -63,16 +73,87 @@
     :global(.tw-transition-all) {
         animation: none !important;
     }
+
+    // As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
+    // the design requirements. Hence here we are overriding the button
+    // styles here to fix them.
+    button:has(h4),
+    [cmdk-root] a {
+        background-color: transparent;
+        color: var(--body-color);
+        // stylelint-disable-next-line declaration-property-unit-allowed-list
+        padding: 0.125rem 0.25rem;
+
+        &:hover {
+            color: #181b26;
+            background-color: #eff2f5;
+        }
+
+        &:active {
+            color: #1c7ed6;
+            background-color: #e8f7ff;
+        }
+
+        &:disabled {
+            color: #798baf;
+            background-color: #798baf;
+        }
+
+        &:focus {
+            color: #181b26;
+            background: transparent;
+            box-shadow: 0 0 0 2px #a3d0ff;
+        }
+    }
+}
+
+[cmdk-root] :global(.focus-visible) {
+    box-shadow: unset !important;
+}
+
+[cmdk-root] {
+    --vscode-list-activeSelectionBackground: #e8f7ff;
+    --vscode-list-activeSelectionForeground: var(--primary);
+}
+
+:global(.theme-dark) {
+    .chat,
+    [cmdk-root] {
+        --vscode-list-activeSelectionBackground: #031824;
+    }
+
+    // As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
+    // the design requirements. Hence here we are overriding the button
+    // styles here to fix them.
+    button:has(h4),
+    [cmdk-root] a {
+        &:hover {
+            color: #e6ebf2;
+            background-color: #14171f;
+        }
+
+        &:active {
+            color: #1c7ed6;
+            background-color: #031824;
+        }
+
+        &:disabled {
+            color: #5e6e8c;
+            background-color: #0f111a;
+        }
+
+        &:focus {
+            color: #e6ebf2;
+            background: transparent;
+            box-shadow: 0 0 0 2px #0b4c90;
+        }
+    }
 }
 
 [data-floating-ui-portal] {
-    --vscode-quickInput-background: var(--secondary-2);
+    --vscode-quickInput-background: var(--search-box-color);
     --vscode-widget-border: var(--border-color);
     --vscode-list-activeSelectionBackground: var(--primary);
     --vscode-foreground: var(--body-color);
     --vscode-widget-shadow: rgba(36, 41, 54, 0.2);
 }
-
-[cmdk-root] :global(.focus-visible) {
-    box-shadow: unset !important;
-}