mirror of
https://github.com/hyperdxio/hyperdx
synced 2026-04-21 13:37:15 +00:00
## Summary - Adds a new `variant="link"` for `Button` and `ActionIcon` that renders as a plain text link — no background, no border, no padding. Text is muted by default and brightens on hover (adapts to light/dark mode). - Adds a **Brand** theme switcher to the Storybook toolbar so stories can be previewed in both HyperDX and ClickStack themes. - Documents the new variant in `code_style.md` and adds comprehensive Storybook stories. ## Changes | File | What | |------|------| | `themes/hyperdx/mantineTheme.ts` | `link` variant for Button (`vars` + `classNames`) and ActionIcon (`vars` + `classNames`) | | `themes/clickstack/mantineTheme.ts` | Same for ClickStack theme | | `styles/variants.module.scss` | Hover color transition and transparent disabled state for link variants | | `stories/Button.stories.tsx` | Link variant in CustomVariants, DisabledStates, LoadingStates | | `stories/ActionIcon.stories.tsx` | Link variant in CustomVariants, DisabledStates, LoadingStates | | `.storybook/preview.tsx` | Brand theme switcher (HyperDX / ClickStack) in toolbar | | `agent_docs/code_style.md` | Documented link variant usage and guidelines | ## Test plan - [ ] Verify `variant="link"` renders without background/border/padding in Storybook - [ ] Verify hover brightens text in both light and dark modes - [ ] Verify disabled state shows reduced opacity with no background - [ ] Switch brand theme in Storybook toolbar and confirm both HyperDX and ClickStack render correctly Made with [Cursor](https://cursor.com) |
||
|---|---|---|
| .. | ||
| architecture.md | ||
| code_style.md | ||
| development.md | ||
| README.md | ||
| tech_stack.md | ||
Agent Documentation Directory
This directory contains detailed documentation for AI coding agents working on the HyperDX codebase. These files use progressive disclosure - they're referenced from CLAUDE.md but only read when needed.
Purpose
Instead of stuffing all instructions into CLAUDE.md (which goes into every conversation), we keep detailed, task-specific information here. This ensures:
- Better focus: Only relevant context gets loaded per task
- Improved performance: Smaller context window = better instruction following
- Easier maintenance: Update specific docs without bloating the main file
Files
architecture.md- System architecture, data models, service relationships, security patternstech_stack.md- Technology choices, UI component patterns, library usagedevelopment.md- Development workflows, testing strategy, common tasks, debuggingcode_style.md- Code patterns and best practices (read only when actively coding)
Usage Pattern
When starting a task:
- Agent reads
CLAUDE.mdfirst (always included) - Agent determines which (if any) docs from this directory are relevant
- Agent reads only the needed documentation
- Agent proceeds with focused, relevant context
Maintenance
- Keep files focused on their specific domain
- Use file/line references instead of code snippets when possible
- Update when patterns or architecture change
- Keep documentation current with the codebase