Values Overview
Values are predefined datasets of key–value pairs used by Shilp CSS to organize commonly used data such as colors, spacing, time, and numbers.
These datasets themselves are not used directly. Instead, they act as the source data used to build the theme system.
shilpConfig.theme organizes and exposes this data so that:
shilpConfig.propertiescan reference it- Inline theme function can reference it
In simple words:
- Values → raw datasets
- Theme → organizes those datasets
- Inline Theme Function → use values directly
- Properties → reference the theme using
themeKey
To understand how values are processed and resolved, see Values Config.
Available Values Datasets
This section lists all built-in values datasets shipped with Shilp CSS.
Each dataset has its own page that documents the dataset structure and usage.
| Dataset | Description | Documentation |
|---|---|---|
| Angles | Angle values for rotation, skew, and other transform operations. | Angles Dataset |
| Blend | Blend mode values for background and mix blend mode, compositing. | Blend Dataset |
| Border | Border property values for styling borders. | Border Dataset |
| Colors | Color value tokens for consistent color theming. | Colors Dataset |
| Filter | Filter effect values for visual effects. | Filter Dataset |
| Flex-Grid | Layout values for flexbox and CSS grid systems. | Flex-Grid Dataset |
| Flow | Bezier-curvers for animation and transition properties. | Flow Dataset |
| Global Values | Global CSS values used across all properties. | Global Values Dataset |
| Numbers | Numeric value tokens for dimensions and quantities. | Numbers Dataset |
| Spacing | Spacing value tokens for padding, margin and other properties. | Spacing Dataset |
| Time | Time value tokens for animation and transition timing. | Time Dataset |