Skip to content

Commit f8fa2d6

Browse files
ScottCarda-MSScottCarda-MS
authored
Sccarda/histogram style (#2850)
To avoid difficult to read graphics, this PR removes the variability in the histogram colors as VS Code theme changes, and replaces it with two themes, a light theme histogram for light VS Code themes and a dark theme histogram for dark VS Code themes. Individual components should no longer change unless changing the VS Code theme between these two categories. Light Themes: <img width="461" height="325" alt="Histogram Light Theme" src="https://github.com/user-attachments/assets/330e8daf-cd10-418f-9cea-bb9e39f64789" /> Dark Themes: <img width="470" height="335" alt="Histogram Dark Theme" src="https://github.com/user-attachments/assets/fa833d60-fec1-452e-97bf-7e2e99768f67" /> Also improves the ket label font to be more legible. Before: <img width="211" height="148" alt="Worse Ket Font" src="https://github.com/user-attachments/assets/b5f5edc6-0c4f-461d-bd10-406ba08fde01" /> After: <img width="215" height="153" alt="Better Ket Font" src="https://github.com/user-attachments/assets/68a8e7b9-314d-435d-98cb-f20051ba2332" />
1 parent 8a0c55e commit f8fa2d6

File tree

1 file changed

+84
-27
lines changed

1 file changed

+84
-27
lines changed

‎source/npm/qsharp/ux/qsharp-ux.css‎

Lines changed: 84 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,57 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
4848
--error-background-color: #ffe3e3;
4949
--warning-background-color: #fff6d7;
5050
--bar-selected-outline: #587ddd;
51+
52+
/* Histogram palette (light scheme by default; used when no VS Code theme is detected) */
53+
--qs-histogram-bg: #ffffff;
54+
--qs-histogram-border: #768f9c;
55+
--qs-histogram-bar-fill: #8ab8ff;
56+
--qs-histogram-bar-hover-stroke: #6b6b6b;
57+
--qs-histogram-bar-selected-fill: #b5c5f2;
58+
--qs-histogram-bar-selected-stroke: #587ddd;
59+
--qs-histogram-bar-label-fill: #202020;
60+
--qs-histogram-label-fill: #3b3b3b;
61+
--qs-histogram-hover-text-fill: #6b6b6b;
62+
--qs-histogram-menu-icon-stroke: #3b3b3b;
63+
--qs-histogram-menu-icon-fill: #ffffff;
64+
--qs-histogram-menu-box-fill: #ffffff;
65+
--qs-histogram-menu-box-stroke: #3b3b3b;
66+
--qs-histogram-menu-item-fill: #b7d5ff;
67+
--qs-histogram-menu-item-hover-fill: #9fc7ff;
68+
--qs-histogram-menu-item-stroke: #6b6b6b;
69+
--qs-histogram-menu-item-selected-fill: #6aa9ff;
70+
--qs-histogram-menu-text-fill: #202020;
71+
--qs-histogram-menu-separator-stroke: #6b6b6b;
72+
--qs-histogram-help-fill: #ffffff;
73+
--qs-histogram-help-stroke: #6b6b6b;
74+
--qs-histogram-help-text-fill: #202020;
75+
}
76+
77+
/* Histogram palette overrides for dark themes. */
78+
body[data-vscode-theme-kind="vscode-dark"],
79+
body[data-vscode-theme-kind="vscode-high-contrast"] {
80+
--qs-histogram-bg: #1e1e1e;
81+
--qs-histogram-border: #3c3c3c;
82+
--qs-histogram-bar-fill: #4aa3ff;
83+
--qs-histogram-bar-hover-stroke: #c5c5c5;
84+
--qs-histogram-bar-selected-fill: #ffd54f;
85+
--qs-histogram-bar-selected-stroke: #ffecb3;
86+
--qs-histogram-bar-label-fill: #ffffff;
87+
--qs-histogram-label-fill: #ffffff;
88+
--qs-histogram-hover-text-fill: #ffffff;
89+
--qs-histogram-menu-icon-stroke: #d4d4d4;
90+
--qs-histogram-menu-icon-fill: #1e1e1e;
91+
--qs-histogram-menu-box-fill: #252526;
92+
--qs-histogram-menu-box-stroke: #d4d4d4;
93+
--qs-histogram-menu-item-fill: #2d2d30;
94+
--qs-histogram-menu-item-hover-fill: #3e3e42;
95+
--qs-histogram-menu-item-stroke: #6b6b6b;
96+
--qs-histogram-menu-item-selected-fill: #094771;
97+
--qs-histogram-menu-text-fill: #ffffff;
98+
--qs-histogram-menu-separator-stroke: #6b6b6b;
99+
--qs-histogram-help-fill: #252526;
100+
--qs-histogram-help-stroke: #6b6b6b;
101+
--qs-histogram-help-text-fill: #ffffff;
51102
}
52103

