Accessibility Conformance, Design Systems, and CSS Base Units

My mind often tries to link seemingly unrelated concepts. This happened yesterday when I read:

We have:

• A semantic issue regarding the claim that individual components can comply with WCAG. While a component can be “optimized” for accessibility, accessible experiences are created from complete web pages with components that function together.
• A desire to automate everything in a design system. Update one part and it updates everywhere. However, there’s still the issue of understanding if altering one component affects others in the system.
• Consideration of a new CSS “base” unit. The concept is to designate one element as a “base” so other elements can inherit its font-related properties, enhancing vertical rhythm among elements regardless of their closeness.

This makes me ponder:

• Could a base unit in CSS enhance component interoperability? For instance, if buttons could adjust their font size based on the component they are within, similar to container query units but without extra wrappers in the markup?
• Would this enable design system changes to propagate more seamlessly across components?
• Could properties inherited through a base element lead to better WCAG compliance when components are implemented together on a page?
• Is there any overlap with CSS @scope?

Apologies for the random thoughts, but it’s intriguing to see how these ideas might interconnect.