feat: Add CSS custom properties for TableOfContents styling

[ainsleyclark]

Summary

Enhanced the TableOfContents component with customizable CSS variables, allowing consumers to override default styling without modifying the component code.

Key Changes

• Replaced hardcoded var(--token-text-action) with var(--toc-color-active, var(--token-text-action)) for active and hover states, enabling custom active link colors
• Replaced hardcoded a.$size-48 spacing values with var(--toc-border-offset, #{a.$size-48}) for the left margin and padding on tablet breakpoint, allowing customizable border offset
• Replaced hardcoded var(--colour-light-600) with var(--toc-border-color, var(--colour-light-600)) for the left border color, enabling custom border styling

Implementation Details

All changes use CSS custom properties with fallback values, ensuring backward compatibility. The fallbacks preserve the original styling behavior when custom properties are not defined, allowing for gradual adoption of customization.

https://claude.ai/code/session_01Krrs4t3uZKDuAx6vk69JPw

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[claude]

Review summary

• Overall score: 8/10
• Critical issues: 0
• Warnings: 1
• Suggestions: 2
• Recommendation: ⚠️ Approve with comments

Clean, minimal change that correctly wraps hardcoded values in CSS custom properties with fallbacks, preserving full backward compatibility. One naming discrepancy between the PR description and the implementation worth noting.

---

Critical issues 🔴

None

---

Warnings 🟡

1. PR description documents wrong variable name

The PR description states the active colour variable as --toc-color-active (American spelling), but the actual implementation uses --toc-colour-active (British spelling). The changeset is correct. This is purely a documentation issue and won't affect runtime behaviour, but could confuse consumers who reference the PR for the API.

---

Suggestions 🟢

1. Document that --toc-border-offset only applies at the tablet breakpoint

The changeset entry for --toc-border-offset says it overrides margin-left and padding-left on the border variant, but doesn't mention this only takes effect at the tablet breakpoint and above. Worth clarifying so consumers aren't confused when the variable appears to have no effect on small screens.

2. Consider --toc-border-width for completeness

The border colour is now configurable via --toc-border-colour, but the 1px border width remains hardcoded. If consumers are likely to want full control over the border, exposing --toc-border-width alongside would round out the API. Low priority — skip if not a common use case.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.26%. Comparing base (7f6b060) to head (5180564).
⚠️ Report is 518 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #433      +/-   ##
==========================================
+ Coverage   64.59%   70.26%   +5.67%     
==========================================
  Files         154      187      +33     
  Lines        6064     7439    +1375     
==========================================
+ Hits         3917     5227    +1310     
+ Misses       2064     2012      -52     
- Partials       83      200     +117     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.