Text Opacity
Utilities for controlling an element's font-color opacity.
The ability to control an element's color is only provided as a class. We do not provide variables to control this. The text opacity class resets the font color's alpha channel CSS variable value.
Usage
Use d-fco{n} to change a font-color's opacity. You can also change font-color's opacity on :hover, :focus, :focus-visible by using the respective h:d-fco{n}, f:d-fco{n}, fv:d-fco{n} prefixes.
<p class="d-fc-critical">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco99">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco95">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco90">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco85">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco75">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco50">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco25">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco10">The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco0">The quick brown fox jumps over the lazy dog.</p>
Inheritance Constraints
Text opacity CSS Utilities won't be inherited by its children. A font-color utility class must be present on the same element to work.
Text opacity utility classes don't inherit colors.
// This will not work
<div class="d-fc-critical">
<p>The quick brown fox jumps over the lazy dog.</p>
<p class="d-fco50">The quick brown fox jumps over the lazy dog.</p>
</div>
Apply each utility class to the same element
// This will
<div class="d-fc-critical">
<p>The quick brown fox jumps over the lazy dog.</p>
<p class="d-fc-critical d-fco50">The quick brown fox jumps over the lazy dog.</p>
</div>