feat(css): Generate stateful utility classes

While I was reviewing a Merge Request in the status page project, where we are trying to follow a utility-first approach, I noticed that we couldn’t use utility classes for states like hover (see https://gitlab.com/gitlab-org/status-page/-/blob/master/src/assets/styles/components/header.scss).

To fulfill this requirement, this Merge Request improves the generate_utilities tool to interpret SCSS named parameters in the utility mixins as flags that indicate whether a stateful utility class should be generated. For example:

@mixin gl-text-white-light($hover: true) {
  color: $white-light;
}

$hover: true indicates that a utility class that targets the selector hover:gl-text-white-light:hover should be generated. generate_utilities will generate the following output:

.hover-gl-rounded-base:hover {
  @include gl-rounded-base;
}

This improvement supports adding several stateful states to a utility mixin:

@mixin gl-text-white-light($hover: true, $active: true, $focus: true) {
  color: $white-light;
}

// Output
.hover-gl-rounded-base:hover {
  @include gl-rounded-base;
}

.active-gl-rounded-base:active {
  @include gl-rounded-base;
}

.focus-gl-rounded-base:focus {
  @include gl-rounded-base;
}