Description

Create comprehensive design tokens system for consistent theming across the application.

Requirements

• Color palette for light and dark themes
• Typography scale (font sizes, weights, line heights)
• Spacing scale (consistent padding/margin values)
• Border radius values
• Shadow definitions
• Animation/transition timings
• Breakpoints for responsive design
• CSS custom properties implementation
• Special states for encrypted vs decrypted content visualization

Acceptance Criteria

• Design tokens defined in a central location
• Light and dark theme color schemes
• Typography scale covers all use cases
• Spacing scale follows consistent pattern (4px, 8px, etc.)
• Tokens are available as CSS custom properties
• Documentation for token usage
• Integration with Tailwind/shadcn theming
• Type-safe token access in TypeScript
• Encrypted content state colors (e.g., muted/locked appearance)
• Decrypted content state colors (e.g., active/unlocked appearance)
• Success/error/warning state colors for operations

Color Variables (Must Include)

/* Encryption States */
--color-encrypted-bg: /* Muted background for encrypted state */
--color-encrypted-border: /* Border color for encrypted containers */
--color-encrypted-text: /* Text color for encrypted placeholders */

--color-decrypted-bg: /* Active background for decrypted state */
--color-decrypted-border: /* Border color for decrypted content */
--color-decrypted-success: /* Success indicator for decryption */

/* Operation States */
--color-copy-success: /* Feedback for successful copy */
--color-delete-warning: /* Warning for destructive actions */
--color-expire-info: /* Info color for expiration notices */

Technical Notes

• Consider using CSS custom properties for runtime theme switching
• Ensure tokens work with Tailwind's design system
• Follow shadcn/ui theming patterns
• Consider accessibility (contrast ratios, etc.)
• Document token naming conventions
• Ensure all colors meet WCAG AA standards

Related

• Required by all UI components
• Foundation for Phase 4 UI Components
• Affects Implement CodeEditor component with CodeMirror v6 #54, Implement FileEditor component for single file editing #55, Implement MultiFileEditor component for managing multiple files #56 (Editor components)