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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.42.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": "0923ae80f486a87b3ab0f07cd3c9d8ea9abbff8d"
+    }
 }

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/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));

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-text-md);
-    line-height: var(--dx-g-text-md);
+    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);
     height: initial;
     padding-bottom: var(--dx-g-spacing-sm);
 }

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

@@ -30,9 +30,10 @@
 }
 
 .section-dark {
-    --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);
+    --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);
 }
 
 .section.graphic-top:not(.graphic-overlap) {

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

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-g-text-heading-color: white;
+    --dx-c-text-heading-color-text: 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-text-md);
+        font-size: var(--dx-g-font-size-display-8, var(--dx-g-text-base));
         letter-spacing: unset;
-        line-height: 24px;
+        line-height: var(--dx-g-font-line-height-display-8, 24px);
     }
 
     .quote-attribution-text {

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

@@ -55,7 +55,7 @@ dx-empty-state {
 }
 
 .results-heading {
-    --dx-g-text-body-color: var(--sds-g-gray-14);
+    --dx-c-text-body-color-text: 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-g-text-body-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-text-body-color-text: 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-g-text-body-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-text-body-color-text: var(--dx-g-blue-vibrant-20);
 
     font-weight: var(--dx-g-font-normal);
     display: block;

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

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

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

@@ -25,13 +25,16 @@ span {
 
     background: white;
     transition: var(--dx-g-transition-box-shadow-2x);
-    box-shadow: var(--dx-g-box-shadow-sm);
+    box-shadow: var(
+        --dx-c-card-elevation-shadow,
+        var(--dx-g-elevation-shadow-1, 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-box-shadow-lg);
+    box-shadow: var(--dx-g-elevation-shadow-3, var(--dx-g-box-shadow-lg));
 }
 
 .dx-card-base_borderless {
@@ -43,7 +46,7 @@ span {
 }
 
 .dx-card-base:not(.dx-card-base_borderless):active {
-    box-shadow: var(--dx-g-box-shadow-md);
+    box-shadow: var(--dx-g-elevation-shadow-2, var(--dx-g-box-shadow-md));
 }
 
 .dx-card-base_layout-horizontal {
@@ -132,7 +135,7 @@ span {
     height: 0;
     padding-top: 50%;
     border-radius: var(--dx-g-card-border-radius);
-    box-shadow: var(--dx-g-box-shadow-sm);
+    box-shadow: var(--dx-g-elevation-shadow-1, var(--dx-g-box-shadow-sm));
     transition: var(--dx-g-transition-box-shadow-2x);
     overflow: hidden;
 }
@@ -144,7 +147,10 @@ span {
 /* Card play button */
 
 .dx-play-button {
-    --dx-c-icon-badge-box-shadow: var(--dx-g-box-shadow-sm);
+    --dx-c-icon-badge-box-shadow: var(
+        --dx-g-elevation-shadow-1,
+        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),
@@ -160,18 +166,27 @@ 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-box-shadow-md);
+    --dx-c-icon-badge-box-shadow: var(
+        --dx-g-elevation-shadow-2,
+        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-box-shadow-md);
+    --dx-c-icon-badge-box-shadow: var(
+        --dx-g-elevation-shadow-2,
+        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-card-title-hover-color);
+    --dx-c-card-title-color: var(
+        --dx-c-card-title-color-text-hover,
+        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-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;
+    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);
 }
 
-/* NO WES EQUIVALENT */
+/* NO WES EQUIVALENT. Deprecated: not part of the display scale. Removed under plan 3.3. */
 .dx-text-display-1b {
-    color: var(--dx-g-text-heading-color);
+    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
     font-family: var(--dx-g-font-display);
     font-size: 64px;
     letter-spacing: -1.4px;
@@ -18,70 +18,73 @@
 
 /* WES Display 2 */
 .dx-text-display-2 {
-    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;
+    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);
 }
 
 /* WES Display 3 */
 .dx-text-display-3 {
-    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;
+    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);
 }
 
 /* WES Display 4 */
 .dx-text-display-4 {
-    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;
+    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);
 }
 
 /* Display 5 */
 .dx-text-display-5 {
-    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;
+    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);
 }
 
 /* Display 6 */
 .dx-text-display-6 {
-    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;
+    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);
 }
 
 /* Display 7 */
 .dx-text-display-7 {
-    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;
+    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);
 }
 
 /* Display 8 */
 .dx-text-display-8 {
-    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;
+    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);
 }
 
 /* Body 1 */
 .dx-text-body-1 {
-    color: var(--dx-g-text-body-color);
+    color: var(
+        --dx-c-text-body-color-text,
+        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
+    );
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-lg);
     letter-spacing: 0;
@@ -90,7 +93,10 @@
 
 /* Body 2 */
 .dx-text-body-2 {
-    color: var(--dx-g-text-body-color);
+    color: var(
+        --dx-c-text-body-color-text,
+        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
+    );
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
     letter-spacing: 0;
@@ -99,7 +105,10 @@
 
 /* Body 3 */
 .dx-text-body-3 {
-    color: var(--dx-g-text-body-color);
+    color: var(
+        --dx-c-text-body-color-text,
+        var(--dx-g-color-text-default, var(--dx-g-text-body-color))
+    );
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
     letter-spacing: 0;
@@ -108,13 +117,17 @@
 
 /* Body Caption */
 .dx-text-body-4 {
-    color: var(--dx-g-text-body-color);
+    color: var(
+        --dx-c-text-body-color-text,
+        var(--dx-g-color-text-default, 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);
@@ -132,7 +145,7 @@
 }
 
 .dx-text-label-1 {
-    color: var(--dx-g-text-heading-color);
+    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     letter-spacing: 0.7px;
@@ -142,7 +155,7 @@
 }
 
 .dx-text-label-1-dark {
-    color: var(--dx-g-text-label-color);
+    color: var(--dx-c-text-label-color-text, var(--dx-g-text-label-color));
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     letter-spacing: 0.7px;
@@ -152,7 +165,7 @@
 }
 
 .dx-text-label-2 {
-    color: var(--dx-g-text-heading-color);
+    color: var(--dx-c-text-heading-color-text, var(--dx-g-text-heading-color));
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xs);
     letter-spacing: 0.7px;
@@ -161,7 +174,7 @@
 }
 
 .dx-text-label-3 {
-    color: var(--dx-g-text-label-color);
+    color: var(--dx-c-text-label-color-text, 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);
@@ -171,7 +184,7 @@
 }
 
 .dx-text-label-4 {
-    color: var(--dx-g-text-label-color);
+    color: var(--dx-c-text-label-color-text, 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);

package/LICENSE

@@ -1,12 +0,0 @@
-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.