[Saifjafri212213]

Summary

The tinted error boxes and guide callouts never got their tint. Classes like border-[var(--rose)]/30 and bg-[var(--rose)]/5 build no CSS in Tailwind 3, because it cannot put an opacity on a var() colour, so the boxes fell back to the default grey border (rgb(229, 231, 235)) with a transparent background.

Closes #411

Fix

• tailwind.config.ts now defines tint colours: border-tint-rose-30, bg-tint-rose-5 and so on, for the eight accents and the steps 5, 10, 30 and 40. Each is color-mix(in srgb, var(--rose) 30%, transparent), so the accent still follows the theme. color-mix() is already used in the project's inline styles, so there is no new browser requirement. To use another percentage, add it to TINT_STEPS.
• The 32 classes in 12 files from the issue are replaced one for one (border-[var(--rose)]/30 becomes border-tint-rose-30, bg-[var(--cyan)]/10 becomes bg-tint-cyan-10, and so on), so each box keeps its accent, its percentages and its other classes.
• lib/__tests__/tint-classes.test.ts fails when a [var(--x)]/NN or [var(--x)]/[0.N] class shows up again in app/, components/ or lib/, and checks that Tailwind itself builds every tint class the source uses.

How I Tested This

• Confirmed the bug first in the built CSS: the plain border-[var(--rose)] and text-[var(--rose)] rules exist, but there is no rule for any [var(--x)]/NN class. In the built app, the UUID inspector's error box had border-top-color: rgb(229, 231, 235) and background-color: rgba(0, 0, 0, 0) in both themes.
• Test fails on the old code (it lists the 17 lines in the 12 files from the issue) and passes with the fix. Mutating the config (a missing step, a missing accent, tint not added to the colours, a different colour space, an opaque mix, the wrong accent) and the guard (ignoring /[0.3], scanning too few folders) each makes a test fail.
• Computed style in the built app, in both themes, by switching with the site's own theme button. Every box now has a border with alpha 0.3 (0.4 for the amber callouts) and a background with alpha 0.05 or 0.1, and the colour changes with the theme (for example rose rgb(255, 77, 109) in the dark theme and rgb(212, 39, 78) in the light one). I triggered each error state for real:
  • UUID generator: inspector error, and quantity error
  • Number base converter: invalid digit, and a number that does not fit the width
  • Timestamp converter: invalid timestamp, and invalid date
  • Regex tester: invalid pattern
  • CSV validator: the green "No problems found" box
  • Guides: the step circles and the amber callouts in the JWT, Unix timestamp, invoice, JSON and WCAG guides
• Cron explainer and Markdown preview error boxes were checked on the dev server (next dev), because the two pages did not finish loading in my browser pane with a production build, and the same happens on a clean develop build, so it is not caused by this change. The classes are the same ones the built app was checked with, and both gave the same computed values.
• tsc is clean, lint is at develop's 11 warnings, the full suite passes (2432 tests) and next build succeeds. The CI check for a BOM or garbled characters finds nothing.

AI assistance

An AI coding assistant helped write the fix and the test. I checked the built CSS and the computed styles in a real browser, and ran the checks listed above.

[anurag629]

Thanks @Saifjafri212213, clean fix. Lint (develop's 11 warnings), all 2432 tests, the build and the pages pass on top of develop. The built CSS now has the tint rules (color-mix(in srgb, var(--violet) 10%, transparent) and so on), and on the JWT guide the numbered circles get their violet tint and border in both themes, each following that theme's own violet.