This is my take on using CSS variables to create versatile styling for web components. It uses three types of classes:
-
file-input: a component class that defines the basic structure and functionality of a file input element. -
*-var: a trait class that provides variables with optional defaults along with necessary modifications for the css properties, such as colors, fonts, borders, etc. -
primary, accent, thick ...: modifier classes that change the values of the variables provided by the trait class, allowing for different variations of the component