Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(color): update status color table #1929

Merged
merged 7 commits into from
Sep 26, 2024
+33 −44
Merged

docs(color): update status color table #1929

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
afa446a
docs(color): update info in status tokens table to match tokens
marionnegp Sep 25, 2024
063c5e0
docs(color): add note about deprecated status name
marionnegp Sep 25, 2024
9a0417d
docs(color): remove "error" as a status name
marionnegp Sep 25, 2024
a8bc0ff
Merge branch 'staging/clefairy' into docs/status-colors-info
bennypowers Sep 26, 2024
6faec6a
docs: color table
bennypowers Sep 26, 2024
e69780a
chore: patch core for ssr
bennypowers Sep 26, 2024
4132290
Merge branch 'staging/clefairy' into docs/status-colors-info
bennypowers Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions docs/foundations/color/usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ To learn more about our Red Hat red color, go to the [Brand
standards](https://www.redhat.com/en/about/brand/standards) website.

<rh-alert state="warning">
<h4 slot="header">Usage Warning</h4>
<h4 slot="header">Usage warning</h4>
<p>Do not apply the Red Hat red color to text in dark environments unless
it meets <a href="https://www.w3.org/WAI/WCAG21/Understanding/">WCAG 2.1 AA</a>
requirements.</p>
Expand Down Expand Up @@ -173,7 +173,7 @@ patterns like [alerts](/elements/alert), [badges](/elements/badge),

<rh-alert state="warning">
<h4 slot="header">Usage Warning</h4>
<p>The red-orange color is reserved for danger or error states, do not use it anywhere else.</p>
<p>The red-orange color is reserved for danger or error states. Do not use it anywhere else.</p>
</rh-alert>

<rh-table>
Expand All @@ -186,8 +186,11 @@ patterns like [alerts](/elements/alert), [badges](/elements/badge),
</thead>
<tbody>
<tr>
<td data-label="Status">Note/Tip</td>
<td data-label="Use case">Use purple to communicate helpful or important information.</td>
<td data-label="Status">Info</td>
<td data-label="Use case">
<p>Use purple to communicate helpful or important information.</p>
<p><em>Note:</em> "Info" was previously called "note/tip."</p>
</td>
</tr>
<tr>
<td data-label="Status">Neutral</td>
Expand All @@ -198,15 +201,15 @@ patterns like [alerts](/elements/alert), [badges](/elements/badge),
<td data-label="Use case">Use green to communicate a success state.</td>
</tr>
<tr>
<td data-label="Status">Caution</td>
<td data-label="Use case">Use yellow to communicate that an issue can be avoided.</td>
<td data-label="Status">Warning</td>
<td data-label="Use case">Use yellow to communicate that a destructive action might occur if an issue is not resolved.</td>
</tr>
<tr>
<td data-label="Status">Warning</td>
<td data-label="Use case">Use orange to communicate that a destructive action might occur if an issue is not resolved.</td>
<td data-label="Status">Caution</td>
<td data-label="Use case">Use orange to communicate that an issue can be avoided.</td>
</tr>
<tr>
<td data-label="Status">Danger/Error</td>
<td data-label="Status">Danger</td>
<td data-label="Use case">Use red-orange to communicate a destructive action or critical error.</td>
</tr>
</tbody>
Expand Down
Loading