Migrate to the Sass module system (#7142)

## Motivation for features / changes

`@import` is deprecated in Sass and will be removed from the language in
Dart Sass 3.0.0.

## Technical description of changes

`@import` rules in Sass code migrated to equivalent `@use` rules using
the [Sass migrator](https://sass-lang.com/documentation/cli/migrator/),
with namespaces added for any variables/mixins from dependencies. Calls
to the global `map-get` and `map-merge` functions have been replaced
with the `map.get` and `map.merge` functions in the `sass:map` built-in
module, with the `@use` rule added as necessary.

## Screenshots of UI changes (or N/A)

N/A, this is a no-op change.

## Detailed steps to verify changes work correctly (as executed by you)

This is part of an internal LSC. I don't have the context of how this
code is actually used or the bandwidth to set up a full development
environment to test, but the migration is straightforward enough that
I'm fairly confident your CI would catch anything if it broke. See the
internal bug I'm filing for more information and alternatives if this
isn't something you're comfortable merging at this time.

## Alternate designs / implementations considered (or N/A)

N/A

Author: jathak

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;
 }

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",
+    ],
 )

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
@@ -39,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

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;

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;
 }

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);
 }

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,15 +49,15 @@ limitations under the License.
 }
 
 .input-of-focus {
-  @include debugger-highlight-background;
+  @include lib.debugger-highlight-background;
 }
 
 .loading-spinner {
   display: inline-block;
 }
 
 .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;

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;

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;

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);
   }
 }