Bugfix: Make selected rating chips readable in both colour schemes

The excellent and poor chips became unreadable once selected.

A selected chip is filled with its rating colour and labelled with the matching
text-on-* token. Those tokens flip with the colour scheme, near-black in light and
white in dark, while the fills stay the same shades in both. So each fill ends up
paired with a foreground that suits only one of the two schemes.

Measured against WCAG AA, in light mode very_bad sat at 2.80:1, very_good at
3.47:1 and bad at 4.39:1; in dark mode neutral sat at 1.65:1 and good at 3.70:1.
The two reported are the worst of the five, but three others were failing too, and
no single foreground fixes all of them: white is unreadable on the yellow.

The foreground is now chosen per fill from the two fixed base tokens, which do not
move with the scheme, since the fills do not either. White on the dark red and
dark green, black on the yellow and mid green. The lowest pairing is now 4.72:1
and all five clear 4.5:1 in both schemes.

Verified the generated utilities resolve in the compiled stylesheet, and updated
the class expectations in the rating spec.

Verified: 2010 client tests, typecheck, eslint with no errors, a11y lint, the
production build and prettier.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: az108

src/main/webapp/app/shared/components/atoms/rating/rating.component.ts

@@ -15,12 +15,19 @@ interface VariantClasses {
   textOn: string;
 }
 
+/**
+ * A selected chip is filled with its rating colour, so its label needs a foreground picked for that
+ * fill. The text-on-* tokens cannot be used here: they flip between near-black and white with the
+ * colour scheme, while these fills stay the same in both, so each one fails in one scheme or the
+ * other. The dark red and dark green fills need white, the yellow and mid-green need black. Every
+ * pairing below clears the WCAG AA 4.5:1 minimum, the tightest being 4.72:1 on the mid red.
+ */
 const VARIANT_CLASSES: Record<LikertValue, VariantClasses> = {
-  [-2]: { bg: 'bg-negative-active', hoverBg: 'hover:bg-negative-active/15', textOn: 'text-text-on-danger' },
-  [-1]: { bg: 'bg-negative-hover', hoverBg: 'hover:bg-negative-hover/15', textOn: 'text-text-on-danger' },
-  [0]: { bg: 'bg-warning-default', hoverBg: 'hover:bg-warning-default/15', textOn: 'text-text-on-warn' },
-  [1]: { bg: 'bg-positive-hover', hoverBg: 'hover:bg-positive-hover/15', textOn: 'text-text-on-success' },
-  [2]: { bg: 'bg-positive-active', hoverBg: 'hover:bg-positive-active/15', textOn: 'text-text-on-success' },
+  [-2]: { bg: 'bg-negative-active', hoverBg: 'hover:bg-negative-active/15', textOn: 'text-base-white' },
+  [-1]: { bg: 'bg-negative-hover', hoverBg: 'hover:bg-negative-hover/15', textOn: 'text-base-white' },
+  [0]: { bg: 'bg-warning-default', hoverBg: 'hover:bg-warning-default/15', textOn: 'text-base-black' },
+  [1]: { bg: 'bg-positive-hover', hoverBg: 'hover:bg-positive-hover/15', textOn: 'text-base-black' },
+  [2]: { bg: 'bg-positive-active', hoverBg: 'hover:bg-positive-active/15', textOn: 'text-base-white' },
 };
 
 @Component({

src/test/webapp/app/shared/components/atoms/rating/rating.component.spec.ts

@@ -53,11 +53,11 @@ describe('RatingComponent', () => {
   // ---------------- BUTTON STATES ----------------
   it.each<[number | undefined, number, string, string | undefined]>([
     [undefined, 0, 'hover:bg-negative-active/15', undefined],
-    [-2, 0, 'bg-negative-active', 'text-text-on-danger'],
-    [-1, 1, 'bg-negative-hover', 'text-text-on-danger'],
-    [0, 2, 'bg-warning-default', 'text-text-on-warn'],
-    [1, 3, 'bg-positive-hover', 'text-text-on-success'],
-    [2, 4, 'bg-positive-active', 'text-text-on-success'],
+    [-2, 0, 'bg-negative-active', 'text-base-white'],
+    [-1, 1, 'bg-negative-hover', 'text-base-white'],
+    [0, 2, 'bg-warning-default', 'text-base-black'],
+    [1, 3, 'bg-positive-hover', 'text-base-black'],
+    [2, 4, 'bg-positive-active', 'text-base-white'],
     [2, 0, 'hover:bg-negative-active/15', undefined],
   ])('should compute classes for rating=%s at index=%i', (rating, index, expectedClass, expectedTextClass) => {
     fixture.componentRef.setInput('rating', rating);
@@ -67,7 +67,7 @@ describe('RatingComponent', () => {
     if (expectedTextClass !== undefined) {
       expect(classes).toContain(expectedTextClass);
     } else {
-      expect(classes).not.toContain('text-text-on-');
+      expect(classes).not.toContain('text-base-');
     }
   });