docs: consistent links to Material spec (#11288)

Currently we've got links either pointing to google.com/design or material.io. These changes make everything consistent by pointing everything to material.io. Also fixes a couple of links that were pointing to a 404.

Author: crisbeto

guides/elevation.md

@@ -1,7 +1,7 @@
 Angular Material's elevation classes and mixins allow you to add separation between elements along
 the z-axis. All material design elements have resting elevations. In addition, some elements may
 change their elevation in response to user interaction. The
-[Material Design spec](https://material.io/guidelines/material-design/elevation-shadows.html)
+[Material Design spec](https://material.io/design/environment/elevation.html)
 explains how to best use elevation.
 
 Angular Material provides two ways to control the elevation of elements: predefined CSS classes

guides/theming-your-components.md

@@ -47,14 +47,18 @@ For more details about the theming functions, see the comments in the
 #### Best practices using `@mixin`
 When using `@mixin`, the theme file should only contain the definitions that are affected by the passed-in theme.
 
-All styles that are not affected by the theme should be placed in a `candy-carousel.scss` file. This file should contain everything that is not affected by the theme like sizes, transitions...
+All styles that are not affected by the theme should be placed in a `candy-carousel.scss` file.
+This file should contain everything that is not affected by the theme like sizes, transitions...
 
-Styles that are affected by the theme should be placed in a separated theming file as `_candy-carousel-theme.scss` and the file should have a `_` before the name. This file should contain the `@mixin` function responsible for applying the theme to the component.
+Styles that are affected by the theme should be placed in a separated theming file as
+`_candy-carousel-theme.scss` and the file should have a `_` before the name. This file should
+contain the `@mixin` function responsible for applying the theme to the component.
 
 
 ### Using colors from a palette
-You can consume the theming functions and Material palette variables from `@angular/material/theming`.
-You can use the `mat-color` function to extract a specific color from a palette. For example:
+You can consume the theming functions and Material palette variables from
+`@angular/material/theming`. You can use the `mat-color` function to extract a specific color
+from a palette. For example:
 
 ```scss
 // Import theming functions
@@ -67,7 +71,7 @@ You can use the `mat-color` function to extract a specific color from a palette.
 // hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
 // For example a hue of "darker-contrast" gives a light color to contrast with a "darker" hue.
 // Note that quotes are needed when using a numeric hue with the "-contrast" modifier.
-// Available color palettes: https://www.google.com/design/spec/style/color.html
+// Available color palettes: https://material.io/design/color/
 .candy-carousel {
   background-color: mat-color($candy-app-primary);
   border-color: mat-color($candy-app-accent, A400);

guides/theming.md

@@ -75,7 +75,7 @@ A typical theme file will look something like this:
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
+// hue. Available color palettes: https://material.io/design/color/
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
 

src/lib/checkbox/checkbox.ts

@@ -93,7 +93,7 @@ export const _MatCheckboxMixinBase =
  * disabled. Note that all additional accessibility attributes are taken care of by the component,
  * so there is no need to provide them yourself. However, if you want to omit a label and still
  * have the checkbox be accessible, you may supply an [aria-label] input.
- * See: https://www.google.com/design/spec/components/selection-controls.html
+ * See: https://material.io/design/components/selection-controls.html
  */
 @Component({
   moduleId: module.id,

src/lib/core/gestures/gesture-config.ts

@@ -51,7 +51,7 @@ export class GestureConfig extends HammerGestureConfig {
    * Builds Hammer instance manually to add custom recognizers that match the Material Design spec.
    *
    * Our gesture names come from the Material Design gestures spec:
-   * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics
+   * https://material.io/design/#gestures-touch-mechanics
    *
    * More information on default recognizers can be found in Hammer docs:
    * http://hammerjs.github.io/recognizer-pan/

src/lib/core/style/_elevation.scss

@@ -3,7 +3,7 @@
 
 // A collection of mixins and CSS classes that can be used to apply elevation to a material
 // element.
-// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
+// See: https://material.io/design/environment/elevation.html
 // Examples:
 //
 //

src/lib/core/theming/_palette.scss

@@ -1,5 +1,5 @@
 // Color palettes from the Material Design spec.
-// See https://www.google.com/design/spec/style/color.html
+// See https://material.io/design/color/
 //
 // Contrast colors are hard-coded because it is too difficult (probably impossible) to
 // calculate them. These contrast colors are pulled from the public Material Design spec swatches.

src/lib/grid-list/grid-list.md

@@ -1,5 +1,5 @@
-`mat-grid-list` is a two-dimensional list view that arranges cells into grid-based layout. 
-See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html).
+`mat-grid-list` is a two-dimensional list view that arranges cells into grid-based layout.
+See Material Design spec [here](https://material.io/design/components/image-lists.html).
 
 <!-- example(grid-list-overview) -->
 
@@ -13,21 +13,21 @@ items.
 
 The height of the rows in a grid list can be set via the `rowHeight` attribute. Row height for the
 list can be calculated in three ways:
-                                                                                
-1. **Fixed height**: The height can be in `px`, `em`, or `rem`.  If no units are specified, `px` 
+
+1. **Fixed height**: The height can be in `px`, `em`, or `rem`.  If no units are specified, `px`
 units are assumed (e.g. `100px`, `5em`, `250`).
-        
+
 2. **Ratio**: This ratio is column-width:row-height, and must be passed in with a colon, not a
 decimal (e.g. `4:3`).
-        
+
 3. **Fit**:  Setting `rowHeight` to `fit` This mode automatically divides the available height by
-the number of rows.  Please note the height of the grid-list or its container must be set.  
+the number of rows.  Please note the height of the grid-list or its container must be set.
 
-If `rowHeight` is not specified, it defaults to a `1:1` ratio of width:height. 
+If `rowHeight` is not specified, it defaults to a `1:1` ratio of width:height.
 
 ### Setting the gutter size
 
-The gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property.  If no 
+The gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property.  If no
 units are specified, `px` units are assumed. By default the gutter size is `1px`.
 
 ### Adding tiles that span multiple rows or columns

src/lib/schematics/shell/custom-theme.ts

@@ -16,7 +16,7 @@ return `
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
+// hue. Available color palettes: https://material.io/design/color/
 $${name}-primary: mat-palette($mat-indigo);
 $${name}-accent: mat-palette($mat-pink, A200, A100, A400);
 

src/lib/tabs/tab-group.ts

@@ -59,7 +59,7 @@ export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBa
 /**
  * Material design tab-group component.  Supports basic tab pairs (label + content) and includes
  * animated ink-bar, keyboard navigation, and screen reader.
- * See: https://www.google.com/design/spec/components/tabs.html
+ * See: https://material.io/design/components/tabs.html
  */
 @Component({
   moduleId: module.id,