fix: no light-alt in auto colors

[wesleyboar]

Overview

Add --global-color-accent--light-alt to color--cms.auto.css.

Related

• required by fix: a11y issues - color contrast Core-CMS-Custom#531

Changes

• added --global-color-accent--light-alt math

Testing

Via TACC/Core-CMS-Custom#531, verify footer has purple links.

UI

Before (Blue)	After (Purple)

[qodo-code-review]

Review Summary by Qodo

Add missing light-alt accent color variable

🐞 Bug fix

Walkthroughs

Description

• Add missing --global-color-accent--light-alt CSS variable
• Define intermediate light accent color using oklab formula
• Enables proper footer link styling in dark contexts

Diagram

flowchart LR
  A["CSS Variables"] -- "add light-alt" --> B["--global-color-accent--light-alt"]
  B -- "oklab formula" --> C["Intermediate Light Color"]
  C -- "enables" --> D["Footer Purple Links"]

Loading

File Changes

1. src/lib/_imports/settings/color--cms.auto.css ✨ Enhancement +3/-0

Add light-alt accent color variable definition

• Added --global-color-accent--light-alt CSS variable definition
• Uses oklab color space with 3/8 interpolation factor
• Includes explanatory comment about context-agnostic definition
• Positioned in :root selector for global availability

src/lib/_imports/settings/color--cms.auto.css

---

2. dist/settings/color--cms.auto.css Build +1/-1

Compiled CSS with light-alt variable

• Compiled output of source CSS changes
• Minified version includes new --global-color-accent--light-alt variable
• Updated build artifact reflecting source modifications

dist/settings/color--cms.auto.css

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1)   📘 Rule violations (0)   📎 Requirement gaps (0)   🎨 UX Issues (0)

🐞\ ≡ Correctness (1)

1. Dark light-alt mismatch 🐞 ≡

Description

In color--cms.auto.css, --global-color-accent--light-alt is computed at :root using a 3/8
lightening step, but :--dark-context-safe still computes --global-color-accent--light using a
2/4 step, so in dark contexts these two steps diverge. This differs from the non-auto CMS palette
where dark-context --global-color-accent--light equals the base
--global-color-accent--light-alt, leading to inconsistent accent colors between auto vs non-auto
modes in dark sections (including .s-footer).

Code

src/lib/_imports/settings/color--cms.auto.css[R11-13]

+
+        /* IMPORTANT: color.css not distinguish context, so here also not */
+        --global-color-accent--light-alt: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 3/8) a b);

Evidence

Footer links explicitly use --global-color-accent--light-alt, so this variable is relied on in
dark contexts (.s-footer is a dark context). In the non-auto CMS palette, dark-context
--global-color-accent--light is set to #6d8bda, which is also the base
--global-color-accent--light-alt value—so those two steps are equivalent there; in the auto
palette, dark-context --light is computed with a different coefficient (2/4) and --light-alt is
computed with 3/8, making them non-equivalent.

src/lib/_imports/trumps/s-footer.css[22-24]
src/lib/_imports/settings/color--cms.auto.css[8-14]
src/lib/_imports/settings/color--cms.auto.css[49-58]
dist/settings/color--cms.css[1-1]
dist/settings/color.css[1-1]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
In the CMS auto palette, `--global-color-accent--light-alt` is computed, but the dark-context remap for `--global-color-accent--light` does not use it (it uses a different interpolation step). This makes dark-context `--global-color-accent--light` differ from `--global-color-accent--light-alt`, unlike the non-auto CMS palette where these end up equal.

### Issue Context
- `.s-footer` (a dark context) sets link color to `var(--global-color-accent--light-alt)`.
- In the non-auto CMS palette, dark-context `--global-color-accent--light` equals the base `--global-color-accent--light-alt` value.

### Fix Focus Areas
- src/lib/_imports/settings/color--cms.auto.css[49-58]
- dist/settings/color--cms.auto.css[1-1]

### What to change
- In `:--dark-context-safe`, set `--global-color-accent--light` to reference `--global-color-accent--light-alt` (e.g., `--global-color-accent--light: var(--global-color-accent--light-alt);`) or otherwise adjust the dark-context math so the `--light` step corresponds to the `--light-alt` step.
- Rebuild/update the dist output so `dist/settings/color--cms.auto.css` matches the source logic.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more