diff --git a/CHANGELOG.md b/CHANGELOG.md index bf48c48..c3034dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to Workout Lens are documented here. +## [1.5.15] — 2026-05-19 + +### Accessibility +- **Fix WCAG AA contrast on active filter chips (History + Report)** — active chips used `#ee2c80` (magenta) fill with white text at 3.95:1, failing WCAG AA for normal text (requires 4.5:1). Added `--accent-active: #b5116a` token (~6:1 with white) to `carbon-tokens.css` and updated the active chip `background` and `borderColor` in `History.jsx` and the `FilterChip` component in `Report.jsx` to use it. + ## [1.5.14] — 2026-05-17 ### Developer / Infrastructure diff --git a/CLAUDE.md b/CLAUDE.md index b3a9021..e5d0c29 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -106,7 +106,7 @@ Uses `@carbon/react` and `@carbon/icons-react`. IBM Plex fonts (Sans, Mono, Seri - `Home.jsx` → `SectionLabel` + `PageHeading` headings; last session card with gym-class identity hero; 7-day weekly strip with heat colors — clicking a day that has a session navigates to History pre-selected on that date; `fetchThisWeekSessions` in `db.js` - `Report.jsx` → `SectionLabel` eyebrow with period + active day filters on two separate `display:block` spans; three separate `flexWrap: wrap` filter rows (period / weekdays / session types) with `1px solid var(--border-subtle-wl)` top borders between groups; "Nullstill filter" always rendered (opacity-toggled); KPI tiles → heatmap body → hover detail → heat legend → frequency table → gap callout card (with `AccentChip` per untrained muscle) → recommendation button → recs list; when all primary muscles trained shows positive fallback message; when some muscles secondary-only shows those as blue tags; recommendation rows have 3px accent left strip + round `+` button that saves the exercise inline via `saveLibraryExercise`; "Oppdater anbefalinger" ghost button (`Renew` icon) below the recs list — re-runs Claude call and overwrites the cache entry; no `StickyCta`; recs are persisted in the shared `recommendation_cache` Supabase table (see data model) and restored on mount/filter-change via `fetchRecsCache`; prefill prop applied on mount via `useRef` — supports `periodDays`, `selectedDays`, `selectedTypes`, `weekday`, `sessionType`; `KpiTile` (42px Plex Light value); `muscleLastDate` in useMemo - `PageShell.jsx` → exports: `SectionLabel` (mono 12px, 0.16em tracking, 3px `var(--accent)` left border; accepts optional `renderIcon` prop — renders the Carbon icon at 14px before the label text), `PageHeading` (Cond 700 28px), `PageTitle` (alias for SectionLabel), `AccentChip` (magenta pill: `var(--accent-bg-14)` bg, `var(--accent-soft)` text), `StickyCta` (sticky bottom bar with top border), `BackButton`; `NavBtn` is a `forwardRef` component accepting `l1` and `l2` props — renders a 2-line Plex Condensed (8px) label below the icon; nav bar height is 56px; nav icons in order: Camera → RecentlyViewed → Analytics → EventSchedule (Planlegger) → Notebook (Sett-sammen) → Settings — 6 icons each 48px wide; theme toggle and logout removed from header (now in Settings view); `ChangelogModal` no longer rendered here. `useNavHints` moved to `app/src/lib/hooks.js` (issue #253) -- `carbon-tokens.css` → added `--heat-1..5` green scale (#044317 → #42be65); WL custom tokens: `--accent` (#ee2c80 magenta), `--surface-card`, `--border-subtle-wl`, `--text-muted-wl`, `--accent-bg-08/14/30`, `--accent-soft`, `--r-card` (16px), `--r-pill` (999px), `--r-tile` (10px), `--cond` (IBM Plex Sans Condensed), `--exercise` (#7af2a4 green, g10 override #1a8c4e), `--exercise-soft` (rgba 12%), `--exercise-mid` (rgba 35%); g10 light-mode overrides for all WL tokens +- `carbon-tokens.css` → added `--heat-1..5` green scale (#044317 → #42be65); WL custom tokens: `--accent` (#ee2c80 magenta), `--accent-hover` (#d9246f), `--accent-active` (#b5116a — WCAG AA safe with white text ~6:1; use for filled active/selected states), `--surface-card`, `--border-subtle-wl`, `--text-muted-wl`, `--accent-bg-08/14/30`, `--accent-soft`, `--r-card` (16px), `--r-pill` (999px), `--r-tile` (10px), `--cond` (IBM Plex Sans Condensed), `--exercise` (#7af2a4 green, g10 override #1a8c4e), `--exercise-soft` (rgba 12%), `--exercise-mid` (rgba 35%); g10 light-mode overrides for all WL tokens - `app.css` → global `html, body { overflow-x: hidden }` to prevent horizontal viewport bleed from chip rows; do not use `overflow: hidden` on direct parents of `flexWrap: wrap` chip containers — it clips instead of scrolling ### Hard rules (must not regress) - **Sentence case** for all labels — `Add exercise`, not `Add Exercise` diff --git a/app/package.json b/app/package.json index fe0f32d..0dea83c 100644 --- a/app/package.json +++ b/app/package.json @@ -1,7 +1,7 @@ { "name": "workout-lens", "private": true, - "version": "1.5.14", + "version": "1.5.15", "author": "Christopher Rotnes", "license": "MIT", "repository": { diff --git a/app/src/components/History.jsx b/app/src/components/History.jsx index 56027d5..fa89b0e 100644 --- a/app/src/components/History.jsx +++ b/app/src/components/History.jsx @@ -359,8 +359,8 @@ export default function History({ initialDate }) { padding: "5px 13px", borderRadius: "var(--r-pill)", border: "1px solid", - borderColor: active ? "var(--accent)" : "var(--border-subtle-wl)", - background: active ? "var(--accent)" : "transparent", + borderColor: active ? "var(--accent-active)" : "var(--border-subtle-wl)", + background: active ? "var(--accent-active)" : "transparent", color: active ? "#fff" : "var(--text-muted-wl)", fontFamily: "var(--cds-font-mono)", fontSize: 11, diff --git a/app/src/components/Report.jsx b/app/src/components/Report.jsx index 3d7f2ef..8363cd0 100644 --- a/app/src/components/Report.jsx +++ b/app/src/components/Report.jsx @@ -23,8 +23,8 @@ function FilterChip({ label, active, onClick }) { letterSpacing: "0.06em", textTransform: "uppercase", border: "1px solid", - borderColor: active ? "var(--accent)" : "var(--border-subtle-wl)", - background: active ? "var(--accent)" : "transparent", + borderColor: active ? "var(--accent-active)" : "var(--border-subtle-wl)", + background: active ? "var(--accent-active)" : "transparent", color: active ? "#fff" : "var(--text-muted-wl)", cursor: "pointer", borderRadius: "var(--r-pill)", diff --git a/app/src/styles/carbon-tokens.css b/app/src/styles/carbon-tokens.css index 4bc9970..175be4f 100644 --- a/app/src/styles/carbon-tokens.css +++ b/app/src/styles/carbon-tokens.css @@ -390,6 +390,7 @@ /* Accent — magenta */ --accent: #ee2c80; --accent-hover: #d9246f; + --accent-active: #b5116a; --accent-soft: #ff7eb6; --accent-bg-08: rgba(238,44,128,.08); --accent-bg-14: rgba(238,44,128,.14);