chore: wcag 2.1 updates (#5086)

* chore: wcag 2.1 updates

* fix: fix popover issue

* fix: revert linear gradient slds hooks as they are not been converted on core

Author: Amarnath510

ui/components/brand-band/base/_index.scss

@@ -28,7 +28,7 @@
     bottom: 0;
     left: 0;
     background-image:
-      url($brand-band-default-image),
+      url($static-image-path + $brand-band-default-image),
       linear-gradient(to top, $brand-background-dark-transparent 0, $brand-background-dark);
     background-repeat: repeat-x;
     background-position: top left;

ui/components/menus/dropdown/_deprecate.scss

@@ -28,8 +28,8 @@
 
   .slds-dropdown_nubbin-top,
   .slds-dropdown--nubbin-top {
-    @include nubbin(top, 'before');
-    @include nubbin(top);
+    @include nubbin(top, 'before', $color: var(--slds-g-color-neutral-base-100, #{$color-background-alt}));
+    @include nubbin(top, $color: var(--slds-g-color-neutral-base-100, #{$color-background-alt}));
     margin-top: ($nubbin-size-default * 0.5);
 
     &:before {

ui/components/popovers/base/_index.scss

@@ -14,7 +14,7 @@
  * @variant
  */
 .slds-popover {
-  @include popover($shadow: $shadow-drop-down);
+  @include popover($color: var(--slds-g-color-neutral-base-100, #{$color-background-alt}), $shadow: $shadow-drop-down);
   border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
 }
 

ui/components/popovers/brand/_index.scss

@@ -91,8 +91,7 @@
     &.slds-nubbin_top-left-corner:before,
     &.slds-nubbin_top-right:before,
     &.slds-nubbin_top-right-corner:before {
-      @include brand-nubbin($position: "top", $location: "before",
-        $color: var(--slds-g-color-brand-base-10, #{$color-border-inverse}));
+      @include brand-nubbin($position: "top", $location: "before", $color: $color-border-inverse);
     }
   }
 }
@@ -130,8 +129,7 @@
     &.slds-nubbin_left-top-corner:before,
     &.slds-nubbin_left-bottom:before,
     &.slds-nubbin_left-bottom-corner:before {
-      @include brand-nubbin($position: "left", $location: "before",
-        $color: var(--slds-g-color-brand-base-10, #{$color-border-inverse}));
+      @include brand-nubbin($position: "left", $location: "before", $color: $color-border-inverse);
     }
   }
 }
@@ -169,8 +167,7 @@
     &.slds-nubbin_bottom-left-corner:before,
     &.slds-nubbin_bottom-right:before,
     &.slds-nubbin_bottom-right-corner:before {
-      @include brand-nubbin($position: "bottom", $location: "before",
-        $color: var(--slds-g-color-brand-base-10, #{$color-border-inverse}));
+      @include brand-nubbin($position: "bottom", $location: "before", $color: $color-border-inverse);
     }
   }
 }
@@ -208,8 +205,7 @@
     &.slds-nubbin_right-top-corner:before,
     &.slds-nubbin_right-bottom:before,
     &.slds-nubbin_right-bottom-corner:before {
-      @include brand-nubbin($position: "right", $location: "before",
-        $color: var(--slds-g-color-brand-base-10, #{$color-border-inverse}));
+      @include brand-nubbin($position: "right", $location: "before", $color: $color-border-inverse);
     }
   }
 }

ui/dependencies/_lists.scss

@@ -48,7 +48,7 @@
 // @param $color {String} Defines the color of the dot
 // @param $mq {Boolean} If you want a dots on touch device or not
 
-@mixin dot-separator($direction: right, $size: 2px, $color: var(--slds-g-color-brand-base-20, #{$color-background-indicator-dot}), $mq: null) {
+@mixin dot-separator($direction: right, $size: 2px, $color: $color-background-indicator-dot, $mq: null) {
   position: relative;
   display: flex;
   align-items: center;

ui/dependencies/_popover.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
-@mixin nubbin($position: bottom, $location: "after", $color: var(--slds-g-color-neutral-base-100, #{$color-background-alt}), $size: $nubbin-size-default) {
+@mixin nubbin($position: bottom, $location: "after", $color: $color-background-alt, $size: $nubbin-size-default) {
 
   &:#{$location} {
     @include square($size);
@@ -36,7 +36,7 @@
   }
 }
 
-@mixin popover($color: var(--slds-g-color-neutral-base-100, #{$color-background-alt}), $shadow: null) {
+@mixin popover($color: $color-background-alt, $shadow: null) {
   position: relative;
   border-radius: $border-radius-medium;
   width: $size-medium;

ui/utilities/horizontal-list/_index.scss

@@ -33,7 +33,7 @@
 .slds-has-dividers--left > .slds-list__item,
 .slds-has-dividers_left > .slds-item,
 .slds-has-dividers--left > .slds-item {
-  @include dot-separator(left);
+  @include dot-separator($direction: left, $color: var(--slds-g-color-brand-base-20, #{$color-background-indicator-dot}));
 }
 
 /**
@@ -46,5 +46,5 @@
 .slds-has-dividers--right > .slds-list__item,
 .slds-has-dividers_right > .slds-item,
 .slds-has-dividers--right > .slds-item {
-  @include dot-separator(right);
+  @include dot-separator($direction: right, $color: var(--slds-g-color-brand-base-20, #{$color-background-indicator-dot}));
 }

ui/utilities/vertical-list/_index.scss

@@ -255,7 +255,7 @@
   */
 .slds-has-divider_right,
 .slds-has-divider--right {
-  @include dot-separator(right);
+  @include dot-separator($direction: right, $color: var(--slds-g-color-brand-base-20, #{$color-background-indicator-dot}));
 }
 
 /**
@@ -285,5 +285,5 @@
   */
 .slds-has-divider_left,
 .slds-has-divider--left {
-  @include dot-separator(left);
+  @include dot-separator($direction: left, $color: var(--slds-g-color-brand-base-20, #{$color-background-indicator-dot}));
 }