Theming
Theming in Shilp CSS is not just about colors. It is about defining design tokens, that shape how your system looks and feels.
Design tokens are not decoration. They are system primitives. They define your design language.
System Primitives
| System Primitive | Description | Documentation |
|---|---|---|
| Colors | Brand & semantic colors, Color roles | Built For Theming |
| Border radius | Uses single --radius to build radius scales | Border Radius Scales |
| Font families | Composed font families with safe fallback | Font Families |
What Is Static vs Dynamic
Shilp CSS is static by design.
Static:
- Utilities
- Class names
- Token structure
- Config mapping
Dynamic:
- CSS variable values only
You always know:
- Which tokens exist
- Which utilities exist
- What the system expects
Only the values may change.
Default Styles
Shilp CSS includes opinionated default styles.
These defaults are designed to:
- Reduce boilerplate
- Keep typography consistent
- Provide sensible base theming
- You can override everything
See: Default Styles
Dynamic Values from Backend
Shilp CSS has no runtime logic.
However, dynamic values are still possible via CSS variables.
Steps:
- Predefine tokens in theme configuration
- Use them via utilities or inline theme function
- When API responds, update CSS variables on
htmland/or:host
Example:
dynamic-design-tokens.jsdocument.documentElement.style.setProperty("--primary", apiRes.colors.primary);
Important
- The variable name must exist beforehand (and with optional default value)
- Utilities are compiled statically
- Only values change at runtime
This keeps the system predictable.