Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reference "disabled-light" color by token name in File Input styles #3762

Merged
merged 1 commit into from Oct 14, 2020

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Oct 13, 2020

Description

This pull request seeks to resolve an error which can occur when assigning a non-token value for the $theme-color-disabled-light variable, as described in the USWDS v2.4.0 release notes.

Now, teams can add non-token colors to theme color settings like $theme-color-primary: #f00. This new non-token value of 'primary' will apply anywhere the 'primary' token is used: functions, mixins, settings, and utilities.

If a developer assigns the variable value...

$theme-color-disabled-light: #f00;

... an error occurs during build:

Error in plugin "gulp-sass"
Message:
    node_modules/uswds/dist/scss/core/_functions.scss
Error: Only use quoted color tokens in USWDS functions and mixins. See v2.designsystem.digital.gov/style-tokens/color for more information.
        on line 130 of node_modules/uswds/dist/scss/core/_functions.scss, in function `smart-quote`
        from line 924 of node_modules/uswds/dist/scss/core/_functions.scss, in function `color`
        from line 291 of node_modules/uswds/dist/scss/core/_variables.scss
        from line 28 of node_modules/uswds/dist/scss/uswds.scss
        from line 11 of src/scss/styles.scss
>>     @error 'Only use quoted color tokens in USWDS functions and mixins. '

   ----^

Additional information

Exploring the underlying color function source, $value is only allowed to be passed as a color value in combination with the set-theme flag, as is done in the _variables.scss initialization file. By referencing this variable directly without accompanying flags, the build will fail.

To allow for theme overrides to take effect, it would seem the most obvious fix is to pass the token name, rather than to reference the variable directly. It appears this is the only file in the repository outside _variables.scss which calls the color function with a $theme-color--prefixed variable.

Originally observed at: 18F/identity-design-system#159

Copy link
Member

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this change and the clear and logical pull request

@thisisdano thisisdano merged commit 06dc3fa into uswds:develop Oct 14, 2020
@aduth aduth deleted the file-input-color-token branch October 14, 2020 23:37
@thisisdano thisisdano mentioned this pull request Dec 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants