Stisla

Link

An inline anchor with the primary color, underline, and hover tint.

Default

Add .link to an <a> sitting in app UI prose. Reboot strips anchor styling globally so a bare <a> renders as inherited text; .link opts back into the primary-colored underline.

Settings have moved under Workspace preferences.

<p>Settings have moved under <a class="link" href="#">Workspace preferences</a>.</p>

In running prose

Inside .prose, bare <a> picks up the same recipe without a class so article markup stays semantic. The two surfaces are independently retunable: --link-color drives .link, --st-prose-link-color drives anchors inside .prose.

Stisla ships a small set of components and a thin utility layer. See the customization page for the variable surface, or jump to utilities for the spacing and layout escape hatches.

<p>Stisla ships a small set of components and a thin utility layer. See the <a href="/customization">customization page</a> for the variable surface, or jump to <a href="/utilities">utilities</a> for the spacing and layout escape hatches.</p>

Retune color

Override --link-color on the element, on a parent scope, or on :root. The hover color derives from --link-color by default, so a single override moves both states. Set --link-hover-color directly to break that derivation.

Pair tone with intent. Backup succeeded, three checks failed, two queued. 

<p>
  Pair tone with intent.
  <a class="link" style="--link-color: var(--st-success);" href="#">Backup succeeded</a>,
  <a class="link" style="--link-color: var(--st-danger);" href="#">three checks failed</a>,
  <a class="link" style="--link-color: var(--st-warning);" href="#">two queued</a>.
</p>

Customization

Four variables retune .link. The hover color resolves once at component definition, so overriding --link-color auto-moves --link-hover-color. Setting --link-hover-color after that breaks the link and pins the hover to a literal value.

Variable Default Use
--link-color var(--st-primary) Resting text color and the source for the hover mix.
--link-decoration-offset 2px Distance between the baseline and the underline.
--link-decoration-thickness 1px Underline weight.
--link-hover-color color-mix(in oklch, var(--link-color) 80%, black) Hover text color. Derives from --link-color by default; override directly to pin a literal value.