USWDS - Accordion: Add color settings #5269

mejiaj · 2023-05-03T14:41:42Z

Summary

Customizable accordion colors. You can now customize the accordion button and background color settings.

Breaking change

This is not a breaking change.

Related issue

Closes #5249.

Related pull requests

Need to:

Add new settings to documentation
Add changelog entries

Documentation updates PR

uswds/uswds-site#2081

Preview link

Preview link:

Accordion (all variants)
Accordion test branch [Sandbox]
Accordion/Banner/Header test for visual regressions in icons (default/click/hover).

Problem statement

Accordion background colors weren't configurable. Users had to add their own CSS overrides to customize the look and feel of accordions.

Solution

Two new accordion color settings:

Name	Default	Type	Description
`$theme-accordion-background-color`	`default`	color	The content background color.
`$theme-accordion-button-background-color`	`base-lightest`	color	The button background.

Major changes

You can now change background colors in accordion. Accessible icons and text color are set on both default & hover state.

Note
This also affects Banner & Header, which use the accordion too.

Full list of changes

New settings. Added two new accordion color settings $theme-accordion-background-color & $theme-accordion-button-background-color.
Auto a11y text & background. Set accordion button and content color with set-text-and-bg mixin.
New function to determine which icon to use. Create is-color-dark() function to determine if color is light or dark. Used for determining icon color set. Taken from checkbox-and-radio-colors.scss.
New mixin for setting SVG icons as a background image. The mixin set-icon-from-bg checks the grade of the background color passed and sets a white/black icon. ⚠️ Note: this assumes a fallback icon exists in usa-icons-bg.

Testing and review

Visit default preview Accordion (all variants)
There should be no visual regressions
Visit uswds/uswds-sandbox at test-uswds-5269 - preview link
Accordions should be themable ― try several colors for $theme-accordion-button-background-color.
Colors must pass contrast.
Icons must pass contrast.
npm run test:sass must pass [e7d695b].
There should be no visual regressions in components that rely on accordion - Accordion/Banner/Header test.
~~Visit _usa-checkbox.scss and uncomment lines 108-113.~~
~~There should be no regressions in checkbox test story.~~

Additional tests

Click to expand to see results for previously problematic colors: yellow-20v, cyan-40, green-40. These colors were mentioned in thread below.

yellow-20v #face00

Settings

$theme-accordion-background-color: "yellow-5v",
$theme-accordion-border-color: "yellow-20v",
$theme-accordion-button-background-color: "yellow-20v",

cyan-40 #449dac

Settings

$theme-accordion-background-color: "cyan-60",
$theme-accordion-border-color: "cyan-40",
$theme-accordion-button-background-color: "cyan-40",

green-40 #7d9b4e

Settings

$theme-accordion-background-color: "green-70",
$theme-accordion-border-color: "green-40",
$theme-accordion-button-background-color: "green-40",

- Add context variable - Use set-text-and-bg mixin to set accessible text on user backgrounds - Pass new background setting to accordion button & content

mahoneycm

Variables are working like a charm!

I happened to notice one color wasn't setting the appropriate color icon, as well as a high contrast discrepancy we might want to address.

Confirmed no visual regression for accordion
Tested setting custom accordion theme colors
Text color updates and passes color contrast
Icon color updates and passes color contrast
- Found failure with yellow-20v.

mahoneycm · 2023-05-04T14:41:59Z

packages/uswds-core/src/styles/functions/color/is-input-darkmode.scss

I like this as a function! Good thinking here

packages/usa-accordion/src/styles/_usa-accordion.scss

amyleadem

I like the added functionality here! I found a couple of issues and added notes below. Let me know if you have questions!

Tests performed:

Confirmed that the content background color is configurable with $theme-accordion-background-color
Confirmed that the button background color is configurable with $theme-accordion-button-background-color
Tested background colors of each grade (0-100) and confirmed that it correctly presents text and icon colors with acceptable color contrast
- The icon does not always return the correct color. See this comment for details.
- This is probably a separate issue, but I am not able to set background colors of grade 100: both “black” and “gray-100” throw errors
Confirmed that hover states on usa-accordion__button work as expected
Confirmed that there are no visual regressions with base styles

packages/uswds-core/src/styles/functions/color/is-input-darkmode.scss

…ckground

mejiaj · 2023-05-15T20:39:48Z

packages/usa-accordion/src/styles/_usa-accordion.scss

@@ -13,14 +21,16 @@ $accordion-border: units($theme-accordion-border-width) solid
  width: 100%;
 }

-// scss-lint:disable PropertyCount


Removed scss-lint:disable PropertyCount because I wasn't seeing the error anyways.

mejiaj · 2023-05-15T20:42:42Z

packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss

-    true,
-    false
-  );
+  $input-darkmode: is-color-dark($input-bg-color);


The new function loads via @use "../../functions" as *; import on line 4.

amyleadem

Looking good so far. I like set-icon-from-bg.

I am not fully done with my review (planning on coming back tomorrow to finish up), but wanted to share these items in the meantime:

A small question about is-color-dark
Found a contrast issue in the checkbox component.

Let me know if you have questions!

