feat: allow breakpoints to be overriden by products

[davidsauntson]

This makes overriding the breakpoint settings possible in products that use the design system. @use requires you to explicitly override variables when you import a module, rather than respecting what the global state of the @used file is. This changes ensures that the global values of the breakpoints are respected at all layers of the ITCSS triangle, allowing products to override the breakpoint variables as they wish.

The use case for this is a bit odd - in an energy app we are iframing a form into some advice content to provide a different type of journey for users. The content columns width in an advice collection page is smaller than the medium breakpoint in the design system, so mobile styles were showing for the iframed app on desktop.

Before

After

Similar to #3342

[davidrapson]

Good spot, we'll need to come back to this to try and get @use working across the board, but looks like that needs a fair bit more thought to work? (I've found the transition from @import quite hard to get my head around from the sass docs)

[davidsauntson]

Good spot, we'll need to come back to this to try and get @use working across the board, but looks like that needs a fair bit more thought to work? (I've found the transition from @import quite hard to get my head around from the sass docs)

I think where we are @useing we just need to @import instead, following the pattern here and in the other PR for the grid settings. But it's quite a big change to do it all in one go.

[davidrapson]

Thinking more about https://sass-lang.com/blog/import-is-deprecated/ and what we do in the longer term, but agree needs a bit of coordination 👍