trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions
candle-annotator/openspec/specs/hacker-theme/spec.md

5.2 KiB
Raw Permalink Blame History

MODIFIED Requirements

Requirement: Matrix-style color scheme

The application SHALL use a dark background with neon green (#00ff41) accent color scheme in dark mode and a light background with muted green accents in light mode.

Scenario: Dark mode background colors

  • WHEN rendering main layout in dark mode
  • THEN page background is #0a0e0a (near black), sidebar background is #0d110d, and chart background is #000000

Scenario: Dark mode primary accent color

  • WHEN highlighting interactive elements in dark mode
  • THEN uses #00ff41 (matrix green) as the primary accent color

Scenario: Dark mode secondary accent colors

  • WHEN rendering labels or status indicators in dark mode
  • THEN uses #ff0040 (neon red) for break_down/destructive, #00ff41 (neon green) for break_up/success, #00d4ff (neon cyan) for informational, #ffff00 (neon yellow) for warnings

Scenario: Dark mode text colors

  • WHEN rendering text in dark mode
  • THEN primary text is #00ff41, secondary text is #00cc33, and disabled text is #003311

Scenario: Dark mode border colors

  • WHEN rendering borders in dark mode
  • THEN uses #00ff41 with 1px solid for active elements, #003311 for inactive borders

Scenario: Light mode background colors

  • WHEN rendering main layout in light mode
  • THEN page background is #f8faf8 (off-white with green tint), sidebar background is #f0f4f0, and chart background is #ffffff

Scenario: Light mode primary accent color

  • WHEN highlighting interactive elements in light mode
  • THEN uses #16a34a (green-600) as the primary accent color

Scenario: Light mode text colors

  • WHEN rendering text in light mode
  • THEN primary text is #1a1a2e (near-black), secondary text is #4a5568 (gray-600), and disabled text is #a0aec0 (gray-400)

Scenario: Light mode border colors

  • WHEN rendering borders in light mode
  • THEN uses #d1d5db (gray-300) for borders, #16a34a for active element borders

Requirement: Neon glow effects

The application SHALL apply glow effects to active and interactive elements in dark mode only.

Scenario: Button hover glow in dark mode

  • WHEN user hovers over any button in dark mode
  • THEN button shows box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff4180

Scenario: No glow in light mode

  • WHEN user hovers over any button in light mode
  • THEN button shows standard hover state (subtle background change) without neon glow effects

Scenario: Active tool glow in dark mode

  • WHEN a tool is active (selected) in dark mode
  • THEN button shows pulsing glow animation

Scenario: Active tool highlight in light mode

  • WHEN a tool is active (selected) in light mode
  • THEN button shows solid green background/border highlight without glow animation

Requirement: Responsive dark theme

The application SHALL maintain theme consistency across all components and states in both dark and light modes.

Scenario: Modal dialogs in dark mode

  • WHEN displaying confirmation dialogs in dark mode
  • THEN modal has dark background (#0d110d), neon green border, monospace font

Scenario: Modal dialogs in light mode

  • WHEN displaying confirmation dialogs in light mode
  • THEN modal has white background, gray border, monospace font

Scenario: Input fields in dark mode

  • WHEN rendering text inputs in dark mode
  • THEN inputs have transparent background, #00ff41 border, #00ff41 text

Scenario: Input fields in light mode

  • WHEN rendering text inputs in light mode
  • THEN inputs have white background, gray-300 border, near-black text

Scenario: Scrollbars in dark mode

  • WHEN content requires scrolling in dark mode
  • THEN scrollbar track is #003311, thumb is #00ff41

Scenario: Scrollbars in light mode

  • WHEN content requires scrolling in light mode
  • THEN scrollbar track is #e2e8f0, thumb is #94a3b8

Requirement: Tailwind CSS configuration

The Tailwind config SHALL support theme tokens for both dark and light modes via CSS variables.

Scenario: CSS variables for dark mode

  • WHEN the dark class is on <html>
  • THEN CSS variables resolve to hacker-theme dark palette values

Scenario: CSS variables for light mode

  • WHEN the dark class is NOT on <html>
  • THEN CSS variables resolve to light theme palette values

Requirement: globals.css updates

The globals.css file SHALL define CSS variables for both light and dark themes.

Scenario: Light mode CSS variables

  • WHEN globals.css is loaded without dark class
  • THEN :root defines light theme color variables

Scenario: Dark mode CSS variables

  • WHEN globals.css is loaded with dark class on <html>
  • THEN .dark selector overrides with hacker-theme dark palette variables

ADDED Requirements

Requirement: Cyber-retro effects dark-mode only

The application SHALL only apply CRT scanline effects, noise textures, and flicker animations in dark mode.

Scenario: Scanlines in dark mode

  • WHEN rendering main container in dark mode
  • THEN applies subtle CRT scanline overlay at 5% opacity

Scenario: No scanlines in light mode

  • WHEN rendering main container in light mode
  • THEN no scanline or CRT effects are applied