- Replaced all default visual styling (opacity, filters) with comprehensive theming hook comments
- Updated main symbol state classes with detailed documentation for their purpose and usage
- Updated full-only symbol system styling with sophisticated placeholder comments
- Preserved accessibility styling for high contrast mode only
- Updated CSS-CUSTOMIZATION.md to reflect no default styling approach
- Added prominent warning about no default styling and provided quick start example
- Updated example numbering and added basic visual distinction example
- Enhanced accessibility section to clarify it's the only built-in styling
The plugin now provides pure theming hooks without imposing any visual choices, while maintaining comprehensive accessibility support and detailed documentation for users and developers.
- Updated applySymbolState.ts to support 'half' state for half-filled symbols
- Modified renderRating.ts to apply 'half' state to half symbols (instead of 'rated')
- Updated previewRating.ts to use distinct states during hover preview for consistency
- Added CSS styling for .interactive-rating-symbol--half class with 80% opacity
- Added high contrast accessibility support for half symbols (60% opacity with enhanced contrast)
- Enhanced CSS-CUSTOMIZATION.md with comprehensive examples for half symbols including:
* Basic color styling for filled/half/empty symbols
* Gradient effects for half symbols
* Enhanced hover effects for all three states
* Different styling examples for various symbol types
* Updated default styling documentation
* Enhanced accessibility considerations
* Updated migration guide
This completes the full CSS customization system with distinct classes for:
- .interactive-rating-symbol--rated (filled symbols)
- .interactive-rating-symbol--half (half symbols)
- .interactive-rating-symbol--empty (empty symbols)
- .interactive-rating-symbol--unrated (full-only grayed symbols)
- Updated applySymbolState.ts to support 'empty' state for unselected symbols
- Modified renderRating.ts to apply 'rated' state to filled symbols and 'empty' state to empty symbols
- Added CSS styling for .interactive-rating-symbol--empty class with 50% opacity
- Added high contrast accessibility support for empty symbols
- Created comprehensive CSS-CUSTOMIZATION.md guide with examples
This enables users to customize the appearance of filled vs empty symbols using CSS snippets, addressing the original request for better visual distinction between selected and non-selected symbols.
