CSS Variable System (beyond just color) #221

Problem or motivation

It can become very messy (and inefficient) to try to manage all styles via classes. With Webflow's recent price increase and the community being very unsatisfied with them, many members will be looking for alternatives to Webflow such as Ycode, but easily managing style variables will be extremely important to them. Plus, Figma relies heavily on variables so it is difficult to go from Figma designs that include variables to a website builder that does not allow for them.

Proposed solution

A central feature for managing and creating style variables would be a massive boost in efficiency and organization of projects. Just like Webflow and Figma, variables could include things like:

• Color (already in Ycode, thank you!)
• Font Family
• REM/EM/PX values (for margin, padding, border width, border radius, width, height, shadow sizing, font size, line height, etc)

The variables system would also include:

• Variable collections (just like Figma/Webflow, ability to create multiple collections of variables for organization reasons and have the ability to create custom "modes" for each collection)
• Variable collection modes (just like Figma/Webflow, the user can create "modes" for each collection of variables. Things like "theme" to control light/dark/color modes, "breakpoint" to auto-adjust text sizing across defined breakpoints for each mode (Webflow has this feature and it is very useful), etc)
• Ability to set one variable's value to another variables value. This unlocks the ability to have primitive variables that power semantic ones
• Ability to group variables within a collection. This helps organize things such as "background colors" and "text colors" within a "Color Themes" collection

Alternatives considered

Nice to haves later on:

• ability write CSS formulas within variables that can take in values from other variables and manipulate them

Area

Visual Editor

Additional context