kwila/market
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: basic theming system #18

Merged
Pertempto merged 56 commits from claude/basic-theme-system-01R9ZPWfW5H8JTPtaULWiAhS into main 2025-11-15 10:24:03 -05:00
Conversation 3 Commits 56 Files changed 16 +1049 -233
Pertempto commented 2025-11-14 16:38:12 -05:00 (Migrated from github.com)
Copy link
No description provided.
cloudflare-workers-and-pages[bot] commented 2025-11-14 16:38:21 -05:00 (Migrated from github.com)
Copy link

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs		 market 593e2674 Commit Preview URL

Branch Preview URL		 Nov 15 2025, 03:00 PM
## Deploying with &nbsp;<a href="https://workers.dev"><img alt="Cloudflare Workers" src="https://workers.cloudflare.com/logo.svg" width="16"></a> &nbsp;Cloudflare Workers The latest updates on your project. Learn more about [integrating Git with Workers](https://developers.cloudflare.com/workers/ci-cd/builds/git-integration/). | Status | Name | Latest Commit | Preview URL | Updated (UTC) | | -|-|-|-|-| | ✅ Deployment successful! <br>[View logs](https://dash.cloudflare.com/?to=/ef1b3f6f45e7d16874284a2637bec85b/workers/services/view/market/production/builds/07a0229a-9612-4060-baff-fd66ae0e8eae) | market | 593e2674 | <a href='https://99ff5b21-market.kwila-cloud.workers.dev'>Commit Preview URL</a><br><br><a href='https://claude-basic-theme-system-01r9zpwfw5h8jtptaulwiahs-market.kwila-cloud.workers.dev'>Branch Preview URL</a> | Nov 15 2025, 03:00 PM |
github-actions[bot] commented 2025-11-14 16:42:16 -05:00 (Migrated from github.com)
Copy link

Changes Requested

Please make the following changes before merging:

  • Move Tailwind directives out of src/styles/themes.css and remove @theme inline usage; keep themes.css as plain CSS variables and place Tailwind @tailwind base; @tailwind components; @tailwind utilities; in src/styles/global.css (and import themes.css from there).
  • Make isValidTheme in src/lib/themes.ts accept unknown and use Object.prototype.hasOwnProperty.call(themes, name) for a defensive runtime guard.
  • Guard VALID_THEMES in src/components/astro/ThemeInitializer.astro with Array.isArray before calling .includes.
  • Improve accessibility in src/components/react/ThemeSelector.tsx: add aria-haspopup="menu" to the toggle, ensure all <button>s include type="button" (already present), and implement keyboard handling (focus first item on open, support Escape to close and return focus, ArrowUp/Down navigation) or revert to simple list semantics.

Summary of Changes

  • Added a basic theming system with centralized theme definitions in src/lib/themes.ts and utilities in src/lib/themeManager.ts.
  • Added SSR-safe theme initializer component src/components/astro/ThemeInitializer.astro to avoid FOUC.
  • Added a React ThemeSelector component at src/components/react/ThemeSelector.tsx with a dropdown UI.
  • Added layout and pages updates to use themed tokens and new components (src/layouts/Layout.astro, src/pages/*).
  • Added theme CSS in src/styles/themes.css and imported it from src/styles/global.css.

Overall Feedback

  • Problems to fix: large blockers in the CSS build file (themes.css) — it uses non-standard Tailwind/PostCSS directives that will break builds, and defensive runtime checks in theme validation/initialization and keyboard accessibility are missing. Please address the four requested changes above.

  • Positives: The approach is clean: centralized theme definitions, SSR-safe initialization to prevent FOUC, and a user-friendly selector UI. These provide a solid foundation. Great work — this will be production-ready after the defensive and a11y fixes!

# Changes Requested Please make the following changes before merging: - Move Tailwind directives out of `src/styles/themes.css` and remove `@theme inline` usage; keep `themes.css` as plain CSS variables and place Tailwind `@tailwind base; @tailwind components; @tailwind utilities;` in `src/styles/global.css` (and import `themes.css` from there). - Make `isValidTheme` in `src/lib/themes.ts` accept `unknown` and use `Object.prototype.hasOwnProperty.call(themes, name)` for a defensive runtime guard. - Guard `VALID_THEMES` in `src/components/astro/ThemeInitializer.astro` with `Array.isArray` before calling `.includes`. - Improve accessibility in `src/components/react/ThemeSelector.tsx`: add `aria-haspopup="menu"` to the toggle, ensure all `<button>`s include `type="button"` (already present), and implement keyboard handling (focus first item on open, support Escape to close and return focus, ArrowUp/Down navigation) or revert to simple list semantics. ## Summary of Changes - Added a basic theming system with centralized theme definitions in `src/lib/themes.ts` and utilities in `src/lib/themeManager.ts`. - Added SSR-safe theme initializer component `src/components/astro/ThemeInitializer.astro` to avoid FOUC. - Added a React `ThemeSelector` component at `src/components/react/ThemeSelector.tsx` with a dropdown UI. - Added layout and pages updates to use themed tokens and new components (`src/layouts/Layout.astro`, `src/pages/*`). - Added theme CSS in `src/styles/themes.css` and imported it from `src/styles/global.css`. ## Overall Feedback - Problems to fix: large blockers in the CSS build file (`themes.css`) — it uses non-standard Tailwind/PostCSS directives that will break builds, and defensive runtime checks in theme validation/initialization and keyboard accessibility are missing. Please address the four requested changes above. - Positives: The approach is clean: centralized theme definitions, SSR-safe initialization to prevent FOUC, and a user-friendly selector UI. These provide a solid foundation. Great work — this will be production-ready after the defensive and a11y fixes!
github-actions[bot] commented 2025-11-14 18:32:41 -05:00 (Migrated from github.com)
Copy link

src/components/react/ThemeSelector.tsx — accessibility improvements

  • The toggle SVG is purely decorative; add aria-hidden="true" (and focusable="false") to the <svg> to avoid double announcements from screen readers.
  • Mark the dropdown container as a menu and items as menuitems (role="menu" on the dropdown wrapper and role="menuitem" on each theme button) to improve keyboard/screen-reader semantics.

These are small, focused changes and will make the selector much more accessible.

`src/components/react/ThemeSelector.tsx` — accessibility improvements - The toggle SVG is purely decorative; add `aria-hidden="true"` (and `focusable="false"`) to the `<svg>` to avoid double announcements from screen readers. - Mark the dropdown container as a menu and items as menuitems (`role="menu"` on the dropdown wrapper and `role="menuitem"` on each theme button) to improve keyboard/screen-reader semantics. These are small, focused changes and will make the selector much more accessible.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
kwila/market!18
No description provided.