Skip to content

Commit eec9ac4

Browse files
aboseabose
committed
fix(styles): use shared font-size variables for AI chat panel consistency
Add sidebar-scoped font-size variables to brackets_variables.less and replace all hardcoded pixel values in the AI chat panel. Bumps sizes by 1px across the board to align with the file tree and other sidebar UI.
1 parent d7ea2fb commit eec9ac4

2 files changed

Lines changed: 36 additions & 33 deletions

File tree

‎src/styles/Extn-AIChatPanel.less‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
overflow: hidden;
2929
background-color: @bc-sidebar-bg;
3030
color: @project-panel-text-1;
31-
font-size: 13px;
31+
font-size: @sidebar-content-font-size;
3232
}
3333

3434
/* ── Header ─────────────────────────────────────────────────────────── */
@@ -84,15 +84,15 @@
8484
max-width: 100%;
8585

8686
.ai-msg-label {
87-
font-size: 11px;
87+
font-size: @sidebar-xs-font-size;
8888
color: @project-panel-text-2;
8989
margin-bottom: 3px;
9090
font-weight: 600;
9191
opacity: 0.6;
9292
}
9393

9494
.ai-msg-content {
95-
font-size: 13px;
95+
font-size: @sidebar-content-font-size;
9696
line-height: 1.55;
9797
white-space: normal;
9898
word-wrap: break-word;
@@ -152,7 +152,7 @@
152152
background-color: rgba(255, 255, 255, 0.08);
153153
padding: 1px 4px;
154154
border-radius: 3px;
155-
font-size: 12px;
155+
font-size: @sidebar-small-font-size;
156156
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
157157
}
158158

@@ -168,7 +168,7 @@
168168
background: none;
169169
padding: 0;
170170
border-radius: 0;
171-
font-size: 12px;
171+
font-size: @sidebar-small-font-size;
172172
line-height: 1.5;
173173
color: @project-panel-text-1;
174174
}
@@ -197,14 +197,14 @@
197197

198198
h1 { font-size: @label-font-size; margin: 12px 0 4px 0; }
199199
h2 { font-size: @menu-item-font-size; margin: 10px 0 4px 0; }
200-
h3 { font-size: 13px; margin: 8px 0 3px 0; }
201-
h4 { font-size: 13px; margin: 6px 0 2px 0; opacity: 0.85; }
200+
h3 { font-size: @sidebar-content-font-size; margin: 8px 0 3px 0; }
201+
h4 { font-size: @sidebar-content-font-size; margin: 6px 0 2px 0; opacity: 0.85; }
202202

203203
table {
204204
width: 100%;
205205
border-collapse: collapse;
206206
margin: 6px 0;
207-
font-size: 12px;
207+
font-size: @sidebar-small-font-size;
208208
}
209209

210210
th, td {
@@ -217,7 +217,7 @@
217217
font-weight: 600;
218218
color: @project-panel-text-2;
219219
border-bottom-color: rgba(255, 255, 255, 0.1);
220-
font-size: 11px;
220+
font-size: @sidebar-xs-font-size;
221221
text-transform: uppercase;
222222
letter-spacing: 0.3px;
223223
}
@@ -246,7 +246,7 @@
246246
}
247247

248248
.ai-tool-icon {
249-
font-size: 11px;
249+
font-size: @sidebar-xs-font-size;
250250
width: 14px;
251251
text-align: center;
252252
flex-shrink: 0;
@@ -264,7 +264,7 @@
264264
}
265265

266266
.ai-tool-label {
267-
font-size: 12px;
267+
font-size: @sidebar-small-font-size;
268268
color: @project-panel-text-2;
269269
line-height: 1.3;
270270

@@ -296,7 +296,7 @@
296296
}
297297

298298
.ai-tool-detail-line {
299-
font-size: 11px;
299+
font-size: @sidebar-xs-font-size;
300300
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
301301
color: @project-panel-text-2;
302302
opacity: 0.7;
@@ -306,7 +306,7 @@
306306
}
307307

