Task 05: Homogenise styling across repo

[DeveloperAlly]

Summary

Audited and standardized styling across the repo. The codebase already has a solid theming architecture with style.css global CSS variables and themeStyles.jsx ThemeData.

Changes

CardCarousel.jsx

• Updated to use proper theme CSS variables instead of hardcoded fallbacks
• Uses --card-background, --accent, --border, --text

theme-colors.mdx (Wiki Documentation)

• Updated to document the full ThemeData object with all properties
• Added Global CSS Variables section documenting style.css
• Updated color values to match actual implementation
• Enhanced best practices section

Report

• Added completion report at docs/PLAN/reports/05-homogenise-styling-report.md
• Includes style guide/checklist for future development
• Documents which components use ThemeData vs global CSS variables
• Lists colors that should remain fixed (semantic colors)

Testing

• No lint errors
• Components use correct theme variables

Closes Task 05

---

Note

Low Risk
Mostly documentation plus minor CSS variable and naming fixes; risk is limited to small visual regressions in the affected components across light/dark themes.

Overview
Improves theme consistency in UI snippets by updating CardCarousel to rely solely on global CSS variables (e.g., --card-background, --accent, --border, --text) instead of hardcoded fallback colors, ensuring correct light/dark rendering for buttons and indicators.

Fixes a small variable naming/usage bug in frameMode.jsx’s P component affecting icon color resolution, and refreshes styling documentation: theme-colors.mdx now matches the current ThemeData shape/values and documents the style.css global variables, plus a new Task 05 completion report capturing the audit results and a styling checklist.

^{Written by Cursor Bugbot for commit 394369c. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on March 10

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

Removed fallbacks risk invisible buttons if CSS missing

Medium Severity

The old code used var(--card-bg, #fff) which fell back to white; the new code uses var(--card-background) with no fallback. If the --card-background CSS variable is not defined (e.g., style.css fails to load, or the variable name doesn't match the actual definition), the Previous/Next buttons will have a transparent background and potentially invisible text, breaking the carousel UI.

Additional Locations (1)

• snippets/components/display/CardCarousel.jsx#L110-L112

 

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 394369c445

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Restore high-contrast carousel dot indicators

The new dot colors make pagination state hard to see in light mode: CardCarousel now uses var(--accent)/var(--border), which map to #3cb540 and #e5e7eb in style.css (:root), both on a near-white page background. This is a regression from the previous active-dot color (var(--text, #333)) and can leave users with only faint indicators when browsing carousels on default light-theme pages.

Useful? React with 👍 / 👎.

[DeveloperAlly]

resolve