@salesforcedevs/dx-components 1.3.352 → 1.3.355

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.352",
+    "version": "1.3.355",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "336de44c52a7dca8b05119cfb36a94273b222f80"
+    "gitHead": "fdc955427a0630610f706b51d0c92335259696c3"
 }

package/src/assets/icons/brand-sprite/svg/symbols.svg

@@ -1375,4 +1375,25 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
   <symbol id="zhihu" viewBox="0 0 640 512">
     <path d="M170.54 148.13v217.54l23.43.01 7.71 26.37 42.01-26.37h49.53V148.13H170.54zm97.75 193.93h-27.94l-27.9 17.51-5.08-17.47-11.9-.04V171.75h72.82v170.31zm-118.46-94.39H97.5c1.74-27.1 2.2-51.59 2.2-73.46h51.16s1.97-22.56-8.58-22.31h-88.5c3.49-13.12 7.87-26.66 13.12-40.67 0 0-24.07 0-32.27 21.57-3.39 8.9-13.21 43.14-30.7 78.12 5.89-.64 25.37-1.18 36.84-22.21 2.11-5.89 2.51-6.66 5.14-14.53h28.87c0 10.5-1.2 66.88-1.68 73.44H20.83c-11.74 0-15.56 23.62-15.56 23.62h65.58C66.45 321.1 42.83 363.12 0 396.34c20.49 5.85 40.91-.93 51-9.9 0 0 22.98-20.9 35.59-69.25l53.96 64.94s7.91-26.89-1.24-39.99c-7.58-8.92-28.06-33.06-36.79-41.81L87.9 311.95c4.36-13.98 6.99-27.55 7.87-40.67h61.65s-.09-23.62-7.59-23.62v.01zm412.02-1.6c20.83-25.64 44.98-58.57 44.98-58.57s-18.65-14.8-27.38-4.06c-6 8.15-36.83 48.2-36.83 48.2l19.23 14.43zm-150.09-59.09c-9.01-8.25-25.91 2.13-25.91 2.13s39.52 55.04 41.12 57.45l19.46-13.73s-25.67-37.61-34.66-45.86h-.01zM640 258.35c-19.78 0-130.91.93-131.06.93v-101c4.81 0 12.42-.4 22.85-1.2 40.88-2.41 70.13-4 87.77-4.81 0 0 12.22-27.19-.59-33.44-3.07-1.18-23.17 4.58-23.17 4.58s-165.22 16.49-232.36 18.05c1.6 8.82 7.62 17.08 15.78 19.55 13.31 3.48 22.69 1.7 49.15.89 24.83-1.6 43.68-2.43 56.51-2.43v99.81H351.41s2.82 22.31 25.51 22.85h107.94v70.92c0 13.97-11.19 21.99-24.48 21.12-14.08.11-26.08-1.15-41.69-1.81 1.99 3.97 6.33 14.39 19.31 21.84 9.88 4.81 16.17 6.57 26.02 6.57 29.56 0 45.67-17.28 44.89-45.31v-73.32h122.36c9.68 0 8.7-23.78 8.7-23.78l.03-.01z"></path>
   </symbol>
