pbakaus_impeccable/tests/shiki-theme.test.mjs

import assert from 'node:assert/strict';
import { describe, it } from 'node:test';

import { loadDesignSystemForCwd, isAllowedColorRaw } from '../cli/engine/design-system.mjs';
import { parseAnyColor } from '../cli/engine/rules/checks.mjs';
import { impeccableShikiThemes } from '../site/lib/impeccable-shiki-theme.mjs';

function relativeLuminance({ r, g, b }) {
  const channel = value => {
    const s = value / 255;
    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
  };
  return (0.2126 * channel(r)) + (0.7152 * channel(g)) + (0.0722 * channel(b));
}

function contrastRatio(a, b) {
  const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
  const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
  return (lighter + 0.05) / (darker + 0.05);
}

function themeForegrounds(theme) {
  const colors = new Set([theme.colors['editor.foreground']]);
  for (const token of theme.tokenColors || []) {
    if (token.settings?.foreground) colors.add(token.settings.foreground);
  }
  return [...colors];
}

describe('impeccable Shiki themes', () => {
  it('only use colors from DESIGN.md and the sidecar ramps', () => {
    const designSystem = loadDesignSystemForCwd(process.cwd());
    assert.ok(designSystem?.present, 'DESIGN.md should be available for docs theme validation');

    for (const [mode, theme] of Object.entries(impeccableShikiThemes)) {
      const colors = new Set([
        theme.colors['editor.background'],
        theme.colors['editor.foreground'],
        ...themeForegrounds(theme),
      ]);

      for (const color of colors) {
        assert.ok(isAllowedColorRaw(color, designSystem), `${mode} Shiki color ${color} is not in DESIGN.md`);
      }
    }
  });

  it('keeps every token foreground at AA contrast against its code block background', () => {
    for (const [mode, theme] of Object.entries(impeccableShikiThemes)) {
      const background = parseAnyColor(theme.colors['editor.background']);
      assert.ok(background, `${mode} code background should parse`);

      for (const foregroundValue of themeForegrounds(theme)) {
        const foreground = parseAnyColor(foregroundValue);
        assert.ok(foreground, `${mode} foreground ${foregroundValue} should parse`);

        const ratio = contrastRatio(foreground, background);
        assert.ok(
          ratio >= 4.5,
          `${mode} foreground ${foregroundValue} only has ${ratio.toFixed(2)}:1 contrast`,
        );
      }
    }
  });
});