[discovery] Ensure generated CSS utility classes from style-dictionary use CSS variables instead of resolved values

[adamstankiewicz]

Description

Currently, the style-dictionary config generates a utility-classes.css file. This file contains many CSS utility classes but use hardcoded (i.e., resolved) values rather than referencing an associated CSS variable.

Example:

/* utility-classes.css */
.bg-dark {
  background-color: #273F2FFF !important;
}

/* variables.css */
--pgn-color-dark-base: #273F2FFF;

As is, .bg-dark and var(--pgn-color-dark-base) are essentially the same. If, however, the var(--pgn-color-dark-base) CSS variable is changed at runtime (e.g., manually overridden in the application instead of changing the theme tokens), it'll update styles using the CSS variable but any usage of the .bg-dark utility class would remain the original color, not the custom overridden one, when before these color values represented the same thing.

Acceptance Criteria

• Ensure generated CSS utility classes make use of CSS variables as opposed to their resolved values.