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

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -93,6 +93,7 @@
         "dx/sectionBanner",
         "dx/sectionSignup",
         "dx/sectionSmall",
+        "dx/searchRedirect",
         "dx/select",
         "dx/sidebar",
         "dx/sidebarOld",

package/package.json

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

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

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

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

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

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

@@ -19,10 +19,7 @@
 
 /* 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-elevation-shadow-1,
-        var(--dx-g-box-shadow-sm)
-    ); /* no shadow as if clickable */
+    box-shadow: 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-c-text-body-color-text: var(--dx-g-indigo-vibrant-40);
+    --dx-g-text-body-color: 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-elevation-shadow-1, var(--dx-g-box-shadow-sm));
+    box-shadow: 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-elevation-shadow-1, var(--dx-g-box-shadow-sm));
+        box-shadow: var(--dx-g-box-shadow-sm);
     }
 
     .dx-text-display-4 {

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

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

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

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

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

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

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

@@ -40,8 +40,7 @@ export default class FeaturedContentHeader extends LightningElement {
     @api noSwoop: boolean = false;
     @api dark: boolean = false;
     @api icon: string = "";
-    @api swoopUnderColor: string =
-        "var(--dx-c-featured-content-header-swoop-color-surface, var(--dx-g-fch-swoop-under-color))";
+    @api swoopUnderColor: string = "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-c-text-body-color-text: var(--sds-g-gray-11);
+    --dx-g-text-body-color: var(--sds-g-gray-11);
     --horizontal-padding: 20px;
 }
 

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

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

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

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

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

@@ -4,10 +4,7 @@
 :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-c-hr-label-color-text,
-        var(--dx-g-hr-font-color)
-    );
+    --dx-c-font-color: 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-c-text-body-color-text: var(--dx-g-text-heading-color);
+    --dx-g-text-body-color: var(--dx-g-text-heading-color);
 
     display: flex;
     flex-direction: column;

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

@@ -13,11 +13,8 @@ dx-icon {
 }
 
 .container {
-    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));
+    background: var(--dx-podcast-host-background-color);
+    box-shadow: var(--dx-g-box-shadow-sm);
     border-radius: 16px;
     padding: 36px;
     overflow: hidden;
@@ -40,7 +37,7 @@ dx-icon {
 
 .host-bio > p {
     margin: 16px 0;
-    color: var(--dx-g-color-text-default, var(--dx-g-text-body-color));
+    color: 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-elevation-shadow-3, var(--dx-g-box-shadow-lg));
+    box-shadow: 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-elevation-shadow-3, var(--dx-g-box-shadow-lg));
+    box-shadow: 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));

package/src/modules/dx/searchRedirect/searchRedirect.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/searchRedirect/searchRedirect.ts

