use Angular Material overrides API (#6982)

Add `--mat-` prefixed variables alongside `--mdc-` variables because
Angular Material will be renaming these tokens internally. This rename
will occur in v20, which is used internally. The `--mdc-` tokens will
continue to be defined since this still depends on an older version of
Angular Material externally.

Includes necessary update to `tensorboard/pip_package/setup.cfg`, using
underscore instead of dash-case for `description_file`

```
python3.11/site-packages/setuptools/dist.py:452: SetuptoolsDeprecationWarning: Invalid dash-separated options      
              ********************************************************************************
              Usage of dash-separated 'description-file' will not be supported in future
              versions. Please use the underscore name 'description_file' instead.
      
              This deprecation is overdue, please update your project and remove deprecated
              calls to avoid build errors in the future.
      
              See https://setuptools.pypa.io/en/latest/userguide/declarative_config.html for details.
              ********************************************************************************
 
```

Author: andrewseguin

tensorboard/pip_package/setup.cfg

@@ -1,3 +1,3 @@
 [metadata]
-description-file = README.rst
+description_file = README.rst
 license_files = LICENSE

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_component.css

@@ -66,8 +66,11 @@ limitations under the License.
   position: absolute;
   right: 40px;
   --mdc-slider-handle-width: 80px;
+  --mat-slider-handle-width: 80px;
   --mdc-slider-handle-height: 16px;
+  --mat-slider-handle-height: 16px;
   --mdc-slider-handle-shape: 5px;
+  --mat-slider-handle-shape: 5px;
 }
 
 ::ng-deep .mat-mdc-focus-indicator {

tensorboard/webapp/theme/_tb_theme.template.scss

@@ -303,9 +303,13 @@ $tb-dark-theme: map_merge(
   body.dark-mode {
     mat-slider {
       --mdc-slider-handle-width: 12px;
+      --mat-slider-handle-width: 12px;
       --mdc-slider-handle-height: 12px;
+      --mat-slider-handle-height: 12px;
       --mdc-slider-active-track-height: 2px;
+      --mat-slider-active-track-height: 2px;
       --mdc-slider-inactive-track-height: 2px;
+      --mat-slider-inactive-track-height: 2px;
     }
 
     a,
@@ -315,9 +319,13 @@ $tb-dark-theme: map_merge(
       --tb-icon-button-width: 40px;
       --tb-icon-button-height: 40px;
       --mdc-text-button-label-text-tracking: normal;
+      --mat-text-button-label-text-tracking: normal;
       --mdc-filled-button-label-text-tracking: normal;
+      --mat-filled-button-label-text-tracking: normal;
       --mdc-outlined-button-label-text-tracking: normal;
+      --mat-outlined-button-label-text-tracking: normal;
       --mdc-protected-button-label-text-tracking: normal;
+      --mat-protected-button-label-text-tracking: normal;
 
       &[mat-icon-button].mat-mdc-icon-button {
         width: var(--tb-icon-button-width);