One thing that I haven’t fully wrapped my head around - and that I saw pop up in the live stream - is the use of the Base styling.
Here’s an example scenario:
Create a new card component
Add some dark styling to the card
Realize later that you want to have both a Light and Dark style. So you create the two styles.
In this scenario, do you only want to add styling to the Light style, and leave your Dark style blank since it’s inheriting the base?
Edit: It makes sense when I write it out. At first it felt like there was a mental disconnect, mostly because if you style a component before adding additional styles, you need to get used to the fact that one of those styles will merely be a placeholder unless you rework things.
The principal reason we have the base style is specifically meant to give you the possibility to style your different style presets without having to cancel the base styles every time you create a new style. Also, a base style will give your block/component the necessary starting points that you might not want to recreate on every style preset.
As an example:
Imagine you have a Button component with multiple style presets:
Your Style 1 will be your main/principal button available for use globally on your website.
It is important to understand that whenever you add the Button component, you want the principal style preset to be applied by default.
This means that it might have a specific background colour/text colour/border/different padding because it is the most important.
Your Style 2 is your secondary button, and has a transparent background.
If there was no base style, I’d have to specifically remove the different properties that were applied by Style 1, making it a lot harder to maintain and always having the danger of overwriting different style presets properties.
Why not simply set Style 1 as the base then? → No one wants the ugly duckling to be applied by default (Button component for example).
Hope that clears things up a little. Please feel free to let me know if there’s anything I’m missing here.