Remove style dependency in cards

components/card/readme.md

@@ -114,7 +114,7 @@ typically placed at the bottom of the card.
 
 ## Theming
 
-Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, we use the same themed key `ToolboxCard` for your context styles. The interface is as follows:
+Each subcomponent takes it's own classes but since usually you'd want to include every card subcomponent, and also those styles are related to each other, we use the same themed key `ToolboxCard` for context styles. The interface is as follows:
 
 | Name       | Description|
 |:-----------|:-----------|
@@ -132,4 +132,4 @@ Each subcomponent takes it's own classes but since usually you'd want to include
 | `title` | Used in `CardTitle` for title main wrapper.|
 | `wide` | Used in `CardMedia` for wide content.|
 
-This component theme also includes modifiers for buttons used in `CardActions` and for `Avatar` component.
+This component theme also includes modifiers for `Button` and for `Avatar` component.

components/card/theme.scss

@@ -13,7 +13,7 @@
   &.raised {
     @include shadow-8dp();
   }
-  .avatar {
+  [data-react-toolbox="avatar"] {
     display: block;
   }
 }
@@ -60,7 +60,7 @@
 .cardTitle {
   display: flex;
   align-items: center;
-  .avatar {
+  [data-react-toolbox="avatar"] {
     margin-right: 1.3 * $unit;
   }
   .subtitle {
@@ -106,7 +106,7 @@
   align-items: center;
   justify-content: flex-start;
   padding: $card-padding-sm;
-  .button {
+  [data-react-toolbox="button"] {
     min-width: 0;
     padding: 0 $card-padding-sm;
     margin: 0 $card-padding-sm / 2;

components/define-theme.js

@@ -1,7 +1,4 @@
-const DEPENDENCIES = {
-  ToolboxButton: [ 'ToolboxRipple' ],
-  ToolboxCard: [ 'ToolboxAvatar', 'ToolboxButton' ]
-};
+const DEPENDENCIES = {};
 
 export default function defineTheme (theme) {
   return generateModifiers(theme)(theme);