Fixes theme support for composer items and diffs

Author: d13

src/webviews/apps/plus/composer/components/commits-panel.ts

@@ -242,29 +242,10 @@ export class CommitsPanel extends LitElement {
 				color: var(--vscode-descriptionForeground);
 			}
 
-			.composer-item.is-base .composer-item__body {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				min-width: 0;
-			}
-
-			/* Muted warning background for unassigned change sections */
-			.composer-item.is-uncommitted {
-				background: color-mix(in srgb, var(--vscode-notificationsWarningIcon-foreground) 8%, transparent);
-				border: 1px solid color-mix(in srgb, var(--vscode-notificationsWarningIcon-foreground) 15%, transparent);
-				border-radius: 4px;
-			}
-
-			.composer-item.is-uncommitted.is-selected {
-				background: color-mix(in srgb, var(--vscode-notificationsWarningIcon-foreground) 12%, transparent);
-				border-color: color-mix(in srgb, var(--vscode-notificationsWarningIcon-foreground) 25%, transparent);
-			}
-
 			/* Include changes button styling */
 			.add-to-draft-button-container gl-button {
-				background: color-mix(in srgb, var(--vscode-button-foreground) 10%, transparent) !important;
-				color: var(--vscode-foreground) !important;
+				background: var(--composer-item-background) !important;
+				color: var(--composer-item-color) !important;
 			}
 
 			/* Auto-Compose container styles */

src/webviews/apps/plus/composer/components/composer.css.ts

@@ -26,34 +26,61 @@ export const composerItemStyles = css`
 		cursor: pointer;
 	}
 
-	.composer-item:not(.is-selected):focus-visible,
-	.composer-item:not(.is-selected):hover {
+	.composer-item:not(.is-selected):is(:focus-visible, :hover) {
 		--composer-item-background: var(--vscode-list-hoverBackground);
 	}
 
 	.composer-item.is-selected {
-		--composer-item-background: var(--vscode-list-activeSelectionBackground);
-		--composer-item-icon-color: var(--vscode-list-activeSelectionForeground);
+		--composer-item-background: var(--vscode-list-activeSelectionBackground var(--vscode-background));
+		--composer-item-icon-color: var(--vscode-list-activeSelectionForeground, var(--vscode-foreground));
 		--composer-item-color: var(--vscode-list-activeSelectionForeground);
 		/* --composer-item-border: var(
 			--vscode-list-focusAndSelectionOutline,
 			var(--vscode-contrastActiveBorder, var(--vscode-list-focusOutline))
 		); */
 	}
 
-	.composer-item.is-summary,
-	.composer-item.is-uncommitted {
-		--composer-item-border: var(--vscode-panel-border);
+	:host-context(.vscode-high-contrast) .composer-item.is-selected {
+		--composer-item-border: var(
+			--vscode-list-focusAndSelectionOutline,
+			var(--vscode-contrastActiveBorder, var(--vscode-list-focusOutline))
+		);
 	}
 
 	.composer-item.is-summary {
+		--composer-item-border: var(--vscode-panel-border);
 		--composer-item-radius: 0.4rem;
 	}
 
 	.composer-item.is-uncommitted {
+		--composer-item-background: color-mix(
+			in srgb,
+			var(--vscode-notificationsWarningIcon-foreground) 8%,
+			transparent
+		);
+		--composer-item-border: color-mix(in srgb, var(--vscode-notificationsWarningIcon-foreground) 20%, transparent);
+		--composer-item-radius: 0.4rem;
 		border-style: dashed;
 	}
 
+	.composer-item.is-uncommitted:not(.is-selected):is(:focus-visible, :hover) {
+		--composer-item-background: color-mix(
+			in srgb,
+			var(--vscode-notificationsWarningIcon-foreground) 12%,
+			transparent
+		);
+	}
+
+	.composer-item.is-uncommitted.is-selected {
+		--composer-item-background: color-mix(
+			in srgb,
+			var(--vscode-notificationsWarningIcon-foreground) 18%,
+			transparent
+		);
+		--composer-item-border: color-mix(in srgb, var(--vscode-notificationsWarningIcon-foreground) 25%, transparent);
+		--composer-item-color: var(--vscode-foreground);
+	}
+
 	.composer-item.is-base,
 	.composer-item.is-base:focus-visible,
 	.composer-item.is-base:hover {
@@ -86,6 +113,13 @@ export const composerItemStyles = css`
 	.composer-item__body {
 		font-size: 1.2rem;
 	}
