Fix colors to have more visible contrast ratio (#7766)

Andrew Hall · web-flow · commit 2ac68d695973 · 2024-11-11T16:52:50.000-08:00
Fixes internal issue devdiv.visualstudio.com/DevDiv/_workitems/edit/2295981

The default color by the host is #E49400 which has a ratio of 2.38:1.

New color is defined by vs-code (blue by default, them dependent setting) at #007FD4 getting the ratio to ~4:1

image
diff --git a/src/razor/src/csharp/csharpPreviewPanel.ts b/src/razor/src/csharp/csharpPreviewPanel.ts
@@ -126,6 +126,9 @@ export class CSharpPreviewPanel {
             vertical-align: middle;
             cursor: pointer;
         }
+        button:focus-visible {
+            outline-color: var(--vscode-focusBorder)
+        }
     </style>
 
     <script type="text/javascript">
diff --git a/src/razor/src/html/htmlPreviewPanel.ts b/src/razor/src/html/htmlPreviewPanel.ts
@@ -127,6 +127,9 @@ export class HtmlPreviewPanel {
             vertical-align: middle;
             cursor: pointer;
         }
+        button:focus-visible {
+            outline-color: var(--vscode-focusBorder)
+        }
     </style>
 
     <script type="text/javascript">

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,9 @@ export class CSharpPreviewPanel {`
`126`	`126`	`vertical-align: middle;`
`127`	`127`	`cursor: pointer;`
`128`	`128`	`}`
	`129`	`+ button:focus-visible {`
	`130`	`+ outline-color: var(--vscode-focusBorder)`
	`131`	`+ }`
`129`	`132`	`</style>`
`130`	`133`
`131`	`134`	`<script type="text/javascript">`
Original file line number	Diff line number	Diff line change
`@@ -127,6 +127,9 @@ export class HtmlPreviewPanel {`
`127`	`127`	`vertical-align: middle;`
`128`	`128`	`cursor: pointer;`
`129`	`129`	`}`
	`130`	`+ button:focus-visible {`
	`131`	`+ outline-color: var(--vscode-focusBorder)`
	`132`	`+ }`
`130`	`133`	`</style>`
`131`	`134`
`132`	`135`	`<script type="text/javascript">`