Skip to content

USWDS: Button - Forced colors outline #5147

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.

Sign up for GitHub

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

Merged
merged 25 commits into from
May 10, 2023
Merged

USWDS: Button - Forced colors outline #5147

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
6c2da72
Create forced-color-outline mixin
mahoneycm Feb 13, 2023
b66a9b1
Switch forced color outline declarations to new mixin
mahoneycm Feb 13, 2023
3d4b18e
Add forced color outline mixin to buttons
mahoneycm Feb 13, 2023
9514256
Override forced color button outline on search to maintain consistent…
mahoneycm Feb 13, 2023
600ba38
Run prettier
mahoneycm Feb 13, 2023
71ace11
Ignore focus state on forced color outline
mahoneycm Feb 28, 2023
c292390
Create variable for forced color outline width
mahoneycm Feb 28, 2023
249357d
Search: Refactor forced color button outline to fix focus
mahoneycm Feb 28, 2023
60af03d
Revert forced color outline to border
mahoneycm Feb 28, 2023
60537b8
Adjust styles for components with forced color border
mahoneycm Feb 28, 2023
8acc85c
Create high contrast border variable
mahoneycm Feb 28, 2023
1a0dd2c
Replace forced color borders & outlines with new variable
mahoneycm Feb 28, 2023
ff2ac9f
Remove forced color border mixin
mahoneycm Feb 28, 2023
65acbe8
Remove unused utilities import
mahoneycm Feb 28, 2023
490232e
Merge branch 'develop' of github.com:uswds/uswds into cm-button-force…
mahoneycm Mar 14, 2023
98005ed
Implement review notes:
mahoneycm Mar 22, 2023
b2f35e6
Add note about high contrast mode
mahoneycm Mar 24, 2023
d27c0e3
Date Picker: Change background color for calendar arrows on hover
mahoneycm Mar 24, 2023
bd7de74
Date Picker: Adjust month/year arrow hover states
mahoneycm Mar 24, 2023
adb75b1
Move high contrast border setting to system variables
mahoneycm Mar 30, 2023
eb3b422
Create variable for high contrast disabled border
mahoneycm Mar 30, 2023
282adb4
Remove variable for high contrast disabled border
mahoneycm Mar 30, 2023
cb9dab5
Remove border: 0 from button-disabled
mahoneycm Mar 30, 2023
264008a
Specify border-high-contrast variable call in checkbox and radio colors
mahoneycm Mar 30, 2023
05ef153
Run prettier:scss
mahoneycm Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Implement review notes: 
- Moves and renames -high-contrast to -high-contrast-border
- Switches HC range slider border to outline to resolve visual discrepency
- Switches radio & checkbox border to outline to resolve visual discrepency
- Removes extra line
  • Loading branch information
@mahoneycm
mahoneycm committed Mar 22, 2023
commit 98005edaaee64bc5bd67246f2d9c440ba8989f1a
2 changes: 1 addition & 1 deletion packages/usa-button/src/styles/_usa-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);

@media (forced-colors: active) {
&:not(.usa-button--unstyled) {
border: $border-high-contrast
border: $theme-high-contrast-border
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/usa-date-picker/src/styles/_usa-date-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ $navigate_far_next: map-merge(
background-image: none;

&:hover {
border: $border-high-contrast;
border: $theme-high-contrast-border;
background-color: transparent;
}
}
Expand All @@ -472,7 +472,7 @@ $navigate_far_next: map-merge(
background-image: none;

&:hover {
border: $border-high-contrast;
border: $theme-high-contrast-border;
background-color: transparent;
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/usa-pagination/src/styles/_usa-pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ $pagination-hover-token: list.nth($pagination-link-tokens, 2);
border-color: color($pagination-hover-token);

@media (forced-colors: active) {
border: $border-high-contrast;
border: $theme-high-contrast-border;
}
}
}
Expand All @@ -149,7 +149,7 @@ $pagination-hover-token: list.nth($pagination-link-tokens, 2);
color: color($text-color);

@media (forced-colors: active) {
border: $border-high-contrast;
border: $theme-high-contrast-border;
color: buttonText;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/usa-range/src/styles/_usa-range.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
cursor: pointer;

@media (forced-colors: active) {
border: $border-high-contrast;
outline: $theme-high-contrast-border;
}
}

Expand Down
3 changes: 1 addition & 2 deletions packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
color.adjust(color($input-text-color), $alpha: $input-border-alpha);

@media (forced-colors: active) {
border: $border-high-contrast;
outline: $theme-high-contrast-border;
outline-offset: 2px;
}
}
Expand Down Expand Up @@ -111,7 +111,6 @@

@media (forced-colors: active) {
border: ButtonText solid units("05");
//
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions packages/uswds-core/src/styles/settings/_settings-general.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,11 @@ Icons
*/

$theme-icon-image-size: 2 !default;

/*
----------------------------------------
High Contrast
Copy link
Contributor

Choose a reason for hiding this comment

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

Wondering if it would be helpful to specify that this is for High contrast mode, possibly with a short description explaining HC mode/CSS forced-color mode is and how to activate it.

Suggested change
High Contrast
High contrast mode

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Resolved in b2f35e6

----------------------------------------
*/

$theme-high-contrast-border: 2px solid transparent;
3 changes: 0 additions & 3 deletions packages/uswds-core/src/styles/settings/_settings-utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,9 +618,6 @@ $border-manual-values: () !default;
$border-color-palettes: () !default;
$border-color-manual-values: () !default;

// .border-high-contrast
$border-high-contrast: 2px solid transparent;

// .border-radius

$border-radius-palettes: ("palette-border-radius-default") !default;
Expand Down