@salesforcedevs/dx-components 1.3.358 → 1.3.360

package/package.json

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

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

@@ -5,9 +5,12 @@
     font-size: inherit;
 
     --dx-c-button-background-color: transparent;
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-primary-color: var(--dx-g-button-primary-color);
+    --dx-c-button-secondary-color: var(--dx-g-button-secondary-color);
     --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
-    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-secondary-color-hover: var(
+        --dx-g-button-secondary-color-hover
+    );
     --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
     --dx-c-button-justify-content: center;
     --dx-c-button-opacity: 1;
@@ -147,8 +150,8 @@
 
 .button.variant_secondary,
 .button.variant_quaternary {
-    color: var(--dx-c-button-primary-color);
-    border: 1px solid var(--dx-c-button-primary-color);
+    color: var(--dx-c-button-secondary-color);
+    border: 1px solid var(--dx-c-button-secondary-color);
 }
 
 .button.variant_secondary:hover,

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

@@ -6,7 +6,6 @@
 :host {
     width: 100%;
 
-    /* --dx-c-featured-content-header-background-color */
     --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-padding-horizontal: var(
         --dx-g-page-padding-horizontal
@@ -20,10 +19,6 @@
     --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-image-container-transform: scale(0.7)
         translateY(14px);
-    --dx-c-featured-content-header-swoop-display: block;
-    --dx-c-featured-content-header-swoop-height: 30%;
-    --dx-c-featured-content-header-background-image-position: top right;
-    --dx-c-featured-content-header-background-image-size: contain;
     --dx-c-featured-content-header-image-padding-top: calc(
         50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
     );
@@ -34,6 +29,11 @@
         var(--image-radius);
 }
 
+.container-layout {
+    padding: var(--dx-c-featured-content-header-padding-vertical)
+        var(--dx-c-featured-content-header-padding-horizontal);
+}
+
 .container {
     --image-radius: var(--dx-g-spacing-smd);
 
@@ -43,27 +43,20 @@
     /* actual spacing between bottom of graphic and rest of page content */
     --bottom-spacing: var(--dx-g-spacing-4xl);
     --item-spacing: var(--dx-g-spacing-xl);
-    --swoop-height: var(--dx-c-featured-content-header-swoop-height);
-    --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
-    --label-color: var(--dx-g-indigo-vibrant-40);
+    --label-color: var(--dx-themed-featured-content-header-text-color);
 
     position: relative;
-    background: var(
-        --dx-c-featured-content-header-background-color,
-        var(--dx-g-indigo-vibrant-90)
-    );
+    background-image: var(--dx-themed-featured-content-header-background-swoop);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
-.container-layout {
-    padding: var(--dx-c-featured-content-header-padding-vertical)
-        var(--dx-c-featured-content-header-padding-horizontal);
-    background-image: var(--background-image);
-    background-repeat: no-repeat;
-    background-position: var(
-        --dx-c-featured-content-header-background-image-position
+.container.variant_intense {
+    background-image: var(
+        --dx-themed-featured-content-header-background-swoop-intense
     );
-    background-size: var(--dx-c-featured-content-header-background-image-size);
 }
 
 /* LAYOUTS */
@@ -76,8 +69,6 @@
 }
 
 .img-placement_below .container-layout {
-    --swoop-inset: calc(80px + 38vw);
-
     margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
 }
 
@@ -85,22 +76,6 @@
     overflow: hidden;
 }
 
-/* SWOOP SILHOUETTE */
-
-.swoop-silhouette {
-    display: var(--dx-c-featured-content-header-swoop-display);
-    position: absolute;
-    bottom: -2px;
-    left: -1px;
-    z-index: calc(var(--swoop-z-index) + 1);
-    height: var(--swoop-height);
-    overflow: hidden;
-    pointer-events: none;
-
-    /* Add 2px to cover subpixel rendering svg issue where a gap shows on the sides */
-    width: calc(100vw + 2px);
-}
-
 /* BOTTOM GRAPHIC */
 
 .bg-image-container {
@@ -350,7 +325,7 @@ a.image-container > img {
 
 .label {
     grid-area: label;
-    color: var(--dx-c-featured-content-label-color, var(--label-color));
+    color: var(--label-color);
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
@@ -386,26 +361,6 @@ dx-image-and-label {
     padding-right: var(--dx-g-spacing-lg);
 }
 
-/* DARK VARIANT */
-
-.variant_dark {
-    --label-color: rgb(190 199 246);
-
-    background: var(
-        --dx-c-featured-content-header-background-color,
-        linear-gradient(-180deg, rgb(40 23 153) 0%, rgb(46 43 182) 100%)
-    );
-}
-
-.variant_dark dx-image-and-label {
-    --dx-c-image-and-label-text-color: white;
-}
-
-.variant_dark .title,
-.variant_dark .body {
-    color: white;
-}
-
 /* SHARED LINK HOVERING */
 
 .container.link-hovered a.image-container > img {
@@ -413,21 +368,28 @@ dx-image-and-label {
 }
 
 .container.link-hovered .title-link {
-    color: var(--dx-g-link-hover-color);
+    color: var(
+        --dx-themed-featured-content-header-title-link-light-hover-color
+    );
 }
 
-.container.link-hovered.variant_dark .title-link {
-    color: var(--dx-g-indigo-vibrant-90);
+.container.link-hovered.variant_intense .title-link {
+    color: var(
+        --dx-themed-featured-content-header-title-link-intense-hover-color
+    );
 }
 
-@media screen and (min-width: 1920px) {
-    .swoop-container,
-    .swoop-silhouette {
-        left: initial;
-        right: 0;
-        transform: initial;
-        width: 1920px;
-    }
+.variant_intense {
+    --label-color: var(--dx-themed-featured-content-header-intense-label-color);
+}
+
+.variant_intense dx-image-and-label {
+    --dx-c-image-and-label-text-color: white;
+}
+
+.variant_intense .title,
+.variant_intense .body {
+    color: white;
 }
 
 @media screen and (max-width: 1401px) {
@@ -442,12 +404,6 @@ dx-image-and-label {
     }
 }
 
-@media screen and (min-width: 1400px) {
-    .img-placement_below {
-        --swoop-inset: 680px;
-    }
-}
-
 @media screen and (max-width: 1024px) {
     .container {
         --vertical-padding: 80px;
@@ -455,10 +411,6 @@ dx-image-and-label {
         --item-spacing: var(--dx-g-spacing-md);
     }
 
-    .container:not(.img-placement_below) {
-        --swoop-inset: 64px;
-    }
-
     .img-placement_inline .container-layout {
         display: grid;
         grid-template-areas: "label" "image" "main";

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -93,40 +93,6 @@
             >
                 <img src={imgSrc} alt={imgAlt} />
             </a>
-            <template if:false={noSwoop}>
-                <svg
-                    class="swoop-silhouette"
-                    width="1920px"
-                    height="331px"
-                    viewBox="0 0 1920 331"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    preserveAspectRatio="none"
-                >
-                    <defs>
-                        <path
-                            d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                            id="path-1"
-                        ></path>
-                    </defs>
-                    <g
-                        id="Documentation-landing-page"
-                        stroke="none"
-                        stroke-width="1"
-                        fill="none"
-                        fill-rule="evenodd"
-                    >
-                        <mask id="mask-2" fill="white">
-                            <use xlink:href="#path-1"></use>
-                        </mask>
-                        <use
-                            id="Combined-Shape"
-                            fill={swoopUnderColor}
-                            xlink:href="#path-1"
-                        ></use>
-                    </g>
-                </svg>
-            </template>
         </div>
         <div class="blue-circle" if:true={hasIcon}>
             <dx-icon

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

@@ -21,7 +21,6 @@ export default class FeaturedContentHeader extends LightningElement {
     @api imgSrc?: string;
     @api imgAlt?: string = "Featured content image";
     @api imgPlacement?: "inline" | "below" = "inline";
-    @api dark: boolean = false;
     @api href?: string;
     @api target?: string | null = null;
     @api header!: string;
@@ -35,8 +34,9 @@ export default class FeaturedContentHeader extends LightningElement {
         | "big-moon"
         | null = null;
     @api noSwoop: boolean = false;
+    @api dark: boolean = false;
     @api icon: string = "";
-    @api swoopUnderColor: string = "#FFFFFF";
+    @api swoopUnderColor: string = "var(--dx-g-fch-swoop-under-color)";
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
@@ -71,7 +71,7 @@ export default class FeaturedContentHeader extends LightningElement {
         return cx(
             "container",
             this.imgSrc && `img-placement_${this.imgPlacement}`,
-            this.dark && "variant_dark",
+            this.dark && "variant_intense",
             this.isLinkHovered && "link-hovered",
             !this.isSlotEmpty && "has-slotted",
             this.backgroundImgId && `custom-bg-${this.backgroundImgId}`

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

@@ -119,7 +119,7 @@ footer.signup-variant-no-signup {
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees.svg");
-    filter: var(--dx-footer-themed-svg-filter);
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-mountains {
@@ -127,7 +127,7 @@ footer.signup-variant-no-signup {
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-2.svg");
-    filter: var(--dx-footer-themed-svg-filter);
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-mountains-mobile {
@@ -138,7 +138,7 @@ footer.signup-variant-no-signup {
     height: 56px;
     width: 100px;
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-small-2.svg");
-    filter: var(--dx-footer-themed-svg-filter);
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-trees-small {
@@ -146,7 +146,7 @@ footer.signup-variant-no-signup {
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
     background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees-small.svg");
-    filter: var(--dx-footer-themed-svg-filter);
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-large {

package/src/modules/dx/helmet/helmet.css

@@ -58,7 +58,7 @@ a:hover {
     --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
 }
 
-.helmet.variant_dark {
+.helmet.variant_intense {
     background-color: var(--dx-g-blue-vibrant-40);
 
     --dx-c-home-link-color: white;