Theming and color

<!-- the glow is purple because the text is purple -->
<button class="text-purple-600 focus-visible:tm-glow">Save</button>

<!-- the hold fill is red because the button's text is red -->
<button class="tm-hold-confirm text-red-600">Hold to delete</button>

:root {
  --tm-glow-color: rgb(59 130 246 / 0.55);
  --tm-shadow-color: oklch(0.2 0.02 260 / 0.35);
}

<div class="tm-glow" style="--tm-glow-color: oklch(0.7 0.19 25 / 0.5)">…</div>

@supports not (color: color-mix(in oklab, currentColor, transparent)) {
  :root {
    --tm-shadow-color: var(--tm-color);
    --tm-glow-color: var(--tm-color);
    --tm-outline-color: var(--tm-color);
  }
}

:root { --tm-glow-color: rgb(37 99 235 / 0.45); }

.dark { --tm-glow-color: rgb(96 165 250 / 0.55); }