fix(card-title): add and document custom CSS properties

references #14850 references #14808

Author: brandyscarney

core/src/components/card-title/card-title.ios.scss

@@ -5,11 +5,11 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$card-ios-title-text-color};
+
   @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);
   @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);
 
-  color: #{$card-ios-title-text-color};
-
   font-size: $card-ios-title-font-size;
   font-weight: $card-ios-title-font-weight;
 

core/src/components/card-title/card-title.md.scss

@@ -5,11 +5,11 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$card-md-title-text-color};
+
   @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start);
   @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
 
-  color: #{$card-md-title-text-color};
-
   font-size: $card-md-title-font-size;
 
   line-height: 1.2;

core/src/components/card-title/card-title.scss

@@ -5,12 +5,16 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the card title
+   */
+
   display: block;
   position: relative;
+
+  color: var(--color);
 }
 
 :host(.ion-color) {
-  // TODO can we remove important here
-  /* stylelint-disable-next-line declaration-no-important */
-  color: #{current-color(base)} !important;
+  color: #{current-color(base)};
 }