USWDS - Section / Dark Background: Use consistent styling for dark background links #5567

aduth · 2023-10-18T16:00:04Z

Summary

Use consistent link styling for links in dark background content. Previously, usa-section--dark and usa-dark-background did not have consistent styling for links.

Related discussion

See related discussion in our application at GSA-TTS/identity-dev-docs#367 (comment)

Solution

Provides the complete set of link pseudo classes between usa-section--dark and usa-dark-background:

Before:

State	`usa-section--dark`	`usa-dark-background`
Initial	✅	✅
`:hover`	✅	✅
`:active`	✅	❌
`:visited`	❌	✅

After:

State	`usa-section--dark`	`usa-dark-background`
Initial	✅	✅
`:hover`	✅	✅
`:active`	✅	✅
`:visited`	✅	✅

amyleadem

Thank you for this fix! Everything looks good to me.

I tested by adding the following code to the Section - dark story and toggling the :visited element state in web inspector:

<a class="usa-link" href="http://designsystem.digital.gov">Test link</a>

Before:

After:

It would also be great to see a link added to the packages/usa-section/src/usa-section.twig file for testing, but that can be done in a follow-up PR if needed.

aduth · 2023-11-20T17:48:17Z

It would also be great to see a link added to the packages/usa-section/src/usa-section.twig file for testing, but that can be done in a follow-up PR if needed.

Sure! Not sure if you have a preference, but I adopted some content from alert stories which included a link. See 2b0bbb4.

mejiaj

Thanks for the PR and updating the story!

No issues or regressions found. Added suggestions for using the mixin to set the colors consistently.

packages/usa-dark-background/src/styles/_usa-dark-background.scss

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

mejiaj

Thanks for the PR.

Hope you don't mind, the change was so small I pushed up a commit to use the color setting mixin in 6db5629.

aduth · 2023-12-05T17:43:41Z

Hope you don't mind, the change was so small I pushed up a commit to use the color setting mixin in 6db5629.

I don't mind at all Thanks for jumping in to make those changes, and apologies for being slow to respond.

aduth · 2023-12-05T17:44:41Z

packages/usa-dark-background/src/styles/_usa-dark-background.scss

-    &:hover {
-      color: color($theme-link-reverse-hover-color);
-    }
+    @include set-link-from-bg("base-darker");


@mejiaj Out of curiosity, does switching from $theme-link-reverse-color have any impact on the effectiveness of that theme configuration? Or is that theme configuration being deprecated?

Not deprecated, the mixin uses $theme-link-color (primary) and $theme-link-reverse-color (base-lighter) by default.

mahoneycm · 2023-12-05T20:20:33Z

packages/usa-dark-background/src/styles/_usa-dark-background.scss

-    &:hover {
-      color: color($theme-link-reverse-hover-color);
-    }
+    @include set-link-from-bg("base-darker");


We could add $theme-link-reverse-color as the preferred link color for the mixin. This way it maintains the theme setting when appropriate but will resort to a fallback if need be

Suggested change

@include set-link-from-bg("base-darker");

@include set-link-from-bg("base-darker", $theme-link-reverse-color);

This results in a lighter link text than what's currently displayed

Current:

With preferred theme token:

@mahoneycm, I was unable to reproduce this. The mixin uses theme link colors by default and I was still getting base-lighter as the value (for both passing and leaving out theme link reverse color).

For clarity and consistency I've added in commit d3d7656:

A $context variable for future debugging.

Explicitly passing $theme-link-reverse-color to avoid any confusion.

mahoneycm

Lgtm! Thanks @aduth and @mejiaj !

amyleadem

Thanks for the updates @aduth and @mejiaj! Looks good to me. I had a small note about defining the active state with set-link-from-bg, but I don't think it should be a blocker because all link states are now legible.

Before (:visited state)

After (:visited state)

amyleadem · 2023-12-06T15:31:09Z

packages/usa-dark-background/src/styles/_usa-dark-background.scss

+    @include set-link-from-bg(
+      "base-darker",
+      $theme-link-reverse-color,
+      $context: $background-context
+    );


@mejiaj One small note with this approach is that set-link-from-bg sets both :hover and :active states to the $theme-link-reverse-hover-color token. This means that $theme-link-reverse-active-color is ignored here.

I think using the mixin is a reasonable approach for this PR and don't think this should be a blocker, but I am curious why set-link-from-bg doesn't distinguish an active color. Should we create a follow-up issue to explore updating the related mixins to define active states?

