mirror of
https://github.com/hyperdxio/hyperdx
synced 2026-04-21 13:37:15 +00:00
## Summary - **Link colors**: Override `--mantine-color-anchor` in ClickStack so links use blue in light mode and yellow in dark mode instead of Mantine's default primary color derivation. - **Checkbox & Radio**: Use `vars` overrides to apply ClickStack accent color to active checkboxes and radios, with contrasting icon colors for readability in both themes. - **Slider styling**: Replace inline `styles` with semantic tokens (`--color-slider-bar`, `--color-slider-thumb`, `--color-slider-dot`, etc.) and CSS modules for consistent 6px solid dot marks and token-based thumb/mark colors across both ClickStack and HyperDX themes. - **Subtle Button variant**: Add `variant="subtle"` support to `Button` in both themes (transparent background, hover highlight, standard text color). - **Docs**: Update `code_style.md` to document `variant="subtle"` as accepted for both `Button` and `ActionIcon`. ### Before <img width="3896" height="1296" alt="image" src="https://github.com/user-attachments/assets/5a2f109a-88e3-46a1-8e38-95d51dfd5a6b" /> <img width="1806" height="2570" alt="image" src="https://github.com/user-attachments/assets/70cf6786-a487-477b-868f-7f2a18746053" /> ### After <img width="3596" height="1358" alt="image" src="https://github.com/user-attachments/assets/0ad3b885-e6b8-4edd-aade-97516740ed6b" /> <img width="1874" height="2684" alt="image" src="https://github.com/user-attachments/assets/fa00f2cc-49f8-4bd3-8379-3665b760bd4e" /> ## Test plan - [ ] Verify links are blue in ClickStack light mode and yellow in dark mode - [ ] Verify checkboxes and radio buttons use the accent color when active in both themes - [ ] Verify checkbox icon is dark in dark mode for contrast - [ ] Verify slider marks are solid 6px dots, with correct colors in both modes - [ ] Verify slider thumb uses theme-appropriate colors - [ ] Verify `<Button variant="subtle">` renders correctly in both themes - [ ] Verify no visual regressions in HyperDX theme slider styling |
||
|---|---|---|
| .. | ||
| 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