packages/uswds-core/src/styles/functions/color/is-color-dark.scss

packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss

mahoneycm

This is looking great on my end! I was able to confirm the checkbox bug @amyleadem discovered but I did not find any other errors.

Flagged colors with existing issues now showing the proper icon color
mint-cool-30v which was also having the same failure is now showing the proper color icon
Unable to reproduce error with other colors
Tests pass automated testing

amyleadem

Ok, everything else is looking good except for the items flagged in yesterday's review! I had one additional question about an error message or fallback for set-icon-from-bg, but I don't think it needs to block anything.

packages/uswds-core/src/styles/mixins/helpers/set-icon-from-bg.scss

amyleadem · 2023-05-24T20:33:25Z

packages/uswds-core/src/styles/mixins/helpers/set-icon-from-bg.scss

+/// @param {type} $icon-light - Light icon variant.
+/// @output - A light or dark icon depending on the $background-color.
+@mixin set-icon-from-bg($background-color, $icon-dark, $icon-light) {
+  $is-text-dark: is-color-dark($background-color);


Just checking - is this a more appropriate name?

Suggested change

$is-text-dark: is-color-dark($background-color);

$is-background-dark: is-color-dark($background-color);

Good point, changing would add clarity. Updated in e48dacc.

amyleadem · 2023-05-24T20:37:42Z

Also, is it safe to remove the following items from the testing section of the PR description?

Visit _usa-checkbox.scss and uncomment lines 108-113.

There should be no regressions in checkbox test story.

mejiaj · 2023-05-24T20:51:22Z

Also, is it safe to remove the following items from the testing section of the PR description?

Visit _usa-checkbox.scss and uncomment lines 108-113.

There should be no regressions in checkbox test story.

@amyleadem I've added strikethrough to preserve the record, thanks for that note.

amyleadem

Approved!

mahoneycm

Happy to have this addition to the design system! 💯

Default accordion state is free of visual regression
Custom color variables correctly update accordion button, border, and content backbground colors
Text and icons are updated to offer appropriate color contrast despite the background colors including hover states
npm run test:sass passes

mejiaj · 2023-05-25T20:54:52Z

@mahoneycm @amyleadem I've removed setting icons on hover because it was causing regressions in USA Banner & Header, which rely on usa-accordion [9d73f31]. The original intent on this was to double-check interactive states passed contrast.

I've also created a new test to help avoid these types of issues in the future.

amyleadem · 2023-05-25T21:55:42Z

Confirming that I see the regression on hover for both banner and header. @mejiaj let me know if there are others I missed. Some examples of the regression:

Banner (at desktop widths)

Banner (at mobile widths)

Header (at mobile widths)

Note: the icon is white in these examples because I was testing with a color of grade 40. With default colors the icon will appear black.

With this update, the accordion button icon and text will have mismatched colors when it transitions from a "light" background to a "dark" one. As an example, this is what setting $theme-accordion-button-background-color with mint-40 looks like when it changes to mint-50 on hover:

Does it make sense to maintain the hover checks in accordion and then override the accordion background image on hover for the banner and header(ex: remove background image on .usa-banner__button[aria-expanded=false]:hover). It is not the prettiest but seems to fit the current code pattern.

Dismissing my previous review because changes have been made

This reverts commit 9d73f31.

mejiaj · 2023-05-30T14:31:23Z

@amyleadem thanks for confirming. I've added your suggestions.

Added back accordion icon setting on hover [e76526b].
Unset the icons on hover for Banner & Nav [95de5f9].

amyleadem

Looks good to me! Performed the following tests:

Confirmed that accordion button text and icon colors match on hover when $theme-accordion-button-background-color is set to a color of grade 40
Confirmed that there are no regressions in banner or header

mejiaj added 2 commits May 3, 2023 09:31

Add new background color setting

1728905

- Add context variable - Use set-text-and-bg mixin to set accessible text on user backgrounds - Pass new background setting to accordion button & content

Add darkmode function to determine icon color setting

2cfa1cb

mejiaj mentioned this pull request May 3, 2023

USWDS-Site - Accordion: Add accordion color settings uswds/uswds-site#2081

Merged

mejiaj marked this pull request as ready for review May 3, 2023 16:39

mejiaj requested review from amyleadem, thisisdano and mahoneycm May 3, 2023 16:47

mahoneycm self-assigned this May 4, 2023

mahoneycm reviewed May 4, 2023

View reviewed changes

mahoneycm removed their assignment May 4, 2023

amyleadem requested changes May 9, 2023

View reviewed changes

amyleadem reviewed May 9, 2023

View reviewed changes

packages/uswds-core/src/styles/functions/color/is-input-darkmode.scss Outdated Show resolved Hide resolved

mejiaj added 4 commits May 15, 2023 09:30

Rename is-input-darkmode → is-color-dark

9dd8217

Fix comment for accent-cool debug

47a8b80

Create SASS test for is-color-dark()

e7d695b

Set darkmode to true on colors equal or greater than 50

2829da6

mahoneycm mentioned this pull request May 15, 2023

Accordion: Create more consistent high contrast styles #5285

Closed

mejiaj added 3 commits May 15, 2023 15:21

Create set-icon-from-bg mixin

32e0bc1

Merge branch 'develop' of github.com:uswds/uswds into jm-accordion-ba…

4b85f63

…ckground

Fix formatting in date-picker & search styles

a8b2169

mejiaj requested review from amyleadem and mahoneycm May 15, 2023 20:37

Remove redundant lint enable

6f136ad

mejiaj commented May 15, 2023

View reviewed changes

amyleadem requested changes May 15, 2023

View reviewed changes

packages/uswds-core/src/styles/functions/color/is-color-dark.scss Outdated Show resolved Hide resolved

packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss Outdated Show resolved Hide resolved

mahoneycm reviewed May 16, 2023

View reviewed changes

amyleadem reviewed May 16, 2023

View reviewed changes

packages/uswds-core/src/styles/mixins/helpers/set-icon-from-bg.scss Show resolved Hide resolved

amyleadem mentioned this pull request May 16, 2023

USWDS - Accordion: Create more consistent high contrast styles #5286

Merged

4 tasks

Remove percentage from is-color-dark

722ddc5

mejiaj requested review from amyleadem and mahoneycm May 24, 2023 19:47

amyleadem reviewed May 24, 2023

View reviewed changes

Use more accurate variable name

e48dacc

mejiaj requested a review from amyleadem May 24, 2023 20:51

amyleadem previously approved these changes May 24, 2023

View reviewed changes

mahoneycm approved these changes May 25, 2023

View reviewed changes

mejiaj marked this pull request as draft May 25, 2023 17:18

mejiaj added 2 commits May 25, 2023 13:43

Remove icon setting on hover

9d73f31

Create test for accordion icon visual regressions

8999a4f

mejiaj marked this pull request as ready for review May 25, 2023 20:54

mejiaj requested review from mahoneycm and amyleadem May 25, 2023 20:55

mejiaj added 2 commits May 30, 2023 08:44

Revert "Remove icon setting on hover"

e76526b

This reverts commit 9d73f31.

Remove accordion icon effects in Banner & Nav

95de5f9

amyleadem approved these changes May 30, 2023

View reviewed changes

amyleadem mentioned this pull request May 31, 2023

Add changelog items for USWDS 3.5.0 uswds/uswds-site#2096

Merged

24 tasks

mejiaj assigned mejiaj and unassigned mejiaj Jun 5, 2023

thisisdano approved these changes Jun 5, 2023

View reviewed changes

thisisdano merged commit 100e162 into develop Jun 5, 2023
5 checks passed

amyleadem mentioned this pull request Jun 7, 2023

USWDS 3.5.0 #5323

Merged

mejiaj deleted the jm-accordion-background branch July 18, 2023 16:52

mejiaj mentioned this pull request Nov 16, 2023

USWDS- Enhancement: Global next token color preference #5618

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS - Accordion: Add color settings #5269

USWDS - Accordion: Add color settings #5269

mejiaj commented May 3, 2023 •

edited

mahoneycm left a comment

mahoneycm May 4, 2023

amyleadem left a comment •

edited

mejiaj May 15, 2023

mejiaj May 15, 2023

amyleadem left a comment

mahoneycm left a comment

amyleadem left a comment

amyleadem May 24, 2023

mejiaj May 24, 2023

amyleadem commented May 24, 2023

mejiaj commented May 24, 2023

amyleadem left a comment

mahoneycm left a comment

mejiaj commented May 25, 2023

amyleadem commented May 25, 2023 •

edited

mejiaj commented May 30, 2023

amyleadem left a comment

	$is-text-dark: is-color-dark($background-color);
	$is-background-dark: is-color-dark($background-color);

USWDS - Accordion: Add color settings #5269

USWDS - Accordion: Add color settings #5269

Conversation

mejiaj commented May 3, 2023 • edited

Summary

Breaking change

Related issue

Related pull requests

Documentation updates PR

Preview link

Problem statement

Solution

Major changes

Full list of changes

Testing and review

Additional tests

mahoneycm left a comment

Choose a reason for hiding this comment

mahoneycm May 4, 2023

Choose a reason for hiding this comment

amyleadem left a comment • edited

Choose a reason for hiding this comment

mejiaj May 15, 2023

Choose a reason for hiding this comment

mejiaj May 15, 2023

Choose a reason for hiding this comment

amyleadem left a comment

Choose a reason for hiding this comment

mahoneycm left a comment

Choose a reason for hiding this comment

amyleadem left a comment

Choose a reason for hiding this comment

amyleadem May 24, 2023

Choose a reason for hiding this comment

mejiaj May 24, 2023

Choose a reason for hiding this comment

amyleadem commented May 24, 2023

mejiaj commented May 24, 2023

amyleadem left a comment

Choose a reason for hiding this comment

mahoneycm left a comment

Choose a reason for hiding this comment

mejiaj commented May 25, 2023

amyleadem commented May 25, 2023 • edited

mejiaj commented May 30, 2023

amyleadem left a comment

Choose a reason for hiding this comment

mejiaj commented May 3, 2023 •

edited

amyleadem left a comment •

edited

amyleadem commented May 25, 2023 •

edited