styles

sites/svelte-5-preview/src/lib/Output/console/Console.svelte

@@ -13,9 +13,16 @@
 
 <style>
 	.container {
+		--error-fg: #da106e;
+		--error-bg: #fff0f0;
+		--error-border: rgb(242, 214, 219);
 		--json-tree-string-color: var(--sk-code-string);
 
 		:global(.dark) & {
+			--error-fg: rgb(235, 78, 109);
+			--error-bg: rgb(71, 48, 54);
+			--error-border: rgb(109, 65, 76);
+
 			--json-tree-property-color: #72a2d3;
 			--json-tree-string-color: #6cd1c7;
 			--json-tree-symbol-color: #6cd1c7;

sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte

@@ -69,7 +69,7 @@
 
 <style>
 	.log {
-		border-bottom: 0.5px solid var(--sk-back-4);
+		/* border-bottom: 0.5px solid var(--sk-back-4); */
 		padding: 5px 10px 5px;
 		display: flex;
 		position: relative;
@@ -90,8 +90,14 @@
 
 	.console-error,
 	.console-assert {
-		background: #fff0f0;
-		border-color: #fed6d7;
+		background: var(--error-bg);
+		border-width: 1px;
+		border-color: var(--error-border);
+		border-style: solid none;
+
+		& + :global(&) {
+			border-top: none;
+		}
 	}
 
 	.console-group,
@@ -100,16 +106,6 @@
 		user-select: none;
 	}
 
-	.console-trace,
-	.console-assert {
-		border-bottom: none;
-	}
-
-	.console-assert + .trace {
-		background: #fff0f0;
-		border-color: #fed6d7;
-	}
-
 	.trace {
 		border-bottom: 1px solid #eee;
 		font-size: 12px;
@@ -144,7 +140,7 @@
 	}
 
 	.error {
-		color: #da106e; /* todo make this a var */
+		color: var(--error-fg);
 	}
 
 	.outline {