Skip to content

Commit

Permalink
Add status, lightness alias fc/bg classes; tweak theming
Browse files Browse the repository at this point in the history
  • Loading branch information
@dancormier
dancormier committed Aug 2, 2023
1 parent 468bd38 commit 12f4094
Show file tree
Hide file tree
Showing 6 changed files with 243 additions and 353 deletions.
35 changes: 12 additions & 23 deletions docs/product/base/colors-new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,6 @@ <h3>{{ set.name | capitalize }}</h3>
<p>…</p>
<p class="fc-dark">…</p>
{% endhighlight %}
<div class="stacks-preview--example my8 fs-body2">
<p class="fc-light"><strong>Color:</strong> Light <code class="stacks-code">black-500</code></p>
<p class="fc-medium"><strong>Color:</strong> Medium <code class="stacks-code">black-700</code></p>
<p><strong>Color:</strong> Default <code class="stacks-code">black-800</code></p>
<p class="fc-dark"><strong>Color:</strong> Dark <code class="stacks-code">black-900</code></p>
</div>
</div>

{% header "h3", "Danger and error" %}
Expand All @@ -166,24 +160,19 @@ <h3>{{ set.name | capitalize }}</h3>
</thead>
<tbody>
<tr class="ff-mono">
<td class="fc-danger">
<td class="fc-new-danger">
<div class="d-flex g12">
<div class="flex--item ws-nowrap">.fc-danger</div>
<div class="flex--item ws-nowrap">.fc-error</div>
<div class="ws-nowrap">.fc-new-danger</div>
<div class="ws-nowrap">.fc-new-error</div>
</div>
</td>
<td class="p8">
<div class="d-flex g4">
<div class="flex--item bg-danger p8 fc-white bar-sm ws-nowrap">.bg-danger</div>
<div class="flex--item bg-error p8 fc-white bar-sm ws-nowrap">.bg-error</div>
</div>
</td>
<td class="p8">
<div class="d-flex g4">
<div class="flex--item ba bc-danger p8 bar-sm fc-danger ws-nowrap">.bc-danger</div>
<div class="flex--item ba bc-error p8 bar-sm fc-error ws-nowrap">.bc-error</div>
<div class="bg-new-danger p8 fc-white bar-sm ws-nowrap">.bg-new-danger</div>
<div class="bg-new-error p8 fc-white bar-sm ws-nowrap">.bg-new-error</div>
</div>
</td>
<!-- TODO mention deprecation of border-color alias classes (which we documented in legacy colors but didn't generate 😬) -->
</tr>
</tbody>
</table>
Expand All @@ -201,12 +190,12 @@ <h3>{{ set.name | capitalize }}</h3>
</thead>
<tbody>
<tr class="ff-mono">
<td class="fc-success">.fc-success</td>
<td class="fc-new-success">.fc-new-success</td>
<td class="p8">
<div class="bg-success p8 fc-white bar-sm d-inline-block">.bg-success</div>
<div class="bg-new-success p8 fc-white bar-sm d-inline-block">.bg-new-success</div>
</td>
<td class="p8">
<div class="ba bc-success p8 bar-sm d-inline-block fc-success">.bc-success</div>
<div class="ba bc-new-success p8 bar-sm d-inline-block fc-new-success">.bc-new-success</div>
</td>
</tr>
</tbody>
Expand All @@ -225,12 +214,12 @@ <h3>{{ set.name | capitalize }}</h3>
</thead>
<tbody>
<tr class="ff-mono">
<td class="fc-warning">.fc-warning</td>
<td class="fc-new-warning">.fc-new-warning</td>
<td class="p8">
<div class="bg-warning p8 fc-white bar-sm d-inline-block">.bg-warning</div>
<div class="bg-new-warning p8 fc-white bar-sm d-inline-block">.bg-new-warning</div>
</td>
<td class="p8">
<div class="ba bc-warning p8 bar-sm d-inline-block fc-warning">.bc-warning</div>
<div class="ba bc-new-warning p8 bar-sm d-inline-block fc-new-warning">.bc-new-warning</div>
</td>
</tr>
</tbody>
Expand Down
Loading

0 comments on commit 12f4094

Please sign in to comment.