fix: Use adaptive CSS system colors to fix strict theme fallbacks

Author: shuoweil

bigframes/display/table_widget.css

@@ -28,7 +28,7 @@
 	align-items: center;
 	color: var(
 		--colab-primary-text-color,
-		var(--jp-ui-font-color0, var(--vscode-editor-foreground, black))
+		var(--jp-ui-font-color0, var(--vscode-editor-foreground, inherit))
 	);
 	display: flex;
 	font-family:
@@ -75,15 +75,15 @@
 	border-collapse: collapse;
 	color: var(
 		--colab-primary-text-color,
-		var(--jp-ui-font-color0, var(--vscode-editor-foreground, black))
+		var(--jp-ui-font-color0, var(--vscode-editor-foreground, inherit))
 	);
 	text-align: left;
 }
 
 .bigframes-widget th {
 	background-color: var(
 		--colab-primary-surface-color,
-		var(--jp-layout-color0, var(--vscode-editor-background, white))
+		var(--jp-layout-color0, var(--vscode-editor-background, Canvas))
 	);
 	padding: 0;
 	position: sticky;
@@ -155,7 +155,10 @@
 .bigframes-widget td.row-hover {
 	background-color: var(
 		--colab-hover-surface-color,
-		var(--jp-layout-color2, var(--vscode-list-hoverBackground, #f5f5f5))
+		var(
+			--jp-layout-color2,
+			var(--vscode-list-hoverBackground, rgba(128, 128, 128, 0.1))
+		)
 	);
 }
 
@@ -164,14 +167,14 @@
 	.bigframes-widget table {
 		color: var(
 			--colab-primary-text-color,
-			var(--jp-ui-font-color0, var(--vscode-editor-foreground, white))
+			var(--jp-ui-font-color0, var(--vscode-editor-foreground, inherit))
 		);
 	}
 
 	.bigframes-widget th {
 		background-color: var(
 			--colab-primary-surface-color,
-			var(--jp-layout-color0, var(--vscode-editor-background, #383838))
+			var(--jp-layout-color0, var(--vscode-editor-background, Canvas))
 		);
 	}
 
@@ -189,7 +192,10 @@
 	.bigframes-widget td.row-hover {
 		background-color: var(
 			--colab-hover-surface-color,
-			var(--jp-layout-color2, var(--vscode-list-hoverBackground, #444))
+			var(
+				--jp-layout-color2,
+				var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.1))
+			)
 		);
 	}
 }