feat(workspace): frameless console that blends into its card
The tab bar and terminal lose their bordered box: the bar keeps one divider with an accent underline on the active tab, and the terminal is painted in the card's colour (--surface-3) instead of the page's. That made a long-standing overflow visible: xterm re-measures its cell only on a font option change or a resize, so a webfont landing after open left the fit on the fallback font's cell and the rows/cols spilled out of the pane. Re-set the family and refit on document.fonts loadingdone.
This commit is contained in:
@@ -24,7 +24,9 @@ const vars: Record<string, string> = {
|
||||
describe("buildTerminalTheme", () => {
|
||||
it("maps theme tokens onto the xterm palette", () => {
|
||||
const t = buildTerminalTheme((n) => vars[n] ?? "");
|
||||
expect(t.background).toBe("#111113");
|
||||
// The card's colour, so the terminal blends into the card it sits on.
|
||||
expect(t.background).toBe("#272a2d");
|
||||
expect(t.cursorAccent).toBe("#272a2d");
|
||||
expect(t.foreground).toBe("#edeef0");
|
||||
expect(t.cursor).toBe("#edeef0");
|
||||
expect(t.selectionBackground).toBe("#43484e");
|
||||
@@ -58,7 +60,7 @@ describe("buildTerminalTheme", () => {
|
||||
describe("terminalThemeFor", () => {
|
||||
it("resolves variables on a dark probe scoped to the theme id, then removes it", () => {
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `.dark { --surface-0: 1 2 3; } .dark[data-theme="darcula"] { --surface-0: 30 31 32; }`;
|
||||
style.textContent = `.dark { --surface-3: 1 2 3; } .dark[data-theme="darcula"] { --surface-3: 30 31 32; }`;
|
||||
document.head.appendChild(style);
|
||||
try {
|
||||
expect(terminalThemeFor("default").background).toBe("#010203");
|
||||
|
||||
@@ -54,10 +54,11 @@ export function buildTerminalTheme(read: VarReader): ITheme {
|
||||
const magenta = "#c678dd";
|
||||
const cyan = "#56b6c2";
|
||||
return {
|
||||
background: v("--surface-0"),
|
||||
// The `.card` colour: the console sits on a card, with no frame between.
|
||||
background: v("--surface-3"),
|
||||
foreground: v("--fg-primary"),
|
||||
cursor: v("--fg-primary"),
|
||||
cursorAccent: v("--surface-0"),
|
||||
cursorAccent: v("--surface-3"),
|
||||
selectionBackground: v("--border-light"),
|
||||
black: v("--border-light"),
|
||||
red,
|
||||
|
||||
Reference in New Issue
Block a user