I mostly use the "dark" theme which these badges looked good in. The "light" theme is broken though. No contrast.
documentElements,
  );
  updateStyleHelper(
    displayDensity,
    'font-size-monospace-large',
    documentElements,
  );
  updateStyleHelper(
    displayDensity,
    'font-size-monospace-small',
    documentElements,
  );
  updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
  updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
  updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
  updateStyleHelper(displayDensity, 'line-height-data', documentElements);
  
  
  const computedStyle = getComputedStyle((document.body: any));
  const fontSize = computedStyle.getPropertyValue(
    `--${displayDensity}-root-font-size`,
  );
  const root = ((document.querySelector(':root'): any): HTMLElement);
  root.style.fontSize = fontSize;
}
export function updateThemeVariables(
  theme: Theme,
  documentElements: DocumentElements,
): void {
  updateStyleHelper(theme, 'color-attribute-name', documentElements);