Skip to content
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

Jump to bottom

Update vf-focus mixin to properly support theming #5307

Merged
merged 7 commits into from
Sep 3, 2024
Merged

Update vf-focus mixin to properly support theming #5307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d3501f7
Add new vf-focus mixin
pastelcyborg Aug 16, 2024
d00db35
Update button mixin; fix typos
pastelcyborg Aug 16, 2024
9ba9bad
Replace all uses with new vf-focus mixin
pastelcyborg Aug 16, 2024
d5c59c6
Remove deprecated vf-focus
pastelcyborg Aug 16, 2024
6aec395
Update new mixin name; remove unused variables
pastelcyborg Aug 16, 2024
ae8fa09
Set light color variable to default
pastelcyborg Aug 19, 2024
94f31ca
Improve backwards-compatibility
pastelcyborg Sep 2, 2024
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
2 changes: 1 addition & 1 deletion scss/_base_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

%vf-button-base {
@include vf-transition(#{background-color, border-color}, snap, in);
@include vf-focus;
@include vf-focus-themed;

border-style: solid;
border-width: $input-border-thickness;
Expand Down
2 changes: 1 addition & 1 deletion scss/_base_details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

summary {
@extend %common-default-text-properties;
@include vf-focus;
@include vf-focus-themed;

margin-bottom: $spv-nudge; //push subsequent text onto baseline
max-width: $text-max-width;
Expand Down
4 changes: 2 additions & 2 deletions scss/_base_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// Default form input element styles
%vf-input-elements {
@extend %bordered-text-vertical-padding;
@include vf-focus($has-validation: true);
@include vf-focus-themed($has-validation: true);
@include vf-animation(#{background-color}, fast);

// stylelint-disable property-no-vendor-prefix
Expand Down Expand Up @@ -145,7 +145,7 @@

[type='file'] {
@extend %bordered-text-vertical-padding;
@include vf-focus;
@include vf-focus-themed;

margin-bottom: $input-margin-bottom;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion scss/_base_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

%vf-link-base {
@include vf-focus;
@include vf-focus-themed;

color: $colors--theme--link-default;
text-decoration: none;
Expand Down
22 changes: 17 additions & 5 deletions scss/_global_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,22 @@
}
}

// Adds visual focus to elements on :focus-visible,
// or :focus if the browser doesn't support the former
@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
// Adds visual focus to elements on :focus-visible or :focus if the browser
// doesn't support the former
@mixin vf-focus-themed($light-color: $colors--light-theme--focus, $dark-color: $colors--dark-theme--focus, $width: $bar-thickness, $has-validation: false) {
--vf-focus-outline-color: #{$light-color};

.is-dark & {
--vf-focus-outline-color: #{$dark-color};
}

&:focus {
outline: $width solid $color;
outline: $width solid var(--vf-focus-outline-color);
outline-offset: -#{$width};
}

&:focus-visible {
outline: $width solid $color;
outline: $width solid var(--vf-focus-outline-color);
outline-offset: -#{$width};
}

Expand All @@ -93,6 +99,12 @@
}
}

// This mixin is deprecated and will be removed in a future version of Vanilla.
// Please use vf-focus-themed instead.
@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
@include vf-focus-themed($light-color: $color, $width: $width, $has-validation: $has-validation);
}

// Raises a number to a power (https://css-tricks.com/snippets/sass/power-function/)
@function pow($number, $exponent) {
$value: 1;
Expand Down
2 changes: 1 addition & 1 deletion scss/_patterns_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.p-accordion__tab {
@extend %single-border-text-vpadding--scaling;
@include vf-focus;
@include vf-focus-themed;

background-color: inherit;
border: 0;
Expand Down
2 changes: 1 addition & 1 deletion scss/_patterns_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
$button-disabled-border-color: $colors--theme--button-positive-default,
$button-text-color: $colors--theme--button-positive-text
);
@include vf-focus($colors--theme--positive-focus);
@include vf-focus-themed($light-color: $color-focus-positive);
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/_patterns_chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $chip-border-thickness: 1px;
%vf-chip {
@extend %small-text;
@include vf-transition(#{background-color, border-color}, snap, out);
@include vf-focus;
@include vf-focus-themed;

align-items: baseline;
border-radius: 1rem;
Expand Down
2 changes: 1 addition & 1 deletion scss/_patterns_contextual-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
}

.p-contextual-menu__link {
@include vf-focus;
@include vf-focus-themed;

border: 0;
clear: both;
Expand Down
2 changes: 1 addition & 1 deletion scss/_patterns_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
top: -999px;

&:focus {
@include vf-focus;
@include vf-focus-themed;

left: 0;
padding: $spv--x-small;
Expand Down
4 changes: 2 additions & 2 deletions scss/_patterns_list-tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}

.p-list-tree__item {
@include vf-focus;
@include vf-focus-themed;

margin-top: $sp-xx-small;
padding-left: 0.8rem;
Expand All @@ -69,7 +69,7 @@
}

.p-list-tree__toggle {
@include vf-focus;
@include vf-focus-themed;

background: transparent;
border: 0;
Expand Down
6 changes: 3 additions & 3 deletions scss/_patterns_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
@extend %navigation-link-text;
@extend %vf-navigation-separator;
@include vf-transition($properties, snap);
@include vf-focus;
@include vf-focus-themed;

// override button styles
background-color: transparent;
Expand Down Expand Up @@ -327,7 +327,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
margin: 0 $sph--large 0 0;

.p-navigation__item {
@include vf-focus;
@include vf-focus-themed;

display: flex;
}
Expand Down Expand Up @@ -478,7 +478,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
@extend %navigation-link-responsive-padding-horizontal;
@extend %navigation-link-responsive-padding-vertical;
@extend %navigation-link-text;
@include vf-focus;
@include vf-focus-themed;

margin: 0 0 auto 0;
}
Expand Down
2 changes: 1 addition & 1 deletion scss/_patterns_side-navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@
}

%side-navigation__link {
@include vf-focus;
@include vf-focus-themed;

&,
&:visited {
Expand Down
7 changes: 0 additions & 7 deletions scss/_settings_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ $color-focus-dark: #9cf !default;
// Focus modifications to meet AA 3:1 contrast ratio against
// button background for positive buttons
$color-focus-positive: #003008 !default;
$color-focus-positive-dark: #9cf !default;

// Button background color changes
$input-background-opacity-amount: 0.04;
Expand Down Expand Up @@ -93,7 +92,6 @@ $states: (
// --link-default - default link color
// --link-visited - visited link color
// --focus - focus highlight/outline color
// --positive-focus - focus highlight/outline color for positive buttons
//
// Background colors:
// --background - default background color
Expand All @@ -118,7 +116,6 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
$colors--light-theme--link-default: $color-link !default;
$colors--light-theme--link-visited: $color-link-visited !default;
$colors--light-theme--focus: $color-focus !default;
$colors--light-theme--positive-focus: $color-focus-positive !default;

$colors--light-theme--background-default: #fff !default;
$colors--light-theme--background-alt: #f7f7f7 !default;
Expand Down Expand Up @@ -179,7 +176,6 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
$colors--dark-theme--link-default: $color-link-dark !default;
$colors--dark-theme--link-visited: $color-link-visited-dark !default;
$colors--dark-theme--focus: $color-focus-dark !default;
$colors--dark-theme--positive-focus: $color-focus-positive-dark !default;

$colors--dark-theme--background-default: #262626 !default;
$colors--dark-theme--background-alt: #202020 !default;
Expand Down Expand Up @@ -247,7 +243,6 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
$colors--theme--link-default: var(--vf-color-link-default);
$colors--theme--link-visited: var(--vf-color-link-visited);
$colors--theme--focus: var(--vf-color-focus);
$colors--theme--positive-focus: var(--vf-color-positive-focus);

$colors--theme--background-default: var(--vf-color-background-default);
$colors--theme--background-alt: var(--vf-color-background-alt);
Expand Down Expand Up @@ -305,7 +300,6 @@ $colors--theme--accent: var(--vf-color-accent);
--vf-color-link-default: #{$colors--light-theme--link-default};
--vf-color-link-visited: #{$colors--light-theme--link-visited};
--vf-color-focus: #{$colors--light-theme--focus};
--vf-color-positive-focus: #{$colors--light-theme--positive-focus};

--vf-color-background-default: #{$colors--light-theme--background-default};
--vf-color-background-alt: #{$colors--light-theme--background-alt};
Expand Down Expand Up @@ -363,7 +357,6 @@ $colors--theme--accent: var(--vf-color-accent);
--vf-color-link-default: #{$colors--dark-theme--link-default};
--vf-color-link-visited: #{$colors--dark-theme--link-visited};
--vf-color-focus: #{$colors--dark-theme--focus};
--vf-color-positive-focus: #{$colors--dark-theme--positive-focus};

--vf-color-background-default: #{$colors--dark-theme--background-default};
--vf-color-background-alt: #{$colors--dark-theme--background-alt};
Expand Down
2 changes: 1 addition & 1 deletion templates/docs/examples/patterns/buttons/pressed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand Down
8 changes: 4 additions & 4 deletions templates/docs/examples/patterns/contextual-menu/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand All @@ -29,7 +29,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand All @@ -43,7 +43,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand All @@ -57,7 +57,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand Down
2 changes: 1 addition & 1 deletion templates/docs/examples/patterns/contextual-menu/with-indicator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand Down
8 changes: 4 additions & 4 deletions templates/docs/examples/patterns/tables/_table-mobile-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down Expand Up @@ -62,7 +62,7 @@
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down Expand Up @@ -90,7 +90,7 @@
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down Expand Up @@ -118,7 +118,7 @@
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down
8 changes: 4 additions & 4 deletions templates/docs/examples/templates/responsive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ <h4>Table mobile card</h4>
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down Expand Up @@ -290,7 +290,7 @@ <h4>Table mobile card</h4>
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down Expand Up @@ -318,7 +318,7 @@ <h4>Table mobile card</h4>
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down Expand Up @@ -346,7 +346,7 @@ <h4>Table mobile card</h4>
<button class="p-contextual-menu__link">Deploy</button>
</span>
<span class="p-contextual-menu__group">
<button class="p-contextual-menu__link">Test harware</button>
<button class="p-contextual-menu__link">Test hardware</button>
<button class="p-contextual-menu__link">Rescue mode</button>
<button class="p-contextual-menu__link">Mark broken</button>
</span>
Expand Down
6 changes: 3 additions & 3 deletions templates/docs/examples/templates/z-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand All @@ -119,7 +119,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand All @@ -135,7 +135,7 @@
<a href="#" class="p-contextual-menu__link">Deploy</a>
</span>
<span class="p-contextual-menu__group">
<a href="#" class="p-contextual-menu__link">Test harware</a>
<a href="#" class="p-contextual-menu__link">Test hardware</a>
<a href="#" class="p-contextual-menu__link">Rescue mode</a>
<a href="#" class="p-contextual-menu__link">Mark broken</a>
</span>
Expand Down
Loading