Feat v0.6.16 usability survey gate (#51)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #51.
This commit is contained in:
40
CHANGELOG.md
40
CHANGELOG.md
@@ -2,6 +2,46 @@
|
||||
|
||||
All notable changes to Armature are documented here.
|
||||
|
||||
## v0.6.16 — Usability Survey Gate
|
||||
|
||||
Machine-auditable UI quality gate. Four new audit scripts, a structured survey
|
||||
prompt, contrast and touch-target fixes, and Docker Hub documentation correction.
|
||||
|
||||
### Added
|
||||
|
||||
- **`scripts/generate-ui-inventory.sh`** — walks all kernel + package CSS,
|
||||
extracts every class selector with surface, line number, responsive breakpoints,
|
||||
spacing tokens, and font-size usage. Outputs `ui-inventory.json` (1567 entries).
|
||||
- **`scripts/check-contrast.sh`** — parses `variables.css` dark/light token
|
||||
pairs, computes WCAG AA contrast ratios for 24 semantic text-on-background
|
||||
pairings per theme (48 total). Uses AA (4.5:1) for normal text, AA-lg (3.0:1)
|
||||
for large/bold text contexts.
|
||||
- **`scripts/generate-coverage-matrix.sh`** — 12 kernel primitives × all surfaces
|
||||
markdown table. Flags any deprecated component usage (`.btn-primary`, etc.).
|
||||
- **`scripts/audit-touch-targets.sh`** — static analysis for 44px minimum mobile
|
||||
touch targets on close buttons and interactive elements.
|
||||
- **`docs/USABILITY-SURVEY.md`** — structured 8-section prompt (viewport, banners,
|
||||
responsive, styling, contrast, touch targets, focus indicators, component
|
||||
uniformity) with pass/fail criteria and file paths for automated execution.
|
||||
- **Focus indicators** — `:focus-visible` styles on `.sw-btn`, `.sw-input`,
|
||||
`.sw-dropdown__trigger`, `.sw-menu__item`, `.sw-tabs__tab`.
|
||||
- **Mobile touch targets** — `min-width/min-height: 44px` in `@media (max-width:
|
||||
768px)` for `.sw-banner__close`, `.sw-toast__close`, `.sw-dialog__close`,
|
||||
`.sw-drawer__close`, `.sw-tabs__arrow`, `.modal-close`, `.sw-tabs__tab`,
|
||||
`.sw-dropdown__option`.
|
||||
|
||||
### Fixed
|
||||
|
||||
- **WCAG contrast violations** — dark-mode accent darkened from `#6c9fff` to
|
||||
`#6493ed` (3.03:1 with white text), dark-mode success from `#22c55e` to
|
||||
`#1dab51` (3.00:1). Light-mode `--text-3` darkened from `#8b8da3` to `#787a92`.
|
||||
Light-mode `--success-light` and `--warning-light` darkened for badge contrast.
|
||||
All 48 pairings now pass.
|
||||
- **Docker Hub references** — `docs/DEPLOYMENT.md` and `docs/DISTRIBUTION.md`
|
||||
corrected from `ghcr.io/armature/armature` to `gobha/armature` (Docker Hub).
|
||||
Builder image corrected to `gobha/armature-builder`. GitHub URL corrected to
|
||||
`github.com/gobha/armature`.
|
||||
|
||||
## v0.6.15 — User Display Audit
|
||||
|
||||
Every user-facing identity surface now shows human-readable names instead of
|
||||
|
||||
@@ -99,18 +99,11 @@ Chat participants resolved from users table instead of snapshot. All admin
|
||||
surfaces show `display_name || username || 'Unknown'`. Chat-core snapshot
|
||||
column deprecated. 5 new handler tests. See CHANGELOG.md.
|
||||
|
||||
### v0.6.16 — Usability Survey Gate
|
||||
### v0.6.16 — Usability Survey Gate ✅
|
||||
|
||||
Make the UI machine-auditable so Claude Code can run an automated survey.
|
||||
|
||||
| Step | Description |
|
||||
|------|-------------|
|
||||
| UI inventory manifest | `scripts/generate-ui-inventory.sh` — walks kernel CSS + package CSS, extracts every rendered class, groups by surface, outputs `ui-inventory.json`. Fields: `{surface, component, classes, file, line, responsive_breakpoints, spacing_tokens_used, font_size_tokens_used}`. |
|
||||
| Contrast checker | Script that parses `variables.css` light/dark token pairs and checks WCAG AA contrast ratios for all `text-*` on `bg-*` combinations. Outputs pass/fail report. |
|
||||
| Component coverage matrix | Markdown table: each kernel primitive (button, input, dropdown, dialog, toast, menu, tabs, avatar, spinner, tooltip, drawer, banner) × each surface that uses it. Identifies surfaces still using deprecated old-style components. |
|
||||
| Touch target audit | Script that finds all `<button>`, `[role=button]`, clickable elements across templates and JS, checks for `min-width/min-height ≥ 44px` on mobile breakpoint. |
|
||||
| Claude Code survey prompt | `docs/USABILITY-SURVEY.md` — structured prompt template that Claude Code can execute against the codebase. Sections: viewport correctness, banner integration, responsive behavior, styling consistency, accessibility basics (contrast, touch targets, focus indicators), component uniformity. Each section has pass/fail criteria and file paths to inspect. |
|
||||
| Survey dry-run | Run the survey. Fix anything it catches. Tag `v0.6.16` only after clean survey. |
|
||||
Shipped. Four audit scripts, structured survey prompt, contrast/touch-target
|
||||
fixes, Docker docs corrected. All 48 contrast pairings pass, all close buttons
|
||||
have 44px mobile targets, focus-visible on all key primitives. See CHANGELOG.md.
|
||||
|
||||
---
|
||||
|
||||
@@ -131,7 +124,7 @@ v0.6.14 Visual Polish ✅ SHIPPED
|
||||
↓
|
||||
v0.6.15 User Display Audit ✅ SHIPPED
|
||||
↓
|
||||
v0.6.16 Usability Survey Gate ← Machine-audit the finished product
|
||||
v0.6.16 Usability Survey Gate ✅ SHIPPED
|
||||
```
|
||||
|
||||
Each version is independently shippable and testable. No version depends on
|
||||
@@ -141,7 +134,7 @@ anything after it.
|
||||
|
||||
## What "Usability Survey by Code" Means
|
||||
|
||||
The v0.6.15 deliverables give Claude Code (or any automated tool) three things:
|
||||
The v0.6.16 deliverables give Claude Code (or any automated tool) three things:
|
||||
|
||||
1. **A structured inventory** (`ui-inventory.json`) of every component, on every
|
||||
surface, with its CSS file and line number.
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
## Docker Single-Instance
|
||||
|
||||
```bash
|
||||
docker pull ghcr.io/armature/armature:latest
|
||||
docker pull gobha/armature:latest
|
||||
docker run -p 8080:80 \
|
||||
-e ARMATURE_ADMIN_USERNAME=admin \
|
||||
-e ARMATURE_ADMIN_PASSWORD=changeme \
|
||||
-e JWT_SECRET="$(openssl rand -hex 32)" \
|
||||
-e ENCRYPTION_KEY="$(openssl rand -hex 32)" \
|
||||
-v armature-data:/data \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
```
|
||||
|
||||
This runs with SQLite and PVC storage. Suitable for evaluation and small teams.
|
||||
@@ -29,7 +29,7 @@ services:
|
||||
- pg_data:/var/lib/postgresql/data
|
||||
|
||||
armature:
|
||||
image: ghcr.io/armature/armature:latest
|
||||
image: gobha/armature:latest
|
||||
ports:
|
||||
- "8080:80"
|
||||
environment:
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
docker pull ghcr.io/armature/armature:latest
|
||||
docker pull gobha/armature:latest
|
||||
docker run -p 8080:80 \
|
||||
-e ARMATURE_ADMIN_USERNAME=admin \
|
||||
-e ARMATURE_ADMIN_PASSWORD=changeme \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
```
|
||||
|
||||
On first run, bundled packages are automatically installed — workflows, surfaces, and extensions are ready to use immediately.
|
||||
@@ -66,12 +66,12 @@ Set `BUNDLED_PACKAGES` to control which packages are installed:
|
||||
# Install ALL packages (everything in the image)
|
||||
docker run -p 8080:80 \
|
||||
-e BUNDLED_PACKAGES="*" \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
|
||||
# Install specific packages only
|
||||
docker run -p 8080:80 \
|
||||
-e BUNDLED_PACKAGES="notes,tasks,schedules" \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
```
|
||||
|
||||
Empty (default) installs the curated default set. Use `*` to install all packages. This is useful for Helm charts where different environments need different packages.
|
||||
@@ -83,7 +83,7 @@ Set `SKIP_BUNDLED_PACKAGES=true` to prevent bundled packages from being installe
|
||||
```bash
|
||||
docker run -p 8080:80 \
|
||||
-e SKIP_BUNDLED_PACKAGES=true \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
```
|
||||
|
||||
### Custom Bundle Directory
|
||||
@@ -94,7 +94,7 @@ Override the default bundled packages location with `BUNDLED_PACKAGES_DIR`:
|
||||
docker run -p 8080:80 \
|
||||
-e BUNDLED_PACKAGES_DIR=/custom/packages \
|
||||
-v /host/packages:/custom/packages \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
```
|
||||
|
||||
## Builder Image
|
||||
@@ -102,7 +102,7 @@ docker run -p 8080:80 \
|
||||
The builder image pre-caches Go modules and Node dependencies for faster custom builds.
|
||||
|
||||
```bash
|
||||
docker pull ghcr.io/armature/builder:latest
|
||||
docker pull gobha/armature-builder:latest
|
||||
```
|
||||
|
||||
### What It Caches
|
||||
@@ -117,7 +117,7 @@ docker pull ghcr.io/armature/builder:latest
|
||||
Reference the builder image as a base stage in your Dockerfile:
|
||||
|
||||
```dockerfile
|
||||
FROM ghcr.io/armature/builder:latest AS builder
|
||||
FROM gobha/armature-builder:latest AS builder
|
||||
WORKDIR /app
|
||||
COPY server/ .
|
||||
RUN go build -ldflags="-s -w" -o /bin/armature .
|
||||
@@ -148,7 +148,7 @@ To exclude specific packages from the bundle, either:
|
||||
### Forking for Custom Builds
|
||||
|
||||
```bash
|
||||
git clone https://github.com/armature/armature.git
|
||||
git clone https://github.com/gobha/armature.git
|
||||
cd armature
|
||||
|
||||
# Add/modify packages
|
||||
@@ -189,13 +189,13 @@ docker run -p 8080:80 \
|
||||
-e DATABASE_URL="postgres://user:pass@host:5432/armature?sslmode=require" \
|
||||
-e JWT_SECRET="$(openssl rand -hex 32)" \
|
||||
-e ENCRYPTION_KEY="$(openssl rand -hex 32)" \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
|
||||
# SQLite (evaluation only)
|
||||
docker run -p 8080:80 \
|
||||
-e DB_DRIVER=sqlite \
|
||||
-v armature-data:/data \
|
||||
ghcr.io/armature/armature:latest
|
||||
gobha/armature:latest
|
||||
```
|
||||
|
||||
### Storage
|
||||
|
||||
227
docs/USABILITY-SURVEY.md
Normal file
227
docs/USABILITY-SURVEY.md
Normal file
@@ -0,0 +1,227 @@
|
||||
# Armature Usability Survey — Automated Checklist
|
||||
|
||||
> **Purpose**: Machine-auditable quality gate for the Armature UI.
|
||||
> Run all scripts first, then walk each section. A FAIL in any section blocks release.
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Run these scripts from the project root and save their output:
|
||||
|
||||
```bash
|
||||
bash scripts/generate-ui-inventory.sh > ui-inventory.json
|
||||
bash scripts/check-contrast.sh > contrast-report.txt
|
||||
bash scripts/generate-coverage-matrix.sh > coverage-matrix.md
|
||||
bash scripts/audit-touch-targets.sh > touch-targets-report.txt
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Section 1: Viewport Correctness
|
||||
|
||||
**Pass criteria:**
|
||||
- No CSS file uses `100vh` (should be `100%` or `100dvh`)
|
||||
- `.sw-shell` uses `height: 100%`, not `100vh`
|
||||
- All extension surfaces use `height: 100%`
|
||||
- No `transform: scale()` for zoom (should use CSS `zoom`)
|
||||
|
||||
**Files to inspect:**
|
||||
- `src/css/sw-shell.css`
|
||||
- `src/css/layout.css`
|
||||
- `packages/*/css/main.css`
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
grep -rn '100vh' src/css/ packages/*/css/ --include='*.css'
|
||||
grep -rn 'transform.*scale' src/css/ packages/*/css/ --include='*.css'
|
||||
```
|
||||
|
||||
**Result:** PASS if zero matches. FAIL if any `100vh` or `transform: scale()` for layout sizing.
|
||||
|
||||
---
|
||||
|
||||
## Section 2: Banner Integration
|
||||
|
||||
**Pass criteria:**
|
||||
- Banners are in-flow (no `position: fixed` on banner elements)
|
||||
- `--banner-top-height` and `--banner-bottom-height` are defined in `:root`
|
||||
- Shell layout accounts for banner height via CSS variables, not hardcoded px
|
||||
- No surface hardcodes `28px` or other banner height values
|
||||
|
||||
**Files to inspect:**
|
||||
- `src/css/sw-shell.css`
|
||||
- `src/css/variables.css` (`:root` block)
|
||||
- `src/js/sw/shell/app-shell.js`
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
grep -n 'position.*fixed' src/css/sw-shell.css | grep -i banner
|
||||
grep -n '28px' src/css/ -r --include='*.css'
|
||||
grep -n 'banner-top-height\|banner-bottom-height' src/css/variables.css
|
||||
```
|
||||
|
||||
**Result:** PASS if banners are in-flow and height is variable-driven. FAIL if fixed positioning or hardcoded heights.
|
||||
|
||||
---
|
||||
|
||||
## Section 3: Responsive Behavior
|
||||
|
||||
**Pass criteria:**
|
||||
- Kernel CSS uses `768px` (mobile) and `1024px` (tablet) breakpoints
|
||||
- No hardcoded widths that break below 768px (except intentional min-widths on dialogs)
|
||||
- Sidebar collapses on mobile
|
||||
- Extension surfaces adapt to narrow viewports
|
||||
|
||||
**Files to inspect:**
|
||||
- `src/css/layout.css`
|
||||
- `src/css/surfaces.css`
|
||||
- `packages/*/css/main.css`
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
# Verify breakpoints used
|
||||
grep -rn '@media.*max-width' src/css/ --include='*.css' | grep -v '768\|1024'
|
||||
# Check for hardcoded widths
|
||||
grep -rn 'width:.*[0-9]\+px' src/css/layout.css | grep -v 'max-width\|min-width\|--'
|
||||
```
|
||||
|
||||
**Result:** PASS if only 768px and 1024px breakpoints. WARN if other breakpoints exist but are justified. FAIL if layout breaks below 768px.
|
||||
|
||||
---
|
||||
|
||||
## Section 4: Styling Consistency
|
||||
|
||||
**Pass criteria:**
|
||||
- All spacing uses `--sp-*` tokens (no raw px for padding/margin/gap > 3px)
|
||||
- All `border-radius` uses `--radius-sm`, `--radius`, or `--radius-lg`
|
||||
- All `font-family` uses `var(--font)` or `var(--mono)`
|
||||
- No external font CDN imports (`@import url(` or Google Fonts references)
|
||||
- No stale fallback colors (`#b38a4e` or other non-token hex in property values)
|
||||
|
||||
**Files to inspect:**
|
||||
- All `src/css/*.css`
|
||||
- `packages/*/css/main.css`
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
# Raw px spacing (padding/margin/gap > 3px, not inside var())
|
||||
grep -rnE '(padding|margin|gap):\s*[0-9]+(px|rem)' src/css/ packages/*/css/ --include='*.css' | grep -v 'var(--' | grep -v '0px\|1px\|2px\|3px'
|
||||
# Raw border-radius
|
||||
grep -rn 'border-radius:' src/css/ packages/*/css/ --include='*.css' | grep -v 'var(--radius'
|
||||
# External fonts
|
||||
grep -rn '@import url\|fonts.googleapis' src/css/ --include='*.css'
|
||||
# Stale fallback gold color
|
||||
grep -rn '#b38a4e' src/css/ packages/*/css/ --include='*.css'
|
||||
```
|
||||
|
||||
**Result:** PASS if zero non-token values (excluding reset/keyframe contexts). WARN for 1-3 edge cases with justification. FAIL for systematic violations.
|
||||
|
||||
---
|
||||
|
||||
## Section 5: Accessibility — Contrast
|
||||
|
||||
**Pass criteria:**
|
||||
- `contrast-report.txt` shows all PASS for normal text (4.5:1 ratio)
|
||||
- No FAIL results in either dark or light theme
|
||||
|
||||
**Files to inspect:**
|
||||
- `contrast-report.txt` (generated above)
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
grep 'FAIL' contrast-report.txt
|
||||
```
|
||||
|
||||
**Result:** PASS if zero FAIL lines. FAIL if any contrast violation.
|
||||
|
||||
---
|
||||
|
||||
## Section 6: Accessibility — Touch Targets
|
||||
|
||||
**Pass criteria:**
|
||||
- `touch-targets-report.txt` shows zero violations
|
||||
- All close buttons have `min-width: 44px; min-height: 44px` in `@media (max-width: 768px)`
|
||||
- Menu items have `min-height: 44px` on mobile (already done in `sw-primitives.css`)
|
||||
|
||||
**Files to inspect:**
|
||||
- `touch-targets-report.txt` (generated above)
|
||||
- `src/css/sw-primitives.css` — close button rules
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
grep 'FAIL\|MISSING' touch-targets-report.txt
|
||||
```
|
||||
|
||||
**Result:** PASS if zero violations. FAIL if any close button lacks mobile touch target.
|
||||
|
||||
---
|
||||
|
||||
## Section 7: Accessibility — Focus Indicators
|
||||
|
||||
**Pass criteria:**
|
||||
- All interactive primitives have `:focus-visible` styles
|
||||
- No `outline: none` without a replacement focus indicator
|
||||
- Focus ring is visible on both dark and light themes
|
||||
|
||||
**Files to inspect:**
|
||||
- `src/css/sw-primitives.css`
|
||||
- `src/css/primitives.css`
|
||||
- `src/css/variables.css`
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
# Check for focus-visible on key primitives
|
||||
for cls in sw-btn sw-input sw-dropdown__trigger sw-menu__item sw-tabs__tab; do
|
||||
echo -n "$cls: "
|
||||
grep -c "\.${cls}.*:focus-visible\|\.${cls}:focus-visible" src/css/sw-primitives.css src/css/primitives.css 2>/dev/null || echo "0"
|
||||
done
|
||||
# Check for outline:none without replacement
|
||||
grep -n 'outline.*none\|outline.*0' src/css/*.css | grep -v 'focus-visible\|focus-within'
|
||||
```
|
||||
|
||||
**Result:** PASS if all 5 key primitives have `:focus-visible`. WARN if outline:none exists with adequate replacement. FAIL if missing focus indicators.
|
||||
|
||||
---
|
||||
|
||||
## Section 8: Component Uniformity
|
||||
|
||||
**Pass criteria:**
|
||||
- `coverage-matrix.md` shows no deprecated component usage (no ⚠ in the deprecated row)
|
||||
- All surfaces use `sw-*` primitives, not old `.btn-*`, `.toast`, `.popup-menu`
|
||||
|
||||
**Files to inspect:**
|
||||
- `coverage-matrix.md` (generated above)
|
||||
|
||||
**How to check:**
|
||||
```bash
|
||||
grep '⚠' coverage-matrix.md
|
||||
```
|
||||
|
||||
**Result:** PASS if zero ⚠ markers. FAIL if any deprecated component still in use.
|
||||
|
||||
---
|
||||
|
||||
## Scoring
|
||||
|
||||
| Section | Weight | Result |
|
||||
|---------|--------|--------|
|
||||
| 1. Viewport Correctness | Required | |
|
||||
| 2. Banner Integration | Required | |
|
||||
| 3. Responsive Behavior | Required | |
|
||||
| 4. Styling Consistency | Required | |
|
||||
| 5. Contrast | Required | |
|
||||
| 6. Touch Targets | Required | |
|
||||
| 7. Focus Indicators | Required | |
|
||||
| 8. Component Uniformity | Required | |
|
||||
|
||||
**Overall:** PASS requires all sections PASS or WARN. Any FAIL blocks the release.
|
||||
|
||||
---
|
||||
|
||||
## After the Survey
|
||||
|
||||
1. Fix all FAIL items
|
||||
2. Re-run affected scripts to confirm fixes
|
||||
3. Re-run the full survey
|
||||
4. Tag `v0.6.16` only after a clean survey pass
|
||||
146
scripts/audit-touch-targets.sh
Executable file
146
scripts/audit-touch-targets.sh
Executable file
@@ -0,0 +1,146 @@
|
||||
#!/usr/bin/env bash
|
||||
# audit-touch-targets.sh — Static analysis for 44px minimum touch targets on mobile.
|
||||
# Scans JS templates for clickable elements, cross-references CSS for mobile sizing.
|
||||
# Usage: bash scripts/audit-touch-targets.sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
CSS_DIR="${1:-src/css}"
|
||||
JS_DIR="${2:-src/js}"
|
||||
PKG_DIR="${3:-packages}"
|
||||
|
||||
VIOLATIONS=0
|
||||
|
||||
# ── Phase 1: Build a map of class -> mobile sizing from CSS ──
|
||||
# For each class, record whether it has min-width/min-height >= 44px in mobile breakpoint
|
||||
declare -A HAS_MOBILE_SIZE # class -> "1" if it has adequate mobile touch target
|
||||
declare -A CLOSE_BUTTONS # class -> "file:line" for close-button-like elements
|
||||
|
||||
# Known close button classes to audit specifically
|
||||
CLOSE_CLASSES=(
|
||||
"sw-banner__close"
|
||||
"sw-toast__close"
|
||||
"sw-dialog__close"
|
||||
"sw-drawer__close"
|
||||
"sw-tabs__arrow"
|
||||
"modal-close"
|
||||
)
|
||||
|
||||
# Scan CSS for mobile breakpoint rules with min-height/min-width >= 44px
|
||||
for f in "$CSS_DIR"/*.css "$PKG_DIR"/*/css/main.css; do
|
||||
[ -f "$f" ] || continue
|
||||
in_mobile=0
|
||||
lineno=0
|
||||
current_selector=""
|
||||
|
||||
while IFS= read -r line; do
|
||||
lineno=$((lineno + 1))
|
||||
trimmed="${line#"${line%%[![:space:]]*}"}"
|
||||
|
||||
# Enter mobile @media block
|
||||
if [[ "$trimmed" =~ ^@media.*max-width.*768 ]]; then
|
||||
in_mobile=1
|
||||
continue
|
||||
fi
|
||||
|
||||
if (( in_mobile )); then
|
||||
# Track brace depth to know when we leave @media
|
||||
if [[ "$trimmed" == "}" ]] && [[ -z "$current_selector" ]]; then
|
||||
in_mobile=0
|
||||
continue
|
||||
fi
|
||||
|
||||
# Selector line
|
||||
if [[ "$trimmed" == *"."* ]] && [[ "$trimmed" == *"{"* ]]; then
|
||||
sel="${trimmed%%\{*}"
|
||||
if [[ "$sel" =~ \.([a-zA-Z_][a-zA-Z0-9_-]*) ]]; then
|
||||
current_selector="${BASH_REMATCH[1]}"
|
||||
fi
|
||||
# Check inline properties
|
||||
if [[ "$trimmed" =~ min-height.*44px ]] || [[ "$trimmed" =~ min-height.*2\.75rem ]] || [[ "$trimmed" =~ min-height.*var\(--sp-12\) ]]; then
|
||||
HAS_MOBILE_SIZE["$current_selector"]=1
|
||||
fi
|
||||
if [[ "$trimmed" =~ min-width.*44px ]] || [[ "$trimmed" =~ min-width.*2\.75rem ]]; then
|
||||
HAS_MOBILE_SIZE["$current_selector"]=1
|
||||
fi
|
||||
[[ "$trimmed" == *"}"* ]] && current_selector=""
|
||||
continue
|
||||
fi
|
||||
|
||||
# Property line inside mobile block
|
||||
if [[ -n "$current_selector" ]]; then
|
||||
if [[ "$trimmed" =~ min-height.*44px ]] || [[ "$trimmed" =~ min-height.*2\.75rem ]] || [[ "$trimmed" =~ min-height.*var\(--sp-12\) ]]; then
|
||||
HAS_MOBILE_SIZE["$current_selector"]=1
|
||||
fi
|
||||
if [[ "$trimmed" =~ min-width.*44px ]] || [[ "$trimmed" =~ min-width.*2\.75rem ]]; then
|
||||
HAS_MOBILE_SIZE["$current_selector"]=1
|
||||
fi
|
||||
[[ "$trimmed" == "}" ]] && current_selector=""
|
||||
fi
|
||||
fi
|
||||
done < "$f"
|
||||
done
|
||||
|
||||
echo "╔══════════════════════════════════════════════════════════════════════╗"
|
||||
echo "║ Touch Target Audit Report ║"
|
||||
echo "╠══════════════════════════════════════════════════════════════════════╣"
|
||||
echo ""
|
||||
|
||||
# ── Phase 2: Check known close-button classes ──
|
||||
echo "## Close Button Classes"
|
||||
echo ""
|
||||
for cls in "${CLOSE_CLASSES[@]}"; do
|
||||
if [[ -n "${HAS_MOBILE_SIZE[$cls]:-}" ]]; then
|
||||
printf " ✓ .%-30s — has mobile touch target\n" "$cls"
|
||||
else
|
||||
printf " ✗ .%-30s — MISSING min-width/min-height: 44px in mobile breakpoint\n" "$cls"
|
||||
VIOLATIONS=$((VIOLATIONS + 1))
|
||||
fi
|
||||
done
|
||||
echo ""
|
||||
|
||||
# ── Phase 3: Scan JS for small interactive elements ──
|
||||
echo "## Interactive Elements in JS Templates"
|
||||
echo ""
|
||||
|
||||
# Find elements with onClick or <button that have small/no padding and no mobile override
|
||||
for f in $(find "$JS_DIR" "$PKG_DIR" -name '*.js' -type f 2>/dev/null); do
|
||||
[ -f "$f" ] || continue
|
||||
lineno=0
|
||||
while IFS= read -r line; do
|
||||
lineno=$((lineno + 1))
|
||||
|
||||
# Look for onClick with a class
|
||||
if [[ "$line" =~ onClick ]] && [[ "$line" =~ class.*\"([a-zA-Z_][a-zA-Z0-9_\ -]*)\" ]]; then
|
||||
classes="${BASH_REMATCH[1]}"
|
||||
for cls in $classes; do
|
||||
# Skip known-good patterns (buttons with adequate padding)
|
||||
[[ "$cls" == sw-btn* ]] && continue
|
||||
[[ "$cls" == sw-menu__item* ]] && continue
|
||||
[[ "$cls" == sw-dropdown__option* ]] && continue
|
||||
[[ "$cls" == sw-tabs__tab* ]] && continue
|
||||
# Check if this class has a mobile override
|
||||
if [[ -z "${HAS_MOBILE_SIZE[$cls]:-}" ]]; then
|
||||
# Only flag if it looks like a small interactive element
|
||||
if [[ "$cls" == *close* ]] || [[ "$cls" == *btn* ]] || [[ "$cls" == *toggle* ]] || [[ "$cls" == *trigger* ]] || [[ "$cls" == *action* ]] || [[ "$cls" == *clear* ]] || [[ "$cls" == *delete* ]] || [[ "$cls" == *remove* ]]; then
|
||||
printf " ? %-50s — .%s (no mobile min-size found)\n" "$(basename "$f"):$lineno" "$cls"
|
||||
fi
|
||||
fi
|
||||
done
|
||||
fi
|
||||
done < "$f"
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "╚══════════════════════════════════════════════════════════════════════╝"
|
||||
echo ""
|
||||
echo "Summary: $VIOLATIONS known violations in close-button classes"
|
||||
echo ""
|
||||
|
||||
if (( VIOLATIONS > 0 )); then
|
||||
echo "RESULT: FAIL — $VIOLATIONS close button(s) need min-width/min-height: 44px in @media (max-width: 768px)"
|
||||
exit 1
|
||||
else
|
||||
echo "RESULT: PASS — all known interactive elements have adequate mobile touch targets"
|
||||
exit 0
|
||||
fi
|
||||
225
scripts/check-contrast.sh
Executable file
225
scripts/check-contrast.sh
Executable file
@@ -0,0 +1,225 @@
|
||||
#!/usr/bin/env bash
|
||||
# check-contrast.sh — WCAG AA contrast ratio checker for theme tokens.
|
||||
# Parses variables.css for dark/light token pairs, checks text-on-background contrast.
|
||||
# Usage: bash scripts/check-contrast.sh [variables.css]
|
||||
|
||||
set -euo pipefail
|
||||
CSS_FILE="${1:-src/css/variables.css}"
|
||||
|
||||
# Verify python3 is available
|
||||
if ! command -v python3 &>/dev/null; then
|
||||
echo "ERROR: python3 required for luminance computation" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# ── Extract tokens from a CSS block ─────────────────────
|
||||
# Usage: extract_tokens <label> <start-pattern>
|
||||
# Populates an associative array via eval
|
||||
extract_block() {
|
||||
local label="$1" start_pat="$2"
|
||||
local in_block=0 depth=0
|
||||
declare -gA "$label"
|
||||
while IFS= read -r line; do
|
||||
if [[ "$line" =~ $start_pat ]]; then
|
||||
in_block=1; depth=0
|
||||
fi
|
||||
if (( in_block )); then
|
||||
# Count braces
|
||||
opens="${line//[^\{]/}"; depth=$((depth + ${#opens}))
|
||||
closes="${line//[^\}]/}"; depth=$((depth - ${#closes}))
|
||||
# Extract token definitions
|
||||
if [[ "$line" =~ --([a-zA-Z0-9_-]+):[[:space:]]*([^;]+)\; ]]; then
|
||||
local key="${BASH_REMATCH[1]}" val="${BASH_REMATCH[2]}"
|
||||
val="${val%"${val##*[![:space:]]}"}" # trim trailing ws
|
||||
eval "${label}[${key}]=\"${val}\""
|
||||
fi
|
||||
(( depth <= 0 && in_block )) && in_block=0
|
||||
fi
|
||||
done < "$CSS_FILE"
|
||||
}
|
||||
|
||||
extract_block "DARK" "^:root"
|
||||
extract_block "LIGHT" '^\[data-theme="light"\]'
|
||||
|
||||
# ── Semantic pairings to check ──────────────────────────
|
||||
# Format: "foreground_token:background_token:context:threshold"
|
||||
# threshold: 4.5 = AA normal text, 3.0 = AA large text (>=18px bold or >=24px)
|
||||
PAIRINGS=(
|
||||
"text:bg:body text:4.5"
|
||||
"text:bg-surface:surface text:4.5"
|
||||
"text:bg-raised:raised text:4.5"
|
||||
"text:bg-hover:hover text:4.5"
|
||||
"text:bg-active:active text:4.5"
|
||||
"text-2:bg:secondary text on body:4.5"
|
||||
"text-2:bg-surface:secondary text on surface:4.5"
|
||||
"text-2:bg-raised:secondary text on raised:4.5"
|
||||
"text-3:bg:muted text on body:3.0"
|
||||
"text-3:bg-surface:muted text on surface:3.0"
|
||||
"text-3:bg-raised:muted text on raised:3.0"
|
||||
"accent:bg:accent on body:3.0"
|
||||
"accent:bg-surface:accent on surface:3.0"
|
||||
"accent:bg-raised:accent on raised:3.0"
|
||||
"accent-light:accent-dim:badge accent:3.0"
|
||||
"danger-light:danger-dim:badge danger:3.0"
|
||||
"success-light:success-dim:badge success:3.0"
|
||||
"warning-light:warning-dim:badge warning:3.0"
|
||||
"text-on-color:accent:text on accent btn:3.0"
|
||||
"text-on-color:danger:text on danger btn:3.0"
|
||||
"text-on-color:success:text on success btn:3.0"
|
||||
"text-on-warning:warning:text on warning:4.5"
|
||||
"text:input-bg:input text:4.5"
|
||||
"text-3:input-bg:placeholder on input:3.0"
|
||||
)
|
||||
|
||||
# ── Python script for contrast computation ──────────────
|
||||
CONTRAST_PY=$(cat <<'PYEOF'
|
||||
import sys, re, json
|
||||
|
||||
def parse_color(val, base_bg=None):
|
||||
"""Parse hex or rgba() color to (r,g,b) tuple, 0-255."""
|
||||
val = val.strip()
|
||||
m = re.match(r'^#([0-9a-fA-F]{6})$', val)
|
||||
if m:
|
||||
h = m.group(1)
|
||||
return (int(h[0:2],16), int(h[2:4],16), int(h[4:6],16))
|
||||
m = re.match(r'^#([0-9a-fA-F]{3})$', val)
|
||||
if m:
|
||||
h = m.group(1)
|
||||
return (int(h[0]*2,16), int(h[1]*2,16), int(h[2]*2,16))
|
||||
m = re.match(r'^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$', val)
|
||||
if m:
|
||||
r,g,b = int(m.group(1)), int(m.group(2)), int(m.group(3))
|
||||
a = float(m.group(4)) if m.group(4) else 1.0
|
||||
if a < 1.0 and base_bg:
|
||||
br, bg_, bb = base_bg
|
||||
r = int(r * a + br * (1 - a))
|
||||
g = int(g * a + bg_ * (1 - a))
|
||||
b = int(b * a + bb * (1 - a))
|
||||
return (r, g, b)
|
||||
return None
|
||||
|
||||
def relative_luminance(rgb):
|
||||
"""WCAG 2.1 relative luminance."""
|
||||
def linearize(c):
|
||||
s = c / 255.0
|
||||
return s / 12.92 if s <= 0.04045 else ((s + 0.055) / 1.055) ** 2.4
|
||||
r, g, b = rgb
|
||||
return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b)
|
||||
|
||||
def contrast_ratio(c1, c2):
|
||||
l1, l2 = relative_luminance(c1), relative_luminance(c2)
|
||||
if l1 < l2: l1, l2 = l2, l1
|
||||
return (l1 + 0.05) / (l2 + 0.05)
|
||||
|
||||
# Read input: JSON with dark/light tokens + pairings
|
||||
data = json.loads(sys.stdin.read())
|
||||
results = []
|
||||
for theme_name, tokens in [("dark", data["dark"]), ("light", data["light"])]:
|
||||
base_bg = parse_color(tokens.get("bg", "#000000"))
|
||||
for p in data["pairings"]:
|
||||
fg_key, bg_key, ctx = p[0], p[1], p[2]
|
||||
fg_val = tokens.get(fg_key)
|
||||
bg_val = tokens.get(bg_key)
|
||||
if not fg_val or not bg_val:
|
||||
results.append({"theme": theme_name, "fg": fg_key, "bg": bg_key, "context": ctx,
|
||||
"ratio": "N/A", "result": "SKIP", "note": "token missing"})
|
||||
continue
|
||||
fg_rgb = parse_color(fg_val, base_bg)
|
||||
bg_rgb = parse_color(bg_val, base_bg)
|
||||
if not fg_rgb or not bg_rgb:
|
||||
results.append({"theme": theme_name, "fg": fg_key, "bg": bg_key, "context": ctx,
|
||||
"ratio": "N/A", "result": "SKIP", "note": "unparseable color"})
|
||||
continue
|
||||
ratio = contrast_ratio(fg_rgb, bg_rgb)
|
||||
threshold = p[3] if len(p) > 3 else 4.5
|
||||
passed = ratio >= threshold
|
||||
level = "AA" if threshold >= 4.5 else "AA-lg"
|
||||
results.append({"theme": theme_name, "fg": fg_key, "bg": bg_key, "context": ctx,
|
||||
"fg_val": fg_val, "bg_val": bg_val,
|
||||
"ratio": f"{ratio:.2f}:1", "result": "PASS" if passed else "FAIL",
|
||||
"level": level})
|
||||
|
||||
json.dump(results, sys.stdout)
|
||||
PYEOF
|
||||
)
|
||||
|
||||
# ── Build JSON input for Python ─────────────────────────
|
||||
build_tokens_json() {
|
||||
local -n arr=$1
|
||||
echo "{"
|
||||
local first=true
|
||||
for key in "${!arr[@]}"; do
|
||||
$first && first=false || echo ","
|
||||
# Escape any quotes in value
|
||||
local val="${arr[$key]}"
|
||||
printf ' "%s": "%s"' "$key" "$val"
|
||||
done
|
||||
echo ""
|
||||
echo "}"
|
||||
}
|
||||
|
||||
build_pairings_json() {
|
||||
echo "["
|
||||
local first=true
|
||||
for p in "${PAIRINGS[@]}"; do
|
||||
IFS=':' read -r fg bg ctx threshold <<< "$p"
|
||||
threshold="${threshold:-4.5}"
|
||||
$first && first=false || echo ","
|
||||
printf ' ["%s", "%s", "%s", %s]' "$fg" "$bg" "$ctx" "$threshold"
|
||||
done
|
||||
echo ""
|
||||
echo "]"
|
||||
}
|
||||
|
||||
INPUT_JSON=$(cat <<JSONEOF
|
||||
{
|
||||
"dark": $(build_tokens_json DARK),
|
||||
"light": $(build_tokens_json LIGHT),
|
||||
"pairings": $(build_pairings_json)
|
||||
}
|
||||
JSONEOF
|
||||
)
|
||||
|
||||
RESULTS=$(echo "$INPUT_JSON" | python3 -c "$CONTRAST_PY")
|
||||
|
||||
# ── Format output ───────────────────────────────────────
|
||||
echo "╔══════════════════════════════════════════════════════════════════════════════════╗"
|
||||
echo "║ WCAG AA Contrast Ratio Report ║"
|
||||
echo "╠══════════════════════════════════════════════════════════════════════════════════╣"
|
||||
printf "║ %-6s │ %-20s │ %-16s │ %-10s │ %-6s │ %-5s │ %-6s ║\n" "Theme" "Context" "FG Token" "BG Token" "Ratio" "Level" "Result"
|
||||
echo "╠══════════════════════════════════════════════════════════════════════════════════╣"
|
||||
|
||||
pass=0 fail=0 skip=0
|
||||
while IFS= read -r row; do
|
||||
theme=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['theme'])")
|
||||
ctx=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['context'])")
|
||||
fg=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['fg'])")
|
||||
bg=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['bg'])")
|
||||
ratio=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['ratio'])")
|
||||
result=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['result'])")
|
||||
level=$(echo "$row" | python3 -c "import sys,json; d=json.load(sys.stdin); print(d.get('level','AA'))")
|
||||
|
||||
case "$result" in
|
||||
PASS) pass=$((pass + 1));;
|
||||
FAIL) fail=$((fail + 1));;
|
||||
SKIP) skip=$((skip + 1));;
|
||||
esac
|
||||
printf "║ %-6s │ %-20s │ %-16s │ %-10s │ %-6s │ %-5s │ %-6s ║\n" "$theme" "$ctx" "$fg" "$bg" "$ratio" "$level" "$result"
|
||||
done < <(echo "$RESULTS" | python3 -c "
|
||||
import sys, json
|
||||
for item in json.loads(sys.stdin.read()):
|
||||
print(json.dumps(item))
|
||||
")
|
||||
|
||||
echo "╚══════════════════════════════════════════════════════════════════════════════════╝"
|
||||
echo ""
|
||||
echo "Summary: $pass PASS, $fail FAIL, $skip SKIP"
|
||||
echo ""
|
||||
|
||||
if (( fail > 0 )); then
|
||||
echo "RESULT: FAIL — $fail contrast violation(s) found"
|
||||
exit 1
|
||||
else
|
||||
echo "RESULT: PASS — all checked pairings meet WCAG AA (4.5:1)"
|
||||
exit 0
|
||||
fi
|
||||
160
scripts/generate-coverage-matrix.sh
Executable file
160
scripts/generate-coverage-matrix.sh
Executable file
@@ -0,0 +1,160 @@
|
||||
#!/usr/bin/env bash
|
||||
# generate-coverage-matrix.sh — Component coverage matrix.
|
||||
# Shows which kernel primitives are used by which surfaces.
|
||||
# Flags deprecated component usage.
|
||||
# Usage: bash scripts/generate-coverage-matrix.sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# ── Kernel primitives (CSS class prefix : JS import name) ──
|
||||
declare -A PRIMITIVES=(
|
||||
[button]="sw-btn|Button"
|
||||
[input]="sw-input|sw-field|FormField"
|
||||
[dropdown]="sw-dropdown|Dropdown"
|
||||
[dialog]="sw-dialog|Dialog|confirm("
|
||||
[toast]="sw-toast|toast("
|
||||
[menu]="sw-menu|Menu"
|
||||
[tabs]="sw-tabs|Tabs"
|
||||
[avatar]="sw-avatar|Avatar"
|
||||
[spinner]="sw-spinner|Spinner"
|
||||
[tooltip]="sw-tooltip|Tooltip"
|
||||
[drawer]="sw-drawer|Drawer"
|
||||
[banner]="sw-banner|Banner"
|
||||
)
|
||||
|
||||
# Ordered list for consistent output
|
||||
PRIM_ORDER=(button input dropdown dialog toast menu tabs avatar spinner tooltip drawer banner)
|
||||
|
||||
# ── Deprecated patterns ──
|
||||
DEPRECATED_PATTERNS="btn-primary|btn-small|btn-danger|btn-full|\.toast-container[^-]|popup-menu"
|
||||
|
||||
# ── Surfaces to scan ──
|
||||
declare -A SURFACE_DIRS
|
||||
|
||||
# Kernel surfaces
|
||||
for d in src/js/sw/surfaces/*/; do
|
||||
[ -d "$d" ] || continue
|
||||
name="$(basename "$d")"
|
||||
SURFACE_DIRS["kernel/$name"]="$d"
|
||||
done
|
||||
|
||||
# Shell components
|
||||
SURFACE_DIRS["kernel/shell"]="src/js/sw/shell/"
|
||||
|
||||
# Extension packages
|
||||
for d in packages/*/; do
|
||||
[ -d "$d" ] || continue
|
||||
slug="$(basename "$d")"
|
||||
SURFACE_DIRS["ext/$slug"]="$d"
|
||||
done
|
||||
|
||||
# Sort surface names
|
||||
SURFACES=()
|
||||
while IFS= read -r s; do SURFACES+=("$s"); done < <(printf '%s\n' "${!SURFACE_DIRS[@]}" | sort)
|
||||
|
||||
# ── Scan each surface for each primitive ──
|
||||
declare -A MATRIX # key="primitive:surface" value="1" or "D" (deprecated)
|
||||
|
||||
for surface in "${SURFACES[@]}"; do
|
||||
dir="${SURFACE_DIRS[$surface]}"
|
||||
[ -d "$dir" ] || continue
|
||||
|
||||
# Gather all JS and CSS in this surface
|
||||
content=""
|
||||
while IFS= read -r f; do
|
||||
content+="$(cat "$f")"$'\n'
|
||||
done < <(find "$dir" -type f \( -name '*.js' -o -name '*.css' \) 2>/dev/null)
|
||||
|
||||
for prim in "${PRIM_ORDER[@]}"; do
|
||||
patterns="${PRIMITIVES[$prim]}"
|
||||
IFS='|' read -ra pats <<< "$patterns"
|
||||
for pat in "${pats[@]}"; do
|
||||
if echo "$content" | grep -qF "$pat"; then
|
||||
MATRIX["$prim:$surface"]="1"
|
||||
break
|
||||
fi
|
||||
done
|
||||
done
|
||||
|
||||
# Check for deprecated patterns
|
||||
if echo "$content" | grep -qE "$DEPRECATED_PATTERNS"; then
|
||||
MATRIX["deprecated:$surface"]="1"
|
||||
fi
|
||||
done
|
||||
|
||||
# ── Build markdown table ──
|
||||
echo "# Component Coverage Matrix"
|
||||
echo ""
|
||||
echo "Generated: $(date -u '+%Y-%m-%d %H:%M UTC')"
|
||||
echo ""
|
||||
|
||||
# Header row
|
||||
header="| Primitive |"
|
||||
separator="|-----------|"
|
||||
for surface in "${SURFACES[@]}"; do
|
||||
short="${surface#*/}" # Remove kernel/ or ext/ prefix
|
||||
header+=" $short |"
|
||||
separator+="------|"
|
||||
done
|
||||
echo "$header"
|
||||
echo "$separator"
|
||||
|
||||
# Data rows
|
||||
for prim in "${PRIM_ORDER[@]}"; do
|
||||
row="| **$prim** |"
|
||||
for surface in "${SURFACES[@]}"; do
|
||||
if [[ -n "${MATRIX["$prim:$surface"]:-}" ]]; then
|
||||
row+=" ✓ |"
|
||||
else
|
||||
row+=" · |"
|
||||
fi
|
||||
done
|
||||
echo "$row"
|
||||
done
|
||||
|
||||
# Deprecated row
|
||||
row="| ⚠ deprecated |"
|
||||
has_deprecated=false
|
||||
for surface in "${SURFACES[@]}"; do
|
||||
if [[ -n "${MATRIX["deprecated:$surface"]:-}" ]]; then
|
||||
row+=" ⚠ |"
|
||||
has_deprecated=true
|
||||
else
|
||||
row+=" · |"
|
||||
fi
|
||||
done
|
||||
echo "$row"
|
||||
|
||||
echo ""
|
||||
echo "Legend: ✓ = uses kernel primitive, · = not used, ⚠ = deprecated component detected"
|
||||
echo ""
|
||||
|
||||
# ── Deprecated detail ──
|
||||
if $has_deprecated; then
|
||||
echo "## Deprecated Component Usage"
|
||||
echo ""
|
||||
for surface in "${SURFACES[@]}"; do
|
||||
[[ -z "${MATRIX["deprecated:$surface"]:-}" ]] && continue
|
||||
dir="${SURFACE_DIRS[$surface]}"
|
||||
echo "### $surface"
|
||||
grep -rnE "$DEPRECATED_PATTERNS" "$dir" --include='*.js' --include='*.css' 2>/dev/null | head -10 || true
|
||||
echo ""
|
||||
done
|
||||
fi
|
||||
|
||||
# ── Summary ──
|
||||
total_cells=$(( ${#PRIM_ORDER[@]} * ${#SURFACES[@]} ))
|
||||
used=0
|
||||
for prim in "${PRIM_ORDER[@]}"; do
|
||||
for surface in "${SURFACES[@]}"; do
|
||||
[[ -n "${MATRIX["$prim:$surface"]:-}" ]] && used=$((used + 1))
|
||||
done
|
||||
done
|
||||
|
||||
echo "---"
|
||||
echo "Coverage: $used / $total_cells cells ($((used * 100 / total_cells))%)"
|
||||
if $has_deprecated; then
|
||||
echo "STATUS: WARN — deprecated component usage found (see above)"
|
||||
else
|
||||
echo "STATUS: PASS — no deprecated component usage"
|
||||
fi
|
||||
287
scripts/generate-ui-inventory.sh
Executable file
287
scripts/generate-ui-inventory.sh
Executable file
@@ -0,0 +1,287 @@
|
||||
#!/usr/bin/env bash
|
||||
# generate-ui-inventory.sh — Walk kernel + package CSS, extract class selectors with metadata.
|
||||
# Outputs ui-inventory.json to stdout.
|
||||
# Usage: bash scripts/generate-ui-inventory.sh [css-dir] [packages-dir]
|
||||
|
||||
set -euo pipefail
|
||||
CSS_DIR="${1:-src/css}"
|
||||
PKG_DIR="${2:-packages}"
|
||||
|
||||
# Collect all CSS files: kernel + packages
|
||||
FILES=()
|
||||
for f in "$CSS_DIR"/*.css; do [ -f "$f" ] && FILES+=("$f"); done
|
||||
for f in "$PKG_DIR"/*/css/main.css; do [ -f "$f" ] && FILES+=("$f"); done
|
||||
|
||||
# Derive surface name from file path
|
||||
surface_for() {
|
||||
local f="$1"
|
||||
if [[ "$f" == "$PKG_DIR"/* ]]; then
|
||||
local slug
|
||||
slug="$(basename "$(dirname "$(dirname "$f")")")"
|
||||
echo "ext/$slug"
|
||||
else
|
||||
local base
|
||||
base="$(basename "$f" .css)"
|
||||
echo "kernel/$base"
|
||||
fi
|
||||
}
|
||||
|
||||
echo "["
|
||||
first_entry=true
|
||||
|
||||
for f in "${FILES[@]}"; do
|
||||
surface="$(surface_for "$f")"
|
||||
relpath="$f"
|
||||
|
||||
in_comment=0
|
||||
in_keyframes=0
|
||||
in_fontface=0
|
||||
brace_depth=0
|
||||
media_breakpoint=""
|
||||
current_selector=""
|
||||
current_line=0
|
||||
current_classes=""
|
||||
current_spacing=""
|
||||
current_fontsize=""
|
||||
current_breakpoints=""
|
||||
lineno=0
|
||||
|
||||
while IFS= read -r line; do
|
||||
lineno=$((lineno + 1))
|
||||
|
||||
# Track block comments
|
||||
if (( in_comment )); then
|
||||
[[ "$line" == *"*/"* ]] && in_comment=0
|
||||
continue
|
||||
fi
|
||||
if [[ "$line" == *"/*"* ]] && [[ "$line" != *"*/"* ]]; then
|
||||
in_comment=1
|
||||
continue
|
||||
fi
|
||||
|
||||
# Trim leading whitespace
|
||||
trimmed="${line#"${line%%[![:space:]]*}"}"
|
||||
[[ -z "$trimmed" ]] && continue
|
||||
[[ "$trimmed" == /\** ]] && continue
|
||||
|
||||
# Track @keyframes blocks
|
||||
if [[ "$trimmed" =~ ^@keyframes ]]; then
|
||||
in_keyframes=1
|
||||
continue
|
||||
fi
|
||||
if (( in_keyframes )); then
|
||||
[[ "$trimmed" == "}" ]] && in_keyframes=0
|
||||
continue
|
||||
fi
|
||||
|
||||
# Skip @font-face
|
||||
if [[ "$trimmed" =~ ^@font-face ]]; then
|
||||
in_fontface=1
|
||||
continue
|
||||
fi
|
||||
if (( in_fontface )); then
|
||||
[[ "$trimmed" == *"}"* ]] && in_fontface=0
|
||||
continue
|
||||
fi
|
||||
|
||||
# Track @media breakpoints
|
||||
if [[ "$trimmed" =~ ^@media.*max-width ]]; then
|
||||
if [[ "$trimmed" =~ 768 ]]; then
|
||||
media_breakpoint="768px"
|
||||
elif [[ "$trimmed" =~ 1024 ]]; then
|
||||
media_breakpoint="1024px"
|
||||
else
|
||||
media_breakpoint="other"
|
||||
fi
|
||||
continue
|
||||
fi
|
||||
|
||||
# Skip other @-rules
|
||||
[[ "$trimmed" =~ ^@.+ ]] && continue
|
||||
|
||||
# Handle closing brace
|
||||
if [[ "$trimmed" == "}" ]]; then
|
||||
if [[ -n "$media_breakpoint" ]] && (( brace_depth == 0 )); then
|
||||
media_breakpoint=""
|
||||
fi
|
||||
# If we had an open selector block, emit it
|
||||
if [[ -n "$current_selector" ]]; then
|
||||
# Build breakpoints array
|
||||
bp_json="[]"
|
||||
if [[ -n "$current_breakpoints" ]]; then
|
||||
bp_json="["
|
||||
bp_first=true
|
||||
for bp in $current_breakpoints; do
|
||||
$bp_first && bp_first=false || bp_json="$bp_json,"
|
||||
bp_json="$bp_json\"$bp\""
|
||||
done
|
||||
bp_json="$bp_json]"
|
||||
fi
|
||||
|
||||
# Build spacing array
|
||||
sp_json="[]"
|
||||
if [[ -n "$current_spacing" ]]; then
|
||||
sp_json="["
|
||||
sp_first=true
|
||||
# Deduplicate
|
||||
seen_sp=""
|
||||
for sp in $current_spacing; do
|
||||
[[ " $seen_sp " == *" $sp "* ]] && continue
|
||||
seen_sp="$seen_sp $sp"
|
||||
$sp_first && sp_first=false || sp_json="$sp_json,"
|
||||
sp_json="$sp_json\"$sp\""
|
||||
done
|
||||
sp_json="$sp_json]"
|
||||
fi
|
||||
|
||||
# Build font-size array
|
||||
fs_json="[]"
|
||||
if [[ -n "$current_fontsize" ]]; then
|
||||
fs_json="["
|
||||
fs_first=true
|
||||
for fs in $current_fontsize; do
|
||||
$fs_first && fs_first=false || fs_json="$fs_json,"
|
||||
fs_json="$fs_json\"$fs\""
|
||||
done
|
||||
fs_json="$fs_json]"
|
||||
fi
|
||||
|
||||
# Build classes array
|
||||
cls_json="["
|
||||
cls_first=true
|
||||
for cls in $current_classes; do
|
||||
$cls_first && cls_first=false || cls_json="$cls_json,"
|
||||
cls_json="$cls_json\"$cls\""
|
||||
done
|
||||
cls_json="$cls_json]"
|
||||
|
||||
$first_entry && first_entry=false || printf ",\n"
|
||||
printf ' {"surface":"%s","component":"%s","classes":%s,"file":"%s","line":%d,"responsive_breakpoints":%s,"spacing_tokens_used":%s,"font_size_tokens_used":%s}' \
|
||||
"$surface" "$current_selector" "$cls_json" "$relpath" "$current_line" "$bp_json" "$sp_json" "$fs_json"
|
||||
|
||||
current_selector=""
|
||||
current_classes=""
|
||||
current_spacing=""
|
||||
current_fontsize=""
|
||||
current_breakpoints=""
|
||||
fi
|
||||
continue
|
||||
fi
|
||||
|
||||
# Selector line — contains a class and an opening brace
|
||||
if [[ "$trimmed" == *"."* ]] && [[ "$trimmed" == *"{"* ]]; then
|
||||
# Extract the selector part (before {)
|
||||
sel_part="${trimmed%%\{*}"
|
||||
# Extract the property part (after {), may have properties on the same line
|
||||
prop_part="${trimmed#*\{}"
|
||||
prop_part="${prop_part%\}}"
|
||||
|
||||
# Get all class names from the selector
|
||||
classes=""
|
||||
tmp="$sel_part"
|
||||
while [[ "$tmp" =~ \.([a-zA-Z_][a-zA-Z0-9_-]*) ]]; do
|
||||
cls="${BASH_REMATCH[1]}"
|
||||
classes="$classes $cls"
|
||||
tmp="${tmp#*${BASH_REMATCH[0]}}"
|
||||
done
|
||||
|
||||
# Use the first class as the component name
|
||||
first_cls=""
|
||||
for c in $classes; do first_cls="$c"; break; done
|
||||
[[ -z "$first_cls" ]] && continue
|
||||
|
||||
current_selector="$first_cls"
|
||||
current_line=$lineno
|
||||
current_classes="$classes"
|
||||
current_spacing=""
|
||||
current_fontsize=""
|
||||
current_breakpoints=""
|
||||
[[ -n "$media_breakpoint" ]] && current_breakpoints="$media_breakpoint"
|
||||
|
||||
# Check inline properties (single-line rules like .foo { padding: ...; })
|
||||
if [[ -n "$prop_part" ]]; then
|
||||
# Extract spacing tokens
|
||||
sp_tmp="$prop_part"
|
||||
while [[ "$sp_tmp" =~ var\(--sp-([0-9h]+)\) ]]; do
|
||||
current_spacing="$current_spacing --sp-${BASH_REMATCH[1]}"
|
||||
sp_tmp="${sp_tmp#*${BASH_REMATCH[0]}}"
|
||||
done
|
||||
# Extract font-size
|
||||
if [[ "$prop_part" =~ font-size:[[:space:]]*([^;]+) ]]; then
|
||||
fs_val="${BASH_REMATCH[1]}"
|
||||
fs_val="${fs_val%"${fs_val##*[![:space:]]}"}"
|
||||
current_fontsize="$current_fontsize $fs_val"
|
||||
fi
|
||||
fi
|
||||
|
||||
# If the rule is self-closing (has } on the same line), emit now
|
||||
if [[ "$trimmed" == *"}"* ]]; then
|
||||
bp_json="[]"
|
||||
if [[ -n "$current_breakpoints" ]]; then
|
||||
bp_json="[\"$current_breakpoints\"]"
|
||||
fi
|
||||
sp_json="[]"
|
||||
if [[ -n "$current_spacing" ]]; then
|
||||
sp_json="["
|
||||
sp_first=true
|
||||
seen_sp=""
|
||||
for sp in $current_spacing; do
|
||||
[[ " $seen_sp " == *" $sp "* ]] && continue
|
||||
seen_sp="$seen_sp $sp"
|
||||
$sp_first && sp_first=false || sp_json="$sp_json,"
|
||||
sp_json="$sp_json\"$sp\""
|
||||
done
|
||||
sp_json="$sp_json]"
|
||||
fi
|
||||
fs_json="[]"
|
||||
if [[ -n "$current_fontsize" ]]; then
|
||||
fs_json="["
|
||||
fs_first=true
|
||||
for fs in $current_fontsize; do
|
||||
$fs_first && fs_first=false || fs_json="$fs_json,"
|
||||
fs_json="$fs_json\"$fs\""
|
||||
done
|
||||
fs_json="$fs_json]"
|
||||
fi
|
||||
cls_json="["
|
||||
cls_first=true
|
||||
for cls in $current_classes; do
|
||||
$cls_first && cls_first=false || cls_json="$cls_json,"
|
||||
cls_json="$cls_json\"$cls\""
|
||||
done
|
||||
cls_json="$cls_json]"
|
||||
|
||||
$first_entry && first_entry=false || printf ",\n"
|
||||
printf ' {"surface":"%s","component":"%s","classes":%s,"file":"%s","line":%d,"responsive_breakpoints":%s,"spacing_tokens_used":%s,"font_size_tokens_used":%s}' \
|
||||
"$surface" "$current_selector" "$cls_json" "$relpath" "$current_line" "$bp_json" "$sp_json" "$fs_json"
|
||||
|
||||
current_selector=""
|
||||
current_classes=""
|
||||
current_spacing=""
|
||||
current_fontsize=""
|
||||
current_breakpoints=""
|
||||
fi
|
||||
continue
|
||||
fi
|
||||
|
||||
# Property line inside an open block
|
||||
if [[ -n "$current_selector" ]]; then
|
||||
# Extract spacing tokens
|
||||
sp_tmp="$trimmed"
|
||||
while [[ "$sp_tmp" =~ var\(--sp-([0-9h]+)\) ]]; do
|
||||
current_spacing="$current_spacing --sp-${BASH_REMATCH[1]}"
|
||||
sp_tmp="${sp_tmp#*${BASH_REMATCH[0]}}"
|
||||
done
|
||||
# Extract font-size
|
||||
if [[ "$trimmed" =~ font-size:[[:space:]]*([^;]+) ]]; then
|
||||
fs_val="${BASH_REMATCH[1]}"
|
||||
fs_val="${fs_val%"${fs_val##*[![:space:]]}"}"
|
||||
current_fontsize="$current_fontsize $fs_val"
|
||||
fi
|
||||
fi
|
||||
|
||||
done < "$f"
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "]"
|
||||
@@ -32,6 +32,9 @@
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.modal-close:hover { color: var(--text); }
|
||||
@media (max-width: 768px) {
|
||||
.modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
}
|
||||
.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
|
||||
.modal-footer {
|
||||
padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
|
||||
|
||||
@@ -290,3 +290,33 @@
|
||||
.sw-dropdown__option--disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.sw-dropdown__option--disabled:hover { background: transparent; }
|
||||
.sw-dropdown__empty { padding: var(--sp-3); text-align: center; color: var(--text-3); font-size: 0.85rem; }
|
||||
|
||||
/* ── Focus Indicators ─────────────────────── */
|
||||
|
||||
.sw-btn:focus-visible {
|
||||
outline: 2px solid var(--accent); outline-offset: 2px;
|
||||
}
|
||||
.sw-input:focus-visible {
|
||||
outline: 2px solid var(--accent); outline-offset: -1px;
|
||||
}
|
||||
.sw-dropdown__trigger:focus-visible {
|
||||
outline: 2px solid var(--accent); outline-offset: 2px;
|
||||
}
|
||||
.sw-menu__item:focus-visible {
|
||||
outline: 2px solid var(--accent); outline-offset: -2px;
|
||||
}
|
||||
.sw-tabs__tab:focus-visible {
|
||||
outline: 2px solid var(--accent); outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* ── Mobile Touch Targets (44px minimum) ──── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sw-banner__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.sw-toast__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.sw-dialog__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.sw-drawer__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.sw-tabs__arrow { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.sw-tabs__tab { min-height: 44px; }
|
||||
.sw-dropdown__option { min-height: 44px; display: flex; align-items: center; }
|
||||
}
|
||||
|
||||
@@ -55,11 +55,11 @@
|
||||
--text: #e8e8ed;
|
||||
--text-2: #9898a8;
|
||||
--text-3: #6b6b7b;
|
||||
--accent: #6c9fff;
|
||||
--accent-hover: #84b0ff;
|
||||
--accent-dim: rgba(108,159,255,0.12);
|
||||
--accent: #6493ed;
|
||||
--accent-hover: #7ca8f5;
|
||||
--accent-dim: rgba(100,147,237,0.12);
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
--success: #1dab51;
|
||||
--warning: #eab308;
|
||||
--purple: #a78bfa;
|
||||
--purple-dim: rgba(167,139,250,0.10);
|
||||
@@ -85,7 +85,7 @@
|
||||
--overlay: rgba(0,0,0,0.55);
|
||||
--glass: rgba(255,255,255,0.03);
|
||||
--input-bg: #1a1a1f;
|
||||
--user-bubble: rgba(108,159,255,0.08);
|
||||
--user-bubble: rgba(100,147,237,0.08);
|
||||
--danger-bg: rgba(239,68,68,0.12);
|
||||
--bg-code: #1a1a22;
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
|
||||
@@ -141,7 +141,7 @@
|
||||
--border-light: #c2c3cb;
|
||||
--text: #1a1a2e;
|
||||
--text-2: #555770;
|
||||
--text-3: #8b8da3;
|
||||
--text-3: #787a92;
|
||||
--accent: #4a7cdb;
|
||||
--accent-hover: #3968c4;
|
||||
--accent-dim: rgba(74,124,219,0.09);
|
||||
@@ -156,8 +156,8 @@
|
||||
|
||||
--accent-light: #2563eb;
|
||||
--danger-light: #dc2626;
|
||||
--success-light: #16a34a;
|
||||
--warning-light: #ca8a04;
|
||||
--success-light: #128a3e;
|
||||
--warning-light: #a97200;
|
||||
|
||||
--danger-dim: rgba(220,38,38,0.09);
|
||||
--success-dim: rgba(22,163,74,0.09);
|
||||
|
||||
Reference in New Issue
Block a user