feat(compatibility): remove conflicts with material1 css styling

[andrewseguin]

This change establishes that styling of material components should be done using a 'mat' prefix rather than 'md'. This is necessary for apps that want to upgrade from AngularJS Material to Angular Material and host both versions at the same time on their page. Without this change, there would be styling conflicts between the two libraries.

BREAKING CHANGE: All styling now uses the 'mat' prefix rather than 'md'. This includes changes to variables such as md-core, md-elevation, md-light-theme, and so on. This was necessary to allow apps to host both AngularJS Material and Angular Material on the same page without styling conflicts.

The following sass variables have been renamed. See below the table for a list of regular expressions that you can run to automatically modify your code and rename these variables in your styling files.

Former	Current
md-core	mat-core
md-elevation	mat-elevation
md-core-theme	mat-core-theme
md-red	mat-red
md-pink	mat-pink
md-purple	mat-purple
md-deep-purple	mat-deep-purple
md-indigo	mat-indigo
md-blue	mat-blue
md-light-blue	mat-light-blue
md-cyan	mat-cyan
md-teal	mat-teal
md-green	mat-green
md-light-green	mat-light-green
md-lime	mat-lime
md-yellow	mat-yellow
md-amber	mat-amber
md-orange	mat-orange
md-deep-orange	mat-deep-orange
md-brown	mat-brown
md-grey	mat-grey
md-blue-grey	mat-blue-grey
md-contrast	mat-contrast
md-color	mat-color
md-palette	mat-palette
md-light-theme	mat-light-theme
md-dark-theme	mat-dark-theme
md-light-theme-background	mat-light-theme-background
md-dark-theme-background	mat-dark-theme-background
md-light-theme-foreground	mat-light-theme-foreground
md-dark-theme-foreground	mat-dark-theme-foreground

These regular expressions can be used from within your project directory to automatically search for all your files ending in *.scss or *.css and rename the variables listed in the table above. Note that this should only be run while in a directory that contains only your own source code. To double check what files will be changed, just run find . -type f -name "*.scss" -o -name "*.css" to see what will match.

find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-core/mat-core/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-elevation/mat-elevation/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-core-theme/mat-core-theme/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-red/mat-red/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-pink/mat-pink/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-purple/mat-purple/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-deep-purple/mat-deep-purple/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-indigo/mat-indigo/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-blue/mat-blue/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-light-blue/mat-light-blue/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-cyan/mat-cyan/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-teal/mat-teal/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-green/mat-green/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-light-green/mat-light-green/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-lime/mat-lime/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-yellow/mat-yellow/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-amber/mat-amber/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-orange/mat-orange/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-deep-orange/mat-deep-orange/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-brown/mat-brown/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-grey/mat-grey/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-blue-grey/mat-blue-grey/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-contrast/mat-contrast/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-color/mat-color/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-palette/mat-palette/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-light-theme/mat-light-theme/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-dark-theme/mat-dark-theme/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-light-theme-background/mat-light-theme-background/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-dark-theme-background/mat-dark-theme-background/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-light-theme-foreground/mat-light-theme-foreground/g'
find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/md-dark-theme-foreground/mat-dark-theme-foreground/g'

Note that all component styling has been changed from an .md- prefix to .mat-. The following is a script that will search through all your styling files (scss, css) and replace all instances of .md- with .mat-.

find . -type f -name "*.scss" -o -name "*.css"| xargs sed -i 's/\.md-/\.mat-/g'

[jelbourn]

LGTM if this is identical to previous PR

[andrewseguin]

Should be identical, good sign that tests pass. Dev site looks good to me as well.

[jelbourn]

LGTM

[benb7760]

@andrewseguin as far as I can see, this needs to be reflected in the material.angular.io site? Specifically https://material.angular.io/guide/theming

[andrewseguin]

It sure does, thanks for the callout. Will be fixed in #3013

[fxck]

Um.. how about components and directives, those are staying md- with optional mat-, or will the md- prefix be deprecated?

[andrewseguin]

The md- prefix is staying for components and directives, unless you turn on compatibility mode which forces you to use mat- for component and directive selectors. This is to allow projects to upgrade from AngularJS Material (1.x) to Angular Material (this version) without having their directives and styling collide.

In general, the rule going forward is that styling will be prefixed by mat- and selectors will be prefixed by md-.

[vdyalex]

Could you use semantic version on npm package for this update? Although the library still giving support to the directives with the previous prefix (md-), the scss declarations, mixins and variables doesn't have backward compatibility. It crashes the code of whom is reusing the mixins and variables for customize the styles of Material Design.

In this case, the most appropriate should improve the MAJOR on semver, that is better than just change from 2.0.0-beta.1 to 2.0.0-beta.2.

[ChristianBeilschmidt]

This is inconsistent. You should rename all components to mat- as well then.

[pabx06]

it worked for my styles thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}