Create design tokens system for theming #57
Description
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)