@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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

@@ -1,18 +1,16 @@
-@import "helpers/button";
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     width: 100%;
 
-    --dx-c-featured-content-header-background-color: var(
-        --dx-g-indigo-vibrant-90
-    );
     --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-padding-horizontal: var(
         --dx-g-page-padding-horizontal
     );
+    --dx-c-featured-content-header-padding-vertical: var(--dx-g-spacing-6xl);
     --dx-c-featured-content-main-content-max-width: 840px;
     --dx-c-bottom-image-width: calc(
         100vw - var(--dx-g-page-padding-horizontal-lg) * 2
@@ -21,6 +19,77 @@
     --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-image-padding-top: calc(
+        50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
+    );
+    --dx-c-featured-content-header-image-margin-right: calc(
+        var(--dx-c-featured-content-header-padding-horizontal) * -1
+    );
+    --dx-c-featured-content-header-image-border-radius: var(--image-radius) 0 0
+        var(--image-radius);
+}
+
+.container-layout {
+    padding: var(--dx-c-featured-content-header-padding-vertical)
+        var(--dx-c-featured-content-header-padding-horizontal);
+}
+
+.title-bar {
+    padding: 0 40px;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 0 0 2px #0003;
+    color: var(--label-color);
+}
+
+@media screen and (max-width: 500px) {
+    .title-bar {
+        padding: 16px 30px;
+        min-height: 125px;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: 0 0 0 2px #0003;
+        color: var(--label-color);
+    }
+}
+
+.title-bar .left-div {
+    margin-right: 20px;
+}
+
+.title-bar .right-div {
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+.title-bar h1 {
+    color: var(--label-color);
+}
+
+.title-bar p {
+    color: var(--label-color);
+}
+
+.dark-mode-button {
+    width: 44px;
+    height: 44px;
+    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);
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.dark-mode-icon {
+    height: 20px;
+    width: 20px;
+    background-size: 20px 20px;
+    background-image: var(--dx-g-dark-mode-toggle-icon);
 }
 
 .container {
@@ -32,28 +101,32 @@
     /* 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: 30%;
-    --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
+    --label-color: var(--dx-themed-featured-content-header-text-color);
 
     position: relative;
-    padding: var(--vertical-padding)
-        var(--dx-c-featured-content-header-padding-horizontal);
-    background-color: var(--dx-c-featured-content-header-background-color);
+    background-image: var(--dx-themed-featured-content-header-background-swoop);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.container.variant_intense {
+    background-image: var(
+        --dx-themed-featured-content-header-background-swoop-intense
+    );
 }
 
 /* LAYOUTS */
 
-.img-placement_inline {
+.img-placement_inline .container-layout {
     display: grid;
     grid-template-areas: "label label" "main image";
     grid-template-columns: 50% auto;
     grid-gap: 0 80px;
 }
 
-.img-placement_below {
-    --swoop-inset: calc(80px + 38vw);
-
+.img-placement_below .container-layout {
     margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
 }
 
@@ -61,21 +134,6 @@
     overflow: hidden;
 }
 
-/* SWOOP SILHOUETTE */
-
-.swoop-silhouette {
-    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 {
@@ -145,29 +203,7 @@
     display: none;
 }
 
-.custom-bg-codey::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url(/assets/svg/cloud-1.svg), url(/assets/svg/cloud-2.svg),
-        url(/assets/svg/trees.svg);
-    background-position: top center, 102% 10%, 65% 90%;
-    background-repeat: no-repeat, no-repeat, no-repeat;
-}
-@media screen and (max-width: 1174px) {
-    .custom-bg-codey::after {
-        background-image: url(/assets/svg/cloud-2.svg);
-        background-position: calc(100% + 30px) -20%;
-    }
-}
 @media screen and (max-width: 1024px) {
-    .custom-bg-codey::after {
-        background-position: calc(100% + 30px) -40%;
-    }
-
     .bg-codey {
         width: 300px;
         margin-top: -50px;
@@ -182,56 +218,66 @@
         display: none;
     }
 }
-@media screen and (max-width: 768px) {
-    .custom-bg-codey::after {
-        background-position: calc(100% + 80px) -100px;
-    }
-}
 
-.custom-bg-blog::after {
+.custom-bg-trial::after {
     content: "";
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/trial-left.svg"),
+        url("https://a.sfdcstatic.com/developer-website/images/trial-right.svg");
+    background-position: var(--dx-g-page-padding-horizontal) 50px,
+        right 15px top;
+    background-repeat: no-repeat;
     position: absolute;
-    top: 0;
     left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
-    background-image: url(/assets/svg/fch-blog-cloud-1.png),
-        url(/assets/svg/fch-blog-cloud-2.png),
-        url(/assets/svg/fch-blog-planet.png);
-    background-position: calc(100% + -60px) -80px, 67% calc(100% + -100px),
-        54% 70px;
-    background-repeat: no-repeat, no-repeat, no-repeat;
 }
+
 @media screen and (max-width: 1024px) {
-    .custom-bg-blog::after {
-        background-image: url(/assets/svg/fch-blog-cloud-1.png);
-        background-position: calc(100% + 78px) -60px;
+    .custom-bg-trial::after {
+        background-image: url("https://a.sfdcstatic.com/developer-website/images/trial-left.svg");
+        background-position: 48px 30px;
+        background-size: contain;
     }
+}
 
-    .custom-bg-blog::before {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-image: url(/assets/svg/fch-blog-cloud-2.png);
-        background-repeat: no-repeat;
-        background-position: bottom left;
-        transform: rotate(180deg);
-        left: -96%;
-        bottom: -90%;
-    }
+.custom-bg-big-moon::after {
+    content: "";
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/big-moon.svg");
+    background-position: top right;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
 }
-@media screen and (max-width: 600px) {
-    .custom-bg-blog::after {
-        background-size: 225px;
-        background-position: calc(100% + 58px) -60px;
+
+.blue-circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/blue-circle.svg");
+    top: 110px;
+    right: 230px;
+    left: unset;
+    width: 126px;
+    height: 126px;
+    z-index: 1;
+}
+
+@media screen and (max-width: 1230px) {
+    .custom-bg-big-moon::after,
+    .blue-circle {
+        display: none;
     }
 }
 
 /* Z INDEX STUFF */
 
 .label,
-.main-content,
+.featured-content-main-content,
 .image-container {
     position: relative;
     z-index: var(--swoop-z-index);
@@ -253,7 +299,7 @@ img {
     left: 0;
     width: 100%;
     height: 100%;
-    border: 1px solid rgba(24, 24, 24, 0.1);
+    border: 1px solid rgb(24 24 24 / 10%);
     border-radius: var(--image-radius);
     object-fit: cover;
 }
@@ -269,12 +315,12 @@ a.image-container > img {
 
 /* MAIN CONTENT AREA */
 
-.main-content {
+.featured-content-main-content {
     grid-area: main;
     max-width: var(--dx-c-featured-content-main-content-max-width);
 }
 
-.main-content > * {
+.featured-content-main-content > * {
     z-index: 10;
 }
 
@@ -297,49 +343,39 @@ a.image-container > img {
 
 .label {
     grid-area: label;
-    color: var(--dx-g-indigo-vibrant-40);
-    padding-bottom: var(--dx-g-spacing-lg);
+    color: var(--label-color);
 }
 
-.dx-text-heading-2 {
+.dx-text-display-2 {
     padding-bottom: var(--dx-g-spacing-sm);
     display: block;
 }
 
-/* AUTHORS */
+/* BUTTONS */
 
-.authors {
-    padding-top: var(--dx-g-spacing-sm);
+.buttons {
+    display: flex;
+    padding-top: var(--item-spacing);
     padding-bottom: var(--item-spacing);
 }
 
-dx-image-and-label {
-    --dx-c-image-and-label-text-color: var(--dx-g-text-heading-color);
-
+dx-button {
     display: inline-block;
     padding-right: var(--dx-g-spacing-lg);
 }
 
-/* DARK VARIANT */
-.variant_dark {
-    background: linear-gradient(
-        -180deg,
-        rgb(40, 23, 153) 0%,
-        rgb(46, 43, 182) 100%
-    );
-}
+/* AUTHORS */
 
-.variant_dark dx-image-and-label {
-    --dx-c-image-and-label-text-color: white;
+.authors {
+    padding-top: var(--dx-g-spacing-sm);
+    padding-bottom: var(--item-spacing);
 }
 
-.variant_dark .label {
-    color: rgb(190, 199, 246);
-}
+dx-image-and-label {
+    --dx-c-image-and-label-text-color: var(--dx-g-text-heading-color);
 
-.variant_dark .title,
-.variant_dark .body {
-    color: white;
+    display: inline-block;
+    padding-right: var(--dx-g-spacing-lg);
 }
 
 /* SHARED LINK HOVERING */
@@ -349,58 +385,50 @@ dx-image-and-label {
 }
 
 .container.link-hovered .title-link {
-    color: var(--dx-g-blue-vibrant-40);
+    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) {
     .img-placement_below .image-container {
-        padding-top: calc(
-            50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
-        );
+        padding-top: var(--dx-c-featured-content-header-image-padding-top);
         margin-top: var(--item-spacing);
-        margin-right: calc(
-            var(--dx-c-featured-content-header-padding-horizontal) * -1
-        );
+        margin-right: var(--dx-c-featured-content-header-image-margin-right);
     }
 
     .img-placement_below img {
-        border-radius: var(--image-radius) 0 0 var(--image-radius);
-    }
-}
-
-@media screen and (min-width: 1400px) {
-    .img-placement_below {
-        --swoop-inset: 680px;
+        border-radius: var(--dx-c-featured-content-header-image-border-radius);
     }
 }
 
 @media screen and (max-width: 1024px) {
     .container {
-        --swoop-height: 14vw;
         --vertical-padding: 80px;
         --bottom-spacing: var(--dx-g-spacing-2xl);
         --item-spacing: var(--dx-g-spacing-md);
     }
 
-    .container:not(.img-placement_below) {
-        --swoop-inset: 64px;
-    }
-
-    .img-placement_inline {
+    .img-placement_inline .container-layout {
         display: grid;
         grid-template-areas: "label" "image" "main";
         grid-template-columns: 100%;
@@ -415,11 +443,11 @@ dx-image-and-label {
         margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
     }
 
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: var(--dx-g-text-xl);
     }
 
-    .dx-text-heading-2 {
+    .dx-text-display-2 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-2xl);
     }
@@ -430,6 +458,14 @@ dx-image-and-label {
         line-height: var(--dx-g-spacing-lg);
     }
 
+    .buttons {
+        flex-direction: column;
+    }
+
+    dx-button {
+        padding-bottom: var(--dx-g-spacing-sm);
+    }
+
     .authors {
         padding-top: 0;
     }