Initial repository scaffold: - design.md (google-labs-code/design.md format) as canonical token + guidelines source - brand assets, foundations, tokens (W3C-style JSON) - 12 component primitives, each with labeled anatomy.svg and spec README - light / dark / high-contrast themes, web/mobile/email/print/presentation templates - docs (getting started, principles, a11y, voice & tone, contributing) - runnable web example, token build script stub, CI placeholder Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
# Navigation
|
||||
|
||||
Specification for the **navigation** primitive.
|
||||
|
||||
## Anatomy
|
||||
TODO — drop `anatomy.svg` next to this file.
|
||||
|
||||
## Variants
|
||||
- default
|
||||
- (list per-component variants)
|
||||
|
||||
## States
|
||||
default · hover · focus-visible · active/pressed · disabled · loading
|
||||
|
||||
## Tokens used
|
||||
See `design.md` → `components.navigation.*`.
|
||||
|
||||
## Accessibility
|
||||
- All interactive instances are keyboard-reachable.
|
||||
- Focus state has ≥ 3:1 contrast against its background.
|
||||
- Pair color with an icon or text to convey meaning.
|
||||
|
||||
## Do / Don't
|
||||
- ✅ Use the canonical token references.
|
||||
- ❌ Don't hardcode colors, sizes, or radii.
|
||||
Reference in New Issue
Block a user