Features
Section titled “Features”Toky CSS focuses on solving common frontend problems with modern CSS while keeping the framework lightweight and easy to customize.
| Traditional Approach | Toky CSS |
|---|---|
| Create color palettes manually | Automatic OKLCH-powered color scales |
| Guess tint and shade values | Generated color scales from a single color token |
| Write separate light and dark theme styles | Theme tokens adapt automatically |
| Manage typography breakpoints with media queries | Fluid typography built into the token system |
| Build spacing scales for every project | Consistent spacing tokens included |
| Create layout gutters with custom margin and padding patterns | Flexible layout system with built-in spacing foundations |
| Style buttons, forms, tables, and navigation from scratch | Sensible HTML defaults included |
| Add JavaScript for basic theming support | Automatic system theme support using CSS |
| Maintain multiple design values across components | Centralized CSS variable tokens |
| Depend heavily on utility classes | Token-first styling with utilities when needed |
Included
Section titled “Included”| Feature | Description |
|---|---|
| CSS Variable Tokens | Centralized design decisions through reusable tokens |
| Automatic Color Scales | Generated tints, shades, and alpha variants |
| Theme System | Built-in light and dark mode foundations |
| Fluid Typography | Responsive type without media queries |
| Spacing System | Consistent spacing and sizing tokens |
| Layout Foundations | Flexible layouts for simple and complex interfaces |
| Sensible HTML Defaults | Improved styling for common elements |
| Semantic Color Tokens | Success, warning, error, and info systems |
| Focus States | Accessible focus ring tokens |
| Utility Classes | Small utility layer for explicit control |
| Modern CSS Features | Uses modern browser capabilities where appropriate |
Every feature is designed to work together through the token system rather than as isolated utilities or components.