From 185caf98cfca88239b896facef4f4c62e315007c Mon Sep 17 00:00:00 2001
From: Jennifer Thakar <jathak@gmail.com>
Date: Fri, 10 Jul 2026 13:17:50 -0700
Subject: [PATCH 1/6] Migrate to the Sass module system

---
 .../debugger_component.scss                   |  8 +--
 .../execution_data_component.scss             |  6 +-
 .../views/graph/graph_component.scss          |  6 +-
 .../views/graph/graph_op_component.scss       | 12 ++--
 .../graph_executions_component.scss           | 14 ++---
 .../source_files/source_files_component.scss  |  4 +-
 .../stack_trace/stack_trace_component.scss    |  8 +--
 tensorboard/webapp/app_container.scss         |  4 +-
 .../webapp/core/views/layout_container.scss   |  6 +-
 .../views/feature_flag_dialog_component.scss  |  6 +-
 .../webapp/header/header_component.scss       |  2 +-
 .../header/plugin_selector_component.scss     |  6 +-
 .../card_renderer/card_view_container.scss    |  4 +-
 .../data_download_dialog_component.scss       |  2 +-
 .../histogram_card_component.scss             | 12 ++--
 .../card_renderer/image_card_component.scss   | 18 +++---
 .../card_renderer/run_name_component.scss     |  4 +-
 .../card_renderer/scalar_card_component.scss  | 25 +++++----
 .../scalar_card_line_chart_component.scss     |  4 +-
 ...nked_time_selection_warning_component.scss |  9 +--
 .../views/main_view/card_grid_component.scss  | 35 ++++++------
 .../card_group_toolbar_component.scss         | 18 +++---
 .../main_view/card_groups_component.scss      |  6 +-
 .../main_view/filter_input_component.scss     |  8 +--
 .../main_view/filtered_view_component.scss    | 12 ++--
 .../views/main_view/main_view_component.scss  | 55 ++++++++++---------
 .../main_view/pinned_view_component.scss      | 14 ++---
 .../metrics/views/metrics_container.scss      | 15 ++---
 .../saving_pins_checkbox_component.scss       |  6 +-
 .../scalar_column_editor_component.scss       | 17 +++---
 .../right_pane/settings_view_component.scss   | 18 +++---
 .../_views/notification_center_component.scss |  2 +-
 .../webapp/plugins/plugins_component.scss     | 17 +++---
 .../views/runs_table/filterbar_component.scss |  2 +-
 .../regex_edit_dialog_component.scss          | 16 +++---
 .../views/runs_table/runs_data_table.scss     |  6 +-
 .../runs_group_menu_button_component.scss     |  6 +-
 tensorboard/webapp/styles.scss                |  4 +-
 .../webapp/theme/_tb_theme.template.scss      | 44 +++++++--------
 tensorboard/webapp/theme/_variable.scss       |  9 +--
 .../widgets/card_fob/card_fob_component.scss  |  8 +--
 .../content_wrapping_input_component.scss     |  9 +--
 .../data_table/column_selector_component.scss | 18 +++---
 .../data_table/context_menu_component.scss    | 12 ++--
 .../data_table/data_table_component.scss      | 23 ++++----
 .../data_table/filter_dialog_component.scss   | 18 +++---
 .../data_table/header_cell_component.scss     |  5 +-
 .../widgets/dropdown/dropdown_component.scss  |  4 +-
 .../experiment_alias_component.scss           |  8 +--
 .../filter_input/filter_input_component.scss  |  4 +-
 .../histogram/histogram_component.scss        | 19 ++++---
 .../line_chart_v2/line_chart_component.scss   |  5 +-
 .../sub_view/line_chart_axis_view.scss        |  2 +-
 .../range_input/range_input_component.scss    |  2 +-
 54 files changed, 310 insertions(+), 297 deletions(-)

diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.scss
index 7035430de8b..82e8090f284 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.scss
@@ -12,11 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .bottom-section {
   box-sizing: border-box;
-  @include tb-theme-foreground-prop(border-top, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
   display: flex;
   flex-grow: 1;
   height: 34%;
@@ -38,7 +38,7 @@ limitations under the License.
 }
 
 tf-debugger-v2-alerts {
-  @include tb-theme-foreground-prop(border-right, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-right, border, 1px solid);
   display: inline-block;
   margin-right: 10px;
   min-width: 160px;
@@ -77,7 +77,7 @@ tf-debugger-v2-timeline {
 }
 
 tf-debugger-v2-graph {
-  @include tb-theme-foreground-prop(border-top, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
   display: block;
   margin-top: 5px;
 }
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
index d8c9105eebe..4eae5b568bd 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .debug-tensor-values-table {
   width: 100%;
@@ -52,7 +52,7 @@ limitations under the License.
   padding: 5px;
   width: 360px;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     background-color: mat.m2-get-color-from-palette(
       mat.$m2-orange-palette,
       900
@@ -67,7 +67,7 @@ limitations under the License.
 }
 
 .output-slot-container {
-  @include tb-theme-foreground-prop(border-top, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
   margin-top: 5px;
   padding: 2px 0;
   vertical-align: top;
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.scss
index 7f17a8eb4c0..92506cfad9c 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.scss
@@ -12,8 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common/lib';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common/lib';
 
 :host {
   overflow-y: auto;
@@ -52,7 +52,7 @@ limitations under the License.
 }
 
 .input-slot-header {
-  @include debugger-highlight-background;
+  @include lib.debugger-highlight-background;
 
   margin-bottom: 5px;
 }
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
index 627752f722f..6f5a5453343 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
@@ -13,8 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common/lib';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common/lib';
 
 .op-container,
 .op-name {
@@ -23,7 +23,7 @@ limitations under the License.
 }
 
 .op-container {
-  @include tb-theme-foreground-prop(border, border, 2px solid);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 2px solid);
   border-radius: 4px;
   box-shadow: 1px 3px #eee;
   cursor: pointer;
@@ -33,7 +33,7 @@ limitations under the License.
   width: 200px;
   $grey-600: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600);
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     box-shadow: 1px 3px $grey-600;
   }
 }
@@ -66,7 +66,7 @@ limitations under the License.
 }
 
 .op-type {
-  @include debugger-op-type;
+  @include lib.debugger-op-type;
   display: inline-block;
   margin-top: 3px;
 }
@@ -77,5 +77,5 @@ limitations under the License.
 }
 
 .slot {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
 }
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.scss
index a99788b0198..2a149787c66 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.scss
@@ -12,11 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common/lib';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common/lib';
 
 .graph-executions-container {
-  @include tb-theme-foreground-prop(border-left, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -29,7 +29,7 @@ limitations under the License.
 }
 
 .graph-execution-index {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   display: inline-block;
   padding-right: 4px;
   text-align: right;
@@ -49,7 +49,7 @@ limitations under the License.
 }
 
 .input-of-focus {
-  @include debugger-highlight-background;
+  @include lib.debugger-highlight-background;
 }
 
 .loading-spinner {
@@ -57,7 +57,7 @@ limitations under the License.
 }
 
 .op-type {
-  @include debugger-op-type;
+  @include lib.debugger-op-type;
   direction: rtl;
   display: block;
 }
@@ -67,7 +67,7 @@ limitations under the License.
 }
 
 .tensor-item {
-  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
   display: flex;
   flex-wrap: nowrap;
   height: 38px;
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.scss
index aa152cb40a9..6a6588a9645 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.scss
@@ -12,10 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .header-section {
-  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
   display: flex;
   height: 24px;
   padding-bottom: 6px;
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.scss
index 42101b64317..ac03796d87b 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.scss
@@ -12,8 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common/lib';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common/lib';
 
 .focused-file {
   font-weight: bold;
@@ -32,7 +32,7 @@ limitations under the License.
 }
 
 .op-type {
-  @include debugger-op-type;
+  @include lib.debugger-op-type;
 }
 
 .stack-frame-array {
@@ -81,7 +81,7 @@ limitations under the License.
 }
 
 .stack-trace-container {
-  @include tb-theme-foreground-prop(border-left, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
   box-sizing: border-box;
   display: flex;
   flex-flow: column;
diff --git a/tensorboard/webapp/app_container.scss b/tensorboard/webapp/app_container.scss
index 9586ef68402..e0e3857a7ea 100644
--- a/tensorboard/webapp/app_container.scss
+++ b/tensorboard/webapp/app_container.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 html,
 body {
@@ -34,7 +34,7 @@ app-header {
   flex: 0 0;
   z-index: 1; /* The box shadow needs to extend out of the app-header. */
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     box-shadow: 0 1px 3px 3px rgba(#fff, 0.1);
   }
 }
diff --git a/tensorboard/webapp/core/views/layout_container.scss b/tensorboard/webapp/core/views/layout_container.scss
index 8b437f2510e..274b42d4c8a 100644
--- a/tensorboard/webapp/core/views/layout_container.scss
+++ b/tensorboard/webapp/core/views/layout_container.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   display: flex;
@@ -29,7 +29,7 @@ limitations under the License.
 
 .resizer,
 .expand-collapsed-sidebar {
-  @include tb-theme-foreground-prop(border-color, border);
+  @include tb_theme.tb-theme-foreground-prop(border-color, border);
   box-sizing: border-box;
   flex: 0 0;
   justify-self: stretch;
@@ -72,7 +72,7 @@ limitations under the License.
     outline: 3px solid #ccc;
     z-index: 1;
 
-    @include tb-dark-theme {
+    @include tb_theme.tb-dark-theme {
       outline-color: #777;
       border-color: #777;
     }
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
index b9e631fb5eb..e3f9db74403 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
@@ -13,18 +13,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .message {
   .warning {
-    color: mat.m2-get-color-from-palette($tb-warn);
+    color: mat.m2-get-color-from-palette(tb_theme.$tb-warn);
   }
 
   margin-bottom: 16px;
 }
 
 .note-1 {
-  color: mat.m2-get-color-from-palette($tb-accent);
+  color: mat.m2-get-color-from-palette(tb_theme.$tb-accent);
 }
 
 .scrolling-page {
diff --git a/tensorboard/webapp/header/header_component.scss b/tensorboard/webapp/header/header_component.scss
index a48688f2ef3..3b7252d6b7a 100644
--- a/tensorboard/webapp/header/header_component.scss
+++ b/tensorboard/webapp/header/header_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 mat-toolbar {
   align-items: center;
diff --git a/tensorboard/webapp/header/plugin_selector_component.scss b/tensorboard/webapp/header/plugin_selector_component.scss
index 9b18aea3150..e653171c14d 100644
--- a/tensorboard/webapp/header/plugin_selector_component.scss
+++ b/tensorboard/webapp/header/plugin_selector_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   align-items: center;
@@ -33,7 +33,7 @@ limitations under the License.
   width: 144px;
 
   .mdc-text-field {
-    @include tb-theme-background-prop(background-color, app-bar);
+    @include tb_theme.tb-theme-background-prop(background-color, app-bar);
     // Default padding is "0 16px".
     padding: 0 4px;
   }
@@ -172,7 +172,7 @@ mat-option {
       }
 
       .mat-mdc-tab-header-pagination {
-        @include tb-theme-background-prop(background-color, app-bar);
+        @include tb_theme.tb-theme-background-prop(background-color, app-bar);
       }
     }
   }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/card_view_container.scss b/tensorboard/webapp/metrics/views/card_renderer/card_view_container.scss
index ca6daf99c8c..88678cd2187 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/card_view_container.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/card_view_container.scss
@@ -12,8 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  @include tb-theme-background-prop(background-color, background);
+  @include tb_theme.tb-theme-background-prop(background-color, background);
 }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.scss b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.scss
index f13a367e921..b21e56c1b57 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 h2 {
   font-size: 1.25em;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
index d76360a2b6b..bb7c8be665a 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
@@ -12,8 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 $_title-to-heading-gap: 12px;
 
@@ -21,13 +21,13 @@ $_title-to-heading-gap: 12px;
   box-sizing: border-box;
   display: flex;
   // Remove 2px from height to account for the card border.
-  flex-basis: $metrics-min-card-height - 2px;
+  flex-basis: common.$metrics-min-card-height - 2px;
   flex-direction: column;
   flex-grow: 1;
   height: 100%;
   overflow: auto;
-  padding: $metrics-preferred-gap;
-  padding-top: $metrics-preferred-gap - $_title-to-heading-gap;
+  padding: common.$metrics-preferred-gap;
+  padding-top: common.$metrics-preferred-gap - $_title-to-heading-gap;
 }
 
 .heading {
@@ -78,7 +78,7 @@ $_title-to-heading-gap: 12px;
 }
 
 .controls {
-  @include metrics-card-controls;
+  @include common.metrics-card-controls;
   grid-area: controls;
   justify-self: flex-end;
   flex-shrink: 0;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
index d7aebed24d3..d64ac4b680c 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -13,8 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 $_title-to-heading-gap: 12px;
 
@@ -22,13 +22,13 @@ $_title-to-heading-gap: 12px;
   box-sizing: border-box;
   display: flex;
   // Remove 2px from height to account for the card border.
-  flex-basis: $metrics-min-card-height - 2px;
+  flex-basis: common.$metrics-min-card-height - 2px;
   flex-direction: column;
   flex-grow: 1;
   height: 100%;
   overflow: auto;
-  padding: $metrics-preferred-gap;
-  padding-top: $metrics-preferred-gap - $_title-to-heading-gap;
+  padding: common.$metrics-preferred-gap;
+  padding-top: common.$metrics-preferred-gap - $_title-to-heading-gap;
 }
 
 :host.actual-size {
@@ -94,12 +94,12 @@ $_title-to-heading-gap: 12px;
 .run,
 .sample,
 .step {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   font-size: 13px;
 }
 
 .controls {
-  @include metrics-card-controls;
+  @include common.metrics-card-controls;
 
   justify-self: flex-end;
   flex-shrink: 0;
@@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px;
 }
 
 :host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
-  background-color: mat.m2-get-color-from-palette($tb-primary);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-primary);
 }
 
 :host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper {
@@ -172,7 +172,7 @@ $_title-to-heading-gap: 12px;
 }
 
 .linked-time-tick {
-  @include tb-theme-background-prop(background-color, selected-button);
+  @include tb_theme.tb-theme-background-prop(background-color, selected-button);
   border-radius: 50%;
   height: 12px;
   position: absolute;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/run_name_component.scss b/tensorboard/webapp/metrics/views/card_renderer/run_name_component.scss
index 6615c3d2bd0..a5915685701 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/run_name_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/run_name_component.scss
@@ -12,8 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
 }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index 6d350db4b83..f162e932e00 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -13,12 +13,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 $_title-to-heading-gap: 12px;
 
-$_card_padding_top: $metrics-preferred-gap - $_title-to-heading-gap;
+$_card_padding_top: common.$metrics-preferred-gap - $_title-to-heading-gap;
 
 // If this is changed, please also update canExpandTable
 $_data_table_initial_height: 100px;
@@ -28,14 +29,14 @@ $_data_table_initial_height: 100px;
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
-  padding: $metrics-preferred-gap;
+  padding: common.$metrics-preferred-gap;
   // When vertically centered, the title's text-top contains extra space above
   // the text, which counts towards the visually perceived white space.
   padding-top: $_card_padding_top;
 
   &:has(.expand-button) {
     // Remove the bottom padding when the expand button appears
-    padding: $_card_padding_top $metrics-preferred-gap 0;
+    padding: $_card_padding_top common.$metrics-preferred-gap 0;
   }
 }
 
@@ -49,7 +50,7 @@ $_data_table_initial_height: 100px;
 
   // The content that is always visible should match the min height of a card,
   // taking into account padding and 2px for the card border.
-  flex-basis: $metrics-min-card-height - 2px - ($metrics-preferred-gap * 2) +
+  flex-basis: common.$metrics-min-card-height - 2px - (common.$metrics-preferred-gap * 2) +
     $_title-to-heading-gap;
 }
 
@@ -81,7 +82,7 @@ $_data_table_initial_height: 100px;
 }
 
 .controls {
-  @include metrics-card-controls;
+  @include common.metrics-card-controls;
   flex-shrink: 0;
   // TODO(psybuzz) do not use negative margin.
   margin-right: -1 * $_title-to-heading-gap;
@@ -181,7 +182,7 @@ $_data_table_initial_height: 100px;
     // Replace this with backdrop-filter if opacity works.
     background-color: rgba(255, 255, 255, 0.5);
 
-    @include tb-dark-theme {
+    @include tb_theme.tb-dark-theme {
       background-color: rgba(0, 0, 0, 0.4);
     }
   }
@@ -205,11 +206,11 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, secondary-text);
 
-    @include tb-dark-theme {
-      color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
-      background-color: map-get($tb-dark-background, background);
+    @include tb_theme.tb-dark-theme {
+      color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, secondary-text);
+      background-color: map.get(tb_theme.$tb-dark-background, background);
     }
   }
 }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.scss
index b65232ffaff..b6ea490a0ef 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   display: flex;
@@ -54,7 +54,7 @@ line-chart {
     // Replace this with backdrop-filter if opacity works.
     background-color: rgba(255, 255, 255, 0.5);
 
-    @include tb-dark-theme {
+    @include tb_theme.tb-dark-theme {
       background-color: rgba(0, 0, 0, 0.4);
     }
   }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
index 567ca659654..9ebbc2ad34a 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
@@ -13,20 +13,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   color: mat.m2-get-color-from-palette(
-    map-get(mat.m2-get-color-config($tb-theme), warn),
+    map.get(mat.m2-get-color-config(tb_theme.$tb-theme), warn),
     700
   );
   height: 1em;
   line-height: 0;
   display: inline-flex;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     color: mat.m2-get-color-from-palette(
-      map-get(mat.m2-get-color-config($tb-dark-theme), warn),
+      map.get(mat.m2-get-color-config(tb_theme.$tb-dark-theme), warn),
       700
     );
   }
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_component.scss b/tensorboard/webapp/metrics/views/main_view/card_grid_component.scss
index c12d11cf3bf..617967c1763 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_component.scss
@@ -12,10 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
-$_background: map-get($tb-theme, background);
+$_background: map.get(tb_theme.$tb-theme, background);
 
 :host {
   contain: content;
@@ -25,10 +26,10 @@ $_background: map-get($tb-theme, background);
   display: grid;
   grid-template-columns: repeat(
     auto-fill,
-    minmax($metrics-min-card-width, 1fr)
+    minmax(common.$metrics-min-card-width, 1fr)
   );
-  gap: $metrics-preferred-gap;
-  padding: $metrics-preferred-gap;
+  gap: common.$metrics-preferred-gap;
+  padding: common.$metrics-preferred-gap;
 }
 
 .card-space.full-width {
@@ -37,7 +38,7 @@ $_background: map-get($tb-theme, background);
 }
 
 .card-space.full-height {
-  min-height: $metrics-min-card-height * 1.5;
+  min-height: common.$metrics-min-card-height * 1.5;
 
   card-view {
     height: 100%;
@@ -45,31 +46,31 @@ $_background: map-get($tb-theme, background);
 }
 
 card-view {
-  @include tb-theme-foreground-prop(border, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 4px;
   box-sizing: border-box;
   contain: layout paint;
   display: block;
   // Make sure the cards generally have some guaranteed minimum height to avoid
   // jank as cards load.
-  min-height: $metrics-min-card-height;
+  min-height: common.$metrics-min-card-height;
 }
 
 .group-controls {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   display: grid;
   align-items: center;
   grid-template-columns: 1fr 1fr;
-  gap: $metrics-preferred-gap;
-  padding: 0 $metrics-preferred-gap;
+  gap: common.$metrics-preferred-gap;
+  padding: 0 common.$metrics-preferred-gap;
 }
 
 .group-controls:first-of-type {
-  padding-top: $metrics-preferred-gap;
+  padding-top: common.$metrics-preferred-gap;
 }
 
 .group-controls:last-of-type {
-  padding-bottom: $metrics-preferred-gap;
+  padding-bottom: common.$metrics-preferred-gap;
 }
 
 .prev-container {
@@ -81,7 +82,7 @@ card-view {
 }
 
 .pagination-input {
-  margin-right: $metrics-preferred-gap;
+  margin-right: common.$metrics-preferred-gap;
 
   input {
     background: transparent;
@@ -92,8 +93,8 @@ card-view {
 }
 
 .pagination-button {
-  background-color: $metrics-button-background-color-on-gray;
-  @include tb-dark-theme {
+  background-color: common.$metrics-button-background-color-on-gray;
+  @include tb_theme.tb-dark-theme {
     background-color: transparent;
   }
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.scss b/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.scss
index 94cf19f9614..df910c6a75a 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/card_group_toolbar_component.scss
@@ -12,16 +12,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 :host {
-  @include metrics-sub-view;
+  @include common.metrics-sub-view;
 
   .group-toolbar {
     border: 0;
-    @include tb-theme-foreground-prop(border-top, border, 1px solid);
-    @include tb-theme-foreground-prop(color, text);
+    @include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(color, text);
     // border-top on group-toolbar needs to be offset on sticky header for the
     // flawless UI.
     top: -1px;
@@ -39,10 +39,10 @@ limitations under the License.
 }
 
 .expand-group-icon {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
 
   &:disabled {
-    @include tb-theme-foreground-prop(color, disabled-text);
+    @include tb_theme.tb-theme-foreground-prop(color, disabled-text);
   }
 }
 
@@ -52,10 +52,10 @@ limitations under the License.
 }
 
 .group-title {
-  @include metrics-card-group-title;
+  @include common.metrics-card-group-title;
 }
 
 .group-card-count {
-  @include metrics-card-group-count-text;
+  @include common.metrics-card-group-count-text;
   margin-left: 6px;
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/card_groups_component.scss b/tensorboard/webapp/metrics/views/main_view/card_groups_component.scss
index 46d1124e2a7..68a54aaafd4 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_groups_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/card_groups_component.scss
@@ -12,9 +12,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 :host {
-  @include metrics-sub-view;
+  @include common.metrics-sub-view;
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
index e55ad820ba8..e1b213d32fc 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .tag-filter {
   display: flex;
@@ -25,10 +25,10 @@ tb-filter-input {
 }
 
 :host {
-  @include tb-theme-foreground-prop(color, text);
+  @include tb_theme.tb-theme-foreground-prop(color, text);
 
   &:not(.valid) {
-    $_error-color: mat.m2-get-color-from-palette($tb-warn, 800);
+    $_error-color: mat.m2-get-color-from-palette(tb_theme.$tb-warn, 800);
 
     color: $_error-color;
 
@@ -54,6 +54,6 @@ tb-filter-input {
   }
 
   .and-more {
-    @include tb-theme-foreground-prop(color, secondary-text);
+    @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   }
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/filtered_view_component.scss b/tensorboard/webapp/metrics/views/main_view/filtered_view_component.scss
index e34c74407a1..a8aa8503419 100644
--- a/tensorboard/webapp/metrics/views/main_view/filtered_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/filtered_view_component.scss
@@ -12,11 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 :host {
-  @include metrics-sub-view;
+  @include common.metrics-sub-view;
 }
 
 .group-text {
@@ -25,15 +25,15 @@ limitations under the License.
 }
 
 .group-title {
-  @include metrics-card-group-title;
+  @include common.metrics-card-group-title;
 }
 
 .group-card-count {
-  @include metrics-card-group-count-text;
+  @include common.metrics-card-group-count-text;
   margin-left: 6px;
 }
 
 metrics-empty-tag-match {
-  @include metrics-empty-message;
+  @include common.metrics-empty-message;
   display: block;
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
index 7d44f260c51..fe8bf4cf212 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -13,8 +13,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 :host {
   display: flex;
@@ -23,22 +24,22 @@ limitations under the License.
 }
 
 .toolbar {
-  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
   flex: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 48px;
-  padding: 0 $metrics-preferred-gap;
+  padding: 0 common.$metrics-preferred-gap;
 
   metrics-tag-filter {
     flex: 1 1 100px;
   }
 
   .right-items {
-    @include tb-theme-foreground-prop(border-left, border, 1px solid);
-    margin-left: $metrics-preferred-gap;
-    padding-left: $metrics-preferred-gap;
+    @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
+    margin-left: common.$metrics-preferred-gap;
+    padding-left: common.$metrics-preferred-gap;
   }
 }
 
@@ -48,7 +49,7 @@ limitations under the License.
 // appearance. Either the buttons should be replaced with `mat-button-toggle` or the
 // `mat-button-toggle-group` should be removed.
 mat-button-toggle-group.filter-view {
-  @include tb-theme-foreground-prop(border, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
 }
 
 .filter-view {
@@ -68,11 +69,11 @@ mat-button-toggle-group.filter-view {
     padding: 0 12px;
 
     & + button {
-      @include tb-theme-foreground-prop(border-left, border, 1px solid);
+      @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
     }
 
     &[aria-checked='true'] {
-      @include tb-theme-background-prop(background-color, selected-button);
+      @include tb_theme.tb-theme-background-prop(background-color, selected-button);
     }
   }
 }
@@ -86,30 +87,30 @@ mat-button-toggle-group.filter-view {
 .main,
 .sidebar {
   contain: strict;
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
   overflow-x: hidden;
   overflow-y: auto;
   will-change: transform, scroll-position;
 
-  @include tb-dark-theme {
-    background-color: map-get($tb-dark-background, background);
+  @include tb_theme.tb-dark-theme {
+    background-color: map.get(tb_theme.$tb-dark-background, background);
   }
 }
 
 .main {
-  background-color: mat.m2-get-color-from-palette($tf-slate, 200);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tf-slate, 200);
   flex: 1 1;
   display: flex;
   flex-direction: column;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     // There are no slate color that looks very natural and nice.
     background-color: #3a3a3a;
   }
 
   metrics-filtered-view,
   metrics-pinned-view {
-    @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
   }
 
   &.filter-view {
@@ -131,16 +132,16 @@ mat-button-toggle-group.filter-view {
 }
 
 .sidebar {
-  @include tb-theme-foreground-prop(border-left, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
   flex: 0 0 250px;
 
   .header {
-    @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 42px;
-    padding: 0 $metrics-preferred-gap;
+    padding: 0 common.$metrics-preferred-gap;
 
     .title {
       font-size: 18px;
@@ -153,15 +154,15 @@ mat-button-toggle-group.filter-view {
 
 /** TODO(psybuzz): consider making a tb-button instead. */
 :host .settings-button {
-  color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
+  color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, secondary-text);
   display: inline-flex;
 
-  @include tb-dark-theme {
-    color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
+  @include tb_theme.tb-dark-theme {
+    color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, secondary-text);
   }
 
   &.checked {
-    @include tb-theme-background-prop(background-color, selected-button);
+    @include tb_theme.tb-theme-background-prop(background-color, selected-button);
     border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
   }
 
@@ -176,7 +177,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .slide-out-menu {
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
   // Make the menu the full height minus the size of the toolbar.
   height: calc(100% - 49px);
   position: absolute;
@@ -186,10 +187,10 @@ mat-button-toggle-group.filter-view {
   visibility: hidden;
   width: 200px;
 
-  @include tb-theme-foreground-prop(border-left, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
 
-  @include tb-dark-theme {
-    background-color: map-get($tb-dark-background, background);
+  @include tb_theme.tb-dark-theme {
+    background-color: map.get(tb_theme.$tb-dark-background, background);
   }
 }
 
diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
index bc4fcd4a453..ea852a4b746 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
@@ -13,15 +13,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
-@import '../common';
+@use 'tensorboard/webapp/theme/tb_theme';
+@use '../common';
 
 :host {
-  @include metrics-sub-view;
+  @include common.metrics-sub-view;
 }
 
 mat-icon {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   flex: none;
   margin-right: 5px;
 }
@@ -52,15 +52,15 @@ mat-icon {
 }
 
 .group-title {
-  @include metrics-card-group-title;
+  @include common.metrics-card-group-title;
 }
 
 .group-card-count {
-  @include metrics-card-group-count-text;
+  @include common.metrics-card-group-count-text;
 }
 
 .empty-message {
-  @include metrics-empty-message;
+  @include common.metrics-empty-message;
 }
 
 .new-card-pinned {
diff --git a/tensorboard/webapp/metrics/views/metrics_container.scss b/tensorboard/webapp/metrics/views/metrics_container.scss
index 146980a3945..c974914d3bc 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.scss
+++ b/tensorboard/webapp/metrics/views/metrics_container.scss
@@ -13,7 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   contain: strict;
@@ -31,7 +32,7 @@ limitations under the License.
   );
   $yellow-500: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 500);
   border-bottom: 1px solid $yellow-500;
-  color: map-get($tb-foreground, text);
+  color: map.get(tb_theme.$tb-foreground, text);
   display: block;
   flex: 0 0;
 }
@@ -42,16 +43,16 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
-  $border: mat.m2-get-color-from-palette($tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  $border: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
   border-right: 1px solid $border;
   flex: none;
   width: 340px;
 
-  @include tb-dark-theme {
-    background-color: map-get($tb-dark-background, background);
+  @include tb_theme.tb-dark-theme {
+    background-color: map.get(tb_theme.$tb-dark-background, background);
     border-right-color: mat.m2-get-color-from-palette(
-      $tb-dark-foreground,
+      tb_theme.$tb-dark-foreground,
       border
     );
   }
diff --git a/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss b/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss
index cb377055058..087a661fa73 100644
--- a/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss
@@ -12,10 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   font-size: 12px;
 }
 
@@ -25,7 +25,7 @@ mat-checkbox {
   margin-left: -11px;
 
   ::ng-deep label {
-    @include tb-theme-foreground-prop(color, secondary-text);
+    @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
     font-size: 12px;
     letter-spacing: normal;
     padding-left: 0px;
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
index 1e26434754c..9389a33ba4c 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
@@ -13,9 +13,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
+$_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
 
 :host ::ng-deep .mat-tab-label {
   min-width: 0;
@@ -62,20 +63,20 @@ $_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
-  $border: mat.m2-get-color-from-palette($tb-foreground, border);
+  $border: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
   border-top: 1px solid $border;
 
-  @include tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+  @include tb_theme.tb-dark-theme {
+    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
   }
 }
 
 .close-button {
-  color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
+  color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, secondary-text);
   width: 84px;
 
-  @include tb-dark-theme {
-    color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
+  @include tb_theme.tb-dark-theme {
+    color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, secondary-text);
   }
 }
 
diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
index 76d0bcde3bc..4212a92972c 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -13,20 +13,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   font-size: 12px;
 }
 
 section {
-  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
   padding: 16px;
 }
 
 .section-title {
-  @include tb-theme-foreground-prop(color, text);
+  @include tb_theme.tb-theme-foreground-prop(color, text);
   text-transform: uppercase;
   font-weight: 500;
   font-size: 13px;
@@ -59,7 +59,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
 
 .slider-input {
   background-color: inherit;
-  border: 1px solid mat.m2-get-color-from-palette($tf-slate, 500);
+  border: 1px solid mat.m2-get-color-from-palette(tb_theme.$tf-slate, 500);
   border-radius: 2px;
   box-sizing: border-box;
   color: inherit;
@@ -67,8 +67,8 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
   margin-left: 12px;
   padding: 0 4px;
 
-  @include tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette($tf-slate, 700);
+  @include tb_theme.tb-dark-theme {
+    border-color: mat.m2-get-color-from-palette(tb_theme.$tf-slate, 700);
   }
 }
 
@@ -109,7 +109,7 @@ mat-checkbox {
   margin-left: -11px;
 
   ::ng-deep label {
-    @include tb-theme-foreground-prop(color, secondary-text);
+    @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
     font-size: 12px;
     letter-spacing: normal;
     padding-left: 0px;
@@ -142,7 +142,7 @@ mat-slider {
   &.toggle-opened {
     background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
 
-    @include tb-dark-theme {
+    @include tb_theme.tb-dark-theme {
       background-color: mat.m2-get-color-from-palette(
         mat.$m2-grey-palette,
         800
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
index 2c3eaa0c412..43d64a6badc 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_component.scss
+++ b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .notification-icon-button {
   position: relative;
diff --git a/tensorboard/webapp/plugins/plugins_component.scss b/tensorboard/webapp/plugins/plugins_component.scss
index d83804eb911..5a020b31bec 100644
--- a/tensorboard/webapp/plugins/plugins_component.scss
+++ b/tensorboard/webapp/plugins/plugins_component.scss
@@ -12,21 +12,22 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  background-color: map-get($tb-background, background);
-  color: map-get($tb-foreground, text);
+  background-color: map.get(tb_theme.$tb-background, background);
+  color: map.get(tb_theme.$tb-foreground, text);
   display: block;
   position: relative;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     // There is no great way to style iframe, especially given that they
     // can generate nested iframes. Opt-out of styling non-first-party plugins for
     // now.
     .plugins.is-first-party-plugin {
-      background-color: map-get($tb-dark-background, background);
-      color: map-get($tb-dark-foreground, text);
+      background-color: map.get(tb_theme.$tb-dark-background, background);
+      color: map.get(tb_theme.$tb-dark-foreground, text);
     }
   }
 }
@@ -37,7 +38,7 @@ limitations under the License.
 }
 
 .warning {
-  @include tb-theme-background-prop(background, background);
+  @include tb_theme.tb-theme-background-prop(background, background);
   bottom: 0;
   left: 0;
   position: absolute;
@@ -46,7 +47,7 @@ limitations under the License.
 }
 
 .warning-message {
-  @include tb-theme-foreground-prop(color, text);
+  @include tb_theme.tb-theme-foreground-prop(color, text);
   margin: 80px auto 0;
   max-width: 540px;
 }
diff --git a/tensorboard/webapp/runs/views/runs_table/filterbar_component.scss b/tensorboard/webapp/runs/views/runs_table/filterbar_component.scss
index 6239ce62ec2..ee32c457da4 100644
--- a/tensorboard/webapp/runs/views/runs_table/filterbar_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/filterbar_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .filterbar {
   display: flex;
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
index 0804e4c7f5d..d3cff5ba4c4 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 $padding-size: 16px;
 
@@ -23,9 +23,9 @@ $padding-size: 16px;
     border: none;
     cursor: pointer;
     text-decoration: underline;
-    @include tb-theme-foreground-prop(color, link);
+    @include tb_theme.tb-theme-foreground-prop(color, link);
     &:visited {
-      @include tb-theme-foreground-prop(color, link-visited);
+      @include tb_theme.tb-theme-foreground-prop(color, link-visited);
     }
   }
   padding: $padding-size;
@@ -39,13 +39,13 @@ $padding-size: 16px;
   }
 
   .warning {
-    @include tb-theme-foreground-prop(color, secondary-text);
+    @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
     font-size: 0.9em;
   }
 }
 
 .grouping-preview {
-  @include tb-theme-foreground-prop(border, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
   max-height: 50vh;
   overflow-y: auto;
   padding: $padding-size;
@@ -78,13 +78,13 @@ mat-form-field {
 }
 
 .group {
-  @include tb-theme-foreground-prop(border, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 3px;
   margin: 0;
   padding: $padding-size;
 
   label {
-    @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
     align-items: center;
     display: grid;
     gap: 10px;
@@ -111,7 +111,7 @@ mat-form-field {
 
   .more,
   .no-match {
-    @include tb-theme-foreground-prop(color, secondary-text);
+    @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
     margin-top: $padding-size;
   }
 }
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
index bea12ccd70a..7bf2e7eba9f 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 $_circle-size: 20px;
 
 :host {
@@ -28,7 +28,7 @@ $_circle-size: 20px;
 
 .run-color-swatch {
   border-radius: 100%;
-  border: 1px solid mat.m2-get-color-from-palette($tb-foreground, border);
+  border: 1px solid mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
   height: $_circle-size;
   width: $_circle-size;
   outline: none;
@@ -50,7 +50,7 @@ tb-data-table-content-cell,
 tb-data-table-header-cell {
   padding: 0 4px;
   vertical-align: middle;
-  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
 }
 
 .table-column-selected,
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
index efc7ec0e9cf..2c255c62e79 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
@@ -13,13 +13,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 ::ng-deep .run-table-color-group-by {
   font-size: 16px;
 
   .label {
-    color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, secondary-text);
     font-size: 0.9em;
     margin: 10px 0;
     padding: 0 16px;
@@ -34,7 +34,7 @@ limitations under the License.
     padding-left: 40px;
 
     .none-set-string {
-      @include tb-theme-foreground-prop(color, secondary-text);
+      @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
     }
   }
 }
diff --git a/tensorboard/webapp/styles.scss b/tensorboard/webapp/styles.scss
index 65b5e2d0a61..835f2a17c2e 100644
--- a/tensorboard/webapp/styles.scss
+++ b/tensorboard/webapp/styles.scss
@@ -13,6 +13,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
-@include tb-global-themed-styles();
+@include tb_theme.tb-global-themed-styles();
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 8f49384728b..e8fefcdd81b 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -51,7 +51,7 @@ $tb-theme: mat.m2-define-light-theme(
 );
 
 // Overriding mat-light-theme-foreground variables.
-$tb-foreground: map_merge(
+$tb-foreground: map.merge(
   mat.$m2-light-theme-foreground-palette,
   (
     text: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 900),
@@ -63,7 +63,7 @@ $tb-foreground: map_merge(
     link-visited: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 700),
   )
 );
-$tb-background: map_merge(
+$tb-background: map.merge(
   mat.$m2-light-theme-background-palette,
   (
     app-bar: $tb-app-bar-color,
@@ -72,7 +72,7 @@ $tb-background: map_merge(
   )
 );
 
-$tb-theme: map_merge(
+$tb-theme: map.merge(
   $tb-theme,
   (
     foreground: $tb-foreground,
@@ -80,20 +80,20 @@ $tb-theme: map_merge(
   )
 );
 
-$color: map_merge(
-  map_get($tb-theme, 'color'),
+$color: map.merge(
+  map.get($tb-theme, 'color'),
   (
     foreground: $tb-foreground,
     background: $tb-background,
   )
 );
-$tb-theme: map_merge(
+$tb-theme: map.merge(
   $tb-theme,
   (
     color: $color,
   )
 );
-$tb-theme: map_merge(
+$tb-theme: map.merge(
   $tb-theme,
   color,
   system,
@@ -113,8 +113,8 @@ $tb-dark-theme: mat.m2-define-dark-theme(
     density: 0,
   )
 );
-$tb-dark-foreground: map_merge(
-  map-get(mat.m2-get-color-config($tb-dark-theme), foreground),
+$tb-dark-foreground: map.merge(
+  map.get(mat.m2-get-color-config($tb-dark-theme), foreground),
   (
     border: #555,
     disabled-text: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 700),
@@ -122,13 +122,13 @@ $tb-dark-foreground: map_merge(
     link-visited: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 300),
   )
 );
-$tb-dark-background: map_merge(
-  map-get(mat.m2-get-color-config($tb-dark-theme), background),
+$tb-dark-background: map.merge(
+  map.get(mat.m2-get-color-config($tb-dark-theme), background),
   (
     app-bar: $tb-dark-app-bar-color,
   )
 );
-$tb-dark-theme: map_merge(
+$tb-dark-theme: map.merge(
   $tb-dark-theme,
   (
     background: $tb-dark-background,
@@ -136,14 +136,14 @@ $tb-dark-theme: map_merge(
   )
 );
 
-$color-dark: map_merge(
-  map_get($tb-dark-theme, 'color'),
+$color-dark: map.merge(
+  map.get($tb-dark-theme, 'color'),
   (
     foreground: $tb-dark-foreground,
     background: $tb-dark-background,
   )
 );
-$tb-dark-theme: map_merge(
+$tb-dark-theme: map.merge(
   $tb-dark-theme,
   (
     color: $color-dark,
@@ -184,8 +184,8 @@ $tb-dark-theme: map_merge(
   $dict-name,
   $css-value-prefix
 ) {
-  $light-color: map-get($foreground-or-background, $dict-name);
-  $dark-color: map-get($dark-foreground-or-background, $dict-name);
+  $light-color: map.get($foreground-or-background, $dict-name);
+  $dark-color: map.get($dark-foreground-or-background, $dict-name);
 
   @if (not $light-color) {
     @error "Name '#{$dict-name}' is not found in light #{$object-name}.";
@@ -300,10 +300,10 @@ $tb-dark-theme: map_merge(
   }
 
   a:not(.mdc-button, .mdc-icon-button) {
-    color: map-get($tb-foreground, link);
+    color: map.get($tb-foreground, link);
 
     &:visited {
-      color: map-get($tb-foreground, link-visited);
+      color: map.get($tb-foreground, link-visited);
     }
   }
 
@@ -358,13 +358,13 @@ $tb-dark-theme: map_merge(
   // Cannot use `tb-dark-theme` as :host-context in the global stylesheet is
   // meaningless.
   body.dark-mode {
-    background-color: map-get($tb-dark-background, background);
+    background-color: map.get($tb-dark-background, background);
 
     a:not(.mdc-button, .mdc-icon-button) {
-      color: map-get($tb-dark-foreground, link);
+      color: map.get($tb-dark-foreground, link);
 
       &:visited {
-        color: map-get($tb-dark-foreground, link-visited);
+        color: map.get($tb-dark-foreground, link-visited);
       }
     }
 
diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss
index f569fcc1d25..e8cace66db6 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -17,11 +17,12 @@ limitations under the License.
 // `_tb_theme.template.scss` also calls `mat.*` symbols. Keep this `@use` so
 // the concatenated `_tb_theme.scss` compiles.
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_palette';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_palette';
 
-$tb-primary: mat.m2-define-palette($tf-orange, 700, 400, 800);
-$tb-accent: mat.m2-define-palette($tf-orange);
+$tb-primary: mat.m2-define-palette(tb_palette.$tf-orange, 700, 400, 800);
+$tb-accent: mat.m2-define-palette(tb_palette.$tf-orange);
 $tb-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$tb-dark-primary: mat.m2-define-palette($tf-orange, 800, 600, 900);
+$tb-dark-primary: mat.m2-define-palette(tb_palette.$tf-orange, 800, 600, 900);
 $tb-dark-accent: $tb-dark-primary;
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
index f6a4004ff9b..4bd6b7b03c1 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   display: inline-block;
@@ -61,7 +61,7 @@ span {
   color: inherit;
   display: inline-block;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700);
   }
 }
@@ -85,7 +85,7 @@ button {
     height: 110%;
   }
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700);
   }
 }
@@ -95,7 +95,7 @@ button:hover {
   color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
   cursor: pointer;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700);
     color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
   }
diff --git a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss
index 6dcd97e11d5..e1fa53ae672 100644
--- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss
+++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss
@@ -14,25 +14,26 @@ limitations under the License.
 ==============================================================================*/
 
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   display: inline-flex;
   width: max-content;
 
   &:focus-within .container {
-    border-color: mat.m2-get-color-from-palette($tb-primary, 700);
+    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-primary, 700);
   }
 
   &.default {
     &:hover .container {
-      border-color: map-get($tb-foreground, border);
+      border-color: map.get(tb_theme.$tb-foreground, border);
     }
   }
 
   &.error .container,
   .container:not(.is-valid) {
-    $_error-color: mat.m2-get-color-from-palette($tb-warn, 200);
+    $_error-color: mat.m2-get-color-from-palette(tb_theme.$tb-warn, 200);
     border-color: $_error-color;
 
     &:hover,
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.scss b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
index 14fc39d3340..2c5ab92ba76 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .contents {
   display: flex;
@@ -25,13 +25,13 @@ limitations under the License.
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
-  border-color: mat.m2-get-color-from-palette($tb-foreground, border);
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  border-color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
 
-  @include tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+  @include tb_theme.tb-dark-theme {
+    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
     background-color: mat.m2-get-color-from-palette(
-      $tb-dark-background,
+      tb_theme.$tb-dark-background,
       'background'
     );
   }
@@ -49,7 +49,7 @@ limitations under the License.
   }
 
   .load-more-columns {
-    color: mat.m2-get-color-from-palette($tb-warn, 600);
+    color: mat.m2-get-color-from-palette(tb_theme.$tb-warn, 600);
     display: flex;
     flex-direction: column;
     margin-top: 6px;
@@ -85,7 +85,7 @@ limitations under the License.
         200
       );
 
-      @include tb-dark-theme {
+      @include tb_theme.tb-dark-theme {
         background-color: mat.m2-get-color-from-palette(
           mat.$m2-grey-palette,
           400
@@ -95,7 +95,7 @@ limitations under the License.
   }
 
   .tag {
-    background-color: mat.m2-get-color-from-palette($tb-primary, 500);
+    background-color: mat.m2-get-color-from-palette(tb_theme.$tb-primary, 500);
     border-radius: 8px;
     font-size: 12px;
     font-style: italic;
diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.scss b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
index 66103932dee..8f4b1d0ef36 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .context-menu {
   display: flex;
@@ -22,13 +22,13 @@ limitations under the License.
   border-radius: 4px;
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-color: mat.m2-get-color-from-palette($tb-foreground, border);
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  border-color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
 
-  @include tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+  @include tb_theme.tb-dark-theme {
+    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
     background-color: mat.m2-get-color-from-palette(
-      $tb-dark-background,
+      tb_theme.$tb-dark-background,
       'background'
     );
   }
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.scss b/tensorboard/webapp/widgets/data_table/data_table_component.scss
index d156c48351a..7136af960af 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -13,9 +13,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
+$_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
 
 .data-table-wrapper {
   display: flex;
@@ -23,11 +24,11 @@ $_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
   &.should-add-borders {
     .left-section,
     .right-section {
-      @include tb-theme-foreground-prop(border-top, border, 1px solid);
+      @include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
     }
 
     .add-button-column {
-      @include tb-theme-foreground-prop(border-left, border, 1px solid);
+      @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
     }
   }
 }
@@ -38,7 +39,7 @@ $_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
   width: 100%;
 
   .header {
-    background-color: mat.m2-get-color-from-palette($tb-background, background);
+    background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
     display: table-row;
     font-weight: bold;
     position: sticky;
@@ -51,8 +52,8 @@ $_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
       cursor: pointer;
     }
 
-    @include tb-dark-theme {
-      background-color: map-get($tb-dark-background, background);
+    @include tb_theme.tb-dark-theme {
+      background-color: map.get(tb_theme.$tb-dark-background, background);
     }
   }
 }
@@ -60,7 +61,7 @@ $_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
 .loading {
   align-items: center;
   border: 0;
-  @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
   display: flex;
   height: 48px;
   padding: 0 24px;
@@ -72,13 +73,13 @@ $_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
 }
 
 .right-section {
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
   position: sticky;
   right: -1px; // Prevent fractional width from creating a gap.
   z-index: 1;
 
-  @include tb-dark-theme {
-    background-color: map-get($tb-dark-background, background);
+  @include tb_theme.tb-dark-theme {
+    background-color: map.get(tb_theme.$tb-dark-background, background);
   }
 
   .add-button-column {
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
index a6c76cb2fd9..f78fa018a5b 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
@@ -13,20 +13,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .filter-dialog {
   padding: 16px 8px;
   border-radius: 4px;
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-color: mat.m2-get-color-from-palette($tb-foreground, border);
-  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  border-color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
 
-  @include tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+  @include tb_theme.tb-dark-theme {
+    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
     background-color: mat.m2-get-color-from-palette(
-      $tb-dark-background,
+      tb_theme.$tb-dark-background,
       'background'
     );
   }
@@ -50,12 +50,12 @@ limitations under the License.
 .filter-container {
   padding-bottom: 8px;
   margin-bottom: 8px;
-  $border: mat.m2-get-color-from-palette($tb-foreground, border);
+  $border: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
   border-bottom: 1px solid $border;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     border-bottom-color: mat.m2-get-color-from-palette(
-      $tb-dark-foreground,
+      tb_theme.$tb-dark-foreground,
       border
     );
   }
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 13814adc717..364e3ba8012 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -14,9 +14,10 @@ limitations under the License.
 ==============================================================================*/
 
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
+$_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
 $_icon_size: 12px;
 $_icon_padding: 4px;
 
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index 6438358ad6b..e4ec7cb3414 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -13,10 +13,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 mat-select {
-  border: 1px solid mat.m2-get-color-from-palette($tf-slate, 500);
+  border: 1px solid mat.m2-get-color-from-palette(tb_theme.$tf-slate, 500);
   border-radius: 3px;
   box-sizing: border-box;
   padding: 6px;
diff --git a/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.scss b/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.scss
index 1a5be1e9288..9b19f09b961 100644
--- a/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.scss
+++ b/tensorboard/webapp/widgets/experiment_alias/experiment_alias_component.scss
@@ -12,12 +12,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 .alias-number {
-  @include tb-theme-background-prop(background-color, unselected-chip);
-  @include tb-theme-foreground-prop(border, border, 1px solid);
-  @include tb-theme-foreground-prop(color, text);
+  @include tb_theme.tb-theme-background-prop(background-color, unselected-chip);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(color, text);
 
   border-radius: 2px;
   margin-right: 2px;
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_component.scss b/tensorboard/webapp/widgets/filter_input/filter_input_component.scss
index 3be3f01d392..014bc39558e 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_component.scss
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   display: flex;
@@ -21,7 +21,7 @@ limitations under the License.
 }
 
 mat-icon {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   flex: none;
   margin-right: 5px;
 }
diff --git a/tensorboard/webapp/widgets/histogram/histogram_component.scss b/tensorboard/webapp/widgets/histogram/histogram_component.scss
index bf8a474a0cc..356b668d907 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_component.scss
+++ b/tensorboard/webapp/widgets/histogram/histogram_component.scss
@@ -12,7 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host,
 .main {
@@ -43,7 +44,7 @@ limitations under the License.
 .baseline {
   color: #000;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     color: #fff;
   }
 }
@@ -67,7 +68,7 @@ limitations under the License.
 }
 
 .axis ::ng-deep {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   position: relative;
   overflow: hidden;
 
@@ -126,8 +127,8 @@ svg {
 .axis ::ng-deep .tick line {
   stroke: #ddd;
 
-  @include tb-dark-theme {
-    stroke: map-get($tb-dark-foreground, border);
+  @include tb_theme.tb-dark-theme {
+    stroke: map.get(tb_theme.$tb-dark-foreground, border);
   }
 }
 
@@ -181,7 +182,7 @@ svg {
       stroke-opacity: 0.2;
     }
 
-    @include tb-dark-theme {
+    @include tb_theme.tb-dark-theme {
       color: rgba(#333, 0.4) !important;
     }
   }
@@ -192,8 +193,8 @@ svg {
   path {
     stroke: #fff;
 
-    @include tb-dark-theme {
-      stroke: map-get($tb-dark-foreground, border);
+    @include tb_theme.tb-dark-theme {
+      stroke: map.get(tb_theme.$tb-dark-foreground, border);
     }
   }
 
@@ -201,7 +202,7 @@ svg {
     path {
       stroke: #000;
 
-      @include tb-dark-theme {
+      @include tb_theme.tb-dark-theme {
         stroke: #fff;
       }
     }
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
index 157bcd22673..eea7f3e2eef 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.scss
@@ -12,7 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'sass:map';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   contain: strict;
@@ -53,7 +54,7 @@ limitations under the License.
   // of the Angular app and want to control the dark mode styling based on
   // the component prop alone.
   &.dark-mode {
-    color: map-get($tb-dark-foreground, text);
+    color: map.get(tb_theme.$tb-dark-foreground, text);
   }
   // We does not want to render x-axis and y axis in line only mode. Thus
   // we also removes the spaces the axis take.
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index 5c28d83d8e4..52d17e0e4fe 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   contain: strict;
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.scss b/tensorboard/webapp/widgets/range_input/range_input_component.scss
index 64e971c1d09..3d3cc6f3a2b 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_component.scss
+++ b/tensorboard/webapp/widgets/range_input/range_input_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@import 'tensorboard/webapp/theme/tb_theme';
+@use 'tensorboard/webapp/theme/tb_theme';
 
 :host {
   box-sizing: border-box;

From 6abfda558fc4d432b4169123ae8d75e333925c2a Mon Sep 17 00:00:00 2001
From: Jennifer Thakar <jathak@gmail.com>
Date: Fri, 10 Jul 2026 15:42:37 -0700
Subject: [PATCH 2/6] Add a couple of missing implicit dependencies

---
 .../tf_debugger_v2_plugin/views/common/BUILD       |  5 ++++-
 .../tf_debugger_v2_plugin/views/common/_lib.scss   |  5 +++--
 tensorboard/webapp/metrics/views/BUILD             |  3 +++
 tensorboard/webapp/metrics/views/_common.scss      | 14 ++++++++------
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/BUILD b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/BUILD
index 912022e2f91..29177cc473d 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/BUILD
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/BUILD
@@ -7,5 +7,8 @@ licenses(["notice"])
 sass_library(
     name = "style_lib",
     srcs = ["_lib.scss"],
-    deps = ["//tensorboard/webapp/angular_components:material_sass"],
+    deps = [
+        "//tensorboard/webapp/angular_components:material_sass",
+        "//tensorboard/webapp/theme",
+    ],
 )
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
index d621513661b..c97217ea9d4 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
@@ -13,13 +13,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use 'tensorboard/webapp/theme/tb_theme';
 
 @mixin debugger-op-type {
   background-color: mat.m2-get-color-from-palette(
     mat.$m2-blue-grey-palette,
     50
   );
-  @include tb-theme-foreground-prop(border, border, 1px solid);
+  @include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 4px;
   font-family: 'Roboto Mono', monospace;
   font-size: 10px;
@@ -28,7 +29,7 @@ limitations under the License.
   padding: 1px 3px;
   width: max-content;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     background-color: mat.m2-get-color-from-palette(
       mat.$m2-blue-grey-palette,
       700
diff --git a/tensorboard/webapp/metrics/views/BUILD b/tensorboard/webapp/metrics/views/BUILD
index 0812e35767e..39a19cd61e2 100644
--- a/tensorboard/webapp/metrics/views/BUILD
+++ b/tensorboard/webapp/metrics/views/BUILD
@@ -8,6 +8,9 @@ sass_library(
     srcs = [
         "_common.scss",
     ],
+    deps = [
+        "//tensorboard/webapp/theme",
+    ]
 )
 
 sass_binary(
diff --git a/tensorboard/webapp/metrics/views/_common.scss b/tensorboard/webapp/metrics/views/_common.scss
index 9416052bf7c..ddd6ead2345 100644
--- a/tensorboard/webapp/metrics/views/_common.scss
+++ b/tensorboard/webapp/metrics/views/_common.scss
@@ -12,6 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use 'tensorboard/webapp/theme/tb_theme';
+
 $metrics-preferred-gap: 16px;
 
 // TODO(psybuzz): This is likely not metrics-specific. Consider moving to OSS in
@@ -23,8 +25,8 @@ $metrics-min-card-height: 320px;
 
 @mixin metrics-sub-view {
   .group-toolbar {
-    @include tb-theme-background-prop(background-color, background);
-    @include tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-background-prop(background-color, background);
+    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
 
     align-items: center;
     background-color: #fff;
@@ -41,7 +43,7 @@ $metrics-min-card-height: 320px;
     z-index: 1;
 
     box-shadow: 0px 2px 4px 0px rgba(#000, 15%);
-    @include tb-dark-theme {
+    @include tb_theme.tb-dark-theme {
       box-shadow: 0px 2px 4px 0px rgba(#fff, 15%);
     }
   }
@@ -55,16 +57,16 @@ $metrics-min-card-height: 320px;
 @mixin metrics-card-group-count-text {
   font-size: 12px;
   font-weight: 400;
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
 }
 
 @mixin metrics-card-controls {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   white-space: nowrap;
 }
 
 @mixin metrics-empty-message {
-  @include tb-theme-foreground-prop(color, secondary-text);
+  @include tb_theme.tb-theme-foreground-prop(color, secondary-text);
   font-size: 13px;
   font-style: italic;
   padding: 16px;

From 72ad972c773dbe9bcc755fce4b631dc443faaed0 Mon Sep 17 00:00:00 2001
From: Jennifer Thakar <jathak@gmail.com>
Date: Fri, 10 Jul 2026 15:45:35 -0700
Subject: [PATCH 3/6] Run formatter

---
 tensorboard/webapp/metrics/views/_common.scss |  6 ++-
 .../card_renderer/scalar_card_component.scss  | 14 ++++--
 .../views/main_view/main_view_component.scss  | 43 +++++++++++++++----
 .../metrics/views/metrics_container.scss      |  5 ++-
 .../scalar_column_editor_component.scss       | 10 ++++-
 .../regex_edit_dialog_component.scss          |  6 ++-
 .../views/runs_table/runs_data_table.scss     |  3 +-
 .../runs_group_menu_button_component.scss     |  5 ++-
 .../data_table/column_selector_component.scss | 10 ++++-
 .../data_table/context_menu_component.scss    | 10 ++++-
 .../data_table/data_table_component.scss      | 16 +++++--
 .../data_table/filter_dialog_component.scss   | 10 ++++-
 12 files changed, 110 insertions(+), 28 deletions(-)

diff --git a/tensorboard/webapp/metrics/views/_common.scss b/tensorboard/webapp/metrics/views/_common.scss
index ddd6ead2345..b1089188fbe 100644
--- a/tensorboard/webapp/metrics/views/_common.scss
+++ b/tensorboard/webapp/metrics/views/_common.scss
@@ -26,7 +26,11 @@ $metrics-min-card-height: 320px;
 @mixin metrics-sub-view {
   .group-toolbar {
     @include tb_theme.tb-theme-background-prop(background-color, background);
-    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(
+      border-bottom,
+      border,
+      1px solid
+    );
 
     align-items: center;
     background-color: #fff;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index f162e932e00..6dc545c97e5 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -50,8 +50,8 @@ $_data_table_initial_height: 100px;
 
   // The content that is always visible should match the min height of a card,
   // taking into account padding and 2px for the card border.
-  flex-basis: common.$metrics-min-card-height - 2px - (common.$metrics-preferred-gap * 2) +
-    $_title-to-heading-gap;
+  flex-basis: common.$metrics-min-card-height - 2px -
+    (common.$metrics-preferred-gap * 2) + $_title-to-heading-gap;
 }
 
 .heading {
@@ -206,10 +206,16 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-foreground,
+      secondary-text
+    );
 
     @include tb_theme.tb-dark-theme {
-      color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, secondary-text);
+      color: mat.m2-get-color-from-palette(
+        tb_theme.$tb-dark-foreground,
+        secondary-text
+      );
       background-color: map.get(tb_theme.$tb-dark-background, background);
     }
   }
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
index fe8bf4cf212..f2439809bf3 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -69,11 +69,18 @@ mat-button-toggle-group.filter-view {
     padding: 0 12px;
 
     & + button {
-      @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
+      @include tb_theme.tb-theme-foreground-prop(
+        border-left,
+        border,
+        1px solid
+      );
     }
 
     &[aria-checked='true'] {
-      @include tb_theme.tb-theme-background-prop(background-color, selected-button);
+      @include tb_theme.tb-theme-background-prop(
+        background-color,
+        selected-button
+      );
     }
   }
 }
@@ -87,7 +94,10 @@ mat-button-toggle-group.filter-view {
 .main,
 .sidebar {
   contain: strict;
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
   overflow-x: hidden;
   overflow-y: auto;
   will-change: transform, scroll-position;
@@ -110,7 +120,11 @@ mat-button-toggle-group.filter-view {
 
   metrics-filtered-view,
   metrics-pinned-view {
-    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(
+      border-bottom,
+      border,
+      1px solid
+    );
   }
 
   &.filter-view {
@@ -136,7 +150,11 @@ mat-button-toggle-group.filter-view {
   flex: 0 0 250px;
 
   .header {
-    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(
+      border-bottom,
+      border,
+      1px solid
+    );
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -158,11 +176,17 @@ mat-button-toggle-group.filter-view {
   display: inline-flex;
 
   @include tb_theme.tb-dark-theme {
-    color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-dark-foreground,
+      secondary-text
+    );
   }
 
   &.checked {
-    @include tb_theme.tb-theme-background-prop(background-color, selected-button);
+    @include tb_theme.tb-theme-background-prop(
+      background-color,
+      selected-button
+    );
     border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
   }
 
@@ -177,7 +201,10 @@ mat-button-toggle-group.filter-view {
 }
 
 .slide-out-menu {
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
   // Make the menu the full height minus the size of the toolbar.
   height: calc(100% - 49px);
   position: absolute;
diff --git a/tensorboard/webapp/metrics/views/metrics_container.scss b/tensorboard/webapp/metrics/views/metrics_container.scss
index c974914d3bc..8c405f0c528 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.scss
+++ b/tensorboard/webapp/metrics/views/metrics_container.scss
@@ -43,7 +43,10 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
   $border: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
   border-right: 1px solid $border;
   flex: none;
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
index 9389a33ba4c..5596fb77b36 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
@@ -67,7 +67,10 @@ $_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
   border-top: 1px solid $border;
 
   @include tb_theme.tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
+    border-color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-dark-foreground,
+      border
+    );
   }
 }
 
@@ -76,7 +79,10 @@ $_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
   width: 84px;
 
   @include tb_theme.tb-dark-theme {
-    color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-dark-foreground,
+      secondary-text
+    );
   }
 }
 
diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
index d3cff5ba4c4..4f09c21a454 100644
--- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.scss
@@ -84,7 +84,11 @@ mat-form-field {
   padding: $padding-size;
 
   label {
-    @include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
+    @include tb_theme.tb-theme-foreground-prop(
+      border-bottom,
+      border,
+      1px solid
+    );
     align-items: center;
     display: grid;
     gap: 10px;
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
index 7bf2e7eba9f..653b6c94317 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -28,7 +28,8 @@ $_circle-size: 20px;
 
 .run-color-swatch {
   border-radius: 100%;
-  border: 1px solid mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
+  border: 1px solid
+    mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
   height: $_circle-size;
   width: $_circle-size;
   outline: none;
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
index 2c255c62e79..039af0564be 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
@@ -19,7 +19,10 @@ limitations under the License.
   font-size: 16px;
 
   .label {
-    color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-foreground,
+      secondary-text
+    );
     font-size: 0.9em;
     margin: 10px 0;
     padding: 0 16px;
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.scss b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
index 2c5ab92ba76..b7151d97a06 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -26,10 +26,16 @@ limitations under the License.
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
   border-color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
 
   @include tb_theme.tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
+    border-color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-dark-foreground,
+      border
+    );
     background-color: mat.m2-get-color-from-palette(
       tb_theme.$tb-dark-background,
       'background'
diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.scss b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
index 8f4b1d0ef36..07b60480f61 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
@@ -23,10 +23,16 @@ limitations under the License.
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
 
   @include tb_theme.tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
+    border-color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-dark-foreground,
+      border
+    );
     background-color: mat.m2-get-color-from-palette(
       tb_theme.$tb-dark-background,
       'background'
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.scss b/tensorboard/webapp/widgets/data_table/data_table_component.scss
index 7136af960af..f09574812fe 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -28,7 +28,11 @@ $_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
     }
 
     .add-button-column {
-      @include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
+      @include tb_theme.tb-theme-foreground-prop(
+        border-left,
+        border,
+        1px solid
+      );
     }
   }
 }
@@ -39,7 +43,10 @@ $_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
   width: 100%;
 
   .header {
-    background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+    background-color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-background,
+      background
+    );
     display: table-row;
     font-weight: bold;
     position: sticky;
@@ -73,7 +80,10 @@ $_accent: map.get(mat.m2-get-color-config(tb_theme.$tb-theme), accent);
 }
 
 .right-section {
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
   position: sticky;
   right: -1px; // Prevent fractional width from creating a gap.
   z-index: 1;
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
index f78fa018a5b..f109b4f0cbe 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
@@ -21,10 +21,16 @@ limitations under the License.
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-color: mat.m2-get-color-from-palette(tb_theme.$tb-foreground, border);
-  background-color: mat.m2-get-color-from-palette(tb_theme.$tb-background, background);
+  background-color: mat.m2-get-color-from-palette(
+    tb_theme.$tb-background,
+    background
+  );
 
   @include tb_theme.tb-dark-theme {
-    border-color: mat.m2-get-color-from-palette(tb_theme.$tb-dark-foreground, border);
+    border-color: mat.m2-get-color-from-palette(
+      tb_theme.$tb-dark-foreground,
+      border
+    );
     background-color: mat.m2-get-color-from-palette(
       tb_theme.$tb-dark-background,
       'background'

From 33e99770bc8bbcb62bca756407cb19b63264e538 Mon Sep 17 00:00:00 2001
From: Jennifer Thakar <jathak@gmail.com>
Date: Fri, 10 Jul 2026 16:52:50 -0700
Subject: [PATCH 4/6] Forward palette from theme

---
 tensorboard/webapp/theme/_variable.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss
index e8cace66db6..a68c3cd5f05 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -14,11 +14,12 @@ limitations under the License.
 ==============================================================================*/
 // Note: `_variable.scss` is concatenated into `_tb_theme.scss` by the
 // //tensorboard/webapp/theme:inline_palette genrule, where
-// `_tb_theme.template.scss` also calls `mat.*` symbols. Keep this `@use` so
+// `_tb_theme.template.scss` also calls `mat.*` symbols. Keep these `@use`s so
 // the concatenated `_tb_theme.scss` compiles.
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use 'tensorboard/webapp/theme/tb_palette';
+@forward 'tensorboard/webapp/theme/tb_palette';
 
 $tb-primary: mat.m2-define-palette(tb_palette.$tf-orange, 700, 400, 800);
 $tb-accent: mat.m2-define-palette(tb_palette.$tf-orange);

From dbcfa8cac94f6b87da4b9664aed4ab533bb680d7 Mon Sep 17 00:00:00 2001
From: Jennifer Thakar <jathak@gmail.com>
Date: Fri, 10 Jul 2026 16:55:49 -0700
Subject: [PATCH 5/6] Format build file

---
 tensorboard/webapp/metrics/views/BUILD | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tensorboard/webapp/metrics/views/BUILD b/tensorboard/webapp/metrics/views/BUILD
index 39a19cd61e2..89beac68106 100644
--- a/tensorboard/webapp/metrics/views/BUILD
+++ b/tensorboard/webapp/metrics/views/BUILD
@@ -10,7 +10,7 @@ sass_library(
     ],
     deps = [
         "//tensorboard/webapp/theme",
-    ]
+    ],
 )
 
 sass_binary(

From 0a10a7b359fff71a544437448c47448b2811f8a7 Mon Sep 17 00:00:00 2001
From: Jennifer Thakar <jathak@gmail.com>
Date: Mon, 13 Jul 2026 09:04:32 -0700
Subject: [PATCH 6/6] Fix remaining missing namespace

---
 .../debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
index c97217ea9d4..0731831403f 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
@@ -40,7 +40,7 @@ limitations under the License.
 @mixin debugger-highlight-background {
   background-color: #fff099;
 
-  @include tb-dark-theme {
+  @include tb_theme.tb-dark-theme {
     background-color: mat.m2-get-color-from-palette(
       mat.$m2-orange-palette,
       900