Skip to content

Commit b0bdb31

Browse files
authored
Add a notice that dark mode colors are inverted (#732)
1 parent e9ecb35 commit b0bdb31

File tree

1 file changed

+3
-0
lines changed

1 file changed

+3
-0
lines changed

docs/product/base/colors.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
<p class="stacks-copy">
1414
If your layout can’t be built using atomic color classes, all stops are available as CSS variables. Referencing the CSS variables directly will make sure dark mode is properly accounted for. If working in a legacy context, referencing our colors as Less variables is preferred to Hex, though both are deprecated. A common refactor is replacing <code class="stacks-code">background-color: @white;</code> with <code class="stacks-code">background-color: var(--white);</code> to make sure a legacy component is aware of dark mode when a deeper refactor isn’t possible.
1515
</p>
16+
<p class="stacks-copy">
17+
When dark mode is enabled, the values of numbered color variables will be inverted from what they are with dark mode disabled—<code class="stacks-code">900</code> being the lightest, and <code class="stacks-code">025</code> or <code class="stacks-code">050</code> being the darkest. This is because the values don't represent lightness, but rather contrast with the background. The same also applies to <code class="stacks-code">lighter</code> variants of non-numbered color variables.
18+
</p>
1619

1720
<div class="s-btn-group jc-end mt24 mb16">
1821
<button class="s-btn s-btn__muted s-btn__outlined is-selected js-css-btn" role="button">

0 commit comments

Comments
 (0)