pi-studio 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.6.2] — 2026-04-29
+
+### Changed
+- Polished refreshed Studio theme surfaces so light-mode header actions, scratchpad panels, response-history badges, and editor surfaces are more consistent.
+- Softened overly sharp derived borders in high-contrast themes while preserving theme hue and tightened secondary info text contrast in comment, outline, and scratchpad panels.
+
 ## [0.6.1] — 2026-04-29
 
 ### Added

package/client/studio.css

@@ -2020,7 +2020,7 @@
       gap: 12px;
       padding: 16px 18px 12px;
       border-bottom: 1px solid var(--panel-border);
-      background: var(--panel-2);
+      background: var(--scratchpad-header-bg, var(--panel-2));
     }
 
     .scratchpad-header > div {
@@ -2038,7 +2038,7 @@
       margin: 6px 0 0;
       font-size: 12px;
       line-height: 1.45;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       max-width: none;
     }
 
@@ -2057,7 +2057,7 @@
       border-radius: 0;
       margin: 0;
       padding: 16px 18px;
-      background: var(--panel);
+      background: var(--scratchpad-body-bg, var(--panel));
       color: var(--text);
       font-family: var(--font-mono);
       font-size: 13px;
@@ -2073,12 +2073,12 @@
       gap: 12px;
       flex-wrap: wrap;
       padding: 12px 18px 16px;
-      background: var(--panel);
+      background: var(--scratchpad-body-bg, var(--panel));
     }
 
     .scratchpad-meta {
       font-size: 12px;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
     }
 
     .scratchpad-actions {
@@ -2140,7 +2140,7 @@
       padding: 14px;
       font-size: 13px;
       line-height: 1.5;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       border-bottom: 1px solid var(--panel-border);
       background: var(--panel);
     }
@@ -2229,7 +2229,7 @@
 
     .outline-entry-meta {
       font-size: 11px;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       white-space: nowrap;
       font-variant-numeric: tabular-nums;
     }
@@ -2553,7 +2553,7 @@
     body.studio-ui-refresh #rightSectionHeader button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-toolbar button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
     body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
@@ -2653,10 +2653,18 @@
       border-radius: 8px;
     }
 
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      background: var(--studio-header-action-bg, transparent);
+      border-color: var(--studio-header-action-border, transparent);
+    }
+
     body.studio-ui-refresh #exportPdfBtn {
-      background: var(--panel-2);
+      background: var(--studio-header-filled-bg, var(--panel-2));
       color: var(--text);
-      border-color: transparent;
+      border-color: var(--studio-header-action-border, transparent);
     }
 
     body.studio-ui-refresh #reviewNotesBtn.is-active,
@@ -2834,7 +2842,7 @@
 
     body.studio-ui-refresh .studio-refresh-chip.is-open,
     body.studio-ui-refresh .studio-refresh-chip:hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
       color: var(--text);
     }
 
@@ -2917,7 +2925,7 @@
 
     body.studio-ui-refresh .studio-refresh-menu-item > button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-menu-item > select:not(:disabled):hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
     body.studio-ui-refresh #copyDraftBtn:only-child {

package/index.ts

@@ -864,6 +864,26 @@ function readableTextOn(background: string, darkText = "#0e1616", lightText = "#
 	return contrastRatio(background, darkText) >= contrastRatio(background, lightText) ? darkText : lightText;
 }
 
+function capBorderContrast(color: string, surface: string, maxContrast: number): string {
+	if (!hexToRgb(color) || !hexToRgb(surface)) return color;
+	if (contrastRatio(color, surface) <= maxContrast) return color;
+
+	let low = 0;
+	let high = 1;
+	let result = color;
+	for (let i = 0; i < 12; i += 1) {
+		const mid = (low + high) / 2;
+		const candidate = blendColors(color, surface, mid);
+		if (contrastRatio(candidate, surface) > maxContrast) {
+			low = mid;
+		} else {
+			result = candidate;
+			high = mid;
+		}
+	}
+	return result;
+}
+
 function deriveCanvasColors(
 	baseColor: string,
 	mode: StudioThemeMode,
@@ -6165,10 +6185,14 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		style.mode === "light"
 			? `0 1px 2px ${withAlpha(style.palette.text, 0.035, "rgba(15, 23, 42, 0.03)")}, 0 4px 14px ${withAlpha(style.palette.text, 0.055, "rgba(15, 23, 42, 0.04)")}`
 			: "0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.18)";
-	const borderSubtle = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.58 : 0.48);
-	const panelBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.42 : 0.36);
-	const controlBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.30 : 0.22);
-	const paneActiveBorder = blendColors(style.palette.border, style.palette.panel, style.mode === "light" ? 0.34 : 0.48);
+	const rawBorderSubtle = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.58 : 0.48);
+	const rawPanelBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.42 : 0.36);
+	const rawControlBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.30 : 0.22);
+	const rawPaneActiveBorder = blendColors(style.palette.border, style.palette.panel, style.mode === "light" ? 0.34 : 0.48);
+	const borderSubtle = capBorderContrast(rawBorderSubtle, style.palette.panel, style.mode === "light" ? 1.10 : 1.12);
+	const panelBorder = capBorderContrast(rawPanelBorder, style.palette.panel, style.mode === "light" ? 1.15 : 1.18);
+	const controlBorder = capBorderContrast(rawControlBorder, style.palette.panel, style.mode === "light" ? 1.22 : 1.25);
+	const paneActiveBorder = capBorderContrast(rawPaneActiveBorder, style.palette.panel, style.mode === "light" ? 1.38 : 1.45);
 	const accentContrast = style.accentContrast ?? (style.mode === "light" ? "#ffffff" : "#0e1616");
 	const errorContrast = style.errorContrast ?? readableTextOn(style.palette.error);
 	const blockquoteBg = withAlpha(
@@ -6201,6 +6225,13 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 	const editorGutterBg = style.mode === "light" ? lightSecondarySurface : style.palette.panel2;
 	const referenceMetaBg = style.mode === "light" ? lightSecondarySurface : style.palette.panel2;
 	const referenceBadgeBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel;
+	const scratchpadHeaderBg = style.mode === "light" ? lightSecondarySurface : style.palette.panel2;
+	const scratchpadBodyBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel;
+	const infoText = blendColors(style.palette.text, style.palette.muted, style.mode === "light" ? 0.36 : 0.30);
+	const headerActionBg = style.mode === "light" ? lightPrimarySurface : "transparent";
+	const headerActionHoverBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel2;
+	const headerActionBorder = style.mode === "light" ? controlBorder : "transparent";
+	const headerFilledBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel2;
 	const monoFontStack = getStudioMonoFontStack();
 	const uiFontStack = getStudioUiFontStack();
 	const proseFontStack = getStudioProseFontStack();
@@ -6264,6 +6295,13 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		"--editor-gutter-bg": editorGutterBg,
 		"--reference-meta-bg": referenceMetaBg,
 		"--reference-badge-bg": referenceBadgeBg,
+		"--scratchpad-header-bg": scratchpadHeaderBg,
+		"--scratchpad-body-bg": scratchpadBodyBg,
+		"--studio-info-text": infoText,
+		"--studio-header-action-bg": headerActionBg,
+		"--studio-header-action-hover-bg": headerActionHoverBg,
+		"--studio-header-action-border": headerActionBorder,
+		"--studio-header-filled-bg": headerFilledBg,
 		"--font-ui": uiFontStack,
 		"--font-prose": proseFontStack,
 		"--font-mono": monoFontStack,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",