candle-annotator/openspec/changes/enhance-annotation-features-and-deployment/specs/hacker-theme/spec.md

ADDED Requirements

Requirement: Monospace typography

The application SHALL use monospace fonts throughout the entire interface.

Scenario: Primary font family

• WHEN CSS font-family is applied
• THEN system uses font stack: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace

Scenario: Font loading

• WHEN application loads
• THEN system loads JetBrains Mono font from Google Fonts or local files with weights: 400, 500, 700

Scenario: All text elements

• WHEN rendering any text (buttons, labels, inputs, tooltips, headings)
• THEN all text uses monospace font family without exception

Scenario: Number formatting

• WHEN displaying numbers (prices, timestamps, counts)
• THEN uses tabular-nums CSS property for aligned columns

Requirement: Matrix-style color scheme

The application SHALL use a dark background with neon green (#00ff41) accent color scheme.

Scenario: Background colors

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

Scenario: Primary accent color

• WHEN highlighting interactive elements, active states, or success messages
• THEN uses #00ff41 (matrix green) as the primary accent color

Scenario: Secondary accent colors

• WHEN rendering labels or status indicators
• 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: Text colors

• WHEN rendering text
• THEN primary text is #00ff41, secondary text is #00cc33 (dimmer green), and disabled text is #003311 (very dim green)

Scenario: Border colors

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

Requirement: Neon glow effects

The application SHALL apply glow effects to active and interactive elements.

Scenario: Button hover glow

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

Scenario: Active tool glow

• WHEN a tool is active (selected)
• THEN button shows pulsing glow animation with box-shadow: 0 0 15px #00ff41, 0 0 30px #00ff4180

Scenario: Selected element glow

• WHEN a line or label is selected
• THEN element shows glow effect with filter: drop-shadow(0 0 8px #00ff41)

Scenario: Input focus glow

• WHEN user focuses on text input or search field
• THEN input shows border glow: box-shadow: 0 0 8px #00ff41

Scenario: Cursor circle glow

• WHEN drawing line with cursor circle visible
• THEN cursor circle has stroke glow with filter: drop-shadow(0 0 4px currentColor)

Requirement: ASCII-style borders

The application SHALL use terminal-inspired border styling with corner characters.

Scenario: Container borders

• WHEN rendering bordered containers (Toolbox, label list sections)
• THEN uses 1px solid borders with #00ff41 color

Scenario: Border corners with pseudo-elements

• WHEN rendering section headers or important containers
• THEN uses CSS ::before and ::after pseudo-elements to display ASCII corner characters: ┌ ┐ └ ┘

Scenario: Separator lines

• WHEN rendering section separators
• THEN uses border-top: 1px solid #003311 with optional ASCII characters (─) via pseudo-elements

Scenario: Card-style containers

• WHEN rendering label list entries or modal dialogs
• THEN containers have 1px solid border with subtle inset shadow for depth

Requirement: Terminal-like feedback messages

The application SHALL display command-style feedback for user actions.

Scenario: Success message format

• WHEN user completes an action successfully (delete, create, export)
• THEN displays message in format: > SUCCESS: <action> completed [<count> items] in green text

Scenario: Error message format

• WHEN an error occurs
• THEN displays message in format: > ERROR: <description> [code: <error_code>] in red text

Scenario: Info message format

• WHEN displaying informational message
• THEN displays message in format: > INFO: <message> in cyan text

Scenario: Message container styling

• WHEN displaying any feedback message
• THEN container has monospace font, left-aligned text, subtle border, and auto-dismiss after 4 seconds

Scenario: Message animation

• WHEN feedback message appears
• THEN slides in from top with fade-in animation (0.3s ease-out)

Requirement: Minimalist icon treatment

The application SHALL use simplified, outline-style icons or ASCII alternatives.

Scenario: Lucide icon styling

• WHEN rendering Lucide React icons
• THEN icons use stroke-width: 1.5, size: 20px, and color matches text color (#00ff41)

Scenario: Icon hover effect

• WHEN user hovers over icon button
• THEN icon glows with filter: drop-shadow(0 0 4px currentColor)

Scenario: ASCII alternative icons (optional)

• WHEN rendering simple actions (delete, expand, collapse)
• THEN optionally uses ASCII characters: [×] for delete, [▼] for expand, [▲] for collapse, [>] for actions

Scenario: Icon color consistency

• WHEN icon is in active/selected state
• THEN icon color is #00ff41
• WHEN icon is in disabled state
• THEN icon color is #003311

Requirement: High contrast for readability

The application SHALL maintain WCAG AA contrast ratios for all text.

Scenario: Primary text contrast

• WHEN displaying primary text (#00ff41) on dark background (#0a0e0a)
• THEN contrast ratio is at least 4.5:1 (WCAG AA standard)

Scenario: Secondary text contrast

• WHEN displaying secondary text (#00cc33) on dark background
• THEN contrast ratio is at least 4.5:1

Scenario: Button text contrast

• WHEN button is in any state (default, hover, active, disabled)
• THEN text maintains minimum 4.5:1 contrast with background

Scenario: Chart element visibility

• WHEN rendering lines and markers on chart
• THEN all annotations have sufficient contrast against black background and candles

Requirement: Simplified button styling

The application SHALL use minimal, flat button design with terminal aesthetic.

Scenario: Default button appearance

• WHEN rendering buttons in default state
• THEN buttons have transparent background, 1px solid #00ff41 border, #00ff41 text, 4px padding, and no rounded corners (border-radius: 0)

Scenario: Hover button appearance

• WHEN user hovers over button
• THEN background changes to #00ff4110 (10% opacity), border glows, and text remains #00ff41

Scenario: Active button appearance

• WHEN button is active/pressed
• THEN background is #00ff4120 (20% opacity), border is 2px solid, and includes pulsing glow animation

Scenario: Disabled button appearance

• WHEN button is disabled
• THEN background is transparent, border is #003311, text is #003311, and no hover effects

Scenario: Destructive button styling

• WHEN button represents destructive action (delete)
• THEN uses #ff0040 (neon red) for border and text instead of green, with matching red glow on hover

Requirement: Cyber-retro aesthetic elements

The application SHALL include subtle design elements that enhance the hacker theme.

Scenario: Scanline effect (optional)

• WHEN rendering main container
• THEN applies subtle CSS repeating-linear-gradient overlay simulating CRT scanlines with 2px spacing at 5% opacity

Scenario: Noise texture (optional)

• WHEN rendering background
• THEN applies subtle noise texture using CSS filter or background-image at 3% opacity for grain effect

Scenario: Typewriter animation for messages

• WHEN displaying new feedback message
• THEN text appears with brief letter-by-letter typing animation (0.02s per character, max 0.5s total)

Scenario: Flicker animation on focus

• WHEN user focuses on input field
• THEN border shows brief flicker animation (0.1s) simulating electrical surge

Scenario: ASCII art branding (optional)

• WHEN application loads or in header
• THEN displays application name in ASCII art style using monospace font

Requirement: Responsive dark theme

The application SHALL maintain theme consistency across all components and states.

Scenario: Modal dialogs

• WHEN displaying confirmation dialogs
• THEN modal has dark background (#0d110d), neon green border, monospace font, and terminal-style title (e.g., "> CONFIRM ACTION")

Scenario: Input fields

• WHEN rendering text inputs or search fields
• THEN inputs have transparent background, #00ff41 border, #00ff41 text, #00ff4120 placeholder, and cursor color #00ff41

Scenario: Dropdown menus

• WHEN displaying filter or select dropdowns
• THEN dropdown has dark background (#0d110d), neon green border, #00ff41 option text, hover state with #00ff4120 background

Scenario: Scrollbars

• WHEN content requires scrolling
• THEN custom scrollbar with #003311 track, #00ff41 thumb, and 8px width

Scenario: Tooltips

• WHEN displaying tooltips on hover
• THEN tooltip has dark background (#0d110d), 1px #00ff41 border, monospace font, and terminal-style text

Requirement: Animation performance

The application SHALL use performant CSS animations that don't impact chart rendering.

Scenario: GPU acceleration

• WHEN applying animations (glow, pulse, fade)
• THEN uses CSS transform and opacity properties with will-change hints for GPU acceleration

Scenario: Animation duration

• WHEN defining animations
• THEN all animations complete within 0.5s, with most hover effects at 0.2s

Scenario: Reduced motion support

• WHEN user has prefers-reduced-motion enabled
• THEN system disables glow animations, typewriter effects, and pulsing, keeping only instant transitions

Scenario: Chart performance

• WHEN theme is active and chart is rendering
• THEN SVG overlay and chart rendering maintains 60fps without jank from theme effects

Requirement: Tailwind CSS configuration

The Tailwind config SHALL be updated to support hacker theme tokens.

Scenario: Custom colors in tailwind.config

• WHEN tailwind.config.js is parsed
• THEN defines custom colors: matrix: '#00ff41', matrixDim: '#00cc33', matrixDark: '#003311', neonRed: '#ff0040', neonCyan: '#00d4ff', neonYellow: '#ffff00', terminal: '#0a0e0a', terminalLight: '#0d110d'

Scenario: Custom font families

• WHEN tailwind.config.js is parsed
• THEN defines fontFamily: { mono: ['JetBrains Mono', 'Fira Code', 'Courier New', 'monospace'] }

Scenario: Custom animations

• WHEN tailwind.config.js is parsed
• THEN defines keyframes for 'glow-pulse', 'flicker', 'scanline-move' and corresponding animation utilities

Scenario: Custom shadows

• WHEN tailwind.config.js is parsed
• THEN defines boxShadow: { 'glow-sm': '0 0 8px #00ff41', 'glow': '0 0 15px #00ff41, 0 0 30px #00ff4180', 'glow-lg': '0 0 20px #00ff41, 0 0 40px #00ff4180' }

Requirement: globals.css updates

The globals.css file SHALL define base styles and CSS variables for the hacker theme.

Scenario: CSS custom properties

• WHEN globals.css is loaded
• THEN defines CSS variables: --color-matrix, --color-matrix-dim, --color-matrix-dark, --color-neon-red, --color-neon-cyan, --color-terminal, --font-mono

Scenario: Base body styles

• WHEN page loads
• THEN body element has background: --color-terminal, color: --color-matrix, font-family: --font-mono, and -webkit-font-smoothing: antialiased

Scenario: Selection styling

• WHEN user selects text
• THEN selection background is #00ff4140 (40% opacity) and text is #00ff41

Scenario: Scrollbar styling

• WHEN globals.css is loaded
• THEN defines custom scrollbar styles using ::-webkit-scrollbar pseudo-elements with theme colors