/* Before set-link-from-bg*/ .usa-section--dark a:hover{ color:#f0f0f0; } .usa-section--dark a:active{ color:white; } /* After set-link-from-bg*/ .usa-dark-background a:hover, .usa-dark-background a:active{ color:#f0f0f0; }

@amyleadem good find. Yes, please create an issue.

Opened #5659 for follow-up

I believe the reason why this ignores active is to allow the original link color to be lighter (since there are fewer lightening steps to account for without active).

thisisdano

Nice! Thank you!

Use consistent styling for dark background links

82a36ff

aduth mentioned this pull request Oct 18, 2023

LG-10765 dev doc layout updates GSA-TTS/identity-dev-docs#367

Merged

amyleadem added the Status: Triage label Oct 26, 2023

amyleadem requested review from amyleadem, mahoneycm and mejiaj October 26, 2023 16:08

amyleadem added the From: GSA label Nov 9, 2023

amyleadem added this to the uswds 3.7.1 milestone Nov 9, 2023

amyleadem removed the Status: Triage label Nov 9, 2023

amyleadem approved these changes Nov 17, 2023

View reviewed changes

Add sample text with link to section story content

2b0bbb4

mejiaj suggested changes Nov 22, 2023

View reviewed changes

packages/usa-dark-background/src/styles/_usa-dark-background.scss Show resolved Hide resolved

packages/usa-section/src/styles/_usa-section.scss Show resolved Hide resolved

amyleadem mentioned this pull request Dec 4, 2023

USWDS-Site: Documentation updates for release 3.7.1 uswds/uswds-site#2385

Merged

Use set-link-from-bg() mixin

6db5629

mejiaj self-requested a review December 5, 2023 15:58

mejiaj approved these changes Dec 5, 2023

View reviewed changes

mejiaj requested a review from amyleadem December 5, 2023 16:00

aduth commented Dec 5, 2023

View reviewed changes

mahoneycm reviewed Dec 5, 2023

View reviewed changes

For clarity, add context and pass link reverse color

d3d7656

mejiaj requested a review from mahoneycm December 6, 2023 15:02

mahoneycm approved these changes Dec 6, 2023

View reviewed changes

amyleadem approved these changes Dec 6, 2023

View reviewed changes

amyleadem requested a review from thisisdano December 6, 2023 16:12

amyleadem mentioned this pull request Dec 6, 2023

USWDS - Bug: set-link-from-bg mixin does not set active state #5659

Open

thisisdano approved these changes Dec 6, 2023

View reviewed changes

thisisdano merged commit e9cc7ca into uswds:develop Dec 6, 2023

amyleadem mentioned this pull request Dec 6, 2023

Draft release notes for 3.7.1 #5662

Closed

thisisdano mentioned this pull request Dec 8, 2023

USWDS 3.7.1 #5670

Merged

SherfeyInv mentioned this pull request Jun 7, 2024

[Snyk] Upgrade @uswds/uswds from 3.7.1 to 3.8.0 SherfeyInv/digitalgov.gov#4

Closed

sennhann29 mentioned this pull request Jul 26, 2024

[Snyk] Upgrade @uswds/uswds from 3.4.1 to 3.8.1 sennhann29/digitalgov.gov#4

Open

	@include set-link-from-bg("base-darker");
	@include set-link-from-bg("base-darker", $theme-link-reverse-color);

USWDS - Section / Dark Background: Use consistent styling for dark background links #5567

USWDS - Section / Dark Background: Use consistent styling for dark background links #5567

Uh oh!

Conversation

aduth commented Oct 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related discussion

Solution

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

aduth commented Nov 20, 2023

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mejiaj left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth commented Dec 5, 2023

Uh oh!

aduth Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

mejiaj Dec 6, 2023

Choose a reason for hiding this comment

Uh oh!

mahoneycm Dec 5, 2023

Choose a reason for hiding this comment

Uh oh!

mejiaj Dec 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem Dec 6, 2023

Choose a reason for hiding this comment

Uh oh!

mejiaj Dec 6, 2023

Choose a reason for hiding this comment

Uh oh!

amyleadem Dec 6, 2023

Choose a reason for hiding this comment

Uh oh!

thisisdano Dec 6, 2023

Choose a reason for hiding this comment

Uh oh!

thisisdano left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

aduth commented Oct 18, 2023 •

edited

Loading

mejiaj left a comment •

edited

Loading

mejiaj Dec 6, 2023 •

edited

Loading

amyleadem left a comment •

edited

Loading