diff --git a/docs/theming-your-components.md b/docs/theming-your-components.md index 916bef42d866..6481e5e222fe 100644 --- a/docs/theming-your-components.md +++ b/docs/theming-your-components.md @@ -14,7 +14,7 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss ```sass // Import all the tools needed to customize the theme and extract parts of it -@import '~@angular/material/src/lib/core/theming/all-theme'; +@import '~@angular/material/core/theming/all-theme'; // Define a mixin that accepts a theme and outputs the color styles for the component. @mixin candy-carousel-theme($theme) { @@ -33,7 +33,7 @@ Now you just have have to call the `@mixin` function to apply the theme: ```sass // Import a pre-built theme -@import '~@angular/material/src/lib/core/theming/prebuilt/deep-purple-amber'; +@import '~@angular/material/core/theming/prebuilt/deep-purple-amber'; // Import your custom input theme file so you can call the custom-input-theme function @import 'app/candy-carousel/candy-carousel-theme.scss'; @@ -53,11 +53,11 @@ Styles that are affected by the theme should be placed in a separated theming fi ## Using colors from a pallete -You can consume the theming functions from the `@angular/material/src/lib/core/theming/theming` and Material pallete vars from `@angular/material/src/lib/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example: +You can consume the theming functions from the `@angular/material/core/theming/theming` and Material pallete vars from `@angular/material/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example: ```scss // Import theming functions -@import '~@angular/material/src/lib/core/theming/theming'; +@import '~@angular/material/core/theming/theming'; // Import your custom theme @import 'src/unicorn-app-theme.scss'; diff --git a/docs/theming.md b/docs/theming.md index b9555842c79a..cef94c7b891e 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -29,12 +29,12 @@ You can include a theme file directly into your application from If you're using Angular CLI, this is as simple as including one line in your `style.css` file: ```css -@import '~@angular/material/src/lib/core/theming/prebuilt/deeppurple-amber.css'; +@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; ``` Alternatively, you can just reference the file directly. This would look something like ```html - + ``` The actual path will depend on your server setup. @@ -46,7 +46,7 @@ When you want more customization than a pre-built theme offers, you can create y A theme file is a simple Sass file that defines your palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this: ```scss -@import '~@angular/material/src/lib/core/theming/all-theme'; +@import '~@angular/material/core/theming/all-theme'; // Plus imports for other components in your app. // Include the base styles for Angular Material core. We include this here so that you only