Skip to content

Commit

Permalink
doc: enhance doc about color
Browse files Browse the repository at this point in the history
  • Loading branch information
@pirhoo
pirhoo committed Jul 24, 2024
1 parent cc87908 commit a7be6ee
Showing 1 changed file with 62 additions and 30 deletions.
92 changes: 62 additions & 30 deletions src/stories/layout/Colors.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,100 +35,132 @@ export default {
</td>
</tr>
<tr>
<td rowspan="2">
<strong>Secondary —</strong> Use the <code>color</code> option for lighter text. Use the <code>bg</code>
option for dividers and to indicate disabled component states.
<td>
<strong>Emphasis —</strong> For higher contrast text. Not applicable for backgrounds.
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
</td>
<td>
<code>--bs-secondary-color</code>, <code>--bs-secondary-color-rgb</code>
<code>--bs-emphasis-color</code>, <code>--bs-emphasis-color-rgb</code>
</td>
</tr>
<tr>
<td>
<strong>Border —</strong> For component borders, dividers, and rules. Use <code>--bs-border-color-translucent</code> to blend with backgrounds with an <code>rgba()</code> value.
</td>
<td class="ps-0">
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
</td>
<td>
<code>--bs-secondary-bg</code>, <code>--bs-secondary-bg-rgb</code>
<code>--bs-border-color</code>, <code>--bs-border-color-rgb</code>
</td>
</tr>
<tr>
<td rowspan="2">
<strong>Tertiary —</strong> Use the <code>color</code> option for even lighter text. Use the <code>bg</code>
option to style backgrounds for hover states, accents, and wells.
<td rowspan="4">
<strong>Primary —</strong> Main theme color, used for hyperlinks, focus styles, and component and form active states.
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
</td>
<td>
<code>--bs-tertiary-color</code>, <code>--bs-tertiary-color-rgb</code>
<code>--bs-primary</code>, <code>--bs-primary-rgb</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
</td>
<td>
<code>--bs-tertiary-bg</code>, <code>--bs-tertiary-bg-rgb</code>
<code>--bs-primary-bg-subtle</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
</td>
<td>
<strong>Emphasis —</strong> For higher contrast text. Not applicable for backgrounds.
<code>--bs-primary-border-subtle</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td>
<code>--bs-emphasis-color</code>, <code>--bs-emphasis-color-rgb</code>
<code>--bs-primary-text-emphasis</code>
</td>
</tr>
<tr>
<td rowspan="4">
<strong>Secondary —</strong> Second theme <code>color</code> option used for hovered hyperlinks and active styles.
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-secondary">&nbsp;</div>
</td>
<td>
<strong>Border —</strong> For component borders, dividers, and rules. Use <code>--bs-border-color-translucent</code> to blend with backgrounds with an <code>rgba()</code> value.
<code>--bs-secondary</code>, <code>--bs-secondary-rgb</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-bg-subtle)">&nbsp;</div>
</td>
<td>
<code>--bs-border-color</code>, <code>--bs-border-color-rgb</code>
<code>--bs-secondary-bg-subtle</code>
</td>
</tr>
<tr>
<td rowspan="4">
<strong>Primary —</strong> Main theme color, used for hyperlinks, focus styles, and component and form active states.
<td class="ps-0">
<div class="p-3 rounded-2" style="border: 5px var(--bs-secondary-border-subtle) solid">&nbsp;</div>
</td>
<td>
<code>--bs-secondary-border-subtle</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-secondary-text-emphasis)">Text</div>
</td>
<td>
<code>--bs-primary</code>, <code>--bs-primary-rgb</code>
<code>--bs-secondary-text-emphasis</code>
</td>
</tr>
<tr>
<td rowspan="4">
<strong>Tertiary —</strong> Third theme <code>color</code> for lighter text. Use the <code>bg</code>
option to style backgrounds for hover states, accents, and wells.
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-tertiary">&nbsp;</div>
</td>
<td>
<code>--bs-tertiary</code>, <code>--bs-tertiary-rgb</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-bg-subtle)">&nbsp;</div>
</td>
<td>
<code>--bs-primary-bg-subtle</code>
<code>--bs-tertiary-bg-subtle</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
<div class="p-3 rounded-2" style="border: 5px var(--bs-tertiary-border-subtle) solid">&nbsp;</div>
</td>
<td>
<code>--bs-primary-border-subtle</code>
<code>--bs-tertiary-border-subtle</code>
</td>
</tr>
<tr>
<td class="ps-0">
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
<div class="py-3 fw-bold h5" style="color: var(--bs-tertiary-text-emphasis)">Text</div>
</td>
<td>
<code>--bs-primary-text-emphasis</code>
<code>--bs-tertiary-text-emphasis</code>
</td>
</tr>
<tr>
Expand Down

0 comments on commit a7be6ee

Please sign in to comment.