+
+	.composer-item.is-base .composer-item__body {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
 `;
 
 export const composerItemCommitStyles = css`
@@ -139,8 +173,6 @@ export const composerItemContentStyles = css`
 		display: flex;
 		align-items: center;
 		gap: 0.8rem;
-		color: var(--color-foreground--85);
-		/* font-size: 1.2rem; */
 	}
 
 	.file-count {

src/webviews/apps/plus/composer/components/diff/diff.css.ts

@@ -199,7 +199,8 @@ export const diff2htmlStyles = css`
 	}
 	.d2h-code-line {
 		padding: 0 8em;
-		width: calc(100% - 16em);
+		/* width: calc(100% - 16em); */
+		width: 100%;
 	}
 	.d2h-code-line,
 	.d2h-code-side-line {
@@ -270,8 +271,9 @@ export const diff2htmlStyles = css`
 	}
 	.d2h-code-linenumber {
 		background-color: var(--d2h-bg-color);
-		border: solid var(--d2h-line-border-color);
-		border-width: 0 1px;
+		border-style: solid;
+		border-color: transparent var(--d2h-line-border-color);
+		border-width: 1px;
 		-webkit-box-sizing: border-box;
 		box-sizing: border-box;
 		color: var(--d2h-dim-color);
@@ -284,6 +286,12 @@ export const diff2htmlStyles = css`
 	.d2h-code-linenumber:after {
 		content: '\\200b';
 	}
+	.d2h-code-linenumber.d2h-ins {
+		border-color: transparent var(--d2h-ins-border-color);
+	}
+	.d2h-code-linenumber.d2h-del {
+		border-color: transparent var(--d2h-del-border-color);
+	}
 	.d2h-code-side-linenumber {
 		background-color: var(--d2h-bg-color);
 		border: solid var(--d2h-line-border-color);
@@ -416,6 +424,12 @@ export const diff2htmlStyles = css`
 	.d2h-moved-tag {
 		border: 1px solid var(--d2h-moved-label-color);
 	}
+	:host-context(.vscode-high-contrast) .d2h-ins .d2h-code-line {
+		border: 1px dashed var(--d2h-ins-border-color);
+	}
+	:host-context(.vscode-high-contrast) .d2h-del .d2h-code-line {
+		border: 1px dashed var(--d2h-del-border-color);
+	}
 `;
 /*
 	.d2h-dark-color-scheme {

src/webviews/apps/plus/composer/composer.scss

@@ -35,11 +35,11 @@
 	--d2h-empty-placeholder-border-color: #e1e1e1;
 	--d2h-selected-color: #c8e1ff;
 	--d2h-ins-bg-color: var(--vscode-diffEditor-insertedTextBackground);
-	--d2h-ins-border-color: #b4e2b4;
+	--d2h-ins-border-color: var(--vscode-diffEditor-insertedTextBorder, #b4e2b4);
 	--d2h-ins-highlight-bg-color: var(--vscode-diffEditor-insertedTextBackground);
 	--d2h-ins-label-color: #399839;
 	--d2h-del-bg-color: var(--vscode-diffEditor-removedTextBackground);
-	--d2h-del-border-color: #e9aeae;
+	--d2h-del-border-color: var(--vscode-diffEditor-removedTextBorder, #e9aeae);
 	--d2h-del-highlight-bg-color: var(--vscode-diffEditor-removedTextBackground);
 	--d2h-del-label-color: #c33;
 	--d2h-change-del-color: var(--vscode-diffEditor-removedLineBackground);
@@ -86,11 +86,11 @@
 	--d2h-empty-placeholder-border-color: #30363d;
 	--d2h-selected-color: rgba(56, 139, 253, 0.1);
 	// --d2h-ins-bg-color: rgba(46, 160, 67, 0.15);
-	--d2h-ins-border-color: rgba(46, 160, 67, 0.4);
+	--d2h-ins-border-color: var(--vscode-diffEditor-insertedTextBorder, rgba(46, 160, 67, 0.4));
 	// --d2h-ins-highlight-bg-color: rgba(46, 160, 67, 0.4);
 	--d2h-ins-label-color: #3fb950;
 	// --d2h-del-bg-color: rgba(248, 81, 73, 0.1);
-	--d2h-del-border-color: rgba(248, 81, 73, 0.4);
+	--d2h-del-border-color: var(--vscode-diffEditor-removedTextBorder, rgba(248, 81, 73, 0.4));
 	// --d2h-del-highlight-bg-color: rgba(248, 81, 73, 0.4);
 	--d2h-del-label-color: #f85149;
 	// --d2h-change-del-color: rgba(210, 153, 34, 0.2);