Gradients & rings

Tidal's buttons use subtle gradients rather than flat fills. Reference these via the CSS variables (e.g. --gradient-button-primary) or the Tailwind utilities (e.g. bg-button-primary).

Button gradients

--gradient-button-default

--gradient-button-default-hover

--gradient-button-default-inverse

--gradient-button-default-inverse-hover

--gradient-button-secondary

--gradient-button-destructive

--gradient-button-destructive-hover

--gradient-button-success

--gradient-button-success-hover

--gradient-button-primary

--gradient-button-primary-hover

Focus rings

--ring-primary

--ring-destructive

--ring-primary-input

--ring-destructive-input