Updates themes for composer items EVEN MORE

Author: d13

src/webviews/apps/plus/composer/components/commit-item.ts

@@ -137,8 +137,8 @@ export class CommitItem extends LitElement {
 					<div class="composer-item__body change-stats">
 						<div class="file-count">${this.fileCount} ${this.fileCount === 1 ? 'file' : 'files'}</div>
 						<div class="diff-stats">
-							<span class="additions">+${this.additions}</span>
-							<span class="deletions">-${this.deletions}</span>
+							<span class="diff-stats__additions">+${this.additions}</span>
+							<span class="diff-stats__deletions">-${this.deletions}</span>
 						</div>
 					</div>
 				</div>

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

@@ -924,8 +924,8 @@ export class CommitsPanel extends LitElement {
 								>${section.fileCount} ${section.fileCount === 1 ? 'file' : 'files'}</span
 							>
 							<span class="diff-stats">
-								<span class="additions">+${section.changes.additions}</span>
-								<span class="deletions">-${section.changes.deletions}</span>
+								<span class="diff-stats__additions">+${section.changes.additions}</span>
+								<span class="diff-stats__deletions">-${section.changes.deletions}</span>
 							</span>
 						</div>
 						${when(

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

@@ -10,7 +10,6 @@ export const composerItemStyles = css`
 		--composer-item-background: var(--composer-background-05);
 		--composer-item-border: transparent;
 		--composer-item-radius: 1.2rem;
-		/* --composer-item-border: var(--vscode-contrastActiveBorder, var(--vscode-list-inactiveFocusOutline)); */
 		--composer-item-color: var(--vscode-foreground);
 		--composer-item-icon-color: var(--vscode-icon-foreground);
 
@@ -31,13 +30,9 @@ export const composerItemStyles = css`
 	}
 
 	.composer-item.is-selected {
-		--composer-item-background: var(--vscode-list-activeSelectionBackground var(--vscode-background));
+		--composer-item-background: var(--vscode-list-activeSelectionBackground, var(--color-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))
-		); */
 	}
 
 	:host-context(.vscode-high-contrast) .composer-item.is-selected {
@@ -186,11 +181,19 @@ export const composerItemContentStyles = css`
 		font-weight: 500;
 	}
 
-	.diff-stats .additions {
+	.diff-stats__additions {
 		color: var(--vscode-gitDecoration-addedResourceForeground);
+		color: light-dark(
+			color-mix(in srgb, #fff 40%, var(--vscode-gitDecoration-addedResourceForeground)),
+			var(--vscode-gitDecoration-addedResourceForeground)
+		);
 	}
 
-	.diff-stats .deletions {
+	.diff-stats__deletions {
 		color: var(--vscode-gitDecoration-deletedResourceForeground);
+		color: light-dark(
+			color-mix(in srgb, #fff 40%, var(--vscode-gitDecoration-deletedResourceForeground)),
+			var(--vscode-gitDecoration-deletedResourceForeground)
+		);
 	}
 `;

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

@@ -5,9 +5,11 @@
 @use '../../shared/styles/utils';
 
 @include utils.dark-theme {
+	color-scheme: dark;
 	--composer-background-05: var(--color-background--lighten-05);
 }
 @include utils.light-theme {
+	color-scheme: light;
 	--composer-background-05: var(--color-background--darken-05);
 }