Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Commit 02a0898

Browse files
sourcegraph-release-bot0xnmn
sourcegraph-release-bot
and
0xnmn
authored
[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&#39;t satisfy the design requirements and do not use the css variable so we couldn&#39;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 <naman@outlook.in>
1 parent 614ca63 commit 02a0898

File tree

2 files changed

+175
-14
lines changed

2 files changed

+175
-14
lines changed

‎client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte‎

Lines changed: 88 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script context="module" lang="ts">
2-
function getTelemetrySourceClient(): string {
3-
if (window.context?.sourcegraphDotComMode) {
4-
return 'dotcom.web'
5-
}
6-
return 'server.web'
7-
}
2+
function getTelemetrySourceClient(): string {
3+
if (window.context?.sourcegraphDotComMode) {
4+
return "dotcom.web";
5+
}
6+
return "server.web";
7+
}
88
</script>
99

1010
<script lang="ts">
@@ -96,16 +96,26 @@
9696
--mention-color-opacity: 100%;
9797
9898
// LLM picker tokens
99-
--vscode-quickInput-background: var(--dropdown-bg);
99+
--vscode-quickInput-background: var(--body-bg);
100100
--vscode-dropdown-border: var(--border-color);
101101
--vscode-dropdown-foreground: var(--body-color);
102102
--vscode-foreground: var(--body-color);
103+
--vscode-list-activeSelectionBackground: #e8f7ff;
104+
--vscode-list-activeSelectionForeground: var(--primary);
105+
--vscode-input-placeholderForeground: var(--body-color);
106+
--vscode-button-foreground: var(--body-color);
107+
--vscode-keybindingLabel-background: transparent;
108+
--vscode-keybindingLabel-foreground: var(--body-color);
103109
104110
line-height: 1.55;
105111
padding-bottom: 2rem;
106112
flex: 1;
107113
min-height: 0;
108114
115+
:global(button) {
116+
opacity: 1;
117+
}
118+
109119
:global(h3),
110120
:global(h4) {
111121
font-size: inherit;
@@ -157,10 +167,71 @@
157167
:global([cmdk-root] input:focus-visible) {
158168
box-shadow: unset !important;
159169
}
170+
171+
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
172+
// the design requirements. Hence here we are overriding the button
173+
// styles here to fix them.
174+
:global(button:has(h4)),
175+
:global([cmdk-root] a) {
176+
background-color: transparent;
177+
color: var(--body-color);
178+
padding: 2px 4px;
179+
180+
&:hover {
181+
color: #181b26;
182+
background-color: #eff2f5;
183+
}
184+
185+
&:active {
186+
color: #1c7ed6;
187+
background-color: #e8f7ff;
188+
}
189+
190+
&:disabled {
191+
color: #798baf;
192+
background-color: #798baf;
193+
}
194+
195+
&:focus {
196+
color: #181b26;
197+
background: transparent;
198+
box-shadow: 0 0 0 2px #a3d0ff;
199+
}
200+
}
201+
:global(.theme-dark) & {
202+
--vscode-list-activeSelectionBackground: #031824;
203+
204+
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
205+
// the design requirements. Hence here we are overriding the button
206+
// styles here to fix them.
207+
:global(button:has(h4)),
208+
:global([cmdk-root] a) {
209+
&:hover {
210+
color: #e6ebf2;
211+
background-color: #14171f;
212+
}
213+
214+
&:active {
215+
color: #1c7ed6;
216+
background-color: #031824;
217+
}
218+
219+
&:disabled {
220+
color: #5e6e8c;
221+
background-color: #0f111a;
222+
}
223+
224+
&:focus {
225+
color: #e6ebf2;
226+
background: transparent;
227+
box-shadow: 0 0 0 2px #0b4c90;
228+
}
229+
}
230+
}
160231
}
161232
162233
:global([data-floating-ui-portal]) {
163-
--vscode-quickInput-background: var(--secondary-2);
234+
--vscode-quickInput-background: var(--body-bg);
164235
--vscode-widget-border: var(--border-color);
165236
--vscode-list-activeSelectionBackground: var(--primary);
166237
--vscode-foreground: var(--body-color);
@@ -169,4 +240,13 @@
169240
// Which causes glitch effect in Cody Web
170241
--vscode-sideBar-background: transparent;
171242
}
243+
244+
:global([cmdk-root]) {
245+
--vscode-list-activeSelectionBackground: #e8f7ff;
246+
--vscode-list-activeSelectionForeground: var(--primary);
247+
248+
:global(.theme-dark) & {
249+
--vscode-list-activeSelectionBackground: #031824;
250+
}
251+
}
172252
</style>

‎client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss‎

Lines changed: 87 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,24 @@
1717
--mention-color-opacity: 100%;
1818

1919
// LLM picker tokens
20-
--vscode-quickInput-background: var(--dropdown-bg);
20+
--vscode-quickInput-background: var(--search-box-color);
2121
--vscode-dropdown-border: var(--border-color);
2222
--vscode-dropdown-foreground: var(--body-color);
2323
--vscode-foreground: var(--body-color);
24+
--vscode-list-activeSelectionBackground: #e8f7ff;
25+
--vscode-list-activeSelectionForeground: var(--primary);
26+
--vscode-input-placeholderForeground: var(--body-color);
27+
--vscode-button-foreground: var(--body-color);
28+
--vscode-keybindingLabel-background: transparent;
29+
--vscode-keybindingLabel-foreground: var(--body-color);
2430

2531
line-height: 1.55;
2632
padding-bottom: 2rem;
2733

34+
button {
35+
opacity: 1;
36+
}
37+
2838
h3,
2939
h4 {
3040
font-size: inherit;
@@ -63,16 +73,87 @@
6373
:global(.tw-transition-all) {
6474
animation: none !important;
6575
}
76+
77+
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
78+
// the design requirements. Hence here we are overriding the button
79+
// styles here to fix them.
80+
button:has(h4),
81+
[cmdk-root] a {
82+
background-color: transparent;
83+
color: var(--body-color);
84+
// stylelint-disable-next-line declaration-property-unit-allowed-list
85+
padding: 0.125rem 0.25rem;
86+
87+
&:hover {
88+
color: #181b26;
89+
background-color: #eff2f5;
90+
}
91+
92+
&:active {
93+
color: #1c7ed6;
94+
background-color: #e8f7ff;
95+
}
96+
97+
&:disabled {
98+
color: #798baf;
99+
background-color: #798baf;
100+
}
101+
102+
&:focus {
103+
color: #181b26;
104+
background: transparent;
105+
box-shadow: 0 0 0 2px #a3d0ff;
106+
}
107+
}
108+
}
109+
110+
[cmdk-root] :global(.focus-visible) {
111+
box-shadow: unset !important;
112+
}
113+
114+
[cmdk-root] {
115+
--vscode-list-activeSelectionBackground: #e8f7ff;
116+
--vscode-list-activeSelectionForeground: var(--primary);
117+
}
118+
119+
:global(.theme-dark) {
120+
.chat,
121+
[cmdk-root] {
122+
--vscode-list-activeSelectionBackground: #031824;
123+
}
124+
125+
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
126+
// the design requirements. Hence here we are overriding the button
127+
// styles here to fix them.
128+
button:has(h4),
129+
[cmdk-root] a {
130+
&:hover {
131+
color: #e6ebf2;
132+
background-color: #14171f;
133+
}
134+
135+
&:active {
136+
color: #1c7ed6;
137+
background-color: #031824;
138+
}
139+
140+
&:disabled {
141+
color: #5e6e8c;
142+
background-color: #0f111a;
143+
}
144+
145+
&:focus {
146+
color: #e6ebf2;
147+
background: transparent;
148+
box-shadow: 0 0 0 2px #0b4c90;
149+
}
150+
}
66151
}
67152

68153
[data-floating-ui-portal] {
69-
--vscode-quickInput-background: var(--secondary-2);
154+
--vscode-quickInput-background: var(--search-box-color);
70155
--vscode-widget-border: var(--border-color);
71156
--vscode-list-activeSelectionBackground: var(--primary);
72157
--vscode-foreground: var(--body-color);
73158
--vscode-widget-shadow: rgba(36, 41, 54, 0.2);
74159
}
75-
76-
[cmdk-root] :global(.focus-visible) {
77-
box-shadow: unset !important;
78-
}

0 commit comments

Comments
 (0)