@salesforcedevs/dx-components 1.41.0 → 1.42.1-remediation.1

package/lwc.config.json

@@ -131,6 +131,7 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
+        "dxUtils/openSearch",
         "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.41.0",
+    "version": "1.42.1-remediation.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,6 +43,5 @@
         "eventsourcemock": "2.0.0",
         "luxon": "3.4.4",
         "msw": "^2.12.4"
-    },
-    "gitHead": "505fb7062378be9370bdb2dd44f66b5b327b3665"
+    }
 }

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

@@ -21,12 +21,18 @@
 }
 
 dx-icon {
-    --dx-c-icon-color: var(--dx-g-audio-text-color);
+    --dx-c-icon-color: var(
+        --dx-c-audio-color-text,
+        var(--dx-g-audio-text-color)
+    );
 }
 
 /* Outermost container/border */
 .custom-audio-player {
-    background-color: var(--dx-c-audio-background-color);
+    background-color: var(
+        --dx-c-audio-color-surface,
+        var(--dx-c-audio-background-color)
+    );
     border-radius: 12px;
     padding: var(--dx-c-audio-player-padding);
 }
@@ -45,7 +51,7 @@ dx-icon {
     position: relative;
     text-transform: uppercase;
     top: 1px;
-    color: var(--dx-g-audio-text-color);
+    color: var(--dx-c-audio-color-text, var(--dx-g-audio-text-color));
 }
 
 /*
@@ -57,7 +63,10 @@ dx-icon {
     --dx-c-popover-padding: 0;
 
     align-items: center;
-    background-color: var(--dx-c-audio-inner-div-background-color);
+    background-color: var(
+        --dx-c-audio-player-color-surface,
+        var(--dx-c-audio-inner-div-background-color)
+    );
     border-radius: 5px;
     display: flex;
     margin-top: 8px;
@@ -83,7 +92,7 @@ dx-icon {
     font-size: var(--dx-g-text-2xs, 11px);
     margin-left: 4px;
     margin-right: 8px;
-    color: var(--dx-g-audio-text-color);
+    color: var(--dx-c-audio-color-text, var(--dx-g-audio-text-color));
 }
 
 /* Sliders and "thumb" controls */
@@ -165,7 +174,10 @@ dx-icon {
 }
 
 .player-threedot-menu {
-    background: var(--dx-g-audio-inner-div-background-color);
+    background: var(
+        --dx-c-audio-menu-color-surface,
+        var(--dx-g-audio-inner-div-background-color)
+    );
 }
 
 /* Three dot menu, for download and playback speed settings */
@@ -188,7 +200,10 @@ dx-icon {
 }
 
 .player-threedot-menu a {
-    color: var(--dx-g-audio-threedot-menu-text-color);
+    color: var(
+        --dx-c-audio-menu-color-text,
+        var(--dx-g-audio-threedot-menu-text-color)
+    );
     cursor: pointer;
     display: block;
     padding: var(--dx-c-threedot-menu-item-padding);
@@ -221,7 +236,10 @@ dx-icon {
 .player-threedot-menu button {
     background: transparent;
     border: 0;
-    color: var(--dx-g-audio-threedot-menu-text-color);
+    color: var(
+        --dx-c-audio-menu-color-text,
+        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);
@@ -236,7 +254,10 @@ dx-icon {
 
 @media (hover: hover) {
     .player dx-button::part(container):hover {
-        background: var(--dx-g-audio-button-hover-color);
+        background: var(
+            --dx-c-audio-button-color-surface-hover,
+            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 */
@@ -252,7 +273,10 @@ dx-icon {
 
     .player-volume-container.focused-by-keyboard,
     .player-volume-container:hover {
-        background: var(--dx-g-audio-button-hover-color);
+        background: var(
+            --dx-c-audio-button-color-surface-hover,
+            var(--dx-g-audio-button-hover-color)
+        );
         width: max(12%, 150px);
     }
 
@@ -271,6 +295,9 @@ dx-icon {
     .player-threedot-menu a:hover,
     .player-threedot-menu button:focus,
     .player-threedot-menu button:hover {
-        background: var(--dx-g-audio-button-hover-color);
+        background: var(
+            --dx-c-audio-button-color-surface-hover,
+            var(--dx-g-audio-button-hover-color)
+        );
     }
 }

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

@@ -60,7 +60,10 @@
     display: inline;
     vertical-align: var(--dx-c-button-icon-vertical-align, unset);
 
-    --dx-c-icon-color: var(--dx-g-button-icon-color, currentcolor);
+    --dx-c-icon-color: var(
+        --dx-c-button-color-icon,
+        var(--dx-g-button-icon-color, currentcolor)
+    );
 }
 
 .button.variant_inline dx-icon,

package/src/modules/dx/cardClickthrough/cardClickthrough.css

@@ -19,7 +19,10 @@
 
 /* Specificity of this rule and the next is required to override default "base" card behavior */
 .card.dx-card-base.not-clickable:hover {
-    box-shadow: var(--dx-g-box-shadow-sm); /* no shadow as if clickable */
+    box-shadow: var(
+        --dx-g-elevation-shadow-1,
+        var(--dx-g-box-shadow-sm)
+    ); /* no shadow as if clickable */
 }
 
 .card.dx-card-base.not-clickable:hover dx-card-title {

package/src/modules/dx/cardEvent/cardEvent.css

@@ -97,7 +97,7 @@ dx-button {
 }
 
 dx-formatted-date-time {
-    --dx-g-text-body-color: var(--dx-g-indigo-vibrant-40);
+    --dx-c-text-body-color-text: var(--dx-g-indigo-vibrant-40);
 }
 
 @media (max-width: 1024px) {

package/src/modules/dx/cardNews/cardNews.css

@@ -15,7 +15,7 @@
     align-items: stretch;
     flex-direction: column;
     justify-content: flex-start;
-    box-shadow: var(--dx-g-box-shadow-sm);
+    box-shadow: var(--dx-g-elevation-shadow-1, var(--dx-g-box-shadow-sm));
 }
 
 .text {
@@ -83,7 +83,7 @@ img {
         display: flex;
         align-items: stretch;
         justify-content: flex-start;
-        box-shadow: var(--dx-g-box-shadow-sm);
+        box-shadow: var(--dx-g-elevation-shadow-1, var(--dx-g-box-shadow-sm));
     }
 
     .dx-text-display-4 {

package/src/modules/dx/cardTitle/cardTitle.css

@@ -2,7 +2,10 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-card-title-color: var(--dx-g-text-heading-color);
+    --dx-c-card-title-color: var(
+        --dx-c-text-heading-color-text,
+        var(--dx-g-text-heading-color)
+    );
     --dx-c-card-title-font-size: var(--dx-g-text-xl);
     --dx-c-card-title-line-height: 28px;
     --dx-c-card-title-letter-spacing: -0.1px;

package/src/modules/dx/codeBlock/codeBlock.css

@@ -30,12 +30,12 @@ pre {
 }
 
 .dx-theme-dark .header-text {
-    color: white;
+    color: var(--sds-g-gray-1);
 }
 
 .header-text-icon {
     margin-right: var(--dx-g-spacing-sm);
-    background-color: white;
+    background-color: var(--sds-g-gray-1);
     border-radius: 50%;
     height: 24px;
     width: 24px;
@@ -58,7 +58,10 @@ pre {
 
 div.dx-theme-dark {
     position: relative;
-    border: var(--dx-g-dark-mode-toggle-code-block-border);
+    border: var(
+        --dx-c-code-block-border,
+        var(--dx-g-dark-mode-toggle-code-block-border)
+    );
     border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
 }
 
@@ -96,7 +99,7 @@ div.dx-theme-light {
 }
 
 .dx-theme-dark .dx-code-block-heading {
-    color: white !important;
+    color: var(--sds-g-gray-1) !important;
 }
 
 .toolbar-item {
@@ -109,19 +112,19 @@ div.dx-theme-light {
 }
 
 .dx-theme-dark .btn {
-    --dx-c-button-primary-color: #fff;
+    --dx-c-button-primary-color: var(--sds-g-gray-1);
     --dx-c-button-primary-color-hover: var(--dx-g-blue-natural-10);
     --dx-c-button-secondary-color-hover: var(--dx-g-blue-vibrant-30);
-    --dx-c-button-custom-color: #fff;
-    --dx-c-button-custom-color-hover: #fff;
+    --dx-c-button-custom-color: var(--sds-g-gray-1);
+    --dx-c-button-custom-color-hover: var(--sds-g-gray-1);
     --dx-c-button-custom-background-hover: var(--dx-g-blue-natural-10);
-    --dx-c-button-inline-color: #fff;
+    --dx-c-button-inline-color: var(--sds-g-gray-1);
 }
 
 .dx-theme-light .btn {
     --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
     --dx-c-button-primary-color-hover: var(--dx-g-gray-60);
-    --dx-c-button-secondary-color-hover: #dddbda;
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
     --dx-c-button-custom-color: var(--dx-g-blue-vibrant-20);
     --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-20);
     --dx-c-button-custom-background-hover: var(--dx-g-gray-60);
@@ -177,7 +180,7 @@ pre[class*="shiki"] {
 }
 
 dx-button {
-    --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
+    --dx-c-button-color-icon: var(--dx-g-cloud-blue-vibrant-50);
 }
 
 .code-block-loader {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -30,6 +30,7 @@
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
+    background: white;
 }
 
 .option:active {

package/src/modules/dx/error/error.css

@@ -87,7 +87,7 @@
     }
 
     .error_content > p {
-        font-size: var(--dx-g-text-md);
+        font-size: var(--dx-g-font-size-body-2, var(--dx-g-text-base));
         margin-top: var(--dx-g-spacing-md);
     }
 }
@@ -111,7 +111,7 @@
     }
 
     .error_content > p {
-        font-size: var(--dx-g-text-md);
+        font-size: var(--dx-g-font-size-body-2, var(--dx-g-text-base));
         margin-top: var(--dx-g-spacing-md);
     }
 }

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

@@ -79,8 +79,14 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--dx-g-dark-mode-toggle-button-color);
-    border: var(--dx-g-dark-mode-toggle-button-border);
+    background-color: var(
+        --dx-c-theme-switch-color-surface,
+        var(--dx-g-dark-mode-toggle-button-color)
+    );
+    border: var(
+        --dx-c-theme-switch-border,
+        var(--dx-g-dark-mode-toggle-button-border)
+    );
     border-radius: 4px;
     cursor: pointer;
 }
@@ -89,7 +95,10 @@
     height: 20px;
     width: 20px;
     background-size: 20px 20px;
-    background-image: var(--dx-g-dark-mode-toggle-icon);
+    background-image: var(
+        --dx-c-theme-switch-icon-image,
+        var(--dx-g-dark-mode-toggle-icon)
+    );
 }
 
 .container {
@@ -102,10 +111,16 @@
     --bottom-spacing: var(--dx-g-spacing-4xl);
     --item-spacing: var(--dx-g-spacing-xl);
     --swoop-z-index: 11;
-    --label-color: var(--dx-themed-featured-content-header-text-color);
+    --label-color: var(
+        --dx-c-featured-content-header-color-text,
+        var(--dx-themed-featured-content-header-text-color)
+    );
 
     position: relative;
-    background-image: var(--dx-themed-featured-content-header-background-swoop);
+    background-image: var(
+        --dx-c-featured-content-header-swoop-image,
+        var(--dx-themed-featured-content-header-background-swoop)
+    );
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -113,7 +128,8 @@
 
 .container.variant_intense {
     background-image: var(
-        --dx-themed-featured-content-header-background-swoop-intense
+        --dx-c-featured-content-header-intense-swoop-image,
+        var(--dx-themed-featured-content-header-background-swoop-intense)
     );
 }
 
@@ -386,18 +402,23 @@ dx-image-and-label {
 
 .container.link-hovered .title-link {
     color: var(
-        --dx-themed-featured-content-header-title-link-light-hover-color
+        --dx-c-featured-content-header-title-link-color-text-hover,
+        var(--dx-themed-featured-content-header-title-link-light-hover-color)
     );
 }
 
 .container.link-hovered.variant_intense .title-link {
     color: var(
-        --dx-themed-featured-content-header-title-link-intense-hover-color
+        --dx-c-featured-content-header-intense-title-link-color-text-hover,
+        var(--dx-themed-featured-content-header-title-link-intense-hover-color)
     );
 }
 
 .variant_intense {
-    --label-color: var(--dx-themed-featured-content-header-intense-label-color);
+    --label-color: var(
+        --dx-c-featured-content-header-intense-label-color-text,
+        var(--dx-themed-featured-content-header-intense-label-color)
+    );
 }
 
 .variant_intense dx-image-and-label {

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -40,7 +40,8 @@ export default class FeaturedContentHeader extends LightningElement {
     @api noSwoop: boolean = false;
     @api dark: boolean = false;
     @api icon: string = "";
-    @api swoopUnderColor: string = "var(--dx-g-fch-swoop-under-color)";
+    @api swoopUnderColor: string =
+        "var(--dx-c-featured-content-header-swoop-color-surface, var(--dx-g-fch-swoop-under-color))";
     @api enableDarkModeToggle: boolean = false;
 
     private _authors?: Array<ImageAndLabel>;

package/src/modules/dx/filterMenu/filterMenu.css

@@ -4,7 +4,7 @@
 :host {
     --dx-c-filter-menu-margin: 0;
     --dx-c-checkbox-font-size: 13px;
-    --dx-g-text-body-color: var(--sds-g-gray-11);
+    --dx-c-text-body-color-text: var(--sds-g-gray-11);
     --horizontal-padding: 20px;
 }
 

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

@@ -41,11 +41,17 @@ footer.signup-variant-no-signup {
     font-size: var(--dx-g-text-sm);
     letter-spacing: 1px;
     text-transform: uppercase;
-    color: var(--dx-footer-themed-header-color);
+    color: var(
+        --dx-c-footer-heading-color-text,
+        var(--dx-footer-themed-header-color)
+    );
 }
 
 .large-signup-heading {
-    color: var(--dx-footer-themed-header-color);
+    color: var(
+        --dx-c-footer-heading-color-text,
+        var(--dx-footer-themed-header-color)
+    );
 }
 
 /* TOP */
@@ -56,9 +62,16 @@ footer.signup-variant-no-signup {
     justify-content: center;
     align-items: center;
     position: relative;
-    background: var(--dx-footer-themed-top-background-color);
+    background: var(
+        --dx-c-footer-top-color-surface,
+        var(--dx-footer-themed-top-background-color)
+    );
     height: 78px;
-    border-bottom: 2px solid var(--dx-footer-themed-top-border-color);
+    border-bottom: 2px solid
+        var(
+            --dx-c-footer-top-color-border,
+            var(--dx-footer-themed-top-border-color)
+        );
 }
 
 .content-container_top > .subheading {
@@ -71,7 +84,10 @@ 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);
+    background: var(
+        --dx-c-footer-top-large-color-surface,
+        var(--dx-footer-themed-top-large-background-color)
+    );
 }
 
 .content-container_top_large_no_signup {
@@ -114,7 +130,7 @@ footer.signup-variant-no-signup {
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
     background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-trees.svg");
-    filter: var(--dx-g-svg-filter);
+    filter: var(--dx-c-footer-graphic-filter, var(--dx-g-svg-filter));
 }
 
 .graphic-mountains {
@@ -122,7 +138,7 @@ footer.signup-variant-no-signup {
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
     background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-mountains-2.svg");
-    filter: var(--dx-g-svg-filter);
+    filter: var(--dx-c-footer-graphic-filter, var(--dx-g-svg-filter));
 }
 
 .graphic-mountains-mobile {
@@ -133,7 +149,7 @@ footer.signup-variant-no-signup {
     height: 56px;
     width: 100px;
     background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-mountains-small-2.svg");
-    filter: var(--dx-g-svg-filter);
+    filter: var(--dx-c-footer-graphic-filter, var(--dx-g-svg-filter));
 }
 
 .graphic-trees-small {
@@ -141,7 +157,7 @@ footer.signup-variant-no-signup {
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
     background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-trees-small.svg");
-    filter: var(--dx-g-svg-filter);
+    filter: var(--dx-c-footer-graphic-filter, var(--dx-g-svg-filter));
 }
 
 .graphic-large {
@@ -151,7 +167,10 @@ footer.signup-variant-no-signup {
     bottom: -2px;
     width: 100%;
     height: 100%;
-    background-image: var(--dx-footer-themed-large-graphic);
+    background-image: var(
+        --dx-c-footer-graphic-image,
+        var(--dx-footer-themed-large-graphic)
+    );
     background-size: 101%;
 }
 
@@ -293,7 +312,10 @@ BEGIN OLD FOOTER STYLES -- CAN BE DELETED ONCE FOOTER MFE IS RE-DEPLOYED
         "logo general" auto
         "socials general" max-content
         "locales general" max-content / auto max-content;
-    background: var(--dx-footer-themed-background-color);
+    background: var(
+        --dx-c-footer-color-surface,
+        var(--dx-footer-themed-background-color)
+    );
     padding-top: var(--dx-g-spacing-4xl);
     padding-bottom: var(--dx-g-spacing-3xl);
 }
@@ -363,14 +385,17 @@ BEGIN OLD FOOTER STYLES -- CAN BE DELETED ONCE FOOTER MFE IS RE-DEPLOYED
 }
 
 .socials > a > svg {
-    fill: var(--dx-footer-themed-svg-icon-color);
+    fill: var(--dx-c-footer-color-icon, var(--dx-footer-themed-svg-icon-color));
     height: 100%;
 }
 
 /* BOTTOM */
 .content-container_bottom {
     display: flex;
-    background: var(--dx-footer-themed-terms-and-conditions-background-color);
+    background: var(
+        --dx-c-footer-terms-color-surface,
+        var(--dx-footer-themed-terms-and-conditions-background-color)
+    );
 }
 
 .content-container_bottom a {

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

@@ -1,5 +1,8 @@
 a {
-    color: var(--dx-footer-themed-header-link-color);
+    color: var(
+        --dx-c-footer-option-link-color-text,
+        var(--dx-footer-themed-header-link-color)
+    );
     text-decoration: none;
     font-family: var(--dx-g-font-sans);
     font-size: 14px;
@@ -7,5 +10,8 @@ a {
 }
 
 a:hover {
-    color: var(--dx-footer-themed-header-link-hover-color);
+    color: var(
+        --dx-c-footer-option-link-color-text-hover,
+        var(--dx-footer-themed-header-link-hover-color)
+    );
 }

package/src/modules/dx/hr/hr.css

@@ -4,7 +4,10 @@
 :host {
     --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
     --dx-c-hr-color: var(--dx-g-gray-95);
-    --dx-c-font-color: var(--dx-g-hr-font-color);
+    --dx-c-font-color: var(
+        --dx-c-hr-label-color-text,
+        var(--dx-g-hr-font-color)
+    );
     --dx-c-stroke-width: 2px;
 }
 

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -28,7 +28,7 @@ dx-formatted-rich-text {
 }
 
 .text-container {
-    --dx-g-text-body-color: var(--dx-g-text-heading-color);
+    --dx-c-text-body-color-text: var(--dx-g-text-heading-color);
 
     display: flex;
     flex-direction: column;

package/src/modules/dx/podcastHost/podcastHost.css

@@ -13,8 +13,11 @@ dx-icon {
 }
 
 .container {
-    background: var(--dx-podcast-host-background-color);
-    box-shadow: var(--dx-g-box-shadow-sm);
+    background: var(
+        --dx-c-podcast-host-color-surface,
+        var(--dx-podcast-host-background-color)
+    );
+    box-shadow: var(--dx-g-elevation-shadow-1, var(--dx-g-box-shadow-sm));
     border-radius: 16px;
     padding: 36px;
     overflow: hidden;
@@ -37,7 +40,7 @@ dx-icon {
 
 .host-bio > p {
     margin: 16px 0;
-    color: var(--dx-g-text-body-color);
+    color: var(--dx-g-color-text-default, var(--dx-g-text-body-color));
 }
 
 .dx-text-label-2 {

package/src/modules/dx/popover/popover.css

@@ -21,7 +21,7 @@
 .popover {
     background: white;
     border: var(--popover-border);
-    box-shadow: var(--dx-g-box-shadow-lg);
+    box-shadow: var(--dx-g-elevation-shadow-3, var(--dx-g-box-shadow-lg));
     border-radius: var(--popover-border-radius);
     width: var(--dx-c-popover-width, 168px);
     max-width: calc(100vw - var(--dx-g-spacing-lg));
@@ -89,7 +89,7 @@
     border: var(--popover-border);
     border-bottom: transparent;
     border-right: transparent;
-    box-shadow: var(--dx-g-box-shadow-lg);
+    box-shadow: var(--dx-g-elevation-shadow-3, var(--dx-g-box-shadow-lg));
     transition: opacity 0.2s linear, transform 0.2s linear;
     transition-delay: 0.02s;
     z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));