Fixes content color on alerts and gates

Author: d13

src/webviews/apps/commitDetails/components/gl-inspect-nav.ts

@@ -28,6 +28,7 @@ export class GlInspectNav extends LitElement {
 			:host([pinned]) {
 				background-color: var(--color-alert-warningBackground);
 				box-shadow: 0 0 0 0.1rem var(--color-alert-warningBorder);
+				color: var(--color-alert-warningForeground);
 				border-radius: 0.3rem;
 			}
 

src/webviews/apps/home/home.css.ts

@@ -182,17 +182,26 @@ export const alertStyles = css`
 		display: none;
 	}
 	.alert--info {
+		--color-alert-foreground: var(--color-alert-infoForeground);
 		background-color: var(--color-alert-infoBackground);
 		border-left-color: var(--color-alert-infoBorder);
 	}
 	.alert--warning {
+		--color-alert-foreground: var(--color-alert-warningForeground);
 		background-color: var(--color-alert-warningBackground);
 		border-left-color: var(--color-alert-warningBorder);
 	}
 	.alert--danger {
+		--color-alert-foreground: var(--color-alert-errorForeground);
 		background-color: var(--color-alert-errorBackground);
 		border-left-color: var(--color-alert-errorBorder);
 	}
+	.alert a:not(:hover) {
+		color: color-mix(in srgb, var(--color-alert-foreground) 50%, var(--vscode-textLink-foreground));
+	}
+	.alert a:hover {
+		color: color-mix(in srgb, var(--color-alert-foreground) 50%, var(--vscode-textLink-activeForeground));
+	}
 `;
 
 export const navListStyles = css`

src/webviews/apps/shared/components/feature-gate.ts

@@ -69,16 +69,20 @@ export class GlFeatureGate extends LitElement {
 
 			:host-context(body[data-placement='editor']) section,
 			:host([appearance='alert']) section {
-				--section-foreground: var(--color-alert-foreground);
+				--section-foreground: var(--color-alert-infoForeground);
 				--section-background: var(--color-alert-infoBackground);
 				--section-border-color: var(--color-alert-infoBorder);
 
 				--link-decoration-default: underline;
-				--link-foreground: var(--vscode-foreground);
+				--link-foreground: color-mix(in srgb, var(--section-foreground) 50%, var(--textLink-foreground));
 				/* --link-foreground-active: var(--vscode-foreground); */
 
 				/* --link-foreground: var(--vscode-textLink-foreground); */
-				--link-foreground-active: var(--vscode-textLink-activeForeground);
+				--link-foreground-active: color-mix(
+					in srgb,
+					var(--section-foreground) 50%,
+					var(--vscode-textLink-activeForeground)
+				);
 
 				border-radius: 0.3rem;
 				max-width: 600px;

src/webviews/apps/shared/styles/theme.scss

@@ -70,12 +70,15 @@
 
 	--color-alert-infoBackground: var(--vscode-inputValidation-infoBackground);
 	--color-alert-infoBorder: var(--vscode-inputValidation-infoBorder);
+	--color-alert-infoForeground: var(--vscode-inputValidation-infoForeground, var(--color-alert-foreground));
 
 	--color-alert-warningBackground: var(--vscode-inputValidation-warningBackground);
 	--color-alert-warningBorder: var(--vscode-inputValidation-warningBorder);
+	--color-alert-warningForeground: var(--vscode-inputValidation-warningForeground, var(--color-alert-foreground));
 
 	--color-alert-errorBackground: var(--vscode-inputValidation-errorBackground);
 	--color-alert-errorBorder: var(--vscode-inputValidation-errorBorder);
+	--color-alert-errorForeground: var(--vscode-inputValidation-errorForeground, var(--color-alert-foreground));
 
 	--color-alert-neutralBorder: var(--vscode-input-foreground);