fix(colors): override element styling and tweak colors for card and item

* refactor(card): add color/mode classes to header, title, content - Remove native HTML element styling inside of cards (headings, paragraph) - Move the default color for the HTML elements to the content - Generate colors for the card itself, the header, the content, and the title using the color input - Add e2e test for card colors References #8330 * refactor(item): remove paragraph styles, update activated colors - Adds test for item colors - Removes the color from native paragraph elements allowing colors to be passed Closes #9081 * refactor(item): bring back paragraph color and override in the item loop * refactor(card): add back heading and paragraph colors and override in color loop
ionic-team · Nov 11, 2016 · ee3decc · ee3decc
1 parent 898ac3e
commit ee3decc
Show file tree

Hide file tree

Showing 13 changed files with 535 additions and 18 deletions.
diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
@@ -102,23 +102,23 @@ $card-ios-header-color:                #333 !default;
   border: 0;
 }
 
-.card-ios ion-card-content {
+.card-content-ios {
   padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
 
   font-size: $card-ios-font-size;
   line-height: 1.4;
 }
 
-.card-ios ion-card-header {
+.card-header-ios {
   padding: $card-ios-header-padding;
 
   font-size: $card-ios-header-font-size;
   font-weight: $card-ios-header-font-weight;
   color: $card-ios-header-color;
 }
 
-.card-ios ion-card-header + ion-card-content,
-.card-ios .item + ion-card-content {
+.card-header-ios + .card-content-ios,
+.card-ios .item + .card-content-ios {
   padding-top: 0;
 }
 
@@ -127,7 +127,7 @@ $card-ios-header-color:                #333 !default;
   font-size: 1.3rem;
 }
 
-.card-ios ion-card-title {
+.card-title-ios {
   display: block;
 
   margin: $card-ios-title-margin;
@@ -172,3 +172,42 @@ $card-ios-header-color:                #333 !default;
 .card-ios + ion-card {
   margin-top: 0;
 }
+
+
+// Generate iOS Card Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .card-ios .text-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+  .card-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .card-header-ios,
+    .card-title-ios,
+    .card-content-ios,
+    p {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+      .text-ios-#{$color-name},
+      .card-header-ios-#{$color-name},
+      .card-title-ios-#{$color-name},
+      .card-content-ios-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-ios-#{$color-name},
+  .card-title-ios-#{$color-name},
+  .card-content-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
@@ -107,22 +107,22 @@ $card-md-header-color:                #222 !default;
   border: 0;
 }
 
-.card-md ion-card-content {
+.card-content-md {
   padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
 
   font-size: $card-md-font-size;
   line-height: $card-md-line-height;
 }
 
-.card-md ion-card-header {
+.card-header-md {
   padding: $card-md-header-padding;
 
   font-size: $card-md-header-font-size;
   color: $card-md-header-color;
 }
 
-.card-md ion-card-header + ion-card-content,
-.card-md .item + ion-card-content {
+.card-header-md + .card-content-md,
+.card-md .item + .card-content-md {
   padding-top: 0;
 }
 
@@ -131,7 +131,7 @@ $card-md-header-color:                #222 !default;
   font-size: 1.3rem;
 }
 
-.card-md ion-card-title {
+.card-title-md {
   display: block;
 
   margin: $card-md-title-margin;
@@ -181,3 +181,48 @@ $card-md-header-color:                #222 !default;
 .card-md + ion-card {
   margin-top: 0;
 }
+
+
+// Generate Material Design Card Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .card-md .text-md-#{$color-name} {
+    color: $color-base;
+  }
+
+  .card-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .card-header-md,
+    .card-title-md,
+    .card-content-md,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+      .text-md-#{$color-name},
+      .card-header-md-#{$color-name},
+      .card-title-md-#{$color-name},
+      .card-content-md-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-md-#{$color-name},
+  .card-title-md-#{$color-name},
+  .card-content-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
@@ -43,7 +43,31 @@ export class Card extends Ion {
 @Directive({
   selector: 'ion-card-content'
 })
-export class CardContent {}
+export class CardContent extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('card-content', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('card-content', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
+
+}
 
 
 /**
@@ -52,12 +76,60 @@ export class CardContent {}
 @Directive({
   selector: 'ion-card-header'
 })
-export class CardHeader {}
+export class CardHeader extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('card-header', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('card-header', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
+
+}
 
 /**
  * @private
  */
 @Directive({
   selector: 'ion-card-title'
 })
-export class CardTitle {}
+export class CardTitle extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('card-title', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('card-title', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
+
+}
diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
@@ -108,22 +108,23 @@ $card-wp-header-color:                #222 !default;
   border: 0;
 }
 
-.card-wp ion-card-content {
+.card-content-wp {
   padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
 
   font-size: $card-wp-font-size;
   line-height: $card-wp-line-height;
 }
 
-.card-wp ion-card-header {
+.card-header-wp {
   padding: $card-wp-header-padding;
 
   font-size: $card-wp-header-font-size;
+
   color: $card-wp-header-color;
 }
 
-.card-wp ion-card-header + ion-card-content,
-.card-wp .item + ion-card-content {
+.card-header-wp + .card-content-wp,
+.card-wp .item + .card-content-wp {
   padding-top: 0;
 }
 
@@ -132,7 +133,7 @@ $card-wp-header-color:                #222 !default;
   font-size: 1.3rem;
 }
 
-.card-wp ion-card-title {
+.card-title-wp {
   display: block;
 
   margin: $card-wp-title-margin;
@@ -182,3 +183,48 @@ $card-wp-header-color:                #222 !default;
 .card-wp + ion-card {
   margin-top: 0;
 }
+
+
+// Generate Windows Card Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .card-wp .text-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+  .card-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .card-header-wp,
+    .card-title-wp,
+    .card-content-wp,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+      .text-wp-#{$color-name},
+      .card-header-wp-#{$color-name},
+      .card-title-wp-#{$color-name},
+      .card-content-wp-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-wp-#{$color-name},
+  .card-title-wp-#{$color-name},
+  .card-content-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/card/test/colors/app-module.ts b/src/components/card/test/colors/app-module.ts
@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/card/test/colors/e2e.ts b/src/components/card/test/colors/e2e.ts
@@ -0,0 +1 @@
+