53104
/* TODO: Make the below playground specific classes */
@@ -345,102 +396,108 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
345396
.histogram {
346397
max-height: calc(100vh - 40px);
347398
max-width: 600px;
348-
border: 1px solid var(--border-color);
349-
background-color: var(--vscode-sideBar-background, white);
399+
border: 1px solid var(--qs-histogram-border);
400+
background-color: var(--qs-histogram-bg);
350401
}
351402

352403
.bar {
353-
fill: var(--vscode-editorInfo-foreground, var(--nav-background));
404+
fill: var(--qs-histogram-bar-fill);
354405
}
355406

356407
.bar:hover {
357-
stroke: gray;
408+
stroke: var(--qs-histogram-bar-hover-stroke);
358409
stroke-width: 0.5;
359410
}
360411

361412
.bar-selected {
362-
stroke: var(--bar-selected-outline);
363-
fill: var(--nav-current-background);
413+
stroke: var(--qs-histogram-bar-selected-stroke);
414+
fill: var(--qs-histogram-bar-selected-fill);
364415
}
365416

366417
.bar-label {
367418
font-size: 3pt;
368-
fill: var(--vscode-icon-foreground, var(--main-color));
419+
fill: var(--qs-histogram-bar-label-fill);
369420
text-anchor: end;
370421
pointer-events: none;
371422
}
372423

373424
.bar-label-ket {
374-
font-family: "Courier", monospace;
425+
font-family: var(
426+
--vscode-editor-font-family,
427+
"Consolas",
428+
"Menlo",
429+
"Monaco",
430+
"Liberation Mono",
431+
"Courier New",
432+
monospace
433+
);
434+
font-variant-ligatures: none;
435+
font-size: 3.3pt;
375436
}
376437

377438
.histo-label {
378439
font-size: 3.5pt;
379-
fill: var(--vscode-foreground, #3b3b3b);
440+
fill: var(--qs-histogram-label-fill);
380441
}
381442

382443
.hover-text {
383444
font-size: 3.5pt;
384-
fill: gray;
445+
fill: var(--qs-histogram-hover-text-fill);
385446
text-anchor: middle;
386447
}
387448

388449
.menu-icon * {
389-
stroke: black;
390-
fill: var(--vscode-sideBar-background, white);
391-
stroke: var(--vscode-icon-foreground, #3b3b3b);
450+
fill: var(--qs-histogram-menu-icon-fill);
451+
stroke: var(--qs-histogram-menu-icon-stroke);
392452
}
393453

394454
.menu-box {
395-
fill: var(--menu-box-fill);
396-
stroke: black;
455+
fill: var(--qs-histogram-menu-box-fill);
456+
stroke: var(--qs-histogram-menu-box-stroke);
397457
stroke-width: 0.1;
398458
}
399459

400460
.menu-item {
401461
width: 32px;
402462
height: 10px;
403-
fill: var(--vscode-list-inactiveSelectionBackground, var(--nav-background));
404-
stroke: gray;
463+
fill: var(--qs-histogram-menu-item-fill);
464+
stroke: var(--qs-histogram-menu-item-stroke);
405465
stroke-width: 0.2;
406466
}
407467

408468
/* --vscode-list-inactiveSelectionBackground */
409469

410470
.menu-item:hover {
411471
stroke-width: 0.6;
412-
fill: var(--vscode-list-hoverBackground, var(--nav-hover-background));
472+
fill: var(--qs-histogram-menu-item-hover-fill);
413473
}
414474

415475
.menu-selected {
416476
/* stroke: #0800ff; */
417-
fill: var(
418-
--vscode-list-activeSelectionBackground,
419-
var(--nav-current-background)
420-
);
477+
fill: var(--qs-histogram-menu-item-selected-fill);
421478
}
422479

423480
.menu-text {
424481
font-size: 4.5px;
425482
pointer-events: none;
426-
fill: var(--main-color);
483+
fill: var(--qs-histogram-menu-text-fill);
427484
}
428485

429486
.menu-separator {
430-
stroke: gray;
487+
stroke: var(--qs-histogram-menu-separator-stroke);
431488
stroke-width: 0.25;
432489
}
433490

434491
.help-info {
435-
fill: var(--menu-box-fill);
436-
stroke: gray;
492+
fill: var(--qs-histogram-help-fill);
493+
stroke: var(--qs-histogram-help-stroke);
437494
stroke-width: 0.5;
438495
}
439496

440497
.help-info-text {
441498
font-size: 4.5px;
442499
pointer-events: none;
443-
fill: var(--main-color);
500+
fill: var(--qs-histogram-help-text-fill);
444501
}
445502

446503
/* RE details */

0 commit comments

Comments
 (0)