@possibly6400/ui-kit 1.0.15 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -723,6 +723,47 @@ import { Form, FormField, FormButton, FormFooter, FormFooterLink } from '@possib
|
|
|
723
723
|
5. **Composable**: Components can be combined and extended
|
|
724
724
|
6. **Dynamic sizing**: Components adapt to content while maintaining minimum constraints
|
|
725
725
|
|
|
726
|
+
## CSS Architecture
|
|
727
|
+
|
|
728
|
+
The UI Kit uses an organized CSS structure for maintainability:
|
|
729
|
+
|
|
730
|
+
```
|
|
731
|
+
src/styles/
|
|
732
|
+
├── globals.css # Main entry point (imports all CSS)
|
|
733
|
+
├── base.css # Base/reset styles
|
|
734
|
+
├── theme/
|
|
735
|
+
│ └── variables.css # Theme color variables (dark/light)
|
|
736
|
+
├── components/
|
|
737
|
+
│ ├── checkbox.css # Checkbox component styles
|
|
738
|
+
│ ├── theme-switch.css # ThemeSwitch component styles
|
|
739
|
+
│ ├── toggle.css # Toggle component styles
|
|
740
|
+
│ ├── loader.css # Loader component styles
|
|
741
|
+
│ ├── radio.css # RadioButton component styles
|
|
742
|
+
│ └── card.css # Card component styles
|
|
743
|
+
└── utilities/
|
|
744
|
+
├── animations.css # Animation keyframes
|
|
745
|
+
└── reduced-motion.css # Accessibility: reduced motion support
|
|
746
|
+
```
|
|
747
|
+
|
|
748
|
+
### CSS Approach
|
|
749
|
+
|
|
750
|
+
The library uses a hybrid CSS approach:
|
|
751
|
+
|
|
752
|
+
- **CSS Modules** for components with complex, scoped styles: `SubmitButton`, `ContextMenu`, `SearchBar`, `SocialLinks`
|
|
753
|
+
- **Global CSS** for components with theme-dependent styles that need class-based selectors: `Checkbox`, `Toggle`, `Loader`, `RadioButton`, `ThemeSwitch`, `Card`
|
|
754
|
+
|
|
755
|
+
### Reduced Motion Support
|
|
756
|
+
|
|
757
|
+
All animated components respect `prefers-reduced-motion: reduce`:
|
|
758
|
+
|
|
759
|
+
```css
|
|
760
|
+
@media (prefers-reduced-motion: reduce) {
|
|
761
|
+
.loader-face { animation: none !important; }
|
|
762
|
+
.toggle-button { transition: none !important; }
|
|
763
|
+
/* ... other animations disabled */
|
|
764
|
+
}
|
|
765
|
+
```
|
|
766
|
+
|
|
726
767
|
## License
|
|
727
768
|
|
|
728
769
|
MIT
|