USWDS-Site: Fix token pages from audit (Part 2) #2377
Conversation
There was a problem hiding this comment.
Note
These entries could be condensed into one if that's what we prefer.
| - token: emergency | ||
| default: "red-warm-60v" | ||
| - token: emergency-dark | ||
| default: "red-warm-80" |
There was a problem hiding this comment.
Note
Removed these from theme colors because they are already listed in state colors
- Tweak content in customize-color-token.html
There was a problem hiding this comment.
Changes are logical improve documentation. All green changes in the doc are present and match what is found in USWDS.
I left a comment about the color mixin palettes for further investigation but changes lgtm!
Testing checklist
- Theme colors page
- Update
_uswds_theme_color.scssreference to settings config -
secondary-lightervalue should bered-cool-10 - Remove emergency tokens from the colors page
- I don’t see
$theme-border-colorin USWDS
- Update
- State colors page
- Getting error
warning-darkis not a valid USWDS token - Update
_uswds_theme_color.scssreference to settings config
- Getting error
- System colors page
- Not showing
-90vitems on site -
-red-50vNot working with color utilities. System color palette not being included in the utility map.
- Not showing
- Changelogs look good
| @@ -294,7 +280,7 @@ Your context and coding style determine how you access USWDS color tokens in cod | |||
| </td> | |||
| <td data-title="Example"> | |||
| <span> | |||
| .bg-<code>red-50v</code> | |||
| .bg-<code>gray-30</code> | |||
There was a problem hiding this comment.
Color utility palettes
It looks like the color and background utility color palettes aren't importing the system colors to use in color- or bg- mixins.
From what I can tell it's only using $palette-color-default
"palette-color-default":
map-collect(
$tokens-color-basic,
$tokens-color-grayscale,
$tokens-color-theme,
$tokens-color-state
),But the background color utilty does reference red-50v as an example value.
Should we create an issue to investigate this further and see if this change was intentional?
There was a problem hiding this comment.
Note
The system does not make the listed utility classes for red-50v. I have replaced these examples with gray-30, which is universally applied.
| $theme-color-warning: <code>'red-50v'</code> | ||
| </span> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row" data-title="Context"> | ||
| <span class="font-lang-3"> | ||
| <span>mixin</span><br/> | ||
| <span class="text-normal">text-decoration-color</span> | ||
| </span> | ||
| </th> | ||
| <td data-title="Description"> | ||
| <span> | ||
| @include u-underline(<a href="{{ site.baseurl }}/design-tokens/color/state-tokens/" class="token">color</a>) | ||
| </span> | ||
| </td> | ||
| <td data-title="Example"> | ||
| <span> | ||
| @include u-underline(<code>'red-50v'</code>)<br/> |
There was a problem hiding this comment.
Note
Removed this row because it was a duplicate of a previous row
- This should resolve an issue with pages.cloud.gov build
This comment was marked as resolved.
This comment was marked as resolved.
- This should resolve snyk error
|
@mejiaj I resolved the snyk errors 👍. All I see is our standard pa11y crashes atm. |
| type: token | ||
| changelogURL: | ||
| items: | ||
| - date: 2024-04-02 |
There was a problem hiding this comment.
Important
Need to update the changelog dates before merge
|
Merging over circle crashes |
Summary
Updated component pages according to the findings reported in the code/developer content audit (Google Docs 🔒)
Note
To keep PR reviews manageable, this PR updates only the theme, state, and system color tokens pages. All other token page updates will be addressed in other PRs.
Important
We should confirm the changelog dates before merging.
Related issue
Related to #2042
Preview link
Preview link:
Solution
Update code according to the findings in code/developer content audit (Google Docs 🔒).
Please note that all items highlighted yellow in the spreadsheet will be investigated/discussed in the last phase of the component page fixes.
Testing and review