Skip to content

Commit cf285a8

Browse files
mrholekmrholek
committed
refactor: update text colors
1 parent 683e23f commit cf285a8

31 files changed

+93
-88
lines changed

‎packages/coreui-react/src/components/avatar/CAvatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
3939
/**
4040
* Sets the text color of the component to one of CoreUI’s themed colors.
4141
*
42-
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
42+
* @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
4343
*/
4444
textColor?: TextColors
4545
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
3737
/**
3838
* Sets the text color of the component to one of CoreUI’s themed colors.
3939
*
40-
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
40+
* @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
4141
*/
4242
textColor?: TextColors
4343
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
1919
/**
2020
* Sets the text color context of the component to one of CoreUI’s themed colors.
2121
*
22-
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
22+
* @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
2323
*/
2424
textColor?: string
2525
}

‎packages/coreui-react/src/components/widgets/CWidgetStatsA.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
4141
return (
4242
<CCard
4343
className={classNames(
44-
{ [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
44+
{ [`bg-${color}`]: color, 'text-white': color },
4545
className,
4646
)}
4747
{...rest}

‎packages/coreui-react/src/components/widgets/CWidgetStatsB.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
4848
<CCard
4949
className={className}
5050
color={color}
51-
{...(inverse && { textColor: 'high-emphasis-inverse' })}
51+
{...(inverse && { textColor: 'white' })}
5252
{...rest}
5353
ref={ref}
5454
>
@@ -57,7 +57,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
5757
{title && <div>{title}</div>}
5858
<CProgress className="my-2" height={4} {...(inverse && { white: true })} {...progress} />
5959
{text && (
60-
<small className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
60+
<small className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
6161
{text}
6262
</small>
6363
)}

‎packages/coreui-react/src/components/widgets/CWidgetStatsC.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,23 +48,15 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
4848
<CCard
4949
className={className}
5050
color={color}
51-
{...(inverse && { textColor: 'high-emphasis-inverse' })}
51+
{...(inverse && { textColor: 'white' })}
5252
{...rest}
5353
ref={ref}
5454
>
5555
<CCardBody>
56-
{icon && (
57-
<div className={`text-medium-emphasis${inverse ? '-inverse' : ''} text-end mb-4`}>
58-
{icon}
59-
</div>
60-
)}
61-
{value && (
62-
<div className={`text-high-emphasis${inverse ? '-inverse' : ''} fs-4 fw-semibold`}>
63-
{value}
64-
</div>
65-
)}
56+
{icon && <div className="text-end mb-4">{icon}</div>}
57+
{value && <div className="fs-4 fw-semibold">{value}</div>}
6658
{title && (
67-
<div className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
59+
<div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
6860
{title}
6961
</div>
7062
)}

‎packages/coreui-react/src/components/widgets/CWidgetStatsD.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
6161
{index % 2 !== 0 && <div className="vr"></div>}
6262
<CCol>
6363
<div className="fs-5 fw-semibold">{value.value}</div>
64-
<div className="text-uppercase text-medium-emphasis small">{value.title}</div>
64+
<div className="text-uppercase text-body-secondary small">{value.title}</div>
6565
</CCol>
6666
</React.Fragment>
6767
)

‎packages/coreui-react/src/components/widgets/CWidgetStatsE.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
2929
<CCard className={classNames(className)} {...rest} ref={ref}>
3030
<CCardBody className="text-center">
3131
{title && (
32-
<div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>
32+
<div className="text-body-secondary small text-uppercase fw-semibold">{title}</div>
3333
)}
3434
{value && <div className="fs-6 fw-semibold py-3">{value}</div>}
3535
{chart}

‎packages/coreui-react/src/components/widgets/CWidgetStatsF.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
4747
<div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
4848
<div>
4949
<div className={`fs-6 fw-semibold text-${color}`}>{value}</div>
50-
<div className="text-medium-emphasis text-uppercase fw-semibold small">{title}</div>
50+
<div className="text-body-secondary text-uppercase fw-semibold small">{title}</div>
5151
</div>
5252
</CCardBody>
5353
{footer && <CCardFooter>{footer}</CCardFooter>}

‎packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ test('CWidgetStatsA customize', async () => {
2323
)
2424
expect(container).toMatchSnapshot()
2525
expect(container.firstChild).toHaveClass('bg-info')
26-
expect(container.firstChild).toHaveClass('text-high-emphasis-inverse')
26+
expect(container.firstChild).toHaveClass('text-white')
2727
expect(container.firstChild).toHaveClass('bazinga')
2828
if (container.firstChild === null) {
2929
expect(true).toBe(false)

‎packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ test('CWidgetStatsB customize', async () => {
3232
expect(container.firstChild.firstChild.firstChild).toHaveClass('fs-4')
3333
expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')
3434
expect(container.firstChild.firstChild.firstChild).toHaveTextContent('value')
35-
expect(container.firstChild.firstChild.lastChild).toHaveClass('text-medium-emphasis-inverse')
35+
expect(container.firstChild.firstChild.lastChild).toHaveClass('text-white')
3636
expect(container.firstChild.firstChild.lastChild).toHaveTextContent('text')
3737
}
3838
})

‎packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ test('CWidgetStatsC customize', async () => {
2929
expect(true).toBe(false)
3030
} else {
3131
expect(container.firstChild.firstChild).toHaveClass('card-body')
32-
expect(container.firstChild.firstChild.firstChild).toHaveClass('text-medium-emphasis-inverse')
32+
expect(container.firstChild.firstChild.firstChild).toHaveClass('text-white')
3333
expect(container.firstChild.firstChild.firstChild).toHaveClass('text-end')
3434
expect(container.firstChild.firstChild.firstChild).toHaveClass('mb-4')
3535
expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')

‎packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ test('CWidgetStatsD customize', async () => {
4242
expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
4343
expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
4444
expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass(
45-
'text-medium-emphasis',
45+
'text-body-secondary',
4646
)
4747
expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
4848
expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')

‎packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ test('CWidgetStatsE customize', async () => {
2121
expect(true).toBe(false)
2222
} else {
2323
expect(container.firstChild.firstChild).toHaveClass('card-body')
24-
expect(container.firstChild.firstChild.firstChild).toHaveClass('text-medium-emphasis')
24+
expect(container.firstChild.firstChild.firstChild).toHaveClass('text-body-secondary')
2525
expect(container.firstChild.firstChild.firstChild).toHaveClass('small')
2626
expect(container.firstChild.firstChild.firstChild).toHaveClass('text-uppercase')
2727
expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')

‎packages/coreui-react/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ test('CWidgetStatsF customize', async () => {
4747
expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('text-info')
4848
expect(container.firstChild.firstChild.lastChild.firstChild).toHaveTextContent('value')
4949
expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass(
50-
'text-medium-emphasis',
50+
'text-body-secondary',
5151
)
5252
expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('text-uppercase')
5353
expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('fw-semibold ')

‎packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`CWidgetStatsA customize 1`] = `
44
<div>
55
<div
6-
class="card bg-info text-high-emphasis-inverse bazinga"
6+
class="card bg-info text-white bazinga"
77
>
88
<div
99
class="card-body pb-0 d-flex justify-content-between align-items-start"

‎packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`CWidgetStatsB customize 1`] = `
44
<div>
55
<div
6-
class="card bg-info text-high-emphasis-inverse bazinga"
6+
class="card bg-info text-white bazinga"
77
>
88
<div
99
class="card-body"

‎packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`CWidgetStatsC customize 1`] = `
44
<div>
55
<div
6-
class="card bg-info text-high-emphasis-inverse bazinga"
6+
class="card bg-info text-white bazinga"
77
>
88
<div
99
class="card-body"
@@ -14,7 +14,7 @@ exports[`CWidgetStatsC customize 1`] = `
1414
icon
1515
</div>
1616
<div
17-
class="text-high-emphasis-inverse fs-4 fw-semibold"
17+
class="text-white fs-4 fw-semibold"
1818
>
1919
value
2020
</div>

‎packages/coreui-react/src/types.ts

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,21 @@ export type Shapes =
4545

4646
export type TextColors =
4747
| Colors
48+
| 'primary-emphasis'
49+
| 'secondary-emphasis'
50+
| 'success-emphasis'
51+
| 'danger-emphasis'
52+
| 'warning-emphasis'
53+
| 'info-emphasis'
54+
| 'light-emphasis'
55+
| 'body'
56+
| 'body-emphasis'
57+
| 'body-secondary'
58+
| 'body-tertiary'
59+
| 'black'
60+
| 'black-50'
4861
| 'white'
49-
| 'muted'
50-
| 'high-emphasis'
51-
| 'medium-emphasis'
52-
| 'disabled'
53-
| 'high-emphasis-inverse'
54-
| 'medium-emphasis-inverse'
55-
| 'disabled-inverse'
62+
| 'white-50'
5663
| string
5764

5865
export type Triggers = 'hover' | 'focus' | 'click'

‎packages/docs/content/api/CAvatar.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
1313
| **size** | Size the component small, large, or extra large. | `string` | - |
1414
| **src** | The src attribute for the img element. | `string` | - |
1515
| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
16-
| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'white'` \| `'muted'` \| `'high-emphasis'` \| `'medium-emphasis'` \| `'disabled'` \| `'high-emphasis-inverse'` \| `'medium-emphasis-inverse'` \| `'disabled-inverse'` \| `string` | - |
16+
| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'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` | - |

‎packages/docs/content/api/CBadge.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
1313
| **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - |
1414
| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
1515
| **size** | Size the component small. | `'sm'` | - |
16-
| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'white'` \| `'muted'` \| `'high-emphasis'` \| `'medium-emphasis'` \| `'disabled'` \| `'high-emphasis-inverse'` \| `'medium-emphasis-inverse'` \| `'disabled-inverse'` \| `string` | - |
16+
| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'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` | - |

‎packages/docs/content/api/CCard.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ import CCard from '@coreui/react/src/components/card/CCard'
99
| --- | --- | --- | --- |
1010
| **className** | A string of all className you want applied to the base component. | `string` | - |
1111
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
12-
| **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'white'` \| `'muted'` \| `'high-emphasis'` \| `'medium-emphasis'` \| `'disabled'` \| `'high-emphasis-inverse'` \| `'medium-emphasis-inverse'` \| `'disabled-inverse'` \| `string` | - |
12+
| **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'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` | - |

‎packages/docs/content/api/CModal.api.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CModal from '@coreui/react/src/components/modal/CModal'
1010
| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - |
1111
| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true |
1212
| **className** | A string of all className you want applied to the base component. | `string` | - |
13+
| **focus** **_v4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true |
1314
| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
1415
| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true |
1516
| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |

‎packages/docs/content/api/CNav.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ import CNav from '@coreui/react/src/components/nav/CNav'
1010
| **className** | A string of all className you want applied to the base component. | `string` | - |
1111
| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |
1212
| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - |
13-
| **variant** | Set the nav variant to tabs or pills. | `'tabs'` \| `'pills'` | - |
13+
| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` | - |

0 commit comments

Comments
 (0)