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

references #14850 references #14808

Author: brandyscarney

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

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$card-ios-subtitle-color};
+  --color: #{$card-ios-subtitle-color};
 
   @include margin($card-ios-subtitle-margin-top, $card-ios-subtitle-margin-end, $card-ios-subtitle-margin-bottom, $card-ios-subtitle-margin-start);
   @include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start);

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

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$card-md-subtitle-color};
+  --color: #{$card-md-subtitle-color};
 
   @include margin($card-md-subtitle-margin-top, $card-md-subtitle-margin-end, $card-md-subtitle-margin-bottom, $card-md-subtitle-margin-start);
   @include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start);

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

@@ -4,8 +4,16 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the card subtitle
+   */
+
   display: block;
   position: relative;
 
-  color: #{current-color(base)};
+  color: var(--color);
 }
+
+:host(.ion-color) {
+  color: current-color(base);
+}