Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Build a small themeable component library (buttons, cards, form controls, a nav) in modern CSS that a team could maintain. Requirements: (1) ARCHITECTURE — a consistent, low-specificity naming methodology (e.g. BEM) and, optionally, cascade layers (@layer) to control the cascade; keep specificity flat, zero !important. (2) THEMING — a custom-property design-token system with light/dark themes via prefers-color-scheme (and/or a data-theme override). (3) MODERN CSS — use where they fit: :has(), container queries (@container) so components adapt to their container not the viewport, logical properties, and clamp(); feature-detect risky features with @supports. (4) ACCESSIBILITY — visible :focus-visible styles, sufficient contrast, prefers-reduced-motion, no meaning-by-color-alone. (5) PERFORMANCE — efficient selectors, animate only transform/opacity. Document the token system and the specificity strategy.
Consistent low-specificity methodology (BEM/@layer); flat specificity, no !important; reusable, deletion-safe components.
Custom-property tokens with light/dark (prefers-color-scheme); real use of :has()/container queries/logical properties/clamp with @supports guards.
:focus-visible + contrast + prefers-reduced-motion + no color-only meaning; efficient selectors; animates transform/opacity only.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# A themeable, modern, accessible component system ## Goal Build a small themeable component library (buttons, cards, form controls, a nav) in modern CSS that a team could maintain. Requirements: (1) ARCHITECTURE — a consistent, low-specificity naming methodology (e.g. BEM) and, optionally, cascade layers (@layer) to control the cascade; keep specificity flat, zero !important. (2) THEMING — a custom-property design-token system with light/dark themes via prefers-color-scheme (and/or a data-theme override). (3) MODERN CSS — use where they fit: :has(), container queries (@container) so components adapt to their container not the viewport, logical properties, and clamp(); feature-detect risky features with @supports. (4) ACCESSIBILITY — visible :focus-visible styles, sufficient contrast, prefers-reduced-motion, no meaning-by-color-alone. (5) PERFORMANCE — efficient selectors, animate only transform/opacity. Document the token system and the specificity strategy. ## Acceptance criteria - [ ] Architecture & specificity: Consistent low-specificity methodology (BEM/@layer); flat specificity, no !important; reusable, deletion-safe components. - [ ] Theming & modern CSS: Custom-property tokens with light/dark (prefers-color-scheme); real use of :has()/container queries/logical properties/clamp with @supports guards. - [ ] Accessibility & performance: :focus-visible + contrast + prefers-reduced-motion + no color-only meaning; efficient selectors; animates transform/opacity only. ## Verification - [ ] Document installation and run commands. - [ ] Record automated checks and their exact commands. - [ ] Add representative output, screenshots, or a short demo where useful. - [ ] Confirm failure paths and known constraints. ## Decision log ### Decision title - Context: - Choice: - Alternatives considered: - Tradeoffs: ## Evidence - Link each rubric criterion to the file, test, or artifact that demonstrates it. ## Known limitations - List what is intentionally out of scope and what should be improved next.