feat(ui): redesign public site with design system, dark mode and a11y fixes - #278
Draft
aalvaropc wants to merge 1 commit into
Draft
feat(ui): redesign public site with design system, dark mode and a11y fixes#278aalvaropc wants to merge 1 commit into
aalvaropc wants to merge 1 commit into
Conversation
… fixes Replace ad-hoc styling with a token-based design system and fix the accessibility and correctness defects found while auditing the public pages. Design system: - Semantic, theme-aware tokens in global.css (surfaces, text, lines, accent) resolved through @theme inline, so one class on <html> retunes every utility - Two-tier brand palette: vivid Google colours for decoration, contrast-safe variants for text. The vivid yellow was 1.91:1 on white and unusable as text - Fluid type scale with a display face (Space Grotesk) over Geist for body - Desert-warm neutrals; the previous cool grey read as a generic template - Shared utilities: container, section, card, brand-rule, grain, photo-graded Accessibility: - Global :focus-visible ring; the stylesheet previously shipped none - Mobile menu rebuilt: hidden when closed (was translated off-screen, leaving 6 links tabbable), plus aria-expanded, focus trap, scroll lock and Escape - Added <main> landmark and a skip link - Real headings instead of <p class="text-2xl font-bold"> - CTA no longer places white text over a red/green gradient (3.30:1) - aria-live result count on the event filters Bug fixes: - EventCard horizontal variant ignored its own category/status props and hardcoded "DevFest / Próximo / Destacado" on every featured event - grid-col-* typos generated no CSS, leaving tablets at one column - "Compartir evento" linked to the homepage - Marquee .reverse() mutated its source arrays, breaking the loop seam - Attendee count could render negative ("-13 lugares disponibles") - Two events shipped an empty registerFormLink behind an active CTA - Gallery recreated its Fancybox options each render, churning the binding - cn() dropped custom font-size utilities colliding with colour classes - Logo and favicon had an opaque white background baked in Components: adds PersonCard, SectionHeader, SocialLinks, ThemeToggle, DuneDivider and EmptyState; removes MemberCard, OrganizerCard and VolunteerCard, which were three near-identical copies.
This was referenced Jul 29, 2026
aalvaropc
added a commit
that referenced
this pull request
Jul 30, 2026
public/gdg-logo.png tenía el fondo blanco calcado en el propio PNG (RGBA totalmente opaco en las cuatro esquinas), así que sobre cualquier superficie que no fuese blanca se veía como un recuadro claro. Salta a la vista en el panel, que es oscuro: el logo aparece metido en una caja. Se sustituye por la versión que ya venía preparada en la rama del rediseño (worktree-redesign-ux, PR #278): fondo transparente y 180x180 en vez de 120x120. El archivo se referencia desde diez sitios, todos con <img> y clases o atributos que solo escalan —ninguno usa el componente Image de Astro—, así que el cambio de dimensiones no afecta a ningún layout. Las esquinas redondeadas del footer y de /about estaban ahí para disimular el recuadro blanco; ahora son inocuas, no las toco para no mezclar cambios.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Replaces ad-hoc styling across the public site with a token-based design system, and fixes the accessibility and correctness defects found while auditing each page.
Design system — semantic, theme-aware tokens resolved through
@theme inline, so a single class on<html>retunes every utility. Adds a full dark theme (toggle +prefers-color-scheme, no flash of wrong theme). Brand colours are split into two tiers: vivid Google colours for decoration, contrast-safe variants for anything carrying meaning — the vivid yellow measured 1.91:1 on white and could never be used as text. Type moves to a fluid scale with Space Grotesk on display and Geist on body, over desert-warm neutrals.Accessibility — the stylesheet previously shipped zero
focus-visiblerules; there is now a global focus ring. The mobile menu was hidden with an off-screen transform, leaving 6 links in the tab order while "closed"; it is rebuilt withhidden,aria-expanded, a focus trap, scroll lock, Escape-to-close and focus return. Adds a<main>landmark and skip link, replaces headings faked with<p class="text-2xl font-bold">, and gives the event filters anaria-liveresult count. The CTA no longer puts white text over a red/green gradient (3.30:1).Bugs fixed
EventCard's horizontal variant ignored its own props and hardcoded "DevFest / Próximo / Destacado" on every featured eventgrid-col-*typos generated no CSS, leaving tablets stuck at one columnMarqueeused.reverse(), mutating its source arrays and breaking the loop seam in 2 of 3 columnsregisterFormLinkbehind an active CTAGalleryrecreated its Fancybox options every render, churning the bindingcn()silently dropped custom font-size utilities that collided with colour classesComponents — adds
PersonCard,SectionHeader,SocialLinks,ThemeToggle,DuneDivider,EmptyState; removesMemberCard,OrganizerCardandVolunteerCard, which were three near-identical copies.Adds one dependency:
@fontsource-variable/space-grotesk.Why
The site was consistent but had no design system: 41 distinct hardcoded hex values, five different section paddings, four avatar shapes for the same content type, and a
dark:variant declared in CSS but never used. Several defects were user-visible in production — the featured event card showed the wrong category for every event, and tablet users saw a single-column grid.How to test
pnpm install git clone --depth 1 https://github.com/GDGXICA/gdg-ica-data.git /tmp/gdg-data cp -r /tmp/gdg-data/images/* public/ pnpm devCheck
/,/about,/events,/events/devfest-2025,/team,/sponsors,/volunteersin both themes.Worth exercising specifically:
client:visible, so scroll to them before clicking)/aboutVerified:
pnpm test(137 tests),pnpm build(35 pages), eslint and prettier clean. Contrast audited over the rendered DOM — 0 failures across both themes — and the photo hero measured per-pixel, since text over a photograph cannot be checked from the DOM alone.Not included
Content still leans on uniform rounded-rectangle cards; breaking that monotony is deliberately left for a follow-up.