Use new @property annotation for custom properties

[janivo]

Task: Apply New @property API for Custom CSS Properties

Description

The new @property API for custom CSS properties allows for better type definitions, default values, and inheritance handling. We should update our custom CSS properties to use this new syntax for improved debugging and browser support.

To-Do

• Review all custom CSS properties currently in use within the project.
• Identify which custom properties can benefit from the new @property API.
• Update the identified custom properties to use the new @property syntax.

Acceptance Criteria

• Custom CSS properties are updated to use the @property API where applicable.
• The updated properties function correctly with the new syntax.
• Type validation, inheritance, and default values are properly applied as per the new API.

Example Implementation

@property --color {
  syntax: '<color>';
  inherits: true;
  initial-value: #586de7; 
}

@property --size {
  syntax: '<length>';
  inherits: true;
  initial-value: 20px; 
}

@property --cols {
  syntax: '<integer>';
  inherits: true;
  initial-value: 12; 
}

Why This is a Good Idea

• Type Safety: The @Property API allows for typed CSS variables, reducing the risk of errors and improving the debugging experience.
• Default Values: It provides a straightforward way to set default values for custom properties.
• Maintainability: Using the @Property API can make CSS code more maintainable and self-documenting.

Additional Resources

MDN Documentation on @property