Fix dart scss warnings

[rmccar]

What is the context of this PR?

Fixes: ONSDESYS-675

Fixes css deprecation warnings buy restructuring our css and using the new namespaces in dart sass.

Have also silenced the legacy api warning and added a comment for that. This is due to the fact that there is no newer version of gulp-dart-sass which is where the warning is coming from.

How to review this PR

• Spin up DS locally and see that the warnings in the CLI log are gone
• Test all components that have their css restructured to make sure they still work as expected
• VR tests pass with no changes

Checklist

This needs to be completed by the person raising the PR.

• I have selected the correct Assignee
• I have linked the correct Issue

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	5093d34
🔍 Latest deploy log	https://app.netlify.com/projects/ons-design-system-preview/deploys/68df90bc2ba4e4000845d64a
😎 Deploy Preview	https://deploy-preview-3746--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	d46672b
🔍 Latest deploy log	https://app.netlify.com/projects/ons-design-system-preview/deploys/68dfd0fb24857b0008554867
😎 Deploy Preview	https://deploy-preview-3746--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
design-system	Ready	Preview, Comment	May 8, 2026 10:32am