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

Author: mrholek

packages/coreui-vue/src/components/badge/CBadge.ts

@@ -46,6 +46,13 @@ const CBadge = defineComponent({
         return value === '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.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     * @since 5.0.0-rc.3
+     */
+    textBgColor: Color,
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
@@ -61,15 +68,15 @@ const CBadge = defineComponent({
           class: [
             'badge',
             {
-              [`text-bg-${props.color}`]: props.color && !props.textColor,
-              [`bg-${props.color}`]: props.color && props.textColor,
+              [`bg-${props.color}`]: props.color,
               'position-absolute translate-middle': props.position,
               'top-0': props.position && props.position.includes('top'),
               'top-100': props.position && props.position.includes('bottom'),
               'start-100': props.position && props.position.includes('end'),
               'start-0': props.position && props.position.includes('start'),
               [`badge-${props.size}`]: props.size,
               [`text-${props.textColor}`]: props.textColor,
+              [`text-bg-${props.textBgColor}`]: props.textBgColor,
             },
             props.shape,
           ],

packages/coreui-vue/src/components/card/CCard.ts

@@ -11,6 +11,13 @@ const CCard = defineComponent({
      * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
      */
     color: Color,
+    /**
+     * 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.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     * @since 5.0.0-rc.3
+     */
+    textBgColor: Color,
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
@@ -28,6 +35,7 @@ const CCard = defineComponent({
             {
               [`bg-${props.color}`]: props.color,
               [`text-${props.textColor}`]: props.textColor,
+              [`text-bg-${props.textBgColor}`]: props.textBgColor,
             },
           ],
         },

packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss

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

packages/docs/components/badge.md

@@ -145,7 +145,7 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad
 <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>
 :::
 ```vue
@@ -154,10 +154,32 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad
 <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.
+
+::: demo
+<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>
+:::
+```vue
+<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.
@@ -168,7 +190,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>
 :::
 ```vue
@@ -177,7 +199,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/components/card.md

@@ -780,6 +780,49 @@ Use `color` property to change the appearance of a card.
 </template>
 ```
 
+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.
+
+::: demo
+<template v-for="(item) in [
+  { color: 'primary' },
+  { color: 'secondary' },
+  { color: 'success' },
+  { color: 'danger' },
+  { color: 'warning' },
+  { color: 'info' },
+  { color: 'light' },
+  { color: 'dark' }
+]">
+  <CCard :textBgColor="item.color" class="mb-3" style="max-width: 18rem">
+    <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>
+</template>
+:::
+```vue
+<template v-for="(item) in [
+  { color: 'primary' },
+  { color: 'secondary' },
+  { color: 'success' },
+  { color: 'danger' },
+  { color: 'warning' },
+  { color: 'info' },
+  { color: 'light' },
+  { color: 'dark' }
+]">
+  <CCard :textBgColor="item.color" class="mb-3" style="max-width: 18rem">
+    <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>
+</template>
+```
+
 <Callout color="info" title="Conveying meaning to assistive technologies">
   Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
 </Callout>