[WIP] Polaris tokens base/variant themes

[aaronccasanova]

This PR explores a base/variant theme architecture for Polaris tokens where the base theme is the foundation for any number of variant themes. Variant themes have two primary constraints in that they can only extend the base theme and they are the only theme exposed to consumers.

One advantage of this pattern is that system changes can be made more predictably by flattening the relationship between themes (without needing to consider deeply inherited themes). For example:

❌ With deeply inherited themes

flowchart TD
    A[Base Theme]
    A --> B[Light Theme]
    B --> C[Light High Contrast Theme]
    A --> D[Dark Theme]
    D --> E[Dark High Contrast Theme]
    A --> F[Dim Theme]
    A --> G[etc...]

Loading

✅ With base/variant themes

flowchart TD
    A[Base Theme]
    A --> B[Light Theme]
    A --> C[Light High Contrast Theme]
    A --> D[Dark Theme]
    A --> E[Dark High Contrast Theme]
    A --> F[Dim Theme]
    A --> G[etc...]

Loading

Note: @shopify/polaris-tokens continues to generate a single source of truth stylesheet but separates base and variant theme custom properties into dedicated selectors to reduce duplication:

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.