@@ -0,0 +1,111 @@
+import { LightningElement, api } from "lwc";
+
+const DEFAULT_LANG = "en-us";
+
+// Language ids accepted by the developer-website /search page (`locales` in its
+// content/en-us/pages/search.njk, lowercase BCP 47). The page ignores any ?lang=
+// value outside this set.
+const SEARCH_LANGS = new Set([
+    "en-us",
+    "ja-jp",
+    "de-de",
+    "fr-fr",
+    "es-es",
+    "es-mx",
+    "it-it",
+    "pt-br",
+    "nl-nl",
+    "da-dk",
+    "fi-fi",
+    "nb-no",
+    "sv-se",
+    "ru-ru",
+    "ko-kr",
+    "zh-cn",
+    "zh-tw"
+]);
+
+// First-path-segment prefixes that imply a language, e.g. /jp/docs -> ja-jp.
+const PATH_PREFIX_LANG: Record<string, string> = {
+    jp: "ja-jp",
+    jpblogs: "ja-jp"
+};
+const LOCALE_SEGMENT = /^[a-z]{2}-[a-z]{2}$/i;
+
+/**
+ * Derives the search language id from a URL path. Docs carry the locale as
+ * /docs/<product>/<locale>/... or /docs/atlas.<locale>.<guide>/...; other pages
+ * lead with it (/ja-jp/...) or use a prefix such as /jp/. Returns en-us when no
+ * supported language is found.
+ */
+export function langFromPath(pathname: string): string {
+    const segs = pathname.split("/").filter(Boolean);
+    const first = (segs[0] || "").toLowerCase();
+    if (first === "docs" && segs[1]) {
+        const atlas = segs[1].match(/^atlas\.([a-z]{2}-[a-z]{2})\./i);
+        const code = (
+            atlas ? atlas[1] : LOCALE_SEGMENT.test(segs[2] || "") ? segs[2] : ""
+        ).toLowerCase();
+        if (SEARCH_LANGS.has(code)) {
+            return code;
+        }
+    }
+    if (SEARCH_LANGS.has(first)) {
+        return first;
+    }
+    return PATH_PREFIX_LANG[first] || DEFAULT_LANG;
+}
+
+/** Builds the relative search URL, adding `lang` only for non-default languages. */
+export function buildSearchUrl(
+    searchPath: string,
+    query: string,
+    pathname: string
+): string {
+    const params = new URLSearchParams({ q: query });
+    const lang = langFromPath(pathname);
+    if (lang !== DEFAULT_LANG) {
+        params.set("lang", lang);
+    }
+    return `${searchPath}?${params.toString()}`;
+}
+
+/**
+ * Redirects global nav searches to a search page on the current host.
+ *
+ * With `search-spa="true"` in the header settings, the nav doesn't navigate on
+ * submit; it dispatches `www_spasearch` with { searchTerm } and leaves navigation
+ * to the host page. This component handles that event, redirecting to
+ * `<searchPath>?q=<term>` and adding `&lang=<id>` when the page isn't English.
+ * Render it once next to <dx-global-header>.
+ *
+ * Mirrors arch-xsf-mfe-events; once Developer and Architect share a search, this
+ * can move into dx-global-header.
+ */
+export default class SearchRedirect extends LightningElement {
+    @api searchPath: string = "/search";
+
+    connectedCallback(): void {
+        document.addEventListener("www_spasearch", this.handleSearch);
+    }
+
+    disconnectedCallback(): void {
+        document.removeEventListener("www_spasearch", this.handleSearch);
+    }
+
+    private handleSearch = (event: Event): void => {
+        const searchTerm = (
+            (event as CustomEvent<{ searchTerm?: string }>).detail
+                ?.searchTerm || ""
+        ).trim();
+        if (searchTerm) {
+            window.location.assign(
+                buildSearchUrl(
+                    this.searchPath,
+                    searchTerm,
+                    window.location.pathname
+                )
+            );
+        }
+    };
+}

package/src/modules/dx/searchResults/searchResults.css

@@ -39,8 +39,8 @@
 
 .CoveoTab p {
     color: var(--dx-g-blue-vibrant-50);
-    font-size: var(--dx-g-font-size-action-2, var(--dx-g-text-sm));
-    line-height: var(--dx-g-font-line-height-action-2, 20px);
+    font-size: var(--dx-g-text-md);
+    line-height: var(--dx-g-text-md);
     height: initial;
     padding-bottom: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/section/section.css

@@ -30,10 +30,9 @@
 }
 
 .section-dark {
-    --dx-c-section-heading-font-color: white;
-    --dx-c-text-heading-color-text: white;
-    --dx-c-text-body-color-text: var(--dx-g-blue-vibrant-90);
-    --dx-c-text-label-color-text: var(--dx-g-blue-vibrant-90);
+    --dx-g-text-heading-color: white;
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-90);
+    --dx-g-text-label-color: var(--dx-g-blue-vibrant-90);
 }
 
 .section.graphic-top:not(.graphic-overlap) {

package/src/modules/dx/sectionBanner/sectionBanner.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-text-heading-color-text: white;
+    --dx-g-text-heading-color: white;
     --padding-top: var(--dx-g-spacing-4xl);
     --margin-top: 80px;
     --dx-c-section-banner-content-align: flex-end;
@@ -126,9 +126,9 @@
     }
 
     .quote-content p.quote-attribution {
-        font-size: var(--dx-g-font-size-display-8, var(--dx-g-text-base));
+        font-size: var(--dx-g-text-md);
         letter-spacing: unset;
-        line-height: var(--dx-g-font-line-height-display-8, 24px);
+        line-height: 24px;
     }
 
     .quote-attribution-text {

package/src/modules/dx/sidebar/sidebar.css

@@ -55,7 +55,7 @@ dx-empty-state {
 }
 
 .results-heading {
-    --dx-c-text-body-color-text: var(--sds-g-gray-14);
+    --dx-g-text-body-color: var(--sds-g-gray-14);
 
     margin-bottom: var(--dx-g-spacing-sm);
     padding-top: var(--dx-g-spacing-smd);

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -31,7 +31,7 @@ a {
 }
 
 .sidebar-item:hover .description {
-    --dx-c-text-body-color-text: var(--dx-g-blue-vibrant-50);
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-50);
 }
 
 /* Selected: full-width cloud blue bar + 4px blue-vibrant-40 left accent; text matches unselected */
@@ -85,7 +85,7 @@ a {
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
 
-    --dx-c-text-body-color-text: var(--dx-g-blue-vibrant-20);
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
 
     font-weight: var(--dx-g-font-normal);
     display: block;

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

@@ -25,21 +25,12 @@
 }
 
 dx-icon-badge {
-    --dx-c-icon-badge-background-color: var(
-        --dx-c-socials-color-surface,
-        var(--dx-g-social-svg-background-color)
-    );
-    --dx-c-icon-badge-color: var(
-        --dx-c-socials-color-icon,
-        var(--dx-g-social-svg-icon-color)
-    );
+    --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-c-socials-color-surface-hover,
-        var(--dx-g-social-svg-hover-color)
-    );
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-hover-color);
 }

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

