Skip to content

Commit

Permalink
feat(docs): add a dedicated table variant for contrast ratio tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Oct 16, 2019
1 parent 8ab2ecf commit 4a99951
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 19 deletions.
14 changes: 14 additions & 0 deletions site/docs/4.3/assets/scss/_boosted-docs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,3 +351,17 @@ $doc-link-arrow-hover: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%2
.o-switch.btn-group-toggle .doc-label {
min-width: 6.25rem;
}

.table-contrast td,
.table-contrast tbody th {
font-weight: 700;
}

.table-contrast .aa-large-text,
.table-contrast .aa-large-text * {
font-size: 1.25rem;
}

.table-contrast thead th {
font-size: 1.5rem;
}
38 changes: 19 additions & 19 deletions site/docs/4.3/utilities/colors.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
<div class="container">
<div class="row">
<div class="col-lg">
<table class="table">
<table class="table table-contrast">
<caption class="sr-only">Core colors contrasts</caption>
<thead>
<tr>
Expand All @@ -74,39 +74,39 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
<tbody>
<tr class="table-dark">
<th scope="row" rowspan="3">#000</th>
<td>#ff7900</td>
<td>AAA</td>
<td class="text-primary">#ff7900</td>
<td class="text-primary">AAA</td>
</tr>
<tr class="table-dark">
<td class="pl-0">#fff</td>
<td>AAA</td>
</tr>
<tr class="table-dark">
<tr class="table-dark" style="color: #999">
<td class="pl-0">#999</td>
<td>AAA</td>
</tr>
<tr>
<tr class="aa-large-text">
<th scope="row" rowspan="3">#fff</th>
<td>#f16e00</td>
<td>AA Large text</td>
<td class="text-primary">#f16e00</td>
<td class="text-primary">AA Large text</td>
</tr>
<tr>
<td class="pl-0">#000</td>
<td>AAA</td>
</tr>
<tr>
<tr style="color: #666">
<td class="pl-0 align-top">#666</td>
<td>
AA<br>
AAA Large text
<span class="aa-large-text">AAA Large text</span>
</td>
</tr>
<tr style="background-color:#ff7900">
<th scope="row">#ff7900</th>
<td>#000</td>
<td>AAA</td>
</tr>
<tr class="table-primary">
<tr class="table-primary aa-large-text">
<th scope="row">#f16e00</th>
<td>#fff</td>
<td>AA Large text</td>
Expand All @@ -118,7 +118,7 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
</tr>
</tbody>
</table>
<table class="table">
<table class="table table-contrast">
<caption class="sr-only">Functional greys contrasts</caption>
<thead>
<tr>
Expand All @@ -138,7 +138,7 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
<td class="align-top">#fff</td>
<td>
AA<br>
AAA Large text
<span class="aa-large-text">AAA Large text</span>
</td>
</tr>
<tr style="background-color:#999">
Expand All @@ -165,7 +165,7 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
</table>
</div>
<div class="col-lg">
<table class="table">
<table class="table table-contrast">
<caption class="sr-only">Supporting colors contrasts</caption>
<thead>
<tr>
Expand Down Expand Up @@ -202,7 +202,7 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
</tr>
</tbody>
</table>
<table class="table">
<table class="table table-contrast">
<caption class="sr-only">Functional colors contrasts</caption>
<thead>
<tr>
Expand All @@ -222,10 +222,10 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
<td class="align-top">#000</td>
<td>
AA<br>
AAA Large text
<span class="aa-large-text">AAA Large text</span>
</td>
</tr>
<tr class="table-info" style="color: #fff">
<tr class="table-info aa-large-text" style="color: #fff">
<td class="pl-0">#fff</td>
<td>AA Large text</td>
</tr>
Expand All @@ -236,14 +236,14 @@ You should refer to those tables when using `.text-*` and `.bg-*` utilities to e
</tr>
<tr class="table-danger">
<th scope="row" rowspan="2">#cd3c14</th>
<td class="text-dark">#000</td>
<td class="text-dark">AA Large text</td>
<td class="aa-large-text text-dark">#000</td>
<td class="aa-large-text text-dark">AA Large text</td>
</tr>
<tr class="table-danger">
<td class="pl-0 align-top">#fff</td>
<td>
AA<br>
AAA Large text
<span class="aa-large-text">AAA Large text</span>
</td>
</tr>
</tbody>
Expand Down

0 comments on commit 4a99951

Please sign in to comment.