Design System
The Luaris Framework comes with a comprehensive design system that is written using SCSS, and output into CSS variables. This allows for easy theming and customization, while also providing a consistent look and feel across all components.
Colours
The framework provides a set of predefined colour variables that every component will use, this includes a palette of primary, secondary, accent, success, danger, warning, info, light, and dark colours, as well as a range of surface colours, and then a set of modifiers for each of the main palette colours, such as hover, disabled, and "on" variants.
INFO
The "ON" variants are intended to be used for text or icons that are placed on top of the main colour, such as white text on a primary button, or black text on a light surface, and these are generated using automatic contrast calculations to ensure they meet accessibility standards.
Sizing
The design system also includes a set of size options for spacing, borders, etc that are also used across all components, these include a range of sizes from 2x to 3xl, and these can be used to ensure consistent spacing and sizing across all components.
INFO
The size options are designed to be flexible and can be used in a variety of ways, but we always default to md for all components where suitable.
Fonts & Typography
The design system includes a set of typography styles that can be used across all components, these include a range of font sizes, weights, and styles that can be used to create a consistent typographic hierarchy across all components.
Motion & Animation
The design system also includes a set of motion and animation guidelines that can be used across all components, these include recommendations for animation duration, easing, and types of animations that can be used to create a consistent motion language across all components.