Styling user interface elements is an essential task for frontend developers. Users of modern applications expect the interface design to be harmonious and simple. It is also desirable for the application to be customizable, so that colors, fonts, border-radius values, and other visual aspects can be easily adjusted to the user’s preferences. Achieving these goals requires writing a large number of CSS classes. Developers sometimes end up creating unnecessary or repetitive CSS rules, which increases complexity and reduces maintainability.
PrimeNG separates styling from components using themes. PrimeNG allows us to use pre-made themes or develop our own themes.
A theme consists of two parts:
– Base – contains style rules with CSS variables as placeholders
– Preset – is a set of design tokens that populates the base by mapping tokens to CSS variables
The built-in presets offered by PrimeNG are Aura, Material, Lara, and Nora.The foundation of the styled-mode architecture is design tokens.
Design tokens are divided into three levels:
– primitive
– semantic
– component
Primitive tokens have no context. A good example of primitive tokens is color palettes (e.g., blue-50 to blue-900). Primitive tokens are used as the basis for semantic tokens. Based on the names of semantic tokens, we can guess where they are used. An example of a semantic token is primary.color. A semantic token can be mapped to a primitive or another semantic token. A special token group is colorScheme, which allows defining token values based on the active color scheme (e.g., different values for dark mode). Component tokens are isolated by component. They are used to customize a specific component, and an example of a component token is button.background, which maps to a semantic token.
button.background → primary.color → green.500
You can read more about this at: https://primeng.org/theming/styled
