hyperdx/agent_docs
Elizabet Oliveira 6c347a52c8
fix: ClickStack and HyperDX color token improvements (#1988)
## 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
2026-03-25 19:46:59 +00:00
..
architecture.md chore: CLAUDE.md refactor (#1437) 2025-12-03 18:35:46 +00:00
code_style.md fix: ClickStack and HyperDX color token improvements (#1988) 2026-03-25 19:46:59 +00:00
development.md Enable parallel integration testing across multiple worktrees (#1917) 2026-03-16 19:42:08 +00:00
README.md test: Backport Claude E2E Skill (#1836) 2026-03-02 21:01:59 +00:00
tech_stack.md Remove Bootstrap Icons (#1480) 2025-12-15 17:06:40 +00:00

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:

  1. Better focus: Only relevant context gets loaded per task
  2. Improved performance: Smaller context window = better instruction following
  3. Easier maintenance: Update specific docs without bloating the main file

Files

  • architecture.md - System architecture, data models, service relationships, security patterns
  • tech_stack.md - Technology choices, UI component patterns, library usage
  • development.md - Development workflows, testing strategy, common tasks, debugging
  • code_style.md - Code patterns and best practices (read only when actively coding)

Usage Pattern

When starting a task:

  1. Agent reads CLAUDE.md first (always included)
  2. Agent determines which (if any) docs from this directory are relevant
  3. Agent reads only the needed documentation
  4. 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