@@ -25,16 +25,13 @@ span {
 
     background: white;
     transition: var(--dx-g-transition-box-shadow-2x);
-    box-shadow: var(
-        --dx-c-card-elevation-shadow,
-        var(--dx-g-elevation-shadow-1, var(--dx-g-box-shadow-sm))
-    );
+    box-shadow: var(--dx-g-box-shadow-sm);
     border-radius: var(--dx-g-card-border-radius);
     overflow: hidden;
 }
 
 .dx-card-base:not(.dx-card-base_borderless):hover {
-    box-shadow: var(--dx-g-elevation-shadow-3, var(--dx-g-box-shadow-lg));
+    box-shadow: var(--dx-g-box-shadow-lg);
 }
 
 .dx-card-base_borderless {
@@ -46,7 +43,7 @@ span {
 }
 
 .dx-card-base:not(.dx-card-base_borderless):active {
-    box-shadow: var(--dx-g-elevation-shadow-2, var(--dx-g-box-shadow-md));
+    box-shadow: var(--dx-g-box-shadow-md);
 }
 
 .dx-card-base_layout-horizontal {
@@ -135,7 +132,7 @@ span {
     height: 0;
     padding-top: 50%;
     border-radius: var(--dx-g-card-border-radius);
-    box-shadow: var(--dx-g-elevation-shadow-1, var(--dx-g-box-shadow-sm));
+    box-shadow: var(--dx-g-box-shadow-sm);
     transition: var(--dx-g-transition-box-shadow-2x);
     overflow: hidden;
 }
@@ -147,10 +144,7 @@ span {
 /* Card play button */
 
 .dx-play-button {
-    --dx-c-icon-badge-box-shadow: var(
-        --dx-g-elevation-shadow-1,
-        var(--dx-g-box-shadow-sm)
-    );
+    --dx-c-icon-badge-box-shadow: var(--dx-g-box-shadow-sm);
     --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-50);
     --dx-c-icon-badge-icon-transform: translateX(2px);
     --dx-c-icon-badge-transition: var(--dx-g-transition-box-shadow-2x),
@@ -166,27 +160,18 @@ a.dx-card-base:hover .dx-card-base_image {
 .dx-card-base_link-hovered a .dx-play-button,
 a.dx-card-base:hover a .dx-play-button {
     --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-40);
-    --dx-c-icon-badge-box-shadow: var(
-        --dx-g-elevation-shadow-2,
-        var(--dx-g-box-shadow-md)
-    );
+    --dx-c-icon-badge-box-shadow: var(--dx-g-box-shadow-md);
 }
 
 .dx-card-base_link-hovered a.dx-card-base_borderless-image_link,
 a.dx-card-base:hover a.dx-card-base_borderless-image_link {
-    --dx-c-icon-badge-box-shadow: var(
-        --dx-g-elevation-shadow-2,
-        var(--dx-g-box-shadow-md)
-    );
+    --dx-c-icon-badge-box-shadow: var(--dx-g-box-shadow-md);
 }
 
 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-c-card-title-color-text-hover,
-        var(--dx-card-title-hover-color)
-    );
+    --dx-c-card-title-color: var(--dx-card-title-hover-color);
 }
 
 /* Line Limits */

package/src/modules/dxHelpers/text/text.css

@@ -1,15 +1,15 @@
 /* WES Display 1 */
 .dx-text-display-1 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-1, var(--dx-g-text-6xl));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-1, -1.8px);
-    line-height: var(--dx-g-font-line-height-display-1, 88px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-6xl);
+    letter-spacing: -1.8px;
+    line-height: 88px;
 }
 
