[Discussion] use CSS variables for our design system components

[bigopon]

Context

Currently, for our design system components, we are using props to handle styling override, extension and configuration. Consider using CSS variables instead as they work well across shadow roots offer greater powers/perf, as well as learning opportunity for our devs.

#	Props	CSS variables
pros	TBU	Can be extended/overridden at any level in the DOM, with default values Mordern * better performance
cons	Not easy to override/extend a style inside shadow root, it will need to be exposed & configured via a prop & JavaScript	Requires setup inside components & can be override from outside using CSS variables

[brandonseydel]

These need to be used in conjunction with eachother imo. Similar to https://ionicframework.com/docs/api/chip