Variable Groups

Variable Collections and Groups out-of-the-box in S2 Framework:

📂 Theme

Variable Groups	Description
Colors *	Contains essential colors for selection throughout the project. If you have more colors, you are recommanded to add them here.
Colors - Special	Contains colors for specific purposes, particularly those that maintain a consistent appearance in both light and dark modes.
S2	Colors for the style guide only.

📂 Palettes

Variable Groups	Description
Primary	The palette of Primary colors ranges from shades 50 to 950, complemented by three foreground colors (on300, on500, on700) and a subtle color.
Secondary	The palette of Secondary colors.
Accent	The palette of Accent colors.
Neutral *	The palette of Neutral (grayscale) colors.

📂 Sizes

Variable Groups	Description
Container	Width and padding values for containers.
Spacing	Values for layout spacing.
Radius	Radius values.
Icon	For icon sizes.
Button	For sizes (heights) of buttons.
Line	For lines or borders.
Gap	For gap heights and widths.
Main Nav	Grouping variables specifically for the main navigation.
Outline	For outline and offset values of outline.
Grid	Grid system's gutter value and number of columns.

📂 Text

Variable Groups	Description
Font Family	For global font selection.
Font Size	For key font size variations.
List Spacing	Spacing of lists.
Richtext Spacing	Spacing for Rich Text elements.
Other	Other typography related values.

While you can add more variables and edit the colors freely, it is not recommended that you remove or rename the existing "Colors" and "Neutral" variables.