Use d-o{n} to change the opacity of your element.
<div class="d-p-200 d-bar-400 d-bgc-moderate d-o100">.d-o100</div>
<div class="d-p-200 d-bar-400 d-bgc-moderate d-o75">.d-o75</div>
<div class="d-p-200 d-bar-400 d-bgc-moderate d-o50">.d-o50</div>
<div class="d-p-200 d-bar-400 d-bgc-moderate d-o25">.d-o25</div>
<div class="d-p-200 d-bar-400 d-bgc-moderate d-o0">.d-o0</div>
Use h:d-o{n} to change an element's :hover state opacity.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate h:d-o50">Hover me</dt-button>
Use f:d-o{n} to change an element's :focus and :focus-within state opacity.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate f:d-o50">Focus me</dt-button>
Use fv:d-o{n} to change an element's :focus-visible state opacity [only when focused by keyboard].
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-moderate fv:d-o50">Keyboard focus me</dt-button>