Revise color functions and add Sass testing #3966
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…get-color-token-assignment()
…eliable output - Use a simpler technique to find "next grade" - Output a custom grade in the midpoint of USWDS grades for any grade that falls between (ie 15 (between 10 and 20) or 2.5 (between 0 and 5))
- Use alpha instead of opacity because of function collision - Throw an error if not a valid token
- remove get-custom-color-split(), redundant with decompose-color-token() - rename "custom-color" functions to "color-token" - Add tests for token checking functions
- Use context in Identifier - Don't add a custom fallback in identifier calculator
mejiaj
reviewed
Feb 2, 2021
Advertisement
There was a problem hiding this comment.
Overall looks good. I think users will be happy this takes the preferred link color.
Testing:
$theme-color-base-lightest: #f2f2f2;
$theme-color-base-lighter: #dcdcdc;
$theme-color-base: #707070;
$theme-color-base-dark: #535353;
$theme-color-base-darkest: #141414;
$theme-color-base-ink: #141414;WARNING: [Alert (emergency)] Neither the specified preferred color token (`ink`) nor the fallback color token (`base-lighter`) have AA contrast on a `emergency` background. Using `ink`. Please check your source code and project settings.
src/stylesheets/core/_functions.scss 1895:5 get-color-token-from-bg()
src/stylesheets/core/_functions.scss 1960:27 get-link-tokens-from-bg()
src/stylesheets/core/mixins/_set-link-from-bg.scss 8:17 set-link-from-bg()
src/stylesheets/core/mixins/_alert-status-styles.scss 30:7 alert-status-styles()
src/stylesheets/components/_alerts.scss 83:5 @import
src/stylesheets/packages/_uswds-components.scss 25:9 @import
src/stylesheets/uswds.scss 13:9 root stylesheet
Which is expected since we have ink as the preferred color.
$theme-color-accent-warm: #ff6839;
$theme-color-base-ink: #292a2b;WARNING: [Button] Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `accent-cool-dark` background. Using `white`. Please check your source code and project settings.
src/stylesheets/core/_functions.scss 1895:5 get-color-token-from-bg()
src/stylesheets/core/mixins/_set-text-from-bg.scss 8:28 set-text-from-bg()
src/stylesheets/core/mixins/_set-text-from-bg.scss 25:3 set-text-and-bg()
src/stylesheets/elements/_buttons.scss 63:5 @import
src/stylesheets/packages/_uswds-components.scss 10:9 @import
src/stylesheets/uswds.scss 13:9 root stylesheet
WARNING: [Button] Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `accent-warm` background. Using `white`. Please check your source code and project settings.
src/stylesheets/core/_functions.scss 1895:5 get-color-token-from-bg()
src/stylesheets/core/mixins/_set-text-from-bg.scss 8:28 set-text-from-bg()
src/stylesheets/core/mixins/_set-text-from-bg.scss 25:3 set-text-and-bg()
src/stylesheets/elements/_buttons.scss 73:3 @import
src/stylesheets/packages/_uswds-components.scss 10:9 @import
src/stylesheets/uswds.scss 13:9 root stylesheet
WARNING: [Button] Neither the specified preferred color token (`white`) nor the fallback color token (`ink`) have AA contrast on a `accent-warm` background. Using `white`. Please check your source code and project settings.
src/stylesheets/core/_functions.scss 1895:5 get-color-token-from-bg()
src/stylesheets/core/mixins/_set-text-from-bg.scss 8:28 set-text-from-bg()
src/stylesheets/core/mixins/_set-text-from-bg.scss 25:3 set-text-and-bg()
src/stylesheets/elements/_buttons.scss 76:5 @import
src/stylesheets/packages/_uswds-components.scss 10:9 @import
src/stylesheets/uswds.scss 13:9 root stylesheet
Again, doesn't pass AA but goes with preferred color.
What I liked about the previous function is it fell back to the most accessible color if it didn't pass.
- Allow `default` to be passed to either preferred or fallback or both - Use reverse as preferred - Don't assign default hover unless specified with default (if default hover fails, we want to calculate a value that works)
A proxy for body background setting
|
I updated the function to pick the better of the two options if neither of them pass. So the order is
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
npm run test:sass)$contextdata to color-picker functions for clearer error messagingtransparentcolor calculationsis-accessible-magic-number(): Determines if two grades achieve a specified WCAG levelcolor-token-family(): Outputs the family of a color token or splitcolor-token-grade(): Outputs the grade (system or theme grade) of a color token or split. Note that this is different fromcalculate-grade()which will output the absolute system grade for any color.color-token-type(): Outputs the type ("system" or "theme") of a color tokencolor-token-variant(): Outputs the variant ("vivid") of a color token or splitmagic-number(): Outputs the magic number between two gradesnext-token(): Gets the next color token "darker" or "lighter" from a specified colorNew settings
$theme-body-background-color: "white"$theme-text-color: "ink"$theme-text-reverse-color: "white"$theme-alert-text-color: default$theme-alert-text-reverse-color: default$theme-alert-link-color: default$theme-alert-link-reverse-color: defaultUpdated settings
$theme-breadcrumb-background-color: "default"$theme-identifier-primary-link-color: defaultNOTE 1:
defaultmeans to use the value of the applicable text or link default.NOTE 2: The updated settings in breadcrumb mean that it will use "dark mode" if the value of
$theme-body-background-colorchanges to a dark shade.Alert includes both standard and reverse color options since different alerts may need to use one or the other. For most components, there's only a single color, which is the preferred color for all instances, which are assumed to be the same.