chore: Update sass and change colour syntax (#8894)

## Description
Projects using newer versions of sass which have deprecated `lighten()`
will get deprecation warnings.

This updates sass, and switches to `color.adjust()`. This function is
available since dart sass 1.23.0.

Note this would increase the output CSS size, as it will output
different colour syntax, .e.g.

```
<   background-image: linear-gradient(-180deg, #fff 88%, rgb(114.9141509434, 132.7028301887, 159.3858490566) 100%);
---
>   background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
```

Closes #8876

## Requirements Checklist
- [x] Feature implemented / Bug fixed
- [ ] If necessary, more likely in a feature request than a bug fix
- [x] Change has been verified in an actual browser (Chrome, Firefox,
IE)
- [x] Has no DOM changes which impact accessiblilty or trigger warnings
(e.g. Chrome issues tab)
  - [x] Has no changes to JSDoc which cause `npm run docs:api` to error
- [ ] Reviewed by Two Core Contributors