@salesforcedevs/dx-components 1.3.360 → 1.3.362

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.360",
+    "version": "1.3.362",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "359059437a3b75dc1f4fde44b77101b7e0497e47"
+    "gitHead": "b467b87ab7cf96d27e036a784d7d8fd4b7e423fe"
 }

package/src/modules/dx/audio/audio.css

@@ -8,9 +8,13 @@
     --dx-c-audio-player-padding: 6px 13px 13px;
 }
 
+dx-icon {
+    --dx-c-icon-color: var(--dx-g-audio-text-color);
+}
+
 /* Outermost container/border */
 .custom-audio-player {
-    background-color: var(--dx-g-indigo-vibrant-90, #e0e5f8);
+    background-color: var(--dx-g-audio-background-color, #e0e5f8);
     border-radius: 12px;
     padding: var(--dx-c-audio-player-padding);
 }
@@ -29,6 +33,7 @@
     position: relative;
     text-transform: uppercase;
     top: 1px;
+    color: var(--dx-g-audio-text-color);
 }
 
 /*
@@ -40,7 +45,7 @@
     --dx-c-popover-padding: 0;
 
     align-items: center;
-    background-color: var(--sds-g-gray-1, #fff);
+    background-color: var(--dx-g-audio-inner-div-background-color, #fff);
     border-radius: 5px;
     display: flex;
     margin-top: 8px;
@@ -66,6 +71,7 @@
     font-size: var(--dx-g-text-2xs, 11px);
     margin-left: 4px;
     margin-right: 8px;
+    color: var(--dx-g-audio-text-color);
 }
 
 /* Sliders and "thumb" controls */
@@ -150,6 +156,10 @@
     right: 0;
 }
 
+.player-threedot-menu {
+    background: var(--dx-g-audio-inner-div-background-color);
+}
+
 /* Three dot menu, for download and playback speed settings */
 .player-threedot-menu ul {
     font-family: var(--dx-g-font-sans);
@@ -170,7 +180,7 @@
 }
 
 .player-threedot-menu a {
-    color: initial;
+    color: var(--dx-g-audio-threedot-menu-text-color);
     cursor: pointer;
     display: block;
     padding: var(--dx-c-threedot-menu-item-padding);
@@ -203,7 +213,7 @@
 .player-threedot-menu button {
     background: transparent;
     border: 0;
-    color: initial; /* only necessary on iOS Safari to remove blue text color */
+    color: var(--dx-g-audio-threedot-menu-text-color);
     cursor: pointer;
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-2xs, 11px);
@@ -218,7 +228,7 @@
 
 @media (hover: hover) {
     .player dx-button::part(container):hover {
-        background: var(--sds-g-gray-4);
+        background: var(--dx-g-audio-button-hover-color);
     }
 
     /* NOTE: Even though the 'hover' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
@@ -253,6 +263,6 @@
     .player-threedot-menu a:hover,
     .player-threedot-menu button:focus,
     .player-threedot-menu button:hover {
-        background: var(--sds-g-gray-4);
+        background: var(--dx-g-audio-button-hover-color);
     }
 }

package/src/modules/dx/button/button.css

@@ -54,6 +54,8 @@
 .button dx-icon {
     display: inline;
     vertical-align: var(--dx-c-button-icon-vertical-align, unset);
+
+    --dx-c-icon-color: var(--dx-g-button-icon-color);
 }
 
 .button.variant_inline dx-icon,

package/src/modules/dx/searchResults/resultsTemplate.js

@@ -62,7 +62,7 @@ export default html`
                     <% } %>
                 </div>
                 <a
-                    href="<%- raw.uri %>"
+                    href="<%- raw.content_type === "help_documentation" ? raw.publicurl : raw.uri %>"
                     class="dx-result-title CoveoResultLink"
                     <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
                         target="_blank"

package/src/modules/dx/socials/socials.css

@@ -3,7 +3,7 @@
 }
 
 .details-section {
-    color: var(--dx-g-gray-30);
+    color: var(--dx-g-text-label-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xs);
     letter-spacing: 0.7px;
@@ -25,11 +25,12 @@
 }
 
 dx-icon-badge {
-    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-background-color);
+    --dx-c-icon-badge-color: var(--dx-g-social-svg-icon-color);
     --dx-c-icon-badge-size: 34px;
     --dx-c-icon-badge-icon-size: 18px;
 }
 
 dx-icon-badge:hover {
-    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-hover-color);
 }