+  <symbol id="twitter-x" viewBox="0 0 33 34">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 33.6675C25.6127 33.6675 33 26.2802 33 17.1675C33 8.05478 25.6127 0.66748 16.5 0.66748C7.3873 0.66748 0 8.05478 0 17.1675C0 26.2802 7.3873 33.6675 16.5 33.6675ZM15.2159 17.8135L9.03848 9.66748H9.03941H13.8006L17.8503 15.0077L22.862 9.66748H24.2614L18.4754 15.8325L25 24.4367H20.2389L15.8419 18.6383L10.3993 24.4367H9L15.2159 17.8135ZM13.2825 10.6839H11.0957L20.7541 23.4203H22.9409L13.2825 10.6839Z"/>
+  </symbol>
+  <symbol id="themed-rss" viewBox="0 0 33 34">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 0.66748C25.6127 0.66748 33 8.05478 33 17.1675C33 26.2802 25.6127 33.6675 16.5 33.6675C7.3873 33.6675 0 26.2802 0 17.1675C0 8.05478 7.3873 0.66748 16.5 0.66748ZM9.46875 9.66748C9.1875 9.66748 9 9.85498 9 10.1362V12.105L9.00861 12.1751C9.04834 12.3379 9.22266 12.4917 9.46875 12.5737C15.75 12.855 20.9062 17.9175 21.0938 24.1987C21.0938 24.48 21.2812 24.6675 21.5625 24.6675H23.5312L23.6214 24.6607C23.8519 24.6247 24 24.4487 24 24.1987C23.9062 20.2612 22.2188 16.6987 19.5938 14.0737C16.9688 11.4487 13.4062 9.76123 9.46875 9.66748ZM9.46875 14.73C9.1875 14.73 9 15.0112 9 15.1987V17.1675L9.00682 17.2576C9.04282 17.4881 9.21875 17.6362 9.46875 17.6362C11.1562 17.73 12.75 18.48 13.9688 19.6987C15.1875 20.9175 15.9375 22.5112 16.0312 24.1987C16.0312 24.48 16.2188 24.6675 16.5 24.6675H18.4688L18.5589 24.6607C18.7894 24.6247 18.9375 24.4487 18.9375 24.1987C18.8438 21.6675 17.7188 19.3237 16.0312 17.6362C14.3438 15.9487 12 14.9175 9.46875 14.73ZM10.9688 20.73C9.88144 20.73 9 21.6114 9 22.6987C9 23.786 9.88144 24.6675 10.9688 24.6675C12.0561 24.6675 12.9375 23.786 12.9375 22.6987C12.9375 21.6114 12.0561 20.73 10.9688 20.73Z"/>
+  </symbol>
+  <symbol id="themed-facebook" viewBox="0 0 33 34">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5333 0.66748C7.40222 0.66748 0 8.05478 0 17.1675C0 26.2802 7.40222 33.6675 16.5333 33.6675C25.6644 33.6675 33.0667 26.2802 33.0667 17.1675C33.0667 8.05478 25.6644 0.66748 16.5333 0.66748ZM17.7055 17.3422V26.3191H13.9838V17.3426H12.1244V14.2491H13.9838V12.3918C13.9838 9.86815 15.0337 8.36748 18.0166 8.36748H20.5V11.4613H18.9477C17.7865 11.4613 17.7097 11.8936 17.7097 12.7005L17.7055 14.2488H20.5176L20.1885 17.3422H17.7055Z"/>
+  </symbol>
+  <symbol id="themed-linked-in" viewBox="0 0 33 34">
+    <path d="M16.5 0.66748C25.6127 0.66748 33 8.05478 33 17.1675C33 26.2802 25.6127 33.6675 16.5 33.6675C7.3873 33.6675 0 26.2802 0 17.1675C0 8.05478 7.3873 0.66748 16.5 0.66748ZM12.189 13.755H8.66931V24.3246H12.189V13.755ZM20.8068 13.5097C20.3588 13.5097 19.9514 13.5651 19.5856 13.675C19.2197 13.7848 18.9104 13.9395 18.6576 14.1389C18.4049 14.3384 18.2044 14.5229 18.055 14.6935C17.9057 14.8642 17.7596 15.0636 17.6177 15.2908L17.639 15.2565L17.6391 13.755H14.1301L14.1408 14.2669C14.1457 14.4944 14.1488 15.0382 14.1503 15.8977L14.1509 16.3538C14.151 16.4342 14.1511 16.5168 14.1512 16.6016L14.151 18.1578C14.1493 19.81 14.1421 21.8658 14.1301 24.3246H17.6391V18.4265C17.6391 18.0639 17.6785 17.7759 17.7564 17.5626C17.9057 17.2 18.1318 16.896 18.4337 16.6507C18.7355 16.4054 19.1109 16.2827 19.5589 16.2827C20.17 16.2827 20.6201 16.4939 20.9081 16.9173C21.1961 17.3407 21.34 17.9252 21.34 18.6718V24.3246H24.849V18.2665C24.849 16.7093 24.4789 15.5276 23.7398 14.7202C23.0007 13.9128 22.0226 13.5097 20.8068 13.5097ZM10.4505 8.66748C9.86066 8.66748 9.38177 8.84026 9.01594 9.18476C8.65012 9.52926 8.46667 9.96548 8.46667 10.4913C8.46667 11.0107 8.64478 11.4437 8.99995 11.7925C9.35511 12.1413 9.8244 12.3151 10.4078 12.3151H10.4291C11.0264 12.3151 11.5085 12.1413 11.8743 11.7925C12.2402 11.4437 12.4204 11.0107 12.4129 10.4913C12.4055 9.96548 12.2242 9.52926 11.869 9.18476C11.5138 8.84026 11.0403 8.66748 10.4505 8.66748Z"/>
+  </symbol>
+  <symbol id="themed-youtube" viewBox="0 0 33 34">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 33.6675C25.6127 33.6675 33 26.2802 33 17.1675C33 8.05478 25.6127 0.66748 16.5 0.66748C7.3873 0.66748 0 8.05478 0 17.1675C0 26.2802 7.3873 33.6675 16.5 33.6675ZM19.8409 17.0653L14.3523 13.9428V20.1876L19.8409 17.0653ZM24.7046 10.1092C25.608 10.3522 26.3196 11.0684 26.5611 11.9778C27 13.6261 27 17.0652 27 17.0652C27 17.0652 27 20.5042 26.5611 22.1526C26.3196 23.062 25.608 23.7782 24.7046 24.0213C23.0669 24.4629 16.5 24.4629 16.5 24.4629C16.5 24.4629 9.93309 24.4629 8.29544 24.0213C7.39197 23.7782 6.68035 23.062 6.43885 22.1526C6 20.5042 6 17.0652 6 17.0652C6 17.0652 6 13.6261 6.43885 11.9778C6.68035 11.0684 7.39197 10.3522 8.29544 10.1092C9.93309 9.66748 16.5 9.66748 16.5 9.66748C16.5 9.66748 23.0669 9.66748 24.7046 10.1092Z"/>
+  </symbol>
+  <symbol id="themed-github" viewBox="0 0 33 34">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3969 0.66748C7.32188 0.66748 0 7.98936 0 17.0644C0 24.2831 4.64062 30.4706 11.1375 32.6362C11.9625 32.7394 12.2719 32.3269 12.2719 31.8112C12.2719 31.3987 12.2719 30.3675 12.2719 29.0269C7.73438 30.0581 6.80625 26.8612 6.80625 26.8612C6.08437 24.9019 4.95 24.3862 4.95 24.3862C3.50625 23.355 5.05312 23.355 5.05312 23.355C6.70312 23.4581 7.52812 25.005 7.52812 25.005C8.97188 27.48 11.3438 26.7581 12.2719 26.3456C12.375 25.3144 12.8906 24.5925 13.3031 24.18C9.69375 23.7675 5.87813 22.3237 5.87813 16.1362C5.87813 14.3831 6.49687 12.9394 7.52812 11.7019C7.32187 11.2894 6.80625 9.63936 7.73438 7.37061C7.73438 7.37061 9.075 6.95811 12.2719 9.02061C13.6125 8.60811 14.9531 8.50498 16.3969 8.50498C17.7375 8.50498 19.1812 8.71123 20.5219 9.02061C23.6156 6.85498 25.0594 7.37061 25.0594 7.37061C25.9875 9.63936 25.3687 11.2894 25.2656 11.7019C26.2969 12.8362 26.9156 14.28 26.9156 16.1362C26.9156 22.4269 23.1 23.7675 19.4906 24.18C20.1094 24.6956 20.625 25.7269 20.625 27.1706C20.625 29.3362 20.625 31.0894 20.625 31.7081C20.625 32.1206 20.9344 32.6362 21.7594 32.5331C28.2562 30.3675 32.8969 24.2831 32.8969 17.0644C32.7937 7.98936 25.4719 0.66748 16.3969 0.66748Z"/>
+  </symbol>
+  <symbol id="themed-instagram" viewBox="0 0 19.2 19.2">
+    <path d="M13.498 6.651a1.656 1.656 0 0 0-.95-.949 2.766 2.766 0 0 0-.928-.172c-.527-.024-.685-.03-2.02-.03s-1.493.006-2.02.03a2.766 2.766 0 0 0-.929.172 1.656 1.656 0 0 0-.949.95 2.766 2.766 0 0 0-.172.928c-.024.527-.03.685-.03 2.02s.006 1.493.03 2.02a2.766 2.766 0 0 0 .172.929 1.656 1.656 0 0 0 .95.949 2.766 2.766 0 0 0 .928.172c.527.024.685.029 2.02.029s1.493-.005 2.02-.03a2.766 2.766 0 0 0 .929-.171 1.656 1.656 0 0 0 .949-.95 2.766 2.766 0 0 0 .172-.928c.024-.527.029-.685.029-2.02s-.005-1.493-.03-2.02a2.766 2.766 0 0 0-.171-.929zM9.6 12.168A2.568 2.568 0 1 1 12.168 9.6 2.568 2.568 0 0 1 9.6 12.168zm2.669-4.637a.6.6 0 1 1 .6-.6.6.6 0 0 1-.6.6zM11.267 9.6A1.667 1.667 0 1 1 9.6 7.933 1.667 1.667 0 0 1 11.267 9.6zM9.6 0a9.6 9.6 0 1 0 9.6 9.6A9.6 9.6 0 0 0 9.6 0zm4.97 11.661a3.67 3.67 0 0 1-.233 1.214 2.556 2.556 0 0 1-1.462 1.462 3.67 3.67 0 0 1-1.213.233c-.534.024-.704.03-2.062.03s-1.528-.006-2.062-.03a3.67 3.67 0 0 1-1.213-.233 2.556 2.556 0 0 1-1.462-1.462 3.67 3.67 0 0 1-.233-1.213c-.024-.534-.03-.704-.03-2.062s.006-1.528.03-2.062a3.67 3.67 0 0 1 .232-1.213 2.556 2.556 0 0 1 1.463-1.463 3.67 3.67 0 0 1 1.213-.232c.534-.024.704-.03 2.062-.03s1.528.006 2.062.03a3.67 3.67 0 0 1 1.213.232 2.556 2.556 0 0 1 1.462 1.463 3.67 3.67 0 0 1 .233 1.213c.024.534.03.704.03 2.062s-.006 1.528-.03 2.062z" />
+  </symbol>
 </svg>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -413,7 +413,7 @@ dx-image-and-label {
 }
 
 .container.link-hovered .title-link {
-    color: var(--dx-g-blue-vibrant-40);
+    color: var(--dx-g-link-hover-color);
 }
 
 .container.link-hovered.variant_dark .title-link {

package/src/modules/dx/footer/footer.css

@@ -41,7 +41,11 @@ footer.signup-variant-no-signup {
     font-size: var(--dx-g-text-sm);
     letter-spacing: 1px;
     text-transform: uppercase;
-    color: var(--dx-g-blue-vibrant-20);
+    color: var(--dx-footer-themed-header-color);
+}
+
+.large-signup-heading {
+    color: var(--dx-footer-themed-header-color);
 }
 
 .term-icon {
@@ -57,9 +61,9 @@ footer.signup-variant-no-signup {
     justify-content: center;
     align-items: center;
     position: relative;
-    background: var(--dx-g-indigo-vibrant-95);
+    background: var(--dx-footer-themed-top-background-color);
     height: 78px;
-    border-bottom: 2px solid var(--dx-g-indigo-vibrant-30);
+    border-bottom: 2px solid var(--dx-footer-themed-top-border-color);
 }
 
 .content-container_top > .subheading {
@@ -72,6 +76,7 @@ footer.signup-variant-no-signup {
     position: relative;
     padding: 0 var(--dx-g-page-padding-horizontal);
     height: 504px;
+    background: var(--dx-footer-themed-top-large-background-color);
 }
 
 .content-container_top_large_no_signup {
@@ -114,6 +119,7 @@ footer.signup-variant-no-signup {
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees.svg");
+    filter: var(--dx-footer-themed-svg-filter);
 }
 
 .graphic-mountains {
@@ -121,6 +127,7 @@ footer.signup-variant-no-signup {
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-2.svg");
+    filter: var(--dx-footer-themed-svg-filter);
 }
 
 .graphic-mountains-mobile {
@@ -131,6 +138,7 @@ footer.signup-variant-no-signup {
     height: 56px;
     width: 100px;
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-small-2.svg");
+    filter: var(--dx-footer-themed-svg-filter);
 }
 
 .graphic-trees-small {
@@ -138,6 +146,7 @@ footer.signup-variant-no-signup {
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees-small.svg");
+    filter: var(--dx-footer-themed-svg-filter);
 }
 
 .graphic-large {
@@ -147,7 +156,7 @@ footer.signup-variant-no-signup {
     bottom: -2px;
     width: 100%;
     height: 100%;
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-large-2.svg");
+    background-image: var(--dx-footer-themed-large-graphic);
     background-size: 101%;
 }
 
@@ -160,7 +169,7 @@ footer.signup-variant-no-signup {
         "logo general" auto
         "socials general" max-content
         "locales general" max-content / auto max-content;
-    background: var(--dx-g-indigo-vibrant-95);
+    background: var(--dx-footer-themed-background-color);
     padding-top: var(--dx-g-spacing-4xl);
     padding-bottom: var(--dx-g-spacing-3xl);
 }
@@ -198,7 +207,6 @@ footer.signup-variant-no-signup {
 
 .socials > a {
     border-radius: 50%;
-    background: var(--dx-g-gray-30);
     height: var(--dx-g-spacing-xl);
     width: var(--dx-g-spacing-xl);
     flex-shrink: 0;
@@ -226,32 +234,23 @@ footer.signup-variant-no-signup {
     color: var(--dx-g-blue-vibrant-80);
 }
 
-.socials > a.github {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    color: var(--dx-g-gray-30);
-}
-
-.socials > a:not(.github):hover {
-    background: var(--dx-g-gray-50);
-}
-
-.socials > a.github:hover {
-    color: var(--dx-g-gray-50);
+.socials > a:hover {
+    background: var(--dx-g-blue-vibrant-80);
 }
 
-.socials > a > dx-icon {
-    --dx-c-icon-size: var(--dx-g-icon-size-sm);
-}
-
-.socials > a.github > dx-icon {
-    --dx-c-icon-size: var(--dx-g-spacing-xl);
+.socials > a > svg {
+    fill: var(--dx-footer-themed-svg-icon-color);
+    height: 100%;
 }
 
 /* BOTTOM */
-
 .content-container_bottom {
     display: flex;
-    background: var(--dx-g-blue-vibrant-20);
+    background: var(--dx-footer-themed-terms-and-conditions-background-color);
+}
+
+.content-container_bottom a {
+    text-decoration: none;
 }
 
 .terms {

package/src/modules/dx/footer/footer.html

@@ -19,7 +19,7 @@
         >
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
-                <h2 class="dx-text-display-4">
+                <h2 class="dx-text-display-4 large-signup-heading">
                     <dx-formatted-rich-text
                         value={signupLabel}
                     ></dx-formatted-rich-text>
@@ -34,12 +34,13 @@
                 </dx-button>
             </div>
         </div>
-        <div
-            if:true={showLargeNoSignup}
-            class={largeNoSignupClassName}
-        >
+        <div if:true={showLargeNoSignup} class={largeNoSignupClassName}>
             <div class="graphic graphic-large" alt=""></div>
-            <slot name="custom-content" onslotchange={onSlotChange}></slot>
+            <slot
+                class="large-signup-heading"
+                name="custom-content"
+                onslotchange={onSlotChange}
+            ></slot>
         </div>
         <div
             if:true={showContainerMiddle}
@@ -61,11 +62,13 @@
                         target="_blank"
                         rel="noopener"
                     >
-                        <dx-icon
-                            sprite={link.iconSprite}
-                            symbol={link.iconSymbol}
-                            size="override"
-                        ></dx-icon>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            part="svg"
+                            aria-hidden="true"
+                        >
+                            <use xlink:href={link.iconURL}></use>
+                        </svg>
                     </a>
                 </template>
             </div>
@@ -79,7 +82,6 @@
             >
                 <dx-button
                     class="locales-selector"
-                    variant="secondary"
                     icon-symbol="chevrondown"
                     aria-label="Select Locale"
                 >
@@ -96,7 +98,6 @@
                                 general-label={item.label}
                                 label={option.label}
                                 href={option.link.href}
-                                icon-symbol={option.iconSymbol}
                                 target={option.link.target}
                             ></dx-footer-option>
                         </template>

package/src/modules/dx/footer/links.ts

@@ -126,7 +126,6 @@ export const defaultGeneralLinks = generalLinksRaw.map((section) => ({
             ...option,
             link: {
                 ...option.link,
-                iconSymbol: external ? "new_window" : null,
                 target: external ? "_blank" : null
             }
         };
@@ -184,40 +183,46 @@ export const termsLinks = [
 ];
 
 export const socialLinks = [
+    {
+        href: "https://developer.salesforce.com/blogs/feed",
+        iconSymbol: "rss",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-rss",
+        iconSprite: "general",
+        label: "RSS"
+    },
+    {
+        href: "https://www.instagram.com/salesforcedevs",
+        iconSymbol: "instagram",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-instagram",
+        iconSprite: "brand",
+        label: "Instagram"
+    },
     {
         href: "https://github.com/trailheadapps",
         iconSymbol: "github",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-github",
         iconSprite: "brand",
         label: "Github"
     },
     {
         href: "https://twitter.com/salesforcedevs",
-        iconSymbol: "twitter",
+        iconSymbol: "twitter-x",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#twitter-x",
         iconSprite: "brand",
         label: "Twitter"
     },
     {
         href: "https://www.linkedin.com/showcase/salesforce-developers",
-        iconSymbol: "linkedin-in",
+        iconSymbol: "linked-in",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-linked-in",
         iconSprite: "brand",
         label: "LinkedIn"
     },
     {
         href: "https://www.youtube.com/user/DeveloperForce",
         iconSymbol: "youtube",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-youtube",
         iconSprite: "brand",
         label: "Youtube"
-    },
-    {
-        href: "https://developer.salesforce.com/blogs/feed",
-        iconSymbol: "rss",
-        iconSprite: "general",
-        label: "RSS"
-    },
-    {
-        href: "https://www.instagram.com/salesforcedevs",
-        iconSymbol: "instagram",
-        iconSprite: "brand",
-        label: "Instagram"
     }
 ];

package/src/modules/dx/footerOption/footerOption.css

@@ -1,4 +1,11 @@
-dx-button {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
-    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-20);
+a {
+    color: var(--dx-footer-themed-header-link-color);
+    text-decoration: none;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+a:hover {
+    color: var(--dx-g-link-hover-color);
 }

package/src/modules/dx/footerOption/footerOption.html

@@ -1,12 +1,3 @@
 <template>
-    <dx-button
-        href={href}
-        icon-symbol={iconSymbol}
-        target={target}
-        font="sans"
-        variant="inline"
-        onclick={sendGtm}
-    >
-        {label}
-    </dx-button>
+    <a href={href} target={target} onclick={sendGtm}>{label}</a>
 </template>

package/src/modules/dx/footerOption/footerOption.ts

@@ -5,7 +5,6 @@ export default class FooterOption extends LightningElement {
     @api href: string | null = null;
     @api generalLabel: string | null = null;
     @api label: string | null = null;
-    @api iconSymbol: string | null = null;
     @api target: string | null = null;
 
     sendGtm(e: any) {

package/src/modules/dxHelpers/button/button.css

@@ -1,4 +1,4 @@
 :host {
-    --dx-g-button-heading-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-g-button-image-filter-hover: brightness(90%);
+    --dx-g-button-heading-color-hover: var(--dx-g-link-hover-color);
 }

package/src/modules/dxHelpers/card/card.css

@@ -171,7 +171,7 @@ a.dx-card-base:hover a.dx-card-base_borderless-image_link {
 dx-card-title:hover,
 .dx-card-base_link-hovered dx-card-title,
 a.dx-card-base:hover dx-card-title {
-    --dx-c-card-title-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-card-title-color: var(--dx-card-title-hover-color);
 }
 
 /* Line Limits */