Component variants
So i 'm trying to figure out what is the best and easiest way to maintain a component with variants ? So for example i want to create a button component with variant options (primary , secondary , ghost , . . . ) i get it to work with creating classes and then applying different styles to those classes + styling pseudo classes attached to each variant class . But now i was trying it out with style variables and i got this to work as well . With style variables i do not need to use classes anymore but i just want to know what 's the agreed upon way of doing it ? Problem with style variables is that i can not use my theme color variables . So if i ever want to update my primary colors i am forced to go update every style variable i ever used that hex code in . If i could get my theme color variables to work with the style variables that would 'nt be a problem anymore . Unless style variables is the wrong way of creating variants and i should stick with classes ? ? ? ✅1Whatever works for you You 're not limited to using hexcodes in style variables , you can reference your theme styles just like any other CSS variable . We 're also using a color attribute so that you 'd be able to change the color of the component . Especially useful for setting colors for different states (e .g . , active , hover ) with a single attribute . For example , bg -color would be var ( - -success -1 ) and hover could be referencing var ( - -success -2 ) . It 's a native build Just clarifying In case you 're not using Spark Core though , I highly recommend you do . Implementing a11y , keyboard management , floating -ui , etc yourself is unnecessary
.jpeg/public)