## ColorPicker
### Semantic Parts
- root（`semantic-mark-root`）: Trigger container with border styles, transition animations, size controls, displaying color block and text content
- body（`semantic-mark-body`）: Color block container with background color, border styles
- content（`semantic-mark-content`）: Color block element with actual selected color styles
- description（`semantic-mark-description`）: Description text content with font styles and color
- popup.root（`semantic-mark-popup-root`）: Popup panel root container with background color, shadow effects, color selection panel, slider controls and preset colors
### Usage Example
```tsx
```
### Abstract DOM Structure
```html
```