Skip to content

Commit

Permalink
[docs][joy-ui] Fix grammar and update Usage section in color inversio…
Browse files Browse the repository at this point in the history
…n page (mui#38850)
  • Loading branch information
ZeeshanTamboli authored Sep 8, 2023
1 parent 22a8863 commit b129707
Showing 1 changed file with 3 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ On the **left**, the Button's variant is `solid`, which is the highest emphasis
This conforms to the visual appearance on the screen.

On the **right**, the problem arises when the container's variant becomes `solid`.
The Button is no longer the highest emphasis element because the it has the same background as the container.
The Button is no longer the highest emphasis element because it has the same background as the container.
Also, the text and the icon button don't contrast enough with the parent's background.

The color inversion is implemented to solves this issue, keeping the global variants meaningful when multiple layers of global variants are composed together.
The color inversion is implemented to solve this issue, keeping the global variants meaningful when multiple layers of global variants are composed together.

## Overview

Expand Down Expand Up @@ -54,8 +54,7 @@ Color inversion has no effect on children that have an **explicit** `color` prop

## Usage

To enable color inversion, use the `invertedColors` prop on one of the two components that support it: [Sheet](/joy-ui/react-sheet/) or [Card](/joy-ui/react-card/).
Note that this prop only works when these components have the `solid` or `soft` global variant applied.
To enable color inversion, use the `invertedColors` prop. Note that this prop only works when the components have the `solid` or `soft` global variant applied.

```js
<Card variant="solid" invertedColors></Card>
Expand Down

0 comments on commit b129707

Please sign in to comment.