@salesforcedevs/dx-components 1.2.18-lightdom2 → 1.2.18-lightdom3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.18-lightdom2",
+    "version": "1.2.18-lightdom3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/cardCallout/cardCallout.css

@@ -1,57 +1,19 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
 
-.card-callout {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-/* in the callout card's case it needs to be subservient to the other items in the grid */
-.dx-card-base_override-width {
-    height: 100% !important;
-    min-height: unset !important;
-}
-
-/* title */
-
-.dx-text-heading-3 {
-    color: inherit;
-    margin-bottom: var(--dx-g-spacing-3xl);
-    overflow-wrap: hyphenate-word;
-    hyphens: overflow;
-}
-
-/* label */
 
-.dx-text-button-light {
-    color: inherit;
-    margin-top: auto;
-}
-
-/* callout arrow */
-
-dx-icon {
+dx-card-callout dx-icon {
     display: inline;
     color: inherit;
     margin-left: var(--dx-g-spacing-sm);
 }
 
-dx-icon::part(svg) {
+dx-card-callout dx-icon svg {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.card-callout:hover dx-icon::part(svg) {
+.card-callout:hover dx-icon svg {
     transform: translate(var(--dx-g-spacing-xs));
 }
 
-.card-callout:active dx-icon::part(svg) {
+.card-callout:active dx-icon svg {
     transform: translate(var(--dx-g-spacing-2xs));
-}
-
-@media screen and (max-width: 1024px) {
-    .dx-text-heading-3 {
-        margin-bottom: var(--dx-g-spacing-xl);
-    }
-}
+}

package/src/modules/dx/cardCallout/cardCallout.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode='light'>
     <a
         class={className}
         href={href}

package/src/modules/dx/cardCallout/cardCallout.scoped.css

@@ -0,0 +1,45 @@
+:host {
+    display: block;
+
+    --dx-g-card-border: 1px solid var(--dx-g-gray-90);
+    --dx-g-card-border-radius: 16px;
+    --dx-g-card-item-spacing: 12px;
+    --dx-g-card-img-spacing: 20px;
+    --dx-c-body-max-lines: 6;
+}
+
+.card-callout {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* in the callout card's case it needs to be subservient to the other items in the grid */
+.dx-card-base_override-width {
+    height: 100% !important;
+    min-height: unset !important;
+}
+
+/* title */
+
+.dx-text-heading-3 {
+    color: inherit;
+    margin-bottom: var(--dx-g-spacing-3xl);
+    overflow-wrap: hyphenate-word;
+    hyphens: overflow;
+}
+
+/* label */
+
+.dx-text-button-light {
+    color: inherit;
+    margin-top: auto;
+}
+
+/* callout arrow */
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -6,6 +6,8 @@ import { track } from "dxUtils/analytics";
 export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
 
 export default class CardCallout extends LightningElement {
+    static renderMode = 'light';
+    
     @api backgroundColor: string = "indigo-vibrant-40";
     @api color: string = "white";
     @api href!: string;

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

@@ -6,7 +6,7 @@ dx-card-title {
     --dx-c-card-title-icon-size: 22px;
 }
 
-dx-icon {
+dx-card-title dx-icon {
     --dx-c-icon-size: var(--dx-c-card-title-icon-size);
 
     display: inline-flex;

package/src/modules/dx/icon/icon.css

@@ -3,7 +3,7 @@ dx-icon {
     --dx-c-icon-color: currentColor;
 }
 
-svg {
+dx-icon svg {
     display: inherit;
     fill: var(--dx-c-icon-color);
     height: var(--dx-c-icon-size);

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

@@ -2,7 +2,7 @@
 
 /* main card base */
 
-:host { /* TODO: remove this after it has been completely supplanted by .base-card */
+:host {
     display: block;
 
     --dx-g-card-border: 1px solid var(--dx-g-gray-90);