Unable to use custom colors for USWDS color theme settings

[dcmouyard]

USWDS added the ability to provide custom hex values for color theme settings in 2.4.0. (uswds/uswds#3258) If we add a custom hex color value to our design tokens file, however, we get a compilation error.

Example custom color setting:

color-primary-lightest: '#e6eff6'

Error message:

Message:
    node_modules/uswds/src/stylesheets/core/_functions.scss
Error: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
        on line 1331 of node_modules/uswds/src/stylesheets/core/_functions.scss, in function `color`
        from line 308 of node_modules/uswds/src/stylesheets/core/_variables.scss
        from line 14 of node_modules/uswds/src/stylesheets/packages/_required.scss
        from line 9 of source/styles.scss
        from line 7 of source/pattern-lab.scss
>>   @error '`#{$value}` is not a valid USWDS color token. '

   --^

Details:
    status: 1
    file: /app/node_modules/uswds/src/stylesheets/core/_functions.scss
    line: 1331
    column: 3
    formatted: Error: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
        on line 1331 of node_modules/uswds/src/stylesheets/core/_functions.scss, in function `color`
        from line 308 of node_modules/uswds/src/stylesheets/core/_variables.scss
        from line 14 of node_modules/uswds/src/stylesheets/packages/_required.scss
        from line 9 of source/styles.scss
        from line 7 of source/pattern-lab.scss
>>   @error '`#{$value}` is not a valid USWDS color token. '

   --^

    messageFormatted: node_modules/uswds/src/stylesheets/core/_functions.scss
Error: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
        on line 1331 of node_modules/uswds/src/stylesheets/core/_functions.scss, in function `color`
        from line 308 of node_modules/uswds/src/stylesheets/core/_variables.scss
        from line 14 of node_modules/uswds/src/stylesheets/packages/_required.scss
        from line 9 of source/styles.scss
        from line 7 of source/pattern-lab.scss
>>   @error '`#{$value}` is not a valid USWDS color token. '

   --^

    messageOriginal: `#e6eff6` is not a valid USWDS color token. See designsystem.digital.gov/design-tokens/color for more information.
    relativePath: node_modules/uswds/src/stylesheets/core/_functions.scss
    domainEmitter: [object Object]
    domainThrown: false

[dcmouyard]

Potential fix might include using color($variable, set-theme) in our design token file.