refactor(card): improve background and text color handling with TextBgColor directive composition api

Author: xidedix

projects/coreui-angular/src/lib/card/card.component.ts

@@ -1,14 +1,15 @@
 import { Component, HostBinding, Input } from '@angular/core';
 import { Colors, TextColors } from '../coreui.types';
-import { TextColorDirective } from '../utilities';
+import { TextBgColorDirective, TextColorDirective } from '../utilities';
 
 @Component({
   selector: 'c-card, [c-card]',
   template: '<ng-content />',
   standalone: true,
-  hostDirectives: [{
-    directive: TextColorDirective, inputs: ['cTextColor: textColor']
-  }]
+  hostDirectives: [
+    { directive: TextColorDirective, inputs: ['cTextColor: textColor'] },
+    { directive: TextBgColorDirective, inputs: ['cTextBgColor: textBgColor'] }
+  ]
 })
 export class CardComponent {
 
@@ -25,6 +26,14 @@ export class CardComponent {
    */
   @Input() textColor?: TextColors;
 
+  /**
+   * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+   * via TextBgColorDirective
+   * @type Colors
+   * @since 5.0.0
+   */
+  @Input() textBgColor?: Colors;
+
   @HostBinding('class')
   get hostClasses(): any {
     return {