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