308308
.ai-tool-preview {
309-
font-size: 11px;
309+
font-size: @sidebar-xs-font-size;
310310
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
311311
color: @project-panel-text-2;
312312
opacity: 0.5;
@@ -352,7 +352,7 @@
352352
.ai-tool-diff-toggle {
353353
background: none;
354354
border: none;
355-
font-size: 11px;
355+
font-size: @sidebar-xs-font-size;
356356
color: @project-panel-text-2;
357357
padding: 1px 4px;
358358
cursor: pointer;
@@ -367,7 +367,7 @@
367367
.ai-tool-diff {
368368
display: none;
369369
padding: 4px 8px 4px 28px;
370-
font-size: 12px;
370+
font-size: @sidebar-small-font-size;
371371
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
372372
line-height: 1.5;
373373
overflow-x: auto;
@@ -389,13 +389,13 @@
389389
}
390390

391391
.ai-tool-edit-error {
392-
font-size: 12px;
392+
font-size: @sidebar-small-font-size;
393393
color: #e88;
394394
padding: 3px 8px 3px 28px;
395395
}
396396

397397
.ai-tool-elapsed {
398-
font-size: 11px;
398+
font-size: @sidebar-xs-font-size;
399399
color: @project-panel-text-2;
400400
opacity: 0.5;
401401
margin-left: auto;
@@ -412,14 +412,14 @@
412412
align-items: flex-start;
413413
gap: 6px;
414414
padding: 2px 0;
415-
font-size: 12px;
415+
font-size: @sidebar-small-font-size;
416416
}
417417

418418
.ai-todo-icon {
419419
width: 14px;
420420
text-align: center;
421421
flex-shrink: 0;
422-
font-size: 11px;
422+
font-size: @sidebar-xs-font-size;
423423

424424
&.completed { color: #66bb6a; }
425425
&.in_progress { color: #e8a838; }
@@ -477,7 +477,7 @@
477477
display: flex;
478478
align-items: center;
479479
justify-content: space-between;
480-
font-size: 12px;
480+
font-size: @sidebar-small-font-size;
481481
font-weight: 600;
482482
color: @project-panel-text-2;
483483
margin-bottom: 4px;
@@ -487,7 +487,7 @@
487487
background: none;
488488
border: 1px solid rgba(200, 160, 80, 0.3);
489489
color: rgba(220, 180, 100, 0.9);
490-
font-size: 11px;
490+
font-size: @sidebar-xs-font-size;
491491
padding: 1px 8px;
492492
border-radius: 3px;
493493
cursor: pointer;
@@ -517,7 +517,7 @@
517517
}
518518

519519
.ai-edit-summary-name {
520-
font-size: 12px;
520+
font-size: @sidebar-small-font-size;
521521
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
522522
color: @project-panel-text-2;
523523
overflow: hidden;
@@ -535,7 +535,7 @@
535535
.ai-edit-summary-stats {
536536
display: flex;
537537
gap: 6px;
538-
font-size: 11px;
538+
font-size: @sidebar-xs-font-size;
539539
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
540540
flex-shrink: 0;
541541
}
@@ -561,7 +561,7 @@
561561
background: none;
562562
border: 1px dashed rgba(200, 160, 80, 0.3);
563563
color: rgba(220, 180, 100, 0.7);
564-
font-size: 11px;
564+
font-size: @sidebar-xs-font-size;
565565
padding: 2px 14px;
566566
border-radius: 3px;
567567
cursor: pointer;
@@ -611,7 +611,7 @@
611611
color: #e88;
612612
border-left: 2px solid rgba(255, 80, 80, 0.4);
613613
padding: 4px 8px;
614-
font-size: 12px;
614+
font-size: @sidebar-small-font-size;
615615
background-color: rgba(255, 80, 80, 0.04);
616616
border-radius: 0 3px 3px 0;
617617
}
@@ -623,7 +623,7 @@
623623
align-items: center;
624624
gap: 6px;
625625
padding: 4px 10px;
626-
font-size: 12px;
626+
font-size: @sidebar-small-font-size;
627627
color: @project-panel-text-2;
628628
flex-shrink: 0;
629629
opacity: 0.6;
@@ -681,7 +681,7 @@
681681
display: inline-flex;
682682
align-items: center;
683683
gap: 4px;
684-
font-size: 11px;
684+
font-size: @sidebar-xs-font-size;
685685
line-height: 1;
686686
padding: 3px 6px;
687687
border-radius: 3px;
@@ -708,7 +708,7 @@
708708
background: none;
709709
border: none;
710710
color: @project-panel-text-2;
711-
font-size: 12px;
711+
font-size: @sidebar-small-font-size;
712712
line-height: 1;
713713
padding: 0 0 0 2px;
714714
cursor: pointer;
@@ -736,7 +736,7 @@
736736
background: none;
737737
border: none !important;
738738
color: @project-panel-text-1;
739-
font-size: 13px;
739+
font-size: @sidebar-content-font-size;
740740
font-family: inherit;
741741
padding: 7px 0 7px 10px;
742742
margin: 0;
@@ -778,7 +778,7 @@
778778
}
779779

780780
i {
781-
font-size: 13px;
781+
font-size: @sidebar-content-font-size;
782782
}
783783
}
784784

@@ -802,7 +802,7 @@
802802
}
803803

804804
i {
805-
font-size: 13px;
805+
font-size: @sidebar-content-font-size;
806806
}
807807
}
808808
}
@@ -832,7 +832,7 @@
832832
}
833833

834834
.ai-unavailable-message {
835-
font-size: 12px;
835+
font-size: @sidebar-small-font-size;
836836
line-height: 1.5;
837837
margin-bottom: 12px;
838838
opacity: 0.6;
@@ -842,7 +842,7 @@
842842
background: none;
843843
border: 1px solid rgba(255, 255, 255, 0.12);
844844
color: @project-panel-text-2;
845-
font-size: 12px;
845+
font-size: @sidebar-small-font-size;
846846
padding: 3px 12px;
847847
border-radius: 3px;
848848
cursor: pointer;

‎src/styles/brackets_variables.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
@title-font-size: 18px; // headings such as the editor titlebar
3434
@label-font-size: 15px; // labels on buttons, menubar, etc.
3535
@menu-item-font-size: 14px; // individual menu items
36+
@sidebar-content-font-size: 13px; // body text in sidebar panels (e.g. AI chat)
37+
@sidebar-small-font-size: 12px; // secondary content, inline code, status text
38+
@sidebar-xs-font-size: 11px; // meta info, timestamps, chips
3639

3740
/* CSS triangles */
3841
@inline-triangle-size: 9px;

0 commit comments

Comments
 (0)