Merge pull request #3112 from salesforce-ux/feat/branded-skip-links

feat(branded-header-skip-links): add support for skip links in the header

Author: zahnster

design-tokens/palette-colors.yml

@@ -95,19 +95,19 @@ props:
     value: "#ffffff"
     comment: "Background color a branded app header"
   BRAND_HEADER_ICON:
-    value: "#a6a6a6"
+    value: "#919191"
     comment: "Icons of BRAND_HEADER that is accessible with BRAND_HEADER"
   BRAND_HEADER_ICON_ACTIVE:
-    value: "#969696"
+    value: "#818181"
     comment: "Active / Hover state of BRAND_HEADER_ICON"
   BRAND_HEADER_ICON_DISABLED:
-    value: "rgba(166,166,166,0.25)"
+    value: "rgba(145,145,145,0.25)"
     comment: "Disabled state of BRAND_HEADER_ICON"
   BRAND_HEADER_CONTRAST:
-    value: "#6a6a6a"
+    value: "#ff000"
     comment: "Variant of BRAND_HEADER that is accessible with BRAND_HEADER"
   BRAND_HEADER_CONTRAST_ACTIVE:
-    value: "#5c5c5c"
+    value: "#505050"
     comment: "Active / Hover state of BRAND_HEADER_CONTRAST"
   BRAND_HEADER_CONTRAST_INVERSE:
     value: "#ffffff"
@@ -119,13 +119,13 @@ props:
     value: "#0B6493"
     comment: "Variant of BRAND_HEADER_CONTRAST that provides a cool color"
   BRAND_HEADER_CONTRAST_COOL_ACTIVE:
-    value: "#0A547B"
+    value: "#005583"
     comment: "Active / Hover state of BRAND_HEADER_CONTRAST_COOL"
   BRAND_HEADER_CONTRAST_WARM:
     value: "#BF0201"
     comment: "Variant of BRAND_HEADER_CONTRAST that provides a warm color"
   BRAND_HEADER_CONTRAST_WARM_ACTIVE:
-    value: "#920A0A"
+    value: "#ac0000"
     comment: "Active / Hover state of BRAND_HEADER_CONTRAST_WARM"
   BRAND_TEXT_LINK:
     value: "#006DCC"

ui/components/global-header/base/_index.scss

@@ -20,8 +20,9 @@
   // Position for when assistive text becomes into focus
   .slds-assistive-text_focus,
   .slds-assistive-text--focus {
-    background: $brand-header;
     top: 0;
+    color: $brand-header-contrast;
+    background: $brand-header;
   }
 }