refactor(CBadge, CCard): improve background and text color handling

Author: mrholek

packages/coreui-react/src/components/badge/CBadge.tsx

@@ -35,6 +35,13 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    * Size the component small.
    */
   size?: 'sm'
+  /**
+   * 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.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @since 5.0.0-rc.3
+   */
+  textBgColor?: Colors
   /**
    * Sets the text color of the component to one of CoreUI’s themed colors.
    *
@@ -55,6 +62,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
       position,
       shape,
       size,
+      textBgColor,
       textColor,
       ...rest
     },
@@ -65,14 +73,15 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
         className={classNames(
           'badge',
           {
-            [`text-bg-${color}`]: color,
+            [`bg-${color}`]: color,
             'position-absolute translate-middle': position,
             'top-0': position?.includes('top'),
             'top-100': position?.includes('bottom'),
             'start-100': position?.includes('end'),
             'start-0': position?.includes('start'),
             [`badge-${size}`]: size,
             [`text-${textColor}`]: textColor,
+            [`text-bg-${textBgColor}`]: textBgColor,
           },
           shape,
           className,
@@ -94,6 +103,7 @@ CBadge.propTypes = {
   position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
   shape: shapePropType,
   size: PropTypes.oneOf(['sm']),
+  textBgColor: colorPropType,
   textColor: textColorsPropType,
 }
 

packages/coreui-react/src/components/card/CCard.tsx

@@ -22,17 +22,25 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
    */
   textColor?: string
+  /**
+   * 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.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @since 5.0.0-rc.3
+   */
+  textBgColor?: Colors
 }
 
 export const CCard = forwardRef<HTMLDivElement, CCardProps>(
-  ({ children, className, color, textColor, ...rest }, ref) => {
+  ({ children, className, color, textBgColor, textColor, ...rest }, ref) => {
     return (
       <div
         className={classNames(
           'card',
           {
             [`bg-${color}`]: color,
             [`text-${textColor}`]: textColor,
+            [`text-bg-${textBgColor}`]: textBgColor,
           },
           className,
         )}
@@ -49,6 +57,7 @@ CCard.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
+  textBgColor: colorPropType,
   textColor: PropTypes.string,
 }
 

packages/docs/content/components/badge.mdx

@@ -99,10 +99,22 @@ Add any of the below-mentioned `color` props to modify the presentation of a rea
 <CBadge color="danger">danger</CBadge>
 <CBadge color="warning">warning</CBadge>
 <CBadge color="info">info</CBadge>
-<CBadge color="light">light</CBadge>
+<CBadge textBgColor="light">light</CBadge>
 <CBadge color="dark">dark</CBadge>
 ```
 
+You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
+
+```jsx preview
+<CBadge textBgColor="primary">primary</CBadge>
+<CBadge textBgColor="success">success</CBadge>
+<CBadge textBgColor="danger">danger</CBadge>
+<CBadge textBgColor="warning">warning</CBadge>
+<CBadge textBgColor="info">info</CBadge>
+<CBadge textBgColor="light">light</CBadge>
+<CBadge textBgColor="dark">dark</CBadge>
+```
+
 ## Pill badges
 
 Apply the `shape="rounded-pill"` prop to make badges rounded.
@@ -113,7 +125,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
 <CBadge color="danger" shape="rounded-pill">danger</CBadge>
 <CBadge color="warning" shape="rounded-pill">warning</CBadge>
 <CBadge color="info" shape="rounded-pill">info</CBadge>
-<CBadge color="light" shape="rounded-pill">light</CBadge>
+<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
 <CBadge color="dark" shape="rounded-pill">dark</CBadge>
 ```
 

packages/docs/content/components/card.mdx

@@ -446,6 +446,67 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 Use `color` property to change the appearance of a card.
 
+<Example>
+  <>
+    {[
+      { color: 'primary' },
+      { color: 'secondary' },
+      { color: 'success' },
+      { color: 'danger' },
+      { color: 'warning' },
+      { color: 'info' },
+      { color: 'light' },
+      { color: 'dark' },
+    ].map((item, index) => (
+      <CCard
+        textBgColor={item.color}
+        className="mb-3"
+        style={{ maxWidth: '18rem' }}
+        key={index}
+      >
+        <CCardHeader>Header</CCardHeader>
+        <CCardBody>
+          <CCardTitle>{item.color} card title</CCardTitle>
+          <CCardText> Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
+        </CCardBody>
+      </CCard>
+    ))}
+  </>
+</Example>
+
+You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.
+
+
+```jsx
+<>
+  {[
+    { color: 'primary' },
+    { color: 'secondary' },
+    { color: 'success' },
+    { color: 'danger' },
+    { color: 'warning' },
+    { color: 'info' },
+    { color: 'light' },
+    { color: 'dark' },
+  ].map((item, index) => (
+    <CCard
+      textBgColor={item.color}
+      className="mb-3"
+      style={{ maxWidth: '18rem' }}
+      key={index}
+    >
+      <CCardHeader>Header</CCardHeader>
+      <CCardBody>
+        <CCardTitle>{item.color} card title</CCardTitle>
+        <CCardText>
+          Some quick example text to build on the card title and make up the bulk of the card's
+          content.
+        </CCardText>
+      </CCardBody>
+    </CCard>
+  ))}
+</>
+```
 <Example>
   <>
     {[

packages/docs/src/styles/_component-examples.scss

@@ -73,6 +73,11 @@
     margin-left: .5rem;
   }
 
+  // Badges
+  > .badge + .badge {
+    margin-left: .25rem;
+  }
+
   // Buttons
   > .btn,
   > .btn-group {