cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix remaining spec review flags

Browse Source 
- EventFeed severity uses 'running' not 'info' for consistency
- Fix stale SHA reference in design decisions table
- Document StatusDot live/stale/dead token mappings
- Type Tag color prop as semantic union instead of string

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-18 08:44:49 +01:00
parent b8aa5a5481
commit cce16d25c6
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/superpowers/specs/2026-03-18-design-system-design.md
View File

@@ -311,14 +311,15 @@ All CSS custom properties for both themes. Light values sourced from `mock-v2-li
#### StatusDot
- 6-7px colored circle
- Variants: `live` (green + pulse), `stale` (amber), `dead` (gray), `success` (green), `warning` (orange), `error` (red), `running` (teal)
- Semantic variants (map to status tokens): `success` (green), `warning` (orange), `error` (red), `running` (teal)
- Agent-specific variants (map to tokens): `live` → `--success` + pulse, `stale` → `--warning`, `dead` → `--text-muted`
- Optional pulse animation (enabled by default for `live`)
- Props: `variant: 'live' | 'stale' | 'dead' | 'success' | 'warning' | 'error' | 'running'`, `pulse?: boolean`
#### Tag
- Removable pill with x dismiss button
- Color from `hashColor` or explicit
- Props: `label: string`, `onRemove?: () => void`, `color?: string`
- Color from `hashColor(label)` by default, or explicit semantic color
- Props: `label: string`, `onRemove?: () => void`, `color?: 'success' | 'warning' | 'error' | 'running' | 'auto'`
#### Toggle
- Styled on/off switch
@@ -459,7 +460,8 @@ All CSS custom properties for both themes. Light values sourced from `mock-v2-li
- Each item: icon (by severity), text content, relative timestamp
- Auto-scrolls to newest (with "pause" on manual scroll)
- Category filtering (error, warning, info, success)
- Props: `events: { id: string; severity: 'error' | 'warning' | 'info' | 'success'; message: string; timestamp: Date }[]`, `maxItems?: number`
- Severity uses `'error' | 'warning' | 'success' | 'running'` to stay consistent with the semantic naming convention. In event context, `running` represents informational/neutral events (teal).
- Props: `events: { id: string; severity: 'error' | 'warning' | 'success' | 'running'; message: string; timestamp: Date }[]`, `maxItems?: number`
#### ShortcutsBar
- Fixed-position bar at bottom-right of viewport
@@ -544,7 +546,7 @@ All data is imported directly by pages — no fetch calls, no loading states nee
| CSS Modules over Tailwind | Mocks already define a CSS variable token system; CSS Modules preserve that naturally and scope class names |
| No component library dependency | shadcn/ui-like ownership — components are part of the codebase, not an npm package |
| Light theme first | User preference; dark theme is "too colorful" in current mocks and needs a muted redesign |
| Deterministic badge colors | Existing app uses SHA-based name→color mapping; design system must replicate this |
| Deterministic badge colors | Existing app uses hash-based name→color mapping; design system replicates this with FNV-1a |
| 3-column layout as shell | All pages share sidebar + topbar; only main content and optional detail panel change per route |
| Mock data as TypeScript objects | Enables standalone layouts without server; type-safe; easy to replace with API calls later |
| DM Sans + JetBrains Mono | Established in existing mocks and live application |