mosaic-class-system.md

Situation	With Base	With Variant
Text → Heading 1	“Select the Text element, then choose Heading 1 as its base style.”	“Select the Text element, then choose the Heading 1 variant.”
Paragraph → Heading 2	“To turn this into a Heading 2, open the Base dropdown and choose Heading 2.”	“To turn this into a Heading 2, open the Variant dropdown and choose Heading 2.”
Button → Link	“This button should look like a link, so we’ll switch its base styling to Link.”	“This button should behave like a link, so we’ll switch its variant to Link.”
Editing shared styles	“Click the Button base pill to edit the default Button styling shared by all matching elements.”	“Click the Button variant pill to edit the styles shared by all elements using this variant.”
Selector pill explanation	“The base pill controls the element’s starting styles before classes are added.”	“The variant pill controls the selected version of the element before classes are added.”
Class stack explanation	“The element starts with its base styling, then classes like Primary and M refine it.”	“The element starts with its variant, then classes like Primary and M refine it.”
Local override	“The local class only affects this one element, even if the base styling stays shared.”	“The local class only affects this one element, even if the variant styling stays shared.”
Global effect warning	“Be careful here: editing this base changes every element that uses the same base.”	“Be careful here: editing this variant changes every element that uses the same variant.”
Text options explanation	“Text elements can use different base styles, like Paragraph, Heading 1, or Heading 2.”	“Text elements can have variants like Paragraph, Heading 1, or Heading 2.”
Button options explanation	“A Button can use Button styling or Link styling as its base.”	“A Button can use the Button variant or the Link variant.”
Creating user-defined options later	“You could create a new base style for this element type and reuse it later.”	“You could create your own variant for this element type and reuse it later.”
Inspecting the selector list	“Here you can see the base first, followed by classes and the local class.”	“Here you can see the variant first, followed by classes and the local class.”
Explaining DOM/CSS output	“The base generates the starting selector for this element.”	“The variant generates the starting selector for this element.”
Teaching the concept	“Think of the base as the element’s starting point before additional classes are applied.”	“Think of the variant as the selected version of the element before additional classes are applied.”