Use dedicated CSS variables for circuit gate colors (#3082)

Hardcoding some dark/light values for the gates in circuit diagrams to
decouple them from VS Code themes.

## Light mode

**BEFORE**
<img width="510" height="603" alt="image"
src="https://github.com/user-attachments/assets/78910ddc-9faa-4099-915b-2091db6b42b3"
/>

**AFTER**
<img width="514" height="607" alt="image"
src="https://github.com/user-attachments/assets/783d4317-1814-4728-805a-f05c6163aa65"
/>

## Dark mode

**BEFORE**
<img width="511" height="609" alt="image"
src="https://github.com/user-attachments/assets/5b16d85c-ad34-4686-833d-76ec59242def"
/>

**AFTER**
<img width="518" height="651" alt="image"
src="https://github.com/user-attachments/assets/f05c1795-b49c-409b-bf87-c6453fc307fb"
/>

---------

Co-authored-by: Bill Ticehurst <billti@hotmail.com>

Author: minestarks

source/npm/qsharp/ux/qdk-theme.css

@@ -120,6 +120,21 @@ body[data-vscode-theme-kind="vscode-high-contrast-light"] {
   --qdk-gate-reset: #282;
   --qdk-atom-fill: #0078d4;
   --qdk-atom-trail: #fa0;
+
+  /* Circuit diagram: unitary gate box colors */
+  --qdk-circuit-unitary-fill: #ffffff;
+  --qdk-circuit-unitary-text: #3b3b3b;
+  --qdk-circuit-unitary-hover: #cccccc;
+
+  /* Circuit diagram: measurement gate colors */
+  --qdk-circuit-measure-fill: #005fb8;
+  --qdk-circuit-measure-text: #ffffff;
+  --qdk-circuit-measure-hover: #0258a8;
+
+  /* Circuit diagram: ket/state-prep gate colors */
+  --qdk-circuit-ket-fill: #005fb8;
+  --qdk-circuit-ket-text: #ffffff;
+  --qdk-circuit-ket-hover: #0258a8;
 }
 
 /* Set these variables on the body element if attributes indicate a dark theme choice */
@@ -171,4 +186,19 @@ body[data-vscode-theme-kind="vscode-high-contrast"] {
   --qdk-gate-reset: #8e8;
   --qdk-atom-fill: #9df;
   --qdk-atom-trail: #fa0;
+
+  /* Circuit diagram: unitary gate box colors */
+  --qdk-circuit-unitary-fill: #313131;
+  --qdk-circuit-unitary-text: #cccccc;
+  --qdk-circuit-unitary-hover: #2b2b2b;
+
+  /* Circuit diagram: measurement gate colors */
+  --qdk-circuit-measure-fill: #0078d4;
+  --qdk-circuit-measure-text: #ffffff;
+  --qdk-circuit-measure-hover: #026ec1;
+
+  /* Circuit diagram: ket/state-prep gate colors */
+  --qdk-circuit-ket-fill: #0078d4;
+  --qdk-circuit-ket-text: #ffffff;
+  --qdk-circuit-ket-hover: #026ec1;
 }

source/npm/qsharp/ux/qsharp-circuit.css

@@ -69,12 +69,12 @@
 
   /* Background for gates */
   .gate-unitary {
-    fill: var(--vscode-input-background, #333333);
+    fill: var(--qdk-circuit-unitary-fill);
   }
 
   /* Text for gates */
   .gate text {
-    fill: var(--vscode-input-foreground, #ffffff);
+    fill: var(--qdk-circuit-unitary-text);
   }
 
   a.qs-circuit-source-link .qs-qubit-label {
@@ -83,12 +83,15 @@
 
   /* Hover effect for clickable gates */
   a.qs-circuit-source-link:hover .gate-unitary {
-    fill: var(--vscode-button-secondaryHoverBackground, #4d4d4d);
+    fill: var(--qdk-circuit-unitary-hover);
+  }
+
+  a.qs-circuit-source-link:hover .gate-measure {
+    fill: var(--qdk-circuit-measure-hover);
   }
 
-  a.qs-circuit-source-link:hover .gate-measure,
   a.qs-circuit-source-link:hover .gate-ket {
-    fill: var(--vscode-button-hoverBackground, #005a9e);
+    fill: var(--qdk-circuit-ket-hover);
   }
 
   a.qs-circuit-source-link:hover .qs-qubit-label {
@@ -138,25 +141,25 @@
 
   /* Measurement gate */
   .gate-measure {
-    fill: var(--vscode-button-background, #007acc);
+    fill: var(--qdk-circuit-measure-fill);
   }
 
   /* Measurement gate icon */
   .qs-line-measure,
   .arc-measure {
-    stroke: var(--vscode-button-foreground, #ffffff);
+    stroke: var(--qdk-circuit-measure-text);
     fill: none;
     stroke-width: 1;
   }
 
   /* Ket gate */
   .gate-ket {
-    fill: var(--vscode-button-background, #007acc);
+    fill: var(--qdk-circuit-ket-fill);
   }
 
   /* Ket gate text */
   text.ket-text {
-    fill: var(--vscode-button-foreground, #ffffff);
+    fill: var(--qdk-circuit-ket-text);
     stroke: none;
   }