diff --git a/ACCESSIBILITY.md b/ACCESSIBILITY.md index adcda06..42b60fc 100644 --- a/ACCESSIBILITY.md +++ b/ACCESSIBILITY.md @@ -1,6 +1,6 @@ # Accessibility Guidelines -This document outlines the accessibility standards and practices for the Black History Month Innovation Summit website. Our goal is to ensure the website is accessible to all users, including those using assistive technologies. +This document outlines the accessibility standards and practices for the Detroit Pride Innovation Summit website. Our goal is to ensure the website is accessible to all users, including those using assistive technologies. ## Overview diff --git a/CHANGELOG.md b/CHANGELOG.md index 92954ac..320fa3d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- **Rebrand to Detroit Pride Innovation Summit**: repurposed from the Black History Month Innovation Summit to the Detroit Pride Innovation Summit; renamed the project/repository to `pridemi26` and updated README, CONTRIBUTING, ACCESSIBILITY, COLOR, and SECURITY docs accordingly +- **Theme system**: shipped four switchable color themes (Purple default, Blue, Green, Gold) via `iwd` Tailwind tokens and `data-theme`; updated `COLOR.MD` to match - Open Graph and Twitter/X card meta tags in `index.html` — aligned to `pridemi26.vercel.app` (replaced legacy `iwdsummit.com` URLs) - **Navbar**: Removed pathway/route-link logic; Navbar now only shows section (anchor) links; route links like Previous Events remain in Footer only diff --git a/COLOR.MD b/COLOR.MD index 95eabfa..f3357ab 100644 --- a/COLOR.MD +++ b/COLOR.MD @@ -2,24 +2,15 @@ This document defines the color palette for the Detroit Pride Innovation Summit website. -The palette is inspired by the Women Techmakers brand and implemented as semantic Tailwind tokens under the `iwd` namespace. The site ships two switchable themes controlled via CSS custom properties and a `data-theme` attribute on ``. +The palette is inspired by the Women Techmakers brand and implemented as semantic Tailwind tokens under the `iwd` namespace. The site ships four switchable themes controlled via CSS custom properties and a `data-theme` attribute on ``. The themes and their swatches are defined in `src/constants/ui.js`; the default is **Purple** (set in `src/components/ui/ThemeContext.jsx`). + +Each `iwd.gold.*` Tailwind token maps to a `--iwd-accent-*` CSS variable, and each `iwd.black.*` token maps to a `--iwd-dark-*` variable (see `tailwind.config.js`). The tables below show the key accent (`iwd-gold-400`/`700`), darkest surface (`iwd-black-950`), and `focus-ring` values per theme. --- ## Themes -### Blue (Default) - -Ocean-forward palette. Cool, professional, and aligned with Google/Women Techmakers blue. - -| Token | Hex | RGB | -| ------------- | --------- | ---------- | -| iwd-gold-400 | `#60a5fa` | 96 165 250 | -| iwd-gold-700 | `#1d4ed8` | 29 78 216 | -| iwd-black-950 | `#090e18` | 9 14 24 | -| focus-ring | `#1e3a8a` | 30 58 138 | - -### Purple +### Purple (Default) Violet-forward palette. Bold, empowering, and aligned with the purple theme tradition. @@ -30,6 +21,39 @@ Violet-forward palette. Bold, empowering, and aligned with the purple theme trad | iwd-black-950 | `#0d0a16` | 13 10 22 | | focus-ring | `#581c87` | 88 28 135 | +### Blue + +Ocean-forward palette. Cool, professional, and aligned with Google/Women Techmakers blue. + +| Token | Hex | RGB | +| ------------- | --------- | ----------- | +| iwd-gold-400 | `#669df6` | 102 157 246 | +| iwd-gold-700 | `#1967d2` | 25 103 210 | +| iwd-black-950 | `#090e18` | 9 14 24 | +| focus-ring | `#1a73e8` | 26 115 232 | + +### Green + +Emerald palette aligned with Google green. + +| Token | Hex | RGB | +| ------------- | --------- | --------- | +| iwd-gold-400 | `#5cb85c` | 92 184 92 | +| iwd-gold-700 | `#0b5124` | 11 81 36 | +| iwd-black-950 | `#09120e` | 9 18 14 | +| focus-ring | `#0d652d` | 13 101 45 | + +### Gold + +Warm yellow/amber palette aligned with Google yellow. + +| Token | Hex | RGB | +| ------------- | --------- | --------- | +| iwd-gold-400 | `#fabb05` | 250 187 5 | +| iwd-gold-700 | `#b85c00` | 184 92 0 | +| iwd-black-950 | `#120e06` | 18 14 6 | +| focus-ring | `#e27200` | 226 114 0 | + --- ## Symbolism @@ -45,12 +69,12 @@ Violet-forward palette. Bold, empowering, and aligned with the purple theme trad ## How Theming Works -1. CSS variables defined in `src/index.css` under `:root` / `[data-theme='blue']` and `[data-theme='purple']` +1. CSS variables defined in `src/index.css` under `:root` (fallback) and one `[data-theme='...']` block per theme (`blue`, `green`, `purple`, `gold`) 2. Tailwind tokens `iwd.gold.*` and `iwd.black.*` reference these via `rgb(var(--iwd-accent-*) / )` -3. React context (`ThemeContext`) sets `data-theme` on `` and persists to `localStorage` -4. A floating `ThemeSwitcher` button lets visitors toggle +3. React context (`ThemeContext`) sets `data-theme` on `` and persists to `localStorage` (defaults to `purple`) +4. A floating `ThemeSwitcher` button lets visitors pick from the swatches in `src/constants/ui.js` -**Adding a new theme:** duplicate a `[data-theme='...']` block in index.css, add the key to the toggle cycle in ThemeContext, done. +**Adding a new theme:** duplicate a `[data-theme='...']` block in `index.css` and add a matching entry (`id`, `label`, `swatch`, `palette`) to `THEMES` in `src/constants/ui.js`. --- diff --git a/CONTRAST-ANALYSIS.md b/CONTRAST-ANALYSIS.md index 1cf7bf9..0a4b427 100644 --- a/CONTRAST-ANALYSIS.md +++ b/CONTRAST-ANALYSIS.md @@ -1,119 +1,82 @@ -# WCAG 2.2 Contrast Analysis for CTAButton Component +# WCAG 2.2 Contrast Notes for the CTAButton Component ## Overview -This document analyzes the color contrast ratios used in the CTAButton component against WCAG 2.2 standards. +This document describes the color/contrast approach used by the `CTAButton` +component (`src/components/ui/CTAButton.jsx`) and how to verify it against WCAG 2.2. + +> **Important:** `CTAButton` no longer uses fixed `sky-*`/`primary-*` colors. It now +> styles itself with **theme-aware, translucent** tokens (`iwd-gold-*` for the primary +> variant; black/white opacity layers for the secondary variant). Because the +> backgrounds are semi-transparent and change with the active theme (Purple, Blue, +> Green, Gold) and mode (light/dark), there is no single fixed contrast ratio — it +> must be verified against the **rendered** background for each theme/mode. ## WCAG 2.2 Requirements - **Normal Text** (< 18pt or < 14pt bold): Minimum 4.5:1 contrast ratio (Level AA) - **Large Text** (≥ 18pt or ≥ 14pt bold): Minimum 3:1 contrast ratio (Level AA) +- **Non-text / focus indicators** (1.4.11): Minimum 3:1 against adjacent colors - **Enhanced (Level AAA)**: 7:1 for normal text, 4.5:1 for large text -## CTAButton Text Size Analysis - -Based on the component styling: - -- Font size: `font-medium` with padding `px-8 py-5` -- Estimated rendered size: ~16-18px -- Font weight: `font-semibold` for primary variant -- **Classification**: Borderline between normal and large text - -## Color Combinations Used - -### 1. Primary Button - -- **Background**: `sky-900` (#0c4a6e) - Dark blue -- **Text**: `primary-50` (#fefce8) - Light cream/yellow -- **Border**: None -- **Use case**: "GET TICKETS" button - -**Contrast Ratio**: ~12.8:1 - -- ✅ **WCAG AA (Normal Text)**: PASS (requires 4.5:1) -- ✅ **WCAG AA (Large Text)**: PASS (requires 3:1) -- ✅ **WCAG AAA (Normal Text)**: PASS (requires 7:1) -- ✅ **WCAG AAA (Large Text)**: PASS (requires 4.5:1) - -**Status**: ✅ **EXCELLENT** - Exceeds all WCAG requirements - -### 2. Secondary Button - -- **Background**: `primary-100` (#fffac2) - Light yellow -- **Text**: `sky-900` (#0c4a6e) - Dark blue -- **Border**: 4px `sky-900` (#0c4a6e) -- **Use case**: "APPLY TO SPEAK" button - -**Contrast Ratio**: ~12.8:1 (same as primary, colors inverted) - -- ✅ **WCAG AA (Normal Text)**: PASS (requires 4.5:1) -- ✅ **WCAG AA (Large Text)**: PASS (requires 3:1) -- ✅ **WCAG AAA (Normal Text)**: PASS (requires 7:1) -- ✅ **WCAG AAA (Large Text)**: PASS (requires 4.5:1) - -**Status**: ✅ **EXCELLENT** - Exceeds all WCAG requirements - -### 3. Hover States - -#### Primary Button Hover - -- **Background**: `sky-800` (#075985) -- **Text**: `primary-50` (#fefce8) -- **Contrast Ratio**: ~11.5:1 -- **Status**: ✅ **EXCELLENT** - -#### Secondary Button Hover - -- **Background**: `primary-50` (#fefce8) -- **Text**: `sky-900` (#0c4a6e) -- **Border**: `primary-900` (#733e10) -- **Contrast Ratio (Text)**: ~12.8:1 -- **Status**: ✅ **EXCELLENT** - -## Focus States +## Current CTAButton styling -- **Focus Ring**: `primary-300` (#ffe243) with 2px ring -- All focus indicators meet the minimum 3:1 contrast requirement against adjacent colors +From `src/components/ui/CTAButton.jsx`: -## Summary +### Primary variant -✅ **ALL COLOR COMBINATIONS PASS WCAG 2.2 LEVEL AAA** +- **Text**: `text-iwd-gold-300` (theme accent, light tint) +- **Background**: `bg-iwd-gold-400/10` (theme accent at 10% opacity over the section + background) with a `border-iwd-gold-400/30` border +- **Hover**: background goes to `iwd-gold-400/20`; a light-mode hover treatment is + applied via the `GOLD_PRIMARY_LIGHT_HOVER` constant +- Font: `font-semibold`, `text-sm`, `uppercase`, `tracking-widest` -Both button variants exceed the most stringent accessibility requirements: +### Secondary variant -- Primary button: 12.8:1 contrast ratio -- Secondary button: 12.8:1 contrast ratio -- All hover states maintain excellent contrast +- **Text**: `text-gray-600` (light) / `dark:text-gray-200` (dark), darkening to + `text-black` / `dark:text-white` on hover +- **Background**: `bg-black/[0.04]` (light) / `dark:bg-white/[0.04]` (dark) with a + matching translucent border -## Recommendations +### Focus indicator (shared `baseStyles`) -1. ✅ **Current Implementation**: Excellent! No changes needed. +- `focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-black` +- Uses the per-theme `focus-ring` token (see `COLOR.MD`), satisfying WCAG 2.4.7 + (Focus Visible) and 1.4.11 (Non-text Contrast) when the ring contrasts ≥ 3:1 with + adjacent colors. -2. **Future Considerations**: +## How to verify contrast - - If you ever need to add more button variants, aim for at least 4.5:1 contrast - - The current color scheme provides significant headroom above minimum requirements +Because the button text sits on a translucent accent over a section background, check +the **effective** (flattened) colors: -3. **Testing Tools**: - - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ - - Chrome DevTools: Lighthouse accessibility audit - - axe DevTools: Browser extension for live testing +1. Run the site (`npm run dev`) and open the button in the browser. +2. For each theme (Purple/Blue/Green/Gold) and mode (light/dark), use Chrome DevTools + → Elements → inspect the button text. The color picker shows the computed contrast + ratio against the rendered background, including AA/AAA pass indicators. +3. Alternatively, sample the rendered text and background pixels and enter them into + the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/). +4. Confirm normal text ≥ 4.5:1 (or ≥ 3:1 if the rendered size qualifies as large) and + the focus ring ≥ 3:1 against adjacent colors. -## Verification +The `iwd-gold-300` accent tints are intentionally light so the text stays bright +against dark section backgrounds; spot-check the lighter themes (Gold) most carefully, +since light accent text on a light background is the highest-risk combination. -To verify these results yourself: +## Tooling -1. Visit https://webaim.org/resources/contrastchecker/ -2. Enter the color combinations listed above -3. Confirm the contrast ratios +- **Chrome DevTools** color picker (live contrast ratio + AA/AAA badges) +- **axe DevTools** browser extension and the CI axe-core check (`npm run a11y:check`) +- **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/ ## References -- [WCAG 2.2 Contrast Guidelines](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) +- [WCAG 2.2 Contrast (Minimum) 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) +- [WCAG 2.2 Non-text Contrast 1.4.11](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) -- [Tailwind CSS Color Palette](https://tailwindcss.com/docs/customizing-colors) +- Project color system: [`COLOR.MD`](COLOR.MD) --- -**Last Updated**: October 12, 2025 -**Component Version**: CTAButton v1.0 +**Last reviewed**: June 2026 (updated for the theme-aware `iwd` token system) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0f2e2fb..35fa618 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ -# Contributing to Black History Month Innovation Summit Website +# Contributing to the Detroit Pride Innovation Summit Website -Thank you for your interest in contributing to the Black History Month Innovation Summit (BHM-website)! This document provides guidelines and information for contributors. +Thank you for your interest in contributing to the Detroit Pride Innovation Summit (`pridemi26`)! This document provides guidelines and information for contributors. ## Getting Started ### Prerequisites -- Node.js 18 or higher -- npm or yarn package manager +- Node.js 22 or higher +- npm - Git ### Development Setup @@ -16,8 +16,8 @@ Thank you for your interest in contributing to the Black History Month Innovatio 2. **Clone your fork** locally: ```bash - git clone https://github.com/YOUR_USERNAME/BHM-website.git - cd BHM-website + git clone https://github.com/YOUR_USERNAME/pridemi26.git + cd pridemi26 ``` 3. **Install dependencies**: @@ -41,16 +41,16 @@ If **Push** or **Create Pull Request** in GitHub Desktop opens or targets a diff 1. **Re-add the repo** so GitHub Desktop picks up the correct remote: - In GitHub Desktop: **File → Remove repository** (removes it from the list only; files stay on disk). - - **File → Add Local Repository** and choose this project folder (`BHM-website`). - - GitHub Desktop will use the existing Git remotes; pushes and "Create Pull Request" should now target **Compass-Detroit/BHM-website**. + - **File → Add Local Repository** and choose this project folder (`pridemi26`). + - GitHub Desktop will use the existing Git remotes; pushes and "Create Pull Request" should now target **Compass-Detroit/pridemi26**. 2. **Confirm remotes in Terminal** (optional): ```bash git remote -v ``` - You should see `origin` (and optionally `upstream`) pointing to `https://github.com/Compass-Detroit/BHM-website.git`. If not: + You should see `origin` (and optionally `upstream`) pointing to `https://github.com/Compass-Detroit/pridemi26.git`. If not: ```bash - git remote set-url origin https://github.com/Compass-Detroit/BHM-website.git + git remote set-url origin https://github.com/Compass-Detroit/pridemi26.git ``` Then remove and re-add the repo in GitHub Desktop as in step 1. @@ -63,7 +63,7 @@ All pull requests are automatically checked for: - **Code Quality**: ESLint checks for code style and potential errors - **Code Formatting**: Prettier ensures consistent code formatting - **Build Verification**: Ensures the application builds successfully -- **Accessibility**: Automated accessibility testing with axe-core and pa11y +- **Accessibility**: Automated accessibility testing with axe-core against the built site - **Security**: npm audit checks for security vulnerabilities ### Manual Checks @@ -102,8 +102,8 @@ npm run lint # Check formatting npm run format:check -# Run accessibility tests -npm run test:a11y +# Run accessibility linting +npm run lint:a11y # Build the application npm run build @@ -151,7 +151,7 @@ Then create a pull request on GitHub using our PR template. ## Accessibility Guidelines -We are committed to making the Black History Month Innovation Summit website accessible to everyone. Please ensure: +We are committed to making the Detroit Pride Innovation Summit website accessible to everyone. Please ensure: ### Keyboard Navigation @@ -175,11 +175,11 @@ We are committed to making the Black History Month Innovation Summit website acc ### Testing Accessibility ```bash -# Run automated accessibility tests -npm run test:a11y +# Lint JSX for accessibility issues (eslint-plugin-jsx-a11y) +npm run lint:a11y -# Run pa11y tests -npm run test:a11y:pa11y +# Run the full accessibility check (a11y lint + build) +npm run a11y:check ``` ## Code Style Guidelines @@ -244,7 +244,7 @@ Releases are managed by the maintainers. When your PR is merged: ## Thank You -Thank you for contributing to the Black History Month Innovation Summit website! Your contributions help make our event more accessible and engaging for the community. +Thank you for contributing to the Detroit Pride Innovation Summit website! Your contributions help make our event more accessible and engaging for the community. --- diff --git a/README.md b/README.md index 75cb5c2..9875bd1 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ The website for the [Detroit Pride Innovation Summit 2026](https://pridemi26.vercel.app/). Built with Vite, React, and Tailwind CSS. -Organized by **Compass Detroit** in partnership with **GDG Detroit** and **Other Organizations**. +Organized by **Compass Detroit** in partnership with **GDG Detroit** and community partners (see the Partners section on the site for the full list). Hero animation is a custom WebGL animation created with Three.js and lil-gui. It is used to create the pride trail effect on the hero section. Author of initial effect attribution: [Sabo Sugi](https://x.com/sabosugi/). Effect enhanced and customized by **[Greg Miller](https://github.com/shrinkray)** for Compass Detroit. @@ -35,13 +35,15 @@ Navigate to `http://localhost:5173`. Customize the port in `vite.config.js` if n ## Theme Switcher -The site supports two color themes — **Purple** (default) and **Blue**. A floating palette button in the bottom-right lets visitors toggle between them. +The site supports four color themes — **Purple** (default), **Blue**, **Green**, and **Gold**. A floating palette button in the bottom-right lets visitors switch between them. Themes work via CSS custom properties defined in `src/index.css`. The `iwd.gold` and `iwd.black` Tailwind tokens reference these variables, so the entire site re-themes instantly with zero component changes. - Theme preference persists in `localStorage` +- Theme list and swatches: `src/constants/ui.js` - Context: `src/components/ui/ThemeContext.jsx` - Toggle UI: `src/components/ui/ThemeSwitcher.jsx` +- Full palette reference: [`COLOR.MD`](COLOR.MD) ## Docker diff --git a/SECURITY.md b/SECURITY.md index 034e848..867f8fc 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -1,21 +1,58 @@ # Security Policy +The Detroit Pride Innovation Summit website (`pridemi26`) is a static, front-end-only +site deployed on Vercel. It does not collect user accounts or handle payments, so the +attack surface is small — but we still take security seriously. + ## Supported Versions -Use this section to tell people about which versions of your project are -currently being supported with security updates. +Only the latest deployment from the `main` branch is supported. We do not backport +fixes to older tags; security fixes ship by merging to `main`, which redeploys the site. -| Version | Supported | -| ------- | ------------------ | -| 5.1.x | :white_check_mark: | -| 5.0.x | :x: | -| 4.0.x | :white_check_mark: | -| < 4.0 | :x: | +| Version | Supported | +| --------------- | ------------------ | +| `main` (latest) | :white_check_mark: | +| Older tags | :x: | ## Reporting a Vulnerability -Use this section to tell people how to report a vulnerability. +Please **do not** open a public GitHub issue for security vulnerabilities. + +Instead, report privately using GitHub's +[private vulnerability reporting](https://github.com/Compass-Detroit/pridemi26/security/advisories/new) +("Report a vulnerability" under the repository's **Security** tab). If that is +unavailable, contact a Compass Detroit maintainer directly. + +When reporting, please include: + +- A description of the issue and its potential impact +- Steps to reproduce (URL, browser, and actions) +- Any relevant logs, screenshots, or proof-of-concept + +## What to Expect + +- **Acknowledgement** within 5 business days. +- **Status update** within 10 business days, including whether the report is accepted. +- If accepted, we will work on a fix and coordinate disclosure with you. +- If declined, we will explain why (e.g. out of scope, expected behavior). + +## Scope + +In scope: + +- The production site at [pridemi26.vercel.app](https://pridemi26.vercel.app/) +- Source code in this repository (including the speaker import scripts under + `scripts/sanity-import/` and the Sanity Studio in `studio/`) + +Out of scope: + +- Vulnerabilities in third-party platforms we use (Vercel, Sanity, GitHub) — report + those to the respective vendors. +- Findings that require physical access, social engineering, or a compromised + maintainer machine. + +## Dependencies -Tell them where to go, how often they can expect to get an update on a -reported vulnerability, what to expect if the vulnerability is accepted or -declined, etc. +CI runs `npm audit --audit-level moderate` on every push and pull request. High and +critical vulnerabilities should be addressed promptly; moderate issues in dev-only +dependencies are triaged case by case.