Skip to content

Commit

Permalink
Docs: enhance colors description table
Browse files Browse the repository at this point in the history
  • Loading branch information
@julien-deramond @mdo
julien-deramond authored and mdo committed Jan 6, 2023
1 parent 1b83ab2 commit d17d2ab
Showing 1 changed file with 28 additions and 28 deletions.
56 changes: 28 additions & 28 deletions site/content/docs/5.3/customize/color.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,31 +111,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-primary">Primary</div>
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-primary-bg-subtle); --bs-border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text`{{< /markdown >}}
Expand All @@ -146,31 +146,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-success">Success</div>
<div class="p-3 rounded-2 bg-success">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-success-bg-subtle); --bs-border-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text`{{< /markdown >}}
Expand All @@ -181,31 +181,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-danger">Danger</div>
<div class="p-3 rounded-2 bg-danger">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-danger-bg-subtle); --bs-border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text`{{< /markdown >}}
Expand All @@ -216,31 +216,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-warning">Warning</div>
<div class="p-3 rounded-2 bg-warning">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-warning-bg-subtle); --bs-border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text`{{< /markdown >}}
Expand All @@ -251,31 +251,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-info">Info</div>
<div class="p-3 rounded-2 bg-info">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-info-bg-subtle); --bs-border-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-info-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text`{{< /markdown >}}
Expand All @@ -286,31 +286,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-light border">Light</div>
<div class="p-3 rounded-2 bg-light">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-light-bg-subtle); --bs-border-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-light-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text`{{< /markdown >}}
Expand All @@ -321,31 +321,31 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 text-bg-dark border">Dark</div>
<div class="p-3 rounded-2 bg-dark">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-dark-bg-subtle); --bs-border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Background subtle</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Border subtle</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-dark-text); color: var(--bs-body-bg);">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text`{{< /markdown >}}
Expand Down

0 comments on commit d17d2ab

Please sign in to comment.