ADK changes

PiperOrigin-RevId: 814390521

Author: google-genai-bot

src/app/components/artifact-tab/artifact-tab.component.scss

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 .artifact-container {
   display: flex;
   flex-wrap: wrap;
@@ -36,7 +35,7 @@
 }
 
 .download-button {
-  background-color: #8ab4f8 !important;
+  background-color: var(--artifact-tab-download-button-background-color) !important;
   margin-left: 35px;
   width: 130px;
   height: 28px;
@@ -51,13 +50,13 @@
 
 hr.white-separator {
   border: none;
-  border-top: 1px solid white;
+  border-top: 1px solid var(--artifact-tab-white-separator-border-top-color);
   margin-bottom: 1.2em;
   margin-right: 15px;
 }
 
 .version-select-container {
-  background-color: #212123;
+  background-color: var(--artifact-tab-version-select-container-background-color);
   width: 80px;
   margin-left: 15px;
 }
@@ -67,27 +66,27 @@ hr.white-separator {
   border: none;
   padding: 0;
   font: inherit;
-  color: #007bff !important;
+  color: var(--artifact-tab-link-style-button-color) !important;
   text-decoration: underline;
   cursor: pointer;
   outline: none;
 }
 
 .link-style-button:hover {
-  color: #0056b3;
+  color: var(--artifact-tab-link-style-button-hover-color);
   text-decoration: underline;
 }
 
 .link-style-button:focus {
-  outline: 1px dotted #007bff;
+  outline: 1px dotted var(--artifact-tab-link-style-button-focus-outline-color);
 }
 
 .link-style-button:active {
-  color: #004085;
+  color: var(--artifact-tab-link-style-button-active-color);
 }
 
 .link-style-button:disabled {
-  color: #6c757d;
+  color: var(--artifact-tab-link-style-button-disabled-color);
   text-decoration: none;
   cursor: not-allowed;
 }

src/app/components/audio-player/audio-player.component.scss

@@ -4,9 +4,9 @@
   justify-content: center;
   align-items: center;
   padding: 15px;
-  background-color: #f0f0f0;
+  background-color: var(--audio-player-container-background-color);
   border-radius: 8px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 5px var(--audio-player-container-box-shadow-color);
   margin: 20px auto;
   max-width: 350px;
 }
@@ -29,13 +29,13 @@ audio {
   padding: 8px 15px;
   border: none;
   border-radius: 5px;
-  background-color: #007bff;
-  color: white;
+  background-color: var(--audio-player-custom-controls-button-background-color);
+  color: var(--audio-player-custom-controls-button-color);
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.2s ease;
 }
 
 .custom-controls button:hover {
-  background-color: #0056b3;
+  background-color: var(--audio-player-custom-controls-button-hover-background-color);
 }

src/app/components/chat-panel/chat-panel.component.html

@@ -36,10 +36,10 @@
     } @if (!message.functionCall && !message.functionResponse) {
     <mat-card
       class="message-card"
-      [ngClass]="{ 'eval-fail': message.evalStatus === 2 }"
-      [ngStyle]="{
-              'background-color': shouldMessageHighlighted(i) ? 'rgb(15, 82, 35)' : ''
-            }"
+      [ngClass]="{
+        'eval-fail': message.evalStatus === 2,
+        'message-card--highlighted': shouldMessageHighlighted(i)
+      }"
     >
       @if (message.isLoading) {
       <mat-progress-bar class="loading-bar" mode="buffer"></mat-progress-bar>
@@ -75,29 +75,15 @@
             ></textarea>
             <div class="edit-message-buttons-container">
               <span
-                class="material-symbols-outlined"
+                class="material-symbols-outlined cancel-edit-button"
                 [matTooltip]="i18n.cancelEditingTooltip"
-                style="
-                  width: 24px;
-                  height: 24px;
-                  color: #c4c7c5;
-                  cursor: pointer;
-                  margin-right: 16px;
-                "
                 (click)="cancelEditMessage.emit(message)"
               >
                 close
               </span>
               <span
-                class="material-symbols-outlined"
+                class="material-symbols-outlined save-edit-button"
                 [matTooltip]="i18n.saveEvalMessageTooltip"
-                style="
-                  width: 24px;
-                  height: 24px;
-                  color: rgb(97, 151, 202);
-                  cursor: pointer;
-                  margin-right: 16px;
-                "
                 (click)="saveEditMessage.emit(message)"
               >
                 check
@@ -346,7 +332,6 @@
       (ngModelChange)="userInputChange.emit($event)"
       (keydown.enter)="sendMessage.emit($event)"
       [placeholder]="i18n.typeMessagePlaceholder"
-      style="caret-color: white"
     ></textarea>
     <div class="chat-input-actions">
       <div>
@@ -377,9 +362,8 @@
           mat-icon-button
           matSuffix
           (click)="toggleAudioRecording.emit()"
-          [ngStyle]="{
-              'background-color': isAudioRecording ? 'rgb(234, 67, 53)' : 'rgb(51, 53, 55)'
-            }"
+          class="audio-rec-btn"
+          [class.recording]="isAudioRecording"
           [matTooltip]="isAudioRecording ? i18n.turnOffMicTooltip : i18n.useMicTooltip"
           [disabled]="!(isBidiStreamingEnabledObs | async)"
         >
@@ -389,9 +373,8 @@
           mat-icon-button
           matSuffix
           (click)="toggleVideoRecording.emit()"
-          [ngStyle]="{
-              'background-color': isVideoRecording ? 'rgb(234, 67, 53)' : 'rgb(51, 53, 55)'
-            }"
+          class="video-rec-btn"
+          [class.recording]="isVideoRecording"
           [matTooltip]="isVideoRecording ? i18n.turnOffCamTooltip : i18n.useCamTooltip"
           [disabled]="!(isBidiStreamingEnabledObs | async)"
         >