Mixed Primary Color

Mix White	Mix Black
90%	90%
70%	70%
50%	50%
30%	30%
10%	10%

1. Create function to set selected row

function highlightRow(link) {  
  // remove old highlighted rows
  document.querySelectorAll("table tr.highlighted-row").forEach((elem) => {
    elem.classList.remove('highlighted-row');
  });

  // add class to tr
  link.parentNode.parentNode.classList.add('highlighted-row');;
}

2. Call function on focus

Add following to the link attributes

... onfocus="highlightRow(this);" ...

3. Implement CSS

• Define color var to have a brighter primary color

:root {
  /* mix white to primary colorto make it brighter */
  --highlighted-row-classic-report: color-mix(in srgb, var(--ut-palette-primary), #FFF 90%);
}

• Use defined color when class is set

table tr.highlighted-row {
  background-color: var(--highlighted-row-classic-report, lightgrey);
}