There are sound reasons to use variables, maybe let’s not get into them here. It’s a good point though to not argue about the nature of CSS. I should have phrased this better: it’s not about the nature of it, it’s about best practices for styling a component-based framework. And I completely agree that buttons are another good example of how these can’t be properly applied.
Looking at the bigger picture, there’s been a concerted effort to modernize the JavaScript side of the frontend framework. And I think it’s been a resounding success. Working with clean standards and well-structured classes is genuinely enjoyable now. For me as a designer, it also opened up opportunities to build new frontend components easier and more efficiently.
However, I can’t shake the feeling that there’s no similar commitment to bringing the design system up to the same standards. While adding CSS variables for every aspect is certainly more performant and cleaner than the current approach, it still feels like avoiding the deeper architectural issues: a codebase full of overly specific declarations and no clear component-scoped styles. This feels like an “easier” solution that avoids the harder problem: fully aligning the styling architecture with the framework’s modular design.
I understand that this would incur a lot of work and backward compatibility issues. But the team has tackled these challenges successfully on the JavaScript side. If JavaScript continues to receive significantly more resources than styles, that disparity will show up in the final designs. And users will feel the difference, even if they can’t articulate why.
I’d just love to see the same modernization energy applied to the CSS architecture because I’m convinced the long-term benefits for both developer and user experience would be transformative.