Visitar URL original
USWDS: Button - Forced colors outline by mahoneycm · Pull Request #5147 · uswds/uswds · GitHub
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
thisisdano merged 25 commits into from
May 10, 2023
Merged

USWDS: Button - Forced colors outline #5147

Show file tree
Hide file tree
Changes from 15 commits
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
6 changes: 6 additions & 0 deletions 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 @@ -51,6 +51,12 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
&[aria-disabled="true"] {
@include button-disabled;
}

@media (forced-colors: active) {
&:not(.usa-button--unstyled) {
border: $border-high-contrast
}
}
}

.usa-button--accent-cool {
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 {
outline: 2px solid transparent;
border: $border-high-contrast;
Comment thread
amyleadem marked this conversation as resolved.
Resolved
background-color: transparent;
}
}
Expand All @@ -472,7 +472,7 @@ $navigate_far_next: map-merge(
background-image: none;

&:hover {
outline: 2px solid transparent;
border: $border-high-contrast;
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: 2px solid buttonText;
border: $border-high-contrast;
}
}
}
Expand All @@ -149,7 +149,7 @@ $pagination-hover-token: list.nth($pagination-link-tokens, 2);
color: color($text-color);

@media (forced-colors: active) {
outline: 2px solid buttonText;
border: $border-high-contrast;
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) {
outline: 2px solid transparent;
border: $border-high-contrast;
Comment thread
mahoneycm marked this conversation as resolved.
Resolved
}
}

Expand Down
5 changes: 4 additions & 1 deletion packages/usa-search/src/styles/_usa-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,12 @@ $search-icon: (
}

@media (forced-colors: active) {
border: 2px solid transparent;
@include place-icon($search-icon, "before");

&:focus {
outline-offset: 0;
}

&::before {
@include at-media("mobile-lg") {
content: none;
Expand Down
3 changes: 2 additions & 1 deletion 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) {
outline: 2px solid transparent;
border: $border-high-contrast;
Comment thread
mahoneycm marked this conversation as resolved.
Resolved
outline-offset: 2px;
}
}
Expand Down Expand Up @@ -111,6 +111,7 @@

@media (forced-colors: active) {
border: ButtonText solid units("05");
//
Comment thread
mahoneycm marked this conversation as resolved.
Resolved
}
}
}
Expand Down
3 changes: 3 additions & 0 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,6 +618,9 @@ $border-manual-values: () !default;
$border-color-palettes: () !default;
$border-color-manual-values: () !default;

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

Comment thread
mahoneycm marked this conversation as resolved.
Resolved
// .border-radius

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