Skip to content

Commit c4f5da9

Browse files
mrholekmrholek
committed
refactor(CBadge, CCard): improve background and text color handling
1 parent f6093b6 commit c4f5da9

File tree

5 files changed

+91
-6
lines changed

5 files changed

+91
-6
lines changed

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@ const CBadge = defineComponent({
4646
return value === 'sm'
4747
},
4848
},
49+
/**
50+
* 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.
51+
*
52+
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
53+
* @since 5.0.0-rc.3
54+
*/
55+
textBgColor: Color,
4956
/**
5057
* Sets the text color of the component to one of CoreUI’s themed colors.
5158
*
@@ -61,15 +68,15 @@ const CBadge = defineComponent({
6168
class: [
6269
'badge',
6370
{
64-
[`text-bg-${props.color}`]: props.color && !props.textColor,
65-
[`bg-${props.color}`]: props.color && props.textColor,
71+
[`bg-${props.color}`]: props.color,
6672
'position-absolute translate-middle': props.position,
6773
'top-0': props.position && props.position.includes('top'),
6874
'top-100': props.position && props.position.includes('bottom'),
6975
'start-100': props.position && props.position.includes('end'),
7076
'start-0': props.position && props.position.includes('start'),
7177
[`badge-${props.size}`]: props.size,
7278
[`text-${props.textColor}`]: props.textColor,
79+
[`text-bg-${props.textBgColor}`]: props.textBgColor,
7380
},
7481
props.shape,
7582
],

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ const CCard = defineComponent({
1111
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
1212
*/
1313
color: Color,
14+
/**
15+
* 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.
16+
*
17+
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
18+
* @since 5.0.0-rc.3
19+
*/
20+
textBgColor: Color,
1421
/**
1522
* Sets the text color context of the component to one of CoreUI’s themed colors.
1623
*
@@ -28,6 +35,7 @@ const CCard = defineComponent({
2835
{
2936
[`bg-${props.color}`]: props.color,
3037
[`text-${props.textColor}`]: props.textColor,
38+
[`text-bg-${props.textBgColor}`]: props.textBgColor,
3139
},
3240
],
3341
},

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,11 @@
7373
margin-left: .5rem;
7474
}
7575

76+
// Badges
77+
> .badge + .badge {
78+
margin-left: .25rem;
79+
}
80+
7681
// Buttons
7782
> .btn,
7883
> .btn-group {

‎packages/docs/components/badge.md

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad
145145
<CBadge color="danger">danger</CBadge>
146146
<CBadge color="warning">warning</CBadge>
147147
<CBadge color="info">info</CBadge>
148-
<CBadge color="light">light</CBadge>
148+
<CBadge textBgColor="light">light</CBadge>
149149
<CBadge color="dark">dark</CBadge>
150150
:::
151151
```vue
@@ -154,10 +154,32 @@ Add any of the below-mentioned `color` props to modify the presentation of a bad
154154
<CBadge color="danger">danger</CBadge>
155155
<CBadge color="warning">warning</CBadge>
156156
<CBadge color="info">info</CBadge>
157-
<CBadge color="light">light</CBadge>
157+
<CBadge textBgColor="light">light</CBadge>
158158
<CBadge color="dark">dark</CBadge>
159159
```
160160

161+
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.
162+
163+
::: demo
164+
<CBadge textBgColor="primary">primary</CBadge>
165+
<CBadge textBgColor="success">success</CBadge>
166+
<CBadge textBgColor="danger">danger</CBadge>
167+
<CBadge textBgColor="warning">warning</CBadge>
168+
<CBadge textBgColor="info">info</CBadge>
169+
<CBadge textBgColor="light">light</CBadge>
170+
<CBadge textBgColor="dark">dark</CBadge>
171+
:::
172+
```vue
173+
<CBadge textBgColor="primary">primary</CBadge>
174+
<CBadge textBgColor="success">success</CBadge>
175+
<CBadge textBgColor="danger">danger</CBadge>
176+
<CBadge textBgColor="warning">warning</CBadge>
177+
<CBadge textBgColor="info">info</CBadge>
178+
<CBadge textBgColor="light">light</CBadge>
179+
<CBadge textBgColor="dark">dark</CBadge>
180+
```
181+
182+
161183
## Pill badges
162184

163185
Apply the `shape="rounded-pill"` prop to make badges rounded.
@@ -168,7 +190,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
168190
<CBadge color="danger" shape="rounded-pill">danger</CBadge>
169191
<CBadge color="warning" shape="rounded-pill">warning</CBadge>
170192
<CBadge color="info" shape="rounded-pill">info</CBadge>
171-
<CBadge color="light" shape="rounded-pill">light</CBadge>
193+
<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
172194
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
173195
:::
174196
```vue
@@ -177,7 +199,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
177199
<CBadge color="danger" shape="rounded-pill">danger</CBadge>
178200
<CBadge color="warning" shape="rounded-pill">warning</CBadge>
179201
<CBadge color="info" shape="rounded-pill">info</CBadge>
180-
<CBadge color="light" shape="rounded-pill">light</CBadge>
202+
<CBadge textBgColor="light" shape="rounded-pill">light</CBadge>
181203
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
182204
```
183205

‎packages/docs/components/card.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,6 +780,49 @@ Use `color` property to change the appearance of a card.
780780
</template>
781781
```
782782

783+
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.
784+
785+
::: demo
786+
<template v-for="(item) in [
787+
{ color: 'primary' },
788+
{ color: 'secondary' },
789+
{ color: 'success' },
790+
{ color: 'danger' },
791+
{ color: 'warning' },
792+
{ color: 'info' },
793+
{ color: 'light' },
794+
{ color: 'dark' }
795+
]">
796+
<CCard :textBgColor="item.color" class="mb-3" style="max-width: 18rem">
797+
<CCardHeader>Header</CCardHeader>
798+
<CCardBody>
799+
<CCardTitle>{{item.color}} card title</CCardTitle>
800+
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
801+
</CCardBody>
802+
</CCard>
803+
</template>
804+
:::
805+
```vue
806+
<template v-for="(item) in [
807+
{ color: 'primary' },
808+
{ color: 'secondary' },
809+
{ color: 'success' },
810+
{ color: 'danger' },
811+
{ color: 'warning' },
812+
{ color: 'info' },
813+
{ color: 'light' },
814+
{ color: 'dark' }
815+
]">
816+
<CCard :textBgColor="item.color" class="mb-3" style="max-width: 18rem">
817+
<CCardHeader>Header</CCardHeader>
818+
<CCardBody>
819+
<CCardTitle>{{item.color}} card title</CCardTitle>
820+
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
821+
</CCardBody>
822+
</CCard>
823+
</template>
824+
```
825+
783826
<Callout color="info" title="Conveying meaning to assistive technologies">
784827
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.
785828
</Callout>

0 commit comments

Comments
 (0)