Migrate deprecated Sass color functions

What does this MR do and why?

This change updates deprecated Sass color functions. I used the sass-migrator color utility to help me, although some migrations didn't work due to our import structure.

Example migration:

sass-migrator color app/assets/stylesheets/**/*.scss --load-path /Users/miguelrincon/workspace/gdk/gitlab/node_modules/@gitlab/ui/src/vendor --load-path /Users/miguelrincon/workspace/gdk/gitlab/node_modules/ 

Does it work?

I sampled a few CSS output to ensure the resulting colors were the same.

All color were preserved to all decimal points exactly

// https://gdk.test:3038/vite-dev/stylesheets/styles.application.scss

.dropdown-title-button {
  padding: 0;
  color: #bfbfbf;
  border: 0;
  background: none;
  outline: 0;
}
.dropdown-title-button:hover {
  color: rgb(152.75, 152.75, 152.75);
}

// ...
@keyframes animate-tanuki-base {
  0%, 50% {
    fill: #e24329;
  }
  25% {
    fill: rgb(241.2160493827, 165.6419753086, 153.2839506173);
  }
}
.tanuki-logo.animate .right-cheek {
  animation-name: animate-tanuki-right-cheek;
}
@keyframes animate-tanuki-right-cheek {
  25%, 75% {
    fill: #fc6d26;
  }
  50% {
    fill: rgb(253.7386363636, 193.6136363636, 163.7613636364);
  }
}
.tanuki-logo.animate .chin {
  animation-name: animate-tanuki-chin;
}
@keyframes animate-tanuki-chin {
  50%, 100% {
    fill: #fca326;
  }
  75% {
    fill: rgb(253.7386363636, 216.3181818182, 163.7613636364);
  }
}
.tanuki-logo.animate .left-cheek {
  animation-name: animate-tanuki-left-cheek;
}
@keyframes animate-tanuki-left-cheek {
  25%, 75% {
    fill: #fc6d26;
  }
  100% {
    fill: rgb(253.7386363636, 193.6136363636, 163.7613636364);
  }
}

// https://gdk.test:3038/vite-dev/stylesheets/styles.highlight/themes/white.scss

.code.white .line-links:hover, .code.white .line-links:focus-within,
.code.code-syntax-highlight-theme .line-links:hover,
.code.code-syntax-highlight-theme .line-links:focus-within {
  background-color: rgb(208.3142857143, 208.3142857143, 215.6857142857);
}

// https://gdk.test:3038/vite-dev/stylesheets/styles.highlight/themes/dark.scss

.code.dark .line-links:hover, .code.dark .line-links:focus-within,
.code.code-syntax-highlight-theme .line-links:hover,
.code.code-syntax-highlight-theme .line-links:focus-within {
  background-color: rgb(5.1451612903, 5.5, 5.8548387097);
}

Why now?

While working with vite, we see many deprecation warnings that make vite logs hard to follow. I already solved a few warnings at: !198887 (merged).

See: #557045 (closed)

References

• https://sass-lang.com/documentation/breaking-changes/color-functions/

Screenshots or screen recordings

NA -- No appearance changes are expected.

How to set up and validate locally

Run the gdk locally, and check no colors are changed.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.