Update Saas and Vite to fix deprecation warnings

This commit updates Dart Sass to version 1.79.4 to address deprecation
warnings. It also updates Vite to 5.4.x to be able to use the modern
Sass compiler.

Changes:

- Update `saas` to latest
- Update `vite` from 5.3.x to 5.4.x
- Replace `lighten` and `darken` with `color.adjust` due
  to deprecation.
- Set Vite to use the modern compiler instead of the deprecated legacy
  one
- Pin `sass` to patch versions to prevent unexpected deprecations using
  tilde (~) for in package.json.

package.json

@@ -75,12 +75,12 @@
     "remark-lint-no-dead-urls": "^2.0.0",
     "remark-preset-lint-consistent": "^6.0.0",
     "remark-validate-links": "^13.0.1",
-    "sass": "^1.77.8",
+    "sass": "~1.79.4",
     "start-server-and-test": "^2.0.4",
     "terser": "^5.31.3",
     "tslib": "^2.6.3",
     "typescript": "~5.5.4",
-    "vite": "^5.3.4",
+    "vite": "^5.4.8",
     "vitest": "^2.0.3",
     "vue-tsc": "^2.0.26",
     "yaml-lint": "^1.7.0"

src/presentation/assets/styles/_colors.scss

@@ -6,19 +6,20 @@
         - Darker than default: Shades are named as `color-{name}-dark`, `color-{name}-darker`, or `color-{name}-darkest`.
         - Lighter than default: Tints are named as `color-{name}-light`, `color-{name}-lighter`, or `color-{name}-lightest`.
 */
+@use 'sass:color';
 
 // --- Primary | The color displayed most frequently across screens and components
 $color-primary              : #3a65ab;
-$color-primary-light        : lighten($color-primary, 30%);
-$color-primary-dark         : darken($color-primary, 18%);
-$color-primary-darker       : darken($color-primary, 32%);
-$color-primary-darkest      : darken($color-primary, 44%);
+$color-primary-light        : color.adjust($color-primary, $lightness: 30%);
+$color-primary-dark         : color.adjust($color-primary, $lightness: -18%);
+$color-primary-darker       : color.adjust($color-primary, $lightness: -32%);
+$color-primary-darkest      : color.adjust($color-primary, $lightness: -44%);
 // Text/iconography color that is usable on top of primary color
 $color-on-primary           : #e4f1fe;
 
 // --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
 $color-secondary            : #00D1AD;
-$color-secondary-light      : lighten($color-secondary, 48%);
+$color-secondary-light      : color.adjust($color-secondary, $lightness: 48%);
 // Text/iconography color that is usable on top of secondary color
 $color-on-secondary         : #005051;
 

vite.config.ts

@@ -39,6 +39,15 @@ export function createVueConfig(options?: {
     server: {
       port: 3169,
     },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+          // Vite defaults compiler to 'legacy', see https://vite.dev/config/shared-options#css-preprocessoroptions
+          api: 'modern-compiler',
+        },
+      },
+    },
     test: {
       globals: true,
       environment: 'jsdom',