refactor(material/core): update minimum required sass version and clean up workarounds (#23414)

Updates the minimum required version of Sass and cleans up some workarounds for `list.slash` and `math.div`.

BREAKING CHANGE:
* Material now requires at least version 1.34.0 of Sass. Version 1.38.0 is recommended.

Fixes #22915.

Author: crisbeto

package.json

@@ -214,7 +214,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.34.1",
+    "sass": "^1.38.0",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.4",
     "send": "^0.17.1",

src/material-experimental/mdc-card/card.scss

@@ -1,5 +1,5 @@
+@use 'sass:math';
 @use '@material/card' as mdc-card;
-@use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 
 // TODO(jelbourn): move header and title-group styles to their own files.
@@ -44,7 +44,7 @@ $mat-card-default-padding: 16px !default;
   // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with
   // the title, and add a margin bottom to create space underneath the header.
   .mat-mdc-card-subtitle {
-    margin-top: -(private.private-div($mat-card-default-padding, 2));
+    margin-top: -(math.div($mat-card-default-padding, 2));
     margin-bottom: $mat-card-default-padding;
   }
 }

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -1,8 +1,8 @@
+@use 'sass:map';
+@use 'sass:math';
 @use '@material/density' as mdc-density;
 @use '@material/textfield' as mdc-textfield;
-@use 'sass:map';
 @use '../../material/core/theming/theming';
-@use '../../material/core/style/private';
 @use 'form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
@@ -55,7 +55,7 @@
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $vertical-deduction: private.private-div(mdc-textfield.$height - $height, 2);
+  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
   // Map that describes the padding for form-fields with label.
   $with-label-padding: (
     top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
@@ -78,7 +78,7 @@
   // form-field because we do not know what type of form-field control is set up. Hence
   // we always use a fixed position for the label. This does not have any implications.
   .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
-    top: private.private-div($height, 2);
+    top: math.div($height, 2);
   }
 
   // For the outline appearance, we re-create the active floating label transform. This is

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
+@use 'sass:math';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 @use '../../material/core/theming/palette';
-@use '../../material/core/style/private';
 @use '@material/theme/theme-color' as mdc-theme-color;
 
 // Width of the Material Design form-field select arrow.
@@ -66,8 +66,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       content: '';
       width: 0;
       height: 0;
-      border-left: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
-      border-right: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
+      border-left: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
+      border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
       border-top: $mat-form-field-select-arrow-height solid;
       position: absolute;
       right: 0;

src/material-experimental/mdc-select/select.scss

@@ -1,8 +1,8 @@
+@use 'sass:math';
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '../../material/core/style/variables';
 @use '../../material/core/style/vendor-prefixes';
-@use '../../material/core/style/private';
 @use '../../cdk/a11y';
 
 $mat-select-arrow-size: 5px !default;
@@ -111,7 +111,7 @@ $scale: 0.75 !default;
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
   transition: color variables.$swift-ease-out-duration
-      private.private-div(variables.$swift-ease-out-duration, 3)
+      math.div(variables.$swift-ease-out-duration, 3)
       variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
@@ -143,7 +143,7 @@ $scale: 0.75 !default;
     }
 
     .mdc-floating-label--float-above {
-      $arrow-scale: private.private-div($mat-select-placeholder-arrow-space, $scale);
+      $arrow-scale: math.div($mat-select-placeholder-arrow-space, $scale);
       max-width: calc(100% / #{$scale} - #{$arrow-scale});
     }
   }

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

@@ -1,11 +1,11 @@
 @use 'sass:map';
+@use 'sass:math';
 @use '@material/switch/switch' as mdc-switch;
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
-@use '../../material/core/style/private';
 @use '../../cdk/a11y';
 
 @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
@@ -66,6 +66,6 @@
     // Usually 1px would be enough, but MDC reduces the opacity on the
     // element so we need to make this a bit more prominent.
     outline: solid 2px;
-    outline-offset: private.private-div(map.get(mdc-switch-theme.$light-theme, track-height), 2);
+    outline-offset: math.div(map.get(mdc-switch-theme.$light-theme, track-height), 2);
   }
 }

src/material/badge/_badge-theme.scss

@@ -4,10 +4,10 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:math';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $font-size: 12px;
@@ -29,13 +29,13 @@ $_badge-structure-emitted: false !default;
 
   &.mat-badge-above {
     .mat-badge-content {
-      top: private.private-div(-$size, 2);
+      top: math.div(-$size, 2);
     }
   }
 
   &.mat-badge-below {
     .mat-badge-content {
-      bottom: private.private-div(-$size, 2);
+      bottom: math.div(-$size, 2);
     }
   }
 
@@ -68,27 +68,27 @@ $_badge-structure-emitted: false !default;
   &.mat-badge-overlap {
     &.mat-badge-before {
       .mat-badge-content {
-        left: private.private-div(-$size, 2);
+        left: math.div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-before {
       .mat-badge-content {
         left: auto;
-        right: private.private-div(-$size, 2);
+        right: math.div(-$size, 2);
       }
     }
 
     &.mat-badge-after {
       .mat-badge-content {
-        right: private.private-div(-$size, 2);
+        right: math.div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-after {
       .mat-badge-content {
         right: auto;
-        left: private.private-div(-$size, 2);
+        left: math.div(-$size, 2);
       }
     }
   }

src/material/card/card.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../core/style/variables';
 @use '../core/style/elevation';
 @use '../core/style/private';
@@ -59,8 +60,8 @@ $header-size: 40px !default;
 
 .mat-card-actions {
   @extend %mat-card-section-base;
-  margin-left: private.private-div(-$padding, 2);
-  margin-right: private.private-div(-$padding, 2);
+  margin-left: math.div(-$padding, 2);
+  margin-right: math.div(-$padding, 2);
   padding: 8px 0;
 }
 

src/material/checkbox/checkbox.scss

@@ -18,7 +18,7 @@ $_ripple-radius: 20px;
 $_item-spacing: variables.$toggle-padding;
 
 // The width of the line used to draw the checkmark / mixedmark.
-$_mark-stroke-size: private.private-div(2, 15) * checkbox-common.$size !default;
+$_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
 
 
 // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.

src/material/core/option/option.scss

@@ -1,7 +1,7 @@
+@use 'sass:math';
 @use '../style/menu-common';
 @use '../style/vendor-prefixes';
 @use '../style/layout-common';
-@use '../style/private';
 @use '../../../cdk/a11y';
 
 .mat-option {
@@ -78,7 +78,7 @@
 }
 
 .mat-option-pseudo-checkbox {
-  $margin: private.private-div(menu-common.$side-padding, 2);
+  $margin: math.div(menu-common.$side-padding, 2);
   margin-right: $margin;
 
   [dir='rtl'] & {