-/* NO WES EQUIVALENT. Deprecated: not part of the display scale. Removed under plan 3.3. */
+/* NO WES EQUIVALENT */
 .dx-text-display-1b {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
+    color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: 64px;
     letter-spacing: -1.4px;
@@ -18,73 +18,70 @@
 
 /* WES Display 2 */
 .dx-text-display-2 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-2, var(--dx-g-text-5xl));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-2, -1.2px);
-    line-height: var(--dx-g-font-line-height-display-2, 64px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-5xl);
+    letter-spacing: -1.2px;
+    line-height: 64px;
 }
 
 /* WES Display 3 */
 .dx-text-display-3 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-3, var(--dx-g-text-4xl));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-3, -1px);
-    line-height: var(--dx-g-font-line-height-display-3, 56px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-4xl);
+    letter-spacing: -1px;
+    line-height: 56px;
 }
 
 /* WES Display 4 */
 .dx-text-display-4 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-4, var(--dx-g-text-3xl));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-4, -0.8px);
-    line-height: var(--dx-g-font-line-height-display-4, 48px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-3xl);
+    letter-spacing: -0.8px;
+    line-height: 48px;
 }
 
 /* Display 5 */
 .dx-text-display-5 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-5, var(--dx-g-text-2xl));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-5, -0.4px);
-    line-height: var(--dx-g-font-line-height-display-5, 40px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-2xl);
+    letter-spacing: -0.4px;
+    line-height: 40px;
 }
 
 /* Display 6 */
 .dx-text-display-6 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-6, var(--dx-g-text-xl));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-6, -0.4px);
-    line-height: var(--dx-g-font-line-height-display-6, 32px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-xl);
+    letter-spacing: -0.4px;
+    line-height: 32px;
 }
 
 /* Display 7 */
 .dx-text-display-7 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-7, var(--dx-g-text-lg));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-7, -0.4px);
-    line-height: var(--dx-g-font-line-height-display-7, 28px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    letter-spacing: -0.4px;
+    line-height: 28px;
 }
 
 /* Display 8 */
 .dx-text-display-8 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
-    font-family: var(--dx-g-font-family-heading, var(--dx-g-font-display));
-    font-size: var(--dx-g-font-size-display-8, var(--dx-g-text-base));
-    letter-spacing: var(--dx-g-font-letter-spacing-display-8, -0.5px);
-    line-height: var(--dx-g-font-line-height-display-8, 24px);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    letter-spacing: -0.5px;
+    line-height: 24px;
 }
 
 /* Body 1 */
 .dx-text-body-1 {
-    color: var(
-        --dx-c-text-body-color-text,
-        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
-    );
+    color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-lg);
     letter-spacing: 0;
@@ -93,10 +90,7 @@
 
 /* Body 2 */
 .dx-text-body-2 {
-    color: var(
-        --dx-c-text-body-color-text,
-        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
-    );
+    color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
     letter-spacing: 0;
@@ -105,10 +99,7 @@
 
 /* Body 3 */
 .dx-text-body-3 {
-    color: var(
-        --dx-c-text-body-color-text,
-        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
-    );
+    color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     letter-spacing: 0;
@@ -117,17 +108,13 @@
 
 /* Body Caption */
 .dx-text-body-4 {
-    color: var(
-        --dx-c-text-body-color-text,
-        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
-    );
+    color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-xs);
     letter-spacing: 0;
     line-height: 18px;
 }
 
-/* Deprecated: no use found. Removed under plan 3.3. */
 .dx-text-button-brand {
     color: var(--dx-g-text-button-color);
     font-family: var(--dx-g-font-display);
@@ -145,7 +132,7 @@
 }
 
 .dx-text-label-1 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
+    color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     letter-spacing: 0.7px;
@@ -155,7 +142,7 @@
 }
 
 .dx-text-label-1-dark {
-    color: var(--dx-c-text-label-color-text, var(--dx-g-text-label-color));
+    color: var(--dx-g-text-label-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     letter-spacing: 0.7px;
@@ -165,7 +152,7 @@
 }
 
 .dx-text-label-2 {
-    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
+    color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xs);
     letter-spacing: 0.7px;
@@ -174,7 +161,7 @@
 }
 
 .dx-text-label-3 {
-    color: var(--dx-c-text-label-color-text, var(--dx-g-text-label-color));
+    color: var(--dx-g-text-label-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xs);
     font-weight: var(--dx-g-font-demi);
@@ -184,7 +171,7 @@
 }
 
 .dx-text-label-4 {
-    color: var(--dx-c-text-label-color-text, var(--dx-g-text-label-color));
+    color: var(--dx-g-text-label-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-base);
     font-weight: var(--dx-g-font-demi);