feat: Add mdc-theme classes mixin (close #67)

README.md

@@ -100,7 +100,26 @@ Vue.use(Card)
 
 ## theming
 
-#### SASS
+### MDC classes
+
+For simple color modifications of components e.g. changing the background color from primary to secondary color it is
+possible to use the `theming` prop on each component to set one of the mdc-theme CSS classes.
+You don't need to set the full name of the css class just the last part (see example). For a complete list of available 
+CSS classes have a look [here](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme#css-classes).
+
+```html
+<m-button theming="secondary-bg">
+  Secondary-Button
+</m-button>
+```
+
+```html
+<style lang="scss">
+  @import "material-components-vue/dist/theme/styles";
+</style>
+```
+
+### SASS
 
 Import all SASS files for the imported components and override with SASS variables:
 
@@ -109,9 +128,9 @@ Import all SASS files for the imported components and override with SASS variabl
   $mdc-theme-primary: #2196f3;
   $mdc-theme-secondary: #ff1744;
   $mdc-theme-background: #f5f5f5;
-  @import "~material-components-vue/dist/theme/styles";
-  @import "~material-components-vue/dist/button/styles";
-  @import "~material-components-vue/dist/card/styles";
+  @import "material-components-vue/dist/theme/styles";
+  @import "material-components-vue/dist/button/styles";
+  @import "material-components-vue/dist/card/styles";
   @import url('https://cdnjs.com/libraries/normalize');
   @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
   @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@@ -121,7 +140,7 @@ Import all SASS files for the imported components and override with SASS variabl
 Don't forget to include the `@material` directory of your `node_modules` in your sass-loader options.
 Otherwise the components won't compile sucessfully.
 
-#### CSS custom properties
+### CSS custom properties
 
 Integrate a theme component in your template and pass in an object with CSS custom properties, but keep browser compatibilty in mind.
 

components/button/Button.vue

@@ -23,8 +23,10 @@
 
 <script>
 import { MDCRipple } from '@material/ripple'
+import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
+  mixins: [themeClassMixin],
   props: {
     raised: {
       type: Boolean,

components/card/Card.vue

@@ -25,7 +25,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     stroked: {
       type: Boolean,

components/card/CardMedia.vue

@@ -9,8 +9,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
+  mixins: [themeClassMixin],
   props: {
     square: {
       type: Boolean,

components/checkbox/Checkbox.vue

@@ -22,7 +22,10 @@
 
 <script>
 import { MDCCheckbox } from '@material/checkbox'
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   model: {
     prop: 'checked',
     event: 'change'

components/chips/Chip.vue

@@ -17,7 +17,10 @@
 <script>
 import { MDCChip } from '@material/chips'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   data () {
     return {
       mdcChip: null

components/chips/ChipSet.vue

@@ -9,7 +9,10 @@
 <script>
 import { MDCChipSet } from '@material/chips'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     choice: {
       type: Boolean,

components/dialog/Dialog.vue

@@ -31,7 +31,10 @@
 <script>
 import { MDCDialog } from '@material/dialog'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     scrollable: {
       type: Boolean,

components/drawer/DrawerContent.vue

@@ -5,3 +5,12 @@
     <slot />
   </nav>
 </template>
+
+<script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>
+

components/drawer/DrawerHeader.vue

@@ -7,3 +7,11 @@
     </div>
   </header>
 </template>
+
+<script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>

components/drawer/DrawerPermanent/DrawerPermanent.vue

@@ -4,3 +4,11 @@
     <slot />
   </nav>
 </template>
+
+<script>
+import themeClassMixin from '../../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>

components/drawer/DrawerPersistent/DrawerPersistent.vue

@@ -13,7 +13,10 @@
 <script>
 import { MDCPersistentDrawer } from '@material/drawer'
 
+import themeClassMixin from '../../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     initialOpen: {
       type: Boolean,

components/drawer/DrawerTemporary/DrawerTemporary.vue

@@ -13,7 +13,10 @@
 <script>
 import { MDCTemporaryDrawer } from '@material/drawer'
 
+import themeClassMixin from '../../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     initialOpen: {
       type: Boolean,

components/drawer/DrawerToolbarSpacer.vue

@@ -3,3 +3,11 @@
     <slot/>
   </div>
 </template>
+
+<script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>

components/elevation/Elevation.vue

@@ -5,7 +5,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     level: {
       type: Number,

components/fab/Fab.vue

@@ -9,7 +9,11 @@
 
 <script>
 import { MDCRipple } from '@material/ripple'
+
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     mini: {
       type: Boolean,

components/floating-label/FloatingLabel.vue

@@ -9,7 +9,10 @@
 <script>
 import { MDCFloatingLabel } from '@material/floating-label'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     floatAbove: {
       type: Boolean,

components/form-field/FormField.vue

@@ -9,7 +9,10 @@
 <script>
 import { MDCFormField } from '@material/form-field'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     alignEnd: {
       type: Boolean,

components/grid-list/GridList.vue

@@ -12,7 +12,10 @@
 
 import { MDCGridList } from '@material/grid-list'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     headerCaption: {
       type: Boolean,

components/grid-list/GridListTile.vue

@@ -23,7 +23,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     imgSrc: {
       type: String,

components/icon-toggle/IconToggle.vue

@@ -14,7 +14,10 @@
 import { MDCIconToggle } from '@material/icon-toggle'
 import { debounce } from '../'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     iconOn: {
       type: String,

components/icon/Icon.vue

@@ -7,7 +7,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     icon: {
       type: String,

components/layout-grid/LayoutGrid.vue

@@ -7,7 +7,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     fixedColumnWidth: {
       type: Boolean,

components/layout-grid/LayoutGridCell.vue

@@ -7,7 +7,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     span: {
       type: Number,

components/layout-grid/LayoutGridInner.vue

@@ -3,3 +3,11 @@
     <slot />
   </div>
 </template>
+
+<script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>

components/line-ripple/LineRipple.vue

@@ -5,7 +5,10 @@
 <script>
 import { MDCLineRipple } from '@material/line-ripple'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   data () {
     return {
       mdcLineRipple: null

components/linear-progress/LinearProgress.vue

@@ -16,7 +16,10 @@
 <script>
 import { MDCLinearProgress } from '@material/linear-progress'
 
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     open: {
       type: Boolean,

components/list/List.vue

@@ -7,7 +7,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     avatar: {
       type: Boolean,

components/list/ListDivider.vue

@@ -7,7 +7,10 @@
 </template>
 
 <script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
 export default {
+  mixins: [themeClassMixin],
   props: {
     inset: {
       type: Boolean,

components/list/ListGroup.vue

@@ -3,3 +3,11 @@
     <slot />
   </div>
 </template>
+
+<script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>

components/list/ListGroupDivider.vue

@@ -1,3 +1,11 @@
 <template>
   <hr class="mdc-list-divider" >
 </template>
+
+<script>
+import themeClassMixin from '../base/themeClassMixin.js'
+
+export default {
+  mixins: [themeClassMixin]
+}
+</script>