fix(shape): Rename surface term with component. (#3761)

BREAKING CHANGE: Renamed shape global variables from `$mdc-shape-*-surface-radius` to `$mdc-shape-*-component-radius`

packages/mdc-shape/README.md

@@ -43,9 +43,9 @@ Components are categorized as small, medium and large in shape system. Overridin
 
 Variable | Description
 --- | ---
-`$mdc-shape-small-surface-radius` | Rounded shape radius size for small surface components. Default value `4px`.
-`$mdc-shape-medium-surface-radius` | Rounded shape radius size for medium surface components. Default value `8px`.
-`$mdc-shape-large-surface-radius` | Rounded shape radius size for large surface components. Default value `0`.
+`$mdc-shape-small-component-radius` | Rounded shape radius size for small components. Default value `4px`.
+`$mdc-shape-medium-component-radius` | Rounded shape radius size for medium components. Default value `4px`.
+`$mdc-shape-large-component-radius` | Rounded shape radius size for large components. Default value `0`.
 
 Please refer [Material Design guidelines: Shape](https://material.io/go/design-shape) to learn about how components are categorized.
 

packages/mdc-shape/_variables.scss

@@ -21,13 +21,13 @@
 //
 
 // Shape categories
-$mdc-shape-small-surface-radius: 4px !default;
-$mdc-shape-medium-surface-radius: 4px !default;
-$mdc-shape-large-surface-radius: 0 !default;
+$mdc-shape-small-component-radius: 4px !default;
+$mdc-shape-medium-component-radius: 4px !default;
+$mdc-shape-large-component-radius: 0 !default;
 
 // Shape category mapping.
 $mdc-shape-category-values: (
-  small: $mdc-shape-small-surface-radius,
-  medium: $mdc-shape-medium-surface-radius,
-  large: $mdc-shape-large-surface-radius,
+  small: $mdc-shape-small-component-radius,
+  medium: $mdc-shape-medium-component-radius,
+  large: $mdc-shape-large-component-radius,
 );