Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
31 lines
1.9 KiB
Markdown
31 lines
1.9 KiB
Markdown
# Interactive States — MEASURED (replaces prior INFERRED values)
|
|
|
|
> Source: getComputedStyle + element className inspection on live DOM, dark theme, 1440 viewport.
|
|
> Dominant transition: 0.25s cubic-bezier(.32,.72,0,1) (--default-* tokens).
|
|
|
|
## Suggestion Chip (pill button)
|
|
Anatomy: inline-flex, gap 8px, height 36px (h-9), padding 0 14px (px-3.5), fully rounded (rounded-full), text 12px/16px weight 500.
|
|
- DEFAULT: bg neutral-800 (lab(15.204% 0 0) approx #262626); text neutral-200; ring 1px inset neutral-700/70 (oklab .371 / .7); shadow --shadow-bubble = 0 1px 2px #0006.
|
|
- HOVER (measured from utilities hover:bg-neutral-700/60 + dark:hover:ring-neutral-600): bg neutral-700/60; ring neutral-600. (light theme equivalents: hover:bg-neutral-50, hover:ring-neutral-300)
|
|
- ACTIVE/PRESS: 'press-pill' utility class present (no separate CSS rule => relies on transition + inset ring feedback; no scale transform applied).
|
|
- TRANSITION: 0.25s cubic-bezier(.32,.72,0,1).
|
|
|
|
## Primary Button ("Stop Claude" / Send)
|
|
- DEFAULT: bg rgb(250,249,245) (cream/paper); text rgb(20,20,19); radius 12px; height 46px; padding 12px 16px; font 14px/600.
|
|
- SHADOW (signature coral glow): rgba(217,119,87,0.24) 0 40px 80px 0, rgba(217,119,87,0.24) 0 4px 14px 0.
|
|
- TRANSITION: 0.3s cubic-bezier(.4,0,.2,1).
|
|
|
|
## Dock / App Tile (computer panel)
|
|
- DEFAULT: bg #000; text neutral-50; radius 16px; size 48px; inset hairline ring rgba(255,255,255,0.15) 0 0 0 1px.
|
|
- TRANSITION: all (token-driven).
|
|
|
|
## Tokens confirmed
|
|
- --shadow-bubble: 0 1px 2px #0006
|
|
- --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a
|
|
- --color-neutral-800: lab(15.204% 0 0) | -700: lab(27.036% 0 0) | -900: lab(7.782% 0 0) | -100: lab(96.52% 0 0)
|
|
- --color-coral: #f96565
|
|
- --default-transition-duration: .25s
|
|
- --default-transition-timing-function: cubic-bezier(.32,.72,0,1)
|
|
|
|
> No light-scheme variant ships (dark-only). prefers-reduced-motion is handled